提示
阶段标签用色要有序列感：琥珀是谈判、蓝是提案。金额用等宽数字，进度条只讲一个故事。
Build a CRM dashboard for "Relay CRM", a revenue-operations console.
STYLE
- Dark canvas (#0b0f17), panels at #121826 with hairline borders
- Accents: teal (#00c2b3) for the brand dot and gains, blue (#0071e3) for charts; up = teal, down = soft red
- Monospace for metrics, clean sans for labels
LAYOUT
- Sidebar: brand "Relay" with a teal dot; nav Pipeline (on), Contacts, Forecast, Sequences, Reports; footer Settings
- Top bar: "Pipeline health" + "Updated 2 min ago"; pill "Last 30 days"
- Four KPIs: Open pipeline $2.4M +12.4%; Win rate 38% -8.1%; Avg deal $18.4k +0.4%; New leads 126 +3
- Left: "Deals closing this month" rows with stage pills - Northwind renewal (Negotiation, $84,000), Helio expansion (Proposal, $52,500), Beacon pilot (Discovery, $18,900); tall adds Cadence upsell (Proposal, $31,200)
- Right: "Quarter forecast" - Closed $187k of $500k with a teal-blue progress bar; tall adds Recent activity (A. Rivera moved Helio to Proposal; K. Osei logged a call with Beacon)
COMPONENTS
- Sidebar: brand with teal dot, five nav items, footer
- Top bar: title, updated-time, period pill
- Four KPI cards with deltas
- Deal rows with stage pills; forecast card with progress bar; tall adds activity feed
INTERACTION
- Stage pills are colour-coded by stage; the forecast bar fills to quota; nav items highlight on hover.
TECHNICAL
- React, Tailwind CSS, Recharts or visx for charts, shadcn/ui