mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-24 02:46:28 +00:00
Dashboard Update
This commit is contained in:
parent
871ab74576
commit
9c9b556124
@ -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>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user