@burdenoff/microfe-movethewheels 2026.510.105

package/src/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Package entry point
+ */
+export * from './movethewheels';

package/src/movethewheels/MoveTheWheelsRoot.tsx

@@ -0,0 +1,258 @@
+/**
+ * MoveTheWheels Root Component
+ *
+ * Main entry point for the MoveTheWheels microfrontend.
+ * Registers navigation items with the host shell and sets up providers.
+ */
+
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import {
+  Truck,
+  Package,
+  Users,
+  LayoutDashboard,
+  Map,
+  Warehouse,
+  Route,
+  BarChart3,
+  Settings,
+  Store,
+  Car,
+  UserCheck,
+  Boxes,
+  FileText,
+  DollarSign,
+  Globe,
+  Bot,
+} from 'lucide-react';
+import { MoveTheWheelsProvider } from './providers/MoveTheWheelsProvider';
+import { FeatureFlagProvider } from '@burdenoff/fe-libs/shared/feature-flags';
+import type { NavItem, MoveTheWheelsRootProps } from './types';
+import { MoveTheWheelsRoutes } from './MoveTheWheelsRoutes';
+
+/**
+ * Root component for the MoveTheWheels microfrontend.
+ *
+ * @example
+ * ```tsx
+ * import { MoveTheWheelsRoot } from '@burdenoff/microfe-movethewheels';
+ *
+ * function App() {
+ *   return (
+ *     <MoveTheWheelsRoot
+ *       basePath="/movethewheels"
+ *       navigate={(path) => router.push(path)}
+ *       currentUser={currentUser}
+ *       workspaceId="ws-123"
+ *       apiGatewayUrl="https://api.example.com"
+ *       authToken="token"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const MoveTheWheelsRoot: FC<MoveTheWheelsRootProps> = (props) => {
+  const { registerNavItems, registerFooterItems, basePath = '/' } = props;
+
+  // Helper to join paths correctly, avoiding double slashes
+  const joinPath = (base: string, path: string): string => {
+    const cleanBase = base.endsWith('/') ? base.slice(0, -1) : base;
+    const cleanPath = path.startsWith('/') ? path : `/${path}`;
+    return cleanBase + cleanPath;
+  };
+
+  // Register navigation items with the shell
+  useEffect(() => {
+    if (!registerNavItems) return;
+
+    const movethewheelsNavItem: NavItem = {
+      id: 'movethewheels',
+      label: 'MoveTheWheels',
+      path: basePath,
+      icon: <Truck size={20} />,
+      order: 25,
+      group: 'workspace',
+      children: [
+        {
+          id: 'mtw-dashboard',
+          label: 'Dashboard',
+          path: basePath,
+          icon: <LayoutDashboard size={16} />,
+          order: 1,
+        },
+        {
+          id: 'mtw-orders',
+          label: 'Orders',
+          path: joinPath(basePath, 'orders'),
+          icon: <Package size={16} />,
+          order: 2,
+        },
+        {
+          id: 'mtw-tracking',
+          label: 'Tracking',
+          path: joinPath(basePath, 'tracking'),
+          icon: <Map size={16} />,
+          order: 3,
+        },
+        {
+          id: 'mtw-fleet',
+          label: 'Fleet',
+          path: joinPath(basePath, 'fleet'),
+          icon: <Truck size={16} />,
+          order: 4,
+          children: [
+            {
+              id: 'mtw-fleet-overview',
+              label: 'Overview',
+              path: joinPath(basePath, 'fleet'),
+              icon: <LayoutDashboard size={14} />,
+              order: 1,
+            },
+            {
+              id: 'mtw-vehicles',
+              label: 'Vehicles',
+              path: joinPath(basePath, 'fleet/vehicles'),
+              icon: <Car size={14} />,
+              order: 2,
+            },
+            {
+              id: 'mtw-drivers',
+              label: 'Drivers',
+              path: joinPath(basePath, 'fleet/drivers'),
+              icon: <UserCheck size={14} />,
+              order: 3,
+            },
+          ],
+        },
+        {
+          id: 'mtw-inventory',
+          label: 'Inventory',
+          path: joinPath(basePath, 'inventory'),
+          icon: <Warehouse size={16} />,
+          order: 5,
+          children: [
+            {
+              id: 'mtw-inventory-overview',
+              label: 'Overview',
+              path: joinPath(basePath, 'inventory'),
+              icon: <LayoutDashboard size={14} />,
+              order: 1,
+            },
+            {
+              id: 'mtw-products',
+              label: 'Products',
+              path: joinPath(basePath, 'inventory/products'),
+              icon: <Boxes size={14} />,
+              order: 2,
+            },
+            {
+              id: 'mtw-warehouses',
+              label: 'Warehouses',
+              path: joinPath(basePath, 'inventory/warehouses'),
+              icon: <Warehouse size={14} />,
+              order: 3,
+            },
+          ],
+        },
+        {
+          id: 'mtw-customers',
+          label: 'Customers',
+          path: joinPath(basePath, 'customers'),
+          icon: <Users size={16} />,
+          order: 6,
+        },
+        {
+          id: 'mtw-routes',
+          label: 'Routes',
+          path: joinPath(basePath, 'routes'),
+          icon: <Route size={16} />,
+          order: 7,
+        },
+        {
+          id: 'mtw-analytics',
+          label: 'Analytics',
+          path: joinPath(basePath, 'analytics'),
+          icon: <BarChart3 size={16} />,
+          order: 8,
+        },
+        {
+          id: 'mtw-finance',
+          label: 'Finance',
+          path: joinPath(basePath, 'finance'),
+          icon: <DollarSign size={16} />,
+          order: 9,
+        },
+        {
+          id: 'mtw-marketplace',
+          label: 'Marketplace',
+          path: joinPath(basePath, 'marketplace'),
+          icon: <Store size={16} />,
+          order: 10,
+        },
+        {
+          id: 'mtw-import-export',
+          label: 'Import/Export',
+          path: joinPath(basePath, 'import-export'),
+          icon: <Globe size={16} />,
+          order: 11,
+        },
+        {
+          id: 'mtw-reports',
+          label: 'Reports',
+          path: joinPath(basePath, 'reports'),
+          icon: <FileText size={16} />,
+          order: 12,
+        },
+        {
+          id: 'mtw-ai-assistant',
+          label: 'AI Assistant',
+          path: joinPath(basePath, 'ai-assistant'),
+          icon: <Bot size={16} />,
+          order: 13,
+        },
+        {
+          id: 'mtw-settings',
+          label: 'Settings',
+          path: joinPath(basePath, 'settings'),
+          icon: <Settings size={16} />,
+          order: 99,
+        },
+      ],
+    };
+
+    // Register and get cleanup function
+    const cleanup = registerNavItems(movethewheelsNavItem);
+
+    // Return cleanup function to unregister on unmount
+    return cleanup;
+  }, [registerNavItems, basePath]);
+
+  // Register footer items
+  useEffect(() => {
+    if (!registerFooterItems) return;
+
+    const footerItems = [
+      {
+        id: 'mtw-status',
+        label: 'Logistics Ready',
+        type: 'status' as const,
+        order: 20,
+        section: 'left' as const,
+      },
+    ];
+
+    const cleanup = registerFooterItems(footerItems);
+    return cleanup;
+  }, [registerFooterItems]);
+
+  return (
+    <FeatureFlagProvider workspaceId={null} gateway="global" defaultEnabled={true}>
+      <MoveTheWheelsProvider {...props}>
+        <div className="movethewheels-root h-full">
+          <MoveTheWheelsRoutes />
+        </div>
+      </MoveTheWheelsProvider>
+    </FeatureFlagProvider>
+  );
+};

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -0,0 +1,119 @@
+/**
+ * MoveTheWheels Internal Routes
+ *
+ * Defines all internal routing for the microfrontend.
+ * Uses lazy loading for code splitting.
+ */
+
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+
+// Loading fallback
+function PageLoader() {
+  return (
+    <div className="flex items-center justify-center min-h-[400px]">
+      <div className="flex flex-col items-center gap-3">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+// Lazy-loaded pages
+const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const OrdersListPage = lazy(() => import('./pages/OrdersListPage'));
+const OrderDetailsPage = lazy(() => import('./pages/OrderDetailsPage'));
+const CreateOrderPage = lazy(() => import('./pages/CreateOrderPage'));
+const TrackingPage = lazy(() => import('./pages/TrackingPage'));
+const LiveTrackingPage = lazy(() => import('./pages/LiveTrackingPage'));
+const FleetPage = lazy(() => import('./pages/FleetPage'));
+const VehiclesPage = lazy(() => import('./pages/VehiclesPage'));
+const VehicleDetailsPage = lazy(() => import('./pages/VehicleDetailsPage'));
+const DriversPage = lazy(() => import('./pages/DriversPage'));
+const DriverDetailsPage = lazy(() => import('./pages/DriverDetailsPage'));
+const InventoryPage = lazy(() => import('./pages/InventoryPage'));
+const ProductsPage = lazy(() => import('./pages/ProductsPage'));
+const ProductDetailsPage = lazy(() => import('./pages/ProductDetailsPage'));
+const WarehousesPage = lazy(() => import('./pages/WarehousesPage'));
+const WarehouseDetailsPage = lazy(() => import('./pages/WarehouseDetailsPage'));
+const CustomersPage = lazy(() => import('./pages/CustomersPage'));
+const CustomerDetailsPage = lazy(() => import('./pages/CustomerDetailsPage'));
+const RoutesPage = lazy(() => import('./pages/RoutesPage'));
+const RouteDetailsPage = lazy(() => import('./pages/RouteDetailsPage'));
+const AnalyticsPage = lazy(() => import('./pages/AnalyticsPage'));
+const FinancePage = lazy(() => import('./pages/FinancePage'));
+const MarketplacePage = lazy(() => import('./pages/MarketplacePage'));
+const ImportExportPage = lazy(() => import('./pages/ImportExportPage'));
+const ReportsPage = lazy(() => import('./pages/ReportsPage'));
+const SettingsPage = lazy(() => import('./pages/SettingsPage'));
+const AIAssistantPage = lazy(() => import('./pages/AIAssistantPage'));
+
+export function MoveTheWheelsRoutes() {
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <Routes>
+        {/* Dashboard */}
+        <Route index element={<DashboardPage />} />
+
+        {/* Orders */}
+        <Route path="orders" element={<OrdersListPage />} />
+        <Route path="orders/new" element={<CreateOrderPage />} />
+        <Route path="orders/:orderId" element={<OrderDetailsPage />} />
+        <Route path="orders/:orderId/edit" element={<CreateOrderPage />} />
+
+        {/* Tracking */}
+        <Route path="tracking" element={<TrackingPage />} />
+        <Route path="tracking/live" element={<LiveTrackingPage />} />
+
+        {/* Fleet */}
+        <Route path="fleet" element={<FleetPage />} />
+        <Route path="fleet/vehicles" element={<VehiclesPage />} />
+        <Route path="fleet/vehicles/:vehicleId" element={<VehicleDetailsPage />} />
+        <Route path="fleet/drivers" element={<DriversPage />} />
+        <Route path="fleet/drivers/:driverId" element={<DriverDetailsPage />} />
+
+        {/* Inventory */}
+        <Route path="inventory" element={<InventoryPage />} />
+        <Route path="inventory/products" element={<ProductsPage />} />
+        <Route path="inventory/products/:productId" element={<ProductDetailsPage />} />
+        <Route path="inventory/warehouses" element={<WarehousesPage />} />
+        <Route path="inventory/warehouses/:warehouseId" element={<WarehouseDetailsPage />} />
+
+        {/* Customers */}
+        <Route path="customers" element={<CustomersPage />} />
+        <Route path="customers/new" element={<CustomerDetailsPage />} />
+        <Route path="customers/:customerId" element={<CustomerDetailsPage />} />
+
+        {/* Routes */}
+        <Route path="routes" element={<RoutesPage />} />
+        <Route path="routes/new" element={<RouteDetailsPage />} />
+        <Route path="routes/:routeId" element={<RouteDetailsPage />} />
+
+        {/* Analytics */}
+        <Route path="analytics" element={<AnalyticsPage />} />
+
+        {/* Finance */}
+        <Route path="finance" element={<FinancePage />} />
+
+        {/* Marketplace */}
+        <Route path="marketplace" element={<MarketplacePage />} />
+
+        {/* Import/Export */}
+        <Route path="import-export" element={<ImportExportPage />} />
+
+        {/* Reports */}
+        <Route path="reports" element={<ReportsPage />} />
+
+        {/* AI Assistant */}
+        <Route path="ai-assistant" element={<AIAssistantPage />} />
+
+        {/* Settings */}
+        <Route path="settings" element={<SettingsPage />} />
+
+        {/* Catch-all - redirect to dashboard */}
+        <Route path="*" element={<Navigate to="" replace />} />
+      </Routes>
+    </Suspense>
+  );
+}