@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

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,
@@ -24,8 +33,11 @@ import {
   Skeleton,
 } from '../components/ui';
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { VolumeBar } from '../components/charts';
 import { useReports, type CreateReportInput } from '../hooks/useReports';
+import { useAnalytics } from '../hooks/useAnalytics';
 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 +52,16 @@ 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 { analytics } = useAnalytics();
+  const previewData = analytics.trends.dailyOrders.slice(-7);
   const [reportType, setReportType] = useState('operations');
   const [busyId, setBusyId] = useState<string | null>(null);
   const [creating, setCreating] = useState(false);
@@ -79,8 +99,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,9 +245,60 @@ 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">
+          {/* Data preview — a real snapshot (recent order volume) of what a
+              generated report draws from. Honest empty state when no data. */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Data preview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-2 text-xs text-text-secondary">Order volume · last 7 days</p>
+              <VolumeBar
+                xKey="date"
+                height={160}
+                showLegend={false}
+                data={previewData}
+                series={[{ dataKey: 'orders', name: 'Orders' }]}
+                emptyMessage="No order data to preview yet"
+              />
+            </CardContent>
+          </Card>
+
           {/* Scheduled Reports — the page's single emphasis zone */}
           <EmphasisPanel className="space-y-3">
             <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -15,6 +15,9 @@ import {
   Plus,
   Trash2,
   Save,
+  ArrowUp,
+  ArrowDown,
+  Fuel,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -34,13 +37,16 @@ import {
   SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
+import { firstRealLatLng } from '../utils/mapMarkers';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatDate, formatAddress } from '../utils/formatters';
+import { formatDate, formatAddress, formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
 import type { Route as RouteType, RouteStop } from '../types';
 
 const ROUTE_STATUS_OPTIONS: { value: RouteType['status']; label: string }[] = [
@@ -90,6 +96,15 @@ function NewRouteForm() {
       stops: prev.stops.map((stop, i) => (i === index ? { ...stop, [field]: value } : stop)),
     }));
 
+  const moveStop = (index: number, direction: -1 | 1) =>
+    setForm((prev) => {
+      const target = index + direction;
+      if (target < 0 || target >= prev.stops.length) return prev;
+      const stops = [...prev.stops];
+      [stops[index], stops[target]] = [stops[target], stops[index]];
+      return { ...prev, stops };
+    });
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!form.name.trim()) {
@@ -152,8 +167,9 @@ function NewRouteForm() {
       }
     >
       <PagePurpose icon={<Navigation size={18} />}>
-        Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle
-        and driver. Once created you can optimize it to sequence the stops into the shortest run.
+        Plan a new delivery route — name it, list the stops to visit, and optionally assign a
+        vehicle and driver. Once created you can optimize it to sequence the stops into the shortest
+        run.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
@@ -273,7 +289,27 @@ function NewRouteForm() {
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="md:col-span-1 flex justify-end">
+                <div className="md:col-span-1 flex justify-end gap-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveStop(index, -1)}
+                    disabled={index === 0}
+                    aria-label={`Move stop ${index + 1} up`}
+                  >
+                    <ArrowUp size={16} />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveStop(index, 1)}
+                    disabled={index === form.stops.length - 1}
+                    aria-label={`Move stop ${index + 1} down`}
+                  >
+                    <ArrowDown size={16} />
+                  </Button>
                   <Button
                     type="button"
                     variant="ghost"
@@ -300,10 +336,28 @@ export default function RouteDetailsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
   const { optimizeRoute } = useRoutes();
+  const { message: notice, notify } = useNotice();
+  const [optimizeError, setOptimizeError] = useState<string | null>(null);
+  const [optimizing, setOptimizing] = useState(false);
 
   const goBack = () => navigate?.(joinPath(basePath, 'routes'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const handleOptimize = async () => {
+    if (!routeId) return;
+    setOptimizing(true);
+    setOptimizeError(null);
+    try {
+      await optimizeRoute(routeId);
+      notify('Route optimized — stops resequenced for the shortest run.');
+      refetch();
+    } catch (e) {
+      setOptimizeError(e instanceof Error ? e.message : 'Failed to optimize route.');
+    } finally {
+      setOptimizing(false);
+    }
+  };
+
   // Handle new route form
   if (!routeId) {
     return <NewRouteForm />;
@@ -312,14 +366,21 @@ export default function RouteDetailsPage() {
   if (isLoading) return <LoadingState message="Loading route details..." />;
   if (error || !route) return <ErrorState title="Route not found" onRetry={refetch} />;
 
-  const handleOptimize = async () => {
-    try {
-      await optimizeRoute(route.id);
-      refetch();
-    } catch (e) {
-      console.error(e);
-    }
-  };
+  // Parse coordinates off each waypoint's address; stops without a real coord are
+  // dropped from the map (but still listed below), so the plotted line is honest.
+  const mapStops: MapRouteStop[] = route.stops
+    .map((stop) => {
+      const coord = firstRealLatLng(stop.address);
+      return coord
+        ? {
+            lat: coord.lat,
+            lng: coord.lng,
+            sequence: stop.sequence,
+            label: formatAddress(stop.address) || `Order #${stop.orderId || stop.sequence}`,
+          }
+        : null;
+    })
+    .filter((stop): stop is MapRouteStop => stop !== null);
 
   return (
     <PageLayout
@@ -332,8 +393,8 @@ export default function RouteDetailsPage() {
             <ArrowLeft size={16} /> Back
           </Button>
           {!route.optimized && (
-            <Button variant="outline" onClick={handleOptimize}>
-              <Zap size={16} /> Optimize
+            <Button variant="outline" onClick={handleOptimize} disabled={optimizing}>
+              <Zap size={16} /> {optimizing ? 'Optimizing…' : 'Optimize'}
             </Button>
           )}
           <Button>
@@ -387,6 +448,17 @@ export default function RouteDetailsPage() {
         ]}
       />
 
+      {optimizeError && (
+        <div className="mb-2">
+          <FormError message={optimizeError} />
+        </div>
+      )}
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
           <Card>
@@ -394,12 +466,32 @@ export default function RouteDetailsPage() {
               <CardTitle>Route Map</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center">
-                <div className="text-center text-text-secondary">
-                  <MapPin size={48} className="mx-auto mb-2 opacity-50" />
-                  <p>Route map visualization</p>
+              {mapStops.length > 0 ? (
+                <RouteMap
+                  className="overflow-hidden rounded-lg border border-border-seam"
+                  height={360}
+                  stops={mapStops}
+                />
+              ) : (
+                <div className="rounded-lg border border-border-seam bg-bg-sunken/40 p-4">
+                  <p className="mb-3 text-sm text-text-secondary">
+                    These stops don&apos;t have map coordinates yet — showing the planned sequence
+                    instead.
+                  </p>
+                  <ol className="space-y-2">
+                    {route.stops.map((stop) => (
+                      <li key={stop.id} className="flex items-start gap-3">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-xs font-semibold text-primary">
+                          {stop.sequence}
+                        </span>
+                        <span className="text-sm">
+                          {formatAddress(stop.address) || `Order #${stop.orderId || stop.sequence}`}
+                        </span>
+                      </li>
+                    ))}
+                  </ol>
                 </div>
-              </div>
+              )}
             </CardContent>
           </Card>
 
@@ -475,6 +567,14 @@ export default function RouteDetailsPage() {
                 <span className="text-sm font-normal"> min</span>
               </p>
             </div>
+            {route.fuelCost !== undefined && (
+              <div>
+                <p className="text-sm text-text-secondary flex items-center gap-1">
+                  <Fuel size={14} /> Est. Fuel Cost
+                </p>
+                <p className="text-2xl font-bold">{formatCurrency(route.fuelCost)}</p>
+              </div>
+            )}
             {route.actualDuration && (
               <div>
                 <p className="text-sm text-text-secondary">Actual Duration</p>

package/src/movethewheels/pages/RoutesPage.tsx

@@ -2,13 +2,14 @@
  * Routes Page
  */
 
+import { useState } from 'react';
 import { Plus, RefreshCw, Navigation } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
 import { Badge, Button } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useRoutes } from '../hooks/useRoutes';
+import { useRoutes, useRouteStats } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -17,7 +18,14 @@ import type { Route } from '../types';
 
 export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { routes, totalRoutes, isLoading, refetch } = useRoutes();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { routes, hasMore, isLoading, refetch } = useRoutes({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — not the truncated page.
+  const { stats } = useRouteStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -72,7 +80,7 @@ export default function RoutesPage() {
   return (
     <PageLayout
       title="Routes"
-      subtitle={`${totalRoutes} routes`}
+      subtitle={`${stats.totalRoutes} routes`}
       icon={<Navigation size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -96,18 +104,18 @@ export default function RoutesPage() {
         <p className="text-sm font-medium text-text-secondary">Routes 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">{totalRoutes}</p>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.totalRoutes}</p>
             <p className="text-xs text-text-secondary">Total routes</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {routes.filter((r) => r.status === 'in_progress').length}
+              {stats.inProgressRoutes}
             </p>
             <p className="text-xs text-text-secondary">In progress</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {routes.filter((r) => r.optimized).length}
+              {stats.optimizedRoutes}
             </p>
             <p className="text-xs text-text-secondary">Optimized</p>
           </div>
@@ -123,6 +131,14 @@ export default function RoutesPage() {
         searchFields={['name'] as (keyof Route)[]}
         onRowClick={(row) => goTo(`routes/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-data"
         emptyTitle="No routes yet"
         emptyDescription="Create a route to batch deliveries into an optimized driving plan."

package/src/movethewheels/pages/SettingsPage.tsx

@@ -187,7 +187,7 @@ export default function SettingsPage() {
           {
             id: 'security',
             label: 'Secure your account',
-            description: 'Update your password and enable two-factor authentication.',
+            description: 'Enable two-factor authentication for an extra layer of security.',
             icon: <Shield size={16} />,
             onClick: () => setTab('security'),
           },
@@ -222,7 +222,7 @@ export default function SettingsPage() {
           <EmphasisPanel>
             <h2 className="text-base font-semibold text-text-primary">Company Information</h2>
             <p className="text-sm text-text-secondary mb-4">Basic company details</p>
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Company Name</Label>
                 <Input
@@ -270,7 +270,7 @@ export default function SettingsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 <div>
                   <Label>Timezone</Label>
                   <Select
@@ -352,26 +352,10 @@ export default function SettingsPage() {
             <CardHeader>
               <CardTitle>Password</CardTitle>
               <CardDescription>
-                Passwords are managed by your workspace identity provider.
+                Your password and sign-in credentials are managed centrally by your workspace
+                identity provider — update them from your account security settings, not here.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label>Current Password</Label>
-                <Input type="password" autoComplete="current-password" />
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <Label>New Password</Label>
-                  <Input type="password" autoComplete="new-password" />
-                </div>
-                <div>
-                  <Label>Confirm Password</Label>
-                  <Input type="password" autoComplete="new-password" />
-                </div>
-              </div>
-              <Button variant="outline">Update Password</Button>
-            </CardContent>
           </Card>
           <Card>
             <CardHeader>

package/src/movethewheels/pages/TrackingPage.tsx

@@ -4,13 +4,15 @@
  * Track orders by tracking number or order ID.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { MapPin, Search, Package, Truck, Clock, CheckCircle, AlertCircle } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { Card, CardContent, CardHeader, CardTitle, Button, Input } from '../components/ui';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { TrackingMap, type TrackEndpoint, type TrackPoint } from '../components/maps';
+import { firstRealLatLng } from '../utils/mapMarkers';
 import { useOrderTracking } from '../hooks/useTracking';
 import { formatDate, formatAddress } from '../utils/formatters';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -42,6 +44,42 @@ export default function TrackingPage() {
     }
   };
 
+  // Real geographic view of the shipment: pickup → delivery endpoints, a
+  // breadcrumb trail from timeline events that carry coordinates, and the live
+  // current position. Everything is coordinate-filtered so a shipment with no
+  // GPS data honestly shows the map's empty state instead of a fake route.
+  const mapModel = useMemo(() => {
+    if (!order) return null;
+    const originCoord = firstRealLatLng(order.pickupAddress);
+    const destCoord = firstRealLatLng(order.deliveryAddress);
+    const origin: TrackEndpoint | null = originCoord
+      ? { ...originCoord, label: `Pickup · ${order.pickupAddress.city || 'Origin'}` }
+      : null;
+    const destination: TrackEndpoint | null = destCoord
+      ? { ...destCoord, label: `Delivery · ${order.deliveryAddress.city || 'Destination'}` }
+      : null;
+
+    const trail: TrackPoint[] = order.timeline
+      .map((event): TrackPoint | null => {
+        const coord = event.location ? firstRealLatLng(event.location) : null;
+        return coord
+          ? { lat: coord.lat, lng: coord.lng, timestamp: new Date(event.timestamp).toISOString() }
+          : null;
+      })
+      .filter((point): point is TrackPoint => point !== null);
+
+    const currentCoord = tracking ? firstRealLatLng(tracking.currentLocation) : null;
+    const current: TrackEndpoint | null = currentCoord
+      ? {
+          ...currentCoord,
+          label: tracking?.currentLocation.address || 'Current position',
+        }
+      : null;
+
+    const hasAny = Boolean(origin || destination || current || trail.length > 0);
+    return { origin, destination, trail, current, hasAny };
+  }, [order, tracking]);
+
   return (
     <PageLayout
       title={t('movethewheels.tracking.title', 'Track Shipment')}
@@ -173,6 +211,30 @@ export default function TrackingPage() {
               </div>
             </EmphasisPanel>
 
+            {/* Route Map — real origin/destination + tracking trail + live position */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} />
+                  {t('movethewheels.tracking.routeMap.title', 'Route map')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <TrackingMap
+                  className="overflow-hidden rounded-lg border border-border-seam"
+                  height={320}
+                  origin={mapModel?.origin ?? null}
+                  destination={mapModel?.destination ?? null}
+                  trail={mapModel?.trail ?? []}
+                  current={mapModel?.current ?? null}
+                  emptyMessage={t(
+                    'movethewheels.tracking.routeMap.empty',
+                    'No location coordinates recorded for this shipment yet'
+                  )}
+                />
+              </CardContent>
+            </Card>
+
             {/* Progress Timeline */}
             <Card>
               <CardHeader>
@@ -351,14 +413,22 @@ export default function TrackingPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center mb-4">
-                  <div className="text-center text-text-secondary">
-                    <MapPin size={32} className="mx-auto mb-2" />
+                {mapModel?.current ? (
+                  <TrackingMap
+                    className="mb-4 overflow-hidden rounded-lg border border-border-seam"
+                    height={180}
+                    current={mapModel.current}
+                    destination={mapModel.destination ?? null}
+                    trail={mapModel.trail}
+                  />
+                ) : (
+                  <div className="mb-4 rounded-lg bg-bg-sunken p-4 text-center text-text-secondary">
+                    <MapPin size={28} className="mx-auto mb-2 opacity-60" />
                     <p className="text-sm">
-                      {t('movethewheels.tracking.location.mapView', 'Map View')}
+                      {t('movethewheels.tracking.location.noFix', 'No live position fix yet')}
                     </p>
                   </div>
-                </div>
+                )}
                 <p className="text-sm">
                   {tracking.currentLocation.address ||
                     t('movethewheels.tracking.location.updating', 'Location updating...')}