pagenation

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

@@ -27,6 +27,8 @@ import { useCounterLabels, type CounterLabels } from '../counterLabels';
 import { clockTime, spokenAge, UNASSIGNED } from '../posStatus';
 import { BUCKET_LABEL, rupees, type Bucket } from '../terminalProblems';
 import { useTerminalBoard, type BoardCard, type HealthyCounter } from '../useTerminalBoard';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
 
 /**
  * Counters — the till board, written for the person who actually opens it.
@@ -573,6 +575,8 @@ function FineTable({
     terminalId: counter.terminalId,
   }));
 
+  const paged = usePaged(rows);
+
   const columns: TableColumn<FineRowData>[] = [
     {
       key: 'name',
@@ -675,7 +679,7 @@ function FineTable({
       <Card padding={0} variant="transparent">
         <div style={{ ...panelStyle, overflow: 'hidden' }}>
           <Table<FineRowData>
-            data={rows}
+            data={paged.rows}
             columns={columns}
             idKey="key"
             density="balanced"
@@ -683,6 +687,7 @@ function FineTable({
             dividers="rows"
           />
         </div>
+        <TablePager paged={paged} label="terminals" />
       </Card>
     </VStack>
   );