Chore: The SideBar Username is Showing and The mcq page is created

Backend/app/api/v1/endpoints/auth.py

@@ -2,7 +2,8 @@ from fastapi import APIRouter, HTTPException, Depends, status
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
 from datetime import timedelta
-from app.schema import UserCreate, Token, LoginRequest
+from app.schema import UserCreate, LoginRequest
+from app.schema.models import LoginResponse
 # from app.schema.models import LoginRequest
 from app.models import User
 from app.core import verify_password, get_password_hash, create_access_token
@@ -41,32 +42,32 @@ async def register(user: UserCreate, db: AsyncSession = Depends(get_db)):
             detail=f'registered failed: {str(e)}'
         )
     
-@router.post("/login", response_model=Token)
+@router.post("/login", response_model=LoginResponse)
 async def login(request: LoginRequest, db: AsyncSession = Depends(get_db)):
-    # Access the data via the request object
-    email = request.email
-    password = request.password
-    
-    # The rest of your logic remains the same
     try:
-        result = await db.execute(select(User).filter(User.email==email))
+        result = await db.execute(select(User).filter(User.email == request.email))
         user = result.scalar_one_or_none()
 
-        if not user or not verify_password(password, user.hashed_password):
+        if not user or not verify_password(request.password, user.hashed_password):
             raise HTTPException(
                 status_code=status.HTTP_401_UNAUTHORIZED,
-                detail="Incorrect username or password",
+                detail="Incorrect email or password",
                 headers={"WWW-Authenticate": "Bearer"},
             )
+
         access_token_expires = timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
         access_token = create_access_token(
-            data={'sub':user.username},
+            data={"sub": user.username},
             expires_deltas=access_token_expires
         )
 
-        return {"access_token":access_token, "token_type":"bearer","username":user.username}
+        return LoginResponse(
+            access_token=access_token,
+            token_type="bearer",
+            username=user.username
+        )
     except HTTPException:
-        raise 
+        raise
     except Exception as e:
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,

Frontend/src/App.tsx

@@ -13,12 +13,11 @@ import ProtectedRoute from "./routes/ProtectedRoute";
 
 const DashboardLayout = () => {
   // 1. Retrieve both logout and username from the AuthContext
-  const { logout, username } = useAuth();
 
   return (
     <div className="flex h-screen bg-gray-100">
       {/* 2. Pass the retrieved username prop to the Sidebar */}
-      <Sidebar onLogout={logout} username={username} />
+      <Sidebar/>
 
       <main className="flex-1 overflow-y-auto">
         <Routes>

Frontend/src/components/auth/SignIn.tsx

@@ -1,55 +1,43 @@
 import React, { useState, type FormEvent } from "react";
-import { Mail, Lock, LogIn, Chrome } from "lucide-react";
+import { Mail, Lock, LogIn } from "lucide-react";
 import API from "../../api/api";
+import { useAuth } from "../context/AuthContext";
 
 interface SignInProps {
-  onClose: () => void;
-  onSwitchToSignUp: () => void;
-  onAuthSuccess: () => void;
+  onSwitchToSignUp: () => void;  // ✅ Add this if switching modal
 }
 
-const SignIn: React.FC<SignInProps> = ({
-  onClose,
-  onSwitchToSignUp,
-  onAuthSuccess,
-}) => {
+const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const { login } = useAuth();
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError("");
 
     try {
-      // 1. Send JSON body with keys matching the backend's LoginRequest schema
-      const res = await API.post("/auth/login", {
-        email: email, // Backend expects 'email' key in the JSON body
-        password,
-      });
+      const res = await API.post("/auth/login", { email, password });
+
+      // ✅ FIXED — use res instead of response
+      login(res.data.username || res.data.user?.username || "User");
 
       localStorage.setItem("token", res.data.access_token);
-      onAuthSuccess();
+
     } catch (err: any) {
       console.error("Login error:", err);
-      let errorMessage = "Login failed due to an unknown error.";
 
-      // --- Robust Error Handling for 422 (Pydantic validation) ---
-      if (err.response && err.response.data && err.response.data.detail) {
+      let errorMessage = "Login failed.";
+
+      if (err.response?.data?.detail) {
         const detail = err.response.data.detail;
 
-        if (typeof detail === 'string') {
-          // Handle simple error messages like "Incorrect username or password" (from 401)
-          errorMessage = detail;
-        } else if (Array.isArray(detail) && detail.length > 0) {
-          // Handle 422 Pydantic validation error (list of error objects)
-          // We extract the human-readable message from the first object
-          const firstError = detail[0];
-          errorMessage = `Validation Error on '${firstError.loc.join(' -> ')}': ${firstError.msg}`;
+        if (typeof detail === "string") errorMessage = detail;
+        else if (Array.isArray(detail)) {
+          const first = detail[0];
+          errorMessage = `${first.loc.join(" -> ")}: ${first.msg}`;
         }
-      } else if (err.message) {
-        // Fallback for network errors (e.g., server offline)
-        errorMessage = err.message;
       }
 
       setError(errorMessage);
@@ -58,11 +46,8 @@ const SignIn: React.FC<SignInProps> = ({
 
   return (
     <>
-      <h2 className="text-3xl font-bold mb-8 text-center text-white">
-        Welcome Back
-      </h2>
+      <h2 className="text-3xl font-bold mb-8 text-center text-white">Welcome Back</h2>
 
-      {/* 2. This ensures only a string is rendered, fixing the React error */}
       {error && <p className="text-red-400 text-center mb-3">{error}</p>}
 
       <form className="space-y-5" onSubmit={handleSubmit}>
@@ -71,7 +56,7 @@ const SignIn: React.FC<SignInProps> = ({
           <div className="relative">
             <Mail className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              type="string"
+              type="text"
               placeholder="username or email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
@@ -86,7 +71,7 @@ const SignIn: React.FC<SignInProps> = ({
           <div className="relative">
             <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              type="password" // Changed type to 'password' for browser security
+              type="password"
               placeholder="••••••••"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
@@ -97,15 +82,16 @@ const SignIn: React.FC<SignInProps> = ({
         </div>
 
         <button
-          type="submit" // Added type="submit" for proper form submission
-          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
+          type="submit"
+          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2"
+        >
           <LogIn className="w-5 h-5" />
           Sign In
         </button>
       </form>
 
       <p className="mt-8 text-center text-sm text-gray-400">
-        Don’t have an account?
+        Don’t have an account?{" "}
         <button onClick={onSwitchToSignUp} className="ml-2 text-blue-400">
           Sign Up
         </button>

Frontend/src/components/auth/SignUp.tsx

@@ -126,7 +126,7 @@ const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
 
         <button
           onClick={handleSubmit}
-          className="w-full px-5 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white flex items-center justify-center gap-2 hover:from-blue-600 hover:to-purple-600 transition"
+          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-purple-500 text-white flex items-center justify-center gap-2 hover:from-blue-600 hover:to-purple-600 transition"
         >
           <UserPlus className="w-5 h-5" />
           Sign Up

Frontend/src/components/dashboard/Sidebar.tsx

@@ -4,14 +4,12 @@ import {
   Home, FileText, Brain, BookOpen,
   Settings, User, LogOut
 } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
 
-interface SidebarProps {
-  onLogout?: () => void; // Function to handle logging out 
-  username: string;
-}
 
-const Sidebar: React.FC<SidebarProps> = ({ onLogout, username }) => {
+const Sidebar: React.FC = () => {
   const location = useLocation();
+  const { username, logout } = useAuth();
 
   const navItems = [
     { path: "/dashboard", label: "Dashboard", icon: <Home size={18} /> },
@@ -55,12 +53,12 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout, username }) => {
         {/* User Profile Button - Now displays the actual username */}
         <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left text-gray-300">
           <User size={18} />
-          <span>{username || "Guest User"}</span>
+          <span>{username}</span>
         </button>
 
         {/* Logout Button (Click handler added here) */}
         <button
-          onClick={onLogout}
+          onClick={logout}
           className="flex items-center space-x-3 p-3 rounded-lg bg-red-500 hover:bg-red-600 text-black hover:text-white transition w-full text-left font-medium"
         >
           <LogOut size={18} />

Frontend/src/components/quize/mcq.tsx

@@ -0,0 +1,504 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  ChevronRight,
+  CheckCircle,
+  XCircle,
+  ArrowLeft,
+} from "lucide-react";
+
+interface MCQQuizPageProps {
+  onBack: () => void;
+  // optional: total time in seconds (defaults to 15 minutes)
+  totalTimeSeconds?: number;
+}
+
+type QStatus = "notVisited" | "visited" | "answered" | "markedForReview";
+
+interface QuestionItem {
+  id: number;
+  question: string;
+  options: string[];
+  answer: string;
+  // runtime fields
+  selected?: string | null;
+  status?: QStatus;
+}
+
+const initialMockData: QuestionItem[] = [
+  {
+    id: 1,
+    question: "Which hook is used to perform side effects in React?",
+    options: ["useState", "useContext", "useEffect", "useReducer"],
+    answer: "useEffect",
+  },
+  {
+    id: 2,
+    question: "What does the 'FileSpreadsheet' icon represent?",
+    options: [
+      "A config file",
+      "A PDF or document upload",
+      "A database query",
+      "A CSS file",
+    ],
+    answer: "A PDF or document upload",
+  },
+  {
+    id: 3,
+    question: "Which Tailwind class keeps an element sticky during scroll?",
+    options: ["sticky", "absolute", "fixed", "relative"],
+    answer: "sticky",
+  },
+  {
+    id: 4,
+    question: "Which prop was NOT passed earlier to OutputTypeOption?",
+    options: ["icon", "title", "desc", "onClick"],
+    answer: "onClick",
+  },
+];
+
+const formatTime = (seconds: number) => {
+  const mm = Math.floor(seconds / 60)
+    .toString()
+    .padStart(2, "0");
+  const ss = (seconds % 60).toString().padStart(2, "0");
+  return `${mm}:${ss}`;
+};
+
+const MCQQuizPage: React.FC<MCQQuizPageProps> = ({
+  onBack,
+  totalTimeSeconds = 15 * 60, // default 15 minutes
+}) => {
+  const [questions, setQuestions] = useState<QuestionItem[]>(
+    () =>
+      initialMockData.map((q, idx) => ({
+        ...q,
+        selected: null,
+        status: idx === 0 ? "visited" : "notVisited",
+      }))
+  );
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnswered, setIsAnswered] = useState(false); // tracks current question answered state
+  const [showScore, setShowScore] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(totalTimeSeconds);
+
+  const totalQuestions = questions.length;
+  const currentQuestion = questions[currentIndex];
+
+  // Initialize isAnswered for current question when index changes
+  useEffect(() => {
+    setIsAnswered(Boolean(currentQuestion?.selected));
+  }, [currentQuestion]);
+
+  // Timer with auto-submit
+  useEffect(() => {
+    if (showScore) return;
+    if (timeLeft <= 0) {
+      handleAutoSubmit();
+      return;
+    }
+    const t = setInterval(() => setTimeLeft((s) => s - 1), 1000);
+    return () => clearInterval(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeLeft, showScore]);
+
+  const saveCurrentSelection = useCallback(
+    (selected: string | null) => {
+      setQuestions((prev) => {
+        const copy = prev.map((q, idx) => {
+          if (idx !== currentIndex) return q;
+          return {
+            ...q,
+            selected,
+            status:
+              selected !== null
+                ? "answered"
+                : q.status === "markedForReview"
+                ? "markedForReview"
+                : "visited",
+          };
+        });
+        return copy;
+      });
+    },
+    [currentIndex]
+  );
+
+  const handleAnswerClick = useCallback(
+    (option: string) => {
+      // mark selected immediately
+      setQuestions((prev) =>
+        prev.map((q, idx) =>
+          idx === currentIndex
+            ? { ...q, selected: option, status: "answered" }
+            : q
+        )
+      );
+      setIsAnswered(true);
+    },
+    [currentIndex]
+  );
+
+  const goToQuestion = useCallback(
+    (index: number) => {
+      setQuestions((prev) =>
+        prev.map((q, idx) => {
+          if (idx === index) {
+            // mark visited if not visited
+            return {
+              ...q,
+              status: q.status === "notVisited" ? "visited" : q.status,
+            };
+          }
+          // also ensure current question remains with existing status
+          return q;
+        })
+      );
+      setCurrentIndex(index);
+    },
+    []
+  );
+
+  const handleSaveAndNext = useCallback(() => {
+    // ensure status updated even if answered or not
+    setQuestions((prev) =>
+      prev.map((q, idx) => {
+        if (idx === currentIndex) {
+          return {
+            ...q,
+            status:
+              q.status === "markedForReview"
+                ? "markedForReview"
+                : q.selected
+                ? "answered"
+                : "visited",
+          };
+        }
+        return q;
+      })
+    );
+
+    const next = currentIndex + 1;
+    if (next < totalQuestions) {
+      goToQuestion(next);
+    } else {
+      // at end -> submit
+      handleSubmit();
+    }
+  }, [currentIndex, goToQuestion, totalQuestions]);
+
+  const handleMarkForReview = useCallback(() => {
+    setQuestions((prev) =>
+      prev.map((q, idx) =>
+        idx === currentIndex
+          ? {
+              ...q,
+              status: "markedForReview",
+            }
+          : q
+      )
+    );
+    // move to next question
+    const next = currentIndex + 1;
+    if (next < totalQuestions) goToQuestion(next);
+  }, [currentIndex, goToQuestion, totalQuestions]);
+
+  const handleClearResponse = useCallback(() => {
+    setQuestions((prev) =>
+      prev.map((q, idx) =>
+        idx === currentIndex ? { ...q, selected: null, status: "visited" } : q
+      )
+    );
+    setIsAnswered(false);
+  }, [currentIndex]);
+
+  const computeScore = useCallback(() => {
+    let s = 0;
+    questions.forEach((q) => {
+      if (q.selected && q.selected === q.answer) s += 1;
+    });
+    return s;
+  }, [questions]);
+
+  const handleSubmit = useCallback(() => {
+    setShowScore(true);
+  }, []);
+
+  const handleAutoSubmit = useCallback(() => {
+    // ensure final statuses saved and then show score
+    setShowScore(true);
+  }, []);
+
+  // palette helpers
+  const statusClassForPalette = (q: QuestionItem, idx: number) => {
+    // Blue = current; Green = answered; Yellow = markedForReview; Red = visited but not answered; Gray = notVisited
+    if (idx === currentIndex)
+      return "bg-blue-500 text-white ring-2 ring-blue-300";
+    switch (q.status) {
+      case "answered":
+        return "bg-green-500 text-white";
+      case "markedForReview":
+        return "bg-yellow-400 text-black";
+      case "visited":
+        return "bg-red-500 text-white";
+      case "notVisited":
+      default:
+        return "bg-slate-300 text-slate-700";
+    }
+  };
+
+  const score = useMemo(() => computeScore(), [computeScore]);
+
+  // Render Score screen
+  if (showScore) {
+    return (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+        <div className="w-full max-w-3xl p-8 bg-white rounded-xl shadow-lg text-center">
+          <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+          <h2 className="text-3xl font-bold mb-2">Test Complete</h2>
+          <p className="text-gray-600 mb-6">Your results are below.</p>
+
+          <div className="text-center mb-6">
+            <div className="text-xl text-gray-500">Score</div>
+            <div className="text-5xl font-extrabold text-blue-600">{score}</div>
+            <div className="text-sm text-gray-500">out of {totalQuestions}</div>
+          </div>
+
+          <div className="flex justify-center gap-3">
+            <button
+              onClick={() => {
+                // simple retry: reset everything
+                setQuestions(
+                  initialMockData.map((q, idx) => ({
+                    ...q,
+                    selected: null,
+                    status: idx === 0 ? "visited" : "notVisited",
+                  }))
+                );
+                setCurrentIndex(0);
+                setShowScore(false);
+                setTimeLeft(totalTimeSeconds);
+                setIsAnswered(false);
+              }}
+              className="px-6 py-3 rounded-lg bg-linear-to-r from-blue-500 to-blue-700 text-white font-medium hover:opacity-90"
+            >
+              Retry
+            </button>
+
+            <button
+              onClick={onBack}
+              className="px-6 py-3 rounded-lg border border-slate-300 text-slate-700 bg-white hover:bg-slate-50"
+            >
+              ← Back
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Main quiz UI
+  return (
+    <div className="min-h-screen bg-gray-50 p-6 lg:p-12">
+      <div className="max-w-7xl mx-auto grid grid-cols-12 gap-6">
+        {/* Left: Main Question area (8 cols) */}
+        <div className="col-span-12 lg:col-span-8">
+          <div className="mb-4 flex items-center justify-between">
+            <div>
+              <button
+                onClick={onBack}
+                className="flex items-center text-blue-600 hover:text-blue-500"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Back to Generator
+              </button>
+              <h1 className="text-2xl lg:text-3xl font-bold mt-3">
+                Generated MCQ Quiz
+              </h1>
+              <p className="text-sm text-gray-500 mt-1">
+                Mixed section — complete the test before time ends.
+              </p>
+            </div>
+
+            <div className="hidden md:flex flex-col items-end text-sm text-gray-600">
+              <div>Question</div>
+              <div className="text-xl font-bold text-blue-600">
+                {currentIndex + 1} / {totalQuestions}
+              </div>
+              <div className="mt-1">Score: <span className="font-semibold text-green-600">{score}</span></div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-xl shadow p-6 mb-6 border border-slate-200">
+            <div className="mb-6">
+              <div className="text-sm text-gray-500 mb-2">Quant - Question</div>
+              <h2 className="text-xl lg:text-2xl font-semibold text-slate-800">
+                {currentQuestion.question}
+              </h2>
+            </div>
+
+            <div className="grid gap-4">
+              {currentQuestion.options.map((opt, i) => {
+                const isSelected = currentQuestion.selected === opt;
+                const optionClass = isAnswered
+                  ? opt === currentQuestion.answer
+                    ? "bg-green-600/80 text-white border-green-500 shadow"
+                    : isSelected
+                    ? "bg-red-600/80 text-white border-red-500 shadow"
+                    : "bg-slate-50 border-slate-200 text-slate-700 opacity-70"
+                  : isSelected
+                  ? "bg-blue-600/80 text-white"
+                  : "bg-white hover:bg-slate-50 border border-slate-200 text-slate-800";
+
+                return (
+                  <button
+                    key={i}
+                    onClick={() => handleAnswerClick(opt)}
+                    disabled={isAnswered && opt !== currentQuestion.answer && isSelected === false && false}
+                    className={`p-4 rounded-lg text-left border transition flex justify-between items-center ${optionClass}`}
+                  >
+                    <span>{opt}</span>
+
+                    {isAnswered && opt === currentQuestion.answer && (
+                      <CheckCircle className="w-5 h-5 text-green-100" />
+                    )}
+                    {isAnswered &&
+                      currentQuestion.selected === opt &&
+                      opt !== currentQuestion.answer && (
+                        <XCircle className="w-5 h-5 text-red-200" />
+                      )}
+                    {!isAnswered && isSelected && (
+                      <span className="text-sm text-blue-50">Selected</span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Bottom actions */}
+            <div className="mt-6 flex flex-col md:flex-row gap-3 md:gap-4 items-center justify-between">
+              <div className="flex gap-2 flex-wrap">
+                <button
+                  onClick={handleMarkForReview}
+                  className="px-4 py-2 rounded-md bg-yellow-400 text-black font-medium"
+                >
+                  Mark for Review
+                </button>
+
+                <button
+                  onClick={handleClearResponse}
+                  className="px-4 py-2 rounded-md border border-slate-300 text-slate-700 bg-white"
+                >
+                  Clear Response
+                </button>
+
+                <button
+                  onClick={handleSaveAndNext}
+                  className="px-4 py-2 rounded-md bg-linear-to-r from-blue-500 to-blue-700 text-white font-medium flex items-center gap-2"
+                >
+                  Save & Next <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+
+              <div className="text-sm text-gray-600">
+                {currentIndex === totalQuestions - 1 ? (
+                  <span className="font-medium">Finish test to submit</span>
+                ) : (
+                  <span>{currentIndex + 1} of {totalQuestions}</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Sidebar (4 cols) */}
+        <aside className="col-span-12 lg:col-span-4">
+          <div className="sticky top-6 space-y-4">
+            {/* Timer / top card */}
+            <div className="bg-white rounded-xl p-4 shadow border border-slate-200 text-center">
+              <div className="text-sm text-gray-500">Time Left</div>
+              <div className="mt-2 text-3xl font-bold text-red-600">
+                {formatTime(Math.max(0, timeLeft))}
+              </div>
+              <div className="mt-3 text-xs text-gray-500">Auto-submit when timer ends</div>
+            </div>
+
+            {/* Palette Grid */}
+            <div className="bg-white rounded-xl p-4 shadow border border-slate-200">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-semibold">Question Palette</h3>
+                <div className="text-xs text-gray-500">Tap to jump</div>
+              </div>
+
+              <div className="grid grid-cols-5 gap-2">
+                {questions.map((q, idx) => (
+                  <button
+                    key={q.id}
+                    onClick={() => goToQuestion(idx)}
+                    className={`w-full aspect-square rounded-md flex items-center justify-center font-medium ${statusClassForPalette(
+                      q,
+                      idx
+                    )}`}
+                    title={`Q ${idx + 1} — ${q.status}`}
+                  >
+                    {idx + 1}
+                  </button>
+                ))}
+              </div>
+
+              {/* Legend */}
+              <div className="mt-4 text-xs text-slate-600 grid grid-cols-2 gap-2">
+                <div className="flex items-center gap-2">
+                  <span className="w-4 h-4 bg-blue-500 rounded" /> Current
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="w-4 h-4 bg-green-500 rounded" /> Answered
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="w-4 h-4 bg-yellow-400 rounded" /> Review
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="w-4 h-4 bg-red-500 rounded" /> Visited
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="w-4 h-4 bg-slate-300 rounded" /> Not
+                  Visited
+                </div>
+              </div>
+            </div>
+
+            {/* Submit button */}
+            <div className="bg-white rounded-xl p-4 shadow border border-slate-200 flex gap-3">
+              <button
+                onClick={() => {
+                  // quick confirm before submitting
+                  // In real app, you'd show a modal
+                  if (window.confirm("Submit test now?")) {
+                    handleSubmit();
+                  }
+                }}
+                className="flex-1 px-4 py-2 rounded-md bg-red-600 text-white font-semibold"
+              >
+                Submit Test
+              </button>
+
+              <button
+                onClick={() => {
+                  // jump to first unanswered
+                  const idx = questions.findIndex((q) => q.status === "notVisited" || q.status === "visited");
+                  if (idx >= 0) goToQuestion(idx);
+                  else alert("No unanswered questions left.");
+                }}
+                className="px-3 py-2 rounded-md border border-slate-200 text-slate-700"
+              >
+                Next Unanswered
+              </button>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+export default MCQQuizPage;

Frontend/src/pages/quize.tsx

@@ -1,125 +1,147 @@
-import React from "react";
-import { FileText, FileSpreadsheet, Code2, ListChecks, UploadCloud, Type } from "lucide-react";
+import React, { useState } from "react";
+import { FileSpreadsheet, Code2, ListChecks } from "lucide-react";
+import MCQQuizPage from "../components/quize/mcq"; 
+
+const CodingQuizPage = ({ onBack }: any) => (
+  <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center">
+    <h1 className="text-4xl font-bold mb-6">Coding Quiz Coming Soon...</h1>
+    <button
+      onClick={onBack}
+      className="px-6 py-3 bg-blue-600 rounded-lg text-white"
+    >
+      ← Back
+    </button>
+  </div>
+);
 
-// The structure of this component is heavily modified to meet the new layout requirements.
 const ResumeGeneratedQuize: React.FC = () => {
-
-    // Consistent purple button style
-    const buttonClass = "w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-400 hover:to-blue-600 font-medium transition shadow-lg shadow-blue-500/30 text-white mt-4";
-
-    const OutputTypeOption = ({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) => (
-        // These cards inherently take full width of their parent container (which is now the right column)
-        <div className="p-4 bg-slate-900/50 rounded-xl border border-slate-700 hover:bg-slate-800/60 transition cursor-pointer">
-            <div className="flex items-center gap-3 mb-2">
-                {icon}
-                <h4 className="text-xl font-semibold text-gray-50">{title}</h4>
-            </div>
-            <p className="text-gray-400 text-sm">{desc}</p>
+  const [showQuiz, setShowQuiz] = useState(false);
+  const [quizType, setQuizType] = useState<"mcq" | "coding" | null>(null);
+
+  const buttonClass =
+    "w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-400 hover:to-blue-600 font-medium transition shadow-lg shadow-blue-500/30 text-white mt-4";
+
+  // Load Quiz Page
+  if (showQuiz) {
+    if (quizType === "mcq")
+      return <MCQQuizPage onBack={() => setShowQuiz(false)} />;
+
+    if (quizType === "coding")
+      return <CodingQuizPage onBack={() => setShowQuiz(false)} />;
+  }
+
+  const OutputTypeOption = ({ icon, title, desc, value }: any) => (
+    <div
+      onClick={() => setQuizType(value)}
+      className={`p-4 rounded-xl border transition cursor-pointer 
+        ${
+          quizType === value
+            ? "bg-blue-600/30 border-blue-500 shadow-lg shadow-blue-500/30"
+            : "bg-slate-900/50 border-slate-700 hover:bg-slate-800/60"
+        }
+      `}
+    >
+      <div className="flex items-center gap-3 mb-2">
+        {icon}
+        <h4 className="text-xl font-semibold text-gray-50">{title}</h4>
+      </div>
+      <p className="text-gray-400 text-sm">{desc}</p>
+    </div>
+  );
+
+  const SourceCard = ({ icon, title, desc, actionText }: any) => (
+    <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-700 hover:bg-slate-800/70 transition flex flex-col h-full">
+      <div className="flex items-start gap-4 mb-4">
+        {icon}
+        <div>
+          <h2 className="text-2xl font-bold">{title}</h2>
+          <p className="text-gray-400 mt-1 text-sm">{desc}</p>
         </div>
-    );
-
-    const SourceCard = ({ icon, title, desc, actionText }: { icon: React.ReactNode; title: string; desc: string; actionText: string }) => (
-        <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-700 hover:bg-slate-800/70 transition flex flex-col h-full">
-            <div className="flex items-start gap-4 mb-4">
-                {icon}
-                <div>
-                    <h2 className="text-2xl font-bold">{title}</h2>
-                    <p className="text-gray-400 mt-1 text-sm">{desc}</p>
-                </div>
-            </div>
-            {/* The SourceCard button width is intentionally set to w-fit px-6 to be narrower */}
-            <button className={buttonClass.replace('w-full', 'w-fit px-6')} >
-                {actionText}
-            </button>
+      </div>
+      <button className={buttonClass.replace("w-full", "w-fit px-6")}>
+        {actionText}
+      </button>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-black text-white py-20 px-6 lg:px-12">
+      <h1 className="text-4xl font-bold mb-16 text-center">
+        Smart AI-Powered Quiz Generator
+      </h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div>
+          <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
+            1. Select Quiz Source
+          </h3>
+          <div className="space-y-8">
+            <SourceCard
+              icon={<FileSpreadsheet className="w-8 h-8 text-cyan-400" />}
+              title="Resume/Note PDF Upload"
+              desc="Generate quizzes based on your uploaded resume or notes."
+              actionText="Upload"
+            />
+          </div>
         </div>
-    );
-
-    return (
-        <div className="min-h-screen bg-black text-white py-20 px-6 lg:px-12">
-
-            {/* Page Title */}
-            <h1 className="text-4xl font-bold mb-16 text-center">
-                Smart AI-Powered Quiz Generator
-            </h1>
-
-            {/* ===== MAIN TWO-COLUMN LAYOUT (Source Selection vs. Configuration) ===== */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-
-                {/* --- LEFT SIDE: INPUT SOURCE SELECTION --- */}
-                <div>
-                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
-                        1. Select Quiz Source
-                    </h3>
-                    <div className="space-y-8">
-                        {/* Consolidated Resume/Note PDF Upload Card */}
-                        <SourceCard
-                            icon={<FileSpreadsheet className="w-8 h-8 text-cyan-400" />}
-                            title="Resume/Note PDF Upload"
-                            desc="Generate quizzes based on skills and experience listed in your resume file."
-                            actionText="Upload"
-                        />
-                    </div>
-                </div>
-
-
-                {/* --- RIGHT SIDE: PROMPT & OUTPUT CONFIGURATION (The full width section) --- */}
-                <div className="lg:sticky lg:top-8 self-start">
-                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
-                        2. Configure & Generate
-                    </h3>
-
-                    {/* Prompt/Text Area Section */}
-                    <div className="bg-slate-900/60 rounded-2xl shadow-2xl p-6 border border-slate-800 mb-8">
-                        <label htmlFor="prompt-area" className="text-lg font-semibold block mb-3 text-gray-200">
-                            Custom Prompt/Instructions (Optional)
-                        </label>
-                        <textarea
-                            id="prompt-area"
-                            rows={4}
-                            placeholder="e.g., 'Focus only on Python and OOP concepts' or 'Generate a quiz on the content uploaded in step 1'"
-                            className="w-full p-3 rounded-lg bg-black/40 border border-slate-700 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600 transition"
-                        ></textarea>
-                        <p className="text-gray-500 text-sm mt-2">
-                            This prompt refines the quiz generation based on the selected source.
-                        </p>
-                    </div>
 
-                    {/* Output Type Section - NOW CORRECTLY PLACED INSIDE THE RIGHT COLUMN */}
-                </div>
-
-            </div>
-
-            <div className="lg:sticky lg:top-8 self-start">
-                <h4 className="text-2xl font-semibold mb-4 text-gray-200">
-                    Choose Output Type:
-                </h4>
-
-                {/* NEW: Use grid-cols-2 and gap-4 to place the options side-by-side */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-
-                    {/* MCQ Quiz Option - takes full width of its column */}
-                    <OutputTypeOption
-                        icon={<ListChecks className="w-6 h-6 text-blue-400" />}
-                        title="Multiple Choice Quiz (MCQ)"
-                        desc="Ideal for quick assessment of knowledge and comprehension."
-                    />
-
-                    {/* Coding Quiz Option - takes full width of its column */}
-                    <OutputTypeOption
-                        icon={<Code2 className="w-6 h-6 text-blue-400" />}
-                        title="Coding Challenge Quiz"
-                        desc="Generates problems requiring code snippets or full functions for evaluation."
-                    />
-                </div>
-
-                {/* Main Generation Button - Full width (w-full is in buttonClass) */}
-                <button className={buttonClass + ' text-xl mt-8'}>
-                    Generate Quiz Now
-                </button>
-
-            </div>
+        <div className="lg:sticky lg:top-8 self-start">
+          <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
+            2. Configure & Generate
+          </h3>
+
+          <div className="bg-slate-900/60 rounded-2xl shadow-2xl p-6 border border-slate-800 mb-8">
+            <label className="text-lg font-semibold block mb-3 text-gray-200">
+              Custom Prompt/Instructions (Optional)
+            </label>
+            <textarea
+              rows={4}
+              placeholder="e.g., 'Focus on Python only'"
+              className="w-full p-3 rounded-lg bg-black/40 border border-slate-700 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600 transition"
+            ></textarea>
+            <p className="text-gray-500 text-sm mt-2">
+              This prompt influences the quiz generation.
+            </p>
+          </div>
         </div>
-    );
+      </div>
+
+      <div className="lg:sticky lg:top-8 self-start mt-8">
+        <h4 className="text-2xl font-semibold mb-4 text-gray-200">
+          Choose Output Type:
+        </h4>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <OutputTypeOption
+            value="mcq"
+            icon={<ListChecks className="w-6 h-6 text-blue-400" />}
+            title="Multiple Choice Quiz (MCQ)"
+            desc="Ideal for quick assessment."
+          />
+          <OutputTypeOption
+            value="coding"
+            icon={<Code2 className="w-6 h-6 text-blue-400" />}
+            title="Coding Challenge Quiz"
+            desc="Generate code-based evaluation tasks."
+          />
+        </div>
+
+        <button
+          className={
+            buttonClass +
+            " text-xl mt-8 " +
+            (!quizType
+              ? "opacity-50 cursor-not-allowed"
+              : "opacity-100 cursor-pointer")
+          }
+          disabled={!quizType}
+          onClick={() => setShowQuiz(true)}
+        >
+          Generate Quiz Now
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default ResumeGeneratedQuize;