refactor(FE-316): Replace bulk delete with single-item delete

src/components/pages/uniformity/UniformityTable.tsx

@@ -165,7 +165,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
   const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
 
   const singleDeleteModal = useModal();
-  const bulkDeleteModal = useModal();
   const successModal = useModal();
   const singleApproveModal = useModal();
   const singleRejectModal = useModal();
@@ -275,34 +274,18 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
     }
   }, [selectedUniformity?.id, refreshUniformities, singleRejectModal]);
 
-  const handleBulkDelete = useCallback(() => {
-    bulkDeleteModal.openModal();
-  }, [bulkDeleteModal]);
-
-  const bulkDeleteHandler = useCallback(async () => {
-    setIsBulkActionLoading(true);
-
-    try {
-      await UniformityApi.bulkDelete(selectedRowIds);
-
-      setRowSelection({});
-      refreshUniformities();
-
-      bulkDeleteModal.closeModal();
-      toast.success(
-        `Successfully deleted ${selectedRowIds.length} Uniformity data!`
-      );
-    } catch {
-      toast.error('Failed to delete Uniformity data');
-    } finally {
-      setIsBulkActionLoading(false);
-    }
-  }, [selectedRowIds, refreshUniformities, bulkDeleteModal]);
-
   const handleCloseFab = useCallback(() => {
     setRowSelection({});
   }, []);
 
+  const handleDelete = useCallback(() => {
+    if (selectedRowIds.length === 1) {
+      const uniformity = selectedUniformities[0];
+      setSelectedUniformity(uniformity);
+      singleDeleteModal.openModal();
+    }
+  }, [selectedRowIds, selectedUniformities, singleDeleteModal]);
+
   const handleBulkApprove = useCallback(() => {
     bulkApproveModal.openModal();
   }, [bulkApproveModal]);
@@ -605,30 +588,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           </div>
         </ConfirmationModal>
 
-        <ConfirmationModal
-          ref={bulkDeleteModal.ref}
-          type='error'
-          iconPosition='left'
-          text={`Delete This Data?`}
-          subtitleText={`Are you sure you want to delete this data? (${selectedRowIds.length} data)`}
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Delete',
-            color: 'primary',
-            isLoading: isBulkActionLoading,
-            onClick: bulkDeleteHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            <UniformityConfirmationPreview />
-          </div>
-        </ConfirmationModal>
-
         <ConfirmationModal
           ref={singleApproveModal.ref}
           type='success'
@@ -744,7 +703,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
               action: 'DELETE',
               icon: 'mdi:delete-outline',
               label: 'Delete',
-              onClick: handleBulkDelete,
+              hidden: selectedRowIds.length !== 1,
+              onClick: handleDelete,
               permissions: 'lti.production.uniformity.delete',
             },
           ]}

src/services/api/uniformity.ts

@@ -107,18 +107,10 @@ export class UniformityApiService extends BaseApiService<
     );
   }
 
-  async bulkDelete(
-    ids: number[]
-  ): Promise<BaseApiResponse<Uniformity[]> | undefined> {
-    return await this.customRequest<BaseApiResponse<Uniformity[]>>(
-      'bulk-delete',
-      {
-        method: 'POST',
-        payload: {
-          ids,
-        },
-      }
-    );
+  async delete(id: number): Promise<BaseApiResponse<Uniformity> | undefined> {
+    return await this.customRequest<BaseApiResponse<Uniformity>>(`/${id}`, {
+      method: 'DELETE',
+    });
   }
 }