Sales Dashboard

import {
  AreaChart, GaugeChart, WaterfallChart,
  BarChart, FunnelChart, RadarChart, Sparkline
} from "@chartts/react"

export function SalesDashboard() {
  return (
    <div className="space-y-6">
      {/* KPI row */}
      <div className="grid grid-cols-4 gap-4">
        <KPI label="Revenue" value="$2.4M" change="+18.2%" sparkline={revTrend} />
        <KPI label="Avg Deal" value="$48.2K" change="+5.4%" />
        <KPI label="Win Rate" value="34.2%" change="+2.1%" />
        <KPI label="Pipeline" value="$8.6M" change="+22%" />
      </div>

      {/* Revenue + gauge */}
      <div className="grid grid-cols-3 gap-4">
        <AreaChart
          data={revenue}
          x="month" y={["revenue", "target"]}
          className="col-span-2 h-72 rounded-xl bg-zinc-950 p-4"
        />
        <GaugeChart value={78} max={100} label="Annual Target" className="h-72" />
      </div>

      {/* P&L + regions */}
      <div className="grid grid-cols-2 gap-4">
        <WaterfallChart data={pl} x="item" y="amount" className="h-80" />
        <BarChart data={regions} x="region" y={["q3","q4"]} className="h-80" />
      </div>

      {/* Pipeline + team */}
      <div className="grid grid-cols-2 gap-4">
        <FunnelChart data={pipeline} value="deals" label="stage" className="h-64" />
        <RadarChart data={team} axes={skills} fill className="h-64" />
      </div>
    </div>
  )
}