feat(admin): reshape overview into operations dashboard
This commit is contained in:
+203
-223
@@ -5,11 +5,13 @@ import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -20,11 +22,11 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import { getAdminDashboardData } from "@/lib/admin/admin-dashboard";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
ClipboardList,
|
||||
FilePlus2,
|
||||
Inbox,
|
||||
ListChecks,
|
||||
Server,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -49,29 +51,57 @@ function respondentName(submission: {
|
||||
return submission.userName || submission.userDiscordId || "Anonymous";
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
title,
|
||||
function MetricCard({
|
||||
label,
|
||||
value,
|
||||
detail,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
detail: string;
|
||||
}) {
|
||||
return (
|
||||
<Card size="sm">
|
||||
<CardHeader>
|
||||
<CardDescription>{label}</CardDescription>
|
||||
<CardTitle className="text-2xl tabular-nums">
|
||||
{formatNumber(value)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-xs text-muted-foreground">
|
||||
{detail}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickAction({
|
||||
href,
|
||||
title,
|
||||
description,
|
||||
icon: Icon,
|
||||
}: {
|
||||
href: string;
|
||||
title: string;
|
||||
value: number;
|
||||
description: string;
|
||||
icon: typeof ClipboardList;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-3 pb-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<CardDescription>{title}</CardDescription>
|
||||
<CardTitle className="text-2xl">{formatNumber(value)}</CardTitle>
|
||||
</div>
|
||||
<Icon className="size-5 text-muted-foreground" />
|
||||
<Card size="sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Icon className="size-5 text-primary" />
|
||||
{title}
|
||||
</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
<CardAction>
|
||||
<Button variant="ghost" size="icon-sm" asChild>
|
||||
<Link href={href} aria-label={`Open ${title}`}>
|
||||
<ArrowUpRight />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -79,17 +109,22 @@ function StatCard({
|
||||
export default async function AdminPage() {
|
||||
const { summary, recentSubmissions, activeForms } =
|
||||
await getAdminDashboardData();
|
||||
const busiestFormResponses = Math.max(
|
||||
...activeForms.map((form) => form.responsesLast7Days),
|
||||
1,
|
||||
);
|
||||
|
||||
return (
|
||||
<AdminShellServer>
|
||||
<RealtimeRefresh topic="forms" />
|
||||
<RealtimeRefresh topic="submissions" />
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<main className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 pb-12 md:p-6">
|
||||
<header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">Command center</p>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Forms, responses, and activity at a glance.
|
||||
Live form operations · Bangkok time
|
||||
</p>
|
||||
</div>
|
||||
<form action={createDefaultForm}>
|
||||
@@ -98,55 +133,77 @@ export default async function AdminPage() {
|
||||
Create form
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<StatCard
|
||||
title="Total forms"
|
||||
value={summary.totalForms}
|
||||
description={`${formatNumber(summary.openForms)} open, ${formatNumber(summary.closedForms)} closed`}
|
||||
icon={ClipboardList}
|
||||
/>
|
||||
<StatCard
|
||||
title="Total responses"
|
||||
value={summary.totalResponses}
|
||||
description="All submitted form responses"
|
||||
icon={Inbox}
|
||||
/>
|
||||
<StatCard
|
||||
title="Today"
|
||||
value={summary.responsesToday}
|
||||
description="Responses since Bangkok midnight"
|
||||
icon={ListChecks}
|
||||
/>
|
||||
<StatCard
|
||||
title="Last 7 days"
|
||||
value={summary.responsesLast7Days}
|
||||
description="Calendar window including today"
|
||||
icon={ListChecks}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-[1.5fr_1fr]">
|
||||
<section className="grid gap-4 lg:grid-cols-[1.25fr_1fr]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<CardTitle>Recent responses</CardTitle>
|
||||
<CardDescription>
|
||||
Latest submissions across all forms.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<CardDescription>Responses today</CardDescription>
|
||||
<CardTitle className="text-5xl tabular-nums md:text-6xl">
|
||||
{formatNumber(summary.responsesToday)}
|
||||
</CardTitle>
|
||||
<CardAction>
|
||||
<Badge>Live</Badge>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<p className="max-w-xl text-sm text-muted-foreground">
|
||||
Submissions received since midnight. Realtime updates keep this
|
||||
workspace current while you are here.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline">
|
||||
{formatNumber(summary.responsesLast7Days)} this week
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
{formatNumber(summary.openForms)} forms accepting responses
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<MetricCard
|
||||
label="Last 7 days"
|
||||
value={summary.responsesLast7Days}
|
||||
detail="Including today"
|
||||
/>
|
||||
<MetricCard
|
||||
label="All responses"
|
||||
value={summary.totalResponses}
|
||||
detail="Lifetime submissions"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Open forms"
|
||||
value={summary.openForms}
|
||||
detail={`${formatNumber(summary.closedForms)} closed`}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Total forms"
|
||||
value={summary.totalForms}
|
||||
detail="Across this workspace"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_minmax(20rem,0.9fr)]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent responses</CardTitle>
|
||||
<CardDescription>
|
||||
The latest submissions across every form.
|
||||
</CardDescription>
|
||||
<CardAction>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href="/admin/form">View forms</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentSubmissions.length === 0 ? (
|
||||
<div className="rounded-md border p-6 text-sm text-muted-foreground">
|
||||
Responses will appear here after people submit a form.
|
||||
</div>
|
||||
<p className="rounded-md border p-6 text-sm text-muted-foreground">
|
||||
Responses will appear here after someone submits a form.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden rounded-md border md:block">
|
||||
@@ -169,12 +226,6 @@ export default async function AdminPage() {
|
||||
>
|
||||
{respondentName(submission)}
|
||||
</Link>
|
||||
{submission.userName &&
|
||||
submission.userDiscordId && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{submission.userDiscordId}
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
@@ -184,7 +235,9 @@ export default async function AdminPage() {
|
||||
{submission.formTitle}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(submission.submittedAt)}</TableCell>
|
||||
<TableCell>
|
||||
{formatDate(submission.submittedAt)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
@@ -201,21 +254,19 @@ export default async function AdminPage() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
{recentSubmissions.map((submission) => (
|
||||
<Card key={submission.id}>
|
||||
<Card key={submission.id} size="sm">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="truncate text-base">
|
||||
<Link
|
||||
href={`/admin/form/${submission.formId}/result/${submission.id}`}
|
||||
>
|
||||
{respondentName(submission)}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription className="truncate">
|
||||
{submission.formTitle}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<CardTitle className="truncate">
|
||||
<Link
|
||||
href={`/admin/form/${submission.formId}/result/${submission.id}`}
|
||||
>
|
||||
{respondentName(submission)}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription className="truncate">
|
||||
{submission.formTitle} · {formatDate(submission.submittedAt)}
|
||||
</CardDescription>
|
||||
<CardAction>
|
||||
<Badge
|
||||
variant={
|
||||
submission.edited ? "secondary" : "outline"
|
||||
@@ -223,11 +274,8 @@ export default async function AdminPage() {
|
||||
>
|
||||
{submission.edited ? "Edited" : "Original"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
{formatDate(submission.submittedAt)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
@@ -236,148 +284,80 @@ export default async function AdminPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<Link href="/admin/form">
|
||||
<Card className="cursor-pointer transition-colors hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<ClipboardList className="size-5 text-primary" />
|
||||
<div>
|
||||
<CardTitle>Forms</CardTitle>
|
||||
<CardDescription>
|
||||
Manage forms and view submissions
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
<Link href="/admin/backend">
|
||||
<Card className="cursor-pointer transition-colors hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="size-5 text-primary" />
|
||||
<div>
|
||||
<CardTitle>Backend</CardTitle>
|
||||
<CardDescription>
|
||||
Follower API settings and cache
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Form activity</CardTitle>
|
||||
<CardDescription>
|
||||
Forms ranked by responses in the last 7 days.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{activeForms.length === 0 ? (
|
||||
<div className="flex flex-col items-start gap-4 rounded-md border p-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Form momentum</CardTitle>
|
||||
<CardDescription>
|
||||
Response activity during the last 7 days.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
{activeForms.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No forms found. Create one to start collecting responses.
|
||||
Create a form to start tracking activity.
|
||||
</p>
|
||||
<form action={createDefaultForm}>
|
||||
<Button type="submit" size="sm">
|
||||
<FilePlus2 data-icon="inline-start" />
|
||||
Create form
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden rounded-md border md:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Form</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Today</TableHead>
|
||||
<TableHead>Last 7 days</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
<TableHead>Last response</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{activeForms.map((form) => (
|
||||
<TableRow key={form.id}>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/admin/form/${form.id}`}
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{form.title}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={form.isOpen ? "default" : "secondary"}>
|
||||
{form.isOpen ? "Open" : "Closed"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{formatNumber(form.responsesToday)}</TableCell>
|
||||
<TableCell>
|
||||
{formatNumber(form.responsesLast7Days)}
|
||||
</TableCell>
|
||||
<TableCell>{formatNumber(form.totalResponses)}</TableCell>
|
||||
<TableCell>{formatDate(form.lastResponseAt)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/admin/form/${form.id}/result`}>
|
||||
Responses
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
{activeForms.map((form) => (
|
||||
<Card key={form.id}>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="truncate text-base">
|
||||
<Link href={`/admin/form/${form.id}`}>
|
||||
{form.title}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Last response: {formatDate(form.lastResponseAt)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant={form.isOpen ? "default" : "secondary"}>
|
||||
{form.isOpen ? "Open" : "Closed"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between gap-3">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{formatNumber(form.responsesLast7Days)} this week ·{" "}
|
||||
{formatNumber(form.totalResponses)} total
|
||||
</div>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/admin/form/${form.id}/result`}>
|
||||
Responses
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
activeForms.map((form) => (
|
||||
<div key={form.id} className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Link
|
||||
href={`/admin/form/${form.id}/result`}
|
||||
className="truncate font-medium hover:underline"
|
||||
>
|
||||
{form.title}
|
||||
</Link>
|
||||
<span className="shrink-0 text-sm tabular-nums text-muted-foreground">
|
||||
{formatNumber(form.responsesLast7Days)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={
|
||||
(form.responsesLast7Days / busiestFormResponses) * 100
|
||||
}
|
||||
aria-label={`${form.title}: ${form.responsesLast7Days} responses in the last 7 days`}
|
||||
/>
|
||||
<div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
|
||||
<Badge variant={form.isOpen ? "default" : "secondary"}>
|
||||
{form.isOpen ? "Open" : "Closed"}
|
||||
</Badge>
|
||||
<span>{formatNumber(form.totalResponses)} total</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="mb-3">
|
||||
<h2 className="font-heading text-lg font-medium">Workspace</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Go directly to the tools you operate most often.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<QuickAction
|
||||
href="/admin/form"
|
||||
title="Forms"
|
||||
description="Build forms and review submissions."
|
||||
icon={ClipboardList}
|
||||
/>
|
||||
<QuickAction
|
||||
href="/admin/upload"
|
||||
title="Video uploads"
|
||||
description="Publish and monitor platform jobs."
|
||||
icon={Upload}
|
||||
/>
|
||||
<QuickAction
|
||||
href="/admin/backend"
|
||||
title="Backend"
|
||||
description="Manage follower APIs and cache."
|
||||
icon={Server}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</AdminShellServer>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user