refactor(FE): Refactor expense form handlers and schema

src/components/pages/expense/form/ExpenseRequestForm.schema.ts

@@ -55,13 +55,11 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
+    }).nullable(),
 
     location_id: Yup.number()
-      .required('Lokasi wajib diisi!')
       .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!')
       .typeError('Lokasi wajib diisi!'),
 
     transaction_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
@@ -78,9 +76,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
+    }).nullable(),
 
     supplier_id: Yup.number()
       .required('Vendor wajib diisi!')

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -190,31 +190,18 @@ const ExpenseRequestForm = ({
     formik.setFieldValue('category', val);
   };
 
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+  const locationChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const location = val as OptionType | null;
+      const locationId = location ? Number(location.value) : 0;
+
       formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
       formik.setFieldTouched('location_id', true);
-    formik.setFieldValue('location', val);
-
-    const locationId = Array.isArray(val) ? val[0]?.value : val?.value;
       formik.setFieldValue('location_id', locationId);
-
-    formik.setFieldValue('kandangs', []);
-
-    // Auto-create expense item for location (without kandang)
-    formik.setFieldValue('expense_nonstocks', [
-      {
-        cost_items: [
-          {
-            nonstock: null,
-            nonstock_id: 0,
-            quantity: undefined,
-            price: undefined,
-            notes: '',
     },
-        ],
-      },
-    ]);
-  };
+    []
+  );
 
   const kandangsChangeHandler = (
     kandangs: { id?: number; name?: string }[]
@@ -438,13 +425,14 @@ const ExpenseRequestForm = ({
               placeholder='Pilih Lokasi'
               value={formik.values.location}
               onChange={locationChangeHandler}
+              options={locationOptions}
+              onInputChange={setLocationInputValue}
+              isLoading={isLoadingLocationOptions}
               isError={
                 formik.touched.location_id && Boolean(formik.errors.location_id)
               }
               errorMessage={formik.errors.location_id as string}
-              options={locationOptions}
-              isLoading={isLoadingLocationOptions}
-              onInputChange={setLocationInputValue}
+              isClearable
               className={{ wrapper: 'col-span-12 sm:col-span-4' }}
             />
 
@@ -481,19 +469,13 @@ const ExpenseRequestForm = ({
               placeholder='Pilih Vendor'
               value={formik.values.supplier}
               onChange={supplierChangeHandler}
+              options={supplierOptions}
+              onInputChange={setVendorInputValue}
+              isLoading={isLoadingVendorOptions}
               isError={
                 formik.touched.supplier_id && Boolean(formik.errors.supplier_id)
               }
-              errorMessage={
-                formik.touched.supplier_id && formik.errors.supplier_id
-                  ? typeof formik.errors.supplier_id === 'object'
-                    ? 'Vendor wajib diisi!'
-                    : (formik.errors.supplier_id as string)
-                  : undefined
-              }
-              options={supplierOptions}
-              isLoading={isLoadingVendorOptions}
-              onInputChange={setVendorInputValue}
+              errorMessage={formik.errors.supplier_id as string}
               className={{ wrapper: 'col-span-12' }}
             />