KPI Cards Dashboard

import { Sparkline, GaugeChart } from "@chartts/react"

function KPICard({ label, value, trend, sparkData }) {
  return (
    <div className="p-6 rounded-xl bg-zinc-950 border border-zinc-800">
      <p className="text-xs text-zinc-500 font-mono uppercase">{label}</p>
      <div className="flex items-end justify-between mt-1">
        <p className="text-2xl font-bold text-white">{value}</p>
        <span className={`text-sm font-mono ${trend > 0 ? 'text-emerald-400' : 'text-red-400'}`}>
          {trend > 0 ? '+' : ''}{trend}%
        </span>
      </div>
      <Sparkline data={sparkData} className="mt-3 h-10" />
    </div>
  )
}

function SystemGauge({ label, value }) {
  return (
    <div className="p-6 rounded-xl bg-zinc-950 border border-zinc-800 text-center">
      <GaugeChart value={value} max={100} className="h-32 mx-auto" />
      <p className="text-sm text-zinc-400 mt-2">{label}</p>
    </div>
  )
}