refactor: move AdminSidebar component to client file and update form layout and submission date formatting

app/form/admin/client.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React, { useState, useTransition, useRef, useCallback, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -18,10 +19,21 @@ import {
   createQuestion,
   updateQuestion,
   deleteQuestion,
-  reorderQuestions,
   bulkUpdateQuestions,
 } from "@/app/actions/questions";
-import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Save, Image as ImageIcon, X, Check } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarFooter,
+} from "@/components/ui/sidebar";
+import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Save, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
 import Image from 'next/image';
 import { RichTextEditor } from "@/components/rich-text-editor";
 import { FormattedText } from "@/components/formatted-text";
@@ -596,3 +608,66 @@ function AnswerPreview({ question }: { question: Question }) {
     </div>
   );
 }
+
+export function AdminSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar variant="sidebar" collapsible="icon">
+      <SidebarHeader className="border-b border-border py-4 px-4 flex items-center justify-between">
+        <span className="font-bold tracking-wider text-primary text-sm uppercase">
+          Form admin
+        </span>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/form/admin"}>
+                  <Link href="/form/admin">
+                    <LayoutDashboard className="w-4 h-4" />
+                    <span>Dashboard</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname.startsWith("/form/admin/result")}>
+                  <Link href="/form/admin/result">
+                    <ClipboardList className="w-4 h-4" />
+                    <span>Response</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname.startsWith("/form/admin/extra")}>
+                  <Link href="/form/admin/extra">
+                    <Webhook className="w-4 h-4" />
+                    <span>Extra</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-border p-4">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link href="/form">
+                <ArrowLeft className="w-4 h-4" />
+                <span>Go public</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

app/form/admin/layout.tsx

@@ -1,8 +1,8 @@
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AdminSidebar } from "@/components/admin-sidebar";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AdminSidebar } from "./client";
 
 export default async function AdminLayout({
   children,
@@ -22,11 +22,11 @@ export default async function AdminLayout({
 
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen w-full bg-background text-foreground dark">
+      <div className="flex w-full bg-background text-foreground dark">
         <AdminSidebar />
-        <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto">
+        <div className="flex-1 overflow-hidden">
           {children}
-        </main>
+        </div>
       </div>
     </SidebarProvider>
   );

app/form/admin/result/[id]/client.tsx

@@ -77,14 +77,14 @@ export default function SubmissionDetailClient({
           <div className="flex items-center gap-2 text-muted-foreground">
             <Calendar className="w-4 h-4 shrink-0" />
             <span className="font-semibold text-foreground">Initial Submission:</span>
-            <span>{new Date(submission.submittedAt).toLocaleString()}</span>
+            <span>{new Date(submission.submittedAt).toLocaleString(undefined, { hour12: false })}</span>
           </div>
           {editHistory.length > 0 && (
             <div className="flex flex-col mt-2 pt-2 border-t">
               <span className="font-semibold text-foreground mb-1">Edit History:</span>
               <ul className="list-disc list-inside text-xs text-muted-foreground space-y-1">
                 {editHistory.map((edit, idx) => (
-                  <li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString()}</li>
+                  <li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString(undefined, { hour12: false })}</li>
                 ))}
               </ul>
             </div>