feat(FE-137): enhance RecordingTable to support recording deletion with user feedback and refresh functionality

src/components/pages/production/recording/RecordingTable.tsx

@@ -19,6 +19,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 import { RecordingApi } from '@/services/api/production';
+import toast from 'react-hot-toast';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -82,7 +83,7 @@ const RecordingTable = () => {
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -94,6 +95,7 @@ const RecordingTable = () => {
   const {
     data: recordings,
     isLoading,
+    mutate: refreshRecordings,
   } = useSWR(
     `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
     RecordingApi.getAllFetcher
@@ -154,10 +156,13 @@ const RecordingTable = () => {
 
   const singleDeleteHandler = async () => {
     setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      singleDeleteModal.closeModal();
-    }, 1000);
+
+    await RecordingApi.delete(selectedRecording?.id as number);
+    refreshRecordings();
+
+    singleDeleteModal.closeModal();
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
   };
 
   return (
@@ -338,10 +343,6 @@ const RecordingTable = () => {
             header: 'Ketepatan Waktu',
             cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
           },
-          {
-            header: 'Status Perubahan',
-            cell: (props) => 'Tidak ada perubahan',
-          },
           {
             header: 'Tanggal Submit',
             cell: (props) =>
@@ -417,7 +418,7 @@ const RecordingTable = () => {
       <ConfirmationModal
         ref={singleDeleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Recording ini?`}
+        text={`Apakah anda yakin ingin menghapus data Recording ini (ID: ${selectedRecording?.id})?`}
         secondaryButton={{
           text: 'Tidak',
         }}