@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

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/ProductDetailsPage.tsx

@@ -2,15 +2,157 @@
  * Product Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Package, ArrowLeft, Edit, Box, DollarSign, Tag } from 'lucide-react';
+import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
-import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Input,
+  Label,
+} from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProduct } from '../hooks/useInventory';
+import { useProduct, useInventory } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewProductForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createProduct } = useInventory();
+  const [form, setForm] = useState({
+    name: '',
+    sku: '',
+    category: '',
+    brand: '',
+    weight: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name.trim() || !form.sku.trim()) {
+      setError('Product name and SKU are required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const weight = form.weight.trim() ? Number(form.weight) : undefined;
+      const created = await createProduct({
+        name: form.name.trim(),
+        sku: form.sku.trim(),
+        category: form.category.trim() || undefined,
+        brand: form.brand.trim() || undefined,
+        weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
+      });
+      navigate?.(joinPath(basePath, `inventory/products/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create product:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create product. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Product"
+      subtitle="Add an item to your catalog"
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {submitting ? 'Saving...' : 'Add Product'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Package size={18} />}>
+        Add a product so it can be added to orders and stocked in warehouses. A name and SKU are all
+        it takes to start — category, brand and weight help with picking, pricing and routing.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Product Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  value={form.name}
+                  onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                  placeholder="Wireless Headphones"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="sku">
+                  SKU <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="sku"
+                  value={form.sku}
+                  onChange={(e) => setForm((prev) => ({ ...prev, sku: e.target.value }))}
+                  placeholder="SKU-001"
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Input
+                  id="category"
+                  value={form.category}
+                  onChange={(e) => setForm((prev) => ({ ...prev, category: e.target.value }))}
+                  placeholder="Electronics"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="brand">Brand</Label>
+                <Input
+                  id="brand"
+                  value={form.brand}
+                  onChange={(e) => setForm((prev) => ({ ...prev, brand: e.target.value }))}
+                  placeholder="Acme"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="weight">Weight (kg)</Label>
+                <Input
+                  id="weight"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={form.weight}
+                  onChange={(e) => setForm((prev) => ({ ...prev, weight: e.target.value }))}
+                  placeholder="0.5"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function ProductDetailsPage() {
   const { productId } = useParams<{ productId: string }>();
@@ -20,6 +162,7 @@ export default function ProductDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!productId) return <NewProductForm />;
   if (isLoading) return <LoadingState message="Loading product details..." />;
   if (error || !product) return <ErrorState title="Product not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/ProductsPage.tsx

@@ -98,7 +98,11 @@ export default function ProductsPage() {
       icon={<Package size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Product', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Product',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('inventory/products/new'),
+          }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
             { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },

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>