@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

package/src/movethewheels/components/StatusBadge.tsx

@@ -1,7 +1,12 @@
 import { cn } from '../utils/cn';
 import { Badge } from './ui';
 import type { OrderStatus, VehicleStatus, DriverStatus } from '../types';
-import { ORDER_STATUS_COLORS, VEHICLE_STATUS_COLORS, DRIVER_STATUS_COLORS } from '../constants';
+import {
+  ORDER_STATUS_COLORS,
+  VEHICLE_STATUS_COLORS,
+  DRIVER_STATUS_COLORS,
+  PRIORITY_COLORS,
+} from '../constants';
 
 type StatusType = 'order' | 'vehicle' | 'driver' | 'custom';
 
@@ -37,28 +42,20 @@ export function StatusBadge({
   // Get colors based on type
   let colors = customColors;
 
+  const neutral = { bg: 'bg-bg-sunken', text: 'text-text-secondary' };
   if (!colors) {
     switch (type) {
       case 'order':
-        colors = ORDER_STATUS_COLORS[status as OrderStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = ORDER_STATUS_COLORS[status as OrderStatus] || neutral;
         break;
       case 'vehicle':
-        colors = VEHICLE_STATUS_COLORS[status as VehicleStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = VEHICLE_STATUS_COLORS[status as VehicleStatus] || neutral;
         break;
       case 'driver':
-        colors = DRIVER_STATUS_COLORS[status as DriverStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = DRIVER_STATUS_COLORS[status as DriverStatus] || neutral;
         break;
       default:
-        colors = { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-300' };
+        colors = neutral;
     }
   }
 
@@ -102,17 +99,7 @@ export function PriorityBadge({
   size?: 'sm' | 'md' | 'lg';
   className?: string;
 }) {
-  const priorityColors = {
-    low: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400' },
-    normal: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-400' },
-    high: {
-      bg: 'bg-orange-100 dark:bg-orange-900/30',
-      text: 'text-orange-700 dark:text-orange-400',
-    },
-    urgent: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
-  };
-
-  const colors = priorityColors[priority];
+  const colors = PRIORITY_COLORS[priority];
 
   return (
     <Badge
@@ -143,11 +130,8 @@ export function TypeBadge({
   className?: string;
 }) {
   const typeColors = {
-    b2b: {
-      bg: 'bg-purple-100 dark:bg-purple-900/30',
-      text: 'text-purple-700 dark:text-purple-400',
-    },
-    b2c: { bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-700 dark:text-teal-400' },
+    b2b: { bg: 'bg-status-info-bg-subtle', text: 'text-status-info-text' },
+    b2c: { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' },
   };
 
   const colors = typeColors[type];
@@ -181,13 +165,10 @@ export function PaymentStatusBadge({
   className?: string;
 }) {
   const statusColors = {
-    pending: {
-      bg: 'bg-yellow-100 dark:bg-yellow-900/30',
-      text: 'text-yellow-700 dark:text-yellow-400',
-    },
-    paid: { bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-400' },
-    failed: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
-    refunded: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-400' },
+    pending: { bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' },
+    paid: { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' },
+    failed: { bg: 'bg-status-error-bg-subtle', text: 'text-status-error-text' },
+    refunded: { bg: 'bg-bg-sunken', text: 'text-text-secondary' },
   };
 
   const colors = statusColors[status];

package/src/movethewheels/constants/index.ts

@@ -1,44 +1,85 @@
 /**
  * Constants barrel export
+ *
+ * Status color maps use fe-libs semantic status tokens (never raw palette
+ * classes) so they adapt automatically across light/dark and product themes.
+ * Definitions live in fe-libs/src/shared/styles/app-shell.css.
  */
 
-export * from './mockData';
+export interface StatusColor {
+  bg: string;
+  text: string;
+  border?: string;
+}
+
+const SUCCESS: StatusColor = {
+  bg: 'bg-status-success-bg-subtle',
+  text: 'text-status-success-text',
+  border: 'border-status-success-border',
+};
+const WARNING: StatusColor = {
+  bg: 'bg-status-warning-bg-subtle',
+  text: 'text-status-warning-text',
+  border: 'border-status-warning-border',
+};
+const ERROR: StatusColor = {
+  bg: 'bg-status-error-bg-subtle',
+  text: 'text-status-error-text',
+  border: 'border-status-error-border',
+};
+const INFO: StatusColor = {
+  bg: 'bg-status-info-bg-subtle',
+  text: 'text-status-info-text',
+  border: 'border-status-info-border',
+};
+const NEUTRAL: StatusColor = {
+  bg: 'bg-bg-sunken',
+  text: 'text-text-secondary',
+};
 
 // Order status colors
-export const ORDER_STATUS_COLORS: Record<string, { bg: string; text: string; border: string }> = {
-  pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', border: 'border-yellow-200' },
-  confirmed: { bg: 'bg-blue-100', text: 'text-blue-800', border: 'border-blue-200' },
-  assigned: { bg: 'bg-purple-100', text: 'text-purple-800', border: 'border-purple-200' },
-  picked_up: { bg: 'bg-indigo-100', text: 'text-indigo-800', border: 'border-indigo-200' },
-  in_transit: { bg: 'bg-cyan-100', text: 'text-cyan-800', border: 'border-cyan-200' },
-  out_for_delivery: { bg: 'bg-orange-100', text: 'text-orange-800', border: 'border-orange-200' },
-  delivered: { bg: 'bg-green-100', text: 'text-green-800', border: 'border-green-200' },
-  cancelled: { bg: 'bg-red-100', text: 'text-red-800', border: 'border-red-200' },
-  failed: { bg: 'bg-red-100', text: 'text-red-800', border: 'border-red-200' },
+export const ORDER_STATUS_COLORS: Record<string, StatusColor> = {
+  pending: WARNING,
+  confirmed: INFO,
+  assigned: INFO,
+  picked_up: INFO,
+  in_transit: INFO,
+  out_for_delivery: WARNING,
+  delivered: SUCCESS,
+  cancelled: ERROR,
+  failed: ERROR,
 };
 
 // Vehicle status colors
-export const VEHICLE_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
-  available: { bg: 'bg-green-100', text: 'text-green-800' },
-  assigned: { bg: 'bg-blue-100', text: 'text-blue-800' },
-  maintenance: { bg: 'bg-yellow-100', text: 'text-yellow-800' },
-  out_of_service: { bg: 'bg-red-100', text: 'text-red-800' },
+export const VEHICLE_STATUS_COLORS: Record<string, StatusColor> = {
+  available: SUCCESS,
+  assigned: INFO,
+  maintenance: WARNING,
+  out_of_service: ERROR,
 };
 
 // Driver status colors
-export const DRIVER_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
-  available: { bg: 'bg-green-100', text: 'text-green-800' },
-  busy: { bg: 'bg-blue-100', text: 'text-blue-800' },
-  offline: { bg: 'bg-gray-100', text: 'text-gray-800' },
-  on_break: { bg: 'bg-yellow-100', text: 'text-yellow-800' },
+export const DRIVER_STATUS_COLORS: Record<string, StatusColor> = {
+  available: SUCCESS,
+  busy: INFO,
+  offline: NEUTRAL,
+  on_break: WARNING,
 };
 
 // Priority colors
-export const PRIORITY_COLORS: Record<string, { bg: string; text: string }> = {
-  low: { bg: 'bg-gray-100', text: 'text-gray-600' },
-  normal: { bg: 'bg-blue-100', text: 'text-blue-600' },
-  high: { bg: 'bg-orange-100', text: 'text-orange-600' },
-  urgent: { bg: 'bg-red-100', text: 'text-red-600' },
+export const PRIORITY_COLORS: Record<string, StatusColor> = {
+  low: NEUTRAL,
+  normal: INFO,
+  high: WARNING,
+  urgent: ERROR,
+};
+
+// Route status colors (shared by RoutesPage + RouteDetailsPage)
+export const ROUTE_STATUS_COLORS: Record<string, StatusColor> = {
+  planned: INFO,
+  in_progress: WARNING,
+  completed: SUCCESS,
+  cancelled: ERROR,
 };
 
 // Customer type labels

package/src/movethewheels/hooks/index.ts

@@ -53,3 +53,15 @@ export {
   useTrackingAlerts,
   useGeofence,
 } from './useTracking';
+
+// Assistant
+export { useAssistant } from './useAssistant';
+
+// Reports
+export { useReports } from './useReports';
+
+// Import / Export
+export { useImportExport } from './useImportExport';
+
+// Module settings
+export { useModuleSettings } from './useSettings';

package/src/movethewheels/hooks/useAnalytics.ts

@@ -40,11 +40,14 @@ const ANALYTICS_QUERY = `
       activeVehicles
       lowStockItems
       totalRevenue
+      onTimeDeliveryRate
+      customerSatisfaction
     }
     fleetStats {
       totalVehicles
       activeVehicles
       maintenanceVehicles
+      avgDriverRating
     }
   }
 `;
@@ -58,6 +61,8 @@ const DASHBOARD_QUERY = `
       activeVehicles
       lowStockItems
       totalRevenue
+      onTimeDeliveryRate
+      customerSatisfaction
     }
     orderStats {
       total
@@ -74,6 +79,7 @@ const DASHBOARD_QUERY = `
       totalDrivers
       availableDrivers
       onDeliveryDrivers
+      avgDriverRating
     }
     financeMetrics {
       revenue {
@@ -165,11 +171,14 @@ export function useAnalytics(_options: UseAnalyticsOptions = {}): UseAnalyticsRe
           totalOrders: number;
           totalRevenue: number;
           activeVehicles: number;
+          onTimeDeliveryRate: number;
+          customerSatisfaction: number;
         };
         fleetStats: {
           totalVehicles: number;
           activeVehicles: number;
           maintenanceVehicles: number;
+          avgDriverRating: number;
         };
       }>(graphQLOptions, ANALYTICS_QUERY);
 
@@ -178,8 +187,8 @@ export function useAnalytics(_options: UseAnalyticsOptions = {}): UseAnalyticsRe
           totalOrders: data.dashboardMetrics.totalOrders,
           totalRevenue: data.dashboardMetrics.totalRevenue,
           activeVehicles: data.dashboardMetrics.activeVehicles,
-          onTimeDeliveryRate: 0,
-          customerSatisfaction: 0,
+          onTimeDeliveryRate: data.dashboardMetrics.onTimeDeliveryRate,
+          customerSatisfaction: data.dashboardMetrics.customerSatisfaction,
         },
         trends: {
           dailyOrders: data.analytics.orderTrend.map((item) => ({
@@ -209,10 +218,10 @@ export function useAnalytics(_options: UseAnalyticsOptions = {}): UseAnalyticsRe
         },
         performance: {
           onTimePickup: 0,
-          onTimeDelivery: 0,
+          onTimeDelivery: data.dashboardMetrics.onTimeDeliveryRate,
           damagedItems: 0,
           customerComplaints: 0,
-          driverRatings: 0,
+          driverRatings: data.fleetStats.avgDriverRating,
         },
       });
     } catch (fetchError) {
@@ -281,6 +290,10 @@ export function useDashboardMetrics() {
       setError(null);
       try {
         const data = await executeGraphQL<{
+          dashboardMetrics: {
+            onTimeDeliveryRate: number;
+            customerSatisfaction: number;
+          };
           orderStats: {
             total: number;
             pending: number;
@@ -292,6 +305,7 @@ export function useDashboardMetrics() {
             activeVehicles: number;
             totalDrivers: number;
             availableDrivers: number;
+            avgDriverRating: number;
           };
           financeMetrics: {
             revenue: {
@@ -321,8 +335,8 @@ export function useDashboardMetrics() {
             currency: 'USD',
           },
           performance: {
-            onTimeDeliveryRate: 0,
-            avgDriverRating: 0,
+            onTimeDeliveryRate: data.dashboardMetrics.onTimeDeliveryRate,
+            avgDriverRating: data.fleetStats.avgDriverRating,
           },
         });
       } catch (fetchError) {

package/src/movethewheels/hooks/useAssistant.ts

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export interface AssistantAnswer {
+  answer: string;
+  generatedAt: string;
+  question: string;
+}
+
+const ASSISTANT_INSIGHTS_QUERY = `
+  query MovethewheelsAssistantInsights($question: String!) {
+    assistantInsights(question: $question) {
+      answer
+      generatedAt
+      question
+    }
+  }
+`;
+
+interface UseAssistantResult {
+  ask: (question: string) => Promise<AssistantAnswer>;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * useAssistant — queries the real logistics assistant (Query.assistantInsights).
+ * The backend answers from the caller's own operational data; there is no
+ * client-side canned response.
+ */
+export function useAssistant(): UseAssistantResult {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const ask = useCallback(
+    async (question: string): Promise<AssistantAnswer> => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ assistantInsights: AssistantAnswer }>(
+          graphQLOptions,
+          ASSISTANT_INSIGHTS_QUERY,
+          { question }
+        );
+        return data.assistantInsights;
+      } catch (fetchError) {
+        const normalized =
+          fetchError instanceof Error ? fetchError : new Error('Failed to get assistant response');
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [graphQLOptions]
+  );
+
+  return { ask, isLoading, error };
+}

package/src/movethewheels/hooks/useFleet.ts

@@ -199,6 +199,7 @@ const FLEET_STATS_QUERY = `
       totalDrivers
       availableDrivers
       onDeliveryDrivers
+      avgDriverRating
     }
   }
 `;
@@ -712,67 +713,70 @@ export function useFleetStats() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        fleetStats: {
+          totalVehicles: number;
+          activeVehicles: number;
+          inTransitVehicles: number;
+          maintenanceVehicles: number;
+          totalDrivers: number;
+          availableDrivers: number;
+          onDeliveryDrivers: number;
+          avgDriverRating: number;
+        };
+      }>(graphQLOptions, FLEET_STATS_QUERY);
+
+      setStats({
+        totalVehicles: data.fleetStats.totalVehicles,
+        totalDrivers: data.fleetStats.totalDrivers,
+        vehiclesByStatus: {
+          available: data.fleetStats.activeVehicles,
+          assigned: data.fleetStats.inTransitVehicles,
+          maintenance: data.fleetStats.maintenanceVehicles,
+          out_of_service: Math.max(
+            data.fleetStats.totalVehicles -
+              data.fleetStats.activeVehicles -
+              data.fleetStats.inTransitVehicles -
+              data.fleetStats.maintenanceVehicles,
+            0
+          ),
+        },
+        driversByStatus: {
+          available: data.fleetStats.availableDrivers,
+          busy: data.fleetStats.onDeliveryDrivers,
+          offline: Math.max(
+            data.fleetStats.totalDrivers -
+              data.fleetStats.availableDrivers -
+              data.fleetStats.onDeliveryDrivers,
+            0
+          ),
+          on_break: 0,
+        },
+        avgFuelLevel: 0,
+        avgDriverRating: data.fleetStats.avgDriverRating,
+        utilization:
+          data.fleetStats.totalVehicles > 0
+            ? (data.fleetStats.activeVehicles / data.fleetStats.totalVehicles) * 100
+            : 0,
+      });
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load fleet stats'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
   useEffect(() => {
-    const load = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const data = await executeGraphQL<{
-          fleetStats: {
-            totalVehicles: number;
-            activeVehicles: number;
-            inTransitVehicles: number;
-            maintenanceVehicles: number;
-            totalDrivers: number;
-            availableDrivers: number;
-            onDeliveryDrivers: number;
-          };
-        }>(graphQLOptions, FLEET_STATS_QUERY);
-
-        setStats({
-          totalVehicles: data.fleetStats.totalVehicles,
-          totalDrivers: data.fleetStats.totalDrivers,
-          vehiclesByStatus: {
-            available: data.fleetStats.activeVehicles,
-            assigned: data.fleetStats.inTransitVehicles,
-            maintenance: data.fleetStats.maintenanceVehicles,
-            out_of_service: Math.max(
-              data.fleetStats.totalVehicles -
-                data.fleetStats.activeVehicles -
-                data.fleetStats.inTransitVehicles -
-                data.fleetStats.maintenanceVehicles,
-              0
-            ),
-          },
-          driversByStatus: {
-            available: data.fleetStats.availableDrivers,
-            busy: data.fleetStats.onDeliveryDrivers,
-            offline: Math.max(
-              data.fleetStats.totalDrivers -
-                data.fleetStats.availableDrivers -
-                data.fleetStats.onDeliveryDrivers,
-              0
-            ),
-            on_break: 0,
-          },
-          avgFuelLevel: 0,
-          avgDriverRating: 0,
-          utilization:
-            data.fleetStats.totalVehicles > 0
-              ? (data.fleetStats.activeVehicles / data.fleetStats.totalVehicles) * 100
-              : 0,
-        });
-      } catch (fetchError) {
-        setError(
-          fetchError instanceof Error ? fetchError : new Error('Failed to load fleet stats')
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
+    void load();
+  }, [load]);
 
+  const refetch = useCallback(() => {
     void load();
-  }, [graphQLOptions]);
+  }, [load]);
 
-  return { stats, isLoading, error };
+  return { stats, isLoading, error, refetch };
 }

package/src/movethewheels/hooks/useImportExport.ts

@@ -0,0 +1,101 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export interface ImportExportResult {
+  success: boolean;
+  message: string;
+  payload?: Record<string, unknown> | null;
+}
+
+const EXPORT_DATA_MUTATION = `
+  mutation MovethewheelsExportData($input: MovethewheelsExportDataInput!) {
+    exportData(input: $input) {
+      success
+      message
+      payload
+    }
+  }
+`;
+
+const IMPORT_DATA_MUTATION = `
+  mutation MovethewheelsImportData($input: MovethewheelsImportDataInput!) {
+    importData(input: $input) {
+      success
+      message
+      payload
+    }
+  }
+`;
+
+interface UseImportExportResult {
+  exportData: (resource: string, format?: string) => Promise<ImportExportResult>;
+  importData: (resource: string, payload: Record<string, unknown>) => Promise<ImportExportResult>;
+  isBusy: boolean;
+  error: Error | null;
+}
+
+export function useImportExport(): UseImportExportResult {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [isBusy, setIsBusy] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const exportData = useCallback(
+    async (resource: string, format?: string): Promise<ImportExportResult> => {
+      setIsBusy(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ exportData: ImportExportResult }>(
+          graphQLOptions,
+          EXPORT_DATA_MUTATION,
+          { input: { resource, format } }
+        );
+        return data.exportData;
+      } catch (fetchError) {
+        const normalized = fetchError instanceof Error ? fetchError : new Error('Export failed');
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setIsBusy(false);
+      }
+    },
+    [graphQLOptions]
+  );
+
+  const importData = useCallback(
+    async (resource: string, payload: Record<string, unknown>): Promise<ImportExportResult> => {
+      setIsBusy(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ importData: ImportExportResult }>(
+          graphQLOptions,
+          IMPORT_DATA_MUTATION,
+          { input: { resource, payload } }
+        );
+        return data.importData;
+      } catch (fetchError) {
+        const normalized = fetchError instanceof Error ? fetchError : new Error('Import failed');
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setIsBusy(false);
+      }
+    },
+    [graphQLOptions]
+  );
+
+  return { exportData, importData, isBusy, error };
+}