refactor(FE): Add location, project_flock and kandang fields

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

@@ -8,6 +8,21 @@ import {
 
 type RecordingGrowingFormSchemaType = {
   record_date: string;
+  location?: {
+    value: number;
+    label: string;
+  } | null;
+  location_id: number;
+  project_flock?: {
+    value: number;
+    label: string;
+  } | null;
+  project_flock_id: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  kandang_id: number;
   project_flock_kandang: {
     value: number;
     label: string;
@@ -89,6 +104,30 @@ export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSc
     record_date: Yup.string()
       .required('Tanggal recording wajib diisi!')
       .typeError('Tanggal recording wajib diisi!'),
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    location_id: Yup.number()
+      .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!')
+      .typeError('Lokasi wajib diisi!'),
+    project_flock: Yup.object({
+      value: Yup.number().min(1).required(),
+      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!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!')
+      .typeError('Kandang wajib diisi!'),
     project_flock_kandang: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
@@ -186,6 +225,12 @@ export const getRecordingGrowingFormInitialValues = (
   record_date: initialValues?.record_datetime
     ? new Date(initialValues.record_datetime).toISOString().split('T')[0]
     : new Date().toISOString().split('T')[0],
+  location: null,
+  location_id: 0,
+  project_flock: null,
+  project_flock_id: 0,
+  kandang: null,
+  kandang_id: 0,
   project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
         value: initialValues.project_flock_kandang_id,

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

@@ -1174,7 +1174,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // ===== EVENT HANDLERS =====
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const location = val as OptionType;
+    const location = val as OptionType | null;
+    const locationId = Number(location?.value);
+
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', location);
+    formik.setFieldTouched('location_id', true);
+    formik.setFieldValue('location_id', locationId);
+
     setSelectedLocation(location);
     setSelectedProjectFlock(null);
     setSelectedKandang(null);
@@ -1185,23 +1192,34 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     setSelectedProjectFlockLocationId(
       location ? location.value.toString() : ''
     );
-    formik.setFieldValue('project_flock_kandang', null);
-    formik.setFieldValue('project_flock_kandang_id', 0);
   };
 
   const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedProjectFlock(val as OptionType);
+    const projectFlock = val as OptionType | null;
+    const projectFlockId = Number(projectFlock?.value);
+
+    formik.setFieldTouched('project_flock', true);
+    formik.setFieldValue('project_flock', projectFlock);
+    formik.setFieldTouched('project_flock_id', true);
+    formik.setFieldValue('project_flock_id', projectFlockId);
+
+    setSelectedProjectFlock(projectFlock);
     setSelectedKandang(null);
     if (duplicateErrorShown) {
       toast.dismiss();
       setDuplicateErrorShown(false);
     }
-    formik.setFieldValue('project_flock_kandang', null);
-    formik.setFieldValue('project_flock_kandang_id', 0);
   };
 
   const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const kandang = val as OptionType;
+    const kandang = val as OptionType | null;
+    const kandangId = Number(kandang?.value);
+
+    formik.setFieldTouched('kandang', true);
+    formik.setFieldValue('kandang', kandang);
+    formik.setFieldTouched('kandang_id', true);
+    formik.setFieldValue('kandang_id', kandangId);
+
     setSelectedKandang(kandang);
     if (duplicateErrorShown) {
       toast.dismiss();
@@ -1676,6 +1694,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     isClearable
                     isSearchable
                     isDisabled={type === 'edit'}
+                    isError={
+                      formik.touched.location_id &&
+                      Boolean(formik.errors.location_id)
+                    }
+                    errorMessage={formik.errors.location_id as string}
                   />
 
                   <SelectInput
@@ -1696,6 +1719,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     }
                     isClearable
                     isSearchable
+                    isError={
+                      formik.touched.project_flock_id &&
+                      Boolean(formik.errors.project_flock_id)
+                    }
+                    errorMessage={formik.errors.project_flock_id as string}
                   />
 
                   <SelectInput
@@ -1714,6 +1742,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     }
                     isClearable
                     isSearchable
+                    isError={
+                      formik.touched.kandang_id &&
+                      Boolean(formik.errors.kandang_id)
+                    }
+                    errorMessage={formik.errors.kandang_id as string}
                     startAdornment={
                       projectFlockKandangLookup || projectFlockKandangDetail
                         ? getProjectFlockBadgeAdornment()