@hed-hog/lms 0.0.268 → 0.0.270

package/hedhog/frontend/app/exams/[id]/attempt/page.tsx.ejs

@@ -0,0 +1,976 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Progress } from '@/components/ui/progress';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  BookmarkCheck,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  CircleDot,
+  Clock,
+  Flag,
+  GraduationCap,
+  Save,
+  Send,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+interface Alternativa {
+  id: string;
+  texto: string;
+  correta: boolean;
+}
+
+interface Questao {
+  id: string;
+  enunciado: string;
+  pontuacao: number;
+  alternativas: Alternativa[];
+}
+
+const examQuestions: Questao[] = [
+  {
+    id: 'q1',
+    enunciado:
+      'Qual hook do React e utilizado para gerenciar estado local em componentes funcionais?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a1', texto: 'useEffect', correta: false },
+      { id: 'a2', texto: 'useState', correta: true },
+      { id: 'a3', texto: 'useContext', correta: false },
+      { id: 'a4', texto: 'useReducer', correta: false },
+    ],
+  },
+  {
+    id: 'q2',
+    enunciado: 'O que o Virtual DOM faz no React?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a5', texto: 'Substitui o DOM real completamente', correta: false },
+      {
+        id: 'a6',
+        texto:
+          'Cria uma copia do DOM para comparar e atualizar apenas o necessario',
+        correta: true,
+      },
+      { id: 'a7', texto: 'Elimina a necessidade de HTML', correta: false },
+    ],
+  },
+  {
+    id: 'q3',
+    enunciado: 'Qual e a principal diferenca entre props e state no React?',
+    pontuacao: 3,
+    alternativas: [
+      {
+        id: 'a8',
+        texto: 'Props sao mutaveis, state sao imutaveis',
+        correta: false,
+      },
+      {
+        id: 'a9',
+        texto:
+          'Props sao passados pelo componente pai, state e gerenciado internamente',
+        correta: true,
+      },
+      {
+        id: 'a10',
+        texto: 'Nao ha diferenca pratica entre eles',
+        correta: false,
+      },
+      {
+        id: 'a11',
+        texto: 'State so existe em class components',
+        correta: false,
+      },
+      {
+        id: 'a12',
+        texto: 'Props nao podem receber funcoes como valor',
+        correta: false,
+      },
+    ],
+  },
+  {
+    id: 'q4',
+    enunciado:
+      'Qual metodo do ciclo de vida em class components e equivalente ao useEffect com array de dependencias vazio?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a13', texto: 'componentDidMount', correta: true },
+      { id: 'a14', texto: 'componentWillUpdate', correta: false },
+      { id: 'a15', texto: 'componentDidUpdate', correta: false },
+    ],
+  },
+  {
+    id: 'q5',
+    enunciado: 'Para que serve o React.memo?',
+    pontuacao: 1,
+    alternativas: [
+      {
+        id: 'a16',
+        texto: 'Para memorizar valores computados em funcoes pesadas',
+        correta: false,
+      },
+      {
+        id: 'a17',
+        texto: 'Para evitar re-renderizacoes desnecessarias de componentes',
+        correta: true,
+      },
+    ],
+  },
+  {
+    id: 'q6',
+    enunciado: 'Qual das opcoes abaixo NAO e uma regra dos Hooks no React?',
+    pontuacao: 2,
+    alternativas: [
+      {
+        id: 'a18',
+        texto: 'Hooks devem ser chamados no nivel superior do componente',
+        correta: false,
+      },
+      {
+        id: 'a19',
+        texto: 'Hooks podem ser chamados dentro de condicionais',
+        correta: true,
+      },
+      {
+        id: 'a20',
+        texto:
+          'Hooks so devem ser chamados em componentes funcionais ou custom hooks',
+        correta: false,
+      },
+      {
+        id: 'a21',
+        texto: 'Hooks devem ser chamados na mesma ordem a cada render',
+        correta: false,
+      },
+    ],
+  },
+  {
+    id: 'q7',
+    enunciado: 'O que o useCallback faz?',
+    pontuacao: 2,
+    alternativas: [
+      {
+        id: 'a22',
+        texto: 'Memoriza o resultado de uma funcao',
+        correta: false,
+      },
+      {
+        id: 'a23',
+        texto: 'Memoriza a referencia de uma funcao entre re-renders',
+        correta: true,
+      },
+      {
+        id: 'a24',
+        texto: 'Chama uma funcao apos a renderizacao',
+        correta: false,
+      },
+    ],
+  },
+  {
+    id: 'q8',
+    enunciado: 'Em qual situacao voce usaria useReducer ao inves de useState?',
+    pontuacao: 3,
+    alternativas: [
+      {
+        id: 'a25',
+        texto: 'Quando o estado e um simples booleano',
+        correta: false,
+      },
+      {
+        id: 'a26',
+        texto:
+          'Quando a logica de atualizacao do estado e complexa com multiplas sub-valores',
+        correta: true,
+      },
+      { id: 'a27', texto: 'Quando nao precisa de re-renders', correta: false },
+      {
+        id: 'a28',
+        texto: 'Quando o componente nao tem filhos',
+        correta: false,
+      },
+    ],
+  },
+];
+
+const EXAM_TITLE = 'Prova Final - React Avancado';
+const EXAM_TIME_MINUTES = 120;
+
+export default function TentativaPage() {
+  const t = useTranslations('lms.AttemptPage');
+  const [started, setStarted] = useState(false);
+  const [finished, setFinished] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [flagged, setFlagged] = useState<Set<string>>(new Set());
+  const [timeLeft, setTimeLeft] = useState(EXAM_TIME_MINUTES * 60);
+  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+  const [timeUpDialogOpen, setTimeUpDialogOpen] = useState(false);
+  const [showNav, setShowNav] = useState(false);
+  const [score, setScore] = useState<{
+    total: number;
+    max: number;
+    percent: number;
+  } | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Timer
+  useEffect(() => {
+    if (started && !finished) {
+      timerRef.current = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            clearInterval(timerRef.current!);
+            setTimeUpDialogOpen(true);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      return () => {
+        if (timerRef.current) clearInterval(timerRef.current);
+      };
+    }
+  }, [started, finished]);
+
+  // Auto-save
+  useEffect(() => {
+    if (started && !finished && Object.keys(answers).length > 0) {
+      const timeout = setTimeout(() => {
+        // simulate auto-save
+      }, 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [answers, started, finished]);
+
+  const currentQuestion = examQuestions[currentIndex];
+  const answeredCount = Object.keys(answers).length;
+  const progressPercent = (answeredCount / examQuestions.length) * 100;
+
+  function formatTime(seconds: number) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    if (h > 0)
+      return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  }
+
+  function selectAnswer(questionId: string, alternativaId: string) {
+    setAnswers((prev) => ({ ...prev, [questionId]: alternativaId }));
+  }
+
+  function toggleFlag(questionId: string) {
+    setFlagged((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) next.delete(questionId);
+      else next.add(questionId);
+      return next;
+    });
+  }
+
+  function goToQuestion(index: number) {
+    setCurrentIndex(index);
+    setShowNav(false);
+  }
+
+  function handleSaveProgress() {
+    toast.success(t('examInProgress.progressSaved'));
+  }
+
+  function calculateScore() {
+    let total = 0;
+    let max = 0;
+    examQuestions.forEach((q) => {
+      max += q.pontuacao;
+      const selectedAltId = answers[q.id];
+      if (selectedAltId) {
+        const alt = q.alternativas.find((a) => a.id === selectedAltId);
+        if (alt?.correta) total += q.pontuacao;
+      }
+    });
+    return { total, max, percent: Math.round((total / max) * 100) };
+  }
+
+  function handleSubmit() {
+    if (timerRef.current) clearInterval(timerRef.current);
+    const result = calculateScore();
+    setScore(result);
+    setFinished(true);
+    setSubmitDialogOpen(false);
+    setTimeUpDialogOpen(false);
+  }
+
+  function handleForceSubmit() {
+    handleSubmit();
+  }
+
+  // Start screen
+  if (!started) {
+    return (
+      <Page>
+        <PageHeader
+          breadcrumbs={[
+            {
+              label: t('breadcrumbs.home'),
+              href: '/',
+            },
+            {
+              label: t('breadcrumbs.exams'),
+              href: '/lms/exams',
+            },
+            {
+              label: t('breadcrumbs.attemptExam'),
+            },
+          ]}
+        />
+        <div className="flex justify-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Card className="w-full max-w-lg">
+              <CardHeader className="text-center">
+                <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-orange-500">
+                  <GraduationCap className="size-8 text-background" />
+                </div>
+                <CardTitle className="text-2xl">{EXAM_TITLE}</CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-4">
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-2xl font-bold">{examQuestions.length}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('startScreen.questions')}
+                    </p>
+                  </div>
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-2xl font-bold">{EXAM_TIME_MINUTES}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('startScreen.minutes')}
+                    </p>
+                  </div>
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-2xl font-bold">
+                      {examQuestions.reduce((a, q) => a + q.pontuacao, 0)}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('startScreen.points')}
+                    </p>
+                  </div>
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-2xl font-bold">7.0</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('startScreen.minGrade')}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="rounded-lg border p-4">
+                  <h3 className="mb-2 text-sm font-medium">
+                    {t('startScreen.instructions')}
+                  </h3>
+                  <ul className="flex flex-col gap-1.5 text-sm text-muted-foreground">
+                    <li>- {t('startScreen.instructionsList.item1')}</li>
+                    <li>- {t('startScreen.instructionsList.item2')}</li>
+                    <li>- {t('startScreen.instructionsList.item3')}</li>
+                    <li>- {t('startScreen.instructionsList.item4')}</li>
+                    <li>- {t('startScreen.instructionsList.item5')}</li>
+                  </ul>
+                </div>
+
+                <div className="flex gap-3">
+                  <Button
+                    className="flex-1 gap-2"
+                    onClick={() => setStarted(true)}
+                  >
+                    {t('startScreen.startButton')}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </Page>
+    );
+  }
+
+  // Results screen
+  if (finished && score) {
+    const passed = score.percent >= 70;
+    return (
+      <Page>
+        <PageHeader
+          breadcrumbs={[
+            {
+              label: t('breadcrumbs.home'),
+              href: '/',
+            },
+            {
+              label: t('breadcrumbs.exams'),
+              href: '/lms/exams',
+            },
+            {
+              label: t('breadcrumbs.examResult'),
+            },
+          ]}
+        />
+
+        <div className="flex justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Card className="w-full max-w-lg">
+              <CardHeader className="text-center">
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
+                  className={`mx-auto mb-4 flex size-20 items-center justify-center rounded-full ${passed ? 'bg-primary' : 'bg-muted'}`}
+                >
+                  {passed ? (
+                    <CheckCircle2 className="size-10 text-primary-foreground" />
+                  ) : (
+                    <X className="size-10 text-muted-foreground" />
+                  )}
+                </motion.div>
+                <CardTitle className="text-2xl">
+                  {passed ? t('resultScreen.passed') : t('resultScreen.failed')}
+                </CardTitle>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {EXAM_TITLE}
+                </p>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-4">
+                <div className="text-center">
+                  <motion.p
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 0.4 }}
+                    className="text-5xl font-bold"
+                  >
+                    {score.percent}%
+                  </motion.p>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {t('resultScreen.scoreText', {
+                      total: score.total,
+                      max: score.max,
+                    })}
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-3 gap-3">
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-lg font-bold">{answeredCount}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('resultScreen.answered')}
+                    </p>
+                  </div>
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-lg font-bold">
+                      {examQuestions.length - answeredCount}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('resultScreen.blank')}
+                    </p>
+                  </div>
+                  <div className="rounded-lg bg-muted p-3 text-center">
+                    <p className="text-lg font-bold">
+                      {formatTime(EXAM_TIME_MINUTES * 60 - timeLeft)}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('resultScreen.timeUsed')}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Review answers */}
+                <div className="h-auto rounded-lg border p-3">
+                  <p className="mb-2 text-sm font-medium">
+                    {t('resultScreen.answersSummary')}
+                  </p>
+                  <div className="flex flex-col gap-2">
+                    {examQuestions.map((q, i) => {
+                      const selectedAltId = answers[q.id];
+                      const selectedAlt = q.alternativas.find(
+                        (a) => a.id === selectedAltId
+                      );
+                      const isCorrect = selectedAlt?.correta;
+                      return (
+                        <div
+                          key={q.id}
+                          className="flex items-center gap-2 text-sm"
+                        >
+                          <span
+                            className={`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium ${
+                              !selectedAltId
+                                ? 'bg-muted text-muted-foreground'
+                                : isCorrect
+                                  ? 'bg-primary text-primary-foreground'
+                                  : 'bg-destructive/10 text-destructive'
+                            }`}
+                          >
+                            {i + 1}
+                          </span>
+                          <span className="flex-1 truncate text-muted-foreground">
+                            {q.enunciado.substring(0, 50)}...
+                          </span>
+                          <span className="shrink-0 text-xs font-medium">
+                            {!selectedAltId
+                              ? t('resultScreen.noAnswer')
+                              : isCorrect
+                                ? `+${q.pontuacao}`
+                                : '0'}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="flex gap-3">
+                  <Button variant="outline" className="flex-1" asChild>
+                    <Link href="/lms/exams">
+                      {t('resultScreen.backButton')}
+                    </Link>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </Page>
+    );
+  }
+
+  // Exam in progress
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.exams'),
+            href: '/lms/exams',
+          },
+          {
+            label: t('breadcrumbs.attemptExam'),
+          },
+        ]}
+        actions={
+          <div className="flex items-center gap-3">
+            {/* Timer */}
+            <div
+              className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-mono font-bold ${
+                timeLeft < 300
+                  ? 'bg-destructive/10 text-destructive'
+                  : timeLeft < 600
+                    ? 'bg-primary/10 text-primary'
+                    : 'bg-primary/10 text-primary'
+              }`}
+            >
+              <Clock className="size-4" />
+              {formatTime(timeLeft)}
+            </div>
+
+            {/* Save */}
+            <Button
+              variant="outline"
+              className="hidden gap-1.5 sm:flex"
+              onClick={handleSaveProgress}
+            >
+              <Save className="size-4" /> {t('examInProgress.saveButton')}
+            </Button>
+
+            {/* Submit */}
+            <Button
+              className="gap-1.5"
+              onClick={() => setSubmitDialogOpen(true)}
+            >
+              <Send className="size-4" />
+              <span className="hidden sm:inline">
+                {t('examInProgress.finishButton')}
+              </span>
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Progress bar */}
+      <div className="px-4 pb-2">
+        <Progress value={progressPercent} className="h-1.5" />
+      </div>
+
+      {/* Top bar */}
+      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
+        <div className="flex h-14 items-center justify-between px-4">
+          <div className="flex items-center gap-3">
+            <div>
+              <p className="text-sm font-medium leading-none">{EXAM_TITLE}</p>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {t('examInProgress.question')} {currentIndex + 1}{' '}
+                {t('examInProgress.of')} {examQuestions.length}
+              </p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="flex gap-6">
+        {/* Question area */}
+        <div className="flex-1">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentQuestion.id}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.25 }}
+            >
+              <Card>
+                <CardContent className="p-6">
+                  {/* Question header */}
+                  <div className="mb-6 flex items-start justify-between gap-4">
+                    <div className="flex items-start gap-3">
+                      <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-base font-bold text-primary-foreground">
+                        {currentIndex + 1}
+                      </div>
+                      <div>
+                        <p className="text-base font-medium leading-relaxed">
+                          {currentQuestion.enunciado}
+                        </p>
+                        <div className="mt-2 flex items-center gap-2">
+                          <Badge variant="outline" className="text-xs">
+                            {currentQuestion.pontuacao} pt
+                            {currentQuestion.pontuacao !== 1 ? 's' : ''}
+                          </Badge>
+                          {flagged.has(currentQuestion.id) && (
+                            <Badge variant="secondary" className="text-xs">
+                              {t('examInProgress.marked')}
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={`shrink-0 ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
+                      onClick={() => toggleFlag(currentQuestion.id)}
+                      aria-label={t('examInProgress.markQuestion')}
+                    >
+                      <Flag
+                        className={`size-5 ${flagged.has(currentQuestion.id) ? 'fill-current' : ''}`}
+                      />
+                    </Button>
+                  </div>
+
+                  {/* Alternatives */}
+                  <div className="flex flex-col gap-3">
+                    {currentQuestion.alternativas.map((alt, i) => {
+                      const isSelected = answers[currentQuestion.id] === alt.id;
+                      return (
+                        <motion.button
+                          key={alt.id}
+                          whileHover={{ scale: 1.01 }}
+                          whileTap={{ scale: 0.99 }}
+                          onClick={() =>
+                            selectAnswer(currentQuestion.id, alt.id)
+                          }
+                          className={`flex items-center gap-3 rounded-xl border p-4 text-left text-sm transition-all ${
+                            isSelected
+                              ? 'border-primary bg-primary/5 font-medium'
+                              : 'border-border hover:border-primary/30 hover:bg-muted/50'
+                          }`}
+                        >
+                          <span
+                            className={`flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors ${
+                              isSelected
+                                ? 'border-primary bg-primary text-primary-foreground'
+                                : 'border-border'
+                            }`}
+                          >
+                            {String.fromCharCode(65 + i)}
+                          </span>
+                          <span className="flex-1">{alt.texto}</span>
+                          {isSelected && (
+                            <CircleDot className="size-5 shrink-0" />
+                          )}
+                        </motion.button>
+                      );
+                    })}
+                  </div>
+
+                  {/* Navigation */}
+                  <div className="mt-8 flex items-center justify-between">
+                    <Button
+                      variant="outline"
+                      className="gap-2"
+                      disabled={currentIndex === 0}
+                      onClick={() => setCurrentIndex((p) => p - 1)}
+                    >
+                      <ChevronLeft className="size-4" />{' '}
+                      {t('examInProgress.previousButton')}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      className={`shrink-0 ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
+                      className="lg:hidden"
+                      onClick={() => setShowNav(!showNav)}
+                    >
+                      {currentIndex + 1}/{examQuestions.length}
+                    </Button>
+                    {currentIndex < examQuestions.length - 1 ? (
+                      <Button
+                        className="gap-2"
+                        onClick={() => setCurrentIndex((p) => p + 1)}
+                      >
+                        {t('examInProgress.nextButton')}{' '}
+                        <ChevronRight className="size-4" />
+                      </Button>
+                    ) : (
+                      <Button
+                        className="gap-2"
+                        onClick={() => setSubmitDialogOpen(true)}
+                      >
+                        <Send className="size-4" />{' '}
+                        {t('examInProgress.finishButton')}
+                      </Button>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Side navigation - desktop */}
+        <div className="hidden w-64 shrink-0 lg:block">
+          <Card className="sticky top-20">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">
+                {t('examInProgress.navigation')}
+              </CardTitle>
+              <p className="text-xs text-muted-foreground">
+                {t('examInProgress.answeredCount', {
+                  count: answeredCount,
+                  total: examQuestions.length,
+                })}
+              </p>
+            </CardHeader>
+            <CardContent className="pb-4">
+              <div className="grid grid-cols-5 gap-2">
+                {examQuestions.map((q, i) => {
+                  const isAnswered = !!answers[q.id];
+                  const isFlagged = flagged.has(q.id);
+                  const isCurrent = i === currentIndex;
+                  return (
+                    <button
+                      key={q.id}
+                      onClick={() => goToQuestion(i)}
+                      className={`relative flex size-10 items-center justify-center rounded-lg text-sm font-medium transition-all ${
+                        isCurrent
+                          ? 'bg-primary text-primary-foreground ring-1 ring-primary ring-offset-2'
+                          : isAnswered
+                            ? 'bg-primary/10 text-primary'
+                            : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                      }`}
+                      aria-label={`${t('examInProgress.questionLabel', { number: i + 1 })}${isAnswered ? ` ${t('examInProgress.questionAnswered')}` : ''}${isFlagged ? ` ${t('examInProgress.questionMarked')}` : ''}`}
+                    >
+                      {i + 1}
+                      {isFlagged && (
+                        <span className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full bg-primary" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div className="mt-4 flex flex-col gap-2 text-xs text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <span className="flex size-4 items-center justify-center rounded bg-primary text-primary-foreground text-[10px]">
+                    &nbsp;
+                  </span>
+                  {t('examInProgress.current')}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="flex size-4 items-center justify-center rounded bg-primary/10">
+                    &nbsp;
+                  </span>
+                  {t('examInProgress.answeredLabel')}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="flex size-4 items-center justify-center rounded bg-muted">
+                    &nbsp;
+                  </span>
+                  {t('examInProgress.notAnswered')}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="relative flex size-4 items-center justify-center rounded bg-muted">
+                    <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-primary" />
+                  </span>
+                  {t('examInProgress.markedForReview')}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Mobile nav overlay */}
+      <AnimatePresence>
+        {showNav && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm lg:hidden"
+            onClick={() => setShowNav(false)}
+          >
+            <motion.div
+              initial={{ y: '100%' }}
+              animate={{ y: 0 }}
+              exit={{ y: '100%' }}
+              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+              className="absolute bottom-0 left-0 right-0 rounded-t-2xl border-t bg-background p-6"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-muted" />
+              <p className="mb-3 text-sm font-medium">
+                {t('examInProgress.navigationMobile', {
+                  count: answeredCount,
+                  total: examQuestions.length,
+                })}
+              </p>
+              <div className="grid grid-cols-8 gap-2">
+                {examQuestions.map((q, i) => {
+                  const isAnswered = !!answers[q.id];
+                  const isFlagged = flagged.has(q.id);
+                  const isCurrent = i === currentIndex;
+                  return (
+                    <button
+                      key={q.id}
+                      onClick={() => goToQuestion(i)}
+                      className={`relative flex size-10 items-center justify-center rounded-lg text-sm font-medium transition-all ${
+                        isCurrent
+                          ? 'bg-primary text-primary-foreground'
+                          : isAnswered
+                            ? 'bg-primary/10 text-primary'
+                            : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {i + 1}
+                      {isFlagged && (
+                        <span className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full bg-primary" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+              <Button className="mt-4 w-full" onClick={() => setShowNav(false)}>
+                {t('examInProgress.closeButton')}
+              </Button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Submit Dialog */}
+      <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <BookmarkCheck className="size-5" />
+              {t('submitDialog.title')}
+            </DialogTitle>
+            <DialogDescription asChild>
+              <div>
+                <p>{t('submitDialog.description')}</p>
+                <div className="mt-3 flex gap-4 rounded-lg bg-muted p-3 text-sm">
+                  <div>
+                    <p className="font-medium text-primary">
+                      {answeredCount}/{examQuestions.length}
+                    </p>
+                    <p className="text-xs">{t('submitDialog.answeredLabel')}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium text-primary">
+                      {examQuestions.length - answeredCount}
+                    </p>
+                    <p className="text-xs">{t('submitDialog.blankLabel')}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium text-primary">{flagged.size}</p>
+                    <p className="text-xs">{t('submitDialog.markedLabel')}</p>
+                  </div>
+                </div>
+                {examQuestions.length - answeredCount > 0 && (
+                  <p className="mt-2 text-sm text-destructive">
+                    {t('submitDialog.warning', {
+                      count: examQuestions.length - answeredCount,
+                    })}
+                  </p>
+                )}
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setSubmitDialogOpen(false)}
+            >
+              {t('submitDialog.continueButton')}
+            </Button>
+            <Button onClick={handleSubmit}>
+              {t('submitDialog.submitButton')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Time Up Dialog */}
+      <Dialog open={timeUpDialogOpen} onOpenChange={() => {}}>
+        <DialogContent className="[&>button]:hidden">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              {t('timeUpDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('timeUpDialog.description')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={handleForceSubmit}>
+              {t('timeUpDialog.viewResultButton')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}