refactor(FE-438): Add min validators and file error handling

src/components/pages/uniformity/form/UniformityForm.schema.ts

@@ -49,6 +49,7 @@ export const UniformityFormSchema: Yup.ObjectSchema<UniformityFormSchemaType> =
       label: Yup.string().required(),
     }).nullable(),
     location_id: Yup.number()
+      .min(1, 'Location wajib diisi!')
       .required('Location wajib diisi!')
       .typeError('Location wajib diisi!'),
     project_flock: Yup.object({
@@ -56,6 +57,7 @@ export const UniformityFormSchema: Yup.ObjectSchema<UniformityFormSchemaType> =
       label: Yup.string().required(),
     }).nullable(),
     project_flock_id: Yup.number()
+      .min(1, 'Project flock wajib diisi!')
       .required('Project flock wajib diisi!')
       .typeError('Project flock wajib diisi!'),
     project_flock_kandang_id: Yup.number().optional().nullable().default(null),
@@ -64,6 +66,7 @@ export const UniformityFormSchema: Yup.ObjectSchema<UniformityFormSchemaType> =
       label: Yup.string().required(),
     }).nullable(),
     kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
       .required('Kandang wajib diisi!')
       .typeError('Kandang wajib diisi!'),
     files: FileSchema.required('File wajib diisi!'),

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -36,6 +36,7 @@ import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock'
 import { Kandang } from '@/types/api/master-data/kandang';
 import ExpandedDrawerForm from '@/components/pages/uniformity/form/ExpandedDrawerForm';
 import useSWR from 'swr';
+import { cn } from '@/lib/helper';
 
 interface UniformityFormProps {
   formType?: 'add' | 'edit';
@@ -303,6 +304,8 @@ const UniformityForm = ({
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
 
+      formik.setFieldTouched('files', true);
+
       if (!file) {
         formik.setFieldValue('files', undefined);
         return;
@@ -454,12 +457,21 @@ const UniformityForm = ({
             <div>
               <label
                 htmlFor='file-upload-input'
-                className="w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500"
+                className={cn(
+                  "w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
+                  formik.touched.files && formik.errors.files && 'text-red-500'
+                )}
               >
                 Upload File
               </label>
+
               <section
-                className='h-full w-full border border-gray-300 rounded-2xl border-dashed cursor-pointer mt-2'
+                className={cn(
+                  'h-full w-full border rounded-2xl border-dashed cursor-pointer mt-2',
+                  formik.touched.files && formik.errors.files
+                    ? 'border-red-500'
+                    : 'border-gray-300'
+                )}
                 onClick={() =>
                   document.getElementById('file-upload-input')?.click()
                 }
@@ -551,13 +563,19 @@ const UniformityForm = ({
                 onChange={handleFileChange}
                 className='hidden'
               />
+
+              {formik.touched.files && formik.errors.files && (
+                <p className='w-full text-sm text-red-500 mt-2'>
+                  {formik.errors.files as string}
+                </p>
+              )}
             </div>
 
             <Button
               type='submit'
               color='primary'
               className='w-full'
-              disabled={formik.isSubmitting}
+              disabled={!formik.isValid || formik.isSubmitting}
             >
               {formik.isSubmitting ? (
                 <span className='loading loading-spinner'></span>