From 113bb3bfb4923cd19c156875ad8204644d1e3213 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Sat, 19 Apr 2025 00:16:23 +0200
Subject: [PATCH] Enhance Dashboard UI for server management by updating card
 layout, improving titles, and adding descriptions for physical and virtual
 servers.

---
 app/dashboard/Dashboard.tsx | 66 ++++++++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/app/dashboard/Dashboard.tsx b/app/dashboard/Dashboard.tsx
index a514d2f..36a9a68 100644
--- a/app/dashboard/Dashboard.tsx
+++ b/app/dashboard/Dashboard.tsx
@@ -72,32 +72,54 @@ export default function Dashboard() {
           <h1 className="text-3xl font-bold tracking-tight mb-6">Dashboard</h1>
 
           <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
-            <Card className="overflow-hidden border-t-4 border-t-rose-500 shadow-sm transition-all hover:shadow-md">
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-xl font-medium">Servers</CardTitle>
-                  <Server className="h-6 w-6 text-rose-500" />
+          <Card className="overflow-hidden border-t-4 border-t-rose-500 shadow-lg transition-all hover:shadow-xl hover:border-t-rose-600">
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-2xl font-semibold">Server Infrastructure</CardTitle>
+                  <CardDescription className="mt-1">Physical and virtual servers overview</CardDescription>
                 </div>
-                <CardDescription>Manage your server infrastructure</CardDescription>
-              </CardHeader>
-              <CardContent className="pt-2 pb-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex flex-col">
-                    <div className="text-4xl font-bold">{serverCountNoVMs}</div>
-                    <p className="text-sm text-muted-foreground mt-2">Physical servers</p>
+                <Server className="h-8 w-8 text-rose-500 p-1.5 rounded-lg" />
+              </div>
+            </CardHeader>
+            <CardContent className="pt-2 pb-4">
+              <div className="grid grid-cols-2 gap-4">
+                {/* Physical Servers */}
+                <div className="flex items-center space-x-4 bg-background p-4 rounded-lg">
+                  <div className="bg-rose-100 p-2 rounded-full">
+                    <Server className="h-6 w-6 text-rose-600" />
                   </div>
-                  <div className="flex flex-col">
-                    <div className="text-4xl font-bold">{serverCountOnlyVMs}</div>
-                    <p className="text-sm text-muted-foreground mt-2">VMs</p>
+                  <div>
+                    <div className="text-3xl font-bold text-rose-600">{serverCountNoVMs}</div>
+                    <p className="text-sm text-muted-foreground">Physical Servers</p>
                   </div>
                 </div>
-              </CardContent>
-              <CardFooter className="border-t bg-muted/20 p-4">
-                <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
-                  <Link href="/dashboard/servers">View all servers</Link>
-                </Button>
-              </CardFooter>
-            </Card>
+
+                {/* Virtual Machines */}
+                <div className="flex items-center space-x-4 bg-background p-4 rounded-lg">
+                  <div className="bg-violet-100 p-2 rounded-full">
+                    <Network className="h-6 w-6 text-violet-600" />
+                  </div>
+                  <div>
+                    <div className="text-3xl font-bold text-violet-600">{serverCountOnlyVMs}</div>
+                    <p className="text-sm text-muted-foreground">Virtual Servers</p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter className="border-t bg-muted/10 p-4">
+              <Button 
+                variant="ghost" 
+                size="lg"
+                className="w-full hover:bg-rose-50font-semibold transition-colors"
+                asChild
+              >
+                <Link href="/dashboard/servers" className="flex items-center justify-between">
+                  <span>Manage Servers</span>
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
 
             <Card className="overflow-hidden border-t-4 border-t-amber-500 shadow-sm transition-all hover:shadow-md">
               <CardHeader className="pb-2">