gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-361): Add pagination control to supplier purchases table

Browse Source
This commit is contained in:
rstubryan
2025-12-13 11:21:04 +07:00
parent 0983f154d2
commit 81f98c5f06
1 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/logistic-stock/PurchasesPerSupplierTab.tsx
+46 -31
View File
@@ -20,6 +20,7 @@ import {
} from '@/types/api/report/logistic-stock'; } from '@/types/api/report/logistic-stock';
import { isResponseSuccess } from '@/lib/api-helper'; import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter'; import { useTableFilter } from '@/services/hooks/useTableFilter';
import Pagination from '@/components/Pagination';
interface Totals { interface Totals {
totalQty: number; totalQty: number;
@@ -464,37 +465,51 @@ const PurchasesPerSupplierTab = () => {
const tableColumns = getTableColumns(totals); const tableColumns = getTableColumns(totals);
return ( return (
<Card <>
key={supplier.id} <Card
title={supplier.supplier.name} key={supplier.id}
subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`} title={supplier.supplier.name}
className={{ wrapper: 'w-full' }} subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
collapsible={true} className={{ wrapper: 'w-full' }}
> collapsible={true}
<Table >
data={supplier.items} <Table
columns={tableColumns} data={supplier.items}
pageSize={10} columns={tableColumns}
renderFooter={supplier.items.length > 0} pageSize={10}
className={{ renderFooter={supplier.items.length > 0}
containerClassName: 'w-full', className={{
tableWrapperClassName: 'overflow-x-auto mt-4', containerClassName: 'w-full',
tableClassName: 'w-full table-auto text-sm', tableWrapperClassName: 'overflow-x-auto mt-4',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50', tableClassName: 'w-full table-auto text-sm',
headerColumnClassName: headerRowClassName:
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200', 'border-b border-b-gray-200 bg-gray-50',
bodyRowClassName: headerColumnClassName:
'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 border-gray-200',
bodyColumnClassName: bodyRowClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap', 'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
tableFooterClassName: bodyColumnClassName:
'bg-gray-100 font-semibold border border-gray-200', 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
footerRowClassName: 'border-t-2 border-gray-300', tableFooterClassName:
footerColumnClassName: 'bg-gray-100 font-semibold border border-gray-200',
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap', footerRowClassName: 'border-t-2 border-gray-300',
}} footerColumnClassName:
/> 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
</Card> }}
/>
<Pagination
key={supplier.id}
currentPage={1}
totalItems={supplier.items.length}
onPageChange={() => {}}
onRowChange={() => {}}
onNextPage={() => {}}
onPrevPage={() => {}}
rowOptions={[10, 25, 50, 100]}
itemsPerPage={10}
/>
</Card>
</>
); );
}) })
)} )}