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

Dashboard Styling Update

Browse Source
This commit is contained in:
headlessdev
2025-04-15 16:11:31 +02:00
parent 39ba85dcf4
commit 1e8682646d
1 changed files with 85 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
app/dashboard/Dashboard.tsx
View File

@@ -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 { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList, BreadcrumbList,
BreadcrumbPage, BreadcrumbPage,
BreadcrumbSeparator, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"; } from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator"
import { import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { useEffect, useState } from "react";
import axios from "axios"; // Korrekter Import
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } 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"
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)
const [applicationCount, setApplicationCount] = useState<number>(0); const [applicationCount, setApplicationCount] = useState<number>(0)
const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0); const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0)
const getStats = async () => { const getStats = async () => {
try { try {
const response = await axios.post<StatsResponse>('/api/dashboard/get', {}); const response = await axios.post<StatsResponse>("/api/dashboard/get", {})
setServerCount(response.data.serverCount); setServerCount(response.data.serverCount)
setApplicationCount(response.data.applicationCount); setApplicationCount(response.data.applicationCount)
setOnlineApplicationsCount(response.data.onlineApplicationsCount); setOnlineApplicationsCount(response.data.onlineApplicationsCount)
} catch (error: any) { } catch (error: any) {
console.log("Axios error:", error.response?.data); console.log("Axios error:", error.response?.data)
} }
}; }
useEffect(() => { useEffect(() => {
getStats(); getStats()
}, []); }, [])
return ( return (
<SidebarProvider> <SidebarProvider>
<AppSidebar /> <AppSidebar />
<SidebarInset> <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"> <div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" /> <Separator orientation="vertical" className="mr-2 h-4" />
<Breadcrumb> <Breadcrumb>
<BreadcrumbList> <BreadcrumbList>
<BreadcrumbItem className="hidden md:block"> <BreadcrumbItem className="hidden md:block">
<BreadcrumbPage> <BreadcrumbPage>/</BreadcrumbPage>
/
</BreadcrumbPage>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" /> <BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem> <BreadcrumbItem>
@@ -70,87 +65,104 @@ export default function Dashboard() {
</Breadcrumb> </Breadcrumb>
</div> </div>
</header> </header>
<div className="pl-4 pr-4"> <div className="p-6">
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1> <h1 className="text-3xl font-bold tracking-tight mb-6">Dashboard</h1>
</div>
<div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 pl-4 pr-4 pt-6"> <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
<Card className="overflow-hidden"> <Card className="overflow-hidden border-t-4 border-t-rose-500 shadow-sm transition-all hover:shadow-md">
<CardHeader className="bg-gradient-to-rpb-4"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg">Servers</CardTitle> <CardTitle className="text-xl font-medium">Servers</CardTitle>
<Server className="h-5 w-5 text-slate-500" /> <Server className="h-6 w-6 text-rose-500" />
</div> </div>
<CardDescription>Manage your server infrastructure</CardDescription> <CardDescription>Manage your server infrastructure</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-6"> <CardContent className="pt-2 pb-4">
<div className="text-2xl font-bold">{serverCount}</div> <div className="text-4xl font-bold">{serverCount}</div>
<p className="text-xs text-muted-foreground">Active servers</p> <p className="text-sm text-muted-foreground mt-2">Active servers</p>
</CardContent> </CardContent>
<CardFooter className="border-t p-3"> <CardFooter className="border-t bg-muted/20 p-4">
<Button variant="ghost" size="sm" className="w-full" asChild> <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
<Link href="/dashboard/servers">View all servers</Link> <Link href="/dashboard/servers">View all servers</Link>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className="overflow-hidden"> <Card className="overflow-hidden border-t-4 border-t-amber-500 shadow-sm transition-all hover:shadow-md">
<CardHeader className="bg-gradient-to-rpb-4"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg">Applications</CardTitle> <CardTitle className="text-xl font-medium">Applications</CardTitle>
<Layers className="h-5 w-5 text-slate-500" /> <Layers className="h-6 w-6 text-amber-500" />
</div> </div>
<CardDescription>Manage your deployed applications</CardDescription> <CardDescription>Manage your deployed applications</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-6"> <CardContent className="pt-2 pb-4">
<div className="text-2xl font-bold">{applicationCount}</div> <div className="text-4xl font-bold">{applicationCount}</div>
<p className="text-xs text-muted-foreground">Running applications</p> <p className="text-sm text-muted-foreground mt-2">Running applications</p>
</CardContent> </CardContent>
<CardFooter className="border-t p-3"> <CardFooter className="border-t bg-muted/20 p-4">
<Button variant="ghost" size="sm" className="w-full" asChild> <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
<Link href="/dashboard/applications">View all applications</Link> <Link href="/dashboard/applications">View all applications</Link>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className="overflow-hidden"> <Card className="overflow-hidden border-t-4 border-t-emerald-500 shadow-sm transition-all hover:shadow-md">
<CardHeader className="bg-gradient-to-r pb-4"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg">Uptime</CardTitle> <CardTitle className="text-xl font-medium">Uptime</CardTitle>
<Activity className="h-5 w-5 text-slate-500" /> <Activity className="h-6 w-6 text-emerald-500" />
</div> </div>
<CardDescription>Monitor your service availability</CardDescription> <CardDescription>Monitor your service availability</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-6"> <CardContent className="pt-2 pb-4">
<div className="text-2xl font-bold">{onlineApplicationsCount}/{applicationCount}</div> <div className="flex flex-col">
<p className="text-xs text-muted-foreground">online Applications</p> <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> </CardContent>
<CardFooter className="border-t p-3"> <CardFooter className="border-t bg-muted/20 p-4">
<Button variant="ghost" size="sm" className="w-full" asChild> <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
<Link href="/dashboard/uptime">View uptime metrics</Link> <Link href="/dashboard/uptime">View uptime metrics</Link>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className="overflow-hidden"> <Card className="overflow-hidden border-t-4 border-t-sky-500 shadow-sm transition-all hover:shadow-md">
<CardHeader className="bg-gradient-to-rpb-4"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg">Network</CardTitle> <CardTitle className="text-xl font-medium">Network</CardTitle>
<Network className="h-5 w-5 text-slate-500" /> <Network className="h-6 w-6 text-sky-500" />
</div> </div>
<CardDescription>Manage network configuration</CardDescription> <CardDescription>Manage network configuration</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-6"> <CardContent className="pt-2 pb-4">
<div className="text-2xl font-bold">{serverCount + applicationCount}</div> <div className="text-4xl font-bold">{serverCount + applicationCount}</div>
<p className="text-xs text-muted-foreground">Active connections</p> <p className="text-sm text-muted-foreground mt-2">Active connections</p>
</CardContent> </CardContent>
<CardFooter className="border-t p-3"> <CardFooter className="border-t bg-muted/20 p-4">
<Button variant="ghost" size="sm" className="w-full" asChild> <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
<Link href="/dashboard/network">View network details</Link> <Link href="/dashboard/network">View network details</Link>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>
</div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>
) )