@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -0,0 +1,454 @@
+/**
+ * Create/Edit Order Page
+ *
+ * Form for creating or editing orders.
+ */
+
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Package, ArrowLeft, Save, Plus, Trash2 } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Input,
+  Label,
+  Textarea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+} from '../components/ui';
+import { useOrder, useOrders } from '../hooks/useOrders';
+import { useCustomers } from '../hooks/useCustomers';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { joinPath } from '../utils/navigation';
+
+export default function CreateOrderPage() {
+  const { orderId } = useParams<{ orderId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { order } = useOrder(orderId);
+  const { createOrder } = useOrders();
+  const { customers } = useCustomers({ limit: 100 });
+
+  const isEditing = !!orderId && !!order;
+
+  const [formData, setFormData] = useState({
+    customerId: order?.customerId || '',
+    orderType: order?.orderType || 'b2c',
+    priority: order?.priority || 'normal',
+    pickupAddress: {
+      street: order?.pickupAddress.street || '',
+      city: order?.pickupAddress.city || '',
+      state: order?.pickupAddress.state || '',
+      postalCode: order?.pickupAddress.postalCode || '',
+      country: order?.pickupAddress.country || 'USA',
+    },
+    deliveryAddress: {
+      street: order?.deliveryAddress.street || '',
+      city: order?.deliveryAddress.city || '',
+      state: order?.deliveryAddress.state || '',
+      postalCode: order?.deliveryAddress.postalCode || '',
+      country: order?.deliveryAddress.country || 'USA',
+    },
+    items: order?.items || [],
+    specialInstructions: order?.specialInstructions || '',
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const goBack = () => {
+    if (navigate) {
+      navigate(joinPath(basePath, 'orders'));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+
+      await createOrder({
+        customerId: formData.customerId,
+        customerInfo: selectedCustomer
+          ? {
+              name: selectedCustomer.name,
+              email: selectedCustomer.email,
+              phone: selectedCustomer.phone,
+              company: selectedCustomer.company,
+            }
+          : {
+              name: 'New Customer',
+              email: 'customer@example.com',
+              phone: '+1-555-0000',
+            },
+        orderType: formData.orderType as 'b2b' | 'b2c',
+        priority: formData.priority as 'low' | 'normal' | 'high' | 'urgent',
+        pickupAddress: formData.pickupAddress,
+        deliveryAddress: formData.deliveryAddress,
+        items: formData.items,
+        specialInstructions: formData.specialInstructions,
+      });
+
+      goBack();
+    } catch (error) {
+      console.error('Failed to create order:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const updateField = (field: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const updateAddress = (
+    type: 'pickupAddress' | 'deliveryAddress',
+    field: string,
+    value: string
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      [type]: { ...prev[type], [field]: value },
+    }));
+  };
+
+  const addItem = () => {
+    setFormData((prev) => ({
+      ...prev,
+      items: [
+        ...prev.items,
+        {
+          id: `item-${Date.now()}`,
+          productId: '',
+          name: '',
+          quantity: 1,
+          weight: 0,
+          dimensions: { length: 0, width: 0, height: 0, unit: 'cm' as const },
+          value: 0,
+          sku: '',
+        },
+      ],
+    }));
+  };
+
+  const removeItem = (index: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      items: prev.items.filter((_, i) => i !== index),
+    }));
+  };
+
+  const updateItem = (index: number, field: string, value: unknown) => {
+    setFormData((prev) => ({
+      ...prev,
+      items: prev.items.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
+    }));
+  };
+
+  return (
+    <PageLayout
+      title={isEditing ? 'Edit Order' : 'Create Order'}
+      subtitle={isEditing ? `Editing ${order?.orderNumber}` : 'Create a new delivery order'}
+      icon={<Package size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} />
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            <Save size={16} />
+            {isSubmitting ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Order'}
+          </Button>
+        </div>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Order Details */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Order Details</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="customer">Customer</Label>
+                <Select
+                  value={formData.customerId}
+                  onValueChange={(value) => updateField('customerId', value)}
+                >
+                  <SelectTrigger id="customer">
+                    <SelectValue placeholder="Select customer" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {customers.map((customer) => (
+                      <SelectItem key={customer.id} value={customer.id}>
+                        {customer.name} ({customer.email})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="orderType">Order Type</Label>
+                <Select
+                  value={formData.orderType}
+                  onValueChange={(value) => updateField('orderType', value)}
+                >
+                  <SelectTrigger id="orderType">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="b2c">B2C (Individual)</SelectItem>
+                    <SelectItem value="b2b">B2B (Business)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="priority">Priority</Label>
+                <Select
+                  value={formData.priority}
+                  onValueChange={(value) => updateField('priority', value)}
+                >
+                  <SelectTrigger id="priority">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">Low</SelectItem>
+                    <SelectItem value="normal">Normal</SelectItem>
+                    <SelectItem value="high">High</SelectItem>
+                    <SelectItem value="urgent">Urgent</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Addresses */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Pickup Address */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Pickup Address</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="pickupStreet">Street Address</Label>
+                <Input
+                  id="pickupStreet"
+                  value={formData.pickupAddress.street}
+                  onChange={(e) => updateAddress('pickupAddress', 'street', e.target.value)}
+                  placeholder="123 Main St"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="pickupCity">City</Label>
+                  <Input
+                    id="pickupCity"
+                    value={formData.pickupAddress.city}
+                    onChange={(e) => updateAddress('pickupAddress', 'city', e.target.value)}
+                    placeholder="San Francisco"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="pickupState">State</Label>
+                  <Input
+                    id="pickupState"
+                    value={formData.pickupAddress.state}
+                    onChange={(e) => updateAddress('pickupAddress', 'state', e.target.value)}
+                    placeholder="CA"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="pickupPostal">Postal Code</Label>
+                  <Input
+                    id="pickupPostal"
+                    value={formData.pickupAddress.postalCode}
+                    onChange={(e) => updateAddress('pickupAddress', 'postalCode', e.target.value)}
+                    placeholder="94103"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="pickupCountry">Country</Label>
+                  <Input
+                    id="pickupCountry"
+                    value={formData.pickupAddress.country}
+                    onChange={(e) => updateAddress('pickupAddress', 'country', e.target.value)}
+                    placeholder="USA"
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Delivery Address */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Delivery Address</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="deliveryStreet">Street Address</Label>
+                <Input
+                  id="deliveryStreet"
+                  value={formData.deliveryAddress.street}
+                  onChange={(e) => updateAddress('deliveryAddress', 'street', e.target.value)}
+                  placeholder="456 Oak Ave"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryCity">City</Label>
+                  <Input
+                    id="deliveryCity"
+                    value={formData.deliveryAddress.city}
+                    onChange={(e) => updateAddress('deliveryAddress', 'city', e.target.value)}
+                    placeholder="Los Angeles"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryState">State</Label>
+                  <Input
+                    id="deliveryState"
+                    value={formData.deliveryAddress.state}
+                    onChange={(e) => updateAddress('deliveryAddress', 'state', e.target.value)}
+                    placeholder="CA"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryPostal">Postal Code</Label>
+                  <Input
+                    id="deliveryPostal"
+                    value={formData.deliveryAddress.postalCode}
+                    onChange={(e) => updateAddress('deliveryAddress', 'postalCode', e.target.value)}
+                    placeholder="90210"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryCountry">Country</Label>
+                  <Input
+                    id="deliveryCountry"
+                    value={formData.deliveryAddress.country}
+                    onChange={(e) => updateAddress('deliveryAddress', 'country', e.target.value)}
+                    placeholder="USA"
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Order Items */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>Order Items</CardTitle>
+            <Button type="button" variant="outline" size="sm" onClick={addItem}>
+              <Plus size={16} />
+              Add Item
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {formData.items.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <Package size={48} className="mx-auto mb-4 opacity-50" />
+                <p>No items added yet</p>
+                <Button type="button" variant="link" onClick={addItem}>
+                  Add your first item
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {formData.items.map((item, index) => (
+                  <div key={item.id}>
+                    {index > 0 && <Separator className="my-4" />}
+                    <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
+                      <div className="md:col-span-2 space-y-2">
+                        <Label>Item Name</Label>
+                        <Input
+                          value={item.name}
+                          onChange={(e) => updateItem(index, 'name', e.target.value)}
+                          placeholder="Product name"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label>SKU</Label>
+                        <Input
+                          value={item.sku}
+                          onChange={(e) => updateItem(index, 'sku', e.target.value)}
+                          placeholder="SKU-001"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label>Quantity</Label>
+                        <Input
+                          type="number"
+                          min="1"
+                          value={item.quantity}
+                          onChange={(e) =>
+                            updateItem(index, 'quantity', parseInt(e.target.value) || 1)
+                          }
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label>Value ($)</Label>
+                        <Input
+                          type="number"
+                          min="0"
+                          step="0.01"
+                          value={item.value}
+                          onChange={(e) =>
+                            updateItem(index, 'value', parseFloat(e.target.value) || 0)
+                          }
+                        />
+                      </div>
+                      <div className="flex items-end">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive"
+                          onClick={() => removeItem(index)}
+                        >
+                          <Trash2 size={16} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Special Instructions */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Special Instructions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Textarea
+              value={formData.specialInstructions}
+              onChange={(e) => updateField('specialInstructions', e.target.value)}
+              placeholder="Any special handling or delivery instructions..."
+              rows={4}
+            />
+          </CardContent>
+        </Card>
+      </form>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -0,0 +1,207 @@
+/**
+ * Customer Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import {
+  Users,
+  ArrowLeft,
+  Edit,
+  MapPin,
+  Mail,
+  Phone,
+  Star,
+  Building,
+  FileText,
+} from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import { TypeBadge } from '../components/StatusBadge';
+import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { useCustomer } from '../hooks/useCustomers';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatAddress, formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function CustomerDetailsPage() {
+  const { customerId } = useParams<{ customerId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { customer, isLoading, error, refetch } = useCustomer(customerId);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'customers'));
+
+  // Handle new customer form
+  if (!customerId) {
+    return (
+      <PageLayout
+        title="New Customer"
+        subtitle="Add a new customer"
+        icon={<Users size={24} />}
+        headerActions={
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+        }
+      >
+        <Card>
+          <CardContent className="p-8 text-center">
+            <p className="text-muted-foreground">Customer creation form would go here</p>
+          </CardContent>
+        </Card>
+      </PageLayout>
+    );
+  }
+
+  if (isLoading) return <LoadingState message="Loading customer details..." />;
+  if (error || !customer) return <ErrorState title="Customer not found" onRetry={refetch} />;
+
+  return (
+    <PageLayout
+      title={customer.name}
+      subtitle={customer.company || customer.email}
+      icon={<Users 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 items-center gap-4">
+          <TypeBadge type={customer.type} />
+          <Badge variant={customer.isActive ? 'default' : 'secondary'}>
+            {customer.isActive ? 'Active' : 'Inactive'}
+          </Badge>
+          <div className="flex items-center gap-1">
+            <Star size={16} className="text-yellow-500 fill-yellow-500" />
+            <span className="font-medium">{customer.rating.toFixed(1)}</span>
+          </div>
+        </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>Contact Information</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <Mail size={18} className="text-muted-foreground" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">Email</p>
+                      <p className="font-medium">{customer.email}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Phone size={18} className="text-muted-foreground" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">Phone</p>
+                      <p className="font-medium">{customer.phone}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="space-y-4">
+                  {customer.company && (
+                    <div className="flex items-center gap-3">
+                      <Building size={18} className="text-muted-foreground" />
+                      <div>
+                        <p className="text-sm text-muted-foreground">Company</p>
+                        <p className="font-medium">{customer.company}</p>
+                      </div>
+                    </div>
+                  )}
+                  {customer.website && (
+                    <div>
+                      <p className="text-sm text-muted-foreground">Website</p>
+                      <a href={customer.website} className="text-primary hover:underline">
+                        {customer.website}
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MapPin size={18} /> Address
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p>{formatAddress(customer.address)}</p>
+            </CardContent>
+          </Card>
+
+          {customer.notes && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText size={18} /> Notes
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>{customer.notes}</p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Business Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {customer.businessLicense && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Business License</p>
+                  <p className="font-mono">{customer.businessLicense}</p>
+                </div>
+              )}
+              {customer.taxId && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Tax ID</p>
+                  <p className="font-mono">{customer.taxId}</p>
+                </div>
+              )}
+              <div>
+                <p className="text-sm text-muted-foreground">Preferred Contact</p>
+                <p className="capitalize">{customer.preferredContactMethod}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Marketing Opt-in</p>
+                <Badge variant={customer.marketingOptIn ? 'default' : 'secondary'}>
+                  {customer.marketingOptIn ? 'Yes' : 'No'}
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Account Info</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground">Created</p>
+                <p>{formatDate(customer.createdAt, 'full')}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Last Updated</p>
+                <p>{formatDate(customer.updatedAt, 'relative')}</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}