From 4fe53f364a1756a1b91e3d89b3b4955e52907476 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 6 Dec 2025 08:54:12 +0700
Subject: [PATCH] refactor(FE-326): Remove Tabs wrapper from SalesReportTable

---
 .../pages/closing/sale/SalesReportTable.tsx   | 138 ++++++++----------
 1 file changed, 62 insertions(+), 76 deletions(-)

diff --git a/src/components/pages/closing/sale/SalesReportTable.tsx b/src/components/pages/closing/sale/SalesReportTable.tsx
index e2956bb6..7213a621 100644
--- a/src/components/pages/closing/sale/SalesReportTable.tsx
+++ b/src/components/pages/closing/sale/SalesReportTable.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Tabs from '@/components/Tabs';
 import React, { useState, useMemo } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import Table, { CustomHeaderRow } from '@/components/Table';
@@ -365,81 +364,68 @@ const SalesReportTable = ({
   return (
     <>
       <section className='w-full'>
-        <Tabs
-          className='bg-base-100 p-2'
-          onTabChange={setActiveTabId}
-          activeTabId={activeTabId}
-          tabs={[
-            {
-              id: 'penjualan',
-              label: 'Penjualan',
-              content: (
-                <div className='p-4'>
-                  <h2 className='text-xl font-semibold mb-4'>Penjualan</h2>
-                  <Card
-                    className={{
-                      wrapper: 'w-full bg-base-100',
-                    }}
-                  >
-                    <Table
-                      data={salesBroilerData}
-                      columns={salesColumns}
-                      renderCustomHeaders={true}
-                      customHeaderRows={salesCustomHeaderRows}
-                      renderFooter={salesBroilerData.length > 0}
-                      footerContent={
-                        <tfoot>
-                          <tr className='bg-gray-100 font-semibold border border-gray-200'>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
-                              Total Penjualan
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatNumber(totals.totalQuantity)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatNumber(totals.totalWeight)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatNumber(totals.avgWeight)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatCurrency(totals.avgPricePartner)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatCurrency(totals.totalPartner)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatCurrency(totals.avgPriceAct)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
-                              {formatCurrency(totals.totalAct)}
-                            </td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                            <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                          </tr>
-                        </tfoot>
-                      }
-                      className={{
-                        tableWrapperClassName: 'overflow-x-auto',
-                        tableClassName: 'w-full table-auto text-sm',
-                        headerRowClassName: 'hidden',
-                        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>
-              ),
-            },
-          ]}
-          variant='lifted'
-        />
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>Penjualan</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={salesBroilerData}
+              columns={salesColumns}
+              renderCustomHeaders={true}
+              customHeaderRows={salesCustomHeaderRows}
+              renderFooter={salesBroilerData.length > 0}
+              footerContent={
+                <tfoot>
+                  <tr className='bg-gray-100 font-semibold border border-gray-200'>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
+                      Total Penjualan
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatNumber(totals.totalQuantity)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatNumber(totals.totalWeight)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatNumber(totals.avgWeight)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatCurrency(totals.avgPricePartner)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatCurrency(totals.totalPartner)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatCurrency(totals.avgPriceAct)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                      {formatCurrency(totals.totalAct)}
+                    </td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
+                  </tr>
+                </tfoot>
+              }
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'hidden',
+                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>
       </section>
     </>
   );