@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -2,7 +2,7 @@
  * Customer Details Page
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Users,
@@ -15,9 +15,11 @@ import {
   Building,
   FileText,
   Save,
+  Package,
+  X,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
-import { TypeBadge } from '../components/StatusBadge';
+import { TypeBadge, StatusBadge } from '../components/StatusBadge';
 import {
   Card,
   CardContent,
@@ -35,10 +37,28 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomer, useCustomers } from '../hooks/useCustomers';
+import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatAddress, formatDate } from '../utils/formatters';
+import { formatAddress, formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
+
+/**
+ * Only surface http(s) links. Anything else (javascript:, data:, mailto:, etc.)
+ * is unsafe to render as a raw href, so we drop it.
+ */
+function safeHttpUrl(raw: string | undefined): string | null {
+  if (!raw) return null;
+  const value = raw.trim();
+  const candidate = /^https?:\/\//i.test(value) ? value : `https://${value}`;
+  try {
+    const parsed = new URL(candidate);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
 
 function NewCustomerForm() {
   const { basePath, navigate } = useMoveTheWheels();
@@ -177,10 +197,77 @@ export default function CustomerDetailsPage() {
   const { customerId } = useParams<{ customerId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { customer, isLoading, error, refetch } = useCustomer(customerId);
+  const { updateCustomer } = useCustomers();
+  const { orders, isLoading: ordersLoading } = useOrders({ filters: { customerId } });
+  const { message: notice, notify } = useNotice();
+
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    company: '',
+  });
+
+  useEffect(() => {
+    if (customer) {
+      setForm({
+        name: customer.name,
+        email: customer.email,
+        phone: customer.phone,
+        company: customer.company ?? '',
+      });
+    }
+  }, [customer]);
 
   const goBack = () => navigate?.(joinPath(basePath, 'customers'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const startEdit = () => {
+    setEditError(null);
+    setEditing(true);
+  };
+
+  const cancelEdit = () => {
+    setEditError(null);
+    setEditing(false);
+    if (customer) {
+      setForm({
+        name: customer.name,
+        email: customer.email,
+        phone: customer.phone,
+        company: customer.company ?? '',
+      });
+    }
+  };
+
+  const handleSave = async () => {
+    if (!customerId) return;
+    if (!form.name.trim()) {
+      setEditError('Customer name is required.');
+      return;
+    }
+    setSaving(true);
+    setEditError(null);
+    try {
+      await updateCustomer(customerId, {
+        name: form.name.trim(),
+        email: form.email.trim(),
+        phone: form.phone.trim(),
+        company: form.company.trim() || undefined,
+      });
+      notify('Customer updated.');
+      setEditing(false);
+      refetch();
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : 'Failed to update customer.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   // Handle new customer form
   if (!customerId) {
     return <NewCustomerForm />;
@@ -199,9 +286,20 @@ export default function CustomerDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
-            <Edit size={16} /> Edit
-          </Button>
+          {editing ? (
+            <>
+              <Button variant="outline" onClick={cancelEdit} disabled={saving}>
+                <X size={16} /> Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={saving}>
+                <Save size={16} /> {saving ? 'Saving…' : 'Save'}
+              </Button>
+            </>
+          ) : (
+            <Button onClick={startEdit}>
+              <Edit size={16} /> Edit
+            </Button>
+          )}
         </div>
       }
       headerContent={
@@ -238,53 +336,112 @@ export default function CustomerDetailsPage() {
             label: 'Update contact details',
             description: 'Keep email, phone and address current.',
             icon: <Edit size={16} />,
-            onClick: () => {},
+            onClick: startEdit,
           },
         ]}
       />
 
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
           {/* Contact Information — the page's single emphasis zone */}
           <EmphasisPanel>
             <h2 className="text-base font-semibold text-text-primary mb-4">Contact Information</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {editing ? (
               <div className="space-y-4">
-                <div className="flex items-center gap-3">
-                  <Mail size={18} className="text-text-secondary" />
-                  <div>
-                    <p className="text-sm text-text-secondary">Email</p>
-                    <p className="font-medium">{customer.email}</p>
+                <FormError message={editError} />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-name">
+                      Name <span className="text-status-error-text">*</span>
+                    </Label>
+                    <Input
+                      id="edit-name"
+                      value={form.name}
+                      onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                    />
                   </div>
-                </div>
-                <div className="flex items-center gap-3">
-                  <Phone size={18} className="text-text-secondary" />
-                  <div>
-                    <p className="text-sm text-text-secondary">Phone</p>
-                    <p className="font-medium">{customer.phone}</p>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-company">Company</Label>
+                    <Input
+                      id="edit-company"
+                      value={form.company}
+                      onChange={(e) => setForm((prev) => ({ ...prev, company: e.target.value }))}
+                      placeholder="Company name (for B2B accounts)"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-email">Email</Label>
+                    <Input
+                      id="edit-email"
+                      type="email"
+                      value={form.email}
+                      onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-phone">Phone</Label>
+                    <Input
+                      id="edit-phone"
+                      value={form.phone}
+                      onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
+                    />
                   </div>
                 </div>
               </div>
-              <div className="space-y-4">
-                {customer.company && (
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
                   <div className="flex items-center gap-3">
-                    <Building size={18} className="text-text-secondary" />
+                    <Mail size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-text-secondary">Company</p>
-                      <p className="font-medium">{customer.company}</p>
+                      <p className="text-sm text-text-secondary">Email</p>
+                      <p className="font-medium">{customer.email || '—'}</p>
                     </div>
                   </div>
-                )}
-                {customer.website && (
-                  <div>
-                    <p className="text-sm text-text-secondary">Website</p>
-                    <a href={customer.website} className="text-primary hover:underline">
-                      {customer.website}
-                    </a>
+                  <div className="flex items-center gap-3">
+                    <Phone size={18} className="text-text-secondary" />
+                    <div>
+                      <p className="text-sm text-text-secondary">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-text-secondary" />
+                      <div>
+                        <p className="text-sm text-text-secondary">Company</p>
+                        <p className="font-medium">{customer.company}</p>
+                      </div>
+                    </div>
+                  )}
+                  {(() => {
+                    const website = safeHttpUrl(customer.website);
+                    if (!website) return null;
+                    return (
+                      <div>
+                        <p className="text-sm text-text-secondary">Website</p>
+                        <a
+                          href={website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary hover:underline"
+                        >
+                          {website}
+                        </a>
+                      </div>
+                    );
+                  })()}
+                </div>
               </div>
-            </div>
+            )}
           </EmphasisPanel>
 
           <Card>
@@ -310,6 +467,55 @@ export default function CustomerDetailsPage() {
               </CardContent>
             </Card>
           )}
+
+          {/* Orders for this customer */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle className="flex items-center gap-2">
+                <Package size={18} /> Orders
+              </CardTitle>
+              <Button variant="outline" size="sm" onClick={() => goTo('orders/new')}>
+                <FileText size={14} /> New order
+              </Button>
+            </CardHeader>
+            <CardContent>
+              {ordersLoading ? (
+                <p className="text-text-secondary text-center py-4">Loading orders…</p>
+              ) : orders.length > 0 ? (
+                <div className="space-y-2">
+                  {orders.map((order) => (
+                    <button
+                      key={order.id}
+                      type="button"
+                      onClick={() => goTo(`orders/${order.id}`)}
+                      className="w-full flex items-center justify-between gap-3 p-3 border rounded-lg text-left hover:bg-bg-sunken/50 transition-colors"
+                    >
+                      <div className="min-w-0">
+                        <p className="font-medium truncate">{order.orderNumber}</p>
+                        <p className="text-sm text-text-secondary">
+                          {formatDate(order.createdAt, 'relative')} ·{' '}
+                          {formatCurrency(order.pricing.total)}
+                        </p>
+                      </div>
+                      <StatusBadge status={order.status} type="order" size="sm" />
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-6">
+                  <Package size={32} className="mx-auto mb-2 text-text-secondary opacity-50" />
+                  <p className="text-text-secondary">No orders yet for this customer</p>
+                  <button
+                    type="button"
+                    onClick={() => goTo('orders/new')}
+                    className="mt-1 text-sm text-primary hover:underline"
+                  >
+                    Book their first delivery
+                  </button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
         </div>
 
         <div className="space-y-6">

package/src/movethewheels/pages/CustomersPage.tsx

@@ -2,13 +2,15 @@
  * Customers Page
  */
 
-import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
+import { useState } from 'react';
+import { Users, Plus, RefreshCw, Download, Star, UserCheck, Building2 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
 import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useCustomers } from '../hooks/useCustomers';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useCustomers, useCustomerStats } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -16,7 +18,14 @@ import type { Customer } from '../types';
 
 export default function CustomersPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { customers, totalCustomers, isLoading, refetch } = useCustomers({ limit: 100 });
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { customers, hasMore, isLoading, refetch } = useCustomers({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — never the truncated page.
+  const { stats } = useCustomerStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -85,7 +94,7 @@ export default function CustomersPage() {
   return (
     <PageLayout
       title="Customers"
-      subtitle={`${totalCustomers} customers`}
+      subtitle={`${stats.total} customers`}
       icon={<Users size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -96,7 +105,11 @@ export default function CustomersPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
+            {
+              label: 'Export',
+              icon: <Download size={16} />,
+              onSelect: () => goTo('import-export'),
+            },
           ]}
         />
       }
@@ -107,28 +120,32 @@ export default function CustomersPage() {
         next shipment.
       </PagePurpose>
 
-      {/* Customer base at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Customer base at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalCustomers}</p>
-            <p className="text-xs text-text-secondary">Total customers</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {customers.filter((c) => c.isActive).length}
-            </p>
-            <p className="text-xs text-text-secondary">Active</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {customers.filter((c) => c.type === 'b2b').length}
-            </p>
-            <p className="text-xs text-text-secondary">Business accounts</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Customer base at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Customer base at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total customers"
+            value={stats.total}
+            icon={<Users size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Active"
+            value={stats.active}
+            icon={<UserCheck size={20} />}
+            accent="success"
+            subtitle="Currently transacting"
+          />
+          <MetricCard
+            label="Business accounts"
+            value={stats.b2b}
+            icon={<Building2 size={20} />}
+            accent="blue"
+            subtitle="B2B relationships"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}
@@ -139,6 +156,14 @@ export default function CustomersPage() {
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
         onRowClick={(row) => goTo(`customers/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-people"
         emptyTitle="No customers yet"
         emptyDescription="Add your first customer to start booking deliveries for them."