feat(FE-114): add bulk action functionality for approving, rejecting, and deleting recordings in RecordingTable

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

@@ -176,10 +176,16 @@ const RecordingTable = () => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
   const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
+  const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
 
-  const deleteModal = useModal();
+  const singleDeleteModal = useModal();
+  const bulkDeleteModal = useModal();
+  const bulkApproveModal = useModal();
+  const bulkRejectModal = useModal();
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -198,14 +204,6 @@ const RecordingTable = () => {
     []
   );
 
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      deleteModal.closeModal();
-    }, 1000);
-  };
-
   const paginatedData = useMemo(() => {
     const filteredData = dummyRecordings.filter(
       (recording) =>
@@ -217,6 +215,53 @@ const RecordingTable = () => {
     return filteredData.slice(start, start + pageSize);
   }, [page, pageSize, search]);
 
+  const bulkApproveHandler = async () => {
+    setIsBulkApproveLoading(true);
+    console.log(
+      'Approved recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkApproveLoading(false);
+      setSelectedRecordings([]);
+      bulkApproveModal.closeModal();
+    }, 1000);
+  };
+
+  const bulkRejectHandler = async () => {
+    setIsBulkRejectLoading(true);
+    console.log(
+      'Rejected recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkRejectLoading(false);
+      setSelectedRecordings([]);
+      bulkRejectModal.closeModal();
+    }, 1000);
+  };
+
+  const singleDeleteHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      singleDeleteModal.closeModal();
+    }, 1000);
+  };
+
+  const bulkDeleteHandler = async () => {
+    setIsDeleteLoading(true);
+    console.log(
+      'Deleted recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      setSelectedRecordings([]);
+      bulkDeleteModal.closeModal();
+    }, 1000);
+  };
+
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex flex-col gap-2 mb-4'>
@@ -238,9 +283,143 @@ const RecordingTable = () => {
         />
       </div>
 
+      {/* Bulk action buttons */}
+      <div className={'flex justify-end items-center'}>
+        {selectedRecordings.length > 0 && (
+          <div className='flex gap-2 mb-4'>
+            <Button
+              type='button'
+              color='success'
+              onClick={() => bulkApproveModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:check-circle-outline'
+                width={20}
+                height={20}
+              />
+              Approve ({selectedRecordings.length})
+            </Button>
+            <Button
+              type='button'
+              color='error'
+              onClick={() => bulkRejectModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:cancel-outline'
+                width={20}
+                height={20}
+              />
+              Reject ({selectedRecordings.length})
+            </Button>
+            <Button
+              type='button'
+              color='error'
+              variant='outline'
+              onClick={() => bulkDeleteModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:delete-outline'
+                width={20}
+                height={20}
+              />
+              Delete Selected ({selectedRecordings.length})
+            </Button>
+          </div>
+        )}
+
+        <ConfirmationModal
+          ref={bulkApproveModal.ref}
+          type='success'
+          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'success',
+            isLoading: isBulkApproveLoading,
+            onClick: bulkApproveHandler,
+          }}
+        />
+
+        <ConfirmationModal
+          ref={bulkRejectModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isBulkRejectLoading,
+            onClick: bulkRejectHandler,
+          }}
+        />
+
+        <ConfirmationModal
+          ref={bulkDeleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: bulkDeleteHandler,
+          }}
+        />
+      </div>
+
       <Table
         data={paginatedData}
         columns={[
+          {
+            id: 'select',
+            accessorKey: 'id',
+            header: ({ table }) => (
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={
+                  table.getRowModel().rows.length > 0 &&
+                  table
+                    .getRowModel()
+                    .rows.every((row) => selectedRecordings.includes(row.index))
+                }
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings(
+                      table.getRowModel().rows.map((row) => row.index)
+                    );
+                  } else {
+                    setSelectedRecordings([]);
+                  }
+                }}
+              />
+            ),
+            cell: ({ row }) => (
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={selectedRecordings.includes(row.index)}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings([...selectedRecordings, row.index]);
+                  } else {
+                    setSelectedRecordings(
+                      selectedRecordings.filter((i) => i !== row.index)
+                    );
+                  }
+                }}
+              />
+            ),
+          },
           {
             header: '#',
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
@@ -286,7 +465,7 @@ const RecordingTable = () => {
 
               const deleteClickHandler = () => {
                 setSelectedRecording(props.row.original);
-                deleteModal.openModal();
+                singleDeleteModal.openModal();
               };
 
               return (
@@ -338,7 +517,7 @@ const RecordingTable = () => {
       />
 
       <ConfirmationModal
-        ref={deleteModal.ref}
+        ref={singleDeleteModal.ref}
         type='error'
         text={`Apakah anda yakin ingin menghapus data Recording ini?`}
         secondaryButton={{
@@ -348,7 +527,7 @@ const RecordingTable = () => {
           text: 'Ya',
           color: 'error',
           isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
+          onClick: singleDeleteHandler,
         }}
       />
     </div>