refactor(FE-62): enhance MovementForm by integrating NumberInput for delivery cost fields and improving layout

This commit is contained in:
rstubryan
2025-10-22 14:10:35 +07:00
parent c249585bc2
commit 58b4204aab
@@ -7,6 +7,7 @@ import useSWR from 'swr';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import Button from '@/components/Button'; import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput'; import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput'; import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { FormHeader } from '@/components/helper/form/FormHeader'; import { FormHeader } from '@/components/helper/form/FormHeader';
import { FormActions } from '@/components/helper/form/FormActions'; import { FormActions } from '@/components/helper/form/FormActions';
@@ -1299,27 +1300,35 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
</td> </td>
<td> <td>
{type === 'detail' ? ( {type === 'detail' ? (
<Button <>
color='primary' <div className='flex flex-col items-start gap-2'>
className='w-full min-w-52 flex items-center justify-center gap-2' <Button
disabled={!delivery.document_path} color='primary'
href={delivery.document_path ?? undefined} className='w-full min-w-52 flex items-center justify-center gap-2'
target='_blank' disabled={!delivery.document_path}
rel='noopener noreferrer' href={delivery.document_path ?? undefined}
> target='_blank'
{delivery.document_path ? ( rel='noopener noreferrer'
<> >
<Icon {delivery.document_path ? (
icon='material-symbols:file-open-outline' <>
width={20} <Icon
height={20} icon='material-symbols:file-open-outline'
/> width={20}
Lihat Dokumen height={20}
</> />
) : ( Lihat Dokumen
'-' </>
)} ) : (
</Button> '-'
)}
</Button>
<FieldMessage
message={null}
isVisible={false}
/>
</div>
</>
) : ( ) : (
<FileInput <FileInput
name={`deliveries.${idx}.document`} name={`deliveries.${idx}.document`}
@@ -1352,15 +1361,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
)} )}
</td> </td>
<td> <td>
<TextInput <NumberInput
required required
type='number'
name={`deliveries.${idx}.delivery_cost`} name={`deliveries.${idx}.delivery_cost`}
value={delivery.delivery_cost || ''} value={delivery.delivery_cost || ''}
onChange={(e) => onChange={(e) =>
handleDeliveryCostChange(idx, e.target.value) handleDeliveryCostChange(idx, e.target.value)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='currency'
decimals={0}
min={0}
{...isRepeaterInputError( {...isRepeaterInputError(
'deliveries', 'deliveries',
'delivery_cost', 'delivery_cost',
@@ -1368,14 +1379,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
wrapper: 'w-full min-w-48', wrapper:
'w-full min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
</td> </td>
<td> <td>
<TextInput <NumberInput
required required
type='number'
name={`deliveries.${idx}.delivery_cost_per_item`} name={`deliveries.${idx}.delivery_cost_per_item`}
value={delivery.delivery_cost_per_item || ''} value={delivery.delivery_cost_per_item || ''}
onChange={(e) => onChange={(e) =>
@@ -1385,6 +1396,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
) )
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
maskType='currency'
decimals={0}
min={0}
{...isRepeaterInputError( {...isRepeaterInputError(
'deliveries', 'deliveries',
'delivery_cost_per_item', 'delivery_cost_per_item',
@@ -1392,7 +1406,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
wrapper: 'w-full min-w-48', wrapper:
'w-full min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
</td> </td>