From a1a0b71814da15f76406c035bee1927f4cfd005c Mon Sep 17 00:00:00 2001
From: Adnan Zahir <adnanzaidanz@gmail.com>
Date: Sat, 25 Apr 2026 22:47:59 +0700
Subject: [PATCH] feat: editable po_date

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 226 ++++++++++++++++--
 src/services/api/purchase.ts                  |  13 +
 src/types/api/purchase/purchase.d.ts          |   1 +
 3 files changed, 219 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 6706039c..2f8d5931 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -26,6 +26,8 @@ import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/or
 import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
 
 import Card from '@/components/Card';
+import DateInput from '@/components/input/DateInput';
+import TextArea from '@/components/input/TextArea';
 import {
   CreateAcceptApprovalRequestPayload,
   CreateManagerApprovalRequestPayload,
@@ -96,6 +98,7 @@ const PurchaseOrderDetail = ({
   const acceptRejectionModal = useModal();
   const managerRejectionModal = useModal();
   const editModal = useModal();
+  const editPoDateModal = useModal();
   const penerimaanBarangModal = useModal();
   const deleteModal = useModal();
 
@@ -105,6 +108,9 @@ const PurchaseOrderDetail = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState<PurchaseItem | null>(null);
   const [, setApprovalNotes] = useState('');
+  const [managerApprovalNotes, setManagerApprovalNotes] = useState('');
+  const [managerApprovalPoDate, setManagerApprovalPoDate] = useState('');
+  const [editPoDate, setEditPoDate] = useState('');
 
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
@@ -212,6 +218,8 @@ const PurchaseOrderDetail = ({
         break;
       case 2:
         setApprovalNotes('');
+        setManagerApprovalNotes('');
+        setManagerApprovalPoDate('');
         confirmationModalWithNotes.openModal();
         break;
       case 3:
@@ -414,17 +422,44 @@ const PurchaseOrderDetail = ({
     deleteModal,
   ]);
 
+  const updatePoDateHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : initialValues?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    const res = await PurchaseApi.updatePoDate(purchaseRequestId, {
+      po_date: editPoDate,
+    });
+
+    if (isResponseError(res)) {
+      toast.error(res.message || 'Gagal mengubah tanggal PO');
+      return;
+    }
+
+    toast.success('Tanggal PO berhasil diubah');
+    setEditPoDate('');
+    editPoDateModal.closeModal();
+    refetchData?.();
+  }, [initialValues?.id, searchParams, editPoDate, editPoDateModal, refetchData]);
+
   // ===== APPROVAL/REJECTION HANDLERS =====
-  const managerApprovalHandler = async (notes: string) => {
+  const managerApprovalHandler = async () => {
     const payload: CreateManagerApprovalRequestPayload = {
       action: 'APPROVED',
-      notes: notes || null,
+      notes: managerApprovalNotes || null,
+      po_date: managerApprovalPoDate || null,
     };
 
     await createManagerApprovalHandler(payload);
     await refreshApprovals();
     await refetchData?.();
-    setApprovalNotes('');
+    setManagerApprovalNotes('');
+    setManagerApprovalPoDate('');
     confirmationModalWithNotes.closeModal();
   };
 
@@ -829,6 +864,45 @@ const PurchaseOrderDetail = ({
                   </div>
                 </div>
               </div>
+              {purchaseData.po_date &&
+                !purchaseData.po_date.startsWith('0001') && (
+                  <div className='group'>
+                    <div className='flex items-start'>
+                      <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                        Tanggal PO
+                      </span>
+                      <div className='ml-3 flex items-center gap-1'>
+                        <span className='text-gray-900'>
+                          :{' '}
+                          {formatDate(purchaseData.po_date, 'DD MMM YYYY')}
+                        </span>
+                        <RequirePermission permissions='lti.purchase.update'>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            color='warning'
+                            className='p-1 min-h-0 h-auto'
+                            onClick={() => {
+                              setEditPoDate(
+                                formatDate(
+                                  purchaseData.po_date,
+                                  'YYYY-MM-DD'
+                                )
+                              );
+                              editPoDateModal.openModal();
+                            }}
+                          >
+                            <Icon
+                              icon='material-symbols:edit-outline'
+                              width={14}
+                              height={14}
+                            />
+                          </Button>
+                        </RequirePermission>
+                      </div>
+                    </div>
+                  </div>
+                )}
             </div>
           </div>
         </div>
@@ -1016,27 +1090,78 @@ const PurchaseOrderDetail = ({
         </div>
       </Card>
 
-      {/* Confirmation Modal with Notes */}
-      <ConfirmationModalWithNotes
+      {/* Manager Approval Modal */}
+      <Modal
         ref={confirmationModalWithNotes.ref}
-        type='success'
-        text='Apakah Anda yakin ingin melanjutkan approval ini?'
-        placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
-        rows={4}
         closeOnBackdrop
-        primaryButton={{
-          text: 'Ya, Lanjutkan',
-          color: 'success',
-          onClick: managerApprovalHandler,
+        className={{
+          modalBox: 'max-w-lg rounded-lg p-0',
         }}
-        secondaryButton={{
-          text: 'Batal',
-          onClick: () => {
-            setApprovalNotes('');
-            confirmationModalWithNotes.closeModal();
-          },
-        }}
-      />
+      >
+        <div className='flex flex-col'>
+          <div className='flex items-center justify-between border-b border-base-content/10 p-4'>
+            <h4 className='text-sm font-semibold text-base-content'>
+              Konfirmasi Approval Manager
+            </h4>
+            <Button
+              variant='ghost'
+              color='none'
+              onClick={() => {
+                setManagerApprovalNotes('');
+                setManagerApprovalPoDate('');
+                confirmationModalWithNotes.closeModal();
+              }}
+              className='p-1'
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+
+          <div className='flex flex-col gap-4 p-4'>
+            <p className='text-sm text-base-content/70'>
+              Apakah Anda yakin ingin melanjutkan approval ini?
+            </p>
+
+            <DateInput
+              name='manager_approval_po_date'
+              label='Tanggal PO'
+              value={managerApprovalPoDate}
+              onChange={(e) => setManagerApprovalPoDate(e.target.value)}
+            />
+
+            <TextArea
+              name='manager_approval_notes'
+              label='Catatan (Opsional)'
+              placeholder='Tambahkan catatan untuk approval ini...'
+              value={managerApprovalNotes}
+              onChange={(e) => setManagerApprovalNotes(e.target.value)}
+              rows={4}
+            />
+          </div>
+
+          <div className='flex justify-end gap-3 border-t border-base-content/10 p-4'>
+            <Button
+              variant='outline'
+              color='none'
+              onClick={() => {
+                setManagerApprovalNotes('');
+                setManagerApprovalPoDate('');
+                confirmationModalWithNotes.closeModal();
+              }}
+              className='px-3 py-2.5'
+            >
+              Batal
+            </Button>
+            <Button
+              color='success'
+              onClick={managerApprovalHandler}
+              className='px-3 py-2.5'
+            >
+              Ya, Lanjutkan
+            </Button>
+          </div>
+        </div>
+      </Modal>
 
       {/* Staff Approval Modal */}
       <Modal
@@ -1112,6 +1237,65 @@ const PurchaseOrderDetail = ({
         />
       </Modal>
 
+      {/* Edit PO Date Modal */}
+      <Modal
+        ref={editPoDateModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-sm rounded-lg p-0',
+        }}
+      >
+        <div className='flex flex-col'>
+          <div className='flex items-center justify-between border-b border-base-content/10 p-4'>
+            <h4 className='text-sm font-semibold text-base-content'>
+              Edit Tanggal PO
+            </h4>
+            <Button
+              variant='ghost'
+              color='none'
+              onClick={() => {
+                setEditPoDate('');
+                editPoDateModal.closeModal();
+              }}
+              className='p-1'
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+
+          <div className='flex flex-col gap-4 p-4'>
+            <DateInput
+              name='edit_po_date'
+              label='Tanggal PO'
+              value={editPoDate}
+              onChange={(e) => setEditPoDate(e.target.value)}
+            />
+          </div>
+
+          <div className='flex justify-end gap-3 border-t border-base-content/10 p-4'>
+            <Button
+              variant='outline'
+              color='none'
+              onClick={() => {
+                setEditPoDate('');
+                editPoDateModal.closeModal();
+              }}
+              className='px-3 py-2.5'
+            >
+              Batal
+            </Button>
+            <Button
+              color='primary'
+              onClick={updatePoDateHandler}
+              className='px-3 py-2.5'
+              disabled={!editPoDate}
+            >
+              Simpan
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Staff Rejection Modal */}
       <ConfirmationModalWithNotes
         ref={staffRejectionModal.ref}
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 990ed9ff..7d51ad4c 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -115,6 +115,19 @@ export const PurchaseApi = {
     },
   },
 
+  updatePoDate: async (
+    purchaseRequestId: number,
+    payload: { po_date: string }
+  ): Promise<BaseApiResponse<Purchase> | undefined> => {
+    return await basePurchaseApi.customRequest<BaseApiResponse<Purchase>>(
+      `${purchaseRequestId}/po-date`,
+      {
+        method: 'PATCH',
+        payload,
+      }
+    );
+  },
+
   async exportToExcel(initialQueryString: string) {
     const params = new URLSearchParams(initialQueryString);
 
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 615c2e5c..98e76aab 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -123,6 +123,7 @@ export type UpdateStaffApprovalRequestPayload = {
 export type CreateManagerApprovalRequestPayload = {
   action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
+  po_date?: string | null;
 };
 
 export type CreateAcceptApprovalRequestPayload = {