improve home page

ui/src/pages/home.tsx

@@ -1,8 +1,27 @@
-import { AgentOverviewCard } from "@/components/AgentCard";
+"use client";
+
+import { AgentCard, AgentOverviewCard } from "@/components/AgentCard";
 import { Header } from "@/components/Header";
+import { UptimeMessage } from "@/services/types";
+import { isAgentOnline } from "@/services/utils";
 import { Box } from "lucide-react";
+import { useEffect, useState } from "react";
 
 export function HomePage() {
+    const [agents, setAgents] = useState<UptimeMessage[]>([]);
+
+    useEffect(() => {
+        fetch("http://localhost:3000/agents")
+            .then((res) => res.json())
+            .then((data) => {
+                setAgents(data);
+            });
+    }, []);
+
+    const totalAgents = agents.length;
+    const onlineAgents = agents.filter((agent) => isAgentOnline(agent)).length;
+    const offlineAgents = totalAgents - onlineAgents;
+
     return (
         <div>
             <Header
@@ -13,9 +32,12 @@ export function HomePage() {
                 }}
             />
             <main className="max-w-7xl mx-auto py-8">
+                <h2 className="text-xl font-semibold mb-4">Overview</h2>
+
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                     <AgentOverviewCard
                         props={{
+                            count: totalAgents,
                             title: "total agents",
                             icon: {
                                 ref: <Box />,
@@ -26,6 +48,7 @@ export function HomePage() {
                     />
                     <AgentOverviewCard
                         props={{
+                            count: onlineAgents,
                             title: "online",
                             icon: {
                                 ref: (
@@ -38,6 +61,7 @@ export function HomePage() {
                     />
                     <AgentOverviewCard
                         props={{
+                            count: offlineAgents,
                             title: "offline",
                             icon: {
                                 ref: (
@@ -53,7 +77,11 @@ export function HomePage() {
                 <div className="mb-6">
                     <h2 className="text-xl font-semibold mb-4">Agents</h2>
 
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
+                    <div className="space-y-6">
+                        {agents.map((agent, index) => (
+                            <AgentCard key={index} props={{ data: agent }} />
+                        ))}
+                    </div>
                 </div>
             </main>
         </div>