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

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>
   );
 };