refactor: update button styles and improve delete dialog properties in dashboard pages

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

@@ -1,5 +1,11 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/20/solid'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
@@ -10,10 +16,14 @@ 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',
   )
+  const [selectedSubscribePlan, setSelectedSubscribePlan] =
+    useState<TSubscribePlanResponse>()
 
   DataTable.use(DT)
   const { subscribePlanData: dataTable } = loaderData || {}
@@ -43,7 +53,7 @@ export const SubscribePlanPage = () => {
       data: 'length',
     },
     {
-      title: 'Price',
+      title: 'Harga',
       data: 'price',
     },
     {
@@ -70,14 +80,25 @@ export const SubscribePlanPage = () => {
       data.code === 'basic' ? (
         ''
       ) : (
-        <Button
-          as="a"
-          href={`/lg-admin/subscribe-plan/update/${value}`}
-          className="text-md rounded-md"
-          size="sm"
-        >
-          Update Subscribe Plan
-        </Button>
+        <div className="flex space-x-2">
+          <Button
+            as="a"
+            href={`/lg-admin/subscribe-plan/update/${value}`}
+            size="icon"
+            title="Update Subscribe Plan"
+          >
+            <PencilSquareIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            size="icon"
+            variant="newsDanger"
+            onClick={() => setSelectedSubscribePlan(data)}
+            title="Hapus Subscribe Plan"
+          >
+            <TrashIcon className="h-4 w-4" />
+          </Button>
+        </div>
       ),
   }
   return (
@@ -88,10 +109,10 @@ export const SubscribePlanPage = () => {
         <Button
           as={Link}
           to="/lg-admin/subscribe-plan/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
-          Buat Subscribe Plan
+          <PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
         </Button>
       </div>
 
@@ -107,6 +128,11 @@ export const SubscribePlanPage = () => {
         }}
         title=" Daftar Subscribe Plan"
       />
+
+      <DialogDelete
+        selectedItem={selectedSubscribePlan}
+        setSelectedItem={setSelectedSubscribePlan}
+      />
     </div>
   )
 }