@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -0,0 +1,160 @@
+/**
+ * AI Assistant Page
+ */
+
+import { useState } from 'react';
+import { Bot, Send, Sparkles, Lightbulb, TrendingUp, Route, AlertCircle } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Input,
+  Badge,
+  ScrollArea,
+} from '../components/ui';
+
+export default function AIAssistantPage() {
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState([
+    {
+      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?",
+    },
+  ]);
+
+  const suggestions = [
+    { icon: Route, text: "Optimize today's delivery routes", category: 'Route Planning' },
+    { icon: TrendingUp, text: 'Show demand forecast for next week', category: 'Analytics' },
+    { icon: AlertCircle, text: 'Identify potential delivery delays', category: 'Alerts' },
+    { icon: Lightbulb, text: 'Suggest fleet efficiency improvements', category: 'Insights' },
+  ];
+
+  const capabilities = [
+    'Route Optimization - Find the most efficient delivery routes',
+    'Demand Forecasting - Predict order volumes and trends',
+    'Fleet Analysis - Insights on vehicle and driver performance',
+    'Cost Optimization - Identify ways to reduce operational costs',
+    '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?`,
+      },
+    ]);
+    setMessage('');
+  };
+
+  return (
+    <PageLayout
+      title="AI Assistant"
+      subtitle="Intelligent logistics support"
+      icon={<Bot size={24} />}
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-4">
+          <Card className="h-[600px] flex flex-col">
+            <CardHeader className="border-b">
+              <CardTitle className="flex items-center gap-2">
+                <Sparkles size={18} className="text-primary" /> Chat with AI
+              </CardTitle>
+            </CardHeader>
+            <ScrollArea className="flex-1 p-4">
+              <div className="space-y-4">
+                {messages.map((msg, i) => (
+                  <div
+                    key={i}
+                    className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div
+                      className={`max-w-[80%] p-3 rounded-lg ${msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
+                    >
+                      <p className="whitespace-pre-line text-sm">{msg.content}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+            <div className="p-4 border-t">
+              <div className="flex gap-2">
+                <Input
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  placeholder="Ask me anything about your logistics operations..."
+                  onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+                />
+                <Button onClick={handleSend}>
+                  <Send size={16} />
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Quick Actions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {suggestions.map((s, i) => (
+                <Button
+                  key={i}
+                  variant="outline"
+                  className="w-full justify-start text-left h-auto py-3"
+                  onClick={() => setMessage(s.text)}
+                >
+                  <s.icon size={16} className="mr-2 flex-shrink-0" />
+                  <span className="flex-1">{s.text}</span>
+                  <Badge variant="secondary" className="text-xs">
+                    {s.category}
+                  </Badge>
+                </Button>
+              ))}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Capabilities</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2 text-sm">
+                {capabilities.map((cap, i) => (
+                  <li key={i} className="flex items-start gap-2">
+                    <Sparkles size={14} className="text-primary mt-0.5 flex-shrink-0" />
+                    <span>{cap}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-primary/5 border-primary/20">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Lightbulb size={20} className="text-primary flex-shrink-0" />
+                <div>
+                  <p className="font-medium text-sm">Pro Tip</p>
+                  <p className="text-xs text-muted-foreground">
+                    You can ask complex questions like "What would happen if I added 2 more vehicles
+                    to my fleet?" for scenario analysis.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -0,0 +1,190 @@
+/**
+ * Analytics Page
+ */
+
+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 { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
+import { formatCurrency } from '../utils/formatters';
+
+export default function AnalyticsPage() {
+  const { analytics } = useAnalytics();
+  const { orderData } = useOrderAnalytics();
+  const { fleetData } = useFleetAnalytics();
+
+  return (
+    <PageLayout
+      title="Analytics"
+      subtitle="Business performance and insights"
+      icon={<BarChart3 size={24} />}
+    >
+      <MetricGrid columns={5}>
+        <MetricCard
+          label="Total Orders"
+          value={analytics.overview.totalOrders.toLocaleString()}
+          icon={<Package size={20} />}
+          change="+8.2%"
+          changeType="positive"
+          trend="up"
+        />
+        <MetricCard
+          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>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Order Trends</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
+              <div className="text-center text-muted-foreground">
+                <BarChart3 size={48} className="mx-auto mb-2 opacity-50" />
+                <p>Order trend chart</p>
+                <p className="text-xs">(Chart library integration needed)</p>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-4 gap-2">
+              {orderData.trends.slice(-4).map((t) => (
+                <div key={t.date} className="text-center p-2 bg-muted/50 rounded">
+                  <p className="text-xs text-muted-foreground">
+                    {t.date.split('-').slice(1).join('/')}
+                  </p>
+                  <p className="font-medium">{t.orders}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue Trends</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
+              <div className="text-center text-muted-foreground">
+                <TrendingUp size={48} className="mx-auto mb-2 opacity-50" />
+                <p>Revenue trend chart</p>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-5 gap-2">
+              {analytics.trends.revenue.map((r) => (
+                <div key={r.month} className="text-center p-2 bg-muted/50 rounded">
+                  <p className="text-xs text-muted-foreground">{r.month}</p>
+                  <p className="font-medium text-sm">{formatCurrency(r.revenue / 1000)}k</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Orders by Status</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {orderData.byStatus
+              .filter((s) => s.count > 0)
+              .map(({ status, count }) => (
+                <div key={status} className="flex items-center justify-between">
+                  <span className="text-sm capitalize">{status.replace('_', ' ')}</span>
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={(count / analytics.overview.totalOrders) * 100}
+                      className="w-20 h-2"
+                    />
+                    <span className="font-medium w-8 text-right">{count}</span>
+                  </div>
+                </div>
+              ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Fleet Performance</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <div className="flex justify-between text-sm mb-1">
+                <span>Vehicle Utilization</span>
+                <span>{fleetData.vehicleUtilization.toFixed(0)}%</span>
+              </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>
+              </div>
+              <Progress value={fleetData.avgFuelLevel} />
+            </div>
+            <div className="pt-2">
+              <p className="text-sm text-muted-foreground 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>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Performance Metrics</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <p className="text-sm text-muted-foreground">On-Time Pickup</p>
+              <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">On-Time Delivery</p>
+              <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Damaged Items</p>
+              <p className="text-2xl font-bold text-green-600">
+                {analytics.performance.damagedItems}%
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Driver Ratings</p>
+              <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}