81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { CalendarHeart, ImageIcon, MailCheck, UsersRound } from "lucide-react"
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
|
|
const dashboardCards = [
|
|
{
|
|
title: "Invitations",
|
|
value: "—",
|
|
description: "Guest group management starts in the next milestone.",
|
|
icon: UsersRound,
|
|
},
|
|
{
|
|
title: "RSVPs",
|
|
value: "—",
|
|
description: "Per-member responses will appear here later.",
|
|
icon: MailCheck,
|
|
},
|
|
{
|
|
title: "Photo uploads",
|
|
value: "—",
|
|
description: "MinIO uploads are planned after RSVP interactions.",
|
|
icon: ImageIcon,
|
|
},
|
|
]
|
|
|
|
export default function AdminPage() {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div className="space-y-2">
|
|
<Badge variant="secondary" className="w-fit">
|
|
Milestone 02
|
|
</Badge>
|
|
<h1 className="text-3xl font-semibold tracking-tight">Admin dashboard</h1>
|
|
<p className="max-w-2xl text-muted-foreground">
|
|
The protected admin shell is ready. Invitation management will be added
|
|
in the next milestone.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Alert>
|
|
<CalendarHeart />
|
|
<AlertTitle>Admin access is protected</AlertTitle>
|
|
<AlertDescription>
|
|
Only Google accounts listed in <code>ADMIN_EMAILS</code> can access this area.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
{dashboardCards.map((card) => {
|
|
const Icon = card.icon
|
|
|
|
return (
|
|
<Card key={card.title}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
|
<div className="space-y-1">
|
|
<CardTitle className="text-sm font-medium">{card.title}</CardTitle>
|
|
<CardDescription>{card.description}</CardDescription>
|
|
</div>
|
|
<Icon className="size-5 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-semibold">{card.value}</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|