From d93f0c26b6f3df8b4ecdb881f7b165116ea9d7d7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:32:24 +0700
Subject: [PATCH] refactor(FE-212): update PurchaseOrderDetail component to use
 initialValues prop instead of data

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 98940a13..46550f24 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -68,15 +68,12 @@ const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
 
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
-  data?: Purchase;
+  initialValues?: Purchase;
 }
 
-
-
-
 const PurchaseOrderDetail = ({
   type = 'detail',
-  data,
+  initialValues,
 }: PurchaseOrderDetailProps) => {
   // ===== MODAL HOOKS =====
   const searchParams = useSearchParams();
@@ -99,33 +96,38 @@ const PurchaseOrderDetail = ({
 
   // ===== COMPUTED VALUES =====
   const purchaseOrderItems = useMemo(
-    () => data?.items || [],
-    [data?.items]
+    () => initialValues?.items || [],
+    [initialValues?.items]
   );
 
-  // Create goods receipt items from received items
   const goodsReceiptItems = useMemo(() => {
-    return purchaseOrderItems.filter(item => item.received_date);
+    return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
-  // Create simple approval steps from single approval data
   const approvalSteps = useMemo(() => {
-    if (!data?.approval) return [];
+    if (!initialValues?.approval) return [];
 
-    // Create a simple approval step based on the single approval data
-    const status = data.approval.action === 'APPROVED' ? 'APPROVED' :
-                   data.approval.action === 'REJECTED' ? 'REJECTED' : 'WAITING';
+    const status =
+      initialValues.approval.action === 'APPROVED'
+        ? 'APPROVED'
+        : initialValues.approval.action === 'REJECTED'
+          ? 'REJECTED'
+          : 'WAITING';
 
-    return [{
-      name: data.approval.step_name,
-      status: status as ApprovalStepStatus,
-      logs: [{
-        action_by: data.approval.action_by?.name,
-        date: data.approval.action_at,
-        notes: data.approval.notes,
-      }],
-    }];
-  }, [data?.approval]);
+    return [
+      {
+        name: initialValues.approval.step_name,
+        status: status as ApprovalStepStatus,
+        logs: [
+          {
+            action_by: initialValues.approval.action_by?.name,
+            date: initialValues.approval.action_at,
+            notes: initialValues.approval.notes,
+          },
+        ],
+      },
+    ];
+  }, [initialValues?.approval]);
 
   const totalBeforeTax = useMemo(() => {
     return purchaseOrderItems.reduce(
@@ -139,7 +141,7 @@ const PurchaseOrderDetail = ({
     async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
-        : data?.id || 1;
+        : initialValues?.id || 1;
 
       if (!purchaseRequestId) {
         toast.error('Purchase Request ID is required');
@@ -157,14 +159,14 @@ const PurchaseOrderDetail = ({
       }
       toast.success(res?.message as string);
     },
-    [data?.id, searchParams]
+    [initialValues?.id, searchParams]
   );
 
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
       ? parseInt(searchParams.get('purchaseId')!)
-      : data?.id || 1;
+      : initialValues?.id || 1;
 
     if (!purchaseRequestId) {
       toast.error('Purchase Request ID is required');
@@ -204,14 +206,13 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [data?.id, searchParams, selectedItem, selectedRowIds]);
+  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds]);
 
-  // Return null if no data provided
-  if (!data) {
+  if (!initialValues) {
     return null;
   }
 
-  const purchaseData = data;
+  const purchaseData = initialValues;
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
     {
@@ -517,7 +518,11 @@ const PurchaseOrderDetail = ({
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' && purchaseData.items?.[0]?.warehouse?.location?.name ? purchaseData.items[0].warehouse.location.name : '-'}
+                    :{' '}
+                    {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' &&
+                    purchaseData.items?.[0]?.warehouse?.location?.name
+                      ? purchaseData.items[0].warehouse.location.name
+                      : '-'}
                   </span>
                 </div>
               </div>