refactor: update DialogDelete component to use selectedId and close callback

app/components/dialog/delete.tsx

@@ -5,31 +5,21 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react'
-import {
-  useEffect,
-  type Dispatch,
-  type PropsWithChildren,
-  type SetStateAction,
-} from 'react'
+import { useEffect, type PropsWithChildren } from 'react'
 import toast from 'react-hot-toast'
 import { useFetcher } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 
-type T = {
-  id: string
-} & any // eslint-disable-line @typescript-eslint/no-explicit-any
-
 type TProperties = PropsWithChildren & {
-  selectedItem?: T
-  setSelectedItem: Dispatch<SetStateAction<T | undefined>>
+  selectedId?: string
+  close: () => void
   title: string
   fetcherAction: string
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem, children, title, fetcherAction } =
-    properties || {}
+  const { selectedId, close, children, title, fetcherAction } = properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -39,7 +29,7 @@ export const DialogDelete = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
+      close()
       toast.success(`${title} berhasil dihapus!`)
       return
     }
@@ -48,10 +38,10 @@ export const DialogDelete = (properties: TProperties) => {
 
   return (
     <Dialog
-      open={!!selectedItem}
+      open={!!selectedId}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          setSelectedItem(undefined)
+          close()
         }
       }}
       className="relative z-50"