pagenation

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

@@ -37,6 +37,8 @@ import { shortAge } from '../posStatus';
 import { AssignBar } from '../AssignBar';
 import { assignability, assignedFrom } from '../assignDelivery';
 import { useSelection } from '@/components/useSelection';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
 import './deliveries.css';
 
 type Tab = 'orders' | 'deliveries' | 'counter';
@@ -65,6 +67,11 @@ export function SalesPage() {
   const [preset, setPreset] = useState<RangePreset>('month');
   const [range, setRange] = useState<DateRange>(() => presetRange('month'));
   const [keyword, setKeyword] = useState('');
+  /* What the tables are currently showing. Any change to it sends every pager
+     back to page 1 — landing on page 4 of a search you just typed reads as an
+     empty result. */
+  const queryKey = `${tab}|${status}|${keyword}|${range.fromdate}|${range.todate}|${selected ?? 'all'}`;
+
   const [detail, setDetail] = useState<{ row: OrderRow | DeliveryRow; kind: RowKind } | null>(
     null,
   );
@@ -334,6 +341,7 @@ export function SalesPage() {
             ) : null}
             <OrdersTable
               rows={orderRows}
+              queryKey={queryKey}
               isLoading={orders.isLoading}
               showBranch={selected === null}
               selection={picked}
@@ -402,6 +410,7 @@ export function SalesPage() {
             />
             <DeliveriesTable
               rows={deliveryRows}
+              queryKey={queryKey}
               isLoading={deliveries.isLoading}
               showBranch={selected === null}
               onOpen={(row) => setDetail({ row, kind: 'delivery' })}
@@ -465,6 +474,7 @@ export function SalesPage() {
             </HStack>
             <BillsTable
               rows={billRows}
+              queryKey={queryKey}
               isLoading={billPages.some((page) => page.isLoading)}
               showBranch={selected === null}
             />
@@ -571,15 +581,21 @@ function OrdersTable({
   branchOf,
   assigned,
   onOpen,
+  queryKey,
 }: {
   rows: OrderRow[];
   isLoading: boolean;
+  /** Identifies the current filter set; changing it returns the pager to page 1. */
+  queryKey: string;
   showBranch: boolean;
   selection: ReturnType<typeof useSelection>;
   branchOf: (row: OrderRow) => TenantLocation | undefined;
   assigned: ReadonlySet<number>;
   onOpen: (row: OrderRow) => void;
 }) {
+  // Above the early returns — a hook cannot be called conditionally.
+  const paged = usePaged(rows, { resetKey: queryKey });
+
   if (isLoading) return <Loading what="orders" />;
   if (rows.length === 0) {
     return (
@@ -623,7 +639,7 @@ function OrdersTable({
           <tbody>
             {/* Keyed on orderheaderid, never orderid — `orderid` is not unique
                 in this tenant's data, a defect the old console hit first. */}
-            {rows.map((row, index) => {
+            {paged.rows.map((row, index) => {
               const cod = row.collectionamt ?? 0;
               const amount = orderValue(row);
               const verdict = assignability(row, branchOf(row), assigned);
@@ -657,7 +673,7 @@ function OrdersTable({
                     />
                   </td>
                   <Td isMuted>
-                    <Mono>{index + 1}</Mono>
+                    <Mono>{paged.from + index}</Mono>
                   </Td>
                   <Td>
                     <Primary>
@@ -716,6 +732,7 @@ function OrdersTable({
           </tbody>
         </table>
       </div>
+      <TablePager paged={paged} label="orders" />
     </Card>
   );
 }
@@ -727,12 +744,16 @@ function DeliveriesTable({
   isLoading,
   showBranch,
   onOpen,
+  queryKey,
 }: {
   rows: DeliveryRow[];
   isLoading: boolean;
   showBranch: boolean;
   onOpen: (row: DeliveryRow) => void;
+  queryKey: string;
 }) {
+  const paged = usePaged(rows, { resetKey: queryKey });
+
   if (isLoading) return <Loading what="deliveries" />;
   if (rows.length === 0) {
     return (
@@ -762,7 +783,7 @@ function DeliveriesTable({
             </tr>
           </thead>
           <tbody>
-            {rows.map((row) => {
+            {paged.rows.map((row) => {
               // The backend leaves customer and contact blank on app-created
               // jobs but fills the address, so both sides fall back rather than
               // rendering an empty cell.
@@ -882,6 +903,7 @@ function DeliveriesTable({
           </tbody>
         </table>
       </div>
+      <TablePager paged={paged} label="deliveries" />
     </Card>
   );
 }
@@ -892,11 +914,15 @@ function BillsTable({
   rows,
   isLoading,
   showBranch,
+  queryKey,
 }: {
   rows: { bill: PosSale; branch: string }[];
   isLoading: boolean;
   showBranch: boolean;
+  queryKey: string;
 }) {
+  const paged = usePaged(rows, { resetKey: queryKey });
+
   if (isLoading) return <Loading what="counter bills" />;
   if (rows.length === 0) {
     return (
@@ -930,7 +956,7 @@ function BillsTable({
             {/* Keyed on terminalorderid — the UUID minted at the till. The
                 invoice number is unique only per terminal, so a replaced till
                 restarting its series would collide. */}
-            {rows.map(({ bill, branch }) => {
+            {paged.rows.map(({ bill, branch }) => {
               const lag = syncLagMs(bill);
               // The recovered instant, not the stamp — see `billedAtMs`.
               const billedAt = billedAtMs(bill);
@@ -991,6 +1017,7 @@ function BillsTable({
           </tbody>
         </table>
       </div>
+      <TablePager paged={paged} label="bills" />
     </Card>
   );
 }