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