From d03414f7ab489ddba0b357d08bd6265d05ba4153 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 19 Jan 2026 00:07:00 +0700
Subject: [PATCH] refactor(FE): Refactor expense form handlers and schema

---
 .../expense/form/ExpenseRequestForm.schema.ts | 10 +---
 .../pages/expense/form/ExpenseRequestForm.tsx | 56 +++++++------------
 2 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
index 227a2ea9..5d4a735b 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
+++ b/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!')
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.tsx b/src/components/pages/expense/form/ExpenseRequestForm.tsx
index 63cdb2b7..ed30de3d 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestForm.tsx
@@ -190,31 +190,18 @@ const ExpenseRequestForm = ({
     formik.setFieldValue('category', val);
   };
 
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('location', true);
-    formik.setFieldTouched('location_id', true);
-    formik.setFieldValue('location', val);
+  const locationChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const location = val as OptionType | null;
+      const locationId = location ? Number(location.value) : 0;
 
-    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: '',
-          },
-        ],
-      },
-    ]);
-  };
+      formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
+      formik.setFieldTouched('location_id', true);
+      formik.setFieldValue('location_id', locationId);
+    },
+    []
+  );
 
   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' }}
             />