'use client'; /* * Vireo Next.js — CRM / Deals Pipeline (route "crm/deals"). * * Faithful re-expression of src/html/crm/deals.html: the CRM sub-nav, a search + * owner filter + board/list segment, a drag-and-drop Kanban pipeline (5 stages + * a closed-this-quarter rail) and a slide-in deal drawer with stage stepper, * key contacts, next steps, activity and footer actions. The Alpine x-data * (axDeals) + page-specific .ax-pl-* styles are ported to React; classes + ARIA * match the reference 1:1. Drag-and-drop uses native HTML5 DnD. */ import { useMemo, useState } from 'react'; import Link from 'next/link'; import { PageHead } from '../../components/shell/PageHead'; const V = { cyan: 'var(--ax-viz-cyan)', violet: 'var(--ax-viz-violet)', pink: 'var(--ax-viz-pink)', amber: 'var(--ax-viz-amber)', emerald: 'var(--ax-viz-emerald)', }; interface Column { id: string; title: string; color: string; prob: number; } const COLUMNS: Column[] = [ { id: 'lead', title: 'Lead', color: 'var(--ax-text-subtle)', prob: 10 }, { id: 'qualified', title: 'Qualified', color: V.cyan, prob: 30 }, { id: 'proposal', title: 'Proposal', color: V.violet, prob: 55 }, { id: 'negotiation', title: 'Negotiation', color: V.amber, prob: 75 }, { id: 'closing', title: 'Closing', color: V.emerald, prob: 90 }, ]; interface Card { id: number; col: string; title: string; company: string; coMark: string; coC: string; value: number; close: string; overdue: boolean; hot: boolean; tasks: string; notes: number; who: { i: string; n: string; c: string }; coName?: string; } const ITEMS: Card[] = [ { id: 1, col: 'lead', title: 'Northwind — Platform expansion', company: 'Northwind Labs', coMark: 'NW', coC: V.cyan, value: 124000, close: 'Aug 14', overdue: false, hot: false, tasks: '0/3', notes: 1, who: { i: 'ML', n: 'Maya Lindqvist', c: V.emerald } }, { id: 2, col: 'lead', title: 'Meadow Foods — POS rollout', company: 'Meadow Foods', coMark: 'MF', coC: V.amber, value: 48000, close: 'Sep 02', overdue: false, hot: false, tasks: '', notes: 0, who: { i: 'DO', n: 'Devon Okafor', c: V.cyan } }, { id: 3, col: 'lead', title: 'Pulse Media — Retainer renewal', company: 'Pulse Media', coMark: 'PM', coC: V.violet, value: 36000, close: 'Aug 20', overdue: false, hot: false, tasks: '1/2', notes: 2, who: { i: 'AS', n: 'Ava Sutton', c: V.emerald } }, { id: 4, col: 'qualified', title: 'Brightline — Risk suite', company: 'Brightline Capital', coMark: 'BC', coC: V.violet, value: 186000, close: 'Jul 30', overdue: false, hot: true, tasks: '2/4', notes: 5, who: { i: 'TH', n: 'Tomás Herrera', c: V.violet } }, { id: 5, col: 'qualified', title: 'Clearbox — Seat upgrade', company: 'Clearbox', coMark: 'CB', coC: V.cyan, value: 74000, close: 'Aug 08', overdue: false, hot: false, tasks: '1/3', notes: 1, who: { i: 'TH', n: 'Tomás Herrera', c: V.violet } }, { id: 6, col: 'qualified', title: 'Harbor — Logistics module', company: 'Harbor Freight Co', coMark: 'HF', coC: V.amber, value: 98000, close: 'Sep 10', overdue: false, hot: false, tasks: '', notes: 0, who: { i: 'DO', n: 'Devon Okafor', c: V.cyan } }, { id: 7, col: 'proposal', title: 'Meridian — EHR integration', company: 'Meridian Health', coMark: 'MH', coC: V.pink, value: 241000, close: 'Jul 24', overdue: false, hot: true, tasks: '3/5', notes: 8, who: { i: 'ML', n: 'Maya Lindqvist', c: V.emerald } }, { id: 8, col: 'proposal', title: 'Loop — Fleet analytics', company: 'Loop Robotics', coMark: 'LR', coC: V.cyan, value: 132000, close: 'Aug 03', overdue: false, hot: false, tasks: '2/4', notes: 3, who: { i: 'TH', n: 'Tomás Herrera', c: V.violet } }, { id: 9, col: 'negotiation', title: 'Ridgeline — Grid monitoring', company: 'Ridgeline Energy', coMark: 'RE', coC: V.pink, value: 206000, close: 'Jul 18', overdue: true, hot: true, tasks: '4/5', notes: 6, who: { i: 'ML', n: 'Maya Lindqvist', c: V.emerald } }, { id: 10, col: 'negotiation', title: 'Postoak — Claims automation', company: 'Postoak Insurance', coMark: 'PI', coC: V.emerald, value: 158000, close: 'Jul 27', overdue: false, hot: false, tasks: '3/4', notes: 4, who: { i: 'AS', n: 'Ava Sutton', c: V.emerald } }, { id: 11, col: 'closing', title: 'Crate & Co — Annual contract', company: 'Crate & Co', coMark: 'CC', coC: V.amber, value: 128400, close: 'Jul 12', overdue: false, hot: false, tasks: '5/5', notes: 2, who: { i: 'AS', n: 'Ava Sutton', c: V.emerald } }, { id: 12, col: 'closing', title: 'Studioform — Brand system', company: 'Studioform', coMark: 'SF', coC: V.emerald, value: 64000, close: 'Jul 09', overdue: false, hot: false, tasks: '4/4', notes: 1, who: { i: 'DO', n: 'Devon Okafor', c: V.cyan } }, ]; const money = (v: number) => { if (v >= 1000000) return '$' + (v / 1000000).toFixed(v % 1000000 === 0 ? 0 : 2) + 'M'; return v >= 1000 ? '$' + (v / 1000).toFixed(v % 1000 === 0 ? 0 : 1) + 'K' : '$' + v; }; const PL_STYLES = ` .ax-drawer-scrim { position:fixed; inset:0; z-index:120; display:flex; justify-content:flex-end; background:var(--ax-backdrop); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .ax-pl-col { flex:0 0 300px; width:300px; display:flex; flex-direction:column; background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-radius:var(--ax-radius-lg); padding:var(--ax-space-3); transition:background var(--ax-motion-fast) var(--ax-ease-standard), box-shadow var(--ax-motion-fast) var(--ax-ease-standard); } .ax-pl-col--over { background:var(--ax-accent-wash); box-shadow:inset 0 0 0 2px var(--ax-accent); } .ax-pl-col__body { display:flex; flex-direction:column; gap:var(--ax-space-3); min-height:40px; } .ax-pl-card { position:relative; display:flex; flex-direction:column; gap:var(--ax-space-2); padding:var(--ax-space-3); background:var(--ax-surface-solid); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); box-shadow:var(--ax-shadow-sm); cursor:grab; text-align:left; transition:box-shadow var(--ax-motion-fast) var(--ax-ease-standard), transform var(--ax-motion-fast) var(--ax-ease-standard); } .ax-pl-card:hover { box-shadow:var(--ax-shadow-md); } .ax-pl-card:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ax-canvas), 0 0 0 4px var(--ax-focus-ring); } .ax-pl-card:active { cursor:grabbing; } .ax-pl-card--ghost { opacity:.4; } .ax-pl-card__title { color:var(--ax-text-strong); font-size:var(--ax-text-sm); font-weight:var(--ax-weight-medium); line-height:1.4; } .ax-pl-add { display:inline-flex; align-items:center; gap:var(--ax-space-2); width:100%; padding:var(--ax-space-2) var(--ax-space-3); font-size:var(--ax-text-sm); color:var(--ax-text-muted); background:transparent; border:1px dashed var(--ax-border-strong); border-radius:var(--ax-radius-md); cursor:pointer; transition:color var(--ax-motion-fast), background var(--ax-motion-fast); } .ax-pl-add:hover { color:var(--ax-accent); background:var(--ax-fill-hover); } .ax-slide-in { animation:axSlideIn .18s var(--ax-ease-standard); } @keyframes axSlideIn { from { transform:translateX(24px); opacity:0; } to { transform:translateX(0); opacity:1; } } @media (prefers-reduced-motion: reduce){ .ax-pl-card, .ax-slide-in { transition:none; animation:none; } } `; export function Deals() { const [items, setItems] = useState(ITEMS); const [q, setQ] = useState(''); const [fOwner, setFOwner] = useState(''); const [draggingId, setDraggingId] = useState(null); const [dragOverCol, setDragOverCol] = useState(null); const [drawerOpen, setDrawerOpen] = useState(false); const [active, setActive] = useState>({}); const cards = (colId: string) => { const t = q.trim().toLowerCase(); return items.filter((c) => c.col === colId && (!fOwner || c.who.n === fOwner) && (!t || c.title.toLowerCase().includes(t) || c.company.toLowerCase().includes(t))); }; const colTotal = (colId: string) => cards(colId).reduce((s, c) => s + c.value, 0); const totalOpen = useMemo(() => items.reduce((s, c) => s + c.value, 0), [items]); const dragStart = (id: number) => setDraggingId(id); const dragEnd = () => { setDraggingId(null); setDragOverCol(null); }; const drop = (colId: string) => { if (draggingId !== null) setItems((is) => is.map((i) => (i.id === draggingId ? { ...i, col: colId } : i))); dragEnd(); }; const moveActive = (colId: string) => { setActive((a) => ({ ...a, col: colId })); if (active.id != null) setItems((is) => is.map((i) => (i.id === active.id ? { ...i, col: colId } : i))); }; const winActive = () => { if (active.id != null) setItems((is) => is.filter((x) => x.id !== active.id)); setDrawerOpen(false); }; const openEdit = (card: Card) => { setActive(card); setDrawerOpen(true); }; const openNew = (colId: string) => { setActive({ col: colId, title: 'New deal', company: '—', value: 0, close: '', who: { n: 'Unassigned', i: '?', c: 'var(--ax-text-subtle)' } }); setDrawerOpen(true); }; const activeColTitle = (COLUMNS.find((c) => c.id === active.col) || ({} as Column)).title; return ( <> {items.length} open deals · {money(totalOpen)} weighted value · Q3 close target $1.2M.) as unknown as string} actions={ <> } /> {/* CRM SUB-NAV */} {/* TOOLBAR */}
setQ(e.target.value)} style={{ paddingInlineStart: 36 }} aria-label="Search deals" />
{/* PIPELINE BOARD */}
{COLUMNS.map((col) => (
{ e.preventDefault(); setDragOverCol(col.id); }} onDragLeave={() => { if (dragOverCol === col.id) setDragOverCol(null); }} onDrop={() => drop(col.id)} role="region" aria-label={col.title + ' stage'} > {/* column header */}
{col.title} {cards(col.id).length}
{money(colTotal(col.id))} {col.prob + '% prob'}
{/* cards */}
{cards(col.id).map((card) => (
dragStart(card.id)} onDragEnd={dragEnd} onClick={() => openEdit(card)} tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') openEdit(card); }} role="button" aria-label={card.title + ', ' + money(card.value)} >

{card.title}

{card.hot && Hot}
{card.coMark} {card.company}
{money(card.value)} {card.close}
{card.tasks && ( {card.tasks} )} {!!card.notes && ( {card.notes} )}
{card.who.i}
))}
))} {/* won / lost summary rail */}
Closed · Q3
Won
$842K
14 deals · 64% win rate
Lost
$214K
8 deals · top reason: price
Forecast vs target
$842K of $1.2M committed
{/* DEAL DRAWER */} {drawerOpen && (
setDrawerOpen(false)}>
e.stopPropagation()} style={{ width: 'min(540px,100%)', height: '100%', borderRadius: 0, overflow: 'auto' }}>
{activeColTitle + ' · ' + (active.coName || active.company)}

{active.title}

{/* value + meta */}
Deal value{money(active.value || 0)}
Expected close{active.close || '—'}
{/* stage stepper */}
Stage
{COLUMNS.map((c) => ( ))}
{/* key people */}
Key contacts
  • ML Maya LindqvistEconomic buyer · CFO Champion
  • TH Tomás HerreraTechnical evaluator Influencer
{/* next steps */}
Next steps 2/4
  • Send pricing proposal
  • Loop in procurement
  • Security review call
  • Redline contract
{/* activity */}
Activity

  • Ava Sutton moved deal to Proposal

    3h ago

  • Discovery call · 32 min with Maya

    Yesterday