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,68 +175,76 @@ const ExpenseKandangsTable = ({
   }, [sorting, updateSortingFilter]);
 
   return (
-    <Card
+    <>
-      className={{
+      {selectedKandangs.length > 0 && selectedKandangs.some((k) => k.id) && (
-        wrapper: className?.wrapper,
+        <Card
-        body: 'p-4 shadow',
-      }}
-    >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Pilih Kandang</div>
-
-            <Icon
-              icon='material-symbols:keyboard-arrow-down'
-              width={24}
-              height={24}
-              className={cn('text-primary transition-transform', {
-                '-rotate-180': open,
-              })}
-            />
-          </div>
-        }
-        className='w-full!'
-        titleClassName='w-full p-0!'
-      >
-        <Table<Kandang>
-          data={isResponseSuccess(kandangs) ? kandangs?.data : []}
-          columns={kandangsColumns}
-          pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
-          totalItems={
-            isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
-          }
-          onPageChange={setPage}
-          isLoading={isLoading}
-          sorting={sorting}
-          setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
           className={{
-            containerClassName: cn({
+            wrapper: className?.wrapper,
-              'mb-20':
+            body: 'p-4 shadow',
-                isResponseSuccess(kandangs) && kandangs?.data?.length === 0,
-            }),
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-6 py-3 text-xs font-semibold text-gray-500 first:flex first:flex-row first:justify-start',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 first:flex first:flex-row first:justify-start',
-            paginationClassName: cn({
-              hidden:
-                isResponseSuccess(kandangs) &&
-                kandangs?.meta?.total_pages === 1,
-            }),
           }}
-        />
+        >
-      </Collapse>
+          <Collapse
-    </Card>
+            open={open}
+            onOpenChange={setOpen}
+            title={
+              <div className='card-actions p-4 justify-between items-center w-full'>
+                <div className='card-title'>
+                  {formType === 'realization'
+                    ? 'Kandang yang Direalisasikan'
+                    : 'Pilih Kandang'}
+                </div>
+
+                <Icon
+                  icon='material-symbols:keyboard-arrow-down'
+                  width={24}
+                  height={24}
+                  className={cn('text-primary transition-transform', {
+                    '-rotate-180': open,
+                  })}
+                />
+              </div>
+            }
+            className='w-full!'
+            titleClassName='w-full p-0!'
+          >
+            <Table<Kandang>
+              data={isResponseSuccess(kandangs) ? kandangs?.data : []}
+              columns={kandangsColumns}
+              pageSize={tableFilterState.pageSize}
+              page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
+              totalItems={
+                isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoading}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(kandangs) && kandangs?.data?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 first:flex first:flex-row first:justify-start',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 first:flex first:flex-row first:justify-start',
+                paginationClassName: cn({
+                  hidden:
+                    isResponseSuccess(kandangs) &&
+                    kandangs?.meta?.total_pages === 1,
+                }),
+              }}
+            />
+          </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}