384 lines
15 KiB
TypeScript
384 lines
15 KiB
TypeScript
import { createDefaultForm } from "@/app/admin/form/actions";
|
|
import { AdminShellServer } from "@/components/admin-shell-server";
|
|
import { RealtimeRefresh } from "@/components/realtime-refresh";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { getAdminDashboardData } from "@/lib/admin-dashboard";
|
|
import {
|
|
ClipboardList,
|
|
FilePlus2,
|
|
Inbox,
|
|
ListChecks,
|
|
Server,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
function formatNumber(value: number) {
|
|
return new Intl.NumberFormat("en-US").format(value);
|
|
}
|
|
|
|
function formatDate(date: Date | null) {
|
|
if (!date) return "No responses";
|
|
return date.toLocaleString("en-GB", {
|
|
timeZone: "Asia/Bangkok",
|
|
hour12: false,
|
|
});
|
|
}
|
|
|
|
function respondentName(submission: {
|
|
userName: string | null;
|
|
userDiscordId: string | null;
|
|
}) {
|
|
return submission.userName || submission.userDiscordId || "Anonymous";
|
|
}
|
|
|
|
function StatCard({
|
|
title,
|
|
value,
|
|
description,
|
|
icon: Icon,
|
|
}: {
|
|
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" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default async function AdminPage() {
|
|
const { summary, recentSubmissions, activeForms } =
|
|
await getAdminDashboardData();
|
|
|
|
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">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Forms, responses, and activity at a glance.
|
|
</p>
|
|
</div>
|
|
<form action={createDefaultForm}>
|
|
<Button type="submit">
|
|
<FilePlus2 data-icon="inline-start" />
|
|
Create form
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
<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]">
|
|
<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>
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href="/admin/form">View forms</Link>
|
|
</Button>
|
|
</div>
|
|
</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>
|
|
) : (
|
|
<>
|
|
<div className="hidden rounded-md border md:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Respondent</TableHead>
|
|
<TableHead>Form</TableHead>
|
|
<TableHead>Submitted</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{recentSubmissions.map((submission) => (
|
|
<TableRow key={submission.id}>
|
|
<TableCell>
|
|
<Link
|
|
href={`/admin/form/${submission.formId}/result/${submission.id}`}
|
|
className="font-medium hover:underline"
|
|
>
|
|
{respondentName(submission)}
|
|
</Link>
|
|
{submission.userName &&
|
|
submission.userDiscordId && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{submission.userDiscordId}
|
|
</p>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Link
|
|
href={`/admin/form/${submission.formId}`}
|
|
className="hover:underline"
|
|
>
|
|
{submission.formTitle}
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>{formatDate(submission.submittedAt)}</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={
|
|
submission.edited ? "secondary" : "outline"
|
|
}
|
|
>
|
|
{submission.edited ? "Edited" : "Original"}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex flex-col gap-3 md:hidden">
|
|
{recentSubmissions.map((submission) => (
|
|
<Card key={submission.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/${submission.formId}/result/${submission.id}`}
|
|
>
|
|
{respondentName(submission)}
|
|
</Link>
|
|
</CardTitle>
|
|
<CardDescription className="truncate">
|
|
{submission.formTitle}
|
|
</CardDescription>
|
|
</div>
|
|
<Badge
|
|
variant={
|
|
submission.edited ? "secondary" : "outline"
|
|
}
|
|
>
|
|
{submission.edited ? "Edited" : "Original"}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">
|
|
{formatDate(submission.submittedAt)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</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">
|
|
<p className="text-sm text-muted-foreground">
|
|
No forms found. Create one to start collecting responses.
|
|
</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>
|
|
</AdminShellServer>
|
|
);
|
|
}
|