mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-326): Remove Tabs wrapper from SalesReportTable
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user