@burdenoff/microfe-movethewheels 2026.925.1 → 2026.925.3

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -17,6 +17,7 @@ import {
   Save,
   Package,
   X,
+  Trash2,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { TypeBadge, StatusBadge } from '../components/StatusBadge';
@@ -26,7 +27,6 @@ import {
   CardHeader,
   CardTitle,
   Button,
-  Badge,
   Input,
   Label,
   Select,
@@ -35,7 +35,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -44,34 +54,44 @@ import { joinPath, buildOrderCustomerPath, getSafeCustomerReturnPath } from '../
 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;
-  }
+interface CustomerFormState {
+  name: string;
+  type: 'b2b' | 'b2c';
+  email: string;
+  phone: string;
+  company: string;
+  street: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+  businessLicense: string;
+  taxId: string;
+  rating: string;
 }
 
+const emptyCustomerForm: CustomerFormState = {
+  name: '',
+  type: 'b2c',
+  email: '',
+  phone: '',
+  company: '',
+  street: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  country: '',
+  businessLicense: '',
+  taxId: '',
+  rating: '',
+};
+
 function NewCustomerForm() {
   const { basePath, navigate } = useMoveTheWheels();
   const [searchParams] = useSearchParams();
   const returnTo = getSafeCustomerReturnPath(searchParams.get('returnTo'));
   const { createCustomer } = useCustomers();
-  const [form, setForm] = useState({
-    name: '',
-    type: 'b2c' as 'b2b' | 'b2c',
-    email: '',
-    phone: '',
-    company: '',
-  });
+  const [form, setForm] = useState<CustomerFormState>(emptyCustomerForm);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -92,6 +112,19 @@ function NewCustomerForm() {
         email: form.email.trim() || undefined,
         phone: form.phone.trim() || undefined,
         company: form.company.trim() || undefined,
+        address:
+          form.street || form.city || form.state || form.postalCode || form.country
+            ? {
+                street: form.street.trim(),
+                city: form.city.trim(),
+                state: form.state.trim(),
+                postalCode: form.postalCode.trim(),
+                country: form.country.trim(),
+              }
+            : undefined,
+        businessLicense: form.businessLicense.trim() || undefined,
+        taxId: form.taxId.trim() || undefined,
+        rating: form.rating ? Number(form.rating) : undefined,
       });
       const destination = returnTo
         ? buildOrderCustomerPath(returnTo, created.id)
@@ -194,37 +227,153 @@ function NewCustomerForm() {
             </div>
           </div>
         </EmphasisPanel>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin size={18} /> Address
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="street">Street</Label>
+              <Input
+                id="street"
+                value={form.street}
+                onChange={(e) => setForm((prev) => ({ ...prev, street: e.target.value }))}
+                placeholder="123 Main St"
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="city">City</Label>
+                <Input
+                  id="city"
+                  value={form.city}
+                  onChange={(e) => setForm((prev) => ({ ...prev, city: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="state">State</Label>
+                <Input
+                  id="state"
+                  value={form.state}
+                  onChange={(e) => setForm((prev) => ({ ...prev, state: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="postalCode">Postal Code</Label>
+                <Input
+                  id="postalCode"
+                  value={form.postalCode}
+                  onChange={(e) => setForm((prev) => ({ ...prev, postalCode: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="country">Country</Label>
+                <Input
+                  id="country"
+                  value={form.country}
+                  onChange={(e) => setForm((prev) => ({ ...prev, country: e.target.value }))}
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText size={18} /> Business Details
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="businessLicense">Business License</Label>
+                <Input
+                  id="businessLicense"
+                  value={form.businessLicense}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, businessLicense: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="taxId">Tax ID</Label>
+                <Input
+                  id="taxId"
+                  value={form.taxId}
+                  onChange={(e) => setForm((prev) => ({ ...prev, taxId: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="rating">Rating (0–5)</Label>
+                <Input
+                  id="rating"
+                  type="number"
+                  min={0}
+                  max={5}
+                  step={0.1}
+                  value={form.rating}
+                  onChange={(e) => setForm((prev) => ({ ...prev, rating: e.target.value }))}
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
       </form>
     </PageLayout>
   );
 }
 
+function customerToForm(customer: {
+  name: string;
+  email: string;
+  phone: string;
+  company?: string;
+  type: 'b2b' | 'b2c';
+  address: { street: string; city: string; state: string; postalCode: string; country: string };
+  businessLicense?: string;
+  taxId?: string;
+  rating: number;
+}): CustomerFormState {
+  return {
+    name: customer.name,
+    email: customer.email,
+    phone: customer.phone,
+    company: customer.company ?? '',
+    type: customer.type,
+    street: customer.address.street,
+    city: customer.address.city,
+    state: customer.address.state,
+    postalCode: customer.address.postalCode,
+    country: customer.address.country,
+    businessLicense: customer.businessLicense ?? '',
+    taxId: customer.taxId ?? '',
+    rating: customer.rating ? String(customer.rating) : '',
+  };
+}
+
 export default function CustomerDetailsPage() {
   const { customerId } = useParams<{ customerId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { customer, isLoading, error, refetch } = useCustomer(customerId);
-  const { updateCustomer } = useCustomers();
+  const { updateCustomer, deleteCustomer } = 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: '',
-  });
+  const [form, setForm] = useState<CustomerFormState>(emptyCustomerForm);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   useEffect(() => {
     if (customer) {
-      setForm({
-        name: customer.name,
-        email: customer.email,
-        phone: customer.phone,
-        company: customer.company ?? '',
-      });
+      setForm(customerToForm(customer));
     }
   }, [customer]);
 
@@ -240,12 +389,7 @@ export default function CustomerDetailsPage() {
     setEditError(null);
     setEditing(false);
     if (customer) {
-      setForm({
-        name: customer.name,
-        email: customer.email,
-        phone: customer.phone,
-        company: customer.company ?? '',
-      });
+      setForm(customerToForm(customer));
     }
   };
 
@@ -263,6 +407,17 @@ export default function CustomerDetailsPage() {
         email: form.email.trim(),
         phone: form.phone.trim(),
         company: form.company.trim() || undefined,
+        type: form.type,
+        address: {
+          street: form.street.trim(),
+          city: form.city.trim(),
+          state: form.state.trim(),
+          postalCode: form.postalCode.trim(),
+          country: form.country.trim(),
+        },
+        businessLicense: form.businessLicense.trim() || undefined,
+        taxId: form.taxId.trim() || undefined,
+        rating: form.rating ? Number(form.rating) : undefined,
       });
       notify('Customer updated.');
       setEditing(false);
@@ -274,6 +429,20 @@ export default function CustomerDetailsPage() {
     }
   };
 
+  const handleDelete = async () => {
+    if (!customerId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteCustomer(customerId);
+      setDeleteOpen(false);
+      goBack();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete customer.');
+      setDeleting(false);
+    }
+  };
+
   // Handle new customer form
   if (!customerId) {
     return <NewCustomerForm />;
@@ -311,13 +480,12 @@ export default function CustomerDetailsPage() {
       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-status-warning-text fill-current" />
-            <span className="font-medium">{customer.rating.toFixed(1)}</span>
-          </div>
+          {customer.rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star size={16} className="text-status-warning-text fill-current" />
+              <span className="font-medium">{customer.rating.toFixed(1)}</span>
+            </div>
+          )}
         </div>
       }
     >
@@ -398,6 +566,95 @@ export default function CustomerDetailsPage() {
                       onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
                     />
                   </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-type">Customer Type</Label>
+                    <Select
+                      value={form.type}
+                      onValueChange={(value) =>
+                        setForm((prev) => ({ ...prev, type: value as 'b2b' | 'b2c' }))
+                      }
+                    >
+                      <SelectTrigger id="edit-type">
+                        <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="edit-rating">Rating (0–5)</Label>
+                    <Input
+                      id="edit-rating"
+                      type="number"
+                      min={0}
+                      max={5}
+                      step={0.1}
+                      value={form.rating}
+                      onChange={(e) => setForm((prev) => ({ ...prev, rating: e.target.value }))}
+                    />
+                  </div>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-street">Street</Label>
+                    <Input
+                      id="edit-street"
+                      value={form.street}
+                      onChange={(e) => setForm((prev) => ({ ...prev, street: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-city">City</Label>
+                    <Input
+                      id="edit-city"
+                      value={form.city}
+                      onChange={(e) => setForm((prev) => ({ ...prev, city: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-state">State</Label>
+                    <Input
+                      id="edit-state"
+                      value={form.state}
+                      onChange={(e) => setForm((prev) => ({ ...prev, state: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-postalCode">Postal Code</Label>
+                    <Input
+                      id="edit-postalCode"
+                      value={form.postalCode}
+                      onChange={(e) => setForm((prev) => ({ ...prev, postalCode: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-country">Country</Label>
+                    <Input
+                      id="edit-country"
+                      value={form.country}
+                      onChange={(e) => setForm((prev) => ({ ...prev, country: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-businessLicense">Business License</Label>
+                    <Input
+                      id="edit-businessLicense"
+                      value={form.businessLicense}
+                      onChange={(e) =>
+                        setForm((prev) => ({ ...prev, businessLicense: e.target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-taxId">Tax ID</Label>
+                    <Input
+                      id="edit-taxId"
+                      value={form.taxId}
+                      onChange={(e) => setForm((prev) => ({ ...prev, taxId: e.target.value }))}
+                    />
+                  </div>
                 </div>
               </div>
             ) : (
@@ -428,23 +685,6 @@ export default function CustomerDetailsPage() {
                       </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>
             )}
@@ -457,23 +697,10 @@ export default function CustomerDetailsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <p>{formatAddress(customer.address)}</p>
+              <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>
-          )}
-
           {/* Orders for this customer */}
           <Card>
             <CardHeader className="flex flex-row items-center justify-between">
@@ -529,35 +756,27 @@ export default function CustomerDetailsPage() {
         </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-text-secondary">Business License</p>
-                  <p className="font-mono">{customer.businessLicense}</p>
-                </div>
-              )}
-              {customer.taxId && (
-                <div>
-                  <p className="text-sm text-text-secondary">Tax ID</p>
-                  <p className="font-mono">{customer.taxId}</p>
-                </div>
-              )}
-              <div>
-                <p className="text-sm text-text-secondary">Preferred Contact</p>
-                <p className="capitalize">{customer.preferredContactMethod}</p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Marketing Opt-in</p>
-                <Badge variant={customer.marketingOptIn ? 'default' : 'secondary'}>
-                  {customer.marketingOptIn ? 'Yes' : 'No'}
-                </Badge>
-              </div>
-            </CardContent>
-          </Card>
+          {(customer.businessLicense || customer.taxId) && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Business Details</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {customer.businessLicense && (
+                  <div>
+                    <p className="text-sm text-text-secondary">Business License</p>
+                    <p className="font-mono">{customer.businessLicense}</p>
+                  </div>
+                )}
+                {customer.taxId && (
+                  <div>
+                    <p className="text-sm text-text-secondary">Tax ID</p>
+                    <p className="font-mono">{customer.taxId}</p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
 
           <Card>
             <CardHeader>
@@ -574,8 +793,56 @@ export default function CustomerDetailsPage() {
               </div>
             </CardContent>
           </Card>
+
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Customer
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this customer from your account. Their past orders stay on record. This
+                cannot be undone from here.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this customer
+              </Button>
+            </CardContent>
+          </Card>
         </div>
       </div>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this customer?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {customer.name} from your account. It cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete customer'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }

package/src/movethewheels/pages/CustomersPage.tsx

@@ -3,12 +3,12 @@
  */
 
 import { useState } from 'react';
-import { Users, Plus, RefreshCw, Download, Star, UserCheck, Building2 } from 'lucide-react';
+import { Users, Plus, RefreshCw, Download, Star, 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 { Avatar, AvatarFallback, Button } from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomers, useCustomerStats } from '../hooks/useCustomers';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
@@ -77,15 +77,6 @@ export default function CustomersPage() {
         </div>
       ),
     },
-    {
-      id: 'status',
-      header: 'Status',
-      cell: (row) => (
-        <Badge variant={row.isActive ? 'default' : 'secondary'}>
-          {row.isActive ? 'Active' : 'Inactive'}
-        </Badge>
-      ),
-    },
     {
       id: 'created',
       header: 'Created',
@@ -135,11 +126,11 @@ export default function CustomersPage() {
             accent="brand"
           />
           <MetricCard
-            label="Active"
-            value={stats.active}
-            icon={<UserCheck size={20} />}
+            label="Avg. rating"
+            value={stats.avgRating > 0 ? stats.avgRating.toFixed(1) : '—'}
+            icon={<Star size={20} />}
             accent="success"
-            subtitle="Currently transacting"
+            subtitle="Across all customers"
           />
           <MetricCard
             label="Business accounts"