feat(FE-208): add staff and accept approval modals with action buttons in PurchaseOrderDetail

src/components/pages/purchase/PurchaseTable.tsx

@@ -22,8 +22,6 @@ import TextInput from '@/components/input/TextInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
-import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
-import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -111,8 +109,6 @@ const PurchaseTable = () => {
 
   // Modal hooks
   const deleteModal = useModal();
-  const staffApprovalModal = useModal();
-  const acceptApprovalModal = useModal();
 
   // Supplier modal
   const {
@@ -287,30 +283,7 @@ const PurchaseTable = () => {
                 Tambah
               </Button>
 
-              <Button
+  
-                onClick={() => staffApprovalModal.openModal()}
-                variant='outline'
-                color='info'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='mdi:account-check-outline' width={24} height={24} />
-                Staff Approval
-              </Button>
-
-              <Button
-                onClick={() => acceptApprovalModal.openModal()}
-                variant='outline'
-                color='success'
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='mdi:package-variant-closed-check'
-                  width={24}
-                  height={24}
-                />
-                Accept Approval
-              </Button>
-
               {selectedRowIds.length > 0 && (
                 <Button
                   variant='outline'
@@ -447,34 +420,6 @@ const PurchaseTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Staff Approval Modal */}
-      <Modal
-        ref={staffApprovalModal.ref}
-        closeOnBackdrop
-        className={{
-          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
-        }}
-      >
-        <PurchaseOrderStaffApprovalForm
-          type='add'
-          onCancel={staffApprovalModal.closeModal}
-        />
-      </Modal>
-
-      {/* Accept Approval Modal */}
-      <Modal
-        ref={acceptApprovalModal.ref}
-        closeOnBackdrop
-        className={{
-          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
-        }}
-      >
-        <PurchaseOrderAcceptApprovalForm
-          type='add'
-          onCancel={acceptApprovalModal.closeModal}
-        />
-      </Modal>
     </>
   );
 };

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -7,6 +7,12 @@ import ApprovalSteps, {
   formatGroupedApprovalsToApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useModal } from '@/components/Modal';
+import Modal from '@/components/Modal';
+import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
+import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
@@ -283,6 +289,10 @@ const PurchaseOrderDetail = ({
   type = 'detail',
   data,
 }: PurchaseOrderDetailProps) => {
+  // ===== MODAL HOOKS =====
+  const staffApprovalModal = useModal();
+  const acceptApprovalModal = useModal();
+
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
   const purchaseOrderItems = purchaseData.items || [];
@@ -458,6 +468,33 @@ const PurchaseOrderDetail = ({
 
   return (
     <section className='w-full'>
+      {/* Approval Action Buttons */}
+      <div className='flex flex-wrap gap-3 my-6'>
+        <Button
+          onClick={() => staffApprovalModal.openModal()}
+          variant='outline'
+          color='info'
+          className='w-full sm:w-fit'
+        >
+          <Icon icon='mdi:account-check-outline' width={20} height={20} />
+          Staff Approval
+        </Button>
+
+        <Button
+          onClick={() => acceptApprovalModal.openModal()}
+          variant='outline'
+          color='success'
+          className='w-full sm:w-fit'
+        >
+          <Icon
+            icon='mdi:package-variant-closed-check'
+            width={20}
+            height={20}
+          />
+          Accept Approval
+        </Button>
+      </div>
+
       {/* Steps */}
       {approvalSteps.length > 0 ? (
         <div className='my-8'>
@@ -509,7 +546,7 @@ const PurchaseOrderDetail = ({
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Gudang Penyimpanan
+                    Gudang
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     {purchaseData.warehouse?.name || '-'}
@@ -652,7 +689,7 @@ const PurchaseOrderDetail = ({
           wrapper: 'w-full mt-8',
         }}
       >
-        <div className='rounded-lg border border-gray-200 overflow-hidden'>
+        <div className='rounded-lg border border-gray-200 overflow-hidden mt-8'>
           <div className='overflow-x-auto'>
             <Table<PurchaseItem>
               data={goodsReceiptItems}
@@ -675,6 +712,34 @@ const PurchaseOrderDetail = ({
           </div>
         </div>
       </Card>
+
+      {/* Staff Approval Modal */}
+      <Modal
+        ref={staffApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='add'
+          onCancel={staffApprovalModal.closeModal}
+        />
+      </Modal>
+
+      {/* Accept Approval Modal */}
+      <Modal
+        ref={acceptApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='add'
+          onCancel={acceptApprovalModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };