CRM Contact Dashboard

Build a CRM contact dashboard for a B2B sales team. The page should include:

1. **Fixed left sidebar (240px)** — Company logo ("PipelineHQ") at the top, primary nav links with icons: Dashboard, Contacts, Deals, Companies, Activities, Reports, Settings. A "New Contact" button in bright blue at the bottom of the nav. The sidebar collapses to icon-only on screens below 1024px, and becomes a hamburger drawer on mobile.

2. **Top header bar** — Page title "Dashboard" on the left, a global search input in the center ("Search contacts, deals, companies…"), and a notifications bell with a red badge (3), and user avatar (initials "SK") on the right.

3. **KPI card row (4 cards):**
   - **Open Deals:** 47, ▲ +5 this week, green badge
   - **Pipeline Value:** $284,000, ▲ +12% vs last month, green badge
   - **Won This Month:** 11 deals / $63,500, compared to 8 last month
   - **Avg Deal Size:** $5,772, ▼ -3% vs last month, red badge
   Each card has an icon, a large metric value, a trend badge, and a subtle 7-day sparkline.

4. **Deal pipeline (Kanban summary strip)** — A horizontal strip with 5 columns: Lead (18), Qualified (12), Proposal Sent (9), Negotiation (5), Closed Won (11). Each column shows a count pill and the total value beneath (e.g. "Lead — $92,000"). Use color-coded left borders (gray, blue, yellow, orange, green).

5. **Two-column lower section:**
   - **Left (60%):** "Recent Contacts" table with columns: Name, Company, Stage, Last Activity, Owner. Show 6 rows. Each name is a clickable blue link. Owner column uses avatar chips. Stage column uses colored pills (Lead = gray, Qualified = blue, etc.).
   - **Right (40%):** "Activity Feed" — a vertical chronological list of 8 recent CRM events. Each event has a colored icon, an actor name, an action description, and a relative timestamp ("2 hours ago"). Examples: "Sofia Kim added note on Acme Corp", "Deal with TechFlow moved to Negotiation", "New contact: David Park at Vertex AI".

6. **Design:** White background, zinc-50 card backgrounds, blue-600 accent, Inter font. Subtle box shadows on cards. Pipeline strip uses a scrollable overflow-x on mobile.

[HEADER]
  [Logo: PipelineHQ]  [Search: "Search contacts, deals…"]  [🔔 3]  [Avatar: SK]

[SIDEBAR — 240px, fixed left]
  ● Dashboard (active, blue-600)
  ○ Contacts
  ○ Deals
  ○ Companies
  ○ Activities
  ○ Reports
  ○ Settings
  ──────────────
  [+ New Contact]   ← blue-600 button

[MAIN CONTENT]

  [KPI CARDS — 4 cols]
  ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
  │ 🤝 Open Deals       │ │ 💰 Pipeline Value    │ │ 🏆 Won This Month   │ │ 📊 Avg Deal Size    │
  │ 47                  │ │ $284,000             │ │ 11 deals            │ │ $5,772              │
  │ ▲ +5 this week      │ │ ▲ +12% vs last mo    │ │ $63,500 revenue     │ │ ▼ -3% vs last mo    │
  │ [sparkline ~~~~▲]   │ │ [sparkline ~~~~▲]    │ │ [vs 8 last mo]      │ │ [sparkline ~~~~▼]   │
  └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘

  [PIPELINE STRIP — horizontal kanban summary]
  ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
  │▌Lead             │ │▌Qualified        │ │▌Proposal Sent    │ │▌Negotiation      │ │▌Closed Won       │
  │ 18 deals         │ │ 12 deals         │ │ 9 deals          │ │ 5 deals          │ │ 11 deals         │
  │ $92,000          │ │ $78,400          │ │ $61,200          │ │ $38,900          │ │ $63,500          │
  └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘
   ← gray border        ← blue border         ← yellow border      ← orange border       ← green border

  [TWO COLUMNS]
  ┌──────────────────────────────────────────────────┐  ┌────────────────────────────────┐
  │ Recent Contacts                      [View all →]│  │ Activity Feed                  │
  │                                                  │  │                                │
  │ Name              Company   Stage    Last Act  Ow│  │ 🟢 Sofia Kim added note        │
  │ ──────────────────────────────────────────────── │  │    on Acme Corp · 2h ago       │
  │ Sarah Okafor      TechFlow  Qualified Feb 20  SK │  │                                │
  │ James Reyes       Vertex AI Lead     Feb 20  MJ  │  │ 🔵 Deal "TechFlow Q1"          │
  │ Laura Chen        Acme Corp Proposal Feb 19  SK  │  │    moved to Negotiation · 4h   │
  │ Marcus Webb       Finova    Negotiat Feb 18  TR  │  │                                │
  │ Priya Patel       OpsGrid   Qualified Feb 18  MJ │  │ 👤 New contact: David Park     │
  │ Tom Nakamura      Cloudbase Lead     Feb 17  TR  │  │    at Vertex AI · 5h ago       │
  │                                                  │  │                                │
  │ [← 1 2 3 … 8 →]                                 │  │ ✅ Deal "Finova Ent"           │
  │                                                  │  │    marked Closed Won · 1d ago  │
  └──────────────────────────────────────────────────┘  │                                │
                                                         │ 📝 James Reyes updated email   │
                                                         │    at Vertex AI · 1d ago       │
                                                         │                                │
                                                         │ 📞 Call logged with            │
                                                         │    Marcus Webb · 2d ago        │
                                                         │                                │
                                                         │ 🔔 Follow-up due: Sarah O.     │
                                                         │    TechFlow · overdue 1d       │
                                                         └────────────────────────────────┘