refactor(FE-435): Allow realizations without kandang

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

@@ -150,29 +150,10 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('location', val);
 
     formik.setFieldValue('kandangs', []);
-    formik.setFieldValue('realizations', []);
-  };
 
-  const kandangsChangeHandler = (
-    kandangs: { id?: number; name?: string }[]
-  ) => {
-    formik.setFieldTouched('kandangs', true);
-    formik.setFieldValue('kandangs', kandangs);
-
-    const newRealizations = [...(formik.values.realizations ?? [])];
-
-    // add new realizations
-    kandangs.forEach((kandangItem) => {
-      if (!kandangItem.id) return;
-
-      const isKandangExistInRealization = newRealizations.find(
-        (realizationItem) => realizationItem.kandang_id === kandangItem.id
-      );
-
-      if (isKandangExistInRealization) return;
-
-      newRealizations.push({
-        kandang_id: kandangItem.id,
+    // Auto-create realization item for location (without kandang)
+    formik.setFieldValue('realizations', [
+      {
         cost_items: [
           {
             nonstock: undefined,
@@ -181,29 +162,57 @@ const ExpenseRealizationForm = ({
             notes: '',
           },
         ],
+      },
+    ]);
+  };
+
+  const kandangsChangeHandler = (
+    kandangs: { id?: number; name?: string }[]
+  ) => {
+    formik.setFieldTouched('kandangs', true);
+    formik.setFieldValue('kandangs', kandangs);
+
+    // If no kandangs selected, create realization item for location
+    if (kandangs.length === 0) {
+      formik.setFieldValue('realizations', [
+        {
+          cost_items: [
+            {
+              nonstock: undefined,
+              quantity: undefined,
+              price: undefined,
+              notes: '',
+            },
+          ],
+        },
+      ]);
+      return;
+    }
+
+    // Start with empty array when kandangs are selected
+    const newRealizations: typeof formik.values.realizations = [];
+
+    // add new realizations for each kandang
+    kandangs.forEach((kandangItem) => {
+      if (!kandangItem.id) return;
+
+      const existingRealization = formik.values.realizations?.find(
+        (realizationItem) => realizationItem.kandang_id === kandangItem.id
+      );
+
+      newRealizations.push({
+        kandang_id: kandangItem.id,
+        cost_items: existingRealization?.cost_items || [
+          {
+            nonstock: undefined,
+            quantity: undefined,
+            price: undefined,
+            notes: '',
+          },
+        ],
       });
     });
 
-    // prune realizations
-    const kandangIds = new Set(
-      kandangs
-        .map((kandang) => kandang.id)
-        .filter((id): id is number => id !== undefined)
-    );
-    const deletedRealizationsIdx: number[] = [];
-
-    newRealizations.forEach((realization, idx) => {
-      const isRealizationValid = kandangIds.has(realization.kandang_id);
-
-      if (!isRealizationValid) {
-        deletedRealizationsIdx.push(idx);
-      }
-    });
-
-    deletedRealizationsIdx.forEach((deletedRealizationIdx) => {
-      newRealizations.splice(deletedRealizationIdx, 1);
-    });
-
     formik.setFieldValue('realizations', newRealizations);
   };
 
@@ -346,7 +355,10 @@ const ExpenseRealizationForm = ({
             )}
 
           <ExpenseRealizationKandangDetailExpense
+            type={type}
             formik={formik}
+            supplierId={formik.values.supplier?.value as number}
+            location={formik.values.location}
             className={{
               wrapper: 'col-span-12',
             }}