pagenation

src/features/store-admin/pages/ConsolePage.tsx

@@ -29,6 +29,8 @@ import {
 import { useBranchScope } from '../BranchScope';
 import { DateRangePicker, presetRange, type RangePreset } from '../DateRangePicker';
 import { branchLabel, count, money, percent, share } from '../format';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
 import {
   SYNC_COLOR,
   SYNC_LABEL,
@@ -512,6 +514,8 @@ function TillTable({ rows }: { rows: Row[] }) {
     row.health.terminals.map((terminal) => ({ branch: row.branch.locationname, terminal })),
   );
 
+  const paged = usePaged(terminals);
+
   if (terminals.length === 0) {
     return (
       <VStack gap={0.5} padding={3}>
@@ -527,6 +531,7 @@ function TillTable({ rows }: { rows: Row[] }) {
   }
 
   return (
+    <>
     <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
       <thead>
         <tr>
@@ -540,7 +545,7 @@ function TillTable({ rows }: { rows: Row[] }) {
         </tr>
       </thead>
       <tbody>
-        {terminals.map(({ branch, terminal }) => (
+        {paged.rows.map(({ branch, terminal }) => (
           <tr key={`${branch}:${terminal.terminalId}`}>
             <Td isStrong>
               <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>
@@ -569,6 +574,8 @@ function TillTable({ rows }: { rows: Row[] }) {
         ))}
       </tbody>
     </table>
+    <TablePager paged={paged} label="tills" />
+    </>
   );
 }