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

app/apis/admin/delete-subscribe-plan.ts

@@ -9,14 +9,12 @@ const subscribePlanResponseSchema = z.object({
   }),
 })
 
-type TTSubscribePlanId = Pick<TSubscribePlanSchema, 'id'>
 type TParameters = {
-  payload: TTSubscribePlanId
+  id: TSubscribePlanSchema['id']
 } & THttpServer
 
 export const deleteSubscribePlanRequest = async (parameters: TParameters) => {
-  const { payload, ...restParameters } = parameters
+  const { id, ...restParameters } = parameters
-  const { id } = payload
   try {
     const { data } = await HttpServer(restParameters).delete(
       `/api/subscribe-plan/${id}/delete`,

app/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         newsPrimary:
           'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
         newsDanger:
-          'bg-red-500 text-white text-lg hover:bg-red-600 hover:shadow transition active:bg-red-700',
+          'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
         newsPrimaryOutline:
           'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
         newsSecondary:

app/pages/dashboard-advertisements/dialog-delete.tsx

@@ -13,12 +13,12 @@ import type { TAdResponse } from '~/apis/common/get-ads'
 import { Button } from '~/components/ui/button'
 
 type TProperties = {
-  selectedAds?: TAdResponse
+  selectedItem?: TAdResponse
-  setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
+  setSelectedItem: Dispatch<SetStateAction<TAdResponse | undefined>>
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedAds, setSelectedAds } = properties || {}
+  const { selectedItem, setSelectedItem } = properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -28,7 +28,7 @@ export const DialogDelete = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success === true) {
-      setSelectedAds(undefined)
+      setSelectedItem(undefined)
       toast.success('Banner iklan berhasil dihapus!')
       return
     }
@@ -37,10 +37,10 @@ export const DialogDelete = (properties: TProperties) => {
 
   return (
     <Dialog
-      open={!!selectedAds}
+      open={!!selectedItem}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          setSelectedAds(undefined)
+          setSelectedItem(undefined)
         }
       }}
       className="relative z-50"
@@ -60,23 +60,23 @@ export const DialogDelete = (properties: TProperties) => {
           </DialogTitle>
           <Description className="space-y-1 text-center text-[#565658]">
             <img
-              src={selectedAds?.image_url}
+              src={selectedItem?.image_url}
-              alt={selectedAds?.image_url}
+              alt={selectedItem?.image_url}
               className="aspect-[150/1] h-[50px] rounded object-contain"
             />
             <Button
               as={Link}
-              to={selectedAds?.url || ''}
+              to={selectedItem?.url || ''}
               variant="link"
               size="fit"
             >
-              {selectedAds?.url}
+              {selectedItem?.url}
             </Button>
           </Description>
           <div className="flex justify-end">
             <fetcher.Form
               method="POST"
-              action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+              action={`/actions/admin/advertisements/delete/${selectedItem?.id}`}
               className="grid"
             >
               <Button

app/pages/dashboard-advertisements/index.tsx

@@ -57,7 +57,6 @@ export const AdvertisementsPage = () => {
         <Button
           as="a"
           href={`/lg-admin/advertisements/update/${value}`}
-          className=""
           size="icon"
           title="Update Banner Iklan"
         >
@@ -86,6 +85,7 @@ export const AdvertisementsPage = () => {
           as={Link}
           to="/lg-admin/advertisements/create"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
           <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
         </Button>
@@ -99,8 +99,8 @@ export const AdvertisementsPage = () => {
       />
 
       <DialogDelete
-        selectedAds={selectedAds}
+        selectedItem={selectedAds}
-        setSelectedAds={setSelectedAds}
+        setSelectedItem={setSelectedAds}
       />
     </div>
   )

app/pages/dashboard-categories/index.tsx

@@ -81,8 +81,8 @@ export const CategoriesPage = () => {
         <Button
           as={Link}
           to="/lg-admin/categories/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
           Buat Kategori
         </Button>

app/pages/dashboard-contents/index.tsx

@@ -107,8 +107,8 @@ export const ContentsPage = () => {
         <Button
           as={Link}
           to="/lg-admin/contents/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
           Buat Artikel
         </Button>

app/pages/dashboard-subscribe-plan/dialog-delete.tsx

@@ -0,0 +1,90 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import { useEffect, type Dispatch, type SetStateAction } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
+import { Button } from '~/components/ui/button'
+import { formatNumberWithPeriods } from '~/utils/formatter'
+
+type TProperties = {
+  selectedItem?: TSubscribePlanResponse
+  setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
+}
+
+export const DialogDelete = (properties: TProperties) => {
+  const { selectedItem, setSelectedItem } = properties || {}
+  const fetcher = useFetcher()
+
+  useEffect(() => {
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      setSelectedItem(undefined)
+      toast.success('Subscribe plan berhasil dihapus!')
+      return
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <Dialog
+      open={!!selectedItem}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setSelectedItem(undefined)
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+        >
+          <DialogTitle className="relative flex justify-start text-xl font-bold">
+            Anda akan menghapus subscribe plan berikut?
+          </DialogTitle>
+          <Description className="space-y-1 text-center text-[#565658]">
+            <p>{selectedItem?.name}</p>
+            <p>Length: {selectedItem?.length}</p>
+            <p>
+              Harga: Rp. {formatNumberWithPeriods(selectedItem?.price || 0)}
+            </p>
+          </Description>
+          <div className="flex justify-end">
+            <fetcher.Form
+              method="POST"
+              action={`/actions/admin/subscribe-plan/delete/${selectedItem?.id}`}
+              className="grid"
+            >
+              <Button
+                type="submit"
+                variant="newsDanger"
+                className="text-md h-[42px] rounded-md"
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+              >
+                Hapus
+              </Button>
+            </fetcher.Form>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

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' ? (
         ''
       ) : (
+        <div className="flex space-x-2">
           <Button
             as="a"
             href={`/lg-admin/subscribe-plan/update/${value}`}
-          className="text-md rounded-md"
+            size="icon"
-          size="sm"
+            title="Update Subscribe Plan"
           >
-          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>
   )
 }

app/pages/dashboard-tags/index.tsx

@@ -66,8 +66,8 @@ export const TagsPage = () => {
         <Button
           as={Link}
           to="/lg-admin/tags/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
           Buat Tag
         </Button>

app/routes/actions.admin.subscribe-plan.delete.$id.ts

@@ -0,0 +1,48 @@
+import { data } from 'react-router'
+import { XiorError } from 'xior'
+
+import { deleteSubscribePlanRequest } from '~/apis/admin/delete-subscribe-plan'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.admin.advertisements.create'
+
+export const action = async ({ request, params }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { id } = params
+  try {
+    const { data: subscribePlanData } = await deleteSubscribePlanRequest({
+      accessToken,
+      id,
+    })
+
+    return data(
+      {
+        success: true,
+        subscribePlanData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}