feat(FE-62): enhance MovementForm with area and location display for warehouse selection

This commit is contained in:
rstubryan
2025-10-10 13:36:22 +07:00
parent 157235433e
commit a1dc13ceb4
@@ -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'>