From 81003eac63a2bd8008f50b1986f98c7055bdbd5b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 20:37:11 +0700
Subject: [PATCH] feat(FE-137): enhance stock product selection in
 RecordingForm with initial values support

---
 .../recording/form/RecordingForm.tsx          | 76 +++++++++++++------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f63d6298..2e1a5952 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -552,35 +552,67 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Memoized unified products for stock selection
   const unifiedStockProducts = useMemo(() => {
-    if (!isResponseSuccess(stockProducts)) return [];
     const options: OptionType[] = [];
 
-    stockProducts.data.forEach((product) => {
-      const warehouse = product.warehouse;
-      const stockText = product.quantity.toLocaleString('id-ID');
+    // Add products from API stockProducts
+    if (isResponseSuccess(stockProducts)) {
+      stockProducts.data.forEach((product) => {
+        const warehouse = product.warehouse;
+        const stockText = product.quantity.toLocaleString('id-ID');
 
-      // Check if product has any of the flags
-      const hasPakanFlag = product.product.flags?.includes('PAKAN');
-      const hasOvkFlag = product.product.flags?.includes('OVK');
+        // Check if product has any of the flags
+        const hasPakanFlag = product.product.flags?.includes('PAKAN');
+        const hasOvkFlag = product.product.flags?.includes('OVK');
 
-      // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
-      if (hasPakanFlag) {
-        options.push({
-          value: product.id,
-          label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-        });
-      }
+        // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
+        if (hasPakanFlag) {
+          options.push({
+            value: product.id,
+            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
 
-      if (hasOvkFlag) {
-        options.push({
-          value: product.id,
-          label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-        });
-      }
-    });
+        if (hasOvkFlag) {
+          options.push({
+            value: product.id,
+            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
+      });
+    }
+
+    // Add existing stock products from initialValues (for detail/edit mode)
+    if (initialValues && 'stocks' in initialValues && initialValues.stocks && type !== 'add') {
+      const initialValuesWithStocks = initialValues as Recording & {
+        stocks?: Array<{
+          product_warehouse_id: number;
+          usage_amount: number;
+          notes: string;
+          product_warehouse?: {
+            id: number;
+            product_id: number;
+            product_name: string;
+            warehouse_id: number;
+            warehouse_name: string;
+          };
+        }>;
+      };
+
+      initialValuesWithStocks.stocks?.forEach((stock) => {
+        if (stock.product_warehouse && stock.product_warehouse.product_name) {
+          const existingOption = options.find(opt => opt.value === stock.product_warehouse_id);
+          if (!existingOption) {
+            options.push({
+              value: stock.product_warehouse_id,
+              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`
+            });
+          }
+        }
+      });
+    }
 
     return options;
-  }, [stockProducts, getProjectFlockLocation()]);
+  }, [stockProducts, getProjectFlockLocation(), initialValues, type]);
 
 
   // Handle stock usage amount change - simplified following MovementForm pattern