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