From 9c9b556124a0aff45dbc3244e16afe4ec337f9fa Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Tue, 15 Apr 2025 14:49:07 +0200
Subject: [PATCH] Dashboard Update

---
 app/dashboard/Dashboard.tsx | 131 +++++++++++++++++++++++-------------
 1 file changed, 86 insertions(+), 45 deletions(-)

diff --git a/app/dashboard/Dashboard.tsx b/app/dashboard/Dashboard.tsx
index ef5fc5b..30e29cf 100644
--- a/app/dashboard/Dashboard.tsx
+++ b/app/dashboard/Dashboard.tsx
@@ -15,13 +15,17 @@ import {
 } from "@/components/ui/sidebar";
 import { useEffect, useState } from "react";
 import axios from "axios"; // Korrekter Import
-import { Card, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Activity, Layers, Network, Server } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface StatsResponse {
   serverCount: number;
   applicationCount: number;
   onlineApplicationsCount: number;
 }
+import Link from "next/link";
+
 
 export default function Dashboard() {
   const [serverCount, setServerCount] = useState<number>(0);
@@ -67,50 +71,87 @@ export default function Dashboard() {
           </div>
         </header>
         <div className="pl-4 pr-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <Card className="w-full mb-4 relative">
-              <CardHeader>
-                <div className="flex items-center justify-center w-full">
-                  <div className="flex flex-col items-center justify-center">
-                    <span className="text-2xl font-bold">{serverCount}</span>
-                    <span className="text-md">Servers</span>
-                  </div>
-                </div>
-              </CardHeader>
-            </Card>
-            <Card className="w-full mb-4 relative">
-              <CardHeader>
-                <div className="flex items-center justify-center w-full">
-                  <div className="flex flex-col items-center justify-center">
-                    <span className="text-2xl font-bold">{applicationCount}</span>
-                    <span className="text-md">Applications</span>
-                  </div>
-                </div>
-              </CardHeader>
-            </Card>
-            <Card className="w-full mb-4 relative">
-              <CardHeader>
-                <div className="flex items-center justify-center w-full">
-                  <div className="flex flex-col items-center justify-center">
-                    <span className="text-2xl font-bold">
-                      {onlineApplicationsCount}/{applicationCount}
-                    </span>
-                    <span className="text-md">Applications are online</span>
-                  </div>
-                </div>
-              </CardHeader>
-            </Card>
-          </div>
-          <div className="h-72 w-full rounded-xl flex items-center justify-center bg-muted">
-            <span className="text-gray-400 text-2xl">COMING SOON</span>
-          </div>
-          <div className="pt-4">
-            <div className="h-72 w-full rounded-xl flex items-center justify-center bg-muted">
-              <span className="text-gray-400 text-2xl">COMING SOON</span>
-            </div>
-          </div>
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
         </div>
+
+          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 pl-4 pr-4 pt-6">
+            <Card className="overflow-hidden">
+              <CardHeader className="bg-gradient-to-rpb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg">Servers</CardTitle>
+                  <Server className="h-5 w-5 text-slate-500" />
+                </div>
+                <CardDescription>Manage your server infrastructure</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold">{serverCount}</div>
+                <p className="text-xs text-muted-foreground">Active servers</p>
+              </CardContent>
+              <CardFooter className="border-t p-3">
+                <Button variant="ghost" size="sm" className="w-full" asChild>
+                  <Link href="/dashboard/servers">View all servers</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+
+            <Card className="overflow-hidden">
+              <CardHeader className="bg-gradient-to-rpb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg">Applications</CardTitle>
+                  <Layers className="h-5 w-5 text-slate-500" />
+                </div>
+                <CardDescription>Manage your deployed applications</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold">{applicationCount}</div>
+                <p className="text-xs text-muted-foreground">Running applications</p>
+              </CardContent>
+              <CardFooter className="border-t p-3">
+                <Button variant="ghost" size="sm" className="w-full" asChild>
+                  <Link href="/dashboard/applications">View all applications</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+
+            <Card className="overflow-hidden">
+              <CardHeader className="bg-gradient-to-r pb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg">Uptime</CardTitle>
+                  <Activity className="h-5 w-5 text-slate-500" />
+                </div>
+                <CardDescription>Monitor your service availability</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold">{onlineApplicationsCount}/{applicationCount}</div>
+                <p className="text-xs text-muted-foreground">online Applications</p>
+              </CardContent>
+              <CardFooter className="border-t p-3">
+                <Button variant="ghost" size="sm" className="w-full" asChild>
+                  <Link href="/dashboard/uptime">View uptime metrics</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+
+            <Card className="overflow-hidden">
+              <CardHeader className="bg-gradient-to-rpb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg">Network</CardTitle>
+                  <Network className="h-5 w-5 text-slate-500" />
+                </div>
+                <CardDescription>Manage network configuration</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold">{serverCount + applicationCount}</div>
+                <p className="text-xs text-muted-foreground">Active connections</p>
+              </CardContent>
+              <CardFooter className="border-t p-3">
+                <Button variant="ghost" size="sm" className="w-full" asChild>
+                  <Link href="/dashboard/network">View network details</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
       </SidebarInset>
     </SidebarProvider>
-  );
-}
\ No newline at end of file
+  )
+}