feat(test): add dropwdown menu for test screen

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.11
         version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.16
         version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -498,6 +501,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -2193,6 +2209,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3

src/components/ui/dialog.tsx

@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/pages/student/Home.tsx

@@ -83,7 +83,7 @@ export const Home = () => {
   };
 
   return (
-    <main className="min-h-screen bg-gray-50 flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
+    <main className="min-h-screen bg-gray-50 flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-12">
       <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
         Welcome, {user?.name || "Student"}
       </h1>
@@ -91,7 +91,7 @@ export const Home = () => {
         <input
           type="text"
           placeholder="Search..."
-          className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+          className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
         />
         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
           <Search size={22} color="gray" />

src/pages/student/practice/Test.tsx

@@ -3,17 +3,11 @@ import { useNavigate, useParams } from "react-router-dom";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
-import {
+import { Check, Loader2 } from "lucide-react";
-  Clock,
+
-  Layers,
-  CircleQuestionMark,
-  Check,
-  Loader2,
-} from "lucide-react";
 import { api } from "../../../utils/api";
 import { useAuthStore } from "../../../stores/authStore";
 import type { PracticeSheet, Question } from "../../../types/sheet";
@@ -26,6 +20,23 @@ import type {
 } from "../../../types/session";
 import { useAuthToken } from "../../../hooks/useAuthToken";
 import { renderQuestionText } from "../../../components/RenderQuestionText";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
 
 export const Test = () => {
   const navigate = useNavigate();
@@ -34,7 +45,6 @@ export const Test = () => {
   const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
     null,
   );
-  // const [answer, setAnswer] = useState<string>("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [showNavigator, setShowNavigator] = useState<boolean>(false);
 
@@ -44,7 +54,6 @@ export const Test = () => {
 
   const time = useSatTimer();
   const phase = useSatExam((s) => s.phase);
-  // const moduleIndex = useSatExam((s) => s.moduleIndex);
   const currentModule = useSatExam((s) => s.currentModuleQuestions);
   const questionIndex = useSatExam((s) => s.questionIndex);
 
@@ -171,6 +180,11 @@ export const Test = () => {
     }
   };
 
+  const handleQuitExam = () => {
+    finishExam();
+    navigate("/student/home");
+  };
+
   useEffect(() => {
     resetExam(); // ✅ important
   }, [sheetId]);
@@ -191,9 +205,6 @@ export const Test = () => {
     if (!user) return;
   }, [sheetId]);
 
-  // const isLastQuestion =
-  //   questionIndex === (currentModule?.questions.length ?? 0) - 1;
-
   const isFirstQuestion = questionIndex === 0;
 
   const renderAnswerInput = (question?: Question) => {
@@ -391,33 +402,90 @@ export const Test = () => {
                 Back
               </button>
 
-              {/* <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
                     Menu
-              </button> */}
+                  </button>
+                </DropdownMenuTrigger>
 
-              <button
+                <DropdownMenuContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      className="font-satoshi text-md"
                       onClick={() => setShowNavigator(true)}
-                className="px-8 border rounded-full py-3 font-satoshi-medium text-black"
                     >
                       Go to
-              </button>
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
 
-              {showNavigator && (
+                  <DropdownMenuSeparator />
-                <div className="fixed inset-0 bg-black/40 flex justify-center items-center z-50">
+
-                  <div className="bg-white rounded-2xl w-[500px] max-h-[70vh] p-6 flex flex-col gap-4 shadow-xl">
+                  {/* ✅ Dialog MUST wrap DropdownMenuItem */}
-                    <div className="flex justify-between items-center">
+                  <Dialog>
-                      <h2 className="text-xl font-satoshi-bold">
+                    <DialogTrigger asChild>
-                        Jump to Question
+                      <DropdownMenuItem
-                      </h2>
+                        className="font-satoshi text-md text-red-600 focus:text-red-600"
-                      <button
+                        onSelect={(e) => e.preventDefault()} // 🔥 important
-                        onClick={() => setShowNavigator(false)}
-                        className="text-gray-500 hover:text-black"
                       >
-                        ✕
+                        Quit Test
+                      </DropdownMenuItem>
+                    </DialogTrigger>
+
+                    <DialogContent showCloseButton={false}>
+                      <DialogHeader>
+                        <DialogTitle className="font-satoshi-medium text-start">
+                          Want to quit the test?
+                        </DialogTitle>
+                        <DialogDescription className="font-satoshi tracking-wide">
+                          Your progress will be saved and you can resume later.
+                        </DialogDescription>
+                      </DialogHeader>
+
+                      <div className="flex justify-end gap-3 mt-4">
+                        <DialogClose asChild>
+                          <button className="px-4 py-2 border rounded-lg cursor-pointer font-satoshi">
+                            Cancel
+                          </button>
+                        </DialogClose>
+                        <button
+                          onClick={handleQuitExam}
+                          className="px-4 py-2 bg-red-600 text-white rounded-lg cursor-pointer font-satoshi"
+                        >
+                          Quit
                         </button>
                       </div>
+                    </DialogContent>
+                  </Dialog>
+                </DropdownMenuContent>
+              </DropdownMenu>
 
-                    <div className="grid grid-cols-6 gap-3 overflow-y-auto">
+              <Dialog open={showNavigator} onOpenChange={setShowNavigator}>
+                <DialogContent className="max-w-90 max-h-[75vh] flex flex-col gap-4">
+                  <DialogHeader>
+                    <DialogTitle className="font-satoshi-bold text-xl">
+                      Go to Question
+                    </DialogTitle>
+                    <DialogDescription className="font-satoshi text-md">
+                      <span>Select a question to navigate directly.</span>
+                      <div className="flex items-center gap-6 mt-2">
+                        <div className="flex items-center gap-2">
+                          <div className="h-4 w-4 rounded-sm bg-green-100 border border-green-400"></div>
+                          <span>Answered</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="h-4 w-4 rounded-sm bg-purple-100 border border-purple-400"></div>
+                          <span>Current</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="h-4 w-4 rounded-sm bg-gray-100 border border-gray-400"></div>
+                          <span>Skipped</span>
+                        </div>
+                      </div>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <div className="grid grid-cols-4 gap-3 overflow-y-auto ">
                     {currentModule?.questions.map((q, idx) => {
                       const isCurrent = idx === questionIndex;
                       const isAnswered = !!answers[q.id];
@@ -444,9 +512,8 @@ export const Test = () => {
                       );
                     })}
                   </div>
-                  </div>
+                </DialogContent>
-                </div>
+              </Dialog>
-              )}
 
               <button
                 disabled={isSubmitting}
@@ -476,7 +543,6 @@ export const Test = () => {
           </button>
         </div>
       );
-
     case "FINISHED":
       return (
         <div className="min-h-screen flex flex-col justify-center items-center text-4xl gap-4">