Merge pull request djeck1432#944 from laryhills/feat/connect-admin-dashboard-component

Author: vadim-ghostman

margin/margin_frontend/src/services/dashboardServices.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api/api";
+
+interface DashboardStatistics {
+  users: number;
+  opened_positions: number;
+  liquidated_positions: number;
+  opened_orders: number;
+}
+
+const fetchDashboardStatistics = async (): Promise<DashboardStatistics> => {
+  const response = await api.get("dashboard/statistic").json<DashboardStatistics>();
+  return response;
+};
+
+export const useDashboardStatistics = () => {
+  return useQuery({
+    queryKey: ["dashboard", "statistics"],
+    queryFn: fetchDashboardStatistics,
+  });
+};

margin/margin_frontend/src/ui/admin/dashboard/DashboardStats.tsx

@@ -1,22 +1,39 @@
 import React from 'react';
 import Card from '../../components/Card';
+import { useDashboardStatistics } from '../../../services/dashboardServices';
 
-const stats = [
-  { label: 'Users', value: 1200 },
-  { label: 'Opened Positions', value: 340 },
-  { label: 'Liquidated Positions', value: 45 },
-  { label: 'Opened Orders', value: 210 },
-];
+const DashboardStats: React.FC = () => {
+  const { data: statistics, isLoading, isError } = useDashboardStatistics();
 
-const DashboardStats: React.FC = () => (
-  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-    {stats.map((stat) => (
-      <Card key={stat.label} className="p-6 flex flex-col items-center text-center">
-        <div className="text-3xl font-bold text-primary mb-2">{stat.value}</div>
-        <div className="text-lg text-gray-400 font-medium">{stat.label}</div>
-      </Card>
-    ))}
-  </div>
-);
+  if (isError) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <Card className="p-6 flex flex-col items-center text-center col-span-full">
+          <div className="text-lg text-red-400 font-medium">Failed to load dashboard statistics</div>
+        </Card>
+      </div>
+    );
+  }
+
+  const stats = [
+    { label: 'Users', value: statistics?.users ?? 0 },
+    { label: 'Opened Positions', value: statistics?.opened_positions ?? 0 },
+    { label: 'Liquidated Positions', value: statistics?.liquidated_positions ?? 0 },
+    { label: 'Opened Orders', value: statistics?.opened_orders ?? 0 },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {stats.map((stat) => (
+        <Card key={stat.label} className="p-6 flex flex-col items-center text-center">
+          <div className="text-3xl font-bold text-primary mb-2">
+            {isLoading ? '...' : stat.value.toLocaleString()}
+          </div>
+          <div className="text-lg text-gray-400 font-medium">{stat.label}</div>
+        </Card>
+      ))}
+    </div>
+  );
+};
 
 export default DashboardStats;