@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -0,0 +1,325 @@
+/**
+ * Live Tracking Page
+ *
+ * Real-time map view of all active deliveries.
+ */
+
+import { useState } from 'react';
+import { MapPin, Truck, Package, RefreshCw, List, Map } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { StatusBadge } from '../components/StatusBadge';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  ScrollArea,
+} from '../components/ui';
+import { useLiveTracking, useTrackingAlerts } from '../hooks/useTracking';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function LiveTrackingPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { activeDeliveries, isLoading, refetch } = useLiveTracking();
+  const { unacknowledgedAlerts } = useTrackingAlerts();
+  const [viewMode, setViewMode] = useState<'map' | 'list'>('map');
+  const [selectedDelivery, setSelectedDelivery] = useState<string | null>(null);
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  const selected = selectedDelivery
+    ? activeDeliveries.find((d) => d.order?.id === selectedDelivery)
+    : null;
+
+  return (
+    <PageLayout
+      title="Live Tracking"
+      subtitle={`${activeDeliveries.length} active deliveries`}
+      icon={<MapPin size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={refetch} disabled={isLoading}>
+            <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
+            Refresh
+          </Button>
+          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'map' | 'list')}>
+            <TabsList>
+              <TabsTrigger value="map">
+                <Map size={16} />
+              </TabsTrigger>
+              <TabsTrigger value="list">
+                <List size={16} />
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      }
+    >
+      {/* Quick Stats */}
+      <MetricGrid columns={4}>
+        <MetricCard
+          size="sm"
+          label="Active Deliveries"
+          value={activeDeliveries.length}
+          icon={<Truck size={18} />}
+        />
+        <MetricCard
+          size="sm"
+          label="In Transit"
+          value={activeDeliveries.filter((d) => d.order?.status === 'in_transit').length}
+          icon={<Package size={18} />}
+        />
+        <MetricCard
+          size="sm"
+          label="Out for Delivery"
+          value={activeDeliveries.filter((d) => d.order?.status === 'out_for_delivery').length}
+          icon={<MapPin size={18} />}
+        />
+        <MetricCard
+          size="sm"
+          label="Alerts"
+          value={unacknowledgedAlerts.length}
+          changeType={unacknowledgedAlerts.length > 0 ? 'negative' : 'neutral'}
+        />
+      </MetricGrid>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Map / List View */}
+        <div className="lg:col-span-2">
+          {viewMode === 'map' ? (
+            <Card className="h-[600px]">
+              <CardContent className="p-0 h-full">
+                <div className="w-full h-full bg-muted rounded-lg flex items-center justify-center">
+                  <div className="text-center text-muted-foreground">
+                    <MapPin size={64} className="mx-auto mb-4 opacity-50" />
+                    <p className="text-lg font-medium">Map View</p>
+                    <p className="text-sm">
+                      Interactive map showing {activeDeliveries.length} active deliveries
+                    </p>
+                    <p className="text-xs mt-2">
+                      (Map integration with Mapbox/Google Maps would go here)
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>Active Deliveries</CardTitle>
+              </CardHeader>
+              <CardContent className="p-0">
+                <ScrollArea className="h-[550px]">
+                  <div className="divide-y">
+                    {activeDeliveries.map((delivery) => {
+                      if (!delivery.order) {
+                        return null;
+                      }
+
+                      return (
+                        <div
+                          key={delivery.order.id}
+                          className={`p-4 hover:bg-muted/50 cursor-pointer transition-colors ${
+                            selectedDelivery === delivery.order.id ? 'bg-muted/50' : ''
+                          }`}
+                          onClick={() => setSelectedDelivery(delivery.order.id)}
+                        >
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <div className="flex items-center gap-2 mb-1">
+                                <span className="font-medium">{delivery.order.orderNumber}</span>
+                                <StatusBadge
+                                  status={delivery.order.status}
+                                  type="order"
+                                  size="sm"
+                                />
+                              </div>
+                              <p className="text-sm text-muted-foreground">
+                                {delivery.order.customerInfo.name}
+                              </p>
+                              <p className="text-sm text-muted-foreground">
+                                {delivery.driver?.fullName || 'Unassigned'}
+                                {delivery.vehicle && ` - ${delivery.vehicle.vehicleNumber}`}
+                              </p>
+                            </div>
+                            <div className="text-right">
+                              <p className="text-sm font-medium">
+                                ETA:{' '}
+                                {delivery.estimatedArrival
+                                  ? formatDate(delivery.estimatedArrival, 'time')
+                                  : 'N/A'}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {delivery.tracking?.currentLocation.address ||
+                                  'Location updating...'}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                    {activeDeliveries.length === 0 && (
+                      <div className="p-8 text-center text-muted-foreground">
+                        No active deliveries
+                      </div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Selected Delivery Details */}
+          {selected ? (
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>Delivery Details</CardTitle>
+                  <Button variant="ghost" size="sm" onClick={() => setSelectedDelivery(null)}>
+                    Clear
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">Order</p>
+                  <p className="font-medium">{selected.order?.orderNumber ?? '-'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Customer</p>
+                  <p className="font-medium">{selected.order?.customerInfo.name ?? '-'}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {selected.order?.customerInfo.phone ?? '-'}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="font-medium">{selected.driver?.fullName || 'Unassigned'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="font-medium">
+                    {selected.vehicle
+                      ? `${selected.vehicle.vehicleNumber} - ${selected.vehicle.make} ${selected.vehicle.model}`
+                      : 'Not assigned'}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Current Location</p>
+                  <p className="text-sm">
+                    {selected.tracking?.currentLocation.address || 'Updating...'}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Estimated Arrival</p>
+                  <p className="font-medium">
+                    {selected.estimatedArrival
+                      ? formatDate(selected.estimatedArrival, 'full')
+                      : 'Calculating...'}
+                  </p>
+                </div>
+                <div className="pt-2 space-y-2">
+                  <Button
+                    className="w-full"
+                    onClick={() => selected.order && goTo(`orders/${selected.order.id}`)}
+                    disabled={!selected.order}
+                  >
+                    View Order
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => selected.order && goTo(`tracking?order=${selected.order.id}`)}
+                    disabled={!selected.order}
+                  >
+                    Track Details
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardContent className="p-8 text-center text-muted-foreground">
+                <MapPin size={32} className="mx-auto mb-2 opacity-50" />
+                <p>Select a delivery to see details</p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Alerts */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                Alerts
+                {unacknowledgedAlerts.length > 0 && (
+                  <Badge variant="destructive">{unacknowledgedAlerts.length}</Badge>
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {unacknowledgedAlerts.length > 0 ? (
+                <div className="space-y-3">
+                  {unacknowledgedAlerts.slice(0, 5).map((alert) => (
+                    <div
+                      key={alert.id}
+                      className={`p-3 rounded-lg text-sm ${
+                        alert.severity === 'critical' || alert.severity === 'high'
+                          ? 'bg-red-50 dark:bg-red-900/20'
+                          : 'bg-yellow-50 dark:bg-yellow-900/20'
+                      }`}
+                    >
+                      <p className="font-medium">{alert.message}</p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {formatDate(alert.timestamp, 'relative')}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center text-muted-foreground py-4">
+                  <p className="text-sm">No active alerts</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Quick Actions */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Quick Actions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Button variant="outline" className="w-full" onClick={() => goTo('orders/new')}>
+                <Package size={16} />
+                Create Order
+              </Button>
+              <Button variant="outline" className="w-full" onClick={() => goTo('routes')}>
+                <MapPin size={16} />
+                Manage Routes
+              </Button>
+              <Button variant="outline" className="w-full" onClick={() => goTo('fleet')}>
+                <Truck size={16} />
+                Fleet Status
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -0,0 +1,235 @@
+/**
+ * Marketplace Page
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Store, Star, MapPin, Clock, Filter, Search } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Card, CardContent, CardHeader, CardTitle, Button, Badge, Input } from '../components/ui';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatCurrency } from '../utils/formatters';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+interface ApiServiceProvider {
+  id: string;
+  name: string;
+  type: string;
+  description?: string | null;
+  rating?: number | null;
+  isVerified: boolean;
+  isActive: boolean;
+  services?: unknown;
+  contactInfo?: unknown;
+}
+
+interface ApiServiceOffering {
+  id: string;
+  providerId: string;
+  name: string;
+  description?: string | null;
+  category?: string | null;
+  price: number;
+  currency: string;
+  availability?: unknown;
+  provider?: {
+    id: string;
+    name: string;
+    type: string;
+    rating?: number | null;
+  } | null;
+}
+
+const PROVIDERS_QUERY = `
+  query ListServiceProviders($filter: ServiceProviderFilterInput, $pagination: PaginationInput) {
+    serviceProviders(filter: $filter, pagination: $pagination) {
+      id
+      name
+      type
+      description
+      rating
+      isVerified
+      isActive
+      services
+      contactInfo
+    }
+  }
+`;
+
+const OFFERINGS_QUERY = `
+  query ListServiceOfferings($filter: ServiceOfferingFilterInput, $pagination: PaginationInput) {
+    serviceOfferings(filter: $filter, pagination: $pagination) {
+      id
+      providerId
+      name
+      description
+      category
+      price
+      currency
+      availability
+      provider {
+        id
+        name
+        type
+        rating
+      }
+    }
+  }
+`;
+
+export default function MarketplacePage() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [providers, setProviders] = useState<ApiServiceProvider[]>([]);
+  const [offerings, setOfferings] = useState<ApiServiceOffering[]>([]);
+  const [search, setSearch] = useState('');
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const load = useCallback(async () => {
+    const [providersData, offeringsData] = await Promise.all([
+      executeGraphQL<{ serviceProviders: ApiServiceProvider[] }>(graphQLOptions, PROVIDERS_QUERY, {
+        pagination: { limit: 200, offset: 0 },
+      }),
+      executeGraphQL<{ serviceOfferings: ApiServiceOffering[] }>(graphQLOptions, OFFERINGS_QUERY, {
+        pagination: { limit: 200, offset: 0 },
+      }),
+    ]);
+
+    setProviders(providersData.serviceProviders);
+    setOfferings(offeringsData.serviceOfferings);
+  }, [graphQLOptions]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const filteredProviders = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return providers;
+    return providers.filter(
+      (provider) =>
+        provider.name.toLowerCase().includes(term) ||
+        (provider.description ?? '').toLowerCase().includes(term) ||
+        provider.type.toLowerCase().includes(term)
+    );
+  }, [providers, search]);
+
+  const filteredOfferings = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return offerings;
+    return offerings.filter(
+      (offering) =>
+        offering.name.toLowerCase().includes(term) ||
+        (offering.description ?? '').toLowerCase().includes(term) ||
+        (offering.category ?? '').toLowerCase().includes(term)
+    );
+  }, [offerings, search]);
+
+  return (
+    <PageLayout
+      title="Marketplace"
+      subtitle="Find logistics service providers"
+      icon={<Store size={24} />}
+      headerActions={
+        <Button variant="outline">
+          <Filter size={16} /> Filters
+        </Button>
+      }
+    >
+      <Card>
+        <CardContent className="p-4">
+          <div className="relative">
+            <Search
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              size={20}
+            />
+            <Input
+              placeholder="Search services, providers, locations..."
+              className="pl-10"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-4">
+          <h3 className="font-semibold">Service Providers ({filteredProviders.length})</h3>
+          {filteredProviders.map((provider) => (
+            <Card key={provider.id} className="hover:shadow-md transition-shadow cursor-pointer">
+              <CardContent className="p-6">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h4 className="font-semibold text-lg">{provider.name}</h4>
+                      {provider.isVerified && <Badge variant="default">Verified</Badge>}
+                      <Badge variant={provider.isActive ? 'default' : 'secondary'}>
+                        {provider.isActive ? 'active' : 'inactive'}
+                      </Badge>
+                    </div>
+                    <p className="text-muted-foreground mt-1">{provider.description}</p>
+                    <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Star size={14} className="text-yellow-500 fill-yellow-500" />{' '}
+                        {provider.rating ?? 0}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <MapPin size={14} /> {provider.type}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock size={14} /> Listed
+                      </span>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-muted-foreground">Services</p>
+                    <p className="text-lg font-bold">
+                      {Array.isArray(provider.services) ? provider.services.length : 0}
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="font-semibold">Popular Services</h3>
+          {filteredOfferings.map((service) => (
+            <Card key={service.id}>
+              <CardHeader>
+                <CardTitle className="text-base">{service.name}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground mb-3">{service.description}</p>
+                <div className="flex flex-wrap gap-1 mb-3">
+                  <Badge variant="outline" className="text-xs">
+                    {service.category ?? 'general'}
+                  </Badge>
+                  <Badge variant="outline" className="text-xs">
+                    {service.provider?.name ?? 'provider'}
+                  </Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="font-bold">{formatCurrency(service.price)}</span>
+                  <span className="text-sm text-muted-foreground">{service.currency}</span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}