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

src/components/pages/closing/table/FinanceClosingTable.tsx

@@ -82,7 +82,7 @@ const FinanceClosingTable = ({
   }, [finance]);
 
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='flex flex-col gap-4 p-0 sm:p-3'>
       {isLoading ? (
         <FinanceClosingSkeleton />
       ) : !isResponseSuccess(finance) ? (
@@ -96,10 +96,13 @@ const FinanceClosingTable = ({
           <Card
             variant='bordered'
             className={{
-              wrapper: 'w-full',
+              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',
             }}
           >
-            <div className='grid grid-cols-2 gap-6'>
+            <div className='p-4 grid grid-cols-2 gap-6'>
               <div className='flex flex-col gap-1'>
                 <div>Laba Rugi Brutto</div>
                 <div className='text-lg font-bold'>
@@ -127,10 +130,13 @@ const FinanceClosingTable = ({
             variant='bordered'
             collapsible
             className={{
-              wrapper: 'w-full',
+              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',
             }}
           >
-            <div className='mt-6 p-0 mb-0'>
+            <div className='p-0'>
               <Table<HppItem>
                 data={hppTableData}
                 isLoading={isLoading}
@@ -263,6 +269,24 @@ const FinanceClosingTable = ({
                     ],
                   },
                 ]}
+                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',
+                  tableFooterClassName:
+                    'bg-gray-100 font-semibold border border-gray-200',
+                  footerRowClassName: 'border-t-2 border-gray-300',
+                  footerColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                }}
                 renderCustomRow={(row) => {
                   const rowData = row.original;
                   if (rowData.code === 'custom_row') {
@@ -296,10 +320,13 @@ const FinanceClosingTable = ({
             variant='bordered'
             collapsible
             className={{
-              wrapper: 'w-full',
+              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',
             }}
           >
-            <div className='mt-6 p-0 mb-0'>
+            <div className='p-0'>
               <Table<ProfitLossItem>
                 data={profitLossTableData}
                 isLoading={isLoading}
@@ -363,6 +390,25 @@ const FinanceClosingTable = ({
                     ),
                   },
                 ]}
+                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',
+                  tableFooterClassName:
+                    'bg-gray-100 font-semibold border border-gray-200',
+                  footerRowClassName: 'border-t-2 border-gray-300',
+                  footerColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
                 renderCustomRow={(row) => {
                   const rowData = row.original;
                   if (rowData.code === 'custom_row') {
@@ -404,9 +450,6 @@ const FinanceClosingTable = ({
                   }
                   return null;
                 }}
-                className={{
-                  paginationClassName: 'hidden',
-                }}
                 renderFooter={isResponseSuccess(finance)}
               />
             </div>

src/components/pages/closing/table/HppExpeditionClosingTable.tsx

@@ -91,15 +91,18 @@ const HppExpeditionClosingTable = ({
     );
 
   return (
-    <>
+    <div className='w-full p-0 sm:p-3'>
-      <section className='w-full'>
-        <div className='p-4'>
-          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
       <Card
         className={{
-              wrapper: 'w-full bg-base-100',
+          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='HPP Ekspedisi'
+        collapsible
+        defaultCollapsed={false}
       >
         {isLoading ? (
           <HppExpeditionClosingSkeleton
@@ -117,11 +120,13 @@ const HppExpeditionClosingTable = ({
             isLoading={isLoading}
             renderFooter={costOfRevenueExpeditionData.length > 0}
             className={{
-                  tableWrapperClassName: 'overflow-x-auto',
+              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',
+              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
               headerColumnClassName:
-                    'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                '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:
@@ -136,8 +141,6 @@ const HppExpeditionClosingTable = ({
         )}
       </Card>
     </div>
-      </section>
-    </>
   );
 };
 

src/components/pages/closing/table/OverheadClosingTable.tsx

@@ -209,15 +209,18 @@ const OverheadClosingTable = ({
   );
 
   return (
-    <>
+    <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='Pengeluaran Overhead'
         collapsible
         defaultCollapsed={false}
-        className={{
-          wrapper: 'w-full',
-          body: 'p-4 shadow',
-        }}
       >
         {isLoadingOverhead ? (
           <OverheadClosingSkeleton columns={columns} />
@@ -243,11 +246,24 @@ const OverheadClosingTable = ({
             }
             columns={columns}
             className={{
-              containerClassName: 'my-4',
+              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: cn(
-                TABLE_DEFAULT_STYLING.headerColumnClassName,
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
                 'whitespace-nowrap'
               ),
+              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',
+              tableFooterClassName:
+                'bg-gray-100 font-semibold border border-gray-200',
+              footerRowClassName: 'border-t-2 border-gray-300',
+              footerColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
             isLoading={isLoadingOverhead}
             renderFooter={
@@ -312,7 +328,7 @@ const OverheadClosingTable = ({
           </Card>
         )}
       </Card>
-    </>
+    </div>
   );
 };
 

src/components/pages/closing/table/SalesClosingTable.tsx

@@ -316,15 +316,18 @@ const SalesClosingTable = ({ projectFlockId }: SalesClosingTableProps) => {
   );
 
   return (
-    <>
+    <div className='w-full p-0 sm:p-3'>
-      <section className='w-full'>
-        <div className='p-4'>
-          <h2 className='text-xl font-semibold mb-4'>Penjualan</h2>
       <Card
         className={{
-              wrapper: 'w-full bg-base-100',
+          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='Penjualan'
+        collapsible
+        defaultCollapsed={false}
       >
         {isLoading ? (
           <SalesClosingSkeleton columns={salesColumns} />
@@ -340,12 +343,15 @@ const SalesClosingTable = ({ projectFlockId }: SalesClosingTableProps) => {
             isLoading={isLoading}
             renderFooter={salesData.length > 0}
             className={{
-                  tableWrapperClassName: 'overflow-x-auto',
+              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-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                '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-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                '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',
               tableFooterClassName:
@@ -358,8 +364,6 @@ const SalesClosingTable = ({ projectFlockId }: SalesClosingTableProps) => {
         )}
       </Card>
     </div>
-      </section>
-    </>
   );
 };
 

src/components/pages/closing/table/SapronakCalculationClosingTable.tsx

@@ -179,7 +179,7 @@ const SapronakCalculationClosingTable = ({
   );
 
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='flex flex-col gap-4 p-0 sm:p-3'>
       {/* Table DOC jika kategori Project Flock Growing */}
       <Card
         title={
@@ -190,9 +190,12 @@ const SapronakCalculationClosingTable = ({
         collapsible
         defaultCollapsed={false}
         className={{
-          wrapper: 'w-full',
+          wrapper: 'w-full rounded-lg border-none',
-          body: 'p-4 shadow',
+          body: 'p-0',
+          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+          collapsible: 'rounded-lg',
         }}
+        variant='bordered'
       >
         {isLoading ? (
           <SapronakCalculationClosingSkeleton columns={docColumns} />
@@ -213,7 +216,22 @@ const SapronakCalculationClosingTable = ({
             }
             columns={docColumns}
             className={{
-              containerClassName: 'my-4',
+              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',
+              tableFooterClassName:
+                'bg-gray-100 font-semibold border border-gray-200',
+              footerRowClassName: 'border-t-2 border-gray-300',
+              footerColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
             renderFooter={
               isResponseSuccess(sapronakCalculation) &&
@@ -229,7 +247,10 @@ const SapronakCalculationClosingTable = ({
         collapsible
         defaultCollapsed={true}
         className={{
-          wrapper: 'w-full',
+          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',
         }}
       >
         {isLoading ? (
@@ -251,7 +272,22 @@ const SapronakCalculationClosingTable = ({
             }
             columns={ovkColumns}
             className={{
-              containerClassName: 'my-4',
+              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',
+              tableFooterClassName:
+                'bg-gray-100 font-semibold border border-gray-200',
+              footerRowClassName: 'border-t-2 border-gray-300',
+              footerColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
             renderFooter={
               isResponseSuccess(sapronakCalculation) &&
@@ -267,7 +303,10 @@ const SapronakCalculationClosingTable = ({
         collapsible
         defaultCollapsed={true}
         className={{
-          wrapper: 'w-full',
+          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',
         }}
       >
         {isLoading ? (
@@ -289,7 +328,22 @@ const SapronakCalculationClosingTable = ({
             }
             columns={pakanColumns}
             className={{
-              containerClassName: 'my-4',
+              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',
+              tableFooterClassName:
+                'bg-gray-100 font-semibold border border-gray-200',
+              footerRowClassName: 'border-t-2 border-gray-300',
+              footerColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
             renderFooter={
               isResponseSuccess(sapronakCalculation) &&

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,44 +90,20 @@ const ClosingIncomingSapronaksSummaryTable = ({
     }
   }, [sorting, updateFilter]);
 
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(incomingSapronakSummaries)
-          ? incomingSapronakSummaries.data.length > 0
-          : false
-      );
-    }
-  }, [incomingSapronakSummaries, isResponseSuccess]);
-
   return (
+    <div className='w-full p-0 sm:p-3'>
       <Card
         className={{
-        wrapper: 'w-full',
+          wrapper: 'w-full rounded-lg border-none',
-        body: 'p-4 shadow',
+          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}
       >
-      <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'>
         {isLoadingIncomingSapronakSummaries ? (
           <SapronakClosingSkeleton
             type='incoming'
@@ -174,17 +146,22 @@ const ClosingIncomingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-                containerClassName: cn({
+              containerClassName: 'w-full mb-0!',
-                  'w-full mb-20':
+              tableWrapperClassName:
-                    isResponseSuccess(incomingSapronakSummaries) &&
+                'overflow-x-auto rounded-tr-none rounded-tl-none',
-                    incomingSapronakSummaries?.data?.length === 0,
+              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',
             }}
           />
         )}
-        </div>
-      </Collapse>
       </Card>
+    </div>
   );
 };
 

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

@@ -5,13 +5,11 @@ 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 DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
 
-import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { formatDate, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -52,8 +50,6 @@ const ClosingIncomingSapronaksTable = ({
       ClosingApi.getAllIncomingSapronakFetcher
     );
 
-  const [open, setOpen] = useState(true);
-
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
@@ -118,44 +114,20 @@ const ClosingIncomingSapronaksTable = ({
     }
   }, [sorting, updateFilter]);
 
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(incomingSapronaks)
-          ? incomingSapronaks.data.length > 0
-          : false
-      );
-    }
-  }, [incomingSapronaks, isResponseSuccess]);
-
   return (
+    <div className='w-full p-0 sm:p-3'>
       <Card
         className={{
-        wrapper: 'w-full',
+          wrapper: 'w-full rounded-lg border-none',
-        body: 'p-4 shadow',
+          body: 'p-0',
+          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+          collapsible: 'rounded-lg',
         }}
+        variant='bordered'
+        title='Sapronak Masuk'
+        collapsible
+        defaultCollapsed={false}
       >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>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'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
             <DebouncedTextInput
@@ -210,17 +182,22 @@ const ClosingIncomingSapronaksTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-                containerClassName: cn({
+              containerClassName: 'w-full mb-0!',
-                  'w-full mb-20':
+              tableWrapperClassName:
-                    isResponseSuccess(incomingSapronaks) &&
+                'overflow-x-auto rounded-tr-none rounded-tl-none',
-                    incomingSapronaks?.data?.length === 0,
+              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',
             }}
           />
         )}
-        </div>
-      </Collapse>
       </Card>
+    </div>
   );
 };
 

src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.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 ClosingOutgoingSapronaksSummaryTable = ({
     }
   );
 
-  const [open, setOpen] = useState(true);
-
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
@@ -94,44 +90,20 @@ const ClosingOutgoingSapronaksSummaryTable = ({
     }
   }, [sorting, updateFilter]);
 
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(outgoingSapronakSummaries)
-          ? outgoingSapronakSummaries.data.length > 0
-          : false
-      );
-    }
-  }, [outgoingSapronakSummaries, isResponseSuccess]);
-
   return (
+    <div className='w-full p-0 sm:p-3'>
       <Card
         className={{
-        wrapper: 'w-full',
+          wrapper: 'w-full rounded-lg border-none',
-        body: 'p-4 shadow',
+          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 Keluar'
+        collapsible
+        defaultCollapsed={false}
       >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Ringkasan Sapronak Keluar</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'>
         {isLoadingOutgoingSapronakSummaries ? (
           <SapronakClosingSkeleton
             type='outgoing'
@@ -174,17 +146,23 @@ const ClosingOutgoingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-                containerClassName: cn({
+              containerClassName: 'w-full mb-0!',
-                  'w-full mb-20':
+              tableWrapperClassName:
-                    isResponseSuccess(outgoingSapronakSummaries) &&
+                'overflow-x-auto rounded-tr-none rounded-tl-none',
-                    outgoingSapronakSummaries?.data?.length === 0,
+              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',
             }}
           />
         )}
-        </div>
-      </Collapse>
       </Card>
+    </div>
   );
 };
 

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

@@ -5,13 +5,11 @@ 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 DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
 
-import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { formatDate, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -52,8 +50,6 @@ const ClosingOutgoingSapronaksTable = ({
       ClosingApi.getAllOutgoingSapronakFetcher
     );
 
-  const [open, setOpen] = useState(true);
-
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
@@ -118,44 +114,20 @@ const ClosingOutgoingSapronaksTable = ({
     }
   }, [sorting, updateFilter]);
 
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(outgoingSapronaks)
-          ? outgoingSapronaks.data.length > 0
-          : false
-      );
-    }
-  }, [outgoingSapronaks, isResponseSuccess]);
-
   return (
+    <div className='w-full p-0 sm:p-3'>
       <Card
         className={{
-        wrapper: 'w-full',
+          wrapper: 'w-full rounded-lg border-none',
-        body: 'p-4 shadow',
+          body: 'p-0',
+          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+          collapsible: 'rounded-lg',
         }}
+        variant='bordered'
+        title='Sapronak Keluar'
+        collapsible
+        defaultCollapsed={false}
       >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Sapronak Keluar</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'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
             <DebouncedTextInput
@@ -210,17 +182,23 @@ const ClosingOutgoingSapronaksTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-                containerClassName: cn({
+              containerClassName: 'w-full mb-0!',
-                  'w-full mb-20':
+              tableWrapperClassName:
-                    isResponseSuccess(outgoingSapronaks) &&
+                'overflow-x-auto rounded-tr-none rounded-tl-none',
-                    outgoingSapronaks?.data?.length === 0,
+              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',
             }}
           />
         )}
-        </div>
-      </Collapse>
       </Card>
+    </div>
   );
 };