refactor(FE): Refactor table and tab styles for consistent spacing and

layout

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -126,7 +126,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           variant='boxed'
           className={{
             tabHeaderWrapper:
-              'justify-between items-center py-3 border-b border-base-content/10',
+              'relative justify-between items-center py-3 after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10',
             tab: 'w-fit',
             content: 'p-0 m-0',
           }}

src/components/pages/closing/ClosingsTable.tsx

@@ -17,7 +17,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
 
-import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { LocationApi } from '@/services/api/master-data';

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

@@ -82,7 +82,7 @@ const FinanceClosingTable = ({
   }, [finance]);
 
   return (
-    <div className='flex flex-col gap-4 p-0 sm:p-3'>
+    <div className='flex flex-col gap-4 pt-3'>
       {isLoading ? (
         <FinanceClosingSkeleton />
       ) : !isResponseSuccess(finance) ? (

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

@@ -91,7 +91,7 @@ const HppExpeditionClosingTable = ({
     );
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full pt-3'>
       <Card
         className={{
           wrapper: 'w-full rounded-lg border-none',

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

@@ -209,7 +209,7 @@ const OverheadClosingTable = ({
   );
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full pt-3'>
       <Card
         className={{
           wrapper: 'w-full rounded-lg border-none',

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

@@ -316,7 +316,7 @@ const SalesClosingTable = ({ projectFlockId }: SalesClosingTableProps) => {
   );
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full pt-3'>
       <Card
         className={{
           wrapper: 'w-full rounded-lg border-none',

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 pt-3'>
       {/* Table DOC jika kategori Project Flock Growing */}
       <Card
         title={

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

@@ -116,7 +116,7 @@ const ClosingIncomingSapronaksTable = ({
   }, [sorting, updateFilter]);
 
   return (
-    <div className='w-full'>
+    <div className='w-full pt-3'>
       <Card
         className={{
           wrapper: 'w-full rounded-lg',