pagenation

src/features/nearle-admin/import/SheetImportPanel.tsx

@@ -37,6 +37,8 @@ import { shelveBatch } from './shelve';
 import { SectionHeader } from '@/components/SectionHeader';
 import { SheetDropzone } from '@/components/SheetDropzone';
 import { downloadTemplate, parseProductSheet, type ParsedSheet } from './parseProductSheet';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
 
 interface PreviewRow extends Record<string, unknown> {
   productname: string;
@@ -347,7 +349,10 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
     },
   ];
 
-  const preview: PreviewRow[] = (parsed?.rows ?? []).slice(0, 25).map((row: SheetProductRow) => ({
+  /* The whole sheet, paged — it used to be cut at 25 with nothing saying so,
+     unlike the issues list above, which says '…and N more'. A bad row on line
+     300 was unreachable in the one screen meant for checking the parse. */
+  const preview: PreviewRow[] = (parsed?.rows ?? []).map((row: SheetProductRow) => ({
     productname: row.productname,
     productsku: row.productsku,
     categoryid: row.categoryid,
@@ -356,6 +361,9 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
     quantity: row.quantity,
   }));
 
+  // A new file is a new sheet, so the pager starts over.
+  const previewPaged = usePaged(preview, { resetKey: preview.length });
+
   /* ── Finished ─────────────────────────────────────────────────────────── */
 
   if (batch && (isSettled(batch) || isAwaitingReview(batch) || isDismissed(batch))) {
@@ -781,13 +789,16 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
             ) : null}
 
             {preview.length > 0 ? (
-              <Table<PreviewRow>
-                data={preview}
-                columns={previewColumns}
-                idKey="productsku"
-                density="compact"
-                dividers="rows"
-              />
+              <>
+                <Table<PreviewRow>
+                  data={previewPaged.rows}
+                  columns={previewColumns}
+                  idKey="productsku"
+                  density="compact"
+                  dividers="rows"
+                />
+                <TablePager paged={previewPaged} label="sheet rows" />
+              </>
             ) : null}
 
             {/* Real progress, from the batch.

src/features/nearle-admin/pages/StoreDetailPage.tsx

@@ -15,6 +15,8 @@ import { PageHeader } from '@/components/PageHeader';
 import { SectionHeader } from '@/components/SectionHeader';
 import { useLocationSummary, useOrderSummary, useTenantLocations, useTenants } from '@/queries/hooks';
 import type { LocationOrderSummary, TenantInfo, TenantLocation } from '@/api/types';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
 
 interface BranchRow extends Record<string, unknown> {
   locationid: number;
@@ -78,6 +80,8 @@ export function StoreDetailPage() {
     });
   }, [locations, summary.data]);
 
+  const paged = usePaged(rows);
+
   const totals = useMemo(() => {
     const branches = rows.length;
     const active = rows.filter((row) => row.status.toLowerCase() === 'active').length;
@@ -256,7 +260,7 @@ export function StoreDetailPage() {
                 than dropping any of them. The page itself never scrolls wide. */}
             <div className="table-scroll">
             <Table<BranchRow>
-              data={rows}
+              data={paged.rows}
               columns={columns}
               idKey="locationid"
               density="balanced"
@@ -264,6 +268,7 @@ export function StoreDetailPage() {
               dividers="rows"
             />
             </div>
+            <TablePager paged={paged} label="branches" />
           </DataState>
         </Card>
       </VStack>