refactor: migrate administrative form management to a centralized modular routing structure

2026-06-29 18:41:53 +07:00
parent 1d6b002360
commit 3a257e4758
28 changed files with 1774 additions and 221 deletions
@@ -0,0 +1,101 @@
+import { db } from "@/db";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import SubmissionDetailClient from "./client";
+import { DeleteSubmissionButton } from "@/components/delete-buttons";
+
+interface SubmissionDetailPageProps {
+  params: Promise<{
+    id: string;
+    submissionId: string;
+  }>;
+}
+
+export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
+  const { id: formId, submissionId } = await params;
+
+  const submission = await db.query.submissions.findFirst({
+    where: (s, { eq }) => eq(s.id, submissionId),
+  });
+
+  if (!submission) {
+    notFound();
+  }
+
+  const questions = await db.query.questions.findMany({
+    where: (q, { eq }) => eq(q.formId, submission.formId),
+    orderBy: (q, { asc }) => [asc(q.displayOrder)],
+  });
+
+  const answersList = await db.query.answers.findMany({
+    where: (a, { eq }) => eq(a.submissionId, submission.id),
+  });
+
+  const answersMap: Record<string, string> = {};
+  for (const ans of answersList) {
+    answersMap[ans.questionId] = ans.value;
+  }
+  const submissionsList = await db.query.submissions.findMany({
+    where: (s, { eq }) => eq(s.formId, formId),
+    orderBy: (s, { desc }) => [desc(s.submittedAt)],
+  });
+
+  const currentIndex = submissionsList.findIndex((s) => s.id === submissionId);
+  const prevId = currentIndex > 0 ? submissionsList[currentIndex - 1].id : null;
+  const nextId = currentIndex >= 0 && currentIndex < submissionsList.length - 1 ? submissionsList[currentIndex + 1].id : null;
+
+  return (
+    <div className="space-y-6 w-full max-w-4xl mx-auto p-4 md:p-6 pb-10">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Link href={`/admin/form/${formId}/result`}>
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="w-4 h-4" />
+            </Button>
+          </Link>
+          <h1 className="text-3xl font-bold tracking-tight">Response Detail</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          {prevId && (
+            <Link href={`/admin/form/${formId}/result/${prevId}`}>
+              <Button variant="outline" size="sm">Previous</Button>
+            </Link>
+          )}
+          {nextId && (
+            <Link href={`/admin/form/${formId}/result/${nextId}`}>
+              <Button variant="outline" size="sm">Next</Button>
+            </Link>
+          )}
+          <DeleteSubmissionButton id={submission.id} redirectUrl={`/admin/form/${formId}/result`} />
+        </div>
+      </div>
+
+      <SubmissionDetailClient
+        submission={submission}
+        questions={questions}
+        answers={answersMap}
+      />
+
+      <div className="flex justify-between items-center mt-8 pt-6 border-t">
+        {prevId ? (
+          <Link href={`/admin/form/${formId}/result/${prevId}`}>
+            <Button variant="outline">
+              <ArrowLeft className="w-4 h-4 mr-2" /> Previous
+            </Button>
+          </Link>
+        ) : (
+          <div />
+        )}
+        {nextId && (
+          <Link href={`/admin/form/${formId}/result/${nextId}`}>
+            <Button variant="outline">
+              Next <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}