Admin Panel Charts

import { LineChart, GaugeChart, HeatmapChart } from "@chartts/react"

export function AdminDashboard({ stats }) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 rounded-xl card p-6">
        <h3 className="text-sm font-medium muted-text mb-4">User Growth</h3>
        <LineChart
          data={stats.users}
          x="date"
          y="count"
          className="h-64"
          lineClassName="stroke-cyan-400"
          areaClassName="fill-cyan-400/10"
        />
      </div>
      <div className="col-span-4 grid gap-4">
        <div className="rounded-xl card p-4">
          <GaugeChart value={stats.cpu} max={100} label="CPU" className="h-32" />
        </div>
        <div className="rounded-xl card p-4">
          <GaugeChart value={stats.memory} max={100} label="Memory" className="h-32" />
        </div>
      </div>
    </div>
  )
}