'use client'; /* * Vireo Next.js — CRM / Companies (route "crm/companies"). * * Faithful re-expression of src/html/crm/companies.html: the CRM sub-nav, a * 4-KPI row, then a searchable, industry-filtered, sortable accounts panel that * toggles between a table and a card grid, with bulk-select, a fixed-positioned * actions menu, status pills, an empty state, a paginated footer, and a * New-company modal. The Alpine x-data (axCompanies) is ported to React state; * classes + ARIA match the reference 1:1. */ import { useMemo, useState, type ReactElement } from 'react'; import { PageHead } from '../../components/shell/PageHead'; const C = { 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 Company { id: string; name: string; mark: string; domain: string; industry: string; size: number; deals: number; value: number; owner: string; ownerI: string; ownerC: string; status: string; c: string; } const ROWS: Company[] = [ { id: 'co_01', name: 'Northwind Labs', mark: 'NW', domain: 'northwind.io', industry: 'SaaS', size: 240, deals: 6, value: 512000, owner: 'Maya Lindqvist', ownerI: 'ML', ownerC: C.emerald, status: 'Customer', c: C.cyan }, { id: 'co_02', name: 'Brightline Capital', mark: 'BC', domain: 'brightline.co', industry: 'Fintech', size: 118, deals: 4, value: 386000, owner: 'Tomás Herrera', ownerI: 'TH', ownerC: C.violet, status: 'Prospect', c: C.violet }, { id: 'co_03', name: 'Crate & Co', mark: 'CC', domain: 'crateco.com', industry: 'E-commerce', size: 64, deals: 3, value: 128400, owner: 'Ava Sutton', ownerI: 'AS', ownerC: C.emerald, status: 'Customer', c: C.amber }, { id: 'co_04', name: 'Meridian Health', mark: 'MH', domain: 'meridianhealth.org', industry: 'Healthcare', size: 512, deals: 5, value: 441000, owner: 'Maya Lindqvist', ownerI: 'ML', ownerC: C.emerald, status: 'Negotiation', c: C.pink }, { id: 'co_05', name: 'Studioform', mark: 'SF', domain: 'studioform.de', industry: 'Agency', size: 28, deals: 2, value: 64000, owner: 'Devon Okafor', ownerI: 'DO', ownerC: C.cyan, status: 'Prospect', c: C.emerald }, { id: 'co_06', name: 'Loop Robotics', mark: 'LR', domain: 'looprobotics.com', industry: 'Manufacturing', size: 340, deals: 4, value: 298000, owner: 'Tomás Herrera', ownerI: 'TH', ownerC: C.violet, status: 'Customer', c: C.cyan }, { id: 'co_07', name: 'Pulse Media', mark: 'PM', domain: 'pulse.media', industry: 'Agency', size: 46, deals: 1, value: 38000, owner: 'Ava Sutton', ownerI: 'AS', ownerC: C.emerald, status: 'At risk', c: C.violet }, { id: 'co_08', name: 'Harbor Freight Co', mark: 'HF', domain: 'harborfreight.co', industry: 'E-commerce', size: 156, deals: 3, value: 174000, owner: 'Devon Okafor', ownerI: 'DO', ownerC: C.cyan, status: 'Customer', c: C.amber }, { id: 'co_09', name: 'Ridgeline Energy', mark: 'RE', domain: 'ridgeline.energy', industry: 'Manufacturing', size: 780, deals: 2, value: 206000, owner: 'Maya Lindqvist', ownerI: 'ML', ownerC: C.emerald, status: 'Negotiation', c: C.pink }, { id: 'co_10', name: 'Clearbox', mark: 'CB', domain: 'clearbox.app', industry: 'SaaS', size: 92, deals: 5, value: 221500, owner: 'Tomás Herrera', ownerI: 'TH', ownerC: C.violet, status: 'Prospect', c: C.cyan }, { id: 'co_11', name: 'Postoak Insurance', mark: 'PI', domain: 'postoak.com', industry: 'Fintech', size: 430, deals: 3, value: 158000, owner: 'Ava Sutton', ownerI: 'AS', ownerC: C.emerald, status: 'Customer', c: C.emerald }, { id: 'co_12', name: 'Meadow Foods', mark: 'MF', domain: 'meadowfoods.co', industry: 'E-commerce', size: 210, deals: 2, value: 84000, owner: 'Devon Okafor', ownerI: 'DO', ownerC: C.cyan, status: 'At risk', c: C.amber }, ]; const PER_PAGE = 8; const money = (v: number) => (v >= 1000 ? '$' + (v / 1000).toFixed(v % 1000 === 0 ? 0 : 1) + 'K' : '$' + v); const statusClass = (s: string) => ({ Customer: 'ax-badge--success', Prospect: 'ax-badge--info', Negotiation: 'ax-badge--accent', 'At risk': 'ax-badge--danger' } as Record)[s] || 'ax-badge--neutral'; function SortGlyph({ active, dir }: { active: boolean; dir: 'asc' | 'desc' }): ReactElement { if (!active) return ; return dir === 'asc' ? : ; } export function Companies() { const [q, setQ] = useState(''); const [fIndustry, setFIndustry] = useState(''); const [view, setView] = useState<'table' | 'grid'>('table'); const [page, setPage] = useState(1); const [sortKey, setSortKey] = useState<'name' | 'deals' | 'value'>('value'); const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc'); const [selected, setSelected] = useState([]); const [menu, setMenu] = useState<{ id: string; x: number; y: number } | null>(null); const [addOpen, setAddOpen] = useState(false); const filtered = useMemo(() => { const t = q.trim().toLowerCase(); const r = ROWS.filter((x) => { if (fIndustry && x.industry !== fIndustry) return false; if (t && !(x.name.toLowerCase().includes(t) || x.owner.toLowerCase().includes(t) || x.domain.toLowerCase().includes(t))) return false; return true; }); const dir = sortDir === 'asc' ? 1 : -1; return [...r].sort((a, b) => { const va = a[sortKey], vb = b[sortKey]; return typeof va === 'number' && typeof vb === 'number' ? (va - vb) * dir : String(va).localeCompare(String(vb)) * dir; }); }, [q, fIndustry, sortKey, sortDir]); const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE)); const safePage = Math.min(page, totalPages); const paged = filtered.slice((safePage - 1) * PER_PAGE, safePage * PER_PAGE); const rangeStart = filtered.length ? (safePage - 1) * PER_PAGE + 1 : 0; const rangeEnd = Math.min(safePage * PER_PAGE, filtered.length); const pageList = (): (number | '…')[] => { const tp = totalPages, p = safePage, out: (number | '…')[] = []; if (tp <= 7) { for (let i = 1; i <= tp; i++) out.push(i); return out; } out.push(1); if (p > 3) out.push('…'); for (let i = Math.max(2, p - 1); i <= Math.min(tp - 1, p + 1); i++) out.push(i); if (p < tp - 2) out.push('…'); out.push(tp); return out; }; const sortBy = (k: 'name' | 'deals' | 'value') => { if (sortKey === k) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc')); else { setSortKey(k); setSortDir('asc'); } setPage(1); }; const ariaSort = (k: string): 'ascending' | 'descending' | 'none' => (sortKey === k ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'); const pagedIds = paged.map((r) => r.id); const allSelected = pagedIds.length > 0 && pagedIds.every((id) => selected.includes(id)); const someSelected = pagedIds.filter((id) => selected.includes(id)).length > 0 && !allSelected; const toggleAll = (on: boolean) => setSelected((s) => (on ? [...new Set([...s, ...pagedIds])] : s.filter((id) => !pagedIds.includes(id)))); const toggleSel = (id: string) => setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id])); const toggleMenu = (id: string, e: React.MouseEvent) => { if (menu?.id === id) { setMenu(null); return; } const b = e.currentTarget.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 ( <> {ROWS.length} accounts in your pipeline — $2.84M open deal value.) as unknown as string} actions={ <> } /> {/* CRM SUB-NAV */} {/* KPI ROW */}
6.2%
Total Companies
128
4.1%
Active Accounts
94
9.8%
Open Deal Value
$2.84M
1.4%
At Churn Risk
7
{/* CONTENT */}
{/* toolbar */}

All Companies

{filtered.length} of {ROWS.length} shown

{ setQ(e.target.value); setPage(1); }} style={{ paddingInlineStart: 34 }} aria-label="Search companies" />
{/* bulk bar */} {!!selected.length && (
{selected.length} selected
)} {/* TABLE VIEW */} {view === 'table' && (
{paged.map((r) => ( ))}
Companies, sortable and searchable
{ if (el) el.indeterminate = someSelected; }} onChange={(e) => toggleAll(e.target.checked)} /> sortBy('name')}>Company Industry sortBy('deals')}>Deals sortBy('value')}>Open value Owner Status Actions
toggleSel(r.id)} aria-label={'Select ' + r.name} />
{r.mark}
{r.name}
{r.domain}
 {r.industry} {r.deals} {money(r.value)}
{r.ownerI} {r.owner}
{r.status}
)} {/* CARD VIEW */} {view === 'grid' && (
{paged.map((r) => (
{r.mark}
{r.name}
{r.domain}
{r.status}
{r.industry} {r.size + ' staff'}
Open deals{r.deals}
Value{money(r.value)}
{r.ownerI} {r.owner}
Open →
))}
)} {/* empty */} {!filtered.length && (

No companies found

No accounts match your search and filters.

)} {/* footer */} {!!filtered.length && (
Showing {rangeStart}–{rangeEnd} of {filtered.length}
)}
{/* ROW ACTIONS MENU */} {menu !== null && ( <>
)} {/* NEW COMPANY MODAL */} {addOpen && (
{ if (e.key === 'Escape') setAddOpen(false); }}>
)} ); } export default Companies;