From 15e6372c30ad0a05c83105cb6537b84f386918a9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 13:03:37 +0700
Subject: [PATCH] feat(FE-137): add product flag badges to RecordingForm for
 enhanced visibility

---
 .../recording/form/RecordingForm.tsx          | 50 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index c9a4e6fe..5afeb021 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -148,14 +148,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         if (hasPakanFlag) {
           options.push({
             value: product.id,
-            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`
           });
         }
 
         if (hasOvkFlag) {
           options.push({
             value: product.id,
-            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`
           });
         }
       });
@@ -354,6 +354,47 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [projectFlocks, recordedProjectFlockIds]
   );
 
+  const getProductFlagBadgeAdornment = useCallback(
+    (productWarehouseId: number) => {
+      if (!isResponseSuccess(stockProducts)) return null;
+
+      const productWarehouse = stockProducts.data.find(pw => pw.id === productWarehouseId);
+      if (!productWarehouse) return null;
+
+      const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
+      const hasOvkFlag = productWarehouse.product.flags?.includes('OVK');
+
+      if (hasPakanFlag) {
+        return (
+          <Badge
+            variant="soft"
+            color="info"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+          >
+            PAKAN
+          </Badge>
+        );
+      }
+
+      if (hasOvkFlag) {
+        return (
+          <Badge
+            variant="soft"
+            color="secondary"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+          >
+            OVK
+          </Badge>
+        );
+      }
+
+      return null;
+    },
+    [stockProducts]
+  );
+
   const hasExceededStock = useMemo(() => {
     if (type === 'detail') return false;
     return (
@@ -1105,6 +1146,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         }}
                         isSearchable
                         isDisabled={type === 'detail'}
+                        startAdornment={
+                          stock.product_warehouse_id
+                            ? getProductFlagBadgeAdornment(stock.product_warehouse_id)
+                            : undefined
+                        }
                       />
                     </td>
                     <td>