132 lines
4.0 KiB
TypeScript
132 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Grid from "@mui/material/Grid";
|
|
import { Card, CardActionArea, CardContent, Paper, Stack, Typography } from "@mui/material";
|
|
|
|
type StatCard = {
|
|
label: string;
|
|
icon: string;
|
|
count: number;
|
|
href: string;
|
|
};
|
|
|
|
type RecentEvent = {
|
|
summary: string;
|
|
created_at: string;
|
|
};
|
|
|
|
export default function OverviewClient({
|
|
userName,
|
|
stats,
|
|
recentEvents
|
|
}: {
|
|
userName: string;
|
|
stats: StatCard[];
|
|
recentEvents: RecentEvent[];
|
|
}) {
|
|
return (
|
|
<Stack spacing={5}>
|
|
<Stack spacing={1.5}>
|
|
<Typography variant="overline" sx={{ color: "rgba(148, 163, 184, 0.6)", letterSpacing: 4 }}>
|
|
Control Center
|
|
</Typography>
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
fontWeight: 700,
|
|
background: "linear-gradient(120deg, rgba(127, 91, 255, 1) 0%, rgba(34, 211, 238, 0.9) 80%)",
|
|
WebkitBackgroundClip: "text",
|
|
color: "transparent"
|
|
}}
|
|
>
|
|
Welcome back, {userName}
|
|
</Typography>
|
|
<Typography color="text.secondary" sx={{ maxWidth: 560 }}>
|
|
Everything you need to orchestrate Caddy proxies, certificates, and secure edge services lives here.
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Grid container spacing={3}>
|
|
{stats.map((stat) => (
|
|
<Grid key={stat.label} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<Card
|
|
elevation={0}
|
|
sx={{
|
|
height: "100%",
|
|
border: "1px solid rgba(148, 163, 184, 0.14)"
|
|
}}
|
|
>
|
|
<CardActionArea
|
|
component={Link}
|
|
href={stat.href}
|
|
sx={{
|
|
height: "100%",
|
|
p: 0,
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(127, 91, 255, 0.16), rgba(34, 211, 238, 0.08))"
|
|
}
|
|
}}
|
|
>
|
|
<CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
|
<Typography variant="caption" color="text.secondary" sx={{ letterSpacing: 1.2 }}>
|
|
{stat.icon}
|
|
</Typography>
|
|
<Typography variant="h4" sx={{ fontWeight: 700, letterSpacing: "-0.03em" }}>
|
|
{stat.count}
|
|
</Typography>
|
|
<Typography color="text.secondary" sx={{ fontWeight: 500 }}>
|
|
{stat.label}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
<Stack spacing={2}>
|
|
<Typography variant="h6" sx={{ fontWeight: 600, letterSpacing: -0.2 }}>
|
|
Recent Activity
|
|
</Typography>
|
|
{recentEvents.length === 0 ? (
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
p: 4,
|
|
textAlign: "center",
|
|
color: "text.secondary",
|
|
background: "rgba(12, 18, 30, 0.7)"
|
|
}}
|
|
>
|
|
No activity recorded yet.
|
|
</Paper>
|
|
) : (
|
|
<Stack spacing={1.5}>
|
|
{recentEvents.map((event, index) => (
|
|
<Paper
|
|
key={`${event.created_at}-${index}`}
|
|
elevation={0}
|
|
sx={{
|
|
p: 3,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
background: "linear-gradient(120deg, rgba(17, 25, 40, 0.9), rgba(15, 23, 42, 0.7))",
|
|
border: "1px solid rgba(148, 163, 184, 0.08)"
|
|
}}
|
|
>
|
|
<Typography fontWeight={500}>{event.summary}</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{new Date(event.created_at).toLocaleString()}
|
|
</Typography>
|
|
</Paper>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|