feat: implement unified delete dialog component and update related pages

app/pages/dashboard-subscribe-plan/index.tsx

@@ -9,6 +9,7 @@ import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
@@ -16,8 +17,6 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
 import { formatNumberWithPeriods } from '~/utils/formatter'
 
-import { DialogDelete } from './dialog-delete'
-
 export const SubscribePlanPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.subscribe-plan._index',
@@ -132,7 +131,16 @@ export const SubscribePlanPage = () => {
       <DialogDelete
         selectedItem={selectedSubscribePlan}
         setSelectedItem={setSelectedSubscribePlan}
-      />
+        title="Subscribe plan"
+        fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
+      >
+        <p>{selectedSubscribePlan?.name}</p>
+        <p>Length: {selectedSubscribePlan?.length}</p>
+        <p>
+          Harga: Rp.{' '}
+          {formatNumberWithPeriods(selectedSubscribePlan?.price || 0)}
+        </p>
+      </DialogDelete>
     </div>
   )
 }