# Pipeline Today > A salesperson's morning view: drag deals between stages (or move them with the keyboard) while each column's weighted value and the forecast roll live, and a Focus rail tells you who to act on and why, with one-click email, call and snooze that update the deal. A shadcn/ui block from the [@devl](https://devl.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/devl/accounts-crm). - Page, with a live preview: https://shadcn.exchange/r/devl/accounts-crm - Screenshot: https://shadcn.exchange/shot/devl/accounts-crm/light.png - Registry item: https://devl.dev/r/accounts-crm.json - Categories: screen, Product - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/devl/accounts-crm.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `utils`, `https://coss.com/ui/r/avatar.json`, `https://coss.com/ui/r/button.json`, `https://coss.com/ui/r/kbd.json`, `https://coss.com/ui/r/menu.json`, `https://coss.com/ui/r/segmented-control.json`, `https://coss.com/ui/r/tooltip.json` ## Files ### `registry/devl/accounts-crm.tsx` ```tsx "use client"; import { ArrowRightIcon, Building2Icon, CalendarClockIcon, ChartNoAxesColumnIcon, CheckIcon, ChevronDownIcon, CircleCheckIcon, Clock3Icon, CoffeeIcon, EyeIcon, InboxIcon, KanbanIcon, type LucideIcon, MailIcon, MoonIcon, PhoneIcon, ReplyIcon, SettingsIcon, SunriseIcon, UserMinusIcon, XIcon, } from "lucide-react"; import { AnimatePresence, animate, MotionConfig, motion, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react"; import { type KeyboardEvent, type PointerEvent, type ReactElement, type ReactNode, type RefObject, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, } from "@/components/ui/menu"; import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"; import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type DealStage = "lead" | "qualified" | "proposal" | "negotiation" | "won"; export type Engagement = "hot" | "warm" | "cooling" | "cold"; export type FocusKind = "quiet" | "opened" | "champion" | "overdue" | "replied"; export type FocusAction = "email" | "call" | "snooze"; export interface PipelineStage { id: DealStage; label: string; probability: number; } export interface DealOwner { id: string; name: string; role?: string; } export interface DealContact { name: string; role: string; tag?: { label: string; tone: "good" | "bad" | "neutral" }; } export interface DealActivity { label: string; when: string; } export interface Deal { id: string; company: string; domain: string; stage: DealStage; value: number; ownerId: string; daysInStage: number; engagement: Engagement; lastTouch: string; closeLabel: string; nextStep: string; contacts: DealContact[]; activity: DealActivity[]; note?: string; } export interface FocusSignal { id: string; dealId: string; kind: FocusKind; headline: string; detail: string; contact: string; tag: string; } export interface PipelineTodayProps { deals?: Deal[]; signals?: FocusSignal[]; owners?: DealOwner[]; stages?: PipelineStage[]; currentUserId?: string; workspace?: string; dateLabel?: string; greeting?: string; target?: number; forecastLabel?: string; onDealMove?: (dealId: string, stage: DealStage, index: number) => void; className?: string; } export const defaultStages: PipelineStage[] = [ { id: "lead", label: "Lead", probability: 0.1 }, { id: "qualified", label: "Qualified", probability: 0.25 }, { id: "proposal", label: "Proposal", probability: 0.5 }, { id: "negotiation", label: "Negotiation", probability: 0.75 }, { id: "won", label: "Won", probability: 1 }, ]; export const defaultOwners: DealOwner[] = [ { id: "maren", name: "Maren Kole", role: "Account executive" }, { id: "jonah", name: "Jonah Ifeanyi", role: "Account executive" }, { id: "sofia", name: "Sofia Lindqvist", role: "Account executive" }, { id: "ravi", name: "Ravi Castellano", role: "Sales lead" }, ]; export const defaultDeals: Deal[] = [ { id: "pemberton", company: "Pemberton & Vale", domain: "pembertonvale.law", stage: "lead", value: 12000, ownerId: "sofia", daysInStage: 4, engagement: "warm", lastTouch: "4d ago", closeLabel: "Jan 15", nextStep: "Discovery call with Priya to map their intake process", contacts: [{ name: "Priya Nair", role: "Operations director" }], activity: [{ label: "Inbound form: intake routing for 40 lawyers", when: "Oct 23" }], }, { id: "mosswood", company: "Mosswood Bakery", domain: "mosswood.co", stage: "lead", value: 6400, ownerId: "ravi", daysInStage: 11, engagement: "cooling", lastTouch: "2w ago", closeLabel: "Feb 1", nextStep: "Send the three-location pricing sheet", contacts: [{ name: "Elsie Bram", role: "Owner" }], activity: [{ label: "Met at the regional food fair", when: "Oct 13" }], }, { id: "wrenfield", company: "Wrenfield Clinics", domain: "wrenfield.health", stage: "lead", value: 22000, ownerId: "maren", daysInStage: 2, engagement: "hot", lastTouch: "Yesterday", closeLabel: "Dec 12", nextStep: "Confirm Thursday demo and invite their IT lead", contacts: [ { name: "Hugo Ferrant", role: "Head of patient ops", tag: { label: "Champion", tone: "good" } }, { name: "Bea Lund", role: "IT manager" }, ], activity: [ { label: "Hugo booked a demo for Thursday", when: "Yesterday" }, { label: "Webinar sign-up", when: "Oct 21" }, ], }, { id: "oakhollow", company: "Oakhollow Studio", domain: "oakhollow.studio", stage: "qualified", value: 18000, ownerId: "maren", daysInStage: 6, engagement: "warm", lastTouch: "3d ago", closeLabel: "Dec 3", nextStep: "Scope the agency plan with Rosa", contacts: [{ name: "Rosa Quint", role: "Studio director", tag: { label: "Champion", tone: "good" } }], activity: [{ label: "Discovery call, 32 min", when: "Oct 24" }], }, { id: "juniper", company: "Juniper Ridge Health", domain: "juniperridge.care", stage: "qualified", value: 39000, ownerId: "sofia", daysInStage: 8, engagement: "warm", lastTouch: "2d ago", closeLabel: "Nov 20", nextStep: "Security questionnaire due Friday", contacts: [{ name: "Owen Achebe", role: "Compliance lead" }], activity: [{ label: "Security questionnaire received", when: "Oct 25" }], }, { id: "driftline", company: "Driftline Media", domain: "driftline.fm", stage: "qualified", value: 15500, ownerId: "maren", daysInStage: 5, engagement: "hot", lastTouch: "Today", closeLabel: "Nov 14", nextStep: "Price out 12 seats with the annual discount", contacts: [ { name: "Mika Sato", role: "Head of production", tag: { label: "Champion", tone: "good" } }, { name: "Jules Arden", role: "Finance" }, ], activity: [ { label: "Mika replied: ready to talk pricing", when: "Today, 8:12" }, { label: "Trial reached 9 active seats", when: "Oct 24" }, ], }, { id: "brightwater", company: "Brightwater Labs", domain: "brightwater.bio", stage: "proposal", value: 46500, ownerId: "maren", daysInStage: 6, engagement: "hot", lastTouch: "Today", closeLabel: "Nov 12", nextStep: "Walk Theo through pricing options on a call", contacts: [ { name: "Theo Marsh", role: "VP research ops", tag: { label: "Champion", tone: "good" } }, { name: "Clara Ng", role: "Procurement", tag: { label: "Economic buyer", tone: "neutral" } }, ], activity: [ { label: "Theo opened the proposal (2nd time)", when: "Today, 9:41" }, { label: "Theo opened the proposal", when: "Today, 8:05" }, { label: "Proposal sent by you", when: "Oct 21" }, ], note: "Budget is approved for Q4. Clara needs the DPA before signature.", }, { id: "ferrovia", company: "Ferrovia Transit", domain: "ferrovia.city", stage: "proposal", value: 67000, ownerId: "maren", daysInStage: 19, engagement: "cooling", lastTouch: "8d ago", closeLabel: "Oct 24", nextStep: "Ask Lotte where procurement has it", contacts: [ { name: "Lotte Vos", role: "Digital programme lead", tag: { label: "Champion", tone: "good" } }, { name: "Bram Okon", role: "Procurement" }, ], activity: [ { label: "Lotte: sent to procurement", when: "Oct 19" }, { label: "Proposal sent by you", when: "Oct 8" }, ], note: "City budget cycle ends in December. Procurement wants three references.", }, { id: "tessellate", company: "Tessellate Robotics", domain: "tessellate.dev", stage: "proposal", value: 52000, ownerId: "jonah", daysInStage: 3, engagement: "warm", lastTouch: "5h ago", closeLabel: "Oct 30", nextStep: "Legal review of the order form", contacts: [{ name: "Ada Whitlock", role: "CTO", tag: { label: "Champion", tone: "good" } }], activity: [{ label: "Order form sent to legal", when: "Today, 7:30" }], }, { id: "halcyon", company: "Halcyon Freight", domain: "halcyonfreight.co", stage: "negotiation", value: 84000, ownerId: "maren", daysInStage: 12, engagement: "cold", lastTouch: "9d ago", closeLabel: "Oct 29", nextStep: "Send the security pack Ines asked for", contacts: [ { name: "Ines Okafor", role: "Head of logistics IT", tag: { label: "Champion", tone: "good" } }, { name: "Marcus Hale", role: "COO", tag: { label: "Economic buyer", tone: "neutral" } }, ], activity: [ { label: "Ines asked for the security pack", when: "Oct 18" }, { label: "Redlines returned on the MSA", when: "Oct 15" }, ], note: "Marcus wants go-live before peak season in January.", }, { id: "quillstone", company: "Quillstone Analytics", domain: "quillstone.ai", stage: "negotiation", value: 120000, ownerId: "maren", daysInStage: 9, engagement: "cooling", lastTouch: "6d ago", closeLabel: "Nov 8", nextStep: "Find a new sponsor before the renewal date", contacts: [ { name: "Dana Reyes", role: "Former VP data", tag: { label: "Left Oct 19", tone: "bad" } }, { name: "Anil Bhatt", role: "CFO", tag: { label: "Economic buyer", tone: "neutral" } }, { name: "Wren Castillo", role: "Data platform lead" }, ], activity: [ { label: "Dana's out-of-office: no longer with Quillstone", when: "Oct 21" }, { label: "Renewal quote sent by you", when: "Oct 14" }, ], note: "Renewal plus 40 seats. Wren runs the platform day to day and likes it.", }, { id: "cinderpath", company: "Cinderpath Games", domain: "cinderpath.gg", stage: "negotiation", value: 28000, ownerId: "ravi", daysInStage: 4, engagement: "warm", lastTouch: "2d ago", closeLabel: "Nov 4", nextStep: "Agree on the multi-year discount", contacts: [{ name: "Leo Brandt", role: "Studio head" }], activity: [{ label: "Asked for a two-year price", when: "Oct 25" }], }, { id: "saltmarsh", company: "Saltmarsh Outdoor", domain: "saltmarsh.shop", stage: "won", value: 31000, ownerId: "jonah", daysInStage: 19, engagement: "hot", lastTouch: "Today", closeLabel: "Oct 8", nextStep: "Kick-off with onboarding team", contacts: [{ name: "Nell Harper", role: "E-commerce lead" }], activity: [{ label: "Contract signed", when: "Oct 8" }], }, { id: "larkspur", company: "Larkspur Energy", domain: "larkspur.energy", stage: "won", value: 74000, ownerId: "sofia", daysInStage: 25, engagement: "hot", lastTouch: "Yesterday", closeLabel: "Oct 2", nextStep: "Introduce the customer success manager", contacts: [{ name: "Ravi Mendes", role: "Grid operations" }], activity: [{ label: "Contract signed", when: "Oct 2" }], }, ]; export const defaultSignals: FocusSignal[] = [ { id: "s-brightwater", dealId: "brightwater", kind: "opened", headline: "opened the proposal twice today", detail: "Theo spent four minutes on pricing. A good moment to call.", contact: "Theo Marsh", tag: "Opened twice", }, { id: "s-halcyon", dealId: "halcyon", kind: "quiet", headline: "went quiet 9 days ago", detail: "Ines asked for the security pack on Oct 18. Nothing since.", contact: "Ines Okafor", tag: "Quiet 9 days", }, { id: "s-quillstone", dealId: "quillstone", kind: "champion", headline: "renewal in 12 days, champion left", detail: "Dana Reyes left on Oct 19. No new sponsor named yet.", contact: "Anil Bhatt", tag: "Champion left", }, { id: "s-driftline", dealId: "driftline", kind: "replied", headline: "replied: ready to talk pricing", detail: "Mika wants options for 12 seats before Friday.", contact: "Mika Sato", tag: "Replied today", }, { id: "s-ferrovia", dealId: "ferrovia", kind: "overdue", headline: "is 3 days past its close date", detail: "Still in Proposal. Move the date or nudge procurement.", contact: "Lotte Vos", tag: "3 days overdue", }, ]; const ease = [0.23, 1, 0.32, 1] as const; const glide = { type: "spring", stiffness: 520, damping: 42 } as const; const land = { type: "spring", stiffness: 380, damping: 30 } as const; const stageDot: Record = { lead: "bg-muted-foreground/50", qualified: "bg-sky-500 dark:bg-sky-400", proposal: "bg-amber-500 dark:bg-amber-400", negotiation: "bg-violet-500 dark:bg-violet-400", won: "bg-emerald-500 dark:bg-emerald-400", }; const engagementMeta: Record = { hot: { label: "Hot", level: 4, bar: "bg-emerald-500 dark:bg-emerald-400", text: "text-emerald-700 dark:text-emerald-300" }, warm: { label: "Warm", level: 3, bar: "bg-emerald-500 dark:bg-emerald-400", text: "text-muted-foreground" }, cooling: { label: "Cooling", level: 2, bar: "bg-amber-500 dark:bg-amber-400", text: "text-amber-700 dark:text-amber-300" }, cold: { label: "Cold", level: 1, bar: "bg-rose-500 dark:bg-rose-400", text: "text-rose-700 dark:text-rose-300" }, }; const warmer: Record = { cold: "cooling", cooling: "warm", warm: "hot", hot: "hot" }; const signalMeta: Record = { quiet: { icon: MoonIcon, tile: "bg-amber-500/12 text-amber-700 dark:bg-amber-400/14 dark:text-amber-300", text: "text-amber-700 dark:text-amber-300", }, opened: { icon: EyeIcon, tile: "bg-sky-500/12 text-sky-700 dark:bg-sky-400/14 dark:text-sky-300", text: "text-sky-700 dark:text-sky-300", }, champion: { icon: UserMinusIcon, tile: "bg-rose-500/12 text-rose-700 dark:bg-rose-400/14 dark:text-rose-300", text: "text-rose-700 dark:text-rose-300", }, overdue: { icon: CalendarClockIcon, tile: "bg-orange-500/12 text-orange-700 dark:bg-orange-400/14 dark:text-orange-300", text: "text-orange-700 dark:text-orange-300", }, replied: { icon: ReplyIcon, tile: "bg-emerald-500/12 text-emerald-700 dark:bg-emerald-400/14 dark:text-emerald-300", text: "text-emerald-700 dark:text-emerald-300", }, }; const monogramTones = [ "bg-amber-500/15 text-amber-800 dark:bg-amber-400/15 dark:text-amber-200", "bg-sky-500/15 text-sky-800 dark:bg-sky-400/15 dark:text-sky-200", "bg-violet-500/15 text-violet-800 dark:bg-violet-400/15 dark:text-violet-200", "bg-emerald-500/15 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-200", "bg-rose-500/15 text-rose-800 dark:bg-rose-400/15 dark:text-rose-200", "bg-teal-500/15 text-teal-800 dark:bg-teal-400/15 dark:text-teal-200", "bg-orange-500/15 text-orange-800 dark:bg-orange-400/15 dark:text-orange-200", ]; const ownerTones = [ "bg-orange-500/20 text-orange-900 dark:bg-orange-400/25 dark:text-orange-100", "bg-teal-500/20 text-teal-900 dark:bg-teal-400/25 dark:text-teal-100", "bg-violet-500/20 text-violet-900 dark:bg-violet-400/25 dark:text-violet-100", "bg-sky-500/20 text-sky-900 dark:bg-sky-400/25 dark:text-sky-100", ]; const burstTones = [ "bg-emerald-500 dark:bg-emerald-400", "bg-amber-500 dark:bg-amber-400", "bg-sky-500 dark:bg-sky-400", "bg-violet-500 dark:bg-violet-400", "bg-rose-500 dark:bg-rose-400", "bg-emerald-500 dark:bg-emerald-400", ]; const fullMoney = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); function money(n: number) { return fullMoney.format(Math.round(n)); } function shortMoney(n: number) { const v = Math.round(n); if (v >= 1_000_000) return `$${(v / 1_000_000).toFixed(2).replace(/\.?0+$/, "")}M`; if (v >= 1000) return `$${(v / 1000).toFixed(1).replace(/\.0$/, "")}k`; return `$${v}`; } function signedMoney(n: number) { return `${n > 0 ? "+" : "−"}${money(Math.abs(n))}`; } function initials(name: string) { return name .replace(/[^A-Za-z\s]/g, " ") .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((p) => p[0]) .join("") .toUpperCase(); } function shortName(company: string) { return company.split(/\s+/)[0].replace(/[^A-Za-z-]/g, ""); } function hashIndex(s: string, n: number) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h % n; } function scaleOf(el: HTMLElement) { return el.getBoundingClientRect().width / (el.offsetWidth || 1) || 1; } function useCalmMotion() { const prefers = useReducedMotion(); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); return mounted && Boolean(prefers); } function moveDeal(list: Deal[], id: string, stage: DealStage, index: number, patch?: Partial) { const moving = list.find((d) => d.id === id); if (!moving) return list; const rest = list.filter((d) => d.id !== id); const column = rest.filter((d) => d.stage === stage); const next: Deal = { ...moving, stage, ...(moving.stage !== stage ? { daysInStage: 0 } : {}), ...patch }; const anchor = column[index]; const at = anchor ? rest.indexOf(anchor) : column.length ? rest.indexOf(column[column.length - 1]) + 1 : rest.length; return [...rest.slice(0, at), next, ...rest.slice(at)]; } type Rect = { left: number; top: number; width: number; rotate?: number; scale?: number }; type RectStore = RefObject>; function Rolling({ value, format, reduce }: { value: number; format: (n: number) => string; reduce: boolean }) { const mv = useMotionValue(value); const text = useTransform(mv, format); useEffect(() => { if (reduce) { mv.jump(value); return; } const controls = animate(mv, value, { type: "spring", stiffness: 160, damping: 26 }); return () => controls.stop(); }, [value, reduce, mv]); return ( {text} ); } function Monogram({ name, className }: { name: string; className?: string }) { return ( {initials(name)} ); } function OwnerAvatar({ owner, index, className }: { owner?: DealOwner; index: number; className?: string }) { return ( {owner ? initials(owner.name) : "?"} ); } function SignalBars({ engagement }: { engagement: Engagement }) { const meta = engagementMeta[engagement]; return ( {[0, 1, 2, 3].map((i) => ( ))} ); } function Burst({ reduce }: { reduce: boolean }) { if (reduce) return null; return ( {burstTones.map((tone, i) => { const angle = (i / burstTones.length) * Math.PI * 2 - Math.PI / 2; return ( ); })} ); } interface FaceProps { deal: Deal; owner?: DealOwner; ownerIndex: number; flag?: FocusSignal; celebrate?: number; touched?: number; reduce: boolean; className?: string; } function DealFace({ deal, owner, ownerIndex, flag, celebrate, touched, reduce, className }: FaceProps) { const engagement = engagementMeta[deal.engagement]; const won = deal.stage === "won"; return (
{celebrate ? ( ) : null} {touched ? ( ) : null}
{deal.company}
{money(deal.value)} = 14 ? "text-amber-700 dark:text-amber-300" : "text-muted-foreground", )} > {won ? deal.closeLabel : deal.daysInStage === 0 ? "Just moved" : `${deal.daysInStage}d in stage`}
{won ? ( <> {celebrate ? : null} Closed won ) : ( <> {flag ? ( {flag.tag} ) : ( {deal.lastTouch} )} )}
); } function FlipSlot({ flipKey, rects, getScale, reduce, className, children, }: { flipKey: string; rects: RectStore; getScale: () => number; reduce: boolean; className?: string; children: ReactNode; }) { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const rotate = useMotionValue(0); const scale = useMotionValue(1); useLayoutEffect(() => { const el = ref.current; if (!el) return; const box = el.getBoundingClientRect(); const prev = rects.current.get(flipKey); rects.current.set(flipKey, { left: box.left, top: box.top, width: box.width }); if (!prev || reduce || box.width === 0 || prev.width === 0) return; const s = getScale(); const dx = (prev.left - box.left) / s; const dy = (prev.top - box.top) / s; const dropped = prev.rotate !== undefined; if (!dropped && Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return; x.jump(dx + (dropped ? 0 : x.get())); y.jump(dy + (dropped ? 0 : y.get())); const transition = dropped ? land : glide; animate(x, 0, transition); animate(y, 0, transition); if (dropped) { rotate.jump(prev.rotate ?? 0); scale.jump(prev.scale ?? 1); animate(rotate, 0, land); animate(scale, 1, land); } }); return (
  • {children}
    • ); } function SignalItem({ signal, deal, stageLabel, resolving, reduce, onAct, onOpen, onHint, }: { signal: FocusSignal; deal?: Deal; stageLabel: string; resolving?: FocusAction; reduce: boolean; onAct: (signal: FocusSignal, action: FocusAction) => void; onOpen: (dealId: string) => void; onHint: (dealId: string | null) => void; }) { const meta = signalMeta[signal.kind]; const Icon = meta.icon; const company = deal?.company ?? ""; const outcome = resolving === "email" ? `Follow-up sent to ${signal.contact}` : resolving === "call" ? `Call with ${signal.contact} logged` : "Snoozed until tomorrow"; return ( onHint(null)} onFocus={() => onHint(signal.dealId)} onMouseEnter={() => onHint(signal.dealId)} onMouseLeave={() => onHint(null)} transition={{ height: { duration: 0.32, ease }, opacity: { duration: 0.18 } }} >

    {" "} {signal.headline}

    {signal.detail}

    {deal ? (

    {stageLabel} · {money(deal.value)}

    ) : null}
    {resolving ? ( {resolving === "snooze" ? : } {outcome} {resolving === "snooze" ? `${company} is back in Focus at 9:00` : `${company} · touched just now`} ) : null}
    ); } function DetailPanel({ deal, owner, ownerIndex, stages, onClose, onMove, panelRef, headingId, }: { deal: Deal; owner?: DealOwner; ownerIndex: number; stages: PipelineStage[]; onClose: () => void; onMove: (stage: DealStage) => void; panelRef: RefObject; headingId: string; }) { const at = stages.findIndex((s) => s.id === deal.stage); const stage = stages[at]; const next = stages[at + 1]; const champion = deal.contacts.find((c) => c.tag?.tone === "good") ?? deal.contacts[0]; return (
    { if (e.key === "Escape") { e.stopPropagation(); onClose(); } }} ref={panelRef} role="region" tabIndex={-1} >

    {deal.company}

    {deal.domain}
    Value
    {money(deal.value)}
    Stage
    {stage?.label} onMove(v as DealStage)} value={deal.stage}> {stages.map((s) => ( {s.label} {Math.round(s.probability * 100)}% ))}
    Owner
    {owner?.name.split(" ")[0]}
    {deal.stage === "won" ? "Closed" : "Close date"}
    {deal.closeLabel}

    Next step

    {deal.nextStep}

    Contacts

      {deal.contacts.map((c, i) => (
    • {initials(c.name)} {c.name} {c.role} {c.tag ? ( {c.tag.label} ) : null}
      • ))}

    Last touches

      {deal.activity.slice(0, 3).map((a, i, list) => (
    1. {i < list.length - 1 ? : null} {a.label} {a.when}
      2. ))}
    {deal.note ? (

    Notes

    {deal.note}

    ) : null}
    {next ? ( ) : ( Closed won )} {champion ? ( ) : null}
    ); } type DragState = { id: string; width: number; height: number; origin: DealStage; pointerId: number }; type Lifted = { id: string; snapshot: Deal[] }; export function PipelineToday({ deals: initialDeals = defaultDeals, signals = defaultSignals, owners = defaultOwners, stages = defaultStages, currentUserId = "maren", workspace = "Kestrel", dateLabel = "Tuesday, 27 October", greeting = "Good morning", target = 480000, forecastLabel = "Q4 weighted forecast", onDealMove, className, }: PipelineTodayProps) { const reduce = useCalmMotion(); const uid = useId(); const [deals, setDeals] = useState(initialDeals); const [drag, setDrag] = useState(null); const [over, setOver] = useState<{ stage: DealStage; index: number } | null>(null); const [lifted, setLifted] = useState(null); const [selectedId, setSelectedId] = useState(null); const [mobileStage, setMobileStage] = useState("negotiation"); const [tab, setTab] = useState<"board" | "focus">("board"); const [handled, setHandled] = useState([]); const [snoozed, setSnoozed] = useState([]); const [resolving, setResolving] = useState>({}); const [celebrate, setCelebrate] = useState<{ id: string; key: number } | null>(null); const [touched, setTouched] = useState<{ id: string; key: number } | null>(null); const [delta, setDelta] = useState<{ amount: number; key: number } | null>(null); const [announcement, setAnnouncement] = useState(""); const [hinted, setHinted] = useState(null); const rootRef = useRef(null); const railRef = useRef(null); const panelRef = useRef(null); const chipsRef = useRef(null); const rects = useRef(new Map()); const pending = useRef<{ id: string; pointerId: number; x: number; y: number; el: HTMLElement } | null>(null); const dragRef = useRef(null); const overRef = useRef<{ stage: DealStage; index: number } | null>(null); const grabOffset = useRef({ x: 0, y: 0 }); const lastPointerX = useRef(0); const pendingFocus = useRef(null); const timers = useRef(new Set>()); const counter = useRef(0); const dragX = useMotionValue(0); const dragY = useMotionValue(0); const tiltTarget = useMotionValue(0); const tilt = useSpring(tiltTarget, { stiffness: 260, damping: 22 }); const ids = { instructions: `${uid}-how`, detail: `${uid}-detail`, heading: `${uid}-heading`, rail: `${uid}-rail` }; const order = stages.map((s) => s.id); const stageOf = (id: DealStage) => stages.find((s) => s.id === id) ?? stages[0]; const prob = (id: DealStage) => stageOf(id).probability; const forecast = (list: Deal[]) => list.reduce((sum, d) => sum + d.value * prob(d.stage), 0); const ownerIndex = (id: string) => Math.max(0, owners.findIndex((o) => o.id === id)); const ownerOf = (id: string) => owners.find((o) => o.id === id); const me = ownerOf(currentUserId); const getScale = () => (rootRef.current ? scaleOf(rootRef.current) : 1); const view = drag && over ? moveDeal(deals, drag.id, over.stage, over.index) : deals; const columns = Object.fromEntries(order.map((s) => [s, view.filter((d) => d.stage === s)])) as Record; const total = forecast(view); const won = view.filter((d) => d.stage === "won").reduce((sum, d) => sum + d.value, 0); const visibleSignals = signals.filter((s) => !handled.includes(s.id) && !snoozed.includes(s.id)); const openSignals = visibleSignals.filter((s) => !resolving[s.id]); const flagFor = (dealId: string) => openSignals.find((s) => s.dealId === dealId); const selected = deals.find((d) => d.id === selectedId) ?? null; const later = (fn: () => void, ms: number) => { const t = setTimeout(() => { timers.current.delete(t); fn(); }, ms); timers.current.add(t); }; useEffect(() => { const all = timers.current; return () => { for (const t of all) clearTimeout(t); all.clear(); }; }, []); useEffect(() => { const root = rootRef.current; if (!root) return; const observer = new ResizeObserver(() => rects.current.clear()); observer.observe(root); return () => observer.disconnect(); }, []); useLayoutEffect(() => { const id = pendingFocus.current; if (!id) return; const el = [...(rootRef.current?.querySelectorAll(`[data-card-id="${id}"]`) ?? [])].find( (node) => node.offsetParent !== null, ); if (el) { el.focus({ preventScroll: false }); pendingFocus.current = null; } }); useEffect(() => { if (selectedId) panelRef.current?.focus({ preventScroll: true }); }, [selectedId]); useEffect(() => { const row = chipsRef.current; const chip = row?.querySelector(`[data-drop-stage="${mobileStage}"]`); if (!row || !chip || row.scrollWidth <= row.clientWidth) return; const left = chip.offsetLeft - (row.clientWidth - chip.offsetWidth) / 2; row.scrollTo({ left: Math.max(0, left), behavior: reduce ? "auto" : "smooth" }); }, [mobileStage, reduce]); const say = (text: string) => setAnnouncement((prev) => (prev === text ? `${text} ` : text)); const nextKey = () => { counter.current += 1; return counter.current; }; const settle = (before: Deal[], after: Deal[], id: string) => { const was = before.find((d) => d.id === id); const now = after.find((d) => d.id === id); if (!was || !now) return; const index = after.filter((d) => d.stage === now.stage).findIndex((d) => d.id === id); const diff = forecast(after) - forecast(before); setMobileStage(now.stage); if (was.stage === now.stage) { say(`${now.company} stays in ${stageOf(now.stage).label}, position ${index + 1}.`); return; } if (Math.round(diff) !== 0) { const key = nextKey(); setDelta({ amount: diff, key }); later(() => setDelta((d) => (d?.key === key ? null : d)), 2600); } if (now.stage === "won") { const stale = signals.filter((s) => s.dealId === id).map((s) => s.id); if (stale.length) setHandled((h) => [...h, ...stale.filter((s) => !h.includes(s))]); const key = nextKey(); setCelebrate({ id, key }); later(() => setCelebrate((c) => (c?.key === key ? null : c)), 1500); } say( `${now.company} moved to ${stageOf(now.stage).label}${now.stage === "won" ? ", closed won" : ""}. Forecast now ${money(forecast(after))}.`, ); onDealMove?.(id, now.stage, index); }; const commit = (id: string, stage: DealStage, index: number, base: Deal[] = deals) => { const original = base.find((d) => d.id === id); if (!original) return; const patch: Partial = original.stage === stage ? {} : stage === "won" ? { closeLabel: "Today", lastTouch: "Just now" } : {}; const after = moveDeal(base, id, stage, index, patch); setDeals(after); settle(base, after, id); }; const moveFromPanel = (id: string, stage: DealStage) => { const len = deals.filter((d) => d.stage === stage && d.id !== id).length; commit(id, stage, len); }; const endDrag = (dropped: boolean) => { const d = dragRef.current; const root = rootRef.current; if (!d || !root) return; const s = scaleOf(root); const box = root.getBoundingClientRect(); rects.current.set(d.id, { left: box.left + dragX.get() * s, top: box.top + dragY.get() * s, width: d.width * s, rotate: tilt.get(), scale: 1.03, }); const target = overRef.current; for (const key of [...rects.current.keys()]) if (key.startsWith("ph-")) rects.current.delete(key); dragRef.current = null; overRef.current = null; tiltTarget.jump(0); tilt.jump(0); setDrag(null); setOver(null); pendingFocus.current = d.id; if (root.hasPointerCapture(d.pointerId)) root.releasePointerCapture(d.pointerId); if (dropped && target) { commit(d.id, target.stage, target.index); } else { const deal = deals.find((x) => x.id === d.id); if (deal) say(`Move cancelled. ${deal.company} is back in ${stageOf(deal.stage).label}.`); } }; const startDrag = (e: PointerEvent, p: NonNullable) => { const root = rootRef.current; const deal = deals.find((d) => d.id === p.id); if (!root || !deal) return; const s = scaleOf(root); const rootBox = root.getBoundingClientRect(); const box = p.el.getBoundingClientRect(); grabOffset.current = { x: (p.x - box.left) / s, y: (p.y - box.top) / s }; dragX.jump((e.clientX - rootBox.left) / s - grabOffset.current.x); dragY.jump((e.clientY - rootBox.top) / s - grabOffset.current.y); lastPointerX.current = e.clientX; const column = deals.filter((d) => d.stage === deal.stage); const state: DragState = { id: deal.id, width: box.width / s, height: box.height / s, origin: deal.stage, pointerId: p.pointerId }; const start = { stage: deal.stage, index: column.findIndex((d) => d.id === deal.id) }; dragRef.current = state; overRef.current = start; pending.current = null; root.setPointerCapture(p.pointerId); root.focus({ preventScroll: true }); setDrag(state); setOver(start); say(`Picked up ${deal.company}. Drop it on a stage, or press Escape to cancel.`); }; const onRootPointerMove = (e: PointerEvent) => { const d = dragRef.current; const root = rootRef.current; if (!d || !root || e.pointerId !== d.pointerId) return; const s = scaleOf(root); const box = root.getBoundingClientRect(); dragX.set((e.clientX - box.left) / s - grabOffset.current.x); dragY.set((e.clientY - box.top) / s - grabOffset.current.y); if (!reduce) tiltTarget.set(Math.max(-5, Math.min(5, (e.clientX - lastPointerX.current) * 0.5))); lastPointerX.current = e.clientX; const zone = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-drop-stage]"); if (!zone || !root.contains(zone)) return; const stage = zone.dataset.dropStage as DealStage; let index = deals.filter((x) => x.stage === stage && x.id !== d.id).length; if (zone.dataset.dropKind !== "chip") { const cards = [...zone.querySelectorAll("[data-card-id]")].filter((el) => el.dataset.cardId !== d.id); index = cards.filter((el) => { const r = el.getBoundingClientRect(); return r.top + r.height / 2 < e.clientY; }).length; } const prev = overRef.current; if (prev?.stage === stage && prev.index === index) return; overRef.current = { stage, index }; setOver({ stage, index }); }; const onRootPointerUp = (e: PointerEvent) => { const d = dragRef.current; const root = rootRef.current; if (!d || !root || e.pointerId !== d.pointerId) return; const box = root.getBoundingClientRect(); const inside = e.clientX >= box.left && e.clientX <= box.right && e.clientY >= box.top && e.clientY <= box.bottom; endDrag(inside); }; const dropLifted = () => { if (!lifted) return; const origin = lifted.snapshot.find((d) => d.id === lifted.id); const current = deals.find((d) => d.id === lifted.id); setLifted(null); if (!origin || !current) return; const index = deals.filter((d) => d.stage === current.stage).findIndex((d) => d.id === current.id); const restored = origin.stage === current.stage ? origin : current; const base = lifted.snapshot; const after = moveDeal(base, current.id, current.stage, index, { daysInStage: restored.daysInStage, ...(origin.stage !== current.stage && current.stage === "won" ? { closeLabel: "Today", lastTouch: "Just now" } : {}), }); setDeals(after); settle(base, after, current.id); }; const cancelLifted = () => { if (!lifted) return; const deal = lifted.snapshot.find((d) => d.id === lifted.id); setDeals(lifted.snapshot); setLifted(null); pendingFocus.current = lifted.id; if (deal) { setMobileStage(deal.stage); say(`Move cancelled. ${deal.company} is back in ${stageOf(deal.stage).label}.`); } }; const liveMove = (deal: Deal, stage: DealStage, index: number) => { const after = moveDeal(deals, deal.id, stage, index); const column = after.filter((d) => d.stage === stage); setDeals(after); setMobileStage(stage); pendingFocus.current = deal.id; say(`${stageOf(stage).label}, position ${column.findIndex((d) => d.id === deal.id) + 1} of ${column.length}.`); }; const focusCard = (id: string, stage: DealStage) => { setMobileStage(stage); pendingFocus.current = id; const el = [...(rootRef.current?.querySelectorAll(`[data-card-id="${id}"]`) ?? [])].find( (node) => node.offsetParent !== null, ); if (el) { el.focus(); pendingFocus.current = null; } }; const openDeal = (id: string) => { setSelectedId((cur) => (cur === id ? null : id)); }; const closeDetail = () => { if (selectedId) pendingFocus.current = selectedId; setSelectedId(null); }; const onCardKeyDown = (e: KeyboardEvent, deal: Deal) => { if (dragRef.current) return; const column = deals.filter((d) => d.stage === deal.stage); const idx = column.findIndex((d) => d.id === deal.id); const at = order.indexOf(deal.stage); if (lifted?.id === deal.id) { if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); const to = order[at + (e.key === "ArrowLeft" ? -1 : 1)]; if (!to) return; liveMove(deal, to, Math.min(idx, deals.filter((d) => d.stage === to).length)); } else if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault(); const to = idx + (e.key === "ArrowUp" ? -1 : 1); if (to < 0 || to >= column.length) return; liveMove(deal, deal.stage, to); } else if (e.key === " " || e.key === "Enter") { e.preventDefault(); pendingFocus.current = deal.id; dropLifted(); } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); cancelLifted(); } else if (e.key === "Tab") { dropLifted(); } return; } if (e.key === " ") { e.preventDefault(); setLifted({ id: deal.id, snapshot: deals }); say( `Picked up ${deal.company} in ${stageOf(deal.stage).label}. Left and right arrows change stage, up and down reorder, Space drops, Escape cancels.`, ); } else if (e.key === "Enter") { e.preventDefault(); openDeal(deal.id); } else if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault(); const to = column[idx + (e.key === "ArrowUp" ? -1 : 1)]; if (to) focusCard(to.id, to.stage); } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); const step = e.key === "ArrowLeft" ? -1 : 1; for (let i = at + step; i >= 0 && i < order.length; i += step) { const list = deals.filter((d) => d.stage === order[i]); if (list.length) { const to = list[Math.min(idx, list.length - 1)]; focusCard(to.id, to.stage); break; } } } }; const act = (signal: FocusSignal, action: FocusAction) => { if (resolving[signal.id]) return; const deal = deals.find((d) => d.id === signal.dealId); setResolving((r) => ({ ...r, [signal.id]: action })); railRef.current?.focus({ preventScroll: true }); if (action !== "snooze") { setDeals((all) => all.map((d) => d.id === signal.dealId ? { ...d, engagement: warmer[d.engagement], lastTouch: "Just now", activity: [ { label: action === "email" ? `You emailed ${signal.contact}` : `You logged a call with ${signal.contact}`, when: "Just now", }, ...d.activity, ], } : d, ), ); setTouched({ id: signal.dealId, key: nextKey() }); } const left = openSignals.length - 1; say( `${deal?.company ?? ""}: ${action === "email" ? `follow-up sent to ${signal.contact}` : action === "call" ? `call with ${signal.contact} logged` : "snoozed until tomorrow"}. ${left === 0 ? "Focus is clear." : `${left} left in Focus.`}`, ); later( () => { setResolving((r) => { const { [signal.id]: _, ...rest } = r; return rest; }); if (action === "snooze") setSnoozed((l) => [...l, signal.id]); else setHandled((l) => [...l, signal.id]); }, reduce ? 800 : 1150, ); }; const firstName = me?.name.split(" ")[0] ?? ""; const progress = Math.round((total / target) * 100); const navItems: { label: string; icon: LucideIcon; current?: boolean; badge?: boolean }[] = [ { label: "Today", icon: SunriseIcon, current: true }, { label: "Pipeline", icon: KanbanIcon }, { label: "Accounts", icon: Building2Icon }, { label: "Inbox", icon: InboxIcon, badge: true }, { label: "Reports", icon: ChartNoAxesColumnIcon }, ]; const workspaceMenu = (trigger: ReactElement) => ( {workspace} Sales pipeline Renewals Partnerships Workspace settings ); const lane = (stage: PipelineStage) => { const list = columns[stage.id]; const weighted = list.reduce((sum, d) => sum + d.value * stage.probability, 0); const isOver = drag !== null && over?.stage === stage.id; const isWon = stage.id === "won"; return (
    {stage.label} {list.length} {" "} {isWon ? "closed" : "weighted"}
    {isWon ? ( ) : ( {Math.round(stage.probability * 100)}% )}
      {list.map((deal) => { if (drag?.id === deal.id) { return (
      ); } const isLifted = lifted?.id === deal.id; const isSelected = selectedId === deal.id; const flag = flagFor(deal.id); const owner = ownerOf(deal.ownerId); const engagement = engagementMeta[deal.engagement].label.toLowerCase(); return (
      openDeal(deal.id)} onKeyDown={(e) => onCardKeyDown(e, deal)} onPointerCancel={() => { pending.current = null; }} onPointerDown={(e) => { if (e.button !== 0 || e.pointerType === "touch") return; pending.current = { id: deal.id, pointerId: e.pointerId, x: e.clientX, y: e.clientY, el: e.currentTarget }; }} onPointerMove={(e) => { const p = pending.current; if (!p || dragRef.current || p.pointerId !== e.pointerId) return; if (Math.hypot(e.clientX - p.x, e.clientY - p.y) < 5) return; startDrag(e, p); }} onPointerUp={() => { pending.current = null; }} role="button" tabIndex={0} >
      ); })} {list.length === 0 ? (
    • Drop a deal here
      • ) : null}
    ); }; const draggedDeal = drag ? deals.find((d) => d.id === drag.id) : undefined; const focusRail = (

    Focus {openSignals.length}

    Who to act on today, and why

    {visibleSignals.length ? (
      {visibleSignals.map((s) => { const deal = deals.find((d) => d.id === s.dealId); return ( { setHinted(null); openDeal(id); }} reduce={reduce} resolving={resolving[s.id]} signal={s} stageLabel={deal ? stageOf(deal.stage).label : ""} /> ); })}
    ) : (
    You're clear for today {handled.length} handled{snoozed.length ? `, ${snoozed.length} snoozed until tomorrow` : ""}. New signals land here as they happen.
    {snoozed.length ? ( ) : null}     )}
    ); return (
    { if (e.key === "Escape" && dragRef.current) { e.preventDefault(); endDrag(false); } }} onLostPointerCapture={() => { if (dragRef.current) endDrag(false); }} onPointerCancel={() => { if (dragRef.current) endDrag(false); }} onPointerDown={(e) => { if (lifted && !(e.target as HTMLElement).closest(`[data-card-id="${lifted.id}"]`)) dropLifted(); }} onPointerMove={onRootPointerMove} onScrollCapture={() => { if (!dragRef.current) rects.current.clear(); }} onPointerUp={onRootPointerUp} ref={rootRef} tabIndex={-1} >

    Press Space to pick up. Arrow keys move the deal between stages and up or down. Space or Enter drops it, Escape cancels. Press Enter to open details.

    {announcement}

    {workspaceMenu( , )}
    {me ? initials(me.name) : "?"}
    {dateLabel}

    {greeting}, {firstName}

    {openSignals.length === 0 ? "Nothing needs you right now. Nice work." : `${openSignals.length} ${openSignals.length === 1 ? "account needs" : "accounts need"} you today.`} Drag deals as they move.

    {forecastLabel}
    {money(total)} {delta ? ( 0 ? "bg-emerald-500/12 text-emerald-700 dark:bg-emerald-400/14 dark:text-emerald-300" : "bg-muted text-muted-foreground", )} exit={{ opacity: 0, transition: { duration: 0.2 } }} initial={{ opacity: 0, y: 4 }} key={delta.key} transition={{ duration: 0.2, ease }} > {signedMoney(delta.amount)} ) : null}
    {progress}% of {shortMoney(target)} target · {shortMoney(won)} won
    {(["board", "focus"] as const).map((t) => ( setTab(t)} > {t === "board" ? "Pipeline" : "Focus"} {t === "focus" && openSignals.length ? ( {openSignals.length} ) : null} ))}
    {stages.map((s) => { const active = s.id === mobileStage; const isOver = drag !== null && over?.stage === s.id; return ( ); })}
    {stages.map((s) => lane(s))}
    {lifted ? (
    ← → stage ↑ ↓ order Space drop Esc cancel
    ) : null}
    {drag && draggedDeal ? ( ) : null}
    ); } ```