refactor(FE): Only render kandang table when selected

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

@@ -19,6 +19,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 interface ExpenseKandangsTableProps {
   locationId?: number;
   type: 'add' | 'edit' | 'detail';
+  formType?: 'request' | 'realization';
   selectedKandangs: {
     id?: number;
     name?: string;
@@ -31,6 +32,7 @@ interface ExpenseKandangsTableProps {
 
 const ExpenseKandangsTable = ({
   type,
+  formType = 'request',
   locationId,
   selectedKandangs,
   onChange,
@@ -173,6 +175,8 @@ const ExpenseKandangsTable = ({
   }, [sorting, updateSortingFilter]);
 
   return (
+    <>
+      {selectedKandangs.length > 0 && selectedKandangs.some((k) => k.id) && (
         <Card
           className={{
             wrapper: className?.wrapper,
@@ -184,7 +188,11 @@ const ExpenseKandangsTable = ({
             onOpenChange={setOpen}
             title={
               <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Pilih Kandang</div>
+                <div className='card-title'>
+                  {formType === 'realization'
+                    ? 'Kandang yang Direalisasikan'
+                    : 'Pilih Kandang'}
+                </div>
 
                 <Icon
                   icon='material-symbols:keyboard-arrow-down'
@@ -235,6 +243,8 @@ const ExpenseKandangsTable = ({
             />
           </Collapse>
         </Card>
+      )}
+    </>
   );
 };
 

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

@@ -130,7 +130,7 @@ export const getExpenseRealizationFormInitialValues = (
       ? formatDate(initialValues?.realization_date, 'YYYY-MM-DD')
       : undefined,
     kandangs: initialValues?.kandangs.map((kandang) => ({
-      id: kandang.kandang_id,
+      id: kandang.id,
       name: kandang.name,
     })),
     supplier: initialValues?.supplier

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

@@ -297,6 +297,7 @@ const ExpenseRealizationForm = ({
 
           <ExpenseKandangsTable
             type='detail'
+            formType='realization'
             locationId={formik.values.location?.value}
             selectedKandangs={formik.values.kandangs ?? []}
             onChange={kandangsChangeHandler}