ok better dashboard

frontend/src/pages/dashboard/index.tsx

@@ -31,7 +31,7 @@ import {
 } from "@ui/dialog";
 import { useState } from "react";
 import { RecentlyViewed } from "./components/recents";
-import { ServerStats } from "@pages/server";
+import { ServerStats, ServerStatusIcon } from "@pages/server";
 
 const NewDeployment = ({
   open,
@@ -153,9 +153,12 @@ export const ServerCard = ({ id }: { id: string }) => {
   return (
     <Link to={`/servers/${server.id}`} key={server.id}>
       <Card className="hover:bg-accent">
-        <CardHeader>
-          <CardTitle>{server.name}</CardTitle>
-          <CardDescription>{server.status}</CardDescription>
+        <CardHeader className="flex flex-row justify-between">
+          <div>
+            <CardTitle>{server.name}</CardTitle>
+            <CardDescription>{server.status}</CardDescription>
+          </div>
+          <ServerStatusIcon serverId={server.id} />
         </CardHeader>
         <CardContent>
           <ServerStats serverId={server.id} />
@@ -210,7 +213,7 @@ export const Dashboard = () => {
           <NewButton />
         </div>
       </div>
-      <div className="flex gap-24">
+      <div className="flex gap-8">
         <div className="flex  gap-4 w-full h-fit">
           <DeploymentsChart />
           <ServersChart />

frontend/src/pages/deployments/index.tsx

@@ -0,0 +1,17 @@
+import { useRead } from "@hooks";
+import { DeploymentCard } from "@pages/dashboard";
+
+export const Deployments = () => {
+  const deployments = useRead({ type: "ListDeployments", params: {} }).data;
+
+  return (
+    <div className="flex flex-col gap-12">
+      <h1 className="text-3xl">Deployments</h1>
+      <div className="grid grid-cols-4 gap-8">
+        {deployments?.map(({ id }) => (
+          <DeploymentCard key={id} id={id} />
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/src/router.tsx

@@ -10,6 +10,7 @@ import { Dashboard } from "@pages/dashboard";
 import { Server } from "@pages/server";
 import { Deployment } from "@pages/deployment";
 import { Servers } from "@pages/servers";
+import { Deployments } from "@pages/deployments";
 
 const router = createBrowserRouter([
   {
@@ -23,7 +24,7 @@ const router = createBrowserRouter([
       {
         path: "deployments",
         children: [
-          { path: "", element: "deploymenys" },
+          { path: "", element: <Deployments /> },
           { path: ":deploymentId", element: <Deployment /> },
         ],
       },