@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -0,0 +1,387 @@
+/**
+ * Order Details Page
+ *
+ * Displays detailed information about a specific order.
+ */
+
+import { useParams } from 'react-router-dom';
+import {
+  Package,
+  ArrowLeft,
+  MapPin,
+  User,
+  Truck,
+  Clock,
+  DollarSign,
+  Phone,
+  Mail,
+  FileText,
+  CheckCircle,
+  Edit,
+  Printer,
+} from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import {
+  StatusBadge,
+  PriorityBadge,
+  TypeBadge,
+  PaymentStatusBadge,
+} from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Separator,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../components/ui';
+import { useOrder } from '../hooks/useOrders';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatCurrency, formatDate, formatAddress } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function OrderDetailsPage() {
+  const { orderId } = useParams<{ orderId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { order, isLoading, error, refetch } = useOrder(orderId);
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  const goBack = () => {
+    if (navigate) {
+      navigate(joinPath(basePath, 'orders'));
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingState message="Loading order details..." />;
+  }
+
+  if (error || !order) {
+    return (
+      <ErrorState
+        title="Order not found"
+        message="The order you're looking for doesn't exist or has been removed."
+        onRetry={refetch}
+      />
+    );
+  }
+
+  return (
+    <PageLayout
+      title={order.orderNumber}
+      subtitle={`Created ${formatDate(order.createdAt, 'full')}`}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} />
+            Back
+          </Button>
+          <Button variant="outline">
+            <Printer size={16} />
+            Print
+          </Button>
+          <Button onClick={() => goTo(`orders/${orderId}/edit`)}>
+            <Edit size={16} />
+            Edit
+          </Button>
+        </div>
+      }
+      headerContent={
+        <div className="flex flex-wrap gap-2">
+          <StatusBadge status={order.status} type="order" />
+          <PriorityBadge priority={order.priority} />
+          <TypeBadge type={order.orderType} />
+          <PaymentStatusBadge status={order.pricing.paymentStatus} />
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Customer Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <User size={18} />
+                Customer Information
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <h4 className="font-medium mb-2">{order.customerInfo.name}</h4>
+                  {order.customerInfo.company && (
+                    <p className="text-sm text-muted-foreground mb-2">
+                      {order.customerInfo.company}
+                    </p>
+                  )}
+                  <div className="space-y-1 text-sm">
+                    <p className="flex items-center gap-2">
+                      <Mail size={14} className="text-muted-foreground" />
+                      {order.customerInfo.email}
+                    </p>
+                    <p className="flex items-center gap-2">
+                      <Phone size={14} className="text-muted-foreground" />
+                      {order.customerInfo.phone}
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  {order.customerInfo.preferredDeliveryTime && (
+                    <div className="mb-2">
+                      <p className="text-sm text-muted-foreground">Preferred Delivery Time</p>
+                      <p className="text-sm">{order.customerInfo.preferredDeliveryTime}</p>
+                    </div>
+                  )}
+                  {order.customerInfo.deliveryInstructions && (
+                    <div>
+                      <p className="text-sm text-muted-foreground">Delivery Instructions</p>
+                      <p className="text-sm">{order.customerInfo.deliveryInstructions}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Addresses */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MapPin size={18} />
+                Addresses
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <h4 className="font-medium mb-2 flex items-center gap-2">
+                    <Badge variant="outline">Pickup</Badge>
+                  </h4>
+                  <p className="text-sm">{formatAddress(order.pickupAddress)}</p>
+                  {order.scheduledPickup && (
+                    <p className="text-sm text-muted-foreground mt-2">
+                      Scheduled: {formatDate(order.scheduledPickup, 'full')}
+                    </p>
+                  )}
+                  {order.actualPickup && (
+                    <p className="text-sm text-green-600 mt-1">
+                      <CheckCircle size={14} className="inline mr-1" />
+                      Picked up: {formatDate(order.actualPickup, 'full')}
+                    </p>
+                  )}
+                </div>
+                <div>
+                  <h4 className="font-medium mb-2 flex items-center gap-2">
+                    <Badge variant="outline">Delivery</Badge>
+                  </h4>
+                  <p className="text-sm">{formatAddress(order.deliveryAddress)}</p>
+                  {order.scheduledDelivery && (
+                    <p className="text-sm text-muted-foreground mt-2">
+                      Scheduled: {formatDate(order.scheduledDelivery, 'full')}
+                    </p>
+                  )}
+                  {order.actualDelivery && (
+                    <p className="text-sm text-green-600 mt-1">
+                      <CheckCircle size={14} className="inline mr-1" />
+                      Delivered: {formatDate(order.actualDelivery, 'full')}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Order Items */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Package size={18} />
+                Order Items ({order.items.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Item</TableHead>
+                    <TableHead>SKU</TableHead>
+                    <TableHead className="text-center">Qty</TableHead>
+                    <TableHead className="text-right">Unit Price</TableHead>
+                    <TableHead className="text-right">Total</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {order.items.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <div>
+                          <p className="font-medium">{item.name}</p>
+                          {item.description && (
+                            <p className="text-sm text-muted-foreground">{item.description}</p>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="font-mono text-sm">{item.sku}</TableCell>
+                      <TableCell className="text-center">{item.quantity}</TableCell>
+                      <TableCell className="text-right">{formatCurrency(item.value)}</TableCell>
+                      <TableCell className="text-right font-medium">
+                        {formatCurrency(item.value * item.quantity)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+
+          {/* Timeline */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock size={18} />
+                Order Timeline
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="relative">
+                {order.timeline.map((event, index) => (
+                  <div key={index} className="flex gap-4 pb-6 last:pb-0">
+                    <div className="relative">
+                      <div className="w-3 h-3 rounded-full bg-primary mt-1.5" />
+                      {index < order.timeline.length - 1 && (
+                        <div className="absolute top-4 left-1.5 w-px h-full -ml-px bg-border" />
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <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">{event.notes}</p>}
+                      <p className="text-xs text-muted-foreground">by {event.performedBy}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Order Summary */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <DollarSign size={18} />
+                Order Summary
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Subtotal</span>
+                  <span>{formatCurrency(order.pricing.subtotal)}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Delivery</span>
+                  <span>{formatCurrency(order.pricing.fees.delivery)}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Handling</span>
+                  <span>{formatCurrency(order.pricing.fees.handling)}</span>
+                </div>
+                {order.pricing.fees.insurance && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Insurance</span>
+                    <span>{formatCurrency(order.pricing.fees.insurance)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Taxes</span>
+                  <span>{formatCurrency(order.pricing.taxes)}</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between font-medium">
+                  <span>Total</span>
+                  <span className="text-lg">{formatCurrency(order.pricing.total)}</span>
+                </div>
+                <div className="pt-2">
+                  <p className="text-sm text-muted-foreground">Payment Method</p>
+                  <p className="text-sm capitalize">
+                    {order.pricing.paymentMethod.replace('_', ' ')}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Assignment Info */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Truck size={18} />
+                Assignment
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="text-sm">{order.driverId || 'Not assigned'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="text-sm">{order.vehicleId || 'Not assigned'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Tracking Number</p>
+                  <p className="text-sm font-mono">{order.trackingNumber}</p>
+                </div>
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => goTo(`tracking?order=${order.id}`)}
+                >
+                  <MapPin size={16} />
+                  Track Order
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Special Instructions */}
+          {order.specialInstructions && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText size={18} />
+                  Special Instructions
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">{order.specialInstructions}</p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -0,0 +1,241 @@
+/**
+ * Orders List Page
+ *
+ * Displays all orders with filtering, search, and pagination.
+ */
+
+import { useState } from 'react';
+import { Package, Plus, Filter, Download, RefreshCw } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { DataTable, type Column } from '../components/DataTable';
+import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
+import {
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Badge,
+} from '../components/ui';
+import { useOrders } from '../hooks/useOrders';
+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';
+import type { Order, OrderStatus } from '../types';
+
+export default function OrdersListPage() {
+  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 [statusFilter, setStatusFilter] = useState<OrderStatus | 'all'>('all');
+  const [typeFilter, setTypeFilter] = useState<'b2b' | 'b2c' | 'all'>('all');
+
+  const { orders, totalOrders, isLoading, refetch } = useOrders({
+    filters: {
+      status: statusFilter === 'all' ? undefined : statusFilter,
+      orderType: typeFilter === 'all' ? undefined : typeFilter,
+    },
+    limit: 50,
+  });
+
+  const goTo = (path: string) => {
+    if (navigate) {
+      navigate(joinPath(basePath, path));
+    }
+  };
+
+  const columns: Column<Order>[] = [
+    {
+      id: 'orderNumber',
+      header: t('movethewheels.orders.table.orderNumber', 'Order #'),
+      accessorKey: 'orderNumber',
+      sortable: true,
+      className: 'min-w-[100px] whitespace-nowrap',
+      cell: (row) => <span className="font-medium text-primary">{row.orderNumber}</span>,
+    },
+    {
+      id: 'customer',
+      header: t('movethewheels.orders.table.customer', 'Customer'),
+      className: 'min-w-[180px] max-w-[220px]',
+      cell: (row) => (
+        <div className="min-w-0">
+          <p className="font-medium truncate">{row.customerInfo.name}</p>
+          <p className="text-sm text-muted-foreground truncate">{row.customerInfo.email}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: t('movethewheels.orders.table.status', 'Status'),
+      accessorKey: 'status',
+      sortable: true,
+      className: 'min-w-[130px] whitespace-nowrap',
+      cell: (row) => <StatusBadge status={row.status} type="order" />,
+    },
+    {
+      id: 'type',
+      header: t('movethewheels.orders.table.type', 'Type'),
+      accessorKey: 'orderType',
+      className: 'min-w-[70px] whitespace-nowrap',
+      cell: (row) => <TypeBadge type={row.orderType} />,
+    },
+    {
+      id: 'priority',
+      header: t('movethewheels.orders.table.priority', 'Priority'),
+      accessorKey: 'priority',
+      sortable: true,
+      className: 'min-w-[90px] whitespace-nowrap',
+      cell: (row) => <PriorityBadge priority={row.priority} />,
+    },
+    {
+      id: 'items',
+      header: t('movethewheels.orders.table.items', 'Items'),
+      className: 'min-w-[80px] whitespace-nowrap',
+      cell: (row) => (
+        <Badge variant="secondary">
+          {row.items.length} {t('movethewheels.orders.table.itemsSuffix', 'items')}
+        </Badge>
+      ),
+    },
+    {
+      id: 'total',
+      header: t('movethewheels.orders.table.total', 'Total'),
+      accessorKey: 'pricing',
+      sortable: true,
+      className: 'min-w-[100px] whitespace-nowrap text-right',
+      cell: (row) => <span className="font-medium">{formatCurrency(row.pricing.total)}</span>,
+    },
+    {
+      id: 'scheduledDelivery',
+      header: t('movethewheels.orders.table.deliveryDate', 'Delivery Date'),
+      accessorKey: 'scheduledDelivery',
+      sortable: true,
+      className: 'min-w-[110px] whitespace-nowrap',
+      cell: (row) => (row.scheduledDelivery ? formatDate(row.scheduledDelivery) : '-'),
+    },
+    {
+      id: 'createdAt',
+      header: t('movethewheels.orders.table.created', 'Created'),
+      accessorKey: 'createdAt',
+      sortable: true,
+      className: 'min-w-[100px] whitespace-nowrap',
+      cell: (row) => formatDate(row.createdAt, 'relative'),
+    },
+  ];
+
+  const statusOptions: { value: OrderStatus | 'all'; label: string }[] = [
+    { value: 'all', label: t('movethewheels.orders.filters.allStatuses', 'All Statuses') },
+    { value: 'pending', label: t('movethewheels.orders.status.pending', 'Pending') },
+    { value: 'confirmed', label: t('movethewheels.orders.status.confirmed', 'Confirmed') },
+    { value: 'assigned', label: t('movethewheels.orders.status.assigned', 'Assigned') },
+    { value: 'picked_up', label: t('movethewheels.orders.status.pickedUp', 'Picked Up') },
+    { value: 'in_transit', label: t('movethewheels.orders.status.inTransit', 'In Transit') },
+    {
+      value: 'out_for_delivery',
+      label: t('movethewheels.orders.status.outForDelivery', 'Out for Delivery'),
+    },
+    { value: 'delivered', label: t('movethewheels.orders.status.delivered', 'Delivered') },
+    { value: 'cancelled', label: t('movethewheels.orders.status.cancelled', 'Cancelled') },
+    { value: 'failed', label: t('movethewheels.orders.status.failed', 'Failed') },
+  ];
+
+  return (
+    <PageLayout
+      title={t('movethewheels.orders.title', 'Orders')}
+      subtitle={`${totalOrders} ${t('movethewheels.orders.subtitle', 'total orders')}`}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={refetch}>
+            <RefreshCw size={16} />
+            {t('movethewheels.orders.actions.refresh', 'Refresh')}
+          </Button>
+          <Button variant="outline">
+            <Download size={16} />
+            {t('movethewheels.orders.actions.export', 'Export')}
+          </Button>
+          <Button onClick={() => goTo('orders/new')}>
+            <Plus size={16} />
+            {t('movethewheels.orders.actions.newOrder', 'New Order')}
+          </Button>
+        </div>
+      }
+    >
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-muted-foreground" />
+              <span className="text-sm font-medium">
+                {t('movethewheels.orders.filters.label', 'Filters:')}
+              </span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => setStatusFilter(value as OrderStatus | 'all')}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder={t('movethewheels.orders.filters.status', 'Status')} />
+              </SelectTrigger>
+              <SelectContent>
+                {statusOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={typeFilter}
+              onValueChange={(value) => setTypeFilter(value as 'b2b' | 'b2c' | 'all')}
+            >
+              <SelectTrigger className="w-[150px]">
+                <SelectValue placeholder={t('movethewheels.orders.filters.type', 'Type')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">
+                  {t('movethewheels.orders.filters.allTypes', 'All Types')}
+                </SelectItem>
+                <SelectItem value="b2b">B2B</SelectItem>
+                <SelectItem value="b2c">B2C</SelectItem>
+              </SelectContent>
+            </Select>
+            {(statusFilter !== 'all' || typeFilter !== 'all') && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setTypeFilter('all');
+                }}
+              >
+                {t('movethewheels.orders.filters.clear', 'Clear filters')}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Orders Table */}
+      <DataTable
+        columns={columns}
+        data={orders}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder={t('movethewheels.orders.searchPlaceholder', 'Search orders...')}
+        searchFields={['orderNumber', 'customerInfo'] as (keyof Order)[]}
+        onRowClick={(row) => goTo(`orders/${row.id}`)}
+        getRowId={(row) => row.id}
+        emptyMessage={t('movethewheels.orders.empty', 'No orders found')}
+      />
+    </PageLayout>
+  );
+}