feat(FE-114): add NumberInput component and integrate into RecordingForm for enhanced numeric input handling

This commit is contained in:
rstubryan
2025-10-18 11:39:18 +07:00
parent 881e2bfc4a
commit c25b49c179
2 changed files with 476 additions and 10 deletions
@@ -6,6 +6,7 @@ import { Icon } from '@iconify/react';
import { toast } from 'react-hot-toast';
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 ConfirmationModal from '@/components/modal/ConfirmationModal';
import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -589,13 +590,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
/>
</td>
<td>
<TextInput
<NumberInput
required
type='number'
name={`feed_data.${idx}.feed_stock`}
value={feed.feed_stock}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
maskType='number'
decimals={0}
min={0}
isError={
isRepeaterInputError(
'feed_data',
@@ -728,13 +731,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td>
)}
<td>
<TextInput
<NumberInput
required
type='number'
name={`body_weight.${idx}.chicken_weight`}
value={weight.chicken_weight}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
maskType='weight'
weightUnit='gram'
decimals={0}
min={0}
isError={
isRepeaterInputError(
'body_weight',
@@ -750,16 +756,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
).errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
<td>
<TextInput
<NumberInput
required
type='number'
name={`body_weight.${idx}.chicken_count`}
value={weight.chicken_count}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
maskType='number'
decimals={0}
min={0}
isError={
isRepeaterInputError(
'body_weight',
@@ -775,16 +786,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
).errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
<td>
<TextInput
<NumberInput
required
type='number'
name={`body_weight.${idx}.average_chicken_weight`}
value={weight.average_chicken_weight}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
maskType='weight'
weightUnit='gram'
decimals={0}
min={0}
isError={
isRepeaterInputError(
'body_weight',
@@ -800,6 +817,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
).errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
{type !== 'detail' && (
@@ -995,13 +1015,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
/>
</td>
<td>
<TextInput
<NumberInput
required
type='number'
name={`vaccination.${idx}.used_stock`}
value={vaccine.used_stock}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
maskType='number'
decimals={0}
min={0}
isError={
isRepeaterInputError(
'vaccination',