@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -0,0 +1,155 @@
+/**
+ * Product Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import { Package, ArrowLeft, Edit, Box, DollarSign, Tag } from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { useProduct } from '../hooks/useInventory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatCurrency } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function ProductDetailsPage() {
+  const { productId } = useParams<{ productId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { product, isLoading, error, refetch } = useProduct(productId);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
+
+  if (isLoading) return <LoadingState message="Loading product details..." />;
+  if (error || !product) return <ErrorState title="Product not found" onRetry={refetch} />;
+
+  return (
+    <PageLayout
+      title={product.name}
+      subtitle={`SKU: ${product.sku}`}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+          <Button>
+            <Edit size={16} /> Edit
+          </Button>
+        </div>
+      }
+      headerContent={
+        <div className="flex gap-2">
+          <Badge variant="outline">{product.category}</Badge>
+          {product.brand && <Badge variant="secondary">{product.brand}</Badge>}
+          {product.fragile && <Badge variant="destructive">Fragile</Badge>}
+          {product.hazardous && <Badge variant="destructive">Hazardous</Badge>}
+          {product.temperatureControlled && <Badge variant="secondary">Temp Controlled</Badge>}
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Description</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p>{product.description}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Box size={18} /> Dimensions & Weight
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">Length</p>
+                  <p className="text-2xl font-bold">
+                    {product.dimensions.length}
+                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Width</p>
+                  <p className="text-2xl font-bold">
+                    {product.dimensions.width}
+                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Height</p>
+                  <p className="text-2xl font-bold">
+                    {product.dimensions.height}
+                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Weight</p>
+                  <p className="text-2xl font-bold">
+                    {product.weight}
+                    <span className="text-sm font-normal"> kg</span>
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {product.attributes.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Tag size={18} /> Attributes
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                  {product.attributes.map((attr, i) => (
+                    <div key={i}>
+                      <p className="text-sm text-muted-foreground">{attr.name}</p>
+                      <p className="font-medium">{attr.value}</p>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <DollarSign size={18} /> Pricing
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
+              <p className="text-sm text-muted-foreground">Unit price</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Identifiers</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground">SKU</p>
+                <p className="font-mono">{product.sku}</p>
+              </div>
+              {product.barcode && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Barcode</p>
+                  <p className="font-mono">{product.barcode}</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -0,0 +1,124 @@
+/**
+ * Products Page - List of all products
+ */
+
+import { Package, Plus, RefreshCw, Download } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { DataTable, type Column } from '../components/DataTable';
+import { Button, Badge } from '../components/ui';
+import { useProducts } from '../hooks/useInventory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatCurrency } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+import type { Product } from '../types';
+
+export default function ProductsPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { products, totalProducts, isLoading, refetch } = useProducts();
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+
+  const columns: Column<Product>[] = [
+    {
+      id: 'sku',
+      header: 'SKU',
+      accessorKey: 'sku',
+      sortable: true,
+      cell: (row) => <span className="font-mono">{row.sku}</span>,
+    },
+    {
+      id: 'name',
+      header: 'Product Name',
+      accessorKey: 'name',
+      sortable: true,
+      cell: (row) => (
+        <div>
+          <p className="font-medium">{row.name}</p>
+          <p className="text-sm text-muted-foreground line-clamp-1">{row.description}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'category',
+      header: 'Category',
+      accessorKey: 'category',
+      sortable: true,
+      cell: (row) => <Badge variant="outline">{row.category}</Badge>,
+    },
+    {
+      id: 'dimensions',
+      header: 'Dimensions',
+      cell: (row) =>
+        `${row.dimensions.length}x${row.dimensions.width}x${row.dimensions.height} ${row.dimensions.unit}`,
+    },
+    {
+      id: 'weight',
+      header: 'Weight',
+      accessorKey: 'weight',
+      sortable: true,
+      cell: (row) => `${row.weight} kg`,
+    },
+    {
+      id: 'value',
+      header: 'Value',
+      accessorKey: 'value',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{formatCurrency(row.value)}</span>,
+    },
+    {
+      id: 'flags',
+      header: 'Flags',
+      cell: (row) => (
+        <div className="flex gap-1">
+          {row.fragile && (
+            <Badge variant="destructive" className="text-xs">
+              Fragile
+            </Badge>
+          )}
+          {row.hazardous && (
+            <Badge variant="destructive" className="text-xs">
+              Hazardous
+            </Badge>
+          )}
+          {row.temperatureControlled && (
+            <Badge variant="secondary" className="text-xs">
+              Temp Control
+            </Badge>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Products"
+      subtitle={`${totalProducts} products`}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={refetch}>
+            <RefreshCw size={16} /> Refresh
+          </Button>
+          <Button variant="outline">
+            <Download size={16} /> Export
+          </Button>
+          <Button>
+            <Plus size={16} /> Add Product
+          </Button>
+        </div>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={products}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search products..."
+        searchFields={['name', 'sku', 'category'] as (keyof Product)[]}
+        onRowClick={(row) => goTo(`inventory/products/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/ReportsPage.tsx

@@ -0,0 +1,164 @@
+/**
+ * Reports Page
+ */
+
+import { FileBarChart, Download, Calendar, Filter, Clock } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
+
+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 scheduledReports = [
+    { name: 'Daily Summary', nextRun: 'Tomorrow 6:00 AM', recipients: 3 },
+    { name: 'Weekly Review', nextRun: 'Monday 9:00 AM', recipients: 5 },
+  ];
+
+  return (
+    <PageLayout
+      title="Reports"
+      subtitle="Generate and schedule reports"
+      icon={<FileBarChart size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Select defaultValue="30d">
+            <SelectTrigger className="w-[150px]">
+              <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>
+            </SelectContent>
+          </Select>
+          <Button>
+            <FileBarChart size={16} /> Create Report
+          </Button>
+        </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-primary/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-muted-foreground">{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-muted-foreground mt-1">
+                        Last: {report.lastGenerated}
+                      </p>
+                    </div>
+                    <Button variant="outline" size="sm">
+                      <Download size={14} />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock size={18} /> Scheduled Reports
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {scheduledReports.map((report) => (
+                <div key={report.name} className="p-3 border rounded-lg">
+                  <p className="font-medium">{report.name}</p>
+                  <p className="text-sm text-muted-foreground">Next: {report.nextRun}</p>
+                  <p className="text-xs text-muted-foreground">{report.recipients} recipients</p>
+                </div>
+              ))}
+              <Button variant="outline" className="w-full">
+                Schedule New Report
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Quick Actions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Button variant="outline" className="w-full justify-start">
+                <Calendar size={16} /> Schedule Report
+              </Button>
+              <Button variant="outline" className="w-full justify-start">
+                <Filter size={16} /> Custom Report
+              </Button>
+              <Button variant="outline" className="w-full justify-start">
+                <Download size={16} /> Export All
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -0,0 +1,245 @@
+/**
+ * Route Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import { Navigation, ArrowLeft, Edit, MapPin, Clock, Zap, CheckCircle } from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import { StatusBadge } from '../components/StatusBadge';
+import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { useRoute, useRoutes } from '../hooks/useRoutes';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate, formatAddress } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function RouteDetailsPage() {
+  const { routeId } = useParams<{ routeId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { route, isLoading, error, refetch } = useRoute(routeId);
+  const { optimizeRoute } = useRoutes();
+
+  const goBack = () => navigate?.(joinPath(basePath, 'routes'));
+
+  // Handle new route form
+  if (!routeId) {
+    return (
+      <PageLayout
+        title="Create Route"
+        subtitle="Plan a new delivery route"
+        icon={<Navigation size={24} />}
+        headerActions={
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+        }
+      >
+        <Card>
+          <CardContent className="p-8 text-center">
+            <p className="text-muted-foreground">Route creation form would go here</p>
+          </CardContent>
+        </Card>
+      </PageLayout>
+    );
+  }
+
+  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);
+    }
+  };
+
+  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}
+      subtitle={`${route.stops.length} stops - ${route.distance.toFixed(1)} km`}
+      icon={<Navigation size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+          {!route.optimized && (
+            <Button variant="outline" onClick={handleOptimize}>
+              <Zap size={16} /> Optimize
+            </Button>
+          )}
+          <Button>
+            <Edit size={16} /> Edit
+          </Button>
+        </div>
+      }
+      headerContent={
+        <div className="flex gap-2">
+          <StatusBadge status={route.status} customColors={statusColors[route.status]} />
+          <Badge variant={route.optimized ? 'default' : 'secondary'}>
+            {route.optimized ? 'Optimized' : 'Not Optimized'}
+          </Badge>
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Route Map</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
+                <div className="text-center text-muted-foreground">
+                  <MapPin size={48} className="mx-auto mb-2 opacity-50" />
+                  <p>Route map visualization</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Stops ({route.stops.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {route.stops.map((stop, index) => (
+                  <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-muted'}`}
+                      >
+                        {stop.status === 'completed' ? <CheckCircle size={16} /> : stop.sequence}
+                      </div>
+                      {index < route.stops.length - 1 && (
+                        <div className="absolute top-8 left-4 w-px h-12 bg-border" />
+                      )}
+                    </div>
+                    <div className="flex-1 pb-4">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant={stop.type === 'pickup' ? 'secondary' : 'default'}
+                              className="capitalize"
+                            >
+                              {stop.type}
+                            </Badge>
+                            <span className="font-medium">Order #{stop.orderId}</span>
+                          </div>
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {formatAddress(stop.address)}
+                          </p>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-sm">
+                            Scheduled: {formatDate(stop.scheduledTime, 'time')}
+                          </p>
+                          {stop.actualTime && (
+                            <p className="text-sm text-green-600">
+                              Actual: {formatDate(stop.actualTime, 'time')}
+                            </p>
+                          )}
+                          <p className="text-xs text-muted-foreground">{stop.duration} min stop</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Route Info</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Total Distance</p>
+                <p className="text-2xl font-bold">
+                  {route.distance.toFixed(1)}
+                  <span className="text-sm font-normal"> km</span>
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Est. Duration</p>
+                <p className="text-2xl font-bold">
+                  {route.estimatedDuration}
+                  <span className="text-sm font-normal"> min</span>
+                </p>
+              </div>
+              {route.actualDuration && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Actual Duration</p>
+                  <p className="text-2xl font-bold">
+                    {route.actualDuration}
+                    <span className="text-sm font-normal"> min</span>
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock size={18} /> Timeline
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {route.startTime && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Started</p>
+                  <p>{formatDate(route.startTime, 'full')}</p>
+                </div>
+              )}
+              {route.endTime && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Completed</p>
+                  <p>{formatDate(route.endTime, 'full')}</p>
+                </div>
+              )}
+              <div>
+                <p className="text-sm text-muted-foreground">Created</p>
+                <p>{formatDate(route.createdAt, 'full')}</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {route.trafficConditions.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Traffic Conditions</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {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'}`}
+                  >
+                    <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
+                    <p className="text-xs text-muted-foreground">
+                      {tc.location} - +{tc.delay} min delay
+                    </p>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}