From 47ee91185255546cf62c8a3001ebea44893161a3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 26 Feb 2026 15:56:31 +0700
Subject: [PATCH] feat(FE): Add stock availability badge to product dropdown

---
 .../form/InventoryAdjustmentForm.tsx          | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
index 7efc184a..7889bafe 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -28,6 +28,8 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
+import { components as ReactSelectComponents, OptionProps } from 'react-select';
+import StatusBadge from '@/components/helper/StatusBadge';
 import TextArea from '@/components/input/TextArea';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
@@ -203,10 +205,36 @@ const InventoryAdjustmentForm = ({
       ? productWarehouses.data.map((pw) => ({
           value: pw.product.id,
           label: pw.product.name,
+          quantity: pw.quantity,
         }))
       : [];
   }, [productWarehouses]);
 
+  const ProductOption = useMemo(() => {
+    const OptionComponent = (
+      props: OptionProps<OptionType & { quantity?: number }, boolean>
+    ) => {
+      const { data, children } = props;
+      const quantity = data.quantity ?? 0;
+      const isAvailable = quantity > 0;
+
+      return (
+        <ReactSelectComponents.Option {...props}>
+          <div className='flex items-center justify-between gap-2'>
+            <span className='flex-1'>{children}</span>
+            <StatusBadge
+              color={isAvailable ? 'success' : 'error'}
+              text={isAvailable ? 'Tersedia' : 'Kosong'}
+              className={{ badge: 'whitespace-nowrap w-fit' }}
+            />
+          </div>
+        </ReactSelectComponents.Option>
+      );
+    };
+    OptionComponent.displayName = 'ProductOption';
+    return OptionComponent;
+  }, []);
+
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
@@ -646,6 +674,7 @@ const InventoryAdjustmentForm = ({
               onChange={productChangeHandler}
               onInputChange={setProductInputValue}
               options={productOptions}
+              optionComponent={ProductOption}
               onMenuScrollToBottom={loadMoreProducts}
               isLoading={isLoadingProductOptions}
               isError={
@@ -658,6 +687,14 @@ const InventoryAdjustmentForm = ({
                   ? 'Pilih Produk'
                   : 'Pilih Kandang terlebih dahulu'
               }
+              inputPrefix={
+                selectedProduct
+                  ? 'Stock: ' +
+                    (productOptions.find(
+                      (opt) => opt.value === selectedProduct?.value
+                    )?.quantity ?? 0)
+                  : undefined
+              }
               isClearable
               isSearchable
             />