gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +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';
import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import Pagination from '@/components/Pagination';
interface Totals {
totalQty: number;
@@ -464,37 +465,51 @@ const PurchasesPerSupplierTab = () => {
const tableColumns = getTableColumns(totals);
return (
<Card
key={supplier.id}
title={supplier.supplier.name}
subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
className={{ wrapper: 'w-full' }}
collapsible={true}
>
<Table
data={supplier.items}
columns={tableColumns}
pageSize={10}
renderFooter={supplier.items.length > 0}
className={{
containerClassName: 'w-full',
tableWrapperClassName: 'overflow-x-auto mt-4',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
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',
tableFooterClassName:
'bg-gray-100 font-semibold border border-gray-200',
footerRowClassName: 'border-t-2 border-gray-300',
footerColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
}}
/>
</Card>
<>
<Card
key={supplier.id}
title={supplier.supplier.name}
subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
className={{ wrapper: 'w-full' }}
collapsible={true}
>
<Table
data={supplier.items}
columns={tableColumns}
pageSize={10}
renderFooter={supplier.items.length > 0}
className={{
containerClassName: 'w-full',
tableWrapperClassName: 'overflow-x-auto mt-4',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName:
'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
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',
tableFooterClassName:
'bg-gray-100 font-semibold border border-gray-200',
footerRowClassName: 'border-t-2 border-gray-300',
footerColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
}}
/>
<Pagination
key={supplier.id}
currentPage={1}
totalItems={supplier.items.length}
onPageChange={() => {}}
onRowChange={() => {}}
onNextPage={() => {}}
onPrevPage={() => {}}
rowOptions={[10, 25, 50, 100]}
itemsPerPage={10}
/>
</Card>
</>
);
})
)}