refactor(FE): Refactor table components to improve styling and structure

src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx

@@ -5,12 +5,10 @@ import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
-import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
 
-import { cn, formatNumber } from '@/lib/helper';
+import { formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -56,8 +54,6 @@ const ClosingIncomingSapronaksSummaryTable = ({
     }
   );
 
-  const [open, setOpen] = useState(true);
-
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
@@ -94,97 +90,78 @@ const ClosingIncomingSapronaksSummaryTable = ({
     }
   }, [sorting, updateFilter]);
 
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(incomingSapronakSummaries)
-          ? incomingSapronakSummaries.data.length > 0
-          : false
-      );
-    }
-  }, [incomingSapronakSummaries, isResponseSuccess]);
-
   return (
-    <Card
-      className={{
-        wrapper: 'w-full',
-        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'>Ringkasan Sapronak Masuk</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!'
+    <div className='w-full p-0 sm:p-3'>
+      <Card
+        className={{
+          wrapper: 'w-full rounded-lg border-none',
+          body: 'p-0',
+          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+          collapsible: 'rounded-lg',
+        }}
+        variant='bordered'
+        title='Ringkasan Sapronak Masuk'
+        collapsible
+        defaultCollapsed={false}
       >
-        <div className='w-full p-0'>
-          {isLoadingIncomingSapronakSummaries ? (
-            <SapronakClosingSkeleton
-              type='incoming'
-              columns={incomingSapronaksColumns}
-            />
-          ) : isResponseSuccess(incomingSapronakSummaries) &&
-            incomingSapronakSummaries.data.length === 0 ? (
-            <SapronakClosingSkeleton
-              type='incoming'
-              columns={incomingSapronaksColumns}
-              iconName='heroicons:chart-bar'
-              title='Ringkasan Sapronak Masuk Tidak Ditemukan'
-              subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'
-            />
-          ) : (
-            <Table<ClosingIncomingSapronakSummary>
-              data={
-                isResponseSuccess(incomingSapronakSummaries)
-                  ? incomingSapronakSummaries?.data
-                  : []
-              }
-              columns={incomingSapronaksColumns}
-              pageSize={tableFilterState.pageSize}
-              onPageSizeChange={setPageSize}
-              rowOptions={[10, 20, 50, 100]}
-              page={
-                isResponseSuccess(incomingSapronakSummaries)
-                  ? incomingSapronakSummaries?.meta?.page
-                  : 0
-              }
-              totalItems={
-                isResponseSuccess(incomingSapronakSummaries)
-                  ? incomingSapronakSummaries?.meta?.total_results
-                  : 0
-              }
-              onPageChange={setPage}
-              isLoading={isLoadingIncomingSapronakSummaries}
-              sorting={sorting}
-              setSorting={setSorting}
-              rowSelection={rowSelection}
-              setRowSelection={setRowSelection}
-              className={{
-                containerClassName: cn({
-                  'w-full mb-20':
-                    isResponseSuccess(incomingSapronakSummaries) &&
-                    incomingSapronakSummaries?.data?.length === 0,
-                }),
-              }}
-            />
-          )}
-        </div>
-      </Collapse>
-    </Card>
+        {isLoadingIncomingSapronakSummaries ? (
+          <SapronakClosingSkeleton
+            type='incoming'
+            columns={incomingSapronaksColumns}
+          />
+        ) : isResponseSuccess(incomingSapronakSummaries) &&
+          incomingSapronakSummaries.data.length === 0 ? (
+          <SapronakClosingSkeleton
+            type='incoming'
+            columns={incomingSapronaksColumns}
+            iconName='heroicons:chart-bar'
+            title='Ringkasan Sapronak Masuk Tidak Ditemukan'
+            subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'
+          />
+        ) : (
+          <Table<ClosingIncomingSapronakSummary>
+            data={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.data
+                : []
+            }
+            columns={incomingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingIncomingSapronakSummaries}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: 'w-full mb-0!',
+              tableWrapperClassName:
+                'overflow-x-auto rounded-tr-none rounded-tl-none',
+              tableClassName: 'w-full table-auto text-sm',
+              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+              headerColumnClassName:
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+              bodyRowClassName:
+                'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+              bodyColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+            }}
+          />
+        )}
+      </Card>
+    </div>
   );
 };