pagenation

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>