6f28146ac3
- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import MetricsCard from './MetricsCard'
|
|
|
|
export default function Dashboard() {
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<h1 className="text-3xl font-bold text-white">Dashboard</h1>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<MetricsCard
|
|
title="Total Regions"
|
|
value="325"
|
|
health={95}
|
|
trend="up"
|
|
description="Active global regions"
|
|
/>
|
|
<MetricsCard
|
|
title="Active Services"
|
|
value="1,247"
|
|
health={88}
|
|
trend="stable"
|
|
description="Running services"
|
|
/>
|
|
<MetricsCard
|
|
title="Network Health"
|
|
value="92%"
|
|
health={92}
|
|
trend="up"
|
|
description="Overall network status"
|
|
/>
|
|
<MetricsCard
|
|
title="Cost Efficiency"
|
|
value="87%"
|
|
health={87}
|
|
trend="up"
|
|
description="Cost optimization score"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="rounded-lg border border-studio-medium bg-studio-dark p-6">
|
|
<h2 className="mb-4 text-xl font-semibold text-white">Performance Metrics</h2>
|
|
<p className="text-gray-400">Chart placeholder - ECharts integration</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-studio-medium bg-studio-dark p-6">
|
|
<h2 className="mb-4 text-xl font-semibold text-white">Cost Analysis</h2>
|
|
<p className="text-gray-400">Chart placeholder - ECharts integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|