@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/CustomersPage.tsx

@@ -0,0 +1,115 @@
+/**
+ * Customers Page
+ */
+
+import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { DataTable, type Column } from '../components/DataTable';
+import { TypeBadge } from '../components/StatusBadge';
+import { Button, Badge, Avatar, AvatarFallback } from '../components/ui';
+import { useCustomers } from '../hooks/useCustomers';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+import type { Customer } from '../types';
+
+export default function CustomersPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { customers, totalCustomers, isLoading, refetch } = useCustomers({ limit: 100 });
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+
+  const columns: Column<Customer>[] = [
+    {
+      id: 'customer',
+      header: 'Customer',
+      cell: (row) => (
+        <div className="flex items-center gap-3">
+          <Avatar>
+            <AvatarFallback>
+              {row.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="font-medium">{row.name}</p>
+            <p className="text-sm text-muted-foreground">{row.email}</p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'type',
+      header: 'Type',
+      accessorKey: 'type',
+      cell: (row) => <TypeBadge type={row.type} />,
+    },
+    { id: 'company', header: 'Company', accessorKey: 'company', cell: (row) => row.company || '-' },
+    { id: 'phone', header: 'Phone', accessorKey: 'phone' },
+    {
+      id: 'location',
+      header: 'Location',
+      cell: (row) => `${row.address.city}, ${row.address.state}`,
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      cell: (row) => (
+        <div className="flex items-center gap-1">
+          <Star size={14} className="text-yellow-500 fill-yellow-500" />
+          <span>{row.rating.toFixed(1)}</span>
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      cell: (row) => (
+        <Badge variant={row.isActive ? 'default' : 'secondary'}>
+          {row.isActive ? 'Active' : 'Inactive'}
+        </Badge>
+      ),
+    },
+    {
+      id: 'created',
+      header: 'Created',
+      accessorKey: 'createdAt',
+      sortable: true,
+      cell: (row) => formatDate(row.createdAt, 'short'),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Customers"
+      subtitle={`${totalCustomers} customers`}
+      icon={<Users size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={refetch}>
+            <RefreshCw size={16} /> Refresh
+          </Button>
+          <Button variant="outline">
+            <Download size={16} /> Export
+          </Button>
+          <Button onClick={() => goTo('customers/new')}>
+            <Plus size={16} /> Add Customer
+          </Button>
+        </div>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={customers}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search customers..."
+        searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
+        onRowClick={(row) => goTo(`customers/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/DashboardPage.tsx

@@ -0,0 +1,414 @@
+/**
+ * Dashboard Page
+ *
+ * Main overview page with key metrics and quick actions.
+ */
+
+import {
+  Package,
+  Truck,
+  Users,
+  DollarSign,
+  Clock,
+  AlertTriangle,
+  TrendingUp,
+  MapPin,
+  ChevronRight,
+} from 'lucide-react';
+import { PageLayout, PageSection } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { StatusBadge } from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
+import { useDashboardMetrics } from '../hooks/useAnalytics';
+import { useOrders, useOrderStats } from '../hooks/useOrders';
+import { useFleetStats } from '../hooks/useFleet';
+import { useLiveTracking } from '../hooks/useTracking';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
+import { formatCurrency, formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function DashboardPage() {
+  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 { metrics } = useDashboardMetrics();
+  const { orders } = useOrders({ limit: 5 });
+  const { stats: orderStats } = useOrderStats();
+  const { stats: fleetStats } = useFleetStats();
+  const { activeDeliveries } = useLiveTracking();
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  return (
+    <PageLayout
+      title={t('movethewheels.dashboard.title', 'Dashboard')}
+      subtitle={t('movethewheels.dashboard.subtitle', 'Overview of your logistics operations')}
+      icon={<TrendingUp size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => goTo('tracking/live')}>
+            <MapPin size={16} />
+            {t('movethewheels.dashboard.actions.liveMap', 'Live Map')}
+          </Button>
+          <Button onClick={() => goTo('orders/new')}>
+            <Package size={16} />
+            {t('movethewheels.dashboard.actions.newOrder', 'New Order')}
+          </Button>
+        </div>
+      }
+    >
+      {/* Key Metrics */}
+      <MetricGrid columns={4}>
+        <MetricCard
+          label={t('movethewheels.dashboard.metrics.totalOrders', 'Total Orders')}
+          value={metrics.orders.total}
+          icon={<Package size={20} />}
+          change={`+${metrics.orders.today} ${t('movethewheels.dashboard.metrics.today', 'today')}`}
+          changeType="positive"
+          trend="up"
+          onClick={() => goTo('orders')}
+        />
+        <MetricCard
+          label={t('movethewheels.dashboard.metrics.activeDeliveries', 'Active Deliveries')}
+          value={metrics.orders.inTransit}
+          icon={<Truck size={20} />}
+          subtitle={`${metrics.orders.pending} ${t('movethewheels.dashboard.metrics.pending', 'pending')}`}
+          onClick={() => goTo('tracking')}
+        />
+        <MetricCard
+          label={t('movethewheels.dashboard.metrics.fleetUtilization', 'Fleet Utilization')}
+          value={`${metrics.fleet.activeVehicles}/${metrics.fleet.totalVehicles}`}
+          icon={<Truck size={20} />}
+          subtitle={`${metrics.fleet.availableDrivers} ${t('movethewheels.dashboard.metrics.driversAvailable', 'drivers available')}`}
+          onClick={() => goTo('fleet')}
+        />
+        <MetricCard
+          label={t('movethewheels.dashboard.metrics.revenue', 'Revenue')}
+          value={formatCurrency(metrics.revenue.total)}
+          icon={<DollarSign size={20} />}
+          change="+12.5%"
+          changeType="positive"
+          trend="up"
+          onClick={() => goTo('analytics')}
+        />
+      </MetricGrid>
+
+      {/* Quick Stats Row */}
+      <MetricGrid columns={4}>
+        <MetricCard
+          size="sm"
+          label={t('movethewheels.dashboard.stats.onTimeDelivery', 'On-Time Delivery')}
+          value={`${metrics.performance.onTimeDeliveryRate.toFixed(1)}%`}
+          changeType={metrics.performance.onTimeDeliveryRate >= 90 ? 'positive' : 'negative'}
+        />
+        <MetricCard
+          size="sm"
+          label={t('movethewheels.dashboard.stats.avgOrderValue', 'Avg Order Value')}
+          value={formatCurrency(metrics.revenue.avgOrderValue)}
+        />
+        <MetricCard
+          size="sm"
+          label={t('movethewheels.dashboard.stats.driverRating', 'Driver Rating')}
+          value={metrics.performance.avgDriverRating.toFixed(1)}
+          subtitle={t('movethewheels.dashboard.stats.outOfFive', 'out of 5')}
+        />
+        <MetricCard
+          size="sm"
+          label={t('movethewheels.dashboard.stats.deliveredToday', 'Delivered Today')}
+          value={metrics.orders.delivered}
+        />
+      </MetricGrid>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Recent Orders */}
+        <PageSection
+          title={t('movethewheels.dashboard.recentOrders.title', 'Recent Orders')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('orders')}>
+              {t('movethewheels.dashboard.common.viewAll', 'View all')} <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {orders.slice(0, 5).map((order) => (
+                  <div
+                    key={order.id}
+                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    onClick={() => goTo(`orders/${order.id}`)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">{order.orderNumber}</p>
+                        <p className="text-sm text-muted-foreground">{order.customerInfo.name}</p>
+                      </div>
+                      <div className="text-right">
+                        <StatusBadge status={order.status} type="order" size="sm" />
+                        <p className="text-sm text-muted-foreground mt-1">
+                          {formatCurrency(order.pricing.total)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+                {orders.length === 0 && (
+                  <div className="p-8 text-center text-muted-foreground">
+                    {t('movethewheels.dashboard.recentOrders.empty', 'No recent orders')}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+
+        {/* Active Deliveries */}
+        <PageSection
+          title={t('movethewheels.dashboard.activeDeliveries.title', 'Active Deliveries')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('tracking/live')}>
+              {t('movethewheels.dashboard.activeDeliveries.liveTracking', 'Live tracking')}{' '}
+              <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {activeDeliveries.slice(0, 5).map((delivery) =>
+                  delivery.order ? (
+                    <div
+                      key={delivery.order.id}
+                      className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                      onClick={() => goTo(`tracking?order=${delivery.order.id}`)}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="font-medium">{delivery.order.orderNumber}</p>
+                          <p className="text-sm text-muted-foreground">
+                            {delivery.driver?.fullName ||
+                              t(
+                                'movethewheels.dashboard.activeDeliveries.unassigned',
+                                'Unassigned'
+                              )}
+                          </p>
+                        </div>
+                        <div className="text-right">
+                          <StatusBadge status={delivery.order.status} type="order" size="sm" />
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {t('movethewheels.dashboard.activeDeliveries.eta', 'ETA:')}{' '}
+                            {delivery.estimatedArrival
+                              ? formatDate(delivery.estimatedArrival, 'time')
+                              : t('movethewheels.dashboard.activeDeliveries.na', 'N/A')}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ) : null
+                )}
+                {activeDeliveries.length === 0 && (
+                  <div className="p-8 text-center text-muted-foreground">
+                    {t('movethewheels.dashboard.activeDeliveries.empty', 'No active deliveries')}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Order Status Summary */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('movethewheels.dashboard.orderStatus.title', 'Order Status')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              {[
+                { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
+                {
+                  status: 'in_transit',
+                  count: orderStats.byStatus.in_transit,
+                  color: 'bg-blue-500',
+                },
+                {
+                  status: 'delivered',
+                  count: orderStats.byStatus.delivered,
+                  color: 'bg-green-500',
+                },
+                { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
+              ].map(({ status, count, color }) => (
+                <div key={status} className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className={`w-2 h-2 rounded-full ${color}`} />
+                    <span className="text-sm capitalize">
+                      {t(
+                        `movethewheels.dashboard.orderStatus.status.${status}`,
+                        status.replace('_', ' ')
+                      )}
+                    </span>
+                  </div>
+                  <Badge variant="secondary">{count}</Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Fleet Status */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('movethewheels.dashboard.fleetStatus.title', 'Fleet Status')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>
+                  {t(
+                    'movethewheels.dashboard.fleetStatus.vehicleUtilization',
+                    'Vehicle Utilization'
+                  )}
+                </span>
+                <span>{fleetStats.utilization.toFixed(0)}%</span>
+              </div>
+              <Progress value={fleetStats.utilization} />
+            </div>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <p className="text-muted-foreground">
+                  {t('movethewheels.dashboard.fleetStatus.available', 'Available')}
+                </p>
+                <p className="text-lg font-semibold text-green-600">
+                  {fleetStats.vehiclesByStatus.available}
+                </p>
+              </div>
+              <div>
+                <p className="text-muted-foreground">
+                  {t('movethewheels.dashboard.fleetStatus.inUse', 'In Use')}
+                </p>
+                <p className="text-lg font-semibold text-blue-600">
+                  {fleetStats.vehiclesByStatus.assigned}
+                </p>
+              </div>
+              <div>
+                <p className="text-muted-foreground">
+                  {t('movethewheels.dashboard.fleetStatus.maintenance', 'Maintenance')}
+                </p>
+                <p className="text-lg font-semibold text-yellow-600">
+                  {fleetStats.vehiclesByStatus.maintenance}
+                </p>
+              </div>
+              <div>
+                <p className="text-muted-foreground">
+                  {t('movethewheels.dashboard.fleetStatus.avgFuel', 'Avg Fuel')}
+                </p>
+                <p className="text-lg font-semibold">{fleetStats.avgFuelLevel.toFixed(0)}%</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Alerts & Notifications */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <AlertTriangle size={16} className="text-yellow-500" />
+              {t('movethewheels.dashboard.alerts.title', 'Alerts')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {orderStats.byStatus.pending > 5 && (
+                <div className="flex items-start gap-3 p-2 rounded bg-yellow-50 dark:bg-yellow-900/20">
+                  <Clock size={16} className="text-yellow-600 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {t('movethewheels.dashboard.alerts.pendingOrders.title', 'Pending Orders')}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {orderStats.byStatus.pending}{' '}
+                      {t(
+                        'movethewheels.dashboard.alerts.pendingOrders.description',
+                        'orders awaiting confirmation'
+                      )}
+                    </p>
+                  </div>
+                </div>
+              )}
+              {fleetStats.vehiclesByStatus.maintenance > 0 && (
+                <div className="flex items-start gap-3 p-2 rounded bg-orange-50 dark:bg-orange-900/20">
+                  <Truck size={16} className="text-orange-600 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {t(
+                        'movethewheels.dashboard.alerts.maintenanceVehicles.title',
+                        'Vehicles in Maintenance'
+                      )}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {fleetStats.vehiclesByStatus.maintenance}{' '}
+                      {t(
+                        'movethewheels.dashboard.alerts.maintenanceVehicles.description',
+                        'vehicles unavailable'
+                      )}
+                    </p>
+                  </div>
+                </div>
+              )}
+              {fleetStats.driversByStatus.offline > 0 && (
+                <div className="flex items-start gap-3 p-2 rounded bg-gray-50 dark:bg-gray-800">
+                  <Users size={16} className="text-gray-600 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {t('movethewheels.dashboard.alerts.offlineDrivers.title', 'Offline Drivers')}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {fleetStats.driversByStatus.offline}{' '}
+                      {t(
+                        'movethewheels.dashboard.alerts.offlineDrivers.description',
+                        'drivers currently offline'
+                      )}
+                    </p>
+                  </div>
+                </div>
+              )}
+              {orderStats.byStatus.pending <= 5 &&
+                fleetStats.vehiclesByStatus.maintenance === 0 &&
+                fleetStats.driversByStatus.offline === 0 && (
+                  <div className="text-center py-4 text-muted-foreground">
+                    <p className="text-sm">
+                      {t(
+                        'movethewheels.dashboard.alerts.allOperational',
+                        'All systems operational'
+                      )}
+                    </p>
+                  </div>
+                )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}