@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -0,0 +1,124 @@
+/**
+ * Vehicles Page - List of all vehicles
+ */
+
+import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { DataTable, type Column } from '../components/DataTable';
+import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
+import { Button, Progress } from '../components/ui';
+import { useVehicles } from '../hooks/useFleet';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { joinPath } from '../utils/navigation';
+import type { Vehicle } from '../types';
+
+export default function VehiclesPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { vehicles, totalVehicles, isLoading, refetch } = useVehicles();
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  const columns: Column<Vehicle>[] = [
+    {
+      id: 'vehicleNumber',
+      header: 'Vehicle #',
+      accessorKey: 'vehicleNumber',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.vehicleNumber}</span>,
+    },
+    {
+      id: 'type',
+      header: 'Type',
+      accessorKey: 'type',
+      cell: (row) => <VehicleTypeBadge type={row.type} />,
+    },
+    {
+      id: 'details',
+      header: 'Vehicle',
+      cell: (row) => (
+        <div>
+          <p className="font-medium">
+            {row.make} {row.model}
+          </p>
+          <p className="text-sm text-muted-foreground">{row.year}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      sortable: true,
+      cell: (row) => <StatusBadge status={row.status} type="vehicle" />,
+    },
+    {
+      id: 'capacity',
+      header: 'Capacity',
+      cell: (row) => (
+        <div className="text-sm">
+          <p>{row.capacity.weight} kg</p>
+          <p className="text-muted-foreground">{row.capacity.volume} m³</p>
+        </div>
+      ),
+    },
+    {
+      id: 'fuel',
+      header: 'Fuel Level',
+      cell: (row) =>
+        row.fuelLevel !== undefined ? (
+          <div className="flex items-center gap-2">
+            <Progress value={row.fuelLevel} className="w-16 h-2" />
+            <span className="text-sm">{row.fuelLevel}%</span>
+          </div>
+        ) : (
+          '-'
+        ),
+    },
+    {
+      id: 'mileage',
+      header: 'Mileage',
+      accessorKey: 'mileage',
+      sortable: true,
+      cell: (row) => (row.mileage ? `${row.mileage.toLocaleString()} mi` : '-'),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Vehicles"
+      subtitle={`${totalVehicles} vehicles in fleet`}
+      icon={<Truck 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 Vehicle
+          </Button>
+        </div>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={vehicles}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search vehicles..."
+        searchFields={['vehicleNumber', 'make', 'model'] as (keyof Vehicle)[]}
+        onRowClick={(row) => goTo(`fleet/vehicles/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -0,0 +1,216 @@
+/**
+ * Warehouse Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box } from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
+import { useWarehouse } from '../hooks/useInventory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatAddress } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function WarehouseDetailsPage() {
+  const { warehouseId } = useParams<{ warehouseId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { warehouse, isLoading, error, refetch } = useWarehouse(warehouseId);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
+
+  if (isLoading) return <LoadingState message="Loading warehouse details..." />;
+  if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
+
+  const utilization = (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) * 100;
+
+  return (
+    <PageLayout
+      title={warehouse.name}
+      subtitle={`Code: ${warehouse.code}`}
+      icon={<Warehouse 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={warehouse.isActive ? 'default' : 'secondary'}>
+            {warehouse.isActive ? 'Active' : 'Inactive'}
+          </Badge>
+          <Badge variant="outline" className="capitalize">
+            {warehouse.type.replace('_', ' ')}
+          </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 className="flex items-center gap-2">
+                <Box size={18} /> Capacity
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between text-sm mb-2">
+                    <span>Space Utilization</span>
+                    <span>{utilization.toFixed(0)}%</span>
+                  </div>
+                  <Progress value={utilization} />
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {warehouse.capacity.usedSpace.toLocaleString()} /{' '}
+                    {warehouse.capacity.totalSpace.toLocaleString()} sq ft
+                  </p>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-muted-foreground">Pallets Used</p>
+                    <p className="text-2xl font-bold">
+                      {warehouse.capacity.usedPallets}
+                      <span className="text-sm font-normal text-muted-foreground">
+                        {' '}
+                        / {warehouse.capacity.totalPallets}
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Zones ({warehouse.zones.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {warehouse.zones.map((zone) => (
+                  <div
+                    key={zone.id}
+                    className="flex items-center justify-between p-3 border rounded-lg"
+                  >
+                    <div>
+                      <p className="font-medium">{zone.name}</p>
+                      <p className="text-sm text-muted-foreground capitalize">
+                        {zone.type} - {zone.location}
+                      </p>
+                    </div>
+                    <div className="text-right">
+                      <Progress
+                        value={(zone.currentOccupancy / zone.capacity) * 100}
+                        className="w-24 h-2"
+                      />
+                      <p className="text-sm text-muted-foreground">
+                        {zone.currentOccupancy} / {zone.capacity}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock size={18} /> Operating Hours
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {Object.entries(warehouse.operatingHours).map(([day, hours]) => (
+                  <div key={day}>
+                    <p className="text-sm font-medium">{day}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {hours ? `${hours.open} - ${hours.close}` : 'Closed'}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MapPin size={18} /> Location
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm">{formatAddress(warehouse.address)}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Metrics</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground">Throughput</p>
+                <p className="text-2xl font-bold">
+                  {warehouse.metrics.throughput}
+                  <span className="text-sm font-normal"> orders/day</span>
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Accuracy</p>
+                <p className="text-2xl font-bold">{warehouse.metrics.accuracy}%</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Productivity</p>
+                <p className="text-2xl font-bold">{warehouse.metrics.productivity}%</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Orders Fulfilled</p>
+                <p className="text-2xl font-bold">
+                  {warehouse.metrics.ordersFulfilled.toLocaleString()}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Users size={18} /> Staff ({warehouse.staff.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {warehouse.staff.length > 0 ? (
+                <div className="space-y-2">
+                  {warehouse.staff.map((member, i) => (
+                    <div key={i} className="flex items-center justify-between p-2 border rounded">
+                      <span className="text-sm capitalize">{member.role}</span>
+                      <Badge variant="outline">{member.shift}</Badge>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-muted-foreground">No staff assigned</p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -0,0 +1,122 @@
+/**
+ * Warehouses Page
+ */
+
+import { Warehouse, Plus, RefreshCw } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { DataTable, type Column } from '../components/DataTable';
+import { Button, Badge, Progress } from '../components/ui';
+import { useWarehouses } from '../hooks/useInventory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { joinPath } from '../utils/navigation';
+import type { Warehouse as WarehouseType } from '../types';
+
+export default function WarehousesPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { warehouses, totalWarehouses, isLoading, refetch } = useWarehouses();
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+
+  const columns: Column<WarehouseType>[] = [
+    {
+      id: 'name',
+      header: 'Warehouse',
+      accessorKey: 'name',
+      sortable: true,
+      cell: (row) => (
+        <div>
+          <p className="font-medium">{row.name}</p>
+          <p className="text-sm text-muted-foreground">{row.code}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'location',
+      header: 'Location',
+      cell: (row) => (
+        <div>
+          <p>
+            {row.address.city}, {row.address.state}
+          </p>
+          <p className="text-sm text-muted-foreground">{row.address.country}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'type',
+      header: 'Type',
+      accessorKey: 'type',
+      cell: (row) => (
+        <Badge variant="outline" className="capitalize">
+          {row.type.replace('_', ' ')}
+        </Badge>
+      ),
+    },
+    {
+      id: 'utilization',
+      header: 'Utilization',
+      cell: (row) => {
+        const pct = (row.capacity.usedSpace / row.capacity.totalSpace) * 100;
+        return (
+          <div className="flex items-center gap-2">
+            <Progress value={pct} className="w-16 h-2" />
+            <span className="text-sm">{pct.toFixed(0)}%</span>
+          </div>
+        );
+      },
+    },
+    {
+      id: 'capacity',
+      header: 'Capacity',
+      cell: (row) => (
+        <div className="text-sm">
+          <p>
+            {row.capacity.usedSpace.toLocaleString()} / {row.capacity.totalSpace.toLocaleString()}{' '}
+            sq ft
+          </p>
+          <p className="text-muted-foreground">
+            {row.capacity.usedPallets} / {row.capacity.totalPallets} pallets
+          </p>
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      cell: (row) => (
+        <Badge variant={row.isActive ? 'default' : 'secondary'}>
+          {row.isActive ? 'Active' : 'Inactive'}
+        </Badge>
+      ),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Warehouses"
+      subtitle={`${totalWarehouses} warehouses`}
+      icon={<Warehouse size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={refetch}>
+            <RefreshCw size={16} /> Refresh
+          </Button>
+          <Button>
+            <Plus size={16} /> Add Warehouse
+          </Button>
+        </div>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={warehouses}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search warehouses..."
+        searchFields={['name', 'code'] as (keyof WarehouseType)[]}
+        onRowClick={(row) => goTo(`inventory/warehouses/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/providers/MoveTheWheelsProvider.tsx

@@ -0,0 +1,66 @@
+/**
+ * MoveTheWheels Provider
+ *
+ * Provides context for the entire microfrontend including navigation,
+ * user info, workspace context, and API configuration.
+ */
+
+import { createContext, useContext, useMemo, type FC, type PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import type { MoveTheWheelsRootProps, MoveTheWheelsContextValue } from '../types';
+
+const MoveTheWheelsContext = createContext<MoveTheWheelsContextValue | null>(null);
+
+export interface MoveTheWheelsProviderProps extends PropsWithChildren<MoveTheWheelsRootProps> {}
+
+export const MoveTheWheelsProvider: FC<MoveTheWheelsProviderProps> = ({ children, ...props }) => {
+  const contextValue = useMemo<MoveTheWheelsContextValue>(
+    () => ({
+      ...props,
+    }),
+    [props]
+  );
+
+  if (props.basePath) {
+    return (
+      <MoveTheWheelsContext.Provider value={contextValue}>{children}</MoveTheWheelsContext.Provider>
+    );
+  }
+
+  return (
+    <MoveTheWheelsContext.Provider value={contextValue}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </MoveTheWheelsContext.Provider>
+  );
+};
+
+/**
+ * Hook to access the MoveTheWheels context.
+ *
+ * @throws Error if used outside of MoveTheWheelsProvider
+ */
+export function useMoveTheWheels(): MoveTheWheelsContextValue {
+  const context = useContext(MoveTheWheelsContext);
+  if (!context) {
+    throw new Error('useMoveTheWheels must be used within a MoveTheWheelsProvider');
+  }
+  return context;
+}
+
+/**
+ * Hook to get the navigate function from context.
+ */
+export function useMoveTheWheelsNavigate(): (path: string) => void {
+  const { navigate, basePath } = useMoveTheWheels();
+
+  return (path: string) => {
+    // If path is absolute (starts with /), use it directly
+    // Otherwise, prepend basePath
+    if (path.startsWith('/')) {
+      navigate(path);
+    } else {
+      const cleanBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
+      navigate(`${cleanBase}/${path}`);
+    }
+  };
+}

package/src/movethewheels/store/movethewheelsStore.ts

@@ -0,0 +1,136 @@
+/**
+ * MoveTheWheels Zustand Store
+ *
+ * Manages UI state for the microfrontend.
+ * Server/entity data comes from hooks with mock data (ready for GraphQL replacement).
+ */
+
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { createProfileScopedStorage } from '@burdenoff/fe-libs/shared/utils';
+import type { OrderFilter, FleetFilter, InventoryFilter, CustomerFilter } from '../types';
+
+interface MoveTheWheelsState {
+  // View state
+  viewMode: 'grid' | 'list' | 'table';
+  sidebarCollapsed: boolean;
+
+  // Selection state
+  selectedOrderId: string | null;
+  selectedVehicleId: string | null;
+  selectedDriverId: string | null;
+  selectedCustomerId: string | null;
+  selectedWarehouseId: string | null;
+  selectedRouteId: string | null;
+
+  // Filters
+  orderFilters: OrderFilter;
+  fleetFilters: FleetFilter;
+  inventoryFilters: InventoryFilter;
+  customerFilters: CustomerFilter;
+
+  // Search
+  globalSearch: string;
+
+  // Actions
+  setViewMode: (mode: 'grid' | 'list' | 'table') => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+  toggleSidebar: () => void;
+
+  setSelectedOrderId: (id: string | null) => void;
+  setSelectedVehicleId: (id: string | null) => void;
+  setSelectedDriverId: (id: string | null) => void;
+  setSelectedCustomerId: (id: string | null) => void;
+  setSelectedWarehouseId: (id: string | null) => void;
+  setSelectedRouteId: (id: string | null) => void;
+
+  setOrderFilters: (filters: Partial<OrderFilter>) => void;
+  setFleetFilters: (filters: Partial<FleetFilter>) => void;
+  setInventoryFilters: (filters: Partial<InventoryFilter>) => void;
+  setCustomerFilters: (filters: Partial<CustomerFilter>) => void;
+  clearAllFilters: () => void;
+
+  setGlobalSearch: (search: string) => void;
+
+  // Reset
+  reset: () => void;
+}
+
+const initialState = {
+  viewMode: 'table' as const,
+  sidebarCollapsed: false,
+  selectedOrderId: null,
+  selectedVehicleId: null,
+  selectedDriverId: null,
+  selectedCustomerId: null,
+  selectedWarehouseId: null,
+  selectedRouteId: null,
+  orderFilters: {},
+  fleetFilters: {},
+  inventoryFilters: {},
+  customerFilters: {},
+  globalSearch: '',
+};
+
+export const useMoveTheWheelsStore = create<MoveTheWheelsState>()(
+  devtools(
+    persist(
+      (set) => ({
+        ...initialState,
+
+        // View actions
+        setViewMode: (mode) => set({ viewMode: mode }),
+        setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+        toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+
+        // Selection actions
+        setSelectedOrderId: (id) => set({ selectedOrderId: id }),
+        setSelectedVehicleId: (id) => set({ selectedVehicleId: id }),
+        setSelectedDriverId: (id) => set({ selectedDriverId: id }),
+        setSelectedCustomerId: (id) => set({ selectedCustomerId: id }),
+        setSelectedWarehouseId: (id) => set({ selectedWarehouseId: id }),
+        setSelectedRouteId: (id) => set({ selectedRouteId: id }),
+
+        // Filter actions
+        setOrderFilters: (filters) =>
+          set((state) => ({
+            orderFilters: { ...state.orderFilters, ...filters },
+          })),
+        setFleetFilters: (filters) =>
+          set((state) => ({
+            fleetFilters: { ...state.fleetFilters, ...filters },
+          })),
+        setInventoryFilters: (filters) =>
+          set((state) => ({
+            inventoryFilters: { ...state.inventoryFilters, ...filters },
+          })),
+        setCustomerFilters: (filters) =>
+          set((state) => ({
+            customerFilters: { ...state.customerFilters, ...filters },
+          })),
+        clearAllFilters: () =>
+          set({
+            orderFilters: {},
+            fleetFilters: {},
+            inventoryFilters: {},
+            customerFilters: {},
+          }),
+
+        // Search
+        setGlobalSearch: (search) => set({ globalSearch: search }),
+
+        // Reset
+        reset: () => set(initialState),
+      }),
+      {
+        name: 'movethewheels-storage',
+        storage: createProfileScopedStorage(),
+        partialize: (state) => ({
+          viewMode: state.viewMode,
+          sidebarCollapsed: state.sidebarCollapsed,
+        }),
+      }
+    ),
+    { name: 'MoveTheWheelsStore' }
+  )
+);