External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-26 12:02:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard Update

Browse Source
This commit is contained in:
headlessdev 2025-04-15 14:49:07 +02:00
parent 871ab74576
commit 9c9b556124
1 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
app/dashboard/Dashboard.tsx
View File

@ -15,13 +15,17 @@ import {
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import axios from "axios"; // Korrekter Import 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 { interface StatsResponse {
serverCount: number; serverCount: number;
applicationCount: number; applicationCount: number;
onlineApplicationsCount: number; onlineApplicationsCount: number;
} }
import Link from "next/link";
export default function Dashboard() { export default function Dashboard() {
const [serverCount, setServerCount] = useState<number>(0); const [serverCount, setServerCount] = useState<number>(0);
@ -67,50 +71,87 @@ export default function Dashboard() {
</div> </div>
</header> </header>
<div className="pl-4 pr-4"> <div className="pl-4 pr-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
<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>
</div> </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> </SidebarInset>
</SidebarProvider> </SidebarProvider>
); )
} }