improve home page

ui/src/components/AgentCard.tsx

@@ -1,4 +1,9 @@
+import { UptimeMessage } from "@/services/types";
+import { formatRelativeTime, isAgentOnline } from "@/services/utils";
+import { DottedProgressBar } from "./Progressbar";
+
 export type AgentOverviewCardProps = {
+    count: number;
     title: string;
     icon: {
         ref: React.ReactNode;
@@ -19,7 +24,9 @@ export function AgentOverviewCard({
                     <p className="text-sm text-gray-400 uppercase tracking-wider">
                         {props.title}
                     </p>
-                    <p className="text-2xl font-bold text-white">0</p>
+                    <p className="text-2xl font-bold text-white">
+                        {props.count}
+                    </p>
                 </div>
                 <div
                     className="w-12 h-12 rounded-lg flex items-center justify-center"
@@ -34,3 +41,62 @@ export function AgentOverviewCard({
         </div>
     );
 }
+
+export type AgentCardProps = {
+    data: UptimeMessage;
+    onClick?: () => void;
+};
+
+export function AgentCard({ props }: { props: AgentCardProps }) {
+    const status = isAgentOnline(props.data)
+        ? {
+              name: "online",
+              color: "bg-green-500",
+              textColor: "text-green-400",
+              borderColor: "border-green-500/20",
+              bgColor: "bg-green-500/10",
+          }
+        : {
+              name: "offline",
+              color: "bg-red-500",
+              textColor: "text-red-400",
+              borderColor: "border-red-500/20",
+              bgColor: "bg-red-500/10",
+          };
+
+    return (
+        <div
+            onClick={() => props.onClick?.()}
+            className="bg-[#111111] border border-[#262626] rounded-lg p-6 hover:bg-[#151515] transition-all cursor-pointer group"
+        >
+            <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                    <div
+                        className={`px-2 py-1 rounded-md text-xs font-medium ${status.bgColor} ${status.textColor} border ${status.borderColor}`}
+                    >
+                        {status.name.toUpperCase()}
+                    </div>
+                    <h3 className="text-lg font-semibold text-white transition-colors">
+                        {props.data.agent}
+                    </h3>
+                </div>
+
+                <div className="flex items-center space-x-3 flex-1 justify-end">
+                    <div className="flex flex-col max-w-lg gap-y-2">
+                        <DottedProgressBar
+                            color={status.color}
+                            percentage={props.data.uptime}
+                            totalDots={20}
+                        />
+                        <div className="flex justify-between items-center text-xs">
+                            <span>
+                                {formatRelativeTime(props.data.last_seen)}
+                            </span>
+                            <span>{props.data.uptime.toFixed(2)}%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}