@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/FleetPage.tsx

@@ -0,0 +1,289 @@
+/**
+ * Fleet Page
+ *
+ * Overview of vehicles and drivers.
+ */
+
+import { Truck, Users, Wrench, Fuel, Star, ChevronRight } from 'lucide-react';
+import { PageLayout, PageSection } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Progress,
+  Avatar,
+  AvatarFallback,
+} from '../components/ui';
+import { useFleetStats, useVehicles, useDrivers } from '../hooks/useFleet';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
+import { joinPath } from '../utils/navigation';
+
+export default function FleetPage() {
+  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 { stats } = useFleetStats();
+  const { vehicles } = useVehicles();
+  const { drivers } = useDrivers();
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  return (
+    <PageLayout
+      title={t('movethewheels.fleet.title', 'Fleet Management')}
+      subtitle={t('movethewheels.fleet.subtitle', 'Manage your vehicles and drivers')}
+      icon={<Truck size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => goTo('fleet/vehicles')}>
+            <Truck size={16} />
+            {t('movethewheels.fleet.actions.allVehicles', 'All Vehicles')}
+          </Button>
+          <Button variant="outline" onClick={() => goTo('fleet/drivers')}>
+            <Users size={16} />
+            {t('movethewheels.fleet.actions.allDrivers', 'All Drivers')}
+          </Button>
+        </div>
+      }
+    >
+      {/* Key Metrics */}
+      <MetricGrid columns={4}>
+        <MetricCard
+          label={t('movethewheels.fleet.metrics.totalVehicles', 'Total Vehicles')}
+          value={stats.totalVehicles}
+          icon={<Truck size={20} />}
+          subtitle={`${stats.vehiclesByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
+          onClick={() => goTo('fleet/vehicles')}
+        />
+        <MetricCard
+          label={t('movethewheels.fleet.metrics.totalDrivers', 'Total Drivers')}
+          value={stats.totalDrivers}
+          icon={<Users size={20} />}
+          subtitle={`${stats.driversByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
+          onClick={() => goTo('fleet/drivers')}
+        />
+        <MetricCard
+          label={t('movethewheels.fleet.metrics.utilization', 'Fleet Utilization')}
+          value={`${stats.utilization.toFixed(0)}%`}
+          icon={<Truck size={20} />}
+          changeType={stats.utilization >= 70 ? 'positive' : 'neutral'}
+        />
+        <MetricCard
+          label={t('movethewheels.fleet.metrics.avgDriverRating', 'Avg Driver Rating')}
+          value={stats.avgDriverRating.toFixed(1)}
+          icon={<Star size={20} />}
+          subtitle={t('movethewheels.fleet.metrics.outOfFive', 'out of 5')}
+          changeType={stats.avgDriverRating >= 4.5 ? 'positive' : 'neutral'}
+        />
+      </MetricGrid>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Vehicles Overview */}
+        <PageSection
+          title={t('movethewheels.fleet.vehicles.title', 'Vehicles')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('fleet/vehicles')}>
+              {t('movethewheels.fleet.common.viewAll', 'View all')} <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {vehicles.slice(0, 5).map((vehicle) => (
+                  <div
+                    key={vehicle.id}
+                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    onClick={() => goTo(`fleet/vehicles/${vehicle.id}`)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                          <Truck size={20} className="text-primary" />
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{vehicle.vehicleNumber}</span>
+                            <VehicleTypeBadge type={vehicle.type} size="sm" />
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {vehicle.make} {vehicle.model} ({vehicle.year})
+                          </p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <StatusBadge status={vehicle.status} type="vehicle" size="sm" />
+                        {vehicle.fuelLevel !== undefined && (
+                          <div className="mt-2 flex items-center gap-2">
+                            <Fuel size={12} className="text-muted-foreground" />
+                            <Progress value={vehicle.fuelLevel} className="w-16 h-2" />
+                            <span className="text-xs text-muted-foreground">
+                              {vehicle.fuelLevel}%
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+
+        {/* Drivers Overview */}
+        <PageSection
+          title={t('movethewheels.fleet.drivers.title', 'Drivers')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('fleet/drivers')}>
+              {t('movethewheels.fleet.common.viewAll', 'View all')} <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {drivers.slice(0, 5).map((driver) => (
+                  <div
+                    key={driver.id}
+                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    onClick={() => goTo(`fleet/drivers/${driver.id}`)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <Avatar>
+                          <AvatarFallback>
+                            {driver.fullName
+                              .split(' ')
+                              .map((n) => n[0])
+                              .join('')}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <p className="font-medium">{driver.fullName}</p>
+                          <p className="text-sm text-muted-foreground">
+                            {driver.employeeId} - {driver.completedOrders}{' '}
+                            {t('movethewheels.fleet.drivers.deliveries', 'deliveries')}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <StatusBadge status={driver.status} type="driver" size="sm" />
+                        <div className="mt-1 flex items-center gap-1 justify-end">
+                          <Star size={12} className="text-yellow-500 fill-yellow-500" />
+                          <span className="text-sm font-medium">
+                            {driver.ratings.overall.toFixed(1)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+      </div>
+
+      {/* Status Summary */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Vehicle Status */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('movethewheels.fleet.status.vehicleTitle', 'Vehicle Status')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {Object.entries(stats.vehiclesByStatus).map(([status, count]) => (
+                <div key={status} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <StatusBadge status={status} type="vehicle" />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="font-medium">{count}</span>
+                    <Progress value={(count / stats.totalVehicles) * 100} className="w-24 h-2" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Driver Status */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('movethewheels.fleet.status.driverTitle', 'Driver Status')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {Object.entries(stats.driversByStatus).map(([status, count]) => (
+                <div key={status} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <StatusBadge status={status} type="driver" />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="font-medium">{count}</span>
+                    <Progress value={(count / stats.totalDrivers) * 100} className="w-24 h-2" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Maintenance Alerts */}
+      {stats.vehiclesByStatus.maintenance > 0 && (
+        <Card className="border-yellow-200 dark:border-yellow-800">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-yellow-600">
+              <Wrench size={18} />
+              {t('movethewheels.fleet.maintenance.title', 'Maintenance Required')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {vehicles
+                .filter((v) => v.status === 'maintenance')
+                .map((vehicle) => (
+                  <div
+                    key={vehicle.id}
+                    className="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg"
+                  >
+                    <div className="flex items-center gap-3">
+                      <Truck size={20} className="text-yellow-600" />
+                      <div>
+                        <p className="font-medium">{vehicle.vehicleNumber}</p>
+                        <p className="text-sm text-muted-foreground">
+                          {vehicle.make} {vehicle.model}
+                        </p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => goTo(`fleet/vehicles/${vehicle.id}`)}
+                    >
+                      {t('movethewheels.fleet.maintenance.viewDetails', 'View Details')}
+                    </Button>
+                  </div>
+                ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -0,0 +1,165 @@
+/**
+ * Import/Export Page
+ */
+
+import { Upload, Download, FileText, FileSpreadsheet, Check } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+
+export default function ImportExportPage() {
+  const importOptions = [
+    {
+      name: 'Orders',
+      description: 'Import orders from CSV or Excel',
+      icon: FileSpreadsheet,
+      format: 'CSV, XLSX',
+    },
+    {
+      name: 'Customers',
+      description: 'Import customer database',
+      icon: FileSpreadsheet,
+      format: 'CSV, XLSX',
+    },
+    {
+      name: 'Products',
+      description: 'Import product catalog',
+      icon: FileSpreadsheet,
+      format: 'CSV, XLSX',
+    },
+    {
+      name: 'Inventory',
+      description: 'Import inventory levels',
+      icon: FileSpreadsheet,
+      format: 'CSV, XLSX',
+    },
+  ];
+
+  const exportOptions = [
+    {
+      name: 'Orders Report',
+      description: 'Export all orders data',
+      formats: ['CSV', 'Excel', 'PDF'],
+    },
+    {
+      name: 'Financial Report',
+      description: 'Export revenue and payments',
+      formats: ['CSV', 'Excel', 'PDF'],
+    },
+    {
+      name: 'Fleet Report',
+      description: 'Export vehicle and driver data',
+      formats: ['CSV', 'Excel'],
+    },
+    {
+      name: 'Analytics Report',
+      description: 'Export performance metrics',
+      formats: ['CSV', 'Excel', 'PDF'],
+    },
+  ];
+
+  const recentActivity = [
+    { type: 'export', name: 'Orders Report', date: '2024-01-15', status: 'completed' },
+    { type: 'import', name: 'Customer Data', date: '2024-01-14', status: 'completed' },
+    { type: 'export', name: 'Financial Report', date: '2024-01-13', status: 'completed' },
+  ];
+
+  return (
+    <PageLayout
+      title="Import / Export"
+      subtitle="Import and export your data"
+      icon={<FileText size={24} />}
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Upload size={18} /> Import Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {importOptions.map((opt) => (
+              <div
+                key={opt.name}
+                className="flex items-center justify-between p-4 border rounded-lg hover:border-primary/50 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                    <opt.icon size={20} className="text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-medium">{opt.name}</p>
+                    <p className="text-sm text-muted-foreground">{opt.description}</p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <Badge variant="outline">{opt.format}</Badge>
+                  <Button variant="outline" size="sm" className="ml-2">
+                    <Upload size={14} />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Download size={18} /> Export Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {exportOptions.map((opt) => (
+              <div
+                key={opt.name}
+                className="flex items-center justify-between p-4 border rounded-lg hover:border-primary/50 transition-colors"
+              >
+                <div>
+                  <p className="font-medium">{opt.name}</p>
+                  <p className="text-sm text-muted-foreground">{opt.description}</p>
+                </div>
+                <div className="flex gap-1">
+                  {opt.formats.map((f) => (
+                    <Button key={f} variant="outline" size="sm">
+                      {f}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {recentActivity.map((activity, i) => (
+              <div key={i} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+                <div className="flex items-center gap-3">
+                  {activity.type === 'import' ? (
+                    <Upload size={16} className="text-primary" />
+                  ) : (
+                    <Download size={16} className="text-primary" />
+                  )}
+                  <div>
+                    <p className="font-medium">{activity.name}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
+                    </p>
+                  </div>
+                </div>
+                <Badge variant="default" className="gap-1">
+                  <Check size={12} /> {activity.status}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/InventoryPage.tsx

@@ -0,0 +1,212 @@
+/**
+ * Inventory Page - Overview of inventory management
+ */
+
+import { Package, Warehouse, AlertTriangle, ChevronRight, Plus } from 'lucide-react';
+import { PageLayout, PageSection } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
+import { useInventory, useInventoryStats } from '../hooks/useInventory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
+import { formatCurrency } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function InventoryPage() {
+  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 { inventory, products, warehouses } = useInventory();
+  const { stats } = useInventoryStats();
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+  const lowStockItems = inventory.filter((inv) => inv.availableQuantity <= inv.reorderLevel);
+
+  return (
+    <PageLayout
+      title={t('movethewheels.inventory.title', 'Inventory')}
+      subtitle={t('movethewheels.inventory.subtitle', 'Manage your products and warehouses')}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => goTo('inventory/products')}>
+            {t('movethewheels.inventory.actions.products', 'Products')}
+          </Button>
+          <Button variant="outline" onClick={() => goTo('inventory/warehouses')}>
+            {t('movethewheels.inventory.actions.warehouses', 'Warehouses')}
+          </Button>
+          <Button>
+            <Plus size={16} /> {t('movethewheels.inventory.actions.addProduct', 'Add Product')}
+          </Button>
+        </div>
+      }
+    >
+      <MetricGrid columns={4}>
+        <MetricCard
+          label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
+          value={stats.totalProducts}
+          icon={<Package size={20} />}
+          onClick={() => goTo('inventory/products')}
+        />
+        <MetricCard
+          label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
+          value={stats.totalItems.toLocaleString()}
+          icon={<Package size={20} />}
+        />
+        <MetricCard
+          label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
+          value={formatCurrency(stats.totalValue)}
+          icon={<Package size={20} />}
+        />
+        <MetricCard
+          label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
+          value={stats.totalWarehouses}
+          icon={<Warehouse size={20} />}
+          onClick={() => goTo('inventory/warehouses')}
+        />
+      </MetricGrid>
+
+      {lowStockItems.length > 0 && (
+        <Card className="border-yellow-200">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-yellow-600">
+              <AlertTriangle size={18} />
+              {t('movethewheels.inventory.lowStock.title', 'Low Stock Alert')} (
+              {lowStockItems.length} {t('movethewheels.inventory.lowStock.items', 'items')})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {lowStockItems.slice(0, 5).map((item) => {
+                const product = products.find((p) => p.id === item.productId);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg"
+                  >
+                    <div>
+                      <p className="font-medium">
+                        {product?.name ||
+                          t('movethewheels.inventory.lowStock.unknownProduct', 'Unknown Product')}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {t('movethewheels.inventory.lowStock.sku', 'SKU:')} {product?.sku}
+                      </p>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-medium text-yellow-600">
+                        {item.availableQuantity}{' '}
+                        {t('movethewheels.inventory.lowStock.left', 'left')}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {t('movethewheels.inventory.lowStock.reorderAt', 'Reorder at:')}{' '}
+                        {item.reorderLevel}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <PageSection
+          title={t('movethewheels.inventory.warehouses.title', 'Warehouses')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('inventory/warehouses')}>
+              {t('movethewheels.inventory.common.viewAll', 'View all')} <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {warehouses.map((warehouse) => (
+                  <div
+                    key={warehouse.id}
+                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    onClick={() => goTo(`inventory/warehouses/${warehouse.id}`)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">{warehouse.name}</p>
+                        <p className="text-sm text-muted-foreground">
+                          {warehouse.address.city}, {warehouse.address.state}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <Badge variant={warehouse.isActive ? 'default' : 'secondary'}>
+                          {warehouse.isActive
+                            ? t('movethewheels.inventory.warehouses.active', 'Active')
+                            : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
+                        </Badge>
+                        <div className="mt-2">
+                          <p className="text-xs text-muted-foreground">
+                            {t('movethewheels.inventory.warehouses.utilization', 'Utilization')}
+                          </p>
+                          <Progress
+                            value={
+                              (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) * 100
+                            }
+                            className="w-24 h-2"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+
+        <PageSection
+          title={t('movethewheels.inventory.products.title', 'Recent Products')}
+          actions={
+            <Button variant="ghost" size="sm" onClick={() => goTo('inventory/products')}>
+              {t('movethewheels.inventory.common.viewAll', 'View all')} <ChevronRight size={16} />
+            </Button>
+          }
+        >
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {products.slice(0, 5).map((product) => (
+                  <div
+                    key={product.id}
+                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    onClick={() => goTo(`inventory/products/${product.id}`)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">{product.name}</p>
+                        <p className="text-sm text-muted-foreground">{product.sku}</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium">{formatCurrency(product.value)}</p>
+                        <Badge variant="outline">{product.category}</Badge>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </PageSection>
+      </div>
+    </PageLayout>
+  );
+}