From b09e2ebc59614a43942b0fb01eb928715c746ffe Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Tue, 7 Apr 2026 13:11:23 +0500
Subject: [PATCH] dahsboard connected to backend

---
 src/shared/request/links.ts                   |  1 +
 .../cabinet/ui/dashboard/StatsCards.tsx       | 72 +++++++++++++------
 src/widgets/cabinet/ui/dashboard/index.tsx    |  6 +-
 src/widgets/cabinet/ui/index.tsx              |  2 +-
 4 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/shared/request/links.ts b/src/shared/request/links.ts
index 8a705bb..d83b629 100644
--- a/src/shared/request/links.ts
+++ b/src/shared/request/links.ts
@@ -13,4 +13,5 @@ export const links = {
   si_create: '/shared/ai_document/create/',
   document_types: '/shared/document_types/',
   pay_history: '/shared/orders/all/',
+  statistics: '/shared/statistics/',
 };
diff --git a/src/widgets/cabinet/ui/dashboard/StatsCards.tsx b/src/widgets/cabinet/ui/dashboard/StatsCards.tsx
index a04f6df..68055f2 100644
--- a/src/widgets/cabinet/ui/dashboard/StatsCards.tsx
+++ b/src/widgets/cabinet/ui/dashboard/StatsCards.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
-import { TrendingUp, Calendar, Tag, Wallet } from 'lucide-react';
-import type { CabinetStats } from '../../lib/types';
+import { TrendingUp, Calendar, Wallet, Loader2 } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { apiRequest } from '@/shared/request/apiRequest';
+import { links } from '@/shared/request/links';
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+type Stats = {
+  total_documents: number;
+  this_month_documents: number;
+  paid_price: number;
+};
 
 // ─── Single stat card ──────────────────────────────────────────────────────────
 
@@ -33,46 +43,62 @@ const StatCard: React.FC<StatCardProps> = ({
   </div>
 );
 
+const StatCardSkeleton = () => (
+  <div className="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm animate-pulse">
+    <div className="w-10 h-10 rounded-xl bg-slate-100 mb-4" />
+    <div className="h-7 w-16 bg-slate-100 rounded mb-2" />
+    <div className="h-3 w-24 bg-slate-100 rounded" />
+  </div>
+);
+
 // ─── Grid ──────────────────────────────────────────────────────────────────────
 
-interface StatsCardsProps {
-  stats: CabinetStats;
-}
+export const StatsCards = () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['statistics'],
+    queryFn: (): Promise<Stats> =>
+      apiRequest('GET', links.statistics).then((res) => res.data as Stats),
+  });
 
-export const StatsCards: React.FC<StatsCardsProps> = ({ stats }) => {
-  const discountPct = Math.round(
-    (stats.discountUsed / stats.discountTotal) * 100,
-  );
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        <StatCardSkeleton />
+        <StatCardSkeleton />
+        <StatCardSkeleton />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center py-10 gap-2 text-slate-400">
+        <Loader2 size={18} className="animate-spin" />
+        <span className="text-sm">Ma&apos;lumot topilmadi</span>
+      </div>
+    );
+  }
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
       <StatCard
         icon={TrendingUp}
         label="Jami tekshiruvlar"
-        value={String(stats.total)}
+        value={String(data.total_documents)}
         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`}
+        value={String(data.this_month_documents)}
         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}`}
+        label="To'langan summa"
+        value={`${data.paid_price.toLocaleString('uz-UZ')} UZS`}
         iconColor="text-violet-600"
         iconBg="bg-violet-50"
       />
diff --git a/src/widgets/cabinet/ui/dashboard/index.tsx b/src/widgets/cabinet/ui/dashboard/index.tsx
index 679bac5..6894ae8 100644
--- a/src/widgets/cabinet/ui/dashboard/index.tsx
+++ b/src/widgets/cabinet/ui/dashboard/index.tsx
@@ -2,14 +2,12 @@ import React from 'react';
 import { CtaCards } from './CtaCards';
 import { StatsCards } from './StatsCards';
 import { ModulesSection } from './ModulesSection';
-import type { CabinetStats } from '../../lib/types';
 
 interface DashboardProps {
-  stats: CabinetStats;
   userName: string;
 }
 
-export const Dashboard: React.FC<DashboardProps> = ({ stats, userName }) => (
+export const Dashboard: React.FC<DashboardProps> = ({ userName }) => (
   <div className="space-y-6">
     <div>
       <h2 className="text-xl font-bold text-slate-900">
@@ -20,7 +18,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ stats, userName }) => (
       </p>
     </div>
 
-    <StatsCards stats={stats} />
+    <StatsCards />
 
     <div>
       <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
diff --git a/src/widgets/cabinet/ui/index.tsx b/src/widgets/cabinet/ui/index.tsx
index c24cd30..b80aa61 100644
--- a/src/widgets/cabinet/ui/index.tsx
+++ b/src/widgets/cabinet/ui/index.tsx
@@ -45,7 +45,7 @@ const ProfileSection = dynamic(
 function SectionContent({ section }: { section: CabinetSection }) {
   switch (section) {
     case 'dashboard':
-      return <Dashboard stats={MOCK_STATS} userName={MOCK_USER.name} />;
+      return <Dashboard userName={MOCK_USER.name} />;
     case 'plagiat':
       return <PlagiatTable />;
     case 'si':