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:T5bc5,"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 Status = "new" | "contacted" | "qualified" | "unqualified"; interface Activity { id: string; kind: "email" | "visit" | "form" | "call" | "note"; text: string; detail?: string; when: string; } export interface Lead { name: string; title: string; company: string; email: string; phone: string; location: string; source: string; companySize: string; status: Status; owner: string; tags: string[]; score: { total: number; factors: { label: string; points: number }[] }; visits: number[]; activity: Activity[]; } export interface LeadProfilePanelProps { lead?: Lead; currency?: string; onConvert?: (deal: { value: number; stage: string }) => 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)", card: "#121212", well: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.08)", input: "#0D0D0D", track: "rgba(255,255,255,0.08)", on: "#F5F4F1", onText: "#0A0A0A", bar: "#3987e5", hot: "#F87171", warm: "#FBBF24", cold: "#60A5FA", good: "#4ADE80", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", well: "rgba(10,10,10,0.03)", border: "rgba(10,10,10,0.09)", input: "#FAFAF8", track: "rgba(10,10,10,0.08)", on: "#0A0A0A", onText: "#FAFAF8", bar: "#2a78d6", hot: "#DC2626", warm: "#B45309", cold: "#2563EB", good: "#15803D", ring: "rgba(10,10,10,0.5)" }, }; const LEAD: Lead = { name: "Priya Raman", title: "Head of Operations", company: "Marktplatz Group", email: "priya.raman@marktplatz.example", phone: "+49 30 5512 8830", location: "Hamburg, Germany", source: "Webinar · Scaling ops", companySize: "200–500", status: "contacted", owner: "Lena Hartmann", tags: ["Retail", "Multi-store", "Q1 budget"], score: { total: 82, factors: [ { label: "Visited pricing 4×", points: 25 }, { label: "Company size fits", points: 20 }, { label: "Opened 5 emails", points: 15 }, { label: "Requested a demo", points: 30 }, { label: "No reply in 6 days", points: -8 } ] }, visits: [0, 1, 0, 0, 2, 1, 0, 3, 1, 0, 4, 2, 5, 3], activity: [ { id: "a1", kind: "form", text: "Requested a demo", detail: "“We run 14 stores and need one dashboard.”", when: "2h ago" }, { id: "a2", kind: "visit", text: "Viewed Pricing and Enterprise", detail: "6 pages · 9 min", when: "Today 09:40" }, { id: "a3", kind: "email", text: "Opened “Your webinar recording”", when: "Yesterday" }, { id: "a4", kind: "call", text: "Intro call with Lena", detail: "15 min · interested in rollout timeline", when: "Nov 3" }, { id: "a5", kind: "visit", text: "Attended webinar “Scaling ops”", when: "Oct 29" }, ], }; const STATUS: { id: Status; label: string }[] = [ { id: "new", label: "New" }, { id: "contacted", label: "Contacted" }, { id: "qualified", label: "Qualified" }, { id: "unqualified", label: "Unqualified" }, ]; const ICON: Record = { email: "M3 6h18v12H3zM3 7l9 6 9-6", visit: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6", form: "M6 3h9l3 3v15H6zM9 11h6M9 15h6", 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", note: "M4 20h4L19 9l-4-4L4 16zM14 6l4 4", }; export function LeadProfilePanel({ lead = LEAD, currency = "€", onConvert, theme = "dark", className }: LeadProfilePanelProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [status, setStatus] = React.useState(lead.status); const [tab, setTab] = React.useState<"activity" | "details">("activity"); const [activity, setActivity] = React.useState(lead.activity); const [note, setNote] = React.useState(""); const [showScore, setShowScore] = React.useState(false); const [converting, setConverting] = React.useState(false); const [deal, setDeal] = React.useState({ value: "18000", stage: "Qualified" }); const [converted, setConverted] = React.useState(null); const [toast, setToast] = React.useState(null); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2000); return () => clearTimeout(t); }, [toast]); const s = lead.score.total; const heat = s >= 75 ? { label: "Hot", c: p.hot } : s >= 45 ? { label: "Warm", c: p.warm } : { label: "Cold", c: p.cold }; const maxV = Math.max(...lead.visits, 1); const initials = lead.name .split(" ") .map((w) => w[0]) .join(""); const addNote = (e: React.FormEvent) => { e.preventDefault(); if (!note.trim()) return; setActivity((l) => [{ id: `n${l.length + 1}`, kind: "note", text: note.trim(), detail: "Note by you", when: "Just now" }, ...l]); setNote(""); setTab("activity"); }; const changeStatus = (v: Status) => { setStatus(v); setActivity((l) => [{ id: `s${l.length + 1}`, kind: "note", text: `Status changed to ${STATUS.find((x) => x.id === v)!.label}`, when: "Just now" }, ...l]); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const action = cn("flex h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border text-[12.5px] font-medium", focus); const C = 2 * Math.PI * 30; return (

{/* Profile column */}

{lead.name}

{lead.title} · {lead.company}

{lead.tags.map((t) => ( {t} ))}

Status

Owner {lead.owner}

(e.preventDefault(), setToast(`Composer opened for ${lead.name.split(" ")[0]}`))} className={cn(action, "no-underline")} style={{ borderColor: p.border, color: p.text, ...ring }}> Email

{converted ? ( Deal created · {currency} {converted.value.toLocaleString("en-US")} in {converted.stage} ) : converting ? ( { e.preventDefault(); const d = { value: Number(deal.value) || 0, stage: deal.stage }; if (!d.value) return; setConverted(d); setConverting(false); setStatus("qualified"); onConvert?.(d); setActivity((l) => [{ id: `d${l.length + 1}`, kind: "note", text: `Converted to a ${currency}${d.value.toLocaleString("en-US")} deal`, detail: d.stage, when: "Just now" }, ...l]); }} >

Deal value {currency} setDeal((d) => ({ ...d, value: e.target.value.replace(/\D/g, "").slice(0, 8) }))} inputMode="numeric" className="h-full min-w-0 flex-1 border-0 bg-transparent px-1 text-[12.5px] tabular-nums outline-none" style={{ color: p.text }} /> Stage

) : ( setConverting(true)} initial={reduce ? false : { opacity: 0 }} animate={{ opacity: 1 }} className={cn("mt-2 h-9 w-full cursor-pointer rounded-lg border-0 text-[12.5px] font-semibold", focus)} style={{ background: p.on, color: p.onText, ...ring }}> Convert to deal )}

{/* Score */}

Lead score

{heat.label}

{showScore && ( {lead.score.factors.map((f, i) => ( {f.label} {f.points > 0 ? "+" : "−"} {Math.abs(f.points)} ))} )}

Site visits · 14 days {lead.visits.reduce((a, b) => a + b, 0)} total

{lead.visits.map((v, i) => ( ))}

{/* Timeline column */}

{(["activity", "details"] as const).map((t) => ( ))}

{tab === "activity" ? (

{activity.map((a) => ( {a.text} {a.when} {a.detail && ( {a.detail} )} ))}

) : (

{k}: {v}

)}

{toast && ( {toast} )}

); } export default LeadProfilePanel; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/lead-profile-panel/lead-profile-panel.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]