From a1dc13ceb42e9543ad335a7041f630f4ce5df19a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 13:36:22 +0700
Subject: [PATCH] feat(FE-62): enhance MovementForm with area and location
 display for warehouse selection

---
 .../inventory/movement/form/MovementForm.tsx  | 90 +++++++++++++++++--
 1 file changed, 82 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 14c6fc45..22e39642 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -198,6 +198,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return touchedField && Boolean(errorField?.[column as string]);
   };
 
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -207,7 +212,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     WarehouseApi.getAllFetcher
   );
   const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => ({ value: w.id, label: w.name }))
+    ? warehouses?.data.map((w) => ({
+        value: w.id,
+        label: w.name,
+        area: w.area?.name,
+        location:
+          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+            ? w.location?.name
+            : undefined,
+      }))
     : [];
 
   // Product selection
@@ -291,16 +304,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           {/* Warehouse cards */}
           <div className='grid grid-cols-2 gap-4 mb-4'>
             <div className='card bg-base-100 shadow'>
-              <div className='card-body'>
+              <div className='card-body space-y-4'>
+                <h3 className='card-title text-lg'>Gudang Asal</h3>
                 <SelectInput
                   required
-                  label='Gudang Asal'
+                  label='Gudang'
                   value={formik.values.warehouse_asal ?? undefined}
                   onChange={(val) => {
                     formik.setFieldValue('warehouse_asal', val);
                     formik.setFieldValue(
                       'warehouse_asal_id',
-                      (val as OptionType)?.value
+                      (val as WarehouseOptionType)?.value
                     );
                   }}
                   options={warehouseOptions}
@@ -314,20 +328,51 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isDisabled={type === 'detail'}
                   isClearable
                 />
+
+                {/* Area and Location Info */}
+                <div className='space-y-4'>
+                  <TextInput
+                    label='Area'
+                    name='warehouse_asal_area'
+                    value={
+                      (formik.values.warehouse_asal as WarehouseOptionType)
+                        ?.area || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                  <TextInput
+                    label='Lokasi'
+                    name='warehouse_asal_location'
+                    value={
+                      (formik.values.warehouse_asal as WarehouseOptionType)
+                        ?.location || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                </div>
               </div>
             </div>
 
             <div className='card bg-base-100 shadow'>
-              <div className='card-body'>
+              <div className='card-body space-y-4'>
+                <h3 className='card-title text-lg'>Gudang Tujuan</h3>
                 <SelectInput
                   required
-                  label='Gudang Tujuan'
+                  label='Gudang'
                   value={formik.values.warehouse_tujuan ?? undefined}
                   onChange={(val) => {
                     formik.setFieldValue('warehouse_tujuan', val);
                     formik.setFieldValue(
                       'warehouse_tujuan_id',
-                      (val as OptionType)?.value
+                      (val as WarehouseOptionType)?.value
                     );
                   }}
                   options={warehouseOptions}
@@ -341,10 +386,39 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isDisabled={type === 'detail'}
                   isClearable
                 />
+
+                {/* Area and Location Info */}
+                <div className='space-y-4'>
+                  <TextInput
+                    label='Area'
+                    name='warehouse_tujuan_area'
+                    value={
+                      (formik.values.warehouse_tujuan as WarehouseOptionType)
+                        ?.area || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                  <TextInput
+                    label='Lokasi'
+                    name='warehouse_tujuan_location'
+                    value={
+                      (formik.values.warehouse_tujuan as WarehouseOptionType)
+                        ?.location || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                </div>
               </div>
             </div>
           </div>
-
           {/* Products table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>