From 0b0ecd3bc49213a7f037a1067f91771640c9038f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 11:25:15 +0700
Subject: [PATCH] refactor(FE-137): replace stock availability text with Badge
 component in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index deb304df..76d7ae30 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -30,6 +30,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import Badge from '@/components/Badge';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -518,16 +519,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       const stockInfo = warehouseStockMap.get(warehouseId);
       if (!stockInfo) {
         return (
-          <span className='text-sm text-gray-500 whitespace-nowrap'>
-            (Kosong)
-          </span>
+          <Badge
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold' }}
+          >
+            Kosong
+          </Badge>
         );
       }
 
+      const { productCount } = stockInfo;
+      let color: 'neutral' | 'success' | 'warning' = 'neutral';
+      if (productCount === 0) color = 'warning';
+      else if (productCount > 0) color = 'success';
+
       return (
-        <span className='text-sm text-gray-500 whitespace-nowrap'>
-          (Tersedia {stockInfo.productCount} produk)
-        </span>
+        <Badge
+          variant="soft"
+          color={color}
+          size="sm"
+          className={{ badge: 'whitespace-nowrap font-semibold' }}
+        >
+          Tersedia {productCount} produk
+        </Badge>
       );
     },
     [warehouseStockMap]