Add form clone, live dashboard stats, debounced notes autosave

- cloneForm action + duplicate button on the forms list: copies questions,
  config (email templates, offer page) and type — never dates/submissions
- Admin dashboard now shows real counts (forms, members, pending
  applications, submissions this month) plus latest recruitment form status
- Reviewer notes textarea debounces server saves (800ms) instead of a
  server action per keystroke

Author: hamin2006

src/app/portal/admin/actions.ts

@@ -19,6 +19,24 @@ export async function createForm(data: { title: string; description: string }) {
   return db.forms.create({ data: { ...data, config: {}, questions: [] } });
 }
 
+export async function cloneForm(id: number) {
+  await requireAdmin();
+  const source = await db.forms.findUnique({ where: { id: BigInt(id) } });
+  if (!source) {
+    throw new Error("Form not found");
+  }
+  // Copy structure (questions, config incl. email templates + offer page)
+  // but never dates or submissions — the new form starts unopened.
+  return db.forms.create({
+    data: {
+      title: `${source.title} (Copy)`,
+      questions: source.questions as any,
+      config: source.config as any,
+      type: source.type,
+    },
+  });
+}
+
 export async function updateForm(
   id: number,
   data: {

src/app/portal/admin/forms/page.tsx

@@ -1,4 +1,5 @@
 import NewFormDialog from "@/components/portal/admin/newFormDialog";
+import CloneFormButton from "@/components/portal/admin/cloneFormButton";
 import { getForms } from "@/app/portal/admin/actions";
 import Link from "next/link";
 import { Form } from "@/lib/types/application";
@@ -14,19 +15,20 @@ export default async function Page() {
       <ul className="flex flex-col gap-2 py-2 w-full">
         {forms.map((form) => (
           <li key={form.id} className="flex flex-col gap-2">
-            <Link
-              href={`/portal/admin/forms/${form.id}`}
-              className="border flex items-center justify-between border-background-800 w-full bg-zinc-900 text-lg px-4 hover:bg-lp-500 p-2 rounded duration-300"
-            >
-              <div className="flex flex-row gap-2">
+            <div className="border flex items-center justify-between border-background-800 w-full bg-zinc-900 text-lg px-4 hover:bg-lp-500 p-2 rounded duration-300">
+              <Link
+                href={`/portal/admin/forms/${form.id}`}
+                className="flex flex-row gap-2 flex-1"
+              >
                 <span>{form.title}</span>
-              </div>
-              <div className="flex text-sm flex-row gap-2">
+              </Link>
+              <div className="flex text-sm flex-row gap-2 items-center">
                 <span>{form.open_at?.toLocaleDateString()}</span>
                 {form.close_at && <span> - </span>}
                 <span>{form.close_at?.toLocaleDateString()}</span>
+                <CloneFormButton formId={Number(form.id)} formTitle={form.title} />
               </div>
-            </Link>
+            </div>
           </li>
         ))}
         {!forms ||

src/app/portal/admin/page.tsx

@@ -1,8 +1,36 @@
 import React from "react";
 import Link from "next/link";
-import { Users, FileText, Settings, BarChart3, UserCheck } from "lucide-react";
+import { Users, FileText, BarChart3, UserCheck } from "lucide-react";
+import { db } from "@/db";
+import { getSessionUser, isAdmin } from "@/lib/utils/auth";
+import { redirect } from "next/navigation";
+
+export default async function AdminDashboard() {
+  const user = await getSessionUser();
+  if (!user || !(await isAdmin(user.id))) {
+    redirect("/portal");
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  const [
+    totalForms,
+    activeMembers,
+    pendingApplications,
+    submissionsThisMonth,
+    latestForm,
+  ] = await Promise.all([
+    db.forms.count(),
+    db.members.count(),
+    db.applications.count({ where: { status: null } }),
+    db.submissions.count({ where: { created_at: { gte: startOfMonth } } }),
+    db.forms.findFirst({
+      where: { type: "recruitment" },
+      orderBy: { created_at: "desc" },
+    }),
+  ]);
 
-export default function AdminDashboard() {
   const adminRoutes = [
     {
       title: "Forms Management",
@@ -34,6 +62,13 @@ export default function AdminDashboard() {
     },
   ];
 
+  const stats = [
+    { label: "Total Forms", value: totalForms, icon: FileText, color: "text-blue-500" },
+    { label: "Active Members", value: activeMembers, icon: Users, color: "text-green-500" },
+    { label: "Pending Applications", value: pendingApplications, icon: UserCheck, color: "text-yellow-500" },
+    { label: "Submissions This Month", value: submissionsThisMonth, icon: BarChart3, color: "text-orange-500" },
+  ];
+
   return (
     <div className="min-h-screen bg-background-800 text-white p-6">
       <div className="max-w-6xl mx-auto">
@@ -47,47 +82,46 @@ export default function AdminDashboard() {
           </p>
         </div>
 
-        {/* Quick Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div className="bg-background-700 border border-background-600 rounded-lg p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-400 text-sm">Total Forms</p>
-                <p className="text-2xl font-semibold text-white">-</p>
-              </div>
-              <FileText className="w-8 h-8 text-blue-500" />
+        {latestForm?.title && (
+          <div className="mb-8 border border-background-600 bg-background-700 rounded-lg p-4 flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm">Latest recruitment form</p>
+              <p className="text-lg font-semibold">{latestForm.title}</p>
             </div>
-          </div>
-
-          <div className="bg-background-700 border border-background-600 rounded-lg p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-400 text-sm">Active Members</p>
-                <p className="text-2xl font-semibold text-white">-</p>
-              </div>
-              <Users className="w-8 h-8 text-green-500" />
+            <div className="text-sm text-gray-400 text-right">
+              {latestForm.open_at ? (
+                <p>
+                  {latestForm.open_at.toLocaleDateString()} —{" "}
+                  {latestForm.close_at?.toLocaleDateString() || "open-ended"}
+                </p>
+              ) : (
+                <p className="text-yellow-500">Not scheduled yet</p>
+              )}
             </div>
           </div>
+        )}
 
-          <div className="bg-background-700 border border-background-600 rounded-lg p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-400 text-sm">Pending Applications</p>
-                <p className="text-2xl font-semibold text-white">-</p>
-              </div>
-              <UserCheck className="w-8 h-8 text-yellow-500" />
-            </div>
-          </div>
-
-          <div className="bg-background-700 border border-background-600 rounded-lg p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-400 text-sm">This Month</p>
-                <p className="text-2xl font-semibold text-white">-</p>
+        {/* Quick Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {stats.map((stat) => {
+            const Icon = stat.icon;
+            return (
+              <div
+                key={stat.label}
+                className="bg-background-700 border border-background-600 rounded-lg p-6"
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-gray-400 text-sm">{stat.label}</p>
+                    <p className="text-2xl font-semibold text-white">
+                      {stat.value}
+                    </p>
+                  </div>
+                  <Icon className={`w-8 h-8 ${stat.color}`} />
+                </div>
               </div>
-              <BarChart3 className="w-8 h-8 text-orange-500" />
-            </div>
-          </div>
+            );
+          })}
         </div>
 
         {/* Admin Routes Grid */}

src/components/forms/applications/columns.tsx

@@ -1,5 +1,5 @@
 import { ColumnDef, Row } from "@tanstack/react-table";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import MultiSelect from "@/components/general/multiSelect";
 import {
   sendStatusEmailToUser,
@@ -480,6 +480,7 @@ function TextareaField({
   field: FormFields[keyof FormFields];
 }) {
   const [text, setText] = useState(value);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { mergeNewData } = useContext(formContext);
   const canUpdate = field.config?.allowUpdate;
   if (!canUpdate) {
@@ -488,19 +489,22 @@ function TextareaField({
     }
     return <span>{value}</span>;
   }
-  const updateField = async (val: string) => {
-    const prev = text;
+  const updateField = (val: string) => {
     const setVal = val === undefined || val === null || val === "" ? null : val;
     setText(setVal);
-    updateSubmissionField(submissionId, id, field.config?.tableName, setVal)
-      .then(() => {
-        mergeNewData({ [id]: setVal }, "id", submissionId);
-        toast.success("Field updated successfully");
-      })
-      .catch(() => {
-        setText(prev);
-        toast.error("Error updating field");
-      });
+    // Debounce: one server call per typing pause instead of per keystroke
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      updateSubmissionField(submissionId, id, field.config?.tableName, setVal)
+        .then(() => {
+          mergeNewData({ [id]: setVal }, "id", submissionId);
+        })
+        .catch(() => {
+          toast.error("Error saving changes — retry after editing again");
+        });
+    }, 800);
   };
   return (
     <FloatingTextArea

src/components/portal/admin/cloneFormButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { cloneForm } from "@/app/portal/admin/actions";
+import { Button } from "@/components/primitives/button";
+import { CopyIcon, LoaderCircleIcon } from "lucide-react";
+import { toast } from "sonner";
+
+export default function CloneFormButton({
+  formId,
+  formTitle,
+}: {
+  formId: number;
+  formTitle: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Button
+      disabled={loading}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setLoading(true);
+        cloneForm(formId)
+          .then(() => {
+            toast.success(`Duplicated "${formTitle}"`);
+            router.refresh();
+          })
+          .catch(() => {
+            toast.error("Error duplicating form");
+          })
+          .finally(() => setLoading(false));
+      }}
+      className={
+        "bg-background-600 border border-background-500 rounded-md p-2 hover:border-lp-500 transition-colors"
+      }
+      aria-label={`Duplicate ${formTitle}`}
+    >
+      {loading ? (
+        <LoaderCircleIcon className={"h-4 w-4 animate-spin"} />
+      ) : (
+        <CopyIcon className={"h-4 w-4"} />
+      )}
+    </Button>
+  );
+}