61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T6efa,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Stage = "Lead" | "Qualified" | "Proposal" | "Won" | "Lost"; type Field = "email" | "phone" | "owner" | "value" | "location"; export interface DrawerRecord { id: string; name: string; company: string; stage: Stage; value: number; owner: string; email: string; phone: string; location: string; lastContact: string; color: string; activity: { id: string; kind: "email" | "call" | "meeting" | "stage"; text: string; when: string }[]; notes: { id: string; text: string; when: string; by: string }[]; } export interface RecordDetailDrawerProps { records?: DrawerRecord[]; owners?: string[]; defaultOpenId?: string | null; onRecordChange?: (record: DrawerRecord) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", panel: "#111111", row: "rgba(255,255,255,0.03)", sel: "rgba(255,255,255,0.06)", border: "rgba(255,255,255,0.08)", input: "#0D0D0D", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", ring: "rgba(245,244,241,0.6)", scrim: "rgba(0,0,0,0.45)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", panel: "#FFFFFF", row: "rgba(10,10,10,0.02)", sel: "rgba(10,10,10,0.05)", border: "rgba(10,10,10,0.09)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", ring: "rgba(10,10,10,0.5)", scrim: "rgba(10,10,10,0.18)" }, }; const STAGES: Stage[] = ["Lead", "Qualified", "Proposal", "Won", "Lost"]; const STAGE_COLOR: Record = { Lead: "#A1A1AA", Qualified: "#60A5FA", Proposal: "#FBBF24", Won: "#34D399", Lost: "#F87171" }; const OWNERS = ["Lena Brandt", "Daniel Reyes", "Mia Okafor", "Tomás Ferreira"]; const rec = (id: string, name: string, company: string, stage: Stage, value: number, owner: string, location: string, lastContact: string, color: string): DrawerRecord => ({ id, name, company, stage, value, owner, email: `${name.split(" ")[0].toLowerCase()}@${company.toLowerCase().replace(/[^a-z]/g, "")}.com`, phone: `+1 415 555 0${id.padStart(3, "1").slice(-3)}`, location, lastContact, color, activity: [ { id: `${id}a1`, kind: "email", text: `Sent pricing for ${company}`, when: "2h ago" }, { id: `${id}a2`, kind: "call", text: "Discovery call, 32 min", when: "Yesterday" }, { id: `${id}a3`, kind: "stage", text: `Moved to ${stage}`, when: "Nov 6" }, { id: `${id}a4`, kind: "meeting", text: "Demo with their ops team", when: "Nov 3" }, ], notes: [{ id: `${id}n1`, text: "Budget is approved for Q1. Decision maker is the COO; legal review takes about two weeks.", when: "Nov 8", by: owner }], }); const RECORDS: DrawerRecord[] = [ rec("1", "Amara Osei", "Kestrel Labs", "Proposal", 48000, "Lena Brandt", "Oakland, CA", "2h ago", "#60A5FA"), rec("2", "Jonas Weber", "Ferro & Co", "Qualified", 22000, "Daniel Reyes", "Berlin, DE", "Yesterday", "#F472B6"), rec("3", "Priya Raman", "Atlas Freight", "Won", 76000, "Mia Okafor", "Austin, TX", "Nov 9", "#34D399"), rec("4", "Luca Moretti", "Vento Bikes", "Lead", 9000, "Tomás Ferreira", "Milan, IT", "Nov 8", "#FBBF24"), rec("5", "Hana Sato", "Mirai Health", "Proposal", 54000, "Lena Brandt", "Osaka, JP", "Nov 7", "#A78BFA"), rec("6", "Diego Alvarez", "Solaria Energy", "Lost", 31000, "Daniel Reyes", "Madrid, ES", "Nov 2", "#F87171"), rec("7", "Grace Kim", "Northpine Studio", "Qualified", 18500, "Mia Okafor", "Seattle, WA", "Oct 30", "#2DD4BF"), ]; const money = (n: number) => `$${n.toLocaleString("en-US")}`; const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join(""); const ACT_ICON = { email: "M3 7l9 6 9-6M3 6h18v12H3z", call: "M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2", meeting: "M4 5h16v14H4zM4 10h16M9 3v4M15 3v4", stage: "M5 12h14m-5-5 5 5-5 5" } as const; export function RecordDetailDrawer({ records: initial = RECORDS, owners = OWNERS, defaultOpenId = "1", onRecordChange, theme = "dark", className }: RecordDetailDrawerProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [records, setRecords] = React.useState(initial); const [openId, setOpenId] = React.useState(defaultOpenId); const [tab, setTab] = React.useState<"overview" | "activity" | "notes">("overview"); const [editing, setEditing] = React.useState(null); const [draft, setDraft] = React.useState(""); const [saved, setSaved] = React.useState(null); const [note, setNote] = React.useState(""); const [copied, setCopied] = React.useState(false); const rootRef = React.useRef(null); const counter = React.useRef(0); const focusSelect = React.useCallback((el: HTMLInputElement | HTMLSelectElement | null) => { el?.focus({ preventScroll: true }); if (el instanceof HTMLInputElement) el.select(); }, []); const idx = records.findIndex((r) => r.id === openId); const r = idx >= 0 ? records[idx] : null; React.useEffect(() => { if (!saved && !copied) return; const t = setTimeout(() => { setSaved(null); setCopied(false); }, 1400); return () => clearTimeout(t); }, [saved, copied]); React.useEffect(() => { if (!openId) return; const onKey = (e: KeyboardEvent) => { const typing = (e.target as HTMLElement).closest("input, textarea, select"); if (e.key === "Escape" && !typing) setOpenId(null); if (typing || !rootRef.current?.contains(document.activeElement ?? null)) return; if (e.key === "j" || e.key === "k") { setOpenId((cur) => { const i = records.findIndex((x) => x.id === cur); return records[(i + (e.key === "j" ? 1 : -1) + records.length) % records.length].id; }); setEditing(null); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [openId, records]); const update = (patch: Partial, flag?: Field | "stage") => { if (!r) return; const next = { ...r, ...patch }; setRecords((rs) => rs.map((x) => (x.id === r.id ? next : x))); if (flag) setSaved(flag); onRecordChange?.(next); }; const commit = () => { if (!r || !editing) return; const v = draft.trim(); if (editing === "value") { const n = Number(v.replace(/[^0-9.]/g, "")); if (!Number.isNaN(n) && n !== r.value) update({ value: n }, "value"); } else if (v && v !== r[editing]) update({ [editing]: v } as Partial, editing); setEditing(null); }; const open = (id: string) => { setOpenId(id); setEditing(null); }; const go = (d: number) => open(records[(idx + d + records.length) % records.length].id); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const iconBtn = cn("grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-lg border bg-transparent", focus); const pill = (s: Stage) => ( {s} ); const avatar = (x: DrawerRecord, size = 32) => ( {initials(x.name)} ); const field = (k: Field, label: string, display: string) => (

{label} {editing === k ? ( k === "owner" ? ( ) : ( setDraft(e.target.value)} onBlur={commit} onKeyDown={(e) => (e.key === "Enter" ? commit() : e.key === "Escape" && setEditing(null))} aria-label={label} inputMode={k === "value" ? "numeric" : undefined} className={cn("h-8 w-full min-w-0 rounded-md border px-2 text-[13px]", focus)} style={{ borderColor: p.border, background: p.input, color: p.text, ...ring }} /> ) ) : ( )}

); return (

{/* Table */}

Accounts

{records.length} accounts · {money(records.filter((x) => x.stage !== "Lost").reduce((s, x) => s + x.value, 0))} open pipeline

Click a row · J / K to move · Esc to close

{["Contact", "Stage", "Value", "Owner", "Last contact"].map((h, i) => ( ))} {records.map((x) => ( open(x.id)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(x.id); } else if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); ((e.key === "ArrowDown" ? e.currentTarget.nextElementSibling : e.currentTarget.previousElementSibling) as HTMLElement | null)?.focus(); } }} aria-selected={openId === x.id} className="cursor-pointer outline-none focus-visible:bg-[var(--s)]" style={{ background: openId === x.id ? p.sel : "transparent", ["--s" as string]: p.sel }} > ))}

1 && "hidden @[640px]:table-cell", i === 4 && "@[640px]:hidden @[900px]:table-cell")} style={{ borderColor: p.border }}> {h}
{avatar(x, 28)} {x.name} {x.company}	{pill(x.stage)}	{money(x.value)}	{x.owner}	{x.lastContact}

{/* Drawer */} {r && ( <> setOpenId(null)} aria-hidden="true" />