@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

package/src/movethewheels/hooks/useReports.ts

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export interface MovethewheelsReport {
+  id: string;
+  name: string;
+  description?: string | null;
+  type: string;
+  status: string;
+  schedule?: string | null;
+  lastGenerated?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface GeneratedReport {
+  generatedAt: string;
+  result?: Record<string, unknown> | null;
+  report: MovethewheelsReport;
+}
+
+const REPORT_FIELDS = `
+  id
+  name
+  description
+  type
+  status
+  schedule
+  lastGenerated
+  createdAt
+  updatedAt
+`;
+
+const LIST_REPORTS_QUERY = `
+  query MovethewheelsReports($filter: MovethewheelsReportFilterInput, $pagination: PaginationInput) {
+    movethewheelsReports(filter: $filter, pagination: $pagination) {
+      ${REPORT_FIELDS}
+    }
+  }
+`;
+
+const CREATE_REPORT_MUTATION = `
+  mutation CreateMovethewheelsReport($input: CreateMovethewheelsReportInput!) {
+    createMovethewheelsReport(input: $input) {
+      ${REPORT_FIELDS}
+    }
+  }
+`;
+
+const GENERATE_REPORT_MUTATION = `
+  mutation GenerateMovethewheelsReport($input: GenerateMovethewheelsReportInput!) {
+    generateMovethewheelsReport(input: $input) {
+      generatedAt
+      result
+      report {
+        ${REPORT_FIELDS}
+      }
+    }
+  }
+`;
+
+export interface CreateReportInput {
+  name: string;
+  type: string;
+  description?: string;
+  schedule?: string;
+  status?: string;
+}
+
+interface UseReportsResult {
+  reports: MovethewheelsReport[];
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+  createReport: (input: CreateReportInput) => Promise<MovethewheelsReport>;
+  generateReport: (
+    reportId: string,
+    parameters?: Record<string, unknown>
+  ) => Promise<GeneratedReport>;
+}
+
+export function useReports(): UseReportsResult {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [reports, setReports] = useState<MovethewheelsReport[]>([]);
+  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 load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ movethewheelsReports: MovethewheelsReport[] }>(
+        graphQLOptions,
+        LIST_REPORTS_QUERY,
+        { pagination: { limit: 100, offset: 0 } }
+      );
+      setReports(data.movethewheelsReports);
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load reports'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const refetch = useCallback(() => {
+    void load();
+  }, [load]);
+
+  const createReport = useCallback(
+    async (input: CreateReportInput): Promise<MovethewheelsReport> => {
+      const data = await executeGraphQL<{ createMovethewheelsReport: MovethewheelsReport }>(
+        graphQLOptions,
+        CREATE_REPORT_MUTATION,
+        { input }
+      );
+      const created = data.createMovethewheelsReport;
+      setReports((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
+  const generateReport = useCallback(
+    async (reportId: string, parameters?: Record<string, unknown>): Promise<GeneratedReport> => {
+      const data = await executeGraphQL<{ generateMovethewheelsReport: GeneratedReport }>(
+        graphQLOptions,
+        GENERATE_REPORT_MUTATION,
+        { input: { reportId, parameters } }
+      );
+      const generated = data.generateMovethewheelsReport;
+      setReports((previous) =>
+        previous.map((item) => (item.id === reportId ? generated.report : item))
+      );
+      return generated;
+    },
+    [graphQLOptions]
+  );
+
+  return { reports, isLoading, error, refetch, createReport, generateReport };
+}

package/src/movethewheels/hooks/useSettings.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export type ModulePreferences = Record<string, unknown>;
+
+export interface ModuleSettings {
+  preferences: ModulePreferences;
+  updatedAt: string;
+  workspaceId: string;
+}
+
+const MODULE_SETTINGS_QUERY = `
+  query MovethewheelsModuleSettings {
+    moduleSettings {
+      preferences
+      updatedAt
+      workspaceId
+    }
+  }
+`;
+
+const UPDATE_MODULE_SETTINGS_MUTATION = `
+  mutation UpdateMovethewheelsModuleSettings($input: UpdateMovethewheelsModuleSettingsInput!) {
+    updateModuleSettings(input: $input) {
+      preferences
+      updatedAt
+      workspaceId
+    }
+  }
+`;
+
+interface UseModuleSettingsResult {
+  settings: ModuleSettings | null;
+  preferences: ModulePreferences;
+  isLoading: boolean;
+  isSaving: boolean;
+  error: Error | null;
+  refetch: () => void;
+  savePreferences: (preferences: ModulePreferences) => Promise<ModuleSettings>;
+}
+
+export function useModuleSettings(): UseModuleSettingsResult {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [settings, setSettings] = useState<ModuleSettings | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = 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 load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ moduleSettings: ModuleSettings }>(
+        graphQLOptions,
+        MODULE_SETTINGS_QUERY
+      );
+      setSettings(data.moduleSettings);
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load settings'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const refetch = useCallback(() => {
+    void load();
+  }, [load]);
+
+  const savePreferences = useCallback(
+    async (preferences: ModulePreferences): Promise<ModuleSettings> => {
+      setIsSaving(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ updateModuleSettings: ModuleSettings }>(
+          graphQLOptions,
+          UPDATE_MODULE_SETTINGS_MUTATION,
+          { input: { preferences } }
+        );
+        setSettings(data.updateModuleSettings);
+        return data.updateModuleSettings;
+      } catch (fetchError) {
+        const normalized =
+          fetchError instanceof Error ? fetchError : new Error('Failed to save settings');
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [graphQLOptions]
+  );
+
+  return {
+    settings,
+    preferences: settings?.preferences ?? {},
+    isLoading,
+    isSaving,
+    error,
+    refetch,
+    savePreferences,
+  };
+}

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -16,14 +16,22 @@ import {
   ScrollArea,
 } from '../components/ui';
 import { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useAssistant } from '../hooks/useAssistant';
+
+interface ChatMessage {
+  role: 'assistant' | 'user';
+  content: string;
+  isError?: boolean;
+}
 
 export default function AIAssistantPage() {
+  const { ask, isLoading } = useAssistant();
   const [message, setMessage] = useState('');
-  const [messages, setMessages] = useState([
+  const [messages, setMessages] = useState<ChatMessage[]>([
     {
       role: 'assistant',
       content:
-        "Hello! I'm your logistics AI assistant. I can help you with route optimization, demand forecasting, fleet management insights, and more. How can I help you today?",
+        "Hello! I'm your logistics assistant. Ask me about your orders, deliveries, fleet or inventory and I'll answer from your live operational data.",
     },
   ]);
 
@@ -42,17 +50,31 @@ export default function AIAssistantPage() {
     'Natural Language Queries - Ask questions in plain English',
   ];
 
-  const handleSend = () => {
-    if (!message.trim()) return;
-    setMessages([
-      ...messages,
-      { role: 'user', content: message },
-      {
-        role: 'assistant',
-        content: `I understand you're asking about "${message}". Let me analyze that for you...\n\nBased on your current data, here are my findings:\n\n1. Your fleet utilization is currently at 78%, which is within the optimal range.\n2. There are 5 pending orders that could benefit from route consolidation.\n3. Estimated fuel savings from optimization: $120/day.\n\nWould you like me to generate a detailed report or take any action?`,
-      },
-    ]);
+  const submit = async (question: string) => {
+    const trimmed = question.trim();
+    if (!trimmed || isLoading) return;
     setMessage('');
+    setMessages((previous) => [...previous, { role: 'user', content: trimmed }]);
+    try {
+      const result = await ask(trimmed);
+      setMessages((previous) => [...previous, { role: 'assistant', content: result.answer }]);
+    } catch (fetchError) {
+      setMessages((previous) => [
+        ...previous,
+        {
+          role: 'assistant',
+          content:
+            fetchError instanceof Error
+              ? `Sorry, I couldn't answer that: ${fetchError.message}`
+              : "Sorry, I couldn't reach the assistant. Please try again.",
+          isError: true,
+        },
+      ]);
+    }
+  };
+
+  const handleSend = () => {
+    void submit(message);
   };
 
   return (
@@ -84,12 +106,26 @@ export default function AIAssistantPage() {
                     className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                   >
                     <div
-                      className={`max-w-[80%] p-3 rounded-lg ${msg.role === 'user' ? 'bg-action-primary-bg text-action-primary-text' : 'bg-bg-sunken'}`}
+                      className={`max-w-[80%] p-3 rounded-lg ${
+                        msg.role === 'user'
+                          ? 'bg-action-primary-bg text-action-primary-text'
+                          : msg.isError
+                            ? 'bg-status-error-bg-subtle text-status-error-text'
+                            : 'bg-bg-sunken'
+                      }`}
                     >
                       <p className="whitespace-pre-line text-sm">{msg.content}</p>
                     </div>
                   </div>
                 ))}
+                {isLoading && (
+                  <div className="flex justify-start" aria-live="polite">
+                    <div className="max-w-[80%] p-3 rounded-lg bg-bg-sunken flex items-center gap-2">
+                      <Sparkles size={14} className="text-primary motion-safe:animate-pulse" />
+                      <span className="text-sm text-text-secondary">Analyzing your data…</span>
+                    </div>
+                  </div>
+                )}
               </div>
             </ScrollArea>
             <div className="p-4 border-t">
@@ -98,9 +134,10 @@ export default function AIAssistantPage() {
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
                   placeholder="Ask me anything about your logistics operations..."
+                  disabled={isLoading}
                   onKeyPress={(e) => e.key === 'Enter' && handleSend()}
                 />
-                <Button onClick={handleSend}>
+                <Button onClick={handleSend} disabled={isLoading || !message.trim()}>
                   <Send size={16} />
                 </Button>
               </div>
@@ -119,7 +156,8 @@ export default function AIAssistantPage() {
                   key={i}
                   variant="outline"
                   className="w-full justify-start text-left h-auto py-3"
-                  onClick={() => setMessage(s.text)}
+                  disabled={isLoading}
+                  onClick={() => void submit(s.text)}
                 >
                   <s.icon size={16} className="mr-2 flex-shrink-0" />
                   <span className="flex-1">{s.text}</span>

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -4,14 +4,14 @@
 
 import { BarChart3, TrendingUp, Package, Truck, DollarSign, Users } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
-import { MetricCard, MetricGrid } from '../components/MetricCard';
-import { Card, CardContent, CardHeader, CardTitle, Progress } from '../components/ui';
+import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
+import { Card, CardContent, CardHeader, CardTitle, Progress, Button } from '../components/ui';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
 import { formatCurrency } from '../utils/formatters';
 
 export default function AnalyticsPage() {
-  const { analytics } = useAnalytics();
+  const { analytics, isLoading, error, refetch } = useAnalytics();
   const { orderData } = useOrderAnalytics();
   const { fleetData } = useFleetAnalytics();
 
@@ -27,43 +27,55 @@ export default function AnalyticsPage() {
         to invest — whether that's more vehicles, better routes, or new customers.
       </PagePurpose>
 
-      <MetricGrid columns={5}>
-        <MetricCard
-          label="Total Orders"
-          value={analytics.overview.totalOrders.toLocaleString()}
-          icon={<Package size={20} />}
-          change="+8.2%"
-          changeType="positive"
-          trend="up"
-        />
-        <MetricCard
-          treatment="glass"
-          glow
-          label="Revenue"
-          value={formatCurrency(analytics.overview.totalRevenue)}
-          icon={<DollarSign size={20} />}
-          change="+12.5%"
-          changeType="positive"
-          trend="up"
-        />
-        <MetricCard
-          label="Active Vehicles"
-          value={analytics.overview.activeVehicles}
-          icon={<Truck size={20} />}
-        />
-        <MetricCard
-          label="On-Time Rate"
-          value={`${analytics.overview.onTimeDeliveryRate}%`}
-          icon={<TrendingUp size={20} />}
-          changeType={analytics.overview.onTimeDeliveryRate >= 90 ? 'positive' : 'negative'}
-        />
-        <MetricCard
-          label="Satisfaction"
-          value={analytics.overview.customerSatisfaction.toFixed(1)}
-          icon={<Users size={20} />}
-          subtitle="out of 5"
-        />
-      </MetricGrid>
+      {error && !isLoading ? (
+        <Card className="border-status-error-border">
+          <CardContent className="p-6 text-center space-y-3">
+            <p className="text-status-error-text font-medium">Couldn&apos;t load analytics</p>
+            <p className="text-sm text-text-secondary">{error.message}</p>
+            <Button variant="outline" onClick={refetch}>
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      ) : isLoading ? (
+        <MetricGrid columns={5}>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <MetricCardSkeleton key={i} />
+          ))}
+        </MetricGrid>
+      ) : (
+        <MetricGrid columns={5}>
+          <MetricCard
+            label="Total Orders"
+            value={analytics.overview.totalOrders.toLocaleString()}
+            icon={<Package size={20} />}
+          />
+          <MetricCard
+            treatment="glass"
+            glow
+            label="Revenue"
+            value={formatCurrency(analytics.overview.totalRevenue)}
+            icon={<DollarSign size={20} />}
+          />
+          <MetricCard
+            label="Active Vehicles"
+            value={analytics.overview.activeVehicles}
+            icon={<Truck size={20} />}
+          />
+          <MetricCard
+            label="On-Time Rate"
+            value={`${analytics.overview.onTimeDeliveryRate.toFixed(1)}%`}
+            icon={<TrendingUp size={20} />}
+            changeType={analytics.overview.onTimeDeliveryRate >= 90 ? 'positive' : 'neutral'}
+          />
+          <MetricCard
+            label="Satisfaction"
+            value={analytics.overview.customerSatisfaction.toFixed(1)}
+            icon={<Users size={20} />}
+            subtitle="out of 5"
+          />
+        </MetricGrid>
+      )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
@@ -149,45 +161,36 @@ export default function AnalyticsPage() {
               </div>
               <Progress value={fleetData.vehicleUtilization} />
             </div>
-            <div>
-              <div className="flex justify-between text-sm mb-1">
-                <span>Avg Fuel Level</span>
-                <span>{fleetData.avgFuelLevel.toFixed(0)}%</span>
+            {fleetData.vehiclesByType.length > 0 && (
+              <div className="pt-2">
+                <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
+                {fleetData.vehiclesByType.map(({ type, count }) => (
+                  <div key={type} className="flex justify-between text-sm py-1">
+                    <span className="capitalize">{type}</span>
+                    <span className="font-medium">{count}</span>
+                  </div>
+                ))}
               </div>
-              <Progress value={fleetData.avgFuelLevel} />
-            </div>
-            <div className="pt-2">
-              <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
-              {fleetData.vehiclesByType.map(({ type, count }) => (
-                <div key={type} className="flex justify-between text-sm py-1">
-                  <span className="capitalize">{type}</span>
-                  <span className="font-medium">{count}</span>
-                </div>
-              ))}
-            </div>
+            )}
           </CardContent>
         </Card>
 
         {/* Performance Metrics — the page's single emphasis zone */}
         <EmphasisPanel className="space-y-4">
           <h2 className="text-base font-semibold text-text-primary">Performance Metrics</h2>
-          <div>
-            <p className="text-sm text-text-secondary">On-Time Pickup</p>
-            <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
-          </div>
           <div>
             <p className="text-sm text-text-secondary">On-Time Delivery</p>
-            <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
+            <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery.toFixed(1)}%</p>
           </div>
           <div>
-            <p className="text-sm text-text-secondary">Damaged Items</p>
-            <p className="text-2xl font-bold text-status-success-text">
-              {analytics.performance.damagedItems}%
+            <p className="text-sm text-text-secondary">Customer Satisfaction</p>
+            <p className="text-2xl font-bold">
+              {analytics.overview.customerSatisfaction.toFixed(1)}/5
             </p>
           </div>
           <div>
             <p className="text-sm text-text-secondary">Driver Ratings</p>
-            <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
+            <p className="text-2xl font-bold">{analytics.performance.driverRatings.toFixed(1)}/5</p>
           </div>
         </EmphasisPanel>
       </div>

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -78,7 +78,7 @@ export default function CustomerDetailsPage() {
             {customer.isActive ? 'Active' : 'Inactive'}
           </Badge>
           <div className="flex items-center gap-1">
-            <Star size={16} className="text-yellow-500 fill-yellow-500" />
+            <Star size={16} className="text-status-warning-text fill-current" />
             <span className="font-medium">{customer.rating.toFixed(1)}</span>
           </div>
         </div>

package/src/movethewheels/pages/CustomersPage.tsx

@@ -59,7 +59,7 @@ export default function CustomersPage() {
       header: 'Rating',
       cell: (row) => (
         <div className="flex items-center gap-1">
-          <Star size={14} className="text-yellow-500 fill-yellow-500" />
+          <Star size={14} className="text-status-warning-text fill-current" />
           <span>{row.rating.toFixed(1)}</span>
         </div>
       ),