@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/TrackingPage.tsx

@@ -0,0 +1,419 @@
+/**
+ * Tracking Page
+ *
+ * Track orders by tracking number or order ID.
+ */
+
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { MapPin, Search, Package, Truck, Clock, CheckCircle, AlertCircle } from 'lucide-react';
+import { PageLayout, EmptyState } from '../components/PageLayout';
+import { StatusBadge } from '../components/StatusBadge';
+import { Card, CardContent, CardHeader, CardTitle, Button, Input } from '../components/ui';
+import { useOrderTracking } from '../hooks/useTracking';
+import { formatDate, formatAddress } from '../utils/formatters';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
+import { joinPath } from '../utils/navigation';
+
+export default function TrackingPage() {
+  const { t: translate } = useI18n();
+  const t = (key: string, fallback: string): string => {
+    const value = translate(key);
+    return value === key ? fallback : value;
+  };
+  const { basePath, navigate } = useMoveTheWheels();
+  const [searchParams] = useSearchParams();
+  const initialOrderId = searchParams.get('order') || '';
+  const [trackingInput, setTrackingInput] = useState(initialOrderId);
+  const [searchedOrderId, setSearchedOrderId] = useState(initialOrderId);
+
+  const { tracking, order, isLoading, error } = useOrderTracking(searchedOrderId || undefined);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSearchedOrderId(trackingInput);
+  };
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  return (
+    <PageLayout
+      title={t('movethewheels.tracking.title', 'Track Shipment')}
+      subtitle={t(
+        'movethewheels.tracking.subtitle',
+        'Enter a tracking number or order ID to track your shipment'
+      )}
+      icon={<MapPin size={24} />}
+      headerActions={
+        <Button variant="outline" onClick={() => goTo('tracking/live')}>
+          <MapPin size={16} />
+          {t('movethewheels.tracking.actions.liveMapView', 'Live Map View')}
+        </Button>
+      }
+    >
+      {/* Search Form */}
+      <Card>
+        <CardContent className="p-6">
+          <form onSubmit={handleSearch} className="flex gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+              <Input
+                value={trackingInput}
+                onChange={(e) => setTrackingInput(e.target.value)}
+                placeholder={t(
+                  'movethewheels.tracking.search.placeholder',
+                  'Enter tracking number or order ID (e.g., order-1 or TRK123456789)'
+                )}
+                className="pl-10 h-12 text-lg"
+              />
+            </div>
+            <Button type="submit" size="lg" disabled={!trackingInput || isLoading}>
+              {isLoading
+                ? t('movethewheels.tracking.search.searching', 'Searching...')
+                : t('movethewheels.tracking.search.track', 'Track')}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* Error State */}
+      {error && (
+        <Card className="border-destructive">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-4">
+              <AlertCircle className="w-8 h-8 text-destructive" />
+              <div>
+                <p className="font-medium text-destructive">
+                  {t('movethewheels.tracking.error.title', 'Unable to find shipment')}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t(
+                    'movethewheels.tracking.error.description',
+                    'Please check the tracking number and try again'
+                  )}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* No Search Yet */}
+      {!searchedOrderId && !error && (
+        <EmptyState
+          icon={<Package size={48} />}
+          title={t('movethewheels.tracking.empty.title', 'Enter a tracking number')}
+          description={t(
+            'movethewheels.tracking.empty.description',
+            'Use your tracking number or order ID to see the current status of your shipment'
+          )}
+        />
+      )}
+
+      {/* Tracking Results */}
+      {order && tracking && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Tracking Info */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Status Card */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="flex items-center gap-2">
+                    <Package size={20} />
+                    {t('movethewheels.tracking.orderLabel', 'Order')} {order.orderNumber}
+                  </CardTitle>
+                  <StatusBadge status={order.status} type="order" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('movethewheels.tracking.details.trackingNumber', 'Tracking Number')}
+                    </p>
+                    <p className="font-mono font-medium">{order.trackingNumber}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('movethewheels.tracking.details.estimatedDelivery', 'Estimated Delivery')}
+                    </p>
+                    <p className="font-medium">
+                      {tracking.estimatedArrival
+                        ? formatDate(tracking.estimatedArrival, 'full')
+                        : order.scheduledDelivery
+                          ? formatDate(order.scheduledDelivery, 'full')
+                          : t('movethewheels.tracking.details.tbd', 'TBD')}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('movethewheels.tracking.details.items', 'Items')}
+                    </p>
+                    <p className="font-medium">
+                      {order.items.length}{' '}
+                      {t('movethewheels.tracking.details.itemsSuffix', 'items')}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('movethewheels.tracking.details.lastUpdated', 'Last Updated')}
+                    </p>
+                    <p className="font-medium">{formatDate(tracking.lastUpdated, 'relative')}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Progress Timeline */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Clock size={18} />
+                  {t('movethewheels.tracking.progress.title', 'Shipment Progress')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="relative">
+                  {/* Progress Steps */}
+                  <div className="flex justify-between mb-4">
+                    {[
+                      {
+                        status: 'confirmed',
+                        label: t('movethewheels.tracking.progress.confirmed', 'Confirmed'),
+                        icon: CheckCircle,
+                      },
+                      {
+                        status: 'picked_up',
+                        label: t('movethewheels.tracking.progress.pickedUp', 'Picked Up'),
+                        icon: Package,
+                      },
+                      {
+                        status: 'in_transit',
+                        label: t('movethewheels.tracking.progress.inTransit', 'In Transit'),
+                        icon: Truck,
+                      },
+                      {
+                        status: 'delivered',
+                        label: t('movethewheels.tracking.progress.delivered', 'Delivered'),
+                        icon: MapPin,
+                      },
+                    ].map((step, index) => {
+                      const statusOrder = [
+                        'pending',
+                        'confirmed',
+                        'assigned',
+                        'picked_up',
+                        'in_transit',
+                        'out_for_delivery',
+                        'delivered',
+                      ];
+                      const currentIndex = statusOrder.indexOf(order.status);
+                      const stepIndex = statusOrder.indexOf(step.status);
+                      const isComplete = stepIndex <= currentIndex;
+                      const isCurrent =
+                        step.status === order.status ||
+                        (order.status === 'out_for_delivery' && step.status === 'in_transit');
+
+                      return (
+                        <div key={step.status} className="flex flex-col items-center flex-1">
+                          <div
+                            className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                              isComplete
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-muted text-muted-foreground'
+                            } ${isCurrent ? 'ring-4 ring-primary/20' : ''}`}
+                          >
+                            <step.icon size={20} />
+                          </div>
+                          <p
+                            className={`text-xs mt-2 text-center ${isComplete ? 'font-medium' : 'text-muted-foreground'}`}
+                          >
+                            {step.label}
+                          </p>
+                          {index < 3 && (
+                            <div
+                              className={`absolute top-5 h-0.5 ${
+                                isComplete ? 'bg-primary' : 'bg-muted'
+                              }`}
+                              style={{
+                                left: `calc(${(index + 0.5) * 25}% + 20px)`,
+                                width: 'calc(25% - 40px)',
+                              }}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Timeline Events */}
+                <div className="mt-8 space-y-4">
+                  {order.timeline
+                    .slice()
+                    .reverse()
+                    .map((event, index) => (
+                      <div key={index} className="flex gap-4">
+                        <div className="relative">
+                          <div
+                            className={`w-3 h-3 rounded-full ${index === 0 ? 'bg-primary' : 'bg-muted'}`}
+                          />
+                          {index < order.timeline.length - 1 && (
+                            <div className="absolute top-3 left-1.5 w-px h-8 -ml-px bg-border" />
+                          )}
+                        </div>
+                        <div className="flex-1 pb-4">
+                          <div className="flex items-center gap-2">
+                            <StatusBadge status={event.status} type="order" size="sm" />
+                            <span className="text-sm text-muted-foreground">
+                              {formatDate(event.timestamp, 'full')}
+                            </span>
+                          </div>
+                          {event.notes && <p className="text-sm mt-1">{event.notes}</p>}
+                          {event.location && (
+                            <p className="text-xs text-muted-foreground mt-1">
+                              <MapPin size={12} className="inline mr-1" />
+                              {formatAddress(event.location)}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Alerts */}
+            {tracking.alerts && tracking.alerts.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <AlertCircle size={18} />
+                    {t('movethewheels.tracking.alerts.title', 'Alerts')}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    {tracking.alerts.map((alert) => (
+                      <div
+                        key={alert.id}
+                        className={`flex items-start gap-3 p-3 rounded-lg ${
+                          alert.severity === 'critical'
+                            ? 'bg-red-50 dark:bg-red-900/20'
+                            : alert.severity === 'high'
+                              ? 'bg-orange-50 dark:bg-orange-900/20'
+                              : 'bg-yellow-50 dark:bg-yellow-900/20'
+                        }`}
+                      >
+                        <AlertCircle
+                          size={16}
+                          className={
+                            alert.severity === 'critical'
+                              ? 'text-red-600'
+                              : alert.severity === 'high'
+                                ? 'text-orange-600'
+                                : 'text-yellow-600'
+                          }
+                        />
+                        <div>
+                          <p className="text-sm font-medium">{alert.message}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatDate(alert.timestamp, 'relative')}
+                            {alert.resolvedAt &&
+                              ` - ${t('movethewheels.tracking.alerts.resolved', 'Resolved')}`}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Current Location */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} />
+                  {t('movethewheels.tracking.location.title', 'Current Location')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="aspect-video bg-muted rounded-lg flex items-center justify-center mb-4">
+                  <div className="text-center text-muted-foreground">
+                    <MapPin size={32} className="mx-auto mb-2" />
+                    <p className="text-sm">
+                      {t('movethewheels.tracking.location.mapView', 'Map View')}
+                    </p>
+                  </div>
+                </div>
+                <p className="text-sm">
+                  {tracking.currentLocation.address ||
+                    t('movethewheels.tracking.location.updating', 'Location updating...')}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
+                  {formatDate(tracking.currentLocation.timestamp || new Date(), 'relative')}
+                </p>
+              </CardContent>
+            </Card>
+
+            {/* Delivery Address */}
+            <Card>
+              <CardHeader>
+                <CardTitle>
+                  {t('movethewheels.tracking.deliveryAddress.title', 'Delivery Address')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">{order.customerInfo.name}</p>
+                <p className="text-sm text-muted-foreground mt-2">
+                  {formatAddress(order.deliveryAddress)}
+                </p>
+              </CardContent>
+            </Card>
+
+            {/* Actions */}
+            <Card>
+              <CardContent className="p-4 space-y-2">
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => goTo(`orders/${order.id}`)}
+                >
+                  {t('movethewheels.tracking.actions.viewOrderDetails', 'View Order Details')}
+                </Button>
+                <Button variant="outline" className="w-full">
+                  {t('movethewheels.tracking.actions.contactDriver', 'Contact Driver')}
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      )}
+
+      {/* No Results */}
+      {searchedOrderId && !order && !isLoading && !error && (
+        <EmptyState
+          icon={<Search size={48} />}
+          title={t('movethewheels.tracking.notFound.title', 'Shipment not found')}
+          description={`${t('movethewheels.tracking.notFound.descriptionPrefix', 'No shipment found with tracking number')} "${searchedOrderId}"`}
+          action={
+            <Button variant="outline" onClick={() => setTrackingInput('')}>
+              {t('movethewheels.tracking.notFound.tryAnother', 'Try another number')}
+            </Button>
+          }
+        />
+      )}
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -0,0 +1,218 @@
+/**
+ * Vehicle Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit } from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
+import { useVehicle } from '../hooks/useFleet';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function VehicleDetailsPage() {
+  const { vehicleId } = useParams<{ vehicleId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { vehicle, isLoading, error, refetch } = useVehicle(vehicleId);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
+
+  if (isLoading) return <LoadingState message="Loading vehicle details..." />;
+  if (error || !vehicle) return <ErrorState title="Vehicle not found" onRetry={refetch} />;
+
+  return (
+    <PageLayout
+      title={vehicle.vehicleNumber}
+      subtitle={`${vehicle.make} ${vehicle.model} (${vehicle.year})`}
+      icon={<Truck size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+          <Button>
+            <Edit size={16} /> Edit
+          </Button>
+        </div>
+      }
+      headerContent={
+        <div className="flex gap-2">
+          <StatusBadge status={vehicle.status} type="vehicle" />
+          <VehicleTypeBadge type={vehicle.type} />
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Vehicle Information</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div>
+                  <p className="text-sm text-muted-foreground">Type</p>
+                  <p className="font-medium capitalize">{vehicle.type}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Make</p>
+                  <p className="font-medium">{vehicle.make}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Model</p>
+                  <p className="font-medium">{vehicle.model}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Year</p>
+                  <p className="font-medium">{vehicle.year}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Capacity</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-6">
+                <div>
+                  <p className="text-sm text-muted-foreground">Weight</p>
+                  <p className="text-2xl font-bold">
+                    {vehicle.capacity.weight}
+                    <span className="text-sm font-normal"> kg</span>
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Volume</p>
+                  <p className="text-2xl font-bold">
+                    {vehicle.capacity.volume}
+                    <span className="text-sm font-normal"> m³</span>
+                  </p>
+                </div>
+                {vehicle.capacity.pallets && (
+                  <div>
+                    <p className="text-sm text-muted-foreground">Pallets</p>
+                    <p className="text-2xl font-bold">{vehicle.capacity.pallets}</p>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <FileText size={18} /> Documents
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {vehicle.documents.length > 0 ? (
+                <div className="space-y-3">
+                  {vehicle.documents.map((doc) => (
+                    <div
+                      key={doc.id}
+                      className="flex items-center justify-between p-3 border rounded-lg"
+                    >
+                      <div>
+                        <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
+                        <p className="text-sm text-muted-foreground">
+                          Expires: {formatDate(doc.expiryDate)}
+                        </p>
+                      </div>
+                      <Badge variant={doc.verified ? 'default' : 'secondary'}>
+                        {doc.verified ? 'Verified' : 'Pending'}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-muted-foreground text-center py-4">No documents uploaded</p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Fuel size={18} /> Fuel & Mileage
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {vehicle.fuelLevel !== undefined && (
+                <div>
+                  <div className="flex justify-between text-sm mb-2">
+                    <span>Fuel Level</span>
+                    <span>{vehicle.fuelLevel}%</span>
+                  </div>
+                  <Progress value={vehicle.fuelLevel} />
+                </div>
+              )}
+              {vehicle.mileage !== undefined && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Total Mileage</p>
+                  <p className="text-2xl font-bold">
+                    {vehicle.mileage.toLocaleString()}{' '}
+                    <span className="text-sm font-normal">miles</span>
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Wrench size={18} /> Maintenance
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground">Last Maintenance</p>
+                <p className="font-medium">
+                  {vehicle.lastMaintenance ? formatDate(vehicle.lastMaintenance) : 'N/A'}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Next Scheduled</p>
+                <p className="font-medium">
+                  {vehicle.nextMaintenance ? formatDate(vehicle.nextMaintenance) : 'N/A'}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {vehicle.currentLocation && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} /> Current Location
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">
+                  {vehicle.currentLocation.address || 'Location updating...'}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Updated {formatDate(vehicle.currentLocation.timestamp || new Date(), 'relative')}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}