From 4acc297709510bd4933aaa1c506f8ed90106c336 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sun, 2 Aug 2026 17:12:12 +0700
Subject: [PATCH] feat(admin): reshape overview into operations dashboard

---
 app/admin/page.tsx | 426 +++++++++++++++++++++------------------------
 1 file changed, 203 insertions(+), 223 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index db5cd5e..ca432ae 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -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>
   );
 }