Add stats and trades to bots

src/Managing.WebApp/src/components/organism/Trading/Summary.tsx

@@ -1,9 +1,13 @@
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid'
-import React, { useEffect, useState } from 'react'
+import {ArrowDownIcon, ArrowUpIcon} from '@heroicons/react/solid'
+import React, {useEffect, useState} from 'react'
 
-import type { TradingBot } from '../../../generated/ManagingApi'
-import { PositionStatus, TradeDirection } from '../../../generated/ManagingApi'
-import type { IAccountBalanceProps } from '../../../global/type'
+import useApiUrlStore from '../../../app/store/apiStore'
+import type {PlatformSummaryViewModel, TradingBot} from '../../../generated/ManagingApi'
+import {DataClient, PositionStatus, TradeDirection} from '../../../generated/ManagingApi'
+import type {IAccountBalanceProps} from '../../../global/type'
+
+// Time filter options matching backend
+const TIME_FILTERS = ['24H', '3D', '1W', '1M', '1Y', 'Total']
 
 function GetGlobalWinrate(bots: TradingBot[]) {
   if (bots == null || bots == undefined || bots.length == 0) {
@@ -55,6 +59,9 @@ function GetPositionCount(
 const Summary: React.FC<IAccountBalanceProps> = ({ bots }) => {
   const [globalPnl, setGlobalPnl] = useState<number>(0)
   const [globalWinrate, setGlobalWinrate] = useState<number>(0)
+  const [selectedTimeFilter, setSelectedTimeFilter] = useState<string>('Total')
+  const [platformStats, setPlatformStats] = useState<PlatformSummaryViewModel | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
   const [openLong, setLong] = useState<number>(0)
   const [openShort, setShort] = useState<number>(0)
@@ -62,6 +69,8 @@ const Summary: React.FC<IAccountBalanceProps> = ({ bots }) => {
   const [closedLong, setClosedLong] = useState<number>(0)
   const [closedShort, setClosedShort] = useState<number>(0)
 
+  const { apiUrl } = useApiUrlStore()
+
   useEffect(() => {
     if (bots) {
       const pnl = bots.reduce((acc, bot) => {
@@ -86,9 +95,67 @@ const Summary: React.FC<IAccountBalanceProps> = ({ bots }) => {
     }
   }, [bots])
 
+  // Fetch platform summary data
+  useEffect(() => {
+    const fetchPlatformStats = async () => {
+      setIsLoading(true)
+      try {
+        const dataClient = new DataClient({}, apiUrl)
+        const data = await dataClient.data_GetPlatformSummary(selectedTimeFilter)
+        setPlatformStats(data)
+      } catch (error) {
+        console.error('Error fetching platform stats:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchPlatformStats()
+  }, [apiUrl, selectedTimeFilter])
+
   return (
     <div className="p-4">
-      <div className="stats bg-primary text-primary-content mb-4"></div>
+      <div className="mb-4 flex justify-between items-center">
+        <h2 className="text-xl font-bold">Platform Overview</h2>
+        <div className="join">
+          {TIME_FILTERS.map((filter) => (
+            <button
+              key={filter}
+              className={`btn btn-sm join-item ${selectedTimeFilter === filter ? 'btn-primary' : 'btn-ghost'}`}
+              onClick={() => setSelectedTimeFilter(filter)}
+            >
+              {filter}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="stats bg-primary text-primary-content mb-4">
+        <div className="stat">
+          <div className="stat-title">Total Agents</div>
+          <div className="stat-value">{platformStats?.totalAgents ?? 0}</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Active Strategies</div>
+          <div className="stat-value">{platformStats?.totalActiveStrategies ?? 0}</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Total Platform PnL</div>
+          <div className="stat-value">{(platformStats?.totalPlatformPnL ?? 0).toFixed(2)} $</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Volume (Total)</div>
+          <div className="stat-value">{(platformStats?.totalPlatformVolume ?? 0).toFixed(2)} $</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Volume (24h)</div>
+          <div className="stat-value">{(platformStats?.totalPlatformVolumeLast24h ?? 0).toFixed(2)} $</div>
+        </div>
+      </div>
 
       <div className="stats bg-primary text-primary-content">
         <div className="stat">