4. Xây Dựng Executive Dashboard: Biểu Đồ Recharts, Thẻ KPI Động & Bộ Lọc Thời Gian

// ExecutiveDashboard.tsx
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { TrendingUp, Users, DollarSign, ShoppingBag } from 'lucide-react';

const data = [
  { name: 'T1', revenue: 450 }, { name: 'T2', revenue: 520 },
  { name: 'T3', revenue: 610 }, { name: 'T4', revenue: 580 },
  { name: 'T5', revenue: 750 }, { name: 'T6', revenue: 890 }
];

export function Dashboard() {
  return (
    <div className="p-6 bg-slate-900 min-h-screen text-slate-100">
      {/* 1. TOP STATS GRID */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div className="p-5 bg-slate-800/60 border border-slate-700/60 rounded-2xl">
          <div className="flex justify-between items-center mb-3">
            <span className="text-sm text-slate-400">Doanh thu tháng</span>
            <DollarSign className="w-5 h-5 text-emerald-400" />
          </div>
          <div className="text-2xl font-bold">890.500.000 đ</div>
          <div className="text-xs text-emerald-400 flex items-center gap-1 mt-1 font-semibold">
            <TrendingUp className="w-3.5 h-3.5" /> +18.5% so với tháng trước
          </div>
        </div>
      </div>

      {/* 2. REVENUE CHART */}
      <div className="p-6 bg-slate-800/60 border border-slate-700/60 rounded-2xl mb-6">
        <h3 className="text-lg font-bold mb-4">Xu hướng tăng trưởng doanh thu 2026 (Triệu VNĐ)</h3>
        <div className="h-72 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data}>
              <defs>
                <linearGradient id="colorRev" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#6366f1" stopOpacity={0.8}/>
                  <stop offset="95%" stopColor="#6366f1" stopOpacity={0}/>
                </linearGradient>
              </defs>
              <XAxis dataKey="name" stroke="#64748b" />
              <YAxis stroke="#64748b" />
              <Tooltip contentStyle={{ backgroundColor: '#1e293b', borderColor: '#334155', borderRadius: '12px' }} />
              <Area type="monotone" dataKey="revenue" stroke="#6366f1" strokeWidth={3} fillOpacity={1} fill="url(#colorRev)" />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}