status-monitor/ui/src/pages/home.tsx

"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
                props={{
                    title: "Status Monitor",
                    subtitle: "Home",
                    hasBackButton: false,
                }}
            />
            <main className="max-w-7xl mx-auto py-8">
                <div className="mx-2">
                    <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 />,
                                    color: "rgb(96, 165, 250)",
                                    bgColor: "rgba(59, 130, 246, 0.2)",
                                },
                            }}
                        />
                        <AgentOverviewCard
                            props={{
                                count: onlineAgents,
                                title: "online",
                                icon: {
                                    ref: (
                                        <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
                                    ),
                                    color: "rgb(34, 197, 94)",
                                    bgColor: "rgba(34, 197, 94, 0.2)",
                                },
                            }}
                        />
                        <AgentOverviewCard
                            props={{
                                count: offlineAgents,
                                title: "offline",
                                icon: {
                                    ref: (
                                        <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
                                    ),
                                    color: "rgb(239, 68, 68)",
                                    bgColor: "rgba(239, 68, 68, 0.2)",
                                },
                            }}
                        />
                    </div>

                    <div className="mb-6">
                        <h2 className="text-xl font-semibold mb-4">Agents</h2>

                        <div className="space-y-6">
                            {agents.map((agent, index) => (
                                <AgentCard
                                    key={index}
                                    props={{ data: agent }}
                                />
                            ))}
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
}