From b868a37485e71ad1ddbbe86f696d93a14f339160 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 25 Nov 2025 09:17:02 +0700
Subject: [PATCH] chore(FE-188,193): adjust ExpenseRequestKandangDetailExpense
 component

---
 .../ExpenseRequestKandangDetailExpense.tsx    | 343 +++++++++---------
 1 file changed, 174 insertions(+), 169 deletions(-)

diff --git a/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
index ca9edf37..73e6c9b7 100644
--- a/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
@@ -41,28 +41,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     val: OptionType | OptionType[] | null
   ) => {
     formik.setFieldTouched(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       true
     );
     formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       val
     );
   };
 
   const addExpenseItemHandler = (kandangExpenseIdx: number) => {
     const newExpensesValue = [
-      ...formik.values.kandangExpenses[kandangExpenseIdx].expenses,
+      ...formik.values.cost_per_kandangs[kandangExpenseIdx].cost_items,
       {
         nonstock: undefined,
-        totalExpense: undefined,
-        totalQuantity: undefined,
+        total_cost: undefined,
+        quantity: undefined,
         notes: '',
       },
     ];
 
     formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items`,
       newExpensesValue
     );
   };
@@ -71,27 +71,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
-    const path = `kandangExpenses[${kandangExpenseIdx}].expenses`;
+    const path = `cost_per_kandangs[${kandangExpenseIdx}].cost_items`;
 
     // trims values, errors, and touched at expenseIdx
     removeArrayItemAndSync(formik, path, expenseIdx);
   };
 
   const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'totalQuantity' | 'totalExpense' | 'notes',
+    column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
     return (
-      formik.touched.kandangExpenses?.[kandangExpenseIdx]?.expenses?.[
+      formik.touched.cost_per_kandangs?.[kandangExpenseIdx]?.cost_items?.[
         expenseIdx
       ]?.[column] &&
       Boolean(
-        formik.errors.kandangExpenses?.[kandangExpenseIdx] instanceof Object &&
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+        formik.errors.cost_per_kandangs?.[kandangExpenseIdx] instanceof
+          Object &&
+          formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ] instanceof Object &&
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+          formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ]?.[column]
       )
@@ -112,7 +113,8 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {formik.values.kandangExpenses.length === 0 && (
+        {(formik.values.cost_per_kandangs.length === 0 ||
+          !formik.values.supplier?.value) && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
               Pilih kandang terlebih dahulu!
@@ -120,168 +122,171 @@ const ExpenseRequestKandangDetailExpense: React.FC<
           </div>
         )}
 
-        {formik.values.kandangExpenses.map(
-          (kandangExpense, kandangExpenseIdx) => {
-            const kandangName = formik.values.kandangs?.find(
-              (kandang) => kandang.id === kandangExpense.kandangId
-            );
+        {formik.values.cost_per_kandangs.length > 0 &&
+          formik.values.supplier?.value &&
+          formik.values.cost_per_kandangs.map(
+            (kandangExpense, kandangExpenseIdx) => {
+              const kandangName = formik.values.kandangs?.find(
+                (kandang) => kandang.id === kandangExpense.kandang_id
+              );
 
-            return (
-              kandangName?.name && (
-                <div
-                  key={`kandangExpense-${kandangExpenseIdx}`}
-                  className='w-full flex flex-col gap-4'
-                >
-                  <div>
-                    <h5 className='mb-2 text-lg font-bold text-center'>
-                      Biaya {kandangName?.name}
-                    </h5>
+              return (
+                kandangName?.name && (
+                  <div
+                    key={`kandangExpense-${kandangExpenseIdx}`}
+                    className='w-full flex flex-col gap-4'
+                  >
+                    <div>
+                      <h5 className='mb-2 text-lg font-bold text-center'>
+                        Biaya {kandangName?.name}
+                      </h5>
 
-                    <div className='overflow-x-auto'>
-                      <table className='table'>
-                        <thead>
-                          <tr>
-                            <th>Nonstock</th>
-                            <th>Total Kuantitas</th>
-                            <th>Total Biaya</th>
-                            <th>Catatan</th>
-                            {type !== 'detail' && <th>Aksi</th>}
-                          </tr>
-                        </thead>
+                      <div className='overflow-x-auto'>
+                        <table className='table'>
+                          <thead>
+                            <tr>
+                              <th>Nonstock</th>
+                              <th>Total Kuantitas</th>
+                              <th>Total Biaya</th>
+                              <th>Catatan</th>
+                              {type !== 'detail' && <th>Aksi</th>}
+                            </tr>
+                          </thead>
 
-                        <tbody>
-                          {kandangExpense.expenses.map(
-                            (expenseItem, expenseIdx) => (
-                              <tr key={`expense-${expenseIdx}`}>
-                                <td className='p-2'>
-                                  <SelectInput
-                                    placeholder='Pilih Nonstock'
-                                    value={expenseItem.nonstock}
-                                    onChange={(val) => {
-                                      nonstockChangeHandler(
-                                        kandangExpenseIdx,
-                                        expenseIdx,
-                                        val
-                                      );
-                                    }}
-                                    options={nonstockOptions}
-                                    isLoading={isLoadingNonstockOptions}
-                                    onInputChange={setNonstockInputValue}
-                                    className={{ wrapper: 'min-w-48' }}
-                                  />
-                                </td>
-
-                                <td className='p-2'>
-                                  <NumberInput
-                                    required
-                                    name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalQuantity`}
-                                    placeholder='Masukkan Total Kuantitas'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[expenseIdx].totalQuantity ?? ''
-                                    }
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    isError={isExpenseRepeaterInputError(
-                                      'totalQuantity',
-                                      kandangExpenseIdx,
-                                      expenseIdx
-                                    )}
-                                    className={{ wrapper: 'min-w-24' }}
-                                  />
-                                </td>
-
-                                <td className='p-2'>
-                                  <NumberInput
-                                    name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalExpense`}
-                                    placeholder='Masukkan Total Biaya'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[expenseIdx].totalExpense ?? ''
-                                    }
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    isError={isExpenseRepeaterInputError(
-                                      'totalExpense',
-                                      kandangExpenseIdx,
-                                      expenseIdx
-                                    )}
-                                    inputPrefix={
-                                      <span className='text-gray-600 font-medium'>
-                                        Rp
-                                      </span>
-                                    }
-                                    className={{ wrapper: 'min-w-24' }}
-                                  />
-                                </td>
-
-                                <td className='p-2'>
-                                  <TextInput
-                                    name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].notes`}
-                                    placeholder='Tuliskan catatan'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[expenseIdx].notes ?? ''
-                                    }
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    isError={isExpenseRepeaterInputError(
-                                      'notes',
-                                      kandangExpenseIdx,
-                                      expenseIdx
-                                    )}
-                                    className={{ wrapper: 'min-w-24' }}
-                                  />
-                                </td>
-
-                                {type !== 'detail' && (
-                                  <td>
-                                    <Button
-                                      type='button'
-                                      color='error'
-                                      onClick={() =>
-                                        deleteExpenseItemHandler(
+                          <tbody>
+                            {kandangExpense.cost_items.map(
+                              (expenseItem, expenseIdx) => (
+                                <tr key={`expense-${expenseIdx}`}>
+                                  <td className='p-2'>
+                                    <SelectInput
+                                      placeholder='Pilih Nonstock'
+                                      value={expenseItem.nonstock}
+                                      onChange={(val) => {
+                                        nonstockChangeHandler(
                                           kandangExpenseIdx,
-                                          expenseIdx
-                                        )
-                                      }
-                                    >
-                                      <Icon
-                                        icon='material-symbols:delete-outline-rounded'
-                                        width={24}
-                                        height={24}
-                                      />
-                                    </Button>
+                                          expenseIdx,
+                                          val
+                                        );
+                                      }}
+                                      options={nonstockOptions}
+                                      isLoading={isLoadingNonstockOptions}
+                                      onInputChange={setNonstockInputValue}
+                                      className={{ wrapper: 'min-w-48' }}
+                                    />
                                   </td>
-                                )}
-                              </tr>
-                            )
-                          )}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
 
-                  {type !== 'detail' && (
-                    <Button
-                      type='button'
-                      variant='outline'
-                      color='success'
-                      onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
-                      className='w-fit mx-auto'
-                    >
-                      <Icon icon='ic:round-plus' width={24} height={24} />{' '}
-                      Tambah
-                    </Button>
-                  )}
-                </div>
-              )
-            );
-          }
-        )}
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      required
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                      placeholder='Masukkan Total Kuantitas'
+                                      value={
+                                        formik.values.cost_per_kandangs[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].quantity ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'quantity',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
+                                      placeholder='Masukkan Total Biaya'
+                                      value={
+                                        formik.values.cost_per_kandangs[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].total_cost ??
+                                        ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'total_cost',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      inputPrefix={
+                                        <span className='text-gray-600 font-medium'>
+                                          Rp
+                                        </span>
+                                      }
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <TextInput
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                      placeholder='Tuliskan catatan'
+                                      value={
+                                        formik.values.cost_per_kandangs[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].notes ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'notes',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  {type !== 'detail' && (
+                                    <td>
+                                      <Button
+                                        type='button'
+                                        color='error'
+                                        onClick={() =>
+                                          deleteExpenseItemHandler(
+                                            kandangExpenseIdx,
+                                            expenseIdx
+                                          )
+                                        }
+                                      >
+                                        <Icon
+                                          icon='material-symbols:delete-outline-rounded'
+                                          width={24}
+                                          height={24}
+                                        />
+                                      </Button>
+                                    </td>
+                                  )}
+                                </tr>
+                              )
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {type !== 'detail' && (
+                      <Button
+                        type='button'
+                        variant='outline'
+                        color='success'
+                        onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
+                        className='w-fit mx-auto'
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />{' '}
+                        Tambah
+                      </Button>
+                    )}
+                  </div>
+                )
+              );
+            }
+          )}
       </div>
     </Card>
   );