Dashboard Styling Update

app/dashboard/Dashboard.tsx

@@ -1,66 +1,61 @@
-import { AppSidebar } from "@/components/app-sidebar";
+"use client"
+
+import { useEffect, useState } from "react"
+import axios from "axios"
+import Link from "next/link"
+import { Activity, Layers, Network, Server } from "lucide-react"
+
+import { AppSidebar } from "@/components/app-sidebar"
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { Separator } from "@/components/ui/separator";
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
-import { useEffect, useState } from "react";
-import axios from "axios"; // Korrekter Import
+} from "@/components/ui/breadcrumb"
+import { Separator } from "@/components/ui/separator"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 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";
+import { Button } from "@/components/ui/button"
 
 interface StatsResponse {
-  serverCount: number;
-  applicationCount: number;
-  onlineApplicationsCount: number;
+  serverCount: number
+  applicationCount: number
+  onlineApplicationsCount: number
 }
-import Link from "next/link";
-
 
 export default function Dashboard() {
-  const [serverCount, setServerCount] = useState<number>(0);
-  const [applicationCount, setApplicationCount] = useState<number>(0);
-  const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0);
+  const [serverCount, setServerCount] = useState<number>(0)
+  const [applicationCount, setApplicationCount] = useState<number>(0)
+  const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0)
 
   const getStats = async () => {
     try {
-      const response = await axios.post<StatsResponse>('/api/dashboard/get', {});
-      setServerCount(response.data.serverCount);
-      setApplicationCount(response.data.applicationCount);
-      setOnlineApplicationsCount(response.data.onlineApplicationsCount);
+      const response = await axios.post<StatsResponse>("/api/dashboard/get", {})
+      setServerCount(response.data.serverCount)
+      setApplicationCount(response.data.applicationCount)
+      setOnlineApplicationsCount(response.data.onlineApplicationsCount)
     } catch (error: any) {
-      console.log("Axios error:", error.response?.data);
+      console.log("Axios error:", error.response?.data)
     }
-  };
+  }
 
   useEffect(() => {
-    getStats();
-  }, []);
+    getStats()
+  }, [])
 
   return (
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
             <Breadcrumb>
               <BreadcrumbList>
                 <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbPage>
-                    /
-                  </BreadcrumbPage>
+                  <BreadcrumbPage>/</BreadcrumbPage>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator className="hidden md:block" />
                 <BreadcrumbItem>
@@ -70,87 +65,104 @@ export default function Dashboard() {
             </Breadcrumb>
           </div>
         </header>
-        <div className="pl-4 pr-4">
-          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-        </div>
+        <div className="p-6">
+          <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 pl-4 pr-4 pt-6">
-            <Card className="overflow-hidden">
-              <CardHeader className="bg-gradient-to-rpb-4">
+          <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-lg">Servers</CardTitle>
-                  <Server className="h-5 w-5 text-slate-500" />
+                  <CardTitle className="text-xl font-medium">Servers</CardTitle>
+                  <Server className="h-6 w-6 text-rose-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 className="pt-2 pb-4">
+                <div className="text-4xl font-bold">{serverCount}</div>
+                <p className="text-sm text-muted-foreground mt-2">Active servers</p>
               </CardContent>
-              <CardFooter className="border-t p-3">
-                <Button variant="ghost" size="sm" className="w-full" asChild>
+              <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>
 
-            <Card className="overflow-hidden">
-              <CardHeader className="bg-gradient-to-rpb-4">
+            <Card className="overflow-hidden border-t-4 border-t-amber-500 shadow-sm transition-all hover:shadow-md">
+              <CardHeader className="pb-2">
                 <div className="flex items-center justify-between">
-                  <CardTitle className="text-lg">Applications</CardTitle>
-                  <Layers className="h-5 w-5 text-slate-500" />
+                  <CardTitle className="text-xl font-medium">Applications</CardTitle>
+                  <Layers className="h-6 w-6 text-amber-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 className="pt-2 pb-4">
+                <div className="text-4xl font-bold">{applicationCount}</div>
+                <p className="text-sm text-muted-foreground mt-2">Running applications</p>
               </CardContent>
-              <CardFooter className="border-t p-3">
-                <Button variant="ghost" size="sm" className="w-full" asChild>
+              <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/applications">View all applications</Link>
                 </Button>
               </CardFooter>
             </Card>
 
-            <Card className="overflow-hidden">
-              <CardHeader className="bg-gradient-to-r pb-4">
+            <Card className="overflow-hidden border-t-4 border-t-emerald-500 shadow-sm transition-all hover:shadow-md">
+              <CardHeader className="pb-2">
                 <div className="flex items-center justify-between">
-                  <CardTitle className="text-lg">Uptime</CardTitle>
-                  <Activity className="h-5 w-5 text-slate-500" />
+                  <CardTitle className="text-xl font-medium">Uptime</CardTitle>
+                  <Activity className="h-6 w-6 text-emerald-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 className="pt-2 pb-4">
+                <div className="flex flex-col">
+                  <div className="text-4xl font-bold flex items-center justify-between">
+                    <span>
+                      {onlineApplicationsCount}/{applicationCount}
+                    </span>
+                    <div className="flex items-center bg-emerald-100 text-emerald-700 px-2 py-1 rounded-md text-lg font-semibold">
+                      {applicationCount > 0 ? Math.round((onlineApplicationsCount / applicationCount) * 100) : 0}%
+                    </div>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5 mt-3">
+                    <div
+                      className="bg-emerald-500 h-2.5 rounded-full"
+                      style={{
+                        width: `${applicationCount > 0 ? Math.round((onlineApplicationsCount / applicationCount) * 100) : 0}%`,
+                      }}
+                    ></div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-2">Online applications</p>
+                </div>
               </CardContent>
-              <CardFooter className="border-t p-3">
-                <Button variant="ghost" size="sm" className="w-full" asChild>
+              <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/uptime">View uptime metrics</Link>
                 </Button>
               </CardFooter>
             </Card>
 
-            <Card className="overflow-hidden">
-              <CardHeader className="bg-gradient-to-rpb-4">
+            <Card className="overflow-hidden border-t-4 border-t-sky-500 shadow-sm transition-all hover:shadow-md">
+              <CardHeader className="pb-2">
                 <div className="flex items-center justify-between">
-                  <CardTitle className="text-lg">Network</CardTitle>
-                  <Network className="h-5 w-5 text-slate-500" />
+                  <CardTitle className="text-xl font-medium">Network</CardTitle>
+                  <Network className="h-6 w-6 text-sky-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 className="pt-2 pb-4">
+                <div className="text-4xl font-bold">{serverCount + applicationCount}</div>
+                <p className="text-sm text-muted-foreground mt-2">Active connections</p>
               </CardContent>
-              <CardFooter className="border-t p-3">
-                <Button variant="ghost" size="sm" className="w-full" asChild>
+              <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/network">View network details</Link>
                 </Button>
               </CardFooter>
             </Card>
           </div>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   )