refactor(FE-114): improve validation messages and update layout for better responsiveness

src/components/pages/flock/recording/form/RecordingForm.schema.ts

@@ -52,7 +52,7 @@ export const RecordingFormSchema = Yup.object({
         feed_qty: Yup.mixed<number | ''>().notRequired(),
         feed_stock: Yup.number()
           .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1 kg!')
+          .min(1, 'Jumlah pakan minimal 1!')
           .typeError('Jumlah pakan yang digunakan harus berupa angka!')
           .test(
             'is-not-exceed-qty',
@@ -60,7 +60,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { feed_qty } = this.parent;
               if (value === undefined) return true;
-              if (feed_qty === undefined || feed_qty === '' || typeof feed_qty !== 'number') return true;
+              if (
+                feed_qty === undefined ||
+                feed_qty === '' ||
+                typeof feed_qty !== 'number'
+              )
+                return true;
               return value <= feed_qty;
             }
           ),
@@ -102,7 +107,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { total_stock } = this.parent;
               if (value === undefined) return true;
-              if (total_stock === undefined || total_stock === '' || typeof total_stock !== 'number') return true;
+              if (
+                total_stock === undefined ||
+                total_stock === '' ||
+                typeof total_stock !== 'number'
+              )
+                return true;
               return value <= total_stock;
             }
           ),

src/components/pages/flock/recording/form/RecordingForm.tsx

@@ -477,7 +477,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <FormHeader type={type} title='Recording' backUrl='/flock/recording' />
         <form
           onSubmit={formik.handleSubmit}
@@ -488,8 +488,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='card-body flex flex-col gap-6'>
               <h2 className='card-title'>Recording Information</h2>
 
-              <div className='flex flex-col gap-6'>
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-                <div className='flex gap-4'>
                 <SelectInput
                   required
                   label='Lokasi'
@@ -534,9 +533,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   errorMessage={formik.errors.recording_date as string}
                   readOnly={type === 'detail'}
                 />
-                </div>
 
-                <div className='flex gap-4'>
                 <SelectInput
                   required
                   label='Flock'
@@ -580,7 +577,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </div>
             </div>
           </div>
-          </div>
 
           {/* Feed Data Table */}
           <div className='card bg-base-100 shadow mb-4'>
@@ -689,7 +685,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1074,7 +1071,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
-
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1111,7 +1107,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1306,6 +1303,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
                             isClearable
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>