feat: use TransferToLayingConfirmationModal and remove unnecessary code

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -14,9 +14,7 @@ import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import CheckboxInput from '@/components/input/CheckboxInput';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import RequirePermission from '@/components/helper/RequirePermission';
 import PopoverButton from '@/components/popover/PopoverButton';
 import Badge from '@/components/Badge';
@@ -24,13 +22,14 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import Dropdown from '@/components/Dropdown';
 import StatusBadge from '@/components/helper/StatusBadge';
 import TransferToLayingFilterModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFilterModal';
+import TransferToLayingConfirmationModal from '@/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal';
 
 import {
   TransferToLaying,
   TransferToLayingFilter,
 } from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { cn, formatDate } from '@/lib/helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Color } from '@/types/theme';
@@ -38,14 +37,11 @@ import { Color } from '@/types/theme';
 const RowOptionsMenu = ({
   props,
   popoverPosition = 'bottom',
-  approveClickHandler,
-  rejectClickHandler,
+
   deleteClickHandler,
 }: {
   props: CellContext<TransferToLaying, unknown>;
   popoverPosition: 'bottom' | 'top';
-  approveClickHandler: () => void;
-  rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
   const showEditButton =
@@ -54,9 +50,6 @@ const RowOptionsMenu = ({
 
   const showDeleteButton = showEditButton;
 
-  // const showApproveButton = showEditButton;
-  // const showRejectButton = showEditButton;
-
   const popoverId = `transferToLaying#${props.row.original.id}`;
   const popoverAnchorName = `--anchor-transferToLaying#${props.row.original.id}`;
 
@@ -260,7 +253,14 @@ const TransferToLayingsTable = () => {
     {
       accessorKey: 'usage_qty',
       header: 'Kuantitas',
-      cell: (props) => props.getValue() ?? props.row.original.pending_usage_qty,
+      cell: (props) => {
+        const totalQuantity = props.row.original.targets.reduce(
+          (total, target) => total + target.qty,
+          0
+        );
+
+        return formatNumber(totalQuantity, 'en-US');
+      },
     },
     {
       accessorKey: 'notes',
@@ -304,38 +304,20 @@ const TransferToLayingsTable = () => {
 
         const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-        const approveClickHandler = () => {
-          setSelectedTransferToLaying(props.row.original);
-
-          // Set row selection
-          setRowSelection({
-            [String(props.row.original.id)]: true,
-          });
-
-          approveModal.openModal();
-        };
-
-        const rejectClickHandler = () => {
-          setSelectedTransferToLaying(props.row.original);
-
-          // Set row selection
-          setRowSelection({
-            [String(props.row.original.id)]: true,
-          });
-
-          rejectModal.openModal();
-        };
-
         const deleteClickHandler = () => {
           setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
           deleteModal.openModal();
         };
 
         return (
           <RowOptionsMenu
             props={props}
-            approveClickHandler={approveClickHandler}
-            rejectClickHandler={rejectClickHandler}
             deleteClickHandler={deleteClickHandler}
             popoverPosition={isLast2Rows ? 'top' : 'bottom'}
           />
@@ -377,6 +359,8 @@ const TransferToLayingsTable = () => {
 
     refreshTransferToLayings();
 
+    setRowSelection({});
+    setSelectedTransferToLaying(undefined);
     deleteModal.closeModal();
     toast.success('Berhasil menghapus data transfer ke laying!');
     setIsDeleteLoading(false);
@@ -646,53 +630,70 @@ const TransferToLayingsTable = () => {
         onReset={filterResetHandler}
       />
 
-      <ConfirmationModal
+      <TransferToLayingConfirmationModal
         ref={deleteModal.ref}
-        iconPosition='left'
         type='error'
         text='Delete This Data?'
         subtitleText='Are you sure you want to delete this data? '
+        transferToLayingIds={selectedRowIds}
+        primaryButton={{
+          isLoading: isDeleteLoading,
+          color: 'error',
+          onClick: confirmationModalDeleteClickHandler,
+        }}
         secondaryButton={{
           text: 'Cancel',
-        }}
-        primaryButton={{
-          text: 'Delete',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
+          color: 'none',
+          onClick: () => {
+            setRowSelection({});
+            deleteModal.closeModal();
+          },
         }}
       />
 
-      <ConfirmationModalWithNotes
+      {/* Approve Modal */}
+      <TransferToLayingConfirmationModal
         ref={approveModal.ref}
-        type='success'
-        iconPosition='left'
         text='Approve This Submission?'
         subtitleText='Are you sure you want to approve this submission?'
-        secondaryButton={{
-          text: 'Cancel',
-        }}
+        type='success'
+        transferToLayingIds={selectedRowIds}
+        withNote
+        noteLabel='Notes Approval'
         primaryButton={{
-          text: 'Approve',
-          color: 'success',
           isLoading: isApproveLoading,
           onClick: confirmationModalApproveClickHandler,
         }}
-      />
-
-      <ConfirmationModalWithNotes
-        ref={rejectModal.ref}
-        type='error'
-        iconPosition='left'
-        text='Reject This Submission?'
-        subtitleText='Are you sure you want to reject this submission?'
         secondaryButton={{
           text: 'Cancel',
+          color: 'none',
+          onClick: () => {
+            setRowSelection({});
+            approveModal.closeModal();
+          },
+        }}
+      />
+
+      {/* Reject Modal */}
+      <TransferToLayingConfirmationModal
+        ref={rejectModal.ref}
+        type='error'
+        text='Reject This Submission?'
+        subtitleText='Are you sure you want to reject this submission?'
+        transferToLayingIds={selectedRowIds}
+        withNote
+        noteLabel='Notes Reject'
+        secondaryButton={{
+          text: 'Cancel',
+          color: 'none',
+          onClick: () => {
+            setRowSelection({});
+            rejectModal.closeModal();
+          },
         }}
         primaryButton={{
-          text: 'Reject',
-          color: 'error',
           isLoading: isRejectLoading,
+          color: 'error',
           onClick: confirmationModalRejectClickHandler,
         }}
       />