feat(FE): Add delete functionality to Inventory and Movement tables

src/components/pages/inventory/movement/MovementTable.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react';
 import { usePathname } from 'next/navigation';
-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
 import { useFormik } from 'formik';
 
@@ -21,6 +21,8 @@ import { cn } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { useUiStore } from '@/stores/ui/ui.store';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { useSelect } from '@/components/input/SelectInput';
@@ -41,9 +43,11 @@ import {
 const RowOptionsMenu = ({
   popoverPosition = 'bottom',
   props,
+  deleteClickHandler,
 }: {
   popoverPosition: 'bottom' | 'top';
   props: CellContext<Movement, unknown>;
+  deleteClickHandler: () => void;
 }) => {
   const popoverId = `movement#${props.row.original.id}`;
   const popoverAnchorName = `--anchor-movement#${props.row.original.id}`;
@@ -83,6 +87,20 @@ const RowOptionsMenu = ({
               Detail
             </Button>
           </RequirePermission>
+          <RequirePermission permissions='lti.inventory.transfer.delete'>
+            <Button
+              onClick={() => {
+                deleteClickHandler();
+                closePopover();
+              }}
+              variant='ghost'
+              color='error'
+              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
+            >
+              <Icon icon='mdi:delete-outline' width={20} height={20} />
+              Delete
+            </Button>
+          </RequirePermission>
         </div>
       </PopoverContent>
     </div>
@@ -206,12 +224,31 @@ const MovementTable = () => {
   };
 
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedMovement, setSelectedMovement] = useState<Movement | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const singleDeleteModal = useModal();
 
-  const { data: movements, isLoading } = useSWR(
+  const { data: movements, isLoading, mutate: refreshMovements } = useSWR(
     `${MovementApi.basePath}${getTableFilterQueryString()}`,
     MovementApi.getAllFetcher
   );
 
+  const singleDeleteHandler = async () => {
+    setIsDeleteLoading(true);
+
+    const response = await MovementApi.delete(selectedMovement?.id as number);
+
+    singleDeleteModal.closeModal();
+    setIsDeleteLoading(false);
+
+    if (isResponseSuccess(response)) {
+      toast.success(response?.message || 'Successfully delete Movement!');
+      refreshMovements();
+    } else {
+      toast.error(response?.message || 'Failed to delete Movement');
+    }
+  };
+
   useEffect(() => {
     updateFilter('search', searchValue);
   }, [searchValue, updateFilter]);
@@ -275,16 +312,22 @@ const MovementTable = () => {
 
           const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
+          const deleteClickHandler = () => {
+            setSelectedMovement(props.row.original);
+            singleDeleteModal.openModal();
+          };
+
           return (
             <RowOptionsMenu
               props={props}
+              deleteClickHandler={deleteClickHandler}
               popoverPosition={isLast2Rows ? 'top' : 'bottom'}
             />
           );
         },
       },
     ],
-    [tableFilterState.pageSize, tableFilterState.page]
+    [tableFilterState.pageSize, tableFilterState.page, singleDeleteModal, setSelectedMovement]
   );
 
   return (
@@ -455,6 +498,21 @@ const MovementTable = () => {
           </div>
         </form>
       </Modal>
+
+      <ConfirmationModal
+        ref={singleDeleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: singleDeleteHandler,
+        }}
+      />
     </>
   );
 };