@burdenoff/microfe-movethewheels 2026.703.2 → 2026.703.4

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -4,6 +4,7 @@
  * Displays detailed information about a specific order.
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Package,
@@ -19,6 +20,9 @@ import {
   CheckCircle,
   Edit,
   Printer,
+  ArrowRight,
+  XCircle,
+  UserCheck,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
@@ -35,6 +39,12 @@ import {
   Button,
   Badge,
   Separator,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Table,
   TableBody,
   TableCell,
@@ -43,15 +53,106 @@ import {
   TableRow,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useOrder } from '../hooks/useOrders';
+import { useOrder, useOrders } from '../hooks/useOrders';
+import { useFleet } from '../hooks/useFleet';
+import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
+import { DocumentsCard } from '../components/DocumentsCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate, formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import type { OrderStatus } from '../types';
+
+/**
+ * Forward order-status pipeline. `updateOrderStatus` walks this sequence one
+ * step at a time; CANCELLED is offered separately as a terminal action.
+ */
+const STATUS_FLOW: OrderStatus[] = [
+  'pending',
+  'confirmed',
+  'assigned',
+  'picked_up',
+  'in_transit',
+  'out_for_delivery',
+  'delivered',
+];
+
+const STATUS_LABELS: Record<OrderStatus, string> = {
+  pending: 'Pending',
+  confirmed: 'Confirmed',
+  assigned: 'Assigned',
+  picked_up: 'Picked Up',
+  in_transit: 'In Transit',
+  out_for_delivery: 'Out for Delivery',
+  delivered: 'Delivered',
+  cancelled: 'Cancelled',
+  failed: 'Failed',
+};
+
+function nextStatus(current: OrderStatus): OrderStatus | null {
+  const index = STATUS_FLOW.indexOf(current);
+  if (index === -1 || index >= STATUS_FLOW.length - 1) return null;
+  return STATUS_FLOW[index + 1];
+}
 
 export default function OrderDetailsPage() {
   const { orderId } = useParams<{ orderId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { order, isLoading, error, refetch } = useOrder(orderId);
+  const { updateOrder, updateOrderStatus } = useOrders();
+  const { vehicles, drivers } = useFleet();
+  const { message: notice, notify } = useNotice();
+
+  const [selectedVehicle, setSelectedVehicle] = useState('');
+  const [selectedDriver, setSelectedDriver] = useState('');
+  const [assigning, setAssigning] = useState(false);
+  const [advancing, setAdvancing] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const availableVehicles = vehicles.filter(
+    (vehicle) => vehicle.status === 'available' || vehicle.id === order?.vehicleId
+  );
+  const availableDrivers = drivers.filter(
+    (driver) => driver.status === 'available' || driver.id === order?.driverId
+  );
+
+  const handleAssign = async () => {
+    if (!orderId || (!selectedVehicle && !selectedDriver)) {
+      setActionError('Pick a vehicle and/or a driver to assign.');
+      return;
+    }
+    setAssigning(true);
+    setActionError(null);
+    try {
+      await updateOrder(orderId, {
+        vehicleId: selectedVehicle || undefined,
+        driverId: selectedDriver || undefined,
+      });
+      notify('Assignment updated.');
+      setSelectedVehicle('');
+      setSelectedDriver('');
+      refetch();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : 'Failed to update assignment.');
+    } finally {
+      setAssigning(false);
+    }
+  };
+
+  const handleStatusChange = async (status: OrderStatus, successMessage: string) => {
+    if (!orderId) return;
+    setAdvancing(true);
+    setActionError(null);
+    try {
+      await updateOrderStatus(orderId, status);
+      notify(successMessage);
+      refetch();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : 'Failed to update status.');
+    } finally {
+      setAdvancing(false);
+    }
+  };
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -360,7 +461,7 @@ export default function OrderDetailsPage() {
             </div>
           </EmphasisPanel>
 
-          {/* Assignment Info */}
+          {/* Assignment — assign a vehicle & driver and advance the status */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
@@ -370,18 +471,118 @@ export default function OrderDetailsPage() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
+                {actionError && <FormError message={actionError} />}
+                {notice && <Notice message={notice} />}
+
                 <div>
-                  <p className="text-sm text-text-secondary">Driver</p>
-                  <p className="text-sm">{order.driverId || 'Not assigned'}</p>
+                  <p className="text-sm text-text-secondary">Tracking Number</p>
+                  <p className="text-sm font-mono">{order.trackingNumber || '—'}</p>
                 </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Vehicle</p>
-                  <p className="text-sm">{order.vehicleId || 'Not assigned'}</p>
+
+                <Separator />
+
+                <div className="space-y-3">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="assign-vehicle">Vehicle</Label>
+                    <Select value={selectedVehicle} onValueChange={setSelectedVehicle}>
+                      <SelectTrigger id="assign-vehicle">
+                        <SelectValue
+                          placeholder={
+                            order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableVehicles.length === 0 ? (
+                          <SelectItem value="none" disabled>
+                            No available vehicles
+                          </SelectItem>
+                        ) : (
+                          availableVehicles.map((vehicle) => (
+                            <SelectItem key={vehicle.id} value={vehicle.id}>
+                              {vehicle.vehicleNumber} ({vehicle.type})
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="assign-driver">Driver</Label>
+                    <Select value={selectedDriver} onValueChange={setSelectedDriver}>
+                      <SelectTrigger id="assign-driver">
+                        <SelectValue
+                          placeholder={
+                            order.driverId ? `Current: ${order.driverId}` : 'Select a driver'
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableDrivers.length === 0 ? (
+                          <SelectItem value="none" disabled>
+                            No available drivers
+                          </SelectItem>
+                        ) : (
+                          availableDrivers.map((driver) => (
+                            <SelectItem key={driver.id} value={driver.id}>
+                              {driver.fullName} ({driver.employeeId})
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <Button
+                    className="w-full"
+                    onClick={handleAssign}
+                    disabled={assigning || (!selectedVehicle && !selectedDriver)}
+                  >
+                    <UserCheck size={16} />
+                    {assigning ? 'Assigning…' : 'Assign driver & vehicle'}
+                  </Button>
                 </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Tracking Number</p>
-                  <p className="text-sm font-mono">{order.trackingNumber}</p>
+
+                <Separator />
+
+                <div className="space-y-2">
+                  <p className="text-sm text-text-secondary">
+                    Current status: <span className="font-medium">{STATUS_LABELS[order.status]}</span>
+                  </p>
+                  {(() => {
+                    const upcoming = nextStatus(order.status);
+                    if (!upcoming) return null;
+                    return (
+                      <Button
+                        variant="outline"
+                        className="w-full"
+                        onClick={() =>
+                          handleStatusChange(
+                            upcoming,
+                            `Order advanced to ${STATUS_LABELS[upcoming]}.`
+                          )
+                        }
+                        disabled={advancing}
+                      >
+                        <ArrowRight size={16} />
+                        {advancing ? 'Updating…' : `Advance to ${STATUS_LABELS[upcoming]}`}
+                      </Button>
+                    );
+                  })()}
+                  {order.status !== 'cancelled' && order.status !== 'delivered' && (
+                    <Button
+                      variant="outline"
+                      className="w-full text-status-error-text"
+                      onClick={() => handleStatusChange('cancelled', 'Order cancelled.')}
+                      disabled={advancing}
+                    >
+                      <XCircle size={16} />
+                      Cancel order
+                    </Button>
+                  )}
                 </div>
+
                 <Button
                   variant="outline"
                   className="w-full"
@@ -394,6 +595,9 @@ export default function OrderDetailsPage() {
             </CardContent>
           </Card>
 
+          {/* Documents — real files via wspace-files-svc */}
+          <DocumentsCard entityType="order" entityId={order.id} />
+
           {/* Special Instructions */}
           {order.specialInstructions && (
             <Card>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useState } from 'react';
-import { Package, Plus, Filter, Download, RefreshCw } from 'lucide-react';
+import { Package, Plus, Filter, Download, RefreshCw, UserPlus, UserCheck } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
@@ -21,7 +21,7 @@ import {
   SelectValue,
   Badge,
 } from '../components/ui';
-import { useOrders } from '../hooks/useOrders';
+import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
@@ -37,21 +37,36 @@ export default function OrdersListPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [statusFilter, setStatusFilter] = useState<OrderStatus | 'all'>('all');
   const [typeFilter, setTypeFilter] = useState<'b2b' | 'b2c' | 'all'>('all');
+  const [unassignedOnly, setUnassignedOnly] = useState(false);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
 
-  const { orders, totalOrders, isLoading, refetch } = useOrders({
+  const filtersActive = statusFilter !== 'all' || typeFilter !== 'all' || unassignedOnly;
+
+  const { orders, hasMore, isLoading, refetch } = useOrders({
     filters: {
       status: statusFilter === 'all' ? undefined : statusFilter,
       orderType: typeFilter === 'all' ? undefined : typeFilter,
+      unassigned: unassignedOnly || undefined,
     },
-    limit: 50,
+    limit: pageSize,
+    offset: page * pageSize,
   });
 
+  // Pipeline totals + "at a glance" tiles come from the live aggregate, never
+  // from the truncated current page.
+  const { stats } = useOrderStats();
+  const totalOrders = stats.total;
+
   const goTo = (path: string) => {
     if (navigate) {
       navigate(joinPath(basePath, path));
     }
   };
 
+  // Reset to the first page whenever the active filter set changes.
+  const resetPage = () => setPage(0);
+
   const columns: Column<Order>[] = [
     {
       id: 'orderNumber',
@@ -129,6 +144,29 @@ export default function OrdersListPage() {
       className: 'min-w-[100px] whitespace-nowrap',
       cell: (row) => formatDate(row.createdAt, 'relative'),
     },
+    {
+      id: 'driver',
+      header: t('movethewheels.orders.table.driver', 'Driver'),
+      className: 'min-w-[120px] whitespace-nowrap',
+      cell: (row) =>
+        row.driverId ? (
+          <span className="inline-flex items-center gap-1 text-sm text-status-success-text">
+            <UserCheck size={14} /> {t('movethewheels.orders.table.assigned', 'Assigned')}
+          </span>
+        ) : (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              goTo(`orders/${row.id}`);
+            }}
+          >
+            <UserPlus size={14} className="mr-1" />
+            {t('movethewheels.orders.table.assign', 'Assign')}
+          </Button>
+        ),
+    },
   ];
 
   const statusOptions: { value: OrderStatus | 'all'; label: string }[] = [
@@ -168,7 +206,7 @@ export default function OrdersListPage() {
             {
               label: t('movethewheels.orders.actions.export', 'Export'),
               icon: <Download size={16} />,
-              onSelect: () => {},
+              onSelect: () => goTo('import-export'),
             },
           ]}
         />
@@ -195,7 +233,7 @@ export default function OrdersListPage() {
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {orders.filter((o) => o.status === 'pending').length}
+              {stats.byStatus.pending}
             </p>
             <p className="text-xs text-text-secondary">
               {t('movethewheels.orders.glance.pending', 'Pending')}
@@ -203,10 +241,7 @@ export default function OrdersListPage() {
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {
-                orders.filter((o) => o.status === 'in_transit' || o.status === 'out_for_delivery')
-                  .length
-              }
+              {stats.byStatus.in_transit + stats.byStatus.out_for_delivery}
             </p>
             <p className="text-xs text-text-secondary">
               {t('movethewheels.orders.glance.inTransit', 'In transit')}
@@ -214,7 +249,7 @@ export default function OrdersListPage() {
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {orders.filter((o) => o.status === 'delivered').length}
+              {stats.byStatus.delivered}
             </p>
             <p className="text-xs text-text-secondary">
               {t('movethewheels.orders.glance.delivered', 'Delivered')}
@@ -235,7 +270,10 @@ export default function OrdersListPage() {
             </div>
             <Select
               value={statusFilter}
-              onValueChange={(value) => setStatusFilter(value as OrderStatus | 'all')}
+              onValueChange={(value) => {
+                setStatusFilter(value as OrderStatus | 'all');
+                resetPage();
+              }}
             >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder={t('movethewheels.orders.filters.status', 'Status')} />
@@ -250,7 +288,10 @@ export default function OrdersListPage() {
             </Select>
             <Select
               value={typeFilter}
-              onValueChange={(value) => setTypeFilter(value as 'b2b' | 'b2c' | 'all')}
+              onValueChange={(value) => {
+                setTypeFilter(value as 'b2b' | 'b2c' | 'all');
+                resetPage();
+              }}
             >
               <SelectTrigger className="w-[150px]">
                 <SelectValue placeholder={t('movethewheels.orders.filters.type', 'Type')} />
@@ -263,13 +304,26 @@ export default function OrdersListPage() {
                 <SelectItem value="b2c">B2C</SelectItem>
               </SelectContent>
             </Select>
-            {(statusFilter !== 'all' || typeFilter !== 'all') && (
+            <Button
+              variant={unassignedOnly ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => {
+                setUnassignedOnly((prev) => !prev);
+                resetPage();
+              }}
+            >
+              <UserPlus size={14} className="mr-1" />
+              {t('movethewheels.orders.filters.unassigned', 'Needs driver')}
+            </Button>
+            {filtersActive && (
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => {
                   setStatusFilter('all');
                   setTypeFilter('all');
+                  setUnassignedOnly(false);
+                  resetPage();
                 }}
               >
                 {t('movethewheels.orders.filters.clear', 'Clear filters')}
@@ -289,6 +343,15 @@ export default function OrdersListPage() {
         searchFields={['orderNumber', 'customerInfo'] as (keyof Order)[]}
         onRowClick={(row) => goTo(`orders/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        totalItems={filtersActive ? undefined : totalOrders}
+        hasNextPage={hasMore}
         emptyMessage={t('movethewheels.orders.empty', 'No orders found')}
         emptyIllustration="empty-data"
         emptyTitle={t('movethewheels.orders.emptyTitle', 'No orders yet')}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -2,12 +2,13 @@
  * Products Page - List of all products
  */
 
+import { useState } from 'react';
 import { Package, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProducts } from '../hooks/useInventory';
+import { useProducts, useProductStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -15,7 +16,14 @@ import type { Product } from '../types';
 
 export default function ProductsPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { products, totalProducts, isLoading, refetch } = useProducts();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { products, hasMore, isLoading, refetch } = useProducts({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — not the truncated page.
+  const { stats } = useProductStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -94,7 +102,7 @@ export default function ProductsPage() {
   return (
     <PageLayout
       title="Products"
-      subtitle={`${totalProducts} products`}
+      subtitle={`${stats.total} products`}
       icon={<Package size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -105,7 +113,11 @@ export default function ProductsPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+            {
+              label: 'Export',
+              icon: <Download size={16} />,
+              onSelect: () => goTo('import-export'),
+            },
           ]}
         />
       }
@@ -121,18 +133,18 @@ export default function ProductsPage() {
         <p className="text-sm font-medium text-text-secondary">Catalog at a glance</p>
         <div className="mt-3 grid grid-cols-3 gap-4">
           <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalProducts}</p>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.total}</p>
             <p className="text-xs text-text-secondary">Total products</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {products.filter((p) => p.fragile || p.hazardous).length}
+              {stats.specialHandling}
             </p>
             <p className="text-xs text-text-secondary">Special handling</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {products.filter((p) => p.temperatureControlled).length}
+              {stats.temperatureControlled}
             </p>
             <p className="text-xs text-text-secondary">Temp-controlled</p>
           </div>
@@ -148,6 +160,14 @@ export default function ProductsPage() {
         searchFields={['name', 'sku', 'category'] as (keyof Product)[]}
         onRowClick={(row) => goTo(`inventory/products/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-files"
         emptyTitle="No products yet"
         emptyDescription="Add products to your catalog so they can be added to orders and stocked in warehouses."

package/src/movethewheels/pages/ReportsPage.tsx

@@ -7,7 +7,16 @@
  */
 
 import { useState } from 'react';
-import { FileBarChart, Download, Calendar, Filter, Clock, Plus } from 'lucide-react';
+import {
+  FileBarChart,
+  Download,
+  Calendar,
+  Filter,
+  Clock,
+  Plus,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import {
   Card,
@@ -26,6 +35,7 @@ import {
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useReports, type CreateReportInput } from '../hooks/useReports';
 import { formatDate } from '../utils/formatters';
+import { downloadFile, downloadJson, recordToCsv, slugifyForFilename } from '../utils/download';
 
 const REPORT_TYPES: { value: string; label: string }[] = [
   { value: 'operations', label: 'Operations Summary' },
@@ -40,8 +50,14 @@ interface Feedback {
   text: string;
 }
 
+const REPORTS_PAGE_SIZE = 10;
+
 export default function ReportsPage() {
-  const { reports, isLoading, error, refetch, createReport, generateReport } = useReports();
+  const [page, setPage] = useState(0);
+  const { reports, hasMore, isLoading, error, refetch, createReport, generateReport } = useReports({
+    limit: REPORTS_PAGE_SIZE,
+    offset: page * REPORTS_PAGE_SIZE,
+  });
   const [reportType, setReportType] = useState('operations');
   const [busyId, setBusyId] = useState<string | null>(null);
   const [creating, setCreating] = useState(false);
@@ -79,8 +95,21 @@ export default function ReportsPage() {
     setBusyId(id);
     setFeedback(null);
     try {
-      await generateReport(id);
-      setFeedback({ tone: 'success', text: 'Report generated.' });
+      const generated = await generateReport(id);
+      // Turn the freshly generated report into a downloadable file. Prefer a
+      // flat CSV of the result payload; fall back to the full JSON document so a
+      // file always lands even when the result is nested/empty.
+      const baseName = `${slugifyForFilename(generated.report.name)}-${generated.generatedAt.slice(
+        0,
+        10
+      )}`;
+      const csv = recordToCsv(generated.result ?? null);
+      if (csv) {
+        downloadFile(`${baseName}.csv`, csv, 'text/csv');
+      } else {
+        downloadJson(`${baseName}.json`, generated);
+      }
+      setFeedback({ tone: 'success', text: 'Report generated and downloaded.' });
     } catch (genError) {
       setFeedback({
         tone: 'error',
@@ -212,6 +241,38 @@ export default function ReportsPage() {
               </Card>
             ))
           )}
+
+          {!isLoading && !error && (reports.length > 0 || page > 0) && (
+            <div className="flex flex-wrap items-center justify-between gap-3 pt-1">
+              <span className="text-sm text-text-secondary">
+                Showing {reports.length === 0 ? 0 : page * REPORTS_PAGE_SIZE + 1} to{' '}
+                {page * REPORTS_PAGE_SIZE + reports.length}
+              </span>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8"
+                  aria-label="Previous page"
+                  onClick={() => setPage((p) => Math.max(0, p - 1))}
+                  disabled={page === 0}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="px-3 text-sm">Page {page + 1}</span>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8"
+                  aria-label="Next page"
+                  onClick={() => setPage((p) => p + 1)}
+                  disabled={!hasMore}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
         </div>
 
         <div className="space-y-6">