@burdenoff/microfe-movethewheels 2026.828.1 → 2026.830.1

package/src/movethewheels/MoveTheWheelsRoot.tsx

@@ -30,6 +30,7 @@ import { MoveTheWheelsProvider } from './providers/MoveTheWheelsProvider';
 import { FeatureFlagProvider, useFeatureFlag } from '@burdenoff/fe-libs/shared/feature-flags';
 import type { NavItem, MoveTheWheelsRootProps } from './types';
 import { MoveTheWheelsRoutes } from './MoveTheWheelsRoutes';
+import { useTr } from './hooks';
 
 /**
  * Registers the MoveTheWheels sidebar nav tree with the host shell.
@@ -43,6 +44,8 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
   registerNavItems,
   basePath = '/',
 }) => {
+  const tr = useTr();
+
   // The backend has no ServiceProvider/ServiceOffering model (dropped by
   // migration 20260707000001_movethewheels_reuse_cleanup) — hide the
   // Marketplace nav entry until a serviceProviders/serviceOfferings resolver
@@ -62,7 +65,7 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
 
     const movethewheelsNavItem: NavItem = {
       id: 'movethewheels',
-      label: 'MoveTheWheels',
+      label: tr('movethewheels.page.title', 'MoveTheWheels'),
       path: basePath,
       icon: <Truck size={20} />,
       order: 25,
@@ -70,49 +73,49 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
       children: [
         {
           id: 'mtw-dashboard',
-          label: 'Dashboard',
+          label: tr('movethewheels.root.nav.dashboard', 'Dashboard'),
           path: basePath,
           icon: <LayoutDashboard size={16} />,
           order: 1,
         },
         {
           id: 'mtw-orders',
-          label: 'Orders',
+          label: tr('movethewheels.root.nav.orders', 'Orders'),
           path: joinPath(basePath, 'orders'),
           icon: <Package size={16} />,
           order: 2,
         },
         {
           id: 'mtw-tracking',
-          label: 'Tracking',
+          label: tr('movethewheels.root.nav.tracking', 'Tracking'),
           path: joinPath(basePath, 'tracking'),
           icon: <Map size={16} />,
           order: 3,
         },
         {
           id: 'mtw-fleet',
-          label: 'Fleet',
+          label: tr('movethewheels.root.nav.fleet', 'Fleet'),
           path: joinPath(basePath, 'fleet'),
           icon: <Truck size={16} />,
           order: 4,
           children: [
             {
               id: 'mtw-fleet-overview',
-              label: 'Overview',
+              label: tr('movethewheels.root.nav.overview', 'Overview'),
               path: joinPath(basePath, 'fleet'),
               icon: <LayoutDashboard size={14} />,
               order: 1,
             },
             {
               id: 'mtw-vehicles',
-              label: 'Vehicles',
+              label: tr('movethewheels.root.nav.vehicles', 'Vehicles'),
               path: joinPath(basePath, 'fleet/vehicles'),
               icon: <Car size={14} />,
               order: 2,
             },
             {
               id: 'mtw-drivers',
-              label: 'Drivers',
+              label: tr('movethewheels.root.nav.drivers', 'Drivers'),
               path: joinPath(basePath, 'fleet/drivers'),
               icon: <UserCheck size={14} />,
               order: 3,
@@ -121,28 +124,28 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
         },
         {
           id: 'mtw-inventory',
-          label: 'Inventory',
+          label: tr('movethewheels.root.nav.inventory', 'Inventory'),
           path: joinPath(basePath, 'inventory'),
           icon: <Warehouse size={16} />,
           order: 5,
           children: [
             {
               id: 'mtw-inventory-overview',
-              label: 'Overview',
+              label: tr('movethewheels.root.nav.overview', 'Overview'),
               path: joinPath(basePath, 'inventory'),
               icon: <LayoutDashboard size={14} />,
               order: 1,
             },
             {
               id: 'mtw-products',
-              label: 'Products',
+              label: tr('movethewheels.root.nav.products', 'Products'),
               path: joinPath(basePath, 'inventory/products'),
               icon: <Boxes size={14} />,
               order: 2,
             },
             {
               id: 'mtw-warehouses',
-              label: 'Warehouses',
+              label: tr('movethewheels.root.nav.warehouses', 'Warehouses'),
               path: joinPath(basePath, 'inventory/warehouses'),
               icon: <Warehouse size={14} />,
               order: 3,
@@ -151,28 +154,28 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
         },
         {
           id: 'mtw-customers',
-          label: 'Customers',
+          label: tr('movethewheels.root.nav.customers', 'Customers'),
           path: joinPath(basePath, 'customers'),
           icon: <Users size={16} />,
           order: 6,
         },
         {
           id: 'mtw-routes',
-          label: 'Routes',
+          label: tr('movethewheels.root.nav.routes', 'Routes'),
           path: joinPath(basePath, 'routes'),
           icon: <Route size={16} />,
           order: 7,
         },
         {
           id: 'mtw-analytics',
-          label: 'Analytics',
+          label: tr('movethewheels.root.nav.analytics', 'Analytics'),
           path: joinPath(basePath, 'analytics'),
           icon: <BarChart3 size={16} />,
           order: 8,
         },
         {
           id: 'mtw-finance',
-          label: 'Finance',
+          label: tr('movethewheels.root.nav.finance', 'Finance'),
           path: joinPath(basePath, 'finance'),
           icon: <DollarSign size={16} />,
           order: 9,
@@ -183,7 +186,7 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
           ? [
               {
                 id: 'mtw-marketplace',
-                label: 'Marketplace',
+                label: tr('movethewheels.root.nav.marketplace', 'Marketplace'),
                 path: joinPath(basePath, 'marketplace'),
                 icon: <Store size={16} />,
                 order: 10,
@@ -192,28 +195,28 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
           : []),
         {
           id: 'mtw-import-export',
-          label: 'Import/Export',
+          label: tr('movethewheels.root.nav.importExport', 'Import/Export'),
           path: joinPath(basePath, 'import-export'),
           icon: <Globe size={16} />,
           order: 11,
         },
         {
           id: 'mtw-reports',
-          label: 'Reports',
+          label: tr('movethewheels.root.nav.reports', 'Reports'),
           path: joinPath(basePath, 'reports'),
           icon: <FileText size={16} />,
           order: 12,
         },
         {
           id: 'mtw-ai-assistant',
-          label: 'AI Assistant',
+          label: tr('movethewheels.root.nav.aiAssistant', 'AI Assistant'),
           path: joinPath(basePath, 'ai-assistant'),
           icon: <Bot size={16} />,
           order: 13,
         },
         {
           id: 'mtw-settings',
-          label: 'Settings',
+          label: tr('movethewheels.root.nav.settings', 'Settings'),
           path: joinPath(basePath, 'settings'),
           icon: <Settings size={16} />,
           order: 99,
@@ -226,7 +229,7 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
 
     // Return cleanup function to unregister on unmount
     return cleanup;
-  }, [registerNavItems, basePath, marketplaceEnabled]);
+  }, [registerNavItems, basePath, marketplaceEnabled, tr]);
 
   return null;
 };
@@ -254,6 +257,7 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
  */
 export const MoveTheWheelsRoot: FC<MoveTheWheelsRootProps> = (props) => {
   const { registerNavItems, registerFooterItems, basePath = '/' } = props;
+  const tr = useTr();
 
   // Register footer items
   useEffect(() => {
@@ -262,7 +266,7 @@ export const MoveTheWheelsRoot: FC<MoveTheWheelsRootProps> = (props) => {
     const footerItems = [
       {
         id: 'mtw-status',
-        label: 'Logistics Ready',
+        label: tr('movethewheels.root.footer.status', 'Logistics Ready'),
         type: 'status' as const,
         order: 20,
         section: 'left' as const,
@@ -271,7 +275,7 @@ export const MoveTheWheelsRoot: FC<MoveTheWheelsRootProps> = (props) => {
 
     const cleanup = registerFooterItems(footerItems);
     return cleanup;
-  }, [registerFooterItems]);
+  }, [registerFooterItems, tr]);
 
   return (
     <FeatureFlagProvider workspaceId={null} gateway="global" defaultEnabled={true}>

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -9,6 +9,7 @@ import { Routes, Route, useNavigate } from 'react-router';
 import { lazy, Suspense } from 'react';
 import { NotFoundPage } from '@burdenoff/fe-libs/shared/pages';
 import { useMoveTheWheels } from './providers/MoveTheWheelsProvider';
+import { useTr } from './hooks';
 
 /**
  * Catch-all 404 rendered inside the content area (previously a redirect to ""
@@ -18,9 +19,10 @@ import { useMoveTheWheels } from './providers/MoveTheWheelsProvider';
 function MoveTheWheelsNotFound() {
   const { navigate, basePath } = useMoveTheWheels();
   const routerNavigate = useNavigate();
+  const tr = useTr();
   return (
     <NotFoundPage
-      homeLabel="Back to MoveTheWheels"
+      homeLabel={tr('movethewheels.root.notFound.homeLabel', 'Back to MoveTheWheels')}
       onGoHome={() => {
         if (navigate) {
           navigate(basePath || '/');
@@ -34,11 +36,12 @@ function MoveTheWheelsNotFound() {
 
 // Loading fallback
 function PageLoader() {
+  const tr = useTr();
   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-text-secondary">Loading...</p>
+        <p className="text-sm text-text-secondary">{tr('movethewheels.root.loading', 'Loading...')}</p>
       </div>
     </div>
   );

package/src/movethewheels/hooks/index.ts

@@ -4,6 +4,9 @@
  * All custom hooks for data access and operations.
  */
 
+// Shared i18n helper
+export { useTr } from '../shared/hooks/useTr';
+
 // Orders
 export { useOrders, useOrder, useOrderStats } from './useOrders';
 

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -24,38 +24,49 @@ import { Bot, MessageCircle, Activity, ShieldCheck, Wallet } from 'lucide-react'
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle } from '../components/ui';
 import { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';
-
-const roadmapItems = [
-  {
-    icon: Activity,
-    title: 'Agent activity feed',
-    description:
-      'A live log of what the AI decided, on which shipments, with trigger, model, latency and cost — so an autonomous run is never a black box.',
-  },
-  {
-    icon: ShieldCheck,
-    title: 'Dispatch decision cards',
-    description:
-      'Proposed driver/vehicle assignments and carrier recommendations with rationale and confidence, requiring an explicit accept or reject before anything is written.',
-  },
-  {
-    icon: Wallet,
-    title: 'AI credit visibility',
-    description: 'Per-workspace AI spend for admins, so cost is visible before the invoice.',
-  },
-];
+import { useTr } from '../hooks';
 
 export default function AIAssistantPage() {
+  const tr = useTr();
+
+  const roadmapItems = [
+    {
+      icon: Activity,
+      title: tr('movethewheels.ai.roadmap.agentActivity.title', 'Agent activity feed'),
+      description: tr(
+        'movethewheels.ai.roadmap.agentActivity.description',
+        'A live log of what the AI decided, on which shipments, with trigger, model, latency and cost — so an autonomous run is never a black box.'
+      ),
+    },
+    {
+      icon: ShieldCheck,
+      title: tr('movethewheels.ai.roadmap.dispatchDecisionCards.title', 'Dispatch decision cards'),
+      description: tr(
+        'movethewheels.ai.roadmap.dispatchDecisionCards.description',
+        'Proposed driver/vehicle assignments and carrier recommendations with rationale and confidence, requiring an explicit accept or reject before anything is written.'
+      ),
+    },
+    {
+      icon: Wallet,
+      title: tr('movethewheels.ai.roadmap.aiCreditVisibility.title', 'AI credit visibility'),
+      description: tr(
+        'movethewheels.ai.roadmap.aiCreditVisibility.description',
+        'Per-workspace AI spend for admins, so cost is visible before the invoice.'
+      ),
+    },
+  ];
+
   return (
     <PageLayout
-      title="AI Operations"
-      subtitle="What the AI is doing on your workspace, and why"
+      title={tr('movethewheels.ai.title', 'AI Operations')}
+      subtitle={tr('movethewheels.ai.subtitle', 'What the AI is doing on your workspace, and why')}
       icon={<Bot size={24} />}
     >
       <PagePurpose icon={<Bot size={18} />}>
-        This page will surface AI-driven dispatch decisions and their outcomes once the shared AI
-        runtime lands. It does not host a chat box — chat with your live operational data is always
-        available from the assistant icon anywhere in the app.
+        {tr(
+          'movethewheels.ai.purpose',
+          'This page will surface AI-driven dispatch decisions and their outcomes once the shared AI runtime lands. It does not host a chat box — chat with your live operational data is always available from the assistant icon anywhere in the app.'
+        )}
       </PagePurpose>
 
       <GlassCard treatment="glass" className="p-4">
@@ -63,12 +74,13 @@ export default function AIAssistantPage() {
           <MessageCircle size={20} className="text-primary flex-shrink-0 mt-0.5" />
           <div>
             <p className="text-sm font-medium text-text-primary">
-              Looking to ask a question about your operations?
+              {tr('movethewheels.ai.callout.title', 'Looking to ask a question about your operations?')}
             </p>
             <p className="text-sm text-text-secondary mt-1">
-              Open the assistant from its icon in the corner of the screen — it answers from your
-              live orders, shipments, fleet and inventory data, and it is the only chat surface in
-              this product.
+              {tr(
+                'movethewheels.ai.callout.description',
+                'Open the assistant from its icon in the corner of the screen — it answers from your live orders, shipments, fleet and inventory data, and it is the only chat surface in this product.'
+              )}
             </p>
           </div>
         </div>
@@ -76,13 +88,19 @@ export default function AIAssistantPage() {
 
       <Card>
         <CardHeader>
-          <CardTitle>On the roadmap</CardTitle>
+          <CardTitle>{tr('movethewheels.ai.roadmap.title', 'On the roadmap')}</CardTitle>
         </CardHeader>
         <CardContent>
           <EmptyState
             illustration="empty-agents"
-            title="Autonomous dispatch operations aren't live yet"
-            description="Autonomous dispatch isn't available yet — these capabilities are still in development. Nothing below is available today."
+            title={tr(
+              'movethewheels.ai.emptyState.title',
+              "Autonomous dispatch operations aren't live yet"
+            )}
+            description={tr(
+              'movethewheels.ai.emptyState.description',
+              "Autonomous dispatch isn't available yet — these capabilities are still in development. Nothing below is available today."
+            )}
           />
           <ul className="mt-4 space-y-4">
             {roadmapItems.map((item) => (