changed

src/widgets/cabinet/ui/dashboard/StatsCards.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { TrendingUp, Calendar, Tag, Wallet } from 'lucide-react';
+import type { CabinetStats } from '../../lib/types';
+
+// ─── Single stat card ──────────────────────────────────────────────────────────
+
+interface StatCardProps {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  sub?: string;
+  iconColor: string;
+  iconBg: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({
+  icon: Icon,
+  label,
+  value,
+  sub,
+  iconColor,
+  iconBg,
+}) => (
+  <div className="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
+    <div
+      className={`w-10 h-10 rounded-xl flex items-center justify-center mb-4 ${iconBg}`}
+    >
+      <Icon size={18} className={iconColor} />
+    </div>
+    <p className="text-2xl font-bold text-slate-900 tabular-nums">{value}</p>
+    <p className="text-xs text-slate-500 mt-0.5">{label}</p>
+    {sub && <p className="text-[11px] text-slate-400 mt-1">{sub}</p>}
+  </div>
+);
+
+// ─── Grid ──────────────────────────────────────────────────────────────────────
+
+interface StatsCardsProps {
+  stats: CabinetStats;
+}
+
+export const StatsCards: React.FC<StatsCardsProps> = ({ stats }) => {
+  const discountPct = Math.round(
+    (stats.discountUsed / stats.discountTotal) * 100,
+  );
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <StatCard
+        icon={TrendingUp}
+        label="Jami tekshiruvlar"
+        value={String(stats.total)}
+        iconColor="text-blue-600"
+        iconBg="bg-blue-50"
+      />
+      <StatCard
+        icon={Calendar}
+        label="Bu oy"
+        value={String(stats.thisMonth)}
+        sub={`${stats.discountUsed}/${stats.discountTotal} ta hujjat`}
+        iconColor="text-emerald-600"
+        iconBg="bg-emerald-50"
+      />
+      <StatCard
+        icon={Tag}
+        label="Chegirma holati"
+        value={`${discountPct}%`}
+        sub={`${stats.discountUsed}/${stats.discountTotal} ta ishlatilgan`}
+        iconColor="text-amber-600"
+        iconBg="bg-amber-50"
+      />
+      <StatCard
+        icon={Wallet}
+        label="Balans"
+        value={`${stats.balance.toLocaleString()} ${stats.currency}`}
+        iconColor="text-violet-600"
+        iconBg="bg-violet-50"
+      />
+    </div>
+  );
+};