@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

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

@@ -7,6 +7,24 @@ interface UseFleetOptions {
   filters?: FleetFilter;
 }
 
+export interface CreateVehicleInput {
+  vehicleNumber: string;
+  /** VehicleType enum value, e.g. `TRUCK`, `VAN`. */
+  type: string;
+  make?: string;
+  model?: string;
+  licensePlate?: string;
+}
+
+export interface CreateDriverInput {
+  employeeId: string;
+  firstName: string;
+  lastName: string;
+  email?: string;
+  phone?: string;
+  licenseNumber?: string;
+}
+
 interface UseFleetResult {
   vehicles: Vehicle[];
   drivers: Driver[];
@@ -15,6 +33,8 @@ interface UseFleetResult {
   isLoading: boolean;
   error: Error | null;
   refetch: () => void;
+  createVehicle: (input: CreateVehicleInput) => Promise<Vehicle>;
+  createDriver: (input: CreateDriverInput) => Promise<Driver>;
 }
 
 interface ApiVehicle {
@@ -189,6 +209,46 @@ const UPDATE_DRIVER_STATUS_MUTATION = `
   }
 `;
 
+const CREATE_VEHICLE_MUTATION = `
+  mutation CreateVehicle($input: CreateVehicleInput!) {
+    createVehicle(input: $input) {
+      id
+      vehicleNumber
+      type
+      make
+      model
+      year
+      capacity
+      status
+      currentLocation
+      fuelLevel
+      mileage
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+const CREATE_DRIVER_MUTATION = `
+  mutation CreateDriver($input: CreateDriverInput!) {
+    createDriver(input: $input) {
+      id
+      userId
+      firstName
+      lastName
+      employeeId
+      licenseNumber
+      licenseClass
+      licenseExpiry
+      status
+      currentLocation
+      rating
+      vehicleId
+      createdAt
+    }
+  }
+`;
+
 const FLEET_STATS_QUERY = `
   query GetFleetStats {
     fleetStats {
@@ -199,6 +259,7 @@ const FLEET_STATS_QUERY = `
       totalDrivers
       availableDrivers
       onDeliveryDrivers
+      avgDriverRating
     }
   }
 `;
@@ -415,6 +476,51 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     void load();
   }, [load]);
 
+  const createVehicle = useCallback(
+    async (input: CreateVehicleInput): Promise<Vehicle> => {
+      const data = await executeGraphQL<{ createVehicle: ApiVehicle }>(
+        graphQLOptions,
+        CREATE_VEHICLE_MUTATION,
+        {
+          input: {
+            vehicleNumber: input.vehicleNumber,
+            type: input.type,
+            make: input.make,
+            model: input.model,
+            licensePlate: input.licensePlate,
+          },
+        }
+      );
+      const created = mapVehicle(data.createVehicle);
+      setVehicles((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
+  const createDriver = useCallback(
+    async (input: CreateDriverInput): Promise<Driver> => {
+      const data = await executeGraphQL<{ createDriver: ApiDriver }>(
+        graphQLOptions,
+        CREATE_DRIVER_MUTATION,
+        {
+          input: {
+            employeeId: input.employeeId,
+            firstName: input.firstName,
+            lastName: input.lastName,
+            email: input.email,
+            phone: input.phone,
+            licenseNumber: input.licenseNumber,
+          },
+        }
+      );
+      const created = mapDriver(data.createDriver);
+      setDrivers((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -423,6 +529,8 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     isLoading,
     error,
     refetch,
+    createVehicle,
+    createDriver,
   };
 }
 
@@ -712,67 +820,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 };
+}