fix(FE): fixing error message on submit and fixing ui

src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts

@@ -2,34 +2,30 @@ import * as Yup from 'yup';
 
 // Schema for LAYING category (production_standard_details is required)
 const LayingRepeaterFormSchema = Yup.object({
-  week: Yup.number().required('Minggu wajib diisi!'),
+  week: Yup.number().required('Wajib diisi!'),
   production_standard_uniformity_details: Yup.object({
-    target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
+    target_mean_bw: Yup.number().required('Wajib diisi!'),
-    max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
+    max_depletion: Yup.number().required('Wajib diisi!'),
-    min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
+    min_uniformity: Yup.number().required('Wajib diisi!'),
-    feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
+    feed_intake: Yup.number().required('Wajib diisi!'),
   }),
   production_standard_details: Yup.object({
-    target_hen_day_production: Yup.number().required(
+    target_hen_day_production: Yup.number().required('Wajib diisi!'),
-      'Produksi telur per hari wajib diisi!'
+    target_hen_house_production: Yup.number().required('Wajib diisi!'),
-    ),
+    target_egg_weight: Yup.number().required('Wajib diisi!'),
-    target_hen_house_production: Yup.number().required(
+    target_egg_mass: Yup.number().required('Wajib diisi!'),
-      'Produksi telur per kandang wajib diisi!'
+    standard_fcr: Yup.number().required('Wajib diisi!'),
-    ),
-    target_egg_weight: Yup.number().required('Berat telur wajib diisi!'),
-    target_egg_mass: Yup.number().required('Massa telur wajib diisi!'),
-    standard_fcr: Yup.number().required('FCR wajib diisi!'),
   }).required(),
 });
 
 // Schema for GROWING category (production_standard_details is optional)
 const GrowingRepeaterFormSchema = Yup.object({
-  week: Yup.number().required('Minggu wajib diisi!'),
+  week: Yup.number().required('Wajib diisi!'),
   production_standard_uniformity_details: Yup.object({
-    target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
+    target_mean_bw: Yup.number().required('Wajib diisi!'),
-    max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
+    max_depletion: Yup.number().required('Wajib diisi!'),
-    min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
+    min_uniformity: Yup.number().required('Wajib diisi!'),
-    feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
+    feed_intake: Yup.number().required('Wajib diisi!'),
   }),
   production_standard_details: Yup.object({
     target_hen_day_production: Yup.number().optional(),

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -344,7 +344,7 @@ const ProductionStandardForm = ({
   const columns = useMemo<ColumnDef<TableRowsType>[]>(() => {
     const baseColumns: ColumnDef<TableRowsType>[] = [
       {
-        header: 'Minggu',
+        header: 'Week',
         accessorKey: 'week',
         enableSorting: false,
       },
@@ -358,30 +358,40 @@ const ProductionStandardForm = ({
               header: 'Hen Day',
               accessorFn: (row) =>
                 row.production_standard_details?.target_hen_day_production,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_hen_day_production}%`,
               enableSorting: false,
             },
             {
               header: 'Hen House',
               accessorFn: (row) =>
                 row.production_standard_details?.target_hen_house_production,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_hen_house_production} pc`,
               enableSorting: false,
             },
             {
               header: 'Egg Weight',
               accessorFn: (row) =>
                 row.production_standard_details?.target_egg_weight,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_egg_weight} g`,
               enableSorting: false,
             },
             {
               header: 'Egg Mass',
               accessorFn: (row) =>
                 row.production_standard_details?.target_egg_mass,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_egg_mass} g`,
               enableSorting: false,
             },
             {
               header: 'FCR',
               accessorFn: (row) =>
                 row.production_standard_details?.standard_fcr,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.standard_fcr} g`,
               enableSorting: false,
             },
           ]
@@ -393,24 +403,32 @@ const ProductionStandardForm = ({
         header: 'Mean BW',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.target_mean_bw,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.target_mean_bw} g`,
         enableSorting: false,
       },
       {
         header: 'Max Depletion',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.max_depletion,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.max_depletion}%`,
         enableSorting: false,
       },
       {
         header: 'Min Uniformity',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.min_uniformity,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.min_uniformity}%`,
         enableSorting: false,
       },
       {
         header: 'Feed Intake',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.feed_intake,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.feed_intake} g`,
         enableSorting: false,
       },
     ];
@@ -728,7 +746,52 @@ const ProductionStandardForm = ({
   };
 
   // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
+    formik,
+    {
+      onBeforeSubmit: (e) => {
+        e.preventDefault();
+
+        // For GROWING category, clear production_standard_details errors and set default values
+        if (formik.values.project_category === 'GROWING') {
+          // Set default values for production_standard_details
+          formik.values.details?.forEach((detail) => {
+            detail.production_standard_details = {
+              target_hen_day_production: 0,
+              target_hen_house_production: 0,
+              target_egg_weight: 0,
+              target_egg_mass: 0,
+              standard_fcr: 0,
+            };
+          });
+
+          // Clear any errors related to production_standard_details
+          const currentErrors = { ...formik.errors };
+          if (currentErrors.details && Array.isArray(currentErrors.details)) {
+            const cleanedDetails = currentErrors.details
+              .map((detailError) => {
+                if (detailError && typeof detailError === 'object') {
+                  const { production_standard_details, ...rest } = detailError;
+                  return Object.keys(rest).length > 0 ? rest : undefined;
+                }
+                return detailError;
+              })
+              .filter(
+                (error): error is Exclude<typeof error, undefined> =>
+                  error !== undefined
+              );
+
+            currentErrors.details = (
+              cleanedDetails.length > 0 ? cleanedDetails : undefined
+            ) as typeof currentErrors.details;
+          }
+          formik.setErrors(currentErrors);
+        }
+
+        return true;
+      },
+    }
+  );
 
   return (
     <>
@@ -821,19 +884,20 @@ const ProductionStandardForm = ({
                   key={`row-${row.index}`}
                   className='sticky bottom-0 bg-base-100 shadow-lg'
                 >
-                  <td colSpan={colSpan} className='p-6'>
+                  <td colSpan={colSpan} className='p-2'>
                     <form
                       className='h-full w-full flex flex-col justify-end'
                       onSubmit={repeaterFormik.handleSubmit}
                       onReset={repeaterFormik.handleReset}
                     >
                       <div
-                        className={cn(
+                        className='grid gap-2 items-start w-full'
-                          'grid gap-4 items-start',
+                        style={{
-                          formik.values.project_category === 'LAYING'
+                          gridTemplateColumns:
-                            ? 'grid-cols-10'
+                            formik.values.project_category === 'LAYING'
-                            : 'grid-cols-5'
+                              ? 'repeat(10, minmax(auto, 1fr)) minmax(auto, auto)'
-                        )}
+                              : 'repeat(4, minmax(auto, 1fr)) minmax(auto, auto)',
+                        }}
                       >
                         <NumberInput
                           name='week'
@@ -862,7 +926,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={<Icon icon='mdi:percent' />}
+                              bottomLabel='Persen (%)'
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -894,11 +958,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
+                              bottomLabel='Butir (pc)'
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  Butir
-                                </div>
-                              }
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -930,11 +990,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
+                              bottomLabel='Gram (g)'
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -959,17 +1015,13 @@ const ProductionStandardForm = ({
                               name='production_standard_details.target_egg_mass'
                               label='Egg Mass'
                               placeholder='1'
+                              bottomLabel='Gram (g)'
                               value={
                                 repeaterFormik.values
                                   .production_standard_details?.target_egg_mass
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -1000,11 +1052,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
+                              bottomLabel='Gram (g)'
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -1038,11 +1086,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={
+                          bottomLabel='Gram (g)'
-                            <div className='w-full h-full flex items-center justify-center'>
-                              gr
-                            </div>
-                          }
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1072,7 +1116,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={<Icon icon='mdi:percent' />}
+                          bottomLabel='Persen (%)'
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1102,7 +1146,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={<Icon icon='mdi:percent' />}
+                          bottomLabel='Persen (%)'
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1132,11 +1176,8 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={
+                          bottomLabel='Gram/Ekor (g)'
-                            <div className='w-full h-full flex items-center justify-center'>
+                          endAdornment
-                              gr/ekor
-                            </div>
-                          }
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1162,7 +1203,7 @@ const ProductionStandardForm = ({
                             type='button'
                             color='error'
                             variant='outline'
-                            className='min-w-24'
+                            className='min-w-xs'
                             onClick={handleCancelEdit}
                           >
                             <Icon icon='mdi:close' /> Batal
@@ -1178,7 +1219,7 @@ const ProductionStandardForm = ({
                           <Button
                             type='submit'
                             color={editMode ? 'warning' : 'success'}
-                            className='min-w-24'
+                            className='min-w-xs'
                             disabled={
                               isAddingRow ||
                               formik.values.project_category === ''
@@ -1195,7 +1236,7 @@ const ProductionStandardForm = ({
                           variant='outline'
                           color='primary'
                           onClick={toggleTableHeight}
-                          className='absolute bottom-6 right-6'
+                          className='absolute bottom-2 right-2'
                         >
                           <Icon
                             icon={

src/services/hooks/useFormikErrorList.ts

@@ -38,6 +38,9 @@ export const useFormikErrorList = <T>(
 
     // Validate form
     const isValid = await handleValidateForm();
+    if (isValid) {
+      close();
+    }
 
     // Call onAfterValidation callback if validation passed
     if (options?.onAfterValidation) {