@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -210,7 +210,7 @@ export default function OrderDetailsPage() {
                     </p>
                   )}
                   {order.actualPickup && (
-                    <p className="text-sm text-green-600 mt-1">
+                    <p className="text-sm text-status-success-text mt-1">
                       <CheckCircle size={14} className="inline mr-1" />
                       Picked up: {formatDate(order.actualPickup, 'full')}
                     </p>
@@ -227,7 +227,7 @@ export default function OrderDetailsPage() {
                     </p>
                   )}
                   {order.actualDelivery && (
-                    <p className="text-sm text-green-600 mt-1">
+                    <p className="text-sm text-status-success-text mt-1">
                       <CheckCircle size={14} className="inline mr-1" />
                       Delivered: {formatDate(order.actualDelivery, 'full')}
                     </p>

package/src/movethewheels/pages/ReportsPage.tsx

@@ -1,8 +1,13 @@
 /**
  * Reports Page
+ *
+ * Lists reports from the backend (movethewheelsReports) and lets operators
+ * create, schedule and generate them via the real mutations. Pre-launch
+ * workspaces start empty — no fabricated report history is shown.
  */
 
-import { FileBarChart, Download, Calendar, Filter, Clock } from 'lucide-react';
+import { useState } from 'react';
+import { FileBarChart, Download, Calendar, Filter, Clock, Plus } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import {
   Card,
@@ -16,53 +21,77 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Skeleton,
 } from '../components/ui';
-import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useReports, type CreateReportInput } from '../hooks/useReports';
+import { formatDate } from '../utils/formatters';
+
+const REPORT_TYPES: { value: string; label: string }[] = [
+  { value: 'operations', label: 'Operations Summary' },
+  { value: 'finance', label: 'Financial Report' },
+  { value: 'fleet', label: 'Fleet Utilization' },
+  { value: 'customers', label: 'Customer Analytics' },
+  { value: 'inventory', label: 'Inventory Status' },
+];
+
+interface Feedback {
+  tone: 'success' | 'error';
+  text: string;
+}
 
 export default function ReportsPage() {
-  const reports = [
-    {
-      name: 'Daily Operations Summary',
-      description: 'Overview of daily deliveries and performance',
-      frequency: 'Daily',
-      lastGenerated: '2024-01-15',
-    },
-    {
-      name: 'Weekly Performance Report',
-      description: 'KPIs and metrics for the week',
-      frequency: 'Weekly',
-      lastGenerated: '2024-01-14',
-    },
-    {
-      name: 'Monthly Financial Report',
-      description: 'Revenue, expenses, and profit analysis',
-      frequency: 'Monthly',
-      lastGenerated: '2024-01-01',
-    },
-    {
-      name: 'Fleet Utilization Report',
-      description: 'Vehicle and driver utilization metrics',
-      frequency: 'Weekly',
-      lastGenerated: '2024-01-14',
-    },
-    {
-      name: 'Customer Analytics Report',
-      description: 'Customer satisfaction and retention',
-      frequency: 'Monthly',
-      lastGenerated: '2024-01-01',
-    },
-    {
-      name: 'Inventory Status Report',
-      description: 'Stock levels and movement analysis',
-      frequency: 'Daily',
-      lastGenerated: '2024-01-15',
-    },
-  ];
+  const { reports, isLoading, error, refetch, createReport, generateReport } = useReports();
+  const [reportType, setReportType] = useState('operations');
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [feedback, setFeedback] = useState<Feedback | null>(null);
+
+  const typeLabel = (value: string) =>
+    REPORT_TYPES.find((item) => item.value === value)?.label ?? value;
+
+  const handleCreate = async (schedule?: string) => {
+    setCreating(true);
+    setFeedback(null);
+    const input: CreateReportInput = {
+      name: `${typeLabel(reportType)}${schedule ? ' (Scheduled)' : ''}`,
+      type: reportType,
+      description: `${typeLabel(reportType)} generated from live operational data`,
+      ...(schedule ? { schedule } : {}),
+    };
+    try {
+      await createReport(input);
+      setFeedback({
+        tone: 'success',
+        text: schedule ? 'Scheduled report created.' : 'Report created.',
+      });
+    } catch (createError) {
+      setFeedback({
+        tone: 'error',
+        text: createError instanceof Error ? createError.message : 'Could not create report.',
+      });
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleGenerate = async (id: string) => {
+    setBusyId(id);
+    setFeedback(null);
+    try {
+      await generateReport(id);
+      setFeedback({ tone: 'success', text: 'Report generated.' });
+    } catch (genError) {
+      setFeedback({
+        tone: 'error',
+        text: genError instanceof Error ? genError.message : 'Could not generate report.',
+      });
+    } finally {
+      setBusyId(null);
+    }
+  };
 
-  const scheduledReports = [
-    { name: 'Daily Summary', nextRun: 'Tomorrow 6:00 AM', recipients: 3 },
-    { name: 'Weekly Review', nextRun: 'Monday 9:00 AM', recipients: 5 },
-  ];
+  const scheduledReports = reports.filter((report) => report.schedule);
 
   return (
     <PageLayout
@@ -71,19 +100,20 @@ export default function ReportsPage() {
       icon={<FileBarChart size={24} />}
       headerActions={
         <div className="flex gap-2">
-          <Select defaultValue="30d">
-            <SelectTrigger className="w-[150px]">
+          <Select value={reportType} onValueChange={setReportType}>
+            <SelectTrigger className="w-[190px]">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="7d">Last 7 days</SelectItem>
-              <SelectItem value="30d">Last 30 days</SelectItem>
-              <SelectItem value="90d">Last 90 days</SelectItem>
-              <SelectItem value="custom">Custom</SelectItem>
+              {REPORT_TYPES.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
-          <Button>
-            <FileBarChart size={16} /> Create Report
+          <Button onClick={() => void handleCreate()} disabled={creating}>
+            <Plus size={16} /> Create Report
           </Button>
         </div>
       }
@@ -94,37 +124,94 @@ export default function ReportsPage() {
         so stakeholders always have the latest numbers without logging in.
       </PagePurpose>
 
+      {feedback && (
+        <div
+          role="status"
+          className={`rounded-lg p-3 text-sm ${
+            feedback.tone === 'success'
+              ? 'bg-status-success-bg-subtle text-status-success-text'
+              : 'bg-status-error-bg-subtle text-status-error-text'
+          }`}
+        >
+          {feedback.text}
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-4">
           <h3 className="font-semibold">Available Reports</h3>
-          {reports.map((report) => (
-            <Card key={report.name}>
-              <CardContent className="p-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
-                      <FileBarChart size={20} className="text-primary" />
-                    </div>
-                    <div>
-                      <p className="font-medium">{report.name}</p>
-                      <p className="text-sm text-text-secondary">{report.description}</p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <div className="text-right">
-                      <Badge variant="outline">{report.frequency}</Badge>
-                      <p className="text-xs text-text-secondary mt-1">
-                        Last: {report.lastGenerated}
-                      </p>
-                    </div>
-                    <Button variant="outline" size="sm">
-                      <Download size={14} />
+
+          {isLoading ? (
+            <div className="space-y-3">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <Skeleton key={i} className="h-20 w-full rounded-lg" />
+              ))}
+            </div>
+          ) : error ? (
+            <Card className="border-status-error-border">
+              <CardContent className="p-6 text-center space-y-3">
+                <p className="text-status-error-text font-medium">Couldn&apos;t load reports</p>
+                <p className="text-sm text-text-secondary">{error.message}</p>
+                <Button variant="outline" onClick={refetch}>
+                  Retry
+                </Button>
+              </CardContent>
+            </Card>
+          ) : reports.length === 0 ? (
+            <Card>
+              <CardContent className="p-0">
+                <IllustratedEmptyState
+                  illustration="empty-data"
+                  title="No reports yet"
+                  description="Create your first report to turn live operational data into a shareable summary."
+                  action={
+                    <Button onClick={() => void handleCreate()} disabled={creating}>
+                      <Plus size={16} className="mr-1.5" /> Create Report
                     </Button>
-                  </div>
-                </div>
+                  }
+                />
               </CardContent>
             </Card>
-          ))}
+          ) : (
+            reports.map((report) => (
+              <Card key={report.id}>
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
+                        <FileBarChart size={20} className="text-primary" />
+                      </div>
+                      <div>
+                        <p className="font-medium">{report.name}</p>
+                        <p className="text-sm text-text-secondary">
+                          {report.description ?? typeLabel(report.type)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="text-right">
+                        <Badge variant="outline">{report.schedule ?? 'On demand'}</Badge>
+                        {report.lastGenerated && (
+                          <p className="text-xs text-text-secondary mt-1">
+                            Last: {formatDate(new Date(report.lastGenerated), 'short')}
+                          </p>
+                        )}
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        aria-label={`Generate ${report.name}`}
+                        disabled={busyId === report.id}
+                        onClick={() => void handleGenerate(report.id)}
+                      >
+                        <Download size={14} />
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))
+          )}
         </div>
 
         <div className="space-y-6">
@@ -133,14 +220,24 @@ export default function ReportsPage() {
             <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">
               <Clock size={18} /> Scheduled Reports
             </h2>
-            {scheduledReports.map((report) => (
-              <div key={report.name} className="p-3 border border-border-seam rounded-lg">
-                <p className="font-medium">{report.name}</p>
-                <p className="text-sm text-text-secondary">Next: {report.nextRun}</p>
-                <p className="text-xs text-text-secondary">{report.recipients} recipients</p>
-              </div>
-            ))}
-            <Button variant="outline" className="w-full">
+            {scheduledReports.length === 0 ? (
+              <p className="text-sm text-text-secondary">
+                No scheduled reports yet. Schedule one to have it generated automatically.
+              </p>
+            ) : (
+              scheduledReports.map((report) => (
+                <div key={report.id} className="p-3 border border-border-seam rounded-lg">
+                  <p className="font-medium">{report.name}</p>
+                  <p className="text-sm text-text-secondary">Schedule: {report.schedule}</p>
+                </div>
+              ))
+            )}
+            <Button
+              variant="outline"
+              className="w-full"
+              disabled={creating}
+              onClick={() => void handleCreate('daily')}
+            >
               Schedule New Report
             </Button>
           </EmphasisPanel>
@@ -150,15 +247,22 @@ export default function ReportsPage() {
               <CardTitle>Quick Actions</CardTitle>
             </CardHeader>
             <CardContent className="space-y-2">
-              <Button variant="outline" className="w-full justify-start">
+              <Button
+                variant="outline"
+                className="w-full justify-start"
+                disabled={creating}
+                onClick={() => void handleCreate('weekly')}
+              >
                 <Calendar size={16} /> Schedule Report
               </Button>
-              <Button variant="outline" className="w-full justify-start">
+              <Button
+                variant="outline"
+                className="w-full justify-start"
+                disabled={creating}
+                onClick={() => void handleCreate()}
+              >
                 <Filter size={16} /> Custom Report
               </Button>
-              <Button variant="outline" className="w-full justify-start">
-                <Download size={16} /> Export All
-              </Button>
             </CardContent>
           </Card>
         </div>

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -12,6 +12,7 @@ import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { ROUTE_STATUS_COLORS } from '../constants';
 
 export default function RouteDetailsPage() {
   const { routeId } = useParams<{ routeId: string }>();
@@ -60,13 +61,6 @@ export default function RouteDetailsPage() {
     }
   };
 
-  const statusColors = {
-    planned: { bg: 'bg-blue-100', text: 'text-blue-700' },
-    in_progress: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
-    completed: { bg: 'bg-green-100', text: 'text-green-700' },
-    cancelled: { bg: 'bg-red-100', text: 'text-red-700' },
-  };
-
   return (
     <PageLayout
       title={route.name}
@@ -89,7 +83,7 @@ export default function RouteDetailsPage() {
       }
       headerContent={
         <div className="flex gap-2">
-          <StatusBadge status={route.status} customColors={statusColors[route.status]} />
+          <StatusBadge status={route.status} customColors={ROUTE_STATUS_COLORS[route.status]} />
           <Badge variant={route.optimized ? 'default' : 'secondary'}>
             {route.optimized ? 'Optimized' : 'Not Optimized'}
           </Badge>
@@ -159,7 +153,7 @@ export default function RouteDetailsPage() {
                   <div key={stop.id} className="flex gap-4">
                     <div className="relative">
                       <div
-                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-bg-sunken'}`}
+                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-status-success-text text-text-inverse' : 'bg-bg-sunken'}`}
                       >
                         {stop.status === 'completed' ? <CheckCircle size={16} /> : stop.sequence}
                       </div>
@@ -188,7 +182,7 @@ export default function RouteDetailsPage() {
                             Scheduled: {formatDate(stop.scheduledTime, 'time')}
                           </p>
                           {stop.actualTime && (
-                            <p className="text-sm text-green-600">
+                            <p className="text-sm text-status-success-text">
                               Actual: {formatDate(stop.actualTime, 'time')}
                             </p>
                           )}
@@ -267,7 +261,7 @@ export default function RouteDetailsPage() {
                 {route.trafficConditions.map((tc, i) => (
                   <div
                     key={i}
-                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-red-50' : tc.condition === 'heavy' ? 'bg-orange-50' : 'bg-yellow-50'}`}
+                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-status-error-bg-subtle' : tc.condition === 'heavy' ? 'bg-status-warning-bg-subtle' : 'bg-status-warning-bg-subtle'}`}
                   >
                     <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
                     <p className="text-xs text-text-secondary">

package/src/movethewheels/pages/RoutesPage.tsx

@@ -12,6 +12,7 @@ import { useRoutes } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { ROUTE_STATUS_COLORS } from '../constants';
 import type { Route } from '../types';
 
 export default function RoutesPage() {
@@ -33,15 +34,9 @@ export default function RoutesPage() {
       header: 'Status',
       accessorKey: 'status',
       sortable: true,
-      cell: (row) => {
-        const colors = {
-          planned: { bg: 'bg-blue-100', text: 'text-blue-700' },
-          in_progress: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
-          completed: { bg: 'bg-green-100', text: 'text-green-700' },
-          cancelled: { bg: 'bg-red-100', text: 'text-red-700' },
-        };
-        return <StatusBadge status={row.status} customColors={colors[row.status]} />;
-      },
+      cell: (row) => (
+        <StatusBadge status={row.status} customColors={ROUTE_STATUS_COLORS[row.status]} />
+      ),
     },
     {
       id: 'stops',