From 8a1e0f080f0cf0183f92275ea29d1b622da47394 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 19 Feb 2026 11:14:39 +0700
Subject: [PATCH] refactor(FE): Refactor table components for consistent
 styling and cleanup

---
 .../table/SapronakCalculationClosingTable.tsx  |  2 +-
 .../sapronak/IncomingSapronaksSummaryTable.tsx | 18 ++++++------------
 .../table/sapronak/IncomingSapronaksTable.tsx  | 13 ++++++-------
 .../sapronak/OutgoingSapronaksSummaryTable.tsx | 16 +++++-----------
 .../table/sapronak/OutgoingSapronaksTable.tsx  | 13 ++++++-------
 5 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/components/pages/closing/table/SapronakCalculationClosingTable.tsx b/src/components/pages/closing/table/SapronakCalculationClosingTable.tsx
index 1ad4d3d7..0f0a7857 100644
--- a/src/components/pages/closing/table/SapronakCalculationClosingTable.tsx
+++ b/src/components/pages/closing/table/SapronakCalculationClosingTable.tsx
@@ -179,7 +179,7 @@ const SapronakCalculationClosingTable = ({
   );
 
   return (
-    <div className='flex flex-col gap-4 p-0 sm:p-3'>
+    <div className='flex flex-col gap-4'>
       {/* Table DOC jika kategori Project Flock Growing */}
       <Card
         title={
diff --git a/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx b/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
index 9c43675c..8980603d 100644
--- a/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
+++ b/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 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';
 
@@ -76,10 +75,6 @@ const ClosingIncomingSapronaksSummaryTable = ({
       },
     ];
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
   // track sorting
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
@@ -92,10 +87,10 @@ const ClosingIncomingSapronaksSummaryTable = ({
   }, [sorting, updateFilter]);
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full'>
       <Card
         className={{
-          wrapper: 'w-full rounded-lg border-none',
+          wrapper: 'w-full rounded-lg',
           body: 'p-0',
           title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
           collapsible: 'rounded-lg',
@@ -147,15 +142,14 @@ const ClosingIncomingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-0!',
+              containerClassName: 'w-full mb-5!',
               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',
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
+              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
               bodyColumnClassName:
                 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
diff --git a/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx b/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
index 0bbad454..27d9ed80 100644
--- a/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
+++ b/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
@@ -116,10 +116,10 @@ const ClosingIncomingSapronaksTable = ({
   }, [sorting, updateFilter]);
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full'>
       <Card
         className={{
-          wrapper: 'w-full rounded-lg border-none',
+          wrapper: 'w-full rounded-lg',
           body: 'p-0',
           title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
           collapsible: 'rounded-lg',
@@ -129,7 +129,7 @@ const ClosingIncomingSapronaksTable = ({
         collapsible
         defaultCollapsed={false}
       >
-        <div className='flex flex-col gap-2 mb-4'>
+        <div className='flex flex-col gap-2 my-4'>
           <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
             <DebouncedTextInput
               name='search'
@@ -195,15 +195,14 @@ const ClosingIncomingSapronaksTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-0!',
+              containerClassName: 'w-full mb-5!',
               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',
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
+              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
               bodyColumnClassName:
                 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
diff --git a/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx b/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
index 591b38d6..e0bae0f7 100644
--- a/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
+++ b/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 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';
 
@@ -76,10 +75,6 @@ const ClosingOutgoingSapronaksSummaryTable = ({
       },
     ];
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
   // track sorting
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
@@ -92,7 +87,7 @@ const ClosingOutgoingSapronaksSummaryTable = ({
   }, [sorting, updateFilter]);
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full'>
       <Card
         className={{
           wrapper: 'w-full rounded-lg border-none',
@@ -147,15 +142,14 @@ const ClosingOutgoingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-0!',
+              containerClassName: 'w-full mb-5!',
               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',
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
+              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
               bodyColumnClassName:
                 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}
diff --git a/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx b/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
index 652b3f60..4143c499 100644
--- a/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
+++ b/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
@@ -116,10 +116,10 @@ const ClosingOutgoingSapronaksTable = ({
   }, [sorting, updateFilter]);
 
   return (
-    <div className='w-full p-0 sm:p-3'>
+    <div className='w-full'>
       <Card
         className={{
-          wrapper: 'w-full rounded-lg border-none',
+          wrapper: 'w-full rounded-lg',
           body: 'p-0',
           title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
           collapsible: 'rounded-lg',
@@ -129,7 +129,7 @@ const ClosingOutgoingSapronaksTable = ({
         collapsible
         defaultCollapsed={false}
       >
-        <div className='flex flex-col gap-2 mb-4'>
+        <div className='flex flex-col gap-2 my-4'>
           <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
             <DebouncedTextInput
               name='search'
@@ -195,15 +195,14 @@ const ClosingOutgoingSapronaksTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-0!',
+              containerClassName: 'w-full mb-5!',
               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',
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
+              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
               bodyColumnClassName:
                 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
             }}