ICP Overview Strip

Full-width glassmorphism card designed to span the top section of the vandoko-ai dealer dashboard. Displays 4 circular alignment gauges in a row — Overall (weighted composite), Demographic (Age, Income, Education), Vehicle (Segment, Price, Financing), and Behavior (Cycle, Affinity, Channels) — each with color-coded thresholds and category pill labels.

Installation

Usage

import { IcpOverviewStrip } from "@/components/icp-overview-strip";

export default function DashboardHeader() {
  return (
    <IcpOverviewStrip
      oemName="Toyota — Northeast Region"
      overall={{
        label: "Overall",
        score: 84,
        sublabels: ["Weighted Composite"],
      }}
      demographic={{
        label: "Demographic",
        score: 88,
        sublabels: ["Age", "Income", "Education"],
      }}
      vehicle={{
        label: "Vehicle",
        score: 79,
        sublabels: ["Segment", "Price", "Financing"],
      }}
      behavior={{
        label: "Behavior",
        score: 82,
        sublabels: ["Cycle", "Affinity", "Channels"],
      }}
    />
  );
}

Features

• 4-gauge layout — Responsive grid: 2 cols on mobile, 4 cols on desktop with dividers
• Glass card container — Cyan + azure edge shines on hover, backdrop blur
• Color-coded thresholds — Cyan (strong 80+), azure (moderate 50-79), muted (weak)
• Category pills — Each gauge shows its sub-dimension labels as compact badges
• Header bar — OEM name + threshold legend in a compact top row
• Uses theme tokens — All colors via var(--chart-N) CSS variables
• Full-width — Designed to span the dashboard content area as the top-level KPI strip

Dashboard Placement

This component is designed as the first row of the vandoko-ai dealer dashboard, directly below the navigation. It gives dealership management an instant read on their ICP alignment across all four dimensions before drilling into channel-specific data below.

┌─────────────────────────────────────────────────────┐
│  ICP Overview Strip (this component)                │
│  ┌──────────┬──────────┬──────────┬──────────┐      │
│  │ Overall  │ Demo-    │ Vehicle  │ Behavior │      │
│  │  (84)    │ graphic  │  (79)    │  (82)    │      │
│  │          │  (88)    │          │          │      │
│  └──────────┴──────────┴──────────┴──────────┘      │
├─────────────────────────────────────────────────────┤
│  Rest of dashboard below...                         │
└─────────────────────────────────────────────────────┘

Related Components

• icp-alignment-gauge — Detailed single-OEM view with per-metric progress bars
• channel-kpi-strip — 6-channel metrics row (complements this as the second strip)

Lineage