From 58b4204aabcc64b3f3c751dcb969a0c078a3f460 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 14:10:35 +0700
Subject: [PATCH] refactor(FE-62): enhance MovementForm by integrating
 NumberInput for delivery cost fields and improving layout

---
 .../inventory/movement/form/MovementForm.tsx  | 69 +++++++++++--------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 662eaca8..57d0a585 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -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>