refactor(FE-326): Remove Tabs wrapper from SalesReportTable

This commit is contained in:
rstubryan
2025-12-06 08:54:12 +07:00
parent eaf118845c
commit 4fe53f364a
@@ -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>
</>
);