feat(admin): add dashboard overview

This commit is contained in:
2026-07-28 20:33:33 +07:00 Unverified
parent acebeb1f10
commit 0ffab96aca
4 changed files with 599 additions and 70 deletions
+367 -40
View File
@@ -1,55 +1,382 @@
import { createDefaultForm } from "@/app/admin/form/actions";
import { AdminShellServer } from "@/components/admin-shell-server";
import Link from "next/link";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
CardDescription,
} from "@/components/ui/card";
import { ClipboardList, Server } from "lucide-react";
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();
export default function AdminPage() {
return (
<AdminShellServer>
<div className="p-6 space-y-6 max-w-6xl mx-auto w-full">
<div>
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground mt-1">Admin control panel</p>
<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">
<Link href="/admin/form">
<Card className="hover:border-primary/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex items-center gap-3">
<ClipboardList className="w-5 h-5 text-primary" />
<div>
<CardTitle>Forms</CardTitle>
<CardDescription>
Manage custom forms and view submissions
</CardDescription>
</div>
</div>
</CardHeader>
</Card>
</Link>
<Link href="/admin/backend">
<Card className="hover:border-primary/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex items-center gap-3">
<Server className="w-5 h-5 text-primary" />
<div>
<CardTitle>Backend</CardTitle>
<CardDescription>
Follower API settings and cache management
</CardDescription>
</div>
</div>
</CardHeader>
</Card>
</Link>
<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>
);
+24
View File
@@ -0,0 +1,24 @@
import { describe, expect, test } from "bun:test";
import { getDashboardDateWindows } from "@/lib/admin-dashboard";
describe("admin dashboard date windows", () => {
test("uses Bangkok-local midnight for today", () => {
const windows = getDashboardDateWindows(
new Date("2026-07-27T18:30:00.000Z")
);
expect(windows.todayStart.toISOString()).toBe("2026-07-27T17:00:00.000Z");
expect(windows.tomorrowStart.toISOString()).toBe("2026-07-28T17:00:00.000Z");
});
test("includes today and the previous six Bangkok calendar days", () => {
const windows = getDashboardDateWindows(
new Date("2026-07-28T05:00:00.000Z")
);
expect(windows.todayStart.toISOString()).toBe("2026-07-27T17:00:00.000Z");
expect(windows.last7DaysStart.toISOString()).toBe(
"2026-07-21T17:00:00.000Z"
);
});
});
+157
View File
@@ -0,0 +1,157 @@
import { db } from "@/db";
import { forms, submissions } from "@/db/schema";
import { desc, eq, sql } from "drizzle-orm";
import { max } from "drizzle-orm/sql/functions/aggregate";
export type DashboardDateWindows = {
todayStart: Date;
tomorrowStart: Date;
last7DaysStart: Date;
};
export type AdminDashboardData = {
summary: {
totalForms: number;
openForms: number;
closedForms: number;
totalResponses: number;
responsesToday: number;
responsesLast7Days: number;
};
recentSubmissions: {
id: string;
formId: string;
formTitle: string;
userName: string | null;
userDiscordId: string | null;
submittedAt: Date;
edited: boolean;
}[];
activeForms: {
id: string;
title: string;
isOpen: boolean;
totalResponses: number;
responsesToday: number;
responsesLast7Days: number;
lastResponseAt: Date | null;
}[];
};
export function getDashboardDateWindows(now = new Date()): DashboardDateWindows {
const bangkokDate = new Intl.DateTimeFormat("en-CA", {
timeZone: "Asia/Bangkok",
year: "numeric",
month: "2-digit",
day: "2-digit",
}).format(now);
const todayStart = new Date(`${bangkokDate}T00:00:00+07:00`);
const tomorrowStart = new Date(todayStart);
tomorrowStart.setUTCDate(tomorrowStart.getUTCDate() + 1);
const last7DaysStart = new Date(todayStart);
last7DaysStart.setUTCDate(last7DaysStart.getUTCDate() - 6);
return { todayStart, tomorrowStart, last7DaysStart };
}
function toPostgresTimestamp(date: Date) {
return date.toISOString().replace("T", " ").replace("Z", "");
}
export async function getAdminDashboardData(
now = new Date()
): Promise<AdminDashboardData> {
const { todayStart, tomorrowStart, last7DaysStart } =
getDashboardDateWindows(now);
const todayStartSql = toPostgresTimestamp(todayStart);
const tomorrowStartSql = toPostgresTimestamp(tomorrowStart);
const last7DaysStartSql = toPostgresTimestamp(last7DaysStart);
const totalResponses = sql<number>`count(${submissions.id})::integer`;
const responsesToday = sql<number>`count(${submissions.id}) filter (
where ${submissions.submittedAt} >= ${todayStartSql}::timestamp
and ${submissions.submittedAt} < ${tomorrowStartSql}::timestamp
)::integer`;
const responsesLast7Days = sql<number>`count(${submissions.id}) filter (
where ${submissions.submittedAt} >= ${last7DaysStartSql}::timestamp
and ${submissions.submittedAt} < ${tomorrowStartSql}::timestamp
)::integer`;
const [formSummaryRows, responseSummaryRows, recentSubmissions, activeForms] =
await Promise.all([
db
.select({
totalForms: sql<number>`count(*)::integer`,
openForms: sql<number>`count(*) filter (where ${forms.isOpen})::integer`,
closedForms: sql<number>`count(*) filter (where not ${forms.isOpen})::integer`,
})
.from(forms),
db
.select({
totalResponses: sql<number>`count(*)::integer`,
responsesToday: sql<number>`count(*) filter (
where ${submissions.submittedAt} >= ${todayStartSql}::timestamp
and ${submissions.submittedAt} < ${tomorrowStartSql}::timestamp
)::integer`,
responsesLast7Days: sql<number>`count(*) filter (
where ${submissions.submittedAt} >= ${last7DaysStartSql}::timestamp
and ${submissions.submittedAt} < ${tomorrowStartSql}::timestamp
)::integer`,
})
.from(submissions),
db
.select({
id: submissions.id,
formId: submissions.formId,
formTitle: forms.title,
userName: submissions.userName,
userDiscordId: submissions.userDiscordId,
submittedAt: submissions.submittedAt,
edited: sql<boolean>`jsonb_array_length(coalesce(${submissions.editHistory}, '[]'::jsonb)) > 0`,
})
.from(submissions)
.innerJoin(forms, eq(forms.id, submissions.formId))
.orderBy(desc(submissions.submittedAt), desc(submissions.id))
.limit(6),
db
.select({
id: forms.id,
title: forms.title,
isOpen: forms.isOpen,
totalResponses,
responsesToday,
responsesLast7Days,
lastResponseAt: max(submissions.submittedAt),
})
.from(forms)
.leftJoin(submissions, eq(submissions.formId, forms.id))
.groupBy(forms.id, forms.title, forms.isOpen, forms.createdAt)
.orderBy(
desc(responsesLast7Days),
desc(totalResponses),
desc(forms.createdAt),
desc(forms.id)
)
.limit(5),
]);
const formSummary = formSummaryRows[0] ?? {
totalForms: 0,
openForms: 0,
closedForms: 0,
};
const responseSummary = responseSummaryRows[0] ?? {
totalResponses: 0,
responsesToday: 0,
responsesLast7Days: 0,
};
return {
summary: {
...formSummary,
...responseSummary,
},
recentSubmissions,
activeForms,
};
}
+51 -30
View File
@@ -1,5 +1,6 @@
import { db } from "@/db";
import { sql } from "drizzle-orm";
import { submissions } from "@/db/schema";
import { asc, count, inArray } from "drizzle-orm";
export type FormSubmissionStats = {
totalAnswers: number;
@@ -14,40 +15,60 @@ export async function getFormSubmissionStats(
return new Map();
}
const rows = await db.execute<{
formId: string;
totalAnswers: number;
queueNumber: number | null;
}>(sql`
with ranked_submissions as (
select
form_id,
user_discord_id,
count(*) over (partition by form_id)::integer as total_answers,
row_number() over (
partition by form_id
order by submitted_at asc, id asc
)::integer as queue_number
from form.submission
where form_id in (${sql.join(formIds.map((formId) => sql`${formId}`), sql`, `)})
)
select
form_id as "formId",
max(total_answers)::integer as "totalAnswers",
max(queue_number) filter (
where user_discord_id = ${discordId}
)::integer as "queueNumber"
from ranked_submissions
group by form_id
`);
const totals = await db
.select({
formId: submissions.formId,
totalAnswers: count(),
})
.from(submissions)
.where(inArray(submissions.formId, formIds))
.groupBy(submissions.formId);
return new Map(
rows.map((row) => [
const stats = new Map<string, FormSubmissionStats>(
totals.map((row) => [
row.formId,
{
totalAnswers: row.totalAnswers,
queueNumber: row.queueNumber,
queueNumber: null,
},
])
);
if (!discordId) {
return stats;
}
const orderedSubmissions = await db
.select({
formId: submissions.formId,
userDiscordId: submissions.userDiscordId,
})
.from(submissions)
.where(inArray(submissions.formId, formIds))
.orderBy(
asc(submissions.formId),
asc(submissions.submittedAt),
asc(submissions.id)
);
const queueByForm = new Map<string, number>();
const lastUserQueueByForm = new Map<string, number>();
for (const submission of orderedSubmissions) {
const queueNumber = (queueByForm.get(submission.formId) ?? 0) + 1;
queueByForm.set(submission.formId, queueNumber);
if (submission.userDiscordId === discordId) {
lastUserQueueByForm.set(submission.formId, queueNumber);
}
}
for (const [formId, queueNumber] of lastUserQueueByForm) {
const current = stats.get(formId) ?? {
totalAnswers: queueByForm.get(formId) ?? 0,
queueNumber: null,
};
stats.set(formId, { ...current, queueNumber });
}
return stats;
}