'use client'; /* * Vireo Next.js — Ecommerce / Customers (route "ecommerce/customers"). * * Faithful re-expression of src/html/ecommerce/customers.html: a 4-KPI strip over * a searchable, segment/location-filtered, sortable customer table with * bulk-select, a per-row actions menu (fixed-positioned, anchored to its trigger), * status pills, empty state and pagination. The Alpine x-data (axCustomers) + * teleported menu are ported to React state; classes + ARIA match the reference 1:1. */ import { useMemo, useState, type ReactElement } from 'react'; import Link from 'next/link'; import { PageHead } from '../../components/shell/PageHead'; interface Customer { id: number; name: string; email: string; initials: string; orders: number; spent: number; ltv: number; lastOrder: string; city: string; cc: string; country: string; status: string; } const CUSTOMERS: Customer[] = [ { id: 1, name: 'Camila Rossi', email: 'camila.rossi@outlook.com', initials: 'CR', orders: 42, spent: 8914.5, ltv: 11480, lastOrder: 'Jun 24, 2026', city: 'São Paulo', cc: 'BR', country: 'Brazil', status: 'VIP' }, { id: 2, name: 'Henry Whitlock', email: 'h.whitlock@fastmail.com', initials: 'HW', orders: 18, spent: 3240.0, ltv: 4120, lastOrder: 'Jun 27, 2026', city: 'Manchester', cc: 'UK', country: 'United Kingdom', status: 'Active' }, { id: 3, name: 'Amelia Hart', email: 'amelia.hart@gmail.com', initials: 'AH', orders: 12, spent: 2186.75, ltv: 2980, lastOrder: 'Jun 27, 2026', city: 'Portland', cc: 'US', country: 'United States', status: 'Active' }, { id: 4, name: 'Marcus Lindqvist', email: 'm.lindqvist@telia.se', initials: 'ML', orders: 27, spent: 5602.3, ltv: 7240, lastOrder: 'Jun 18, 2026', city: 'Stockholm', cc: 'SE', country: 'Sweden', status: 'VIP' }, { id: 5, name: 'Priya Nair', email: 'priya.nair@proton.me', initials: 'PN', orders: 9, spent: 1148.0, ltv: 1560, lastOrder: 'Jun 25, 2026', city: 'Austin', cc: 'US', country: 'United States', status: 'Active' }, { id: 6, name: 'Lena Brandt', email: 'lena.brandt@web.de', initials: 'LB', orders: 2, spent: 264.4, ltv: 310, lastOrder: 'Jun 24, 2026', city: 'Berlin', cc: 'DE', country: 'Germany', status: 'New' }, { id: 7, name: 'Daniel Cho', email: 'daniel.cho@kakao.com', initials: 'DC', orders: 1, spent: 74.0, ltv: 74, lastOrder: 'Jun 26, 2026', city: 'Seoul', cc: 'KR', country: 'South Korea', status: 'New' }, { id: 8, name: 'Tomás Herrera', email: 't.herrera@gmail.com', initials: 'TH', orders: 21, spent: 4318.9, ltv: 5680, lastOrder: 'Jun 25, 2026', city: 'Madrid', cc: 'ES', country: 'Spain', status: 'Active' }, { id: 9, name: 'Ava Sutton', email: 'ava.sutton@icloud.com', initials: 'AS', orders: 6, spent: 912.2, ltv: 1180, lastOrder: 'Jun 23, 2026', city: 'London', cc: 'UK', country: 'United Kingdom', status: 'Active' }, { id: 10, name: 'Devon Okafor', email: 'devon.okafor@gmail.com', initials: 'DO', orders: 0, spent: 0, ltv: 0, lastOrder: '—', city: 'Lagos', cc: 'NG', country: 'Nigeria', status: 'Blocked' }, { id: 11, name: 'Sofia Marchetti', email: 's.marchetti@libero.it', initials: 'SM', orders: 33, spent: 6740.0, ltv: 8910, lastOrder: 'Jun 22, 2026', city: 'Milan', cc: 'IT', country: 'Italy', status: 'VIP' }, { id: 12, name: 'Noah Bergström', email: 'noah.berg@hotmail.com', initials: 'NB', orders: 4, spent: 498.5, ltv: 640, lastOrder: 'Jun 22, 2026', city: 'Oslo', cc: 'NO', country: 'Norway', status: 'Active' }, ]; const money = (n: number) => '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const STATUS_PILL: Record = { VIP: { variant: 'accent', path: 'M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z' }, Active: { variant: 'success', path: 'M5 12l5 5l10 -10' }, New: { variant: 'info', path: 'M12 5l0 14M5 12l14 0' }, Blocked: { variant: 'danger', path: 'M5.7 5.7l12.6 12.6M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18' }, }; function StatusPill({ status }: { status: string }): ReactElement { const m = STATUS_PILL[status] || STATUS_PILL.Active; return ( {status} ); } export function Customers() { const [q, setQ] = useState(''); const [fStatus, setFStatus] = useState(''); const [fLocation, setFLocation] = useState(''); const [sort, setSort] = useState('spend-desc'); const [selected, setSelected] = useState([]); const [menu, setMenu] = useState<{ id: number; x: number; y: number } | null>(null); const filtered = useMemo(() => { let r = CUSTOMERS.filter((c) => { const term = q.trim().toLowerCase(); if (term && !(c.name.toLowerCase().includes(term) || c.email.toLowerCase().includes(term))) return false; if (fStatus && c.status !== fStatus) return false; if (fLocation && c.country !== fLocation) return false; return true; }); const by: Record number> = { 'spend-desc': (a, b) => b.spent - a.spent, 'spend-asc': (a, b) => a.spent - b.spent, 'orders-desc': (a, b) => b.orders - a.orders, recent: (a, b) => b.id - a.id, az: (a, b) => a.name.localeCompare(b.name), }; if (by[sort]) r = [...r].sort(by[sort]); return r; }, [q, fStatus, fLocation, sort]); const allSelected = () => { const ids = filtered.map((c) => c.id); return ids.length > 0 && ids.every((id) => selected.includes(id)); }; const toggleAll = (on: boolean) => setSelected(on ? filtered.map((c) => c.id) : []); const toggleSel = (id: number) => setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id])); const toggleMenu = (id: number, e: React.MouseEvent) => { if (menu?.id === id) { setMenu(null); return; } const b = (e.currentTarget as HTMLElement).getBoundingClientRect(); const de = document.documentElement, vw = de.clientWidth; const rtl = de.getAttribute('dir') === 'rtl'; setMenu({ id, x: Math.max(8, rtl ? b.left : vw - b.right), y: b.bottom + 4 }); }; return ( <> 5,914 customers — 312 new this month, 48 VIP.) as unknown as string} actions={ <> } />
{/* KPI STRIP */}
6.2%
Total customers
5,914
11.8%
New · 30 days
312
3.4%
Returning rate
64.5%
1.1%
Avg. lifetime value
$1,284
{/* CUSTOMERS TABLE */}
{/* toolbar */}
setQ(e.target.value)} style={{ paddingInlineStart: 36 }} aria-label="Search customers" />
{/* bulk bar */} {!!selected.length && (
{selected.length} selected
)} {/* table */}
{filtered.map((c) => ( ))}
toggleAll(e.target.checked)} /> Customer Orders Total spent LTV Last order Location Status Actions
toggleSel(c.id)} aria-label={'Select ' + c.name} />
{c.initials}
{c.name}
{c.email}
 {c.orders} {money(c.spent)} {money(c.ltv)} {c.lastOrder} {c.city + ', ' + c.cc}
{/* empty state */} {!filtered.length && (

No customers match your search

Try a different segment, location, or search term.

)} {/* footer / pagination */} {!!filtered.length && (
Showing {filtered.length} of {CUSTOMERS.length} on this page · 5,914 total
)}
{/* ROW ACTIONS MENU — fixed-positioned, anchored to the open trigger */} {menu !== null && ( <>
)} ); } export default Customers;