From d98d6a71fe1ef73deb76aebddb3c60a05f20df6a Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Thu, 13 Aug 2026 17:17:14 +0000
Subject: [PATCH 01/16] fix(result): gate record/save buttons behind
 RECORD_EXAM_RESULT
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Record Result (POST /results) and the detail-modal Save (PUT /results/:id)
had no RequirePermission gate, unlike every other action on this page —
both routes are backend-guarded (RECORD_EXAM_RESULT, or
RECORD_EXAM_RESULT|MODERATE_EXAM_RESULT for the update), the buttons just
never mirrored it client-side.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../result/pages/ResultPage/index.tsx         | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
index 583ea57d0..b9acb34ca 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
@@ -314,9 +314,11 @@ export function ResultPage() {
               {t('result.review.publish')}
             </Button>
           </RequirePermission>
-          <Button leftSection={<IconPlus size={15} />} onClick={openPicker} size="sm">
-            {t('result.record')}
-          </Button>
+          <RequirePermission anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_RESULT]} hideOnly>
+            <Button leftSection={<IconPlus size={15} />} onClick={openPicker} size="sm">
+              {t('result.record')}
+            </Button>
+          </RequirePermission>
         </Group>
       </Group>
 
@@ -504,14 +506,22 @@ export function ResultPage() {
 
             <ModalFooter>
               <Button variant="default" onClick={handleDetailClose} size="sm">{t('result.close')}</Button>
-              <Button
-                onClick={handleDetailSave}
-                size="sm"
-                loading={detailSaving}
-                leftSection={<IconDeviceFloppy size={15} />}
+              <RequirePermission
+                anyOf={[
+                  LICENSE_PERMISSIONS.RECORD_EXAM_RESULT,
+                  LICENSE_PERMISSIONS.MODERATE_EXAM_RESULT,
+                ]}
+                hideOnly
               >
-                {t('result.save')}
-              </Button>
+                <Button
+                  onClick={handleDetailSave}
+                  size="sm"
+                  loading={detailSaving}
+                  leftSection={<IconDeviceFloppy size={15} />}
+                >
+                  {t('result.save')}
+                </Button>
+              </RequirePermission>
             </ModalFooter>
           </Stack>
         ) : (

From 14b5bb83f93fe7dedf434fe7f9d759b4bd75090d Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Thu, 13 Aug 2026 19:28:03 +0000
Subject: [PATCH 02/16] feat(question): MCQ options authoring editor (Phase 2
 domain foundation)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backend now supports MCQ options + a separate answer-key table
(PUT /questions/:id/options). Frontend side of that, authoring only —
no candidate exam-taking UI.

- Question type gains options?: QuestionOption[] (no correctness field —
  the API never returns one, matching the backend's split-table design)
- New question-api hooks: getQuestionWithOptions, setQuestionOptions
- New QuestionOptionsEditor component (separate file, not inlined into
  QuestionPage) — add/remove/reorder options, mark correct, bilingual text
- Wired into the question edit form, shown only for an existing CHOICE
  question (options attach to an id, matching the backend's replace
  endpoint)
- en/am i18n strings for the new editor

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../app/features/question/api/question-api.ts |  18 +++
 .../components/QuestionOptionsEditor.tsx      | 134 ++++++++++++++++++
 .../question/pages/QuestionPage/index.tsx     |  10 ++
 .../app/features/question/types/question.ts   |  23 +++
 apps/backoffice/src/app/i18n/locales/am.ts    |  14 ++
 apps/backoffice/src/app/i18n/locales/en.ts    |  15 ++
 6 files changed, 214 insertions(+)
 create mode 100644 apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx

diff --git a/apps/backoffice/src/app/features/question/api/question-api.ts b/apps/backoffice/src/app/features/question/api/question-api.ts
index a118af749..d84e801f2 100644
--- a/apps/backoffice/src/app/features/question/api/question-api.ts
+++ b/apps/backoffice/src/app/features/question/api/question-api.ts
@@ -1,10 +1,12 @@
 import { baseApi } from '@ema-platform/api';
 import type {
   Question,
+  QuestionOption,
   ListResponse,
   CreateQuestionPayload,
   UpdateQuestionPayload,
   ReviewQuestionPayload,
+  SetQuestionOptionsPayload,
 } from '../types/question';
 
 const questionApi = baseApi.injectEndpoints({
@@ -17,6 +19,11 @@ const questionApi = baseApi.injectEndpoints({
       query: (id) => `/questions/${id}`,
       providesTags: ['Api'],
     }),
+    /** Same question, with `options` populated — the MCQ authoring editor. */
+    getQuestionWithOptions: builder.query<Question, string>({
+      query: (id) => `/questions/${id}?i=options`,
+      providesTags: ['Api'],
+    }),
     createQuestion: builder.mutation<Question, CreateQuestionPayload>({
       query: (body) => ({ url: '/questions', method: 'POST', body }),
       invalidatesTags: ['Api'],
@@ -47,6 +54,15 @@ const questionApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ['Api'],
     }),
+    /** Full replace of a CHOICE question's options + correct-answer set (Phase 2). */
+    setQuestionOptions: builder.mutation<QuestionOption[], SetQuestionOptionsPayload>({
+      query: ({ id, ...body }) => ({
+        url: `/questions/${id}/options`,
+        method: 'PUT',
+        body,
+      }),
+      invalidatesTags: ['Api'],
+    }),
   }),
   overrideExisting: false,
 });
@@ -54,9 +70,11 @@ const questionApi = baseApi.injectEndpoints({
 export const {
   useGetQuestionsQuery,
   useGetQuestionQuery,
+  useGetQuestionWithOptionsQuery,
   useCreateQuestionMutation,
   useUpdateQuestionMutation,
   useDeleteQuestionMutation,
   useSubmitQuestionMutation,
   useReviewQuestionMutation,
+  useSetQuestionOptionsMutation,
 } = questionApi;
diff --git a/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx b/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx
new file mode 100644
index 000000000..2daab604a
--- /dev/null
+++ b/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { IconGripVertical, IconInfoCircle, IconPlus, IconTrash } from '@tabler/icons-react';
+import { BilingualInput, notify, useErrorHandler } from '@ema-platform/ui';
+import type { BilingualValue } from '@ema-platform/ui';
+import {
+  useGetQuestionWithOptionsQuery,
+  useSetQuestionOptionsMutation,
+} from '../api/question-api';
+
+interface DraftOption {
+  text: BilingualValue;
+  isCorrect: boolean;
+}
+
+/**
+ * MCQ options + correct-answer editor for a CHOICE-form question (Phase 2).
+ *
+ * Only reachable while editing an already-created question — options attach
+ * to a question id, matching the backend's `PUT /questions/:id/options`
+ * full-replace endpoint. Nothing here is ever shown to a candidate; this is
+ * the authoring side only.
+ */
+export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler();
+  const { data: question, isFetching } = useGetQuestionWithOptionsQuery(questionId);
+  const [setOptions, { isLoading: isSaving }] = useSetQuestionOptionsMutation();
+  const [draft, setDraft] = useState<DraftOption[]>([]);
+
+  useEffect(() => {
+    if (!question) return;
+    const existing = question.options ?? [];
+    setDraft(
+      existing.length
+        ? existing
+            .slice()
+            .sort((a, b) => a.order - b.order)
+            .map((o) => ({ text: o.text, isCorrect: false }))
+        : [
+            { text: { en: '', am: '' }, isCorrect: false },
+            { text: { en: '', am: '' }, isCorrect: false },
+          ],
+    );
+    // isCorrect never comes back from the API by design — an examiner
+    // re-editing options re-marks the correct one(s) rather than us
+    // pretending to know what they were.
+  }, [question]);
+
+  const updateText = (index: number, text: BilingualValue) => {
+    setDraft((prev) => prev.map((o, i) => (i === index ? { ...o, text } : o)));
+  };
+
+  const toggleCorrect = (index: number) => {
+    setDraft((prev) => prev.map((o, i) => (i === index ? { ...o, isCorrect: !o.isCorrect } : o)));
+  };
+
+  const addOption = () => {
+    setDraft((prev) => [...prev, { text: { en: '', am: '' }, isCorrect: false }]);
+  };
+
+  const removeOption = (index: number) => {
+    setDraft((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSave = async () => {
+    if (draft.length < 2) {
+      notify.error(t('question.options.needAtLeastTwo'));
+      return;
+    }
+    if (!draft.some((o) => o.isCorrect)) {
+      notify.error(t('question.options.needOneCorrect'));
+      return;
+    }
+    if (draft.some((o) => !o.text.en.trim() || !o.text.am.trim())) {
+      notify.error(t('question.options.textRequired'));
+      return;
+    }
+    try {
+      await setOptions({ id: questionId, options: draft }).unwrap();
+      notify.success(t('question.options.saved'));
+    } catch (e) {
+      handleError(e);
+    }
+  };
+
+  if (isFetching) return <Loader size="sm" />;
+
+  return (
+    <Stack gap="sm">
+      <Alert icon={<IconInfoCircle size={15} />} color="blue" variant="light">
+        {t('question.options.hint')}
+      </Alert>
+      {draft.map((option, index) => (
+        <Group key={index} gap="xs" wrap="nowrap" align="flex-end">
+          <IconGripVertical size={16} style={{ opacity: 0.4, marginBottom: 8 }} />
+          <BilingualInput
+            label={t('question.options.optionLabel', { number: index + 1 })}
+            value={option.text}
+            onChange={(v) => updateText(index, v)}
+            size="sm"
+            style={{ flex: 1 }}
+          />
+          <Checkbox
+            label={t('question.options.correct')}
+            checked={option.isCorrect}
+            onChange={() => toggleCorrect(index)}
+            mb={4}
+          />
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            size="sm"
+            mb={4}
+            disabled={draft.length <= 2}
+            onClick={() => removeOption(index)}
+          >
+            <IconTrash size={14} />
+          </ActionIcon>
+        </Group>
+      ))}
+      <Group justify="space-between">
+        <Button variant="subtle" size="xs" leftSection={<IconPlus size={14} />} onClick={addOption}>
+          {t('question.options.addOption')}
+        </Button>
+        <Button size="sm" loading={isSaving} onClick={handleSave}>
+          {t('question.options.save')}
+        </Button>
+      </Group>
+      <Text fz="xs" c="dimmed">{t('question.options.replaceNotice')}</Text>
+    </Stack>
+  );
+}
diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
index e5026c659..1ee40bc5d 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
@@ -30,6 +30,7 @@ import {
   useReviewQuestionMutation,
 } from '../../api/question-api';
 import type { Question, QuestionForm } from '../../types/question';
+import { QuestionOptionsEditor } from '../../components/QuestionOptionsEditor';
 import { questionColumns } from './columns';
 import { questionActionsColumn } from './actions';
 
@@ -92,6 +93,15 @@ function QuestionForm({
             <NumberInput label={t('question.form.hours')} value={hours} onChange={(v) => setHours(Number(v))} min={0} size="sm" />
             <NumberInput label={t('question.form.minutes')} value={minutes} onChange={(v) => setMinutes(Number(v))} min={0} size="sm" />
           </Group>
+          {editing && form === 'CHOICE' && (
+            <>
+              <Text fz="sm" fw={500} mt="sm">{t('question.options.title')}</Text>
+              <QuestionOptionsEditor questionId={editing.id} />
+            </>
+          )}
+          {!editing && form === 'CHOICE' && (
+            <Text fz="xs" c="dimmed">{t('question.options.saveFirst')}</Text>
+          )}
           <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">{t('question.cancel')}</Button>
             <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('question.update') : t('question.create')}</Button>
diff --git a/apps/backoffice/src/app/features/question/types/question.ts b/apps/backoffice/src/app/features/question/types/question.ts
index a95bba2b8..b300bc881 100644
--- a/apps/backoffice/src/app/features/question/types/question.ts
+++ b/apps/backoffice/src/app/features/question/types/question.ts
@@ -16,6 +16,17 @@ export type QuestionStatus =
   | 'REJECTED'
   | 'RETIRED';
 
+/**
+ * A CHOICE option, as returned by the authoring/QC endpoints. Never carries
+ * a correctness flag — the API's own answer-key table is never joined into
+ * this response either, so there's nothing to accidentally serialize here.
+ */
+export interface QuestionOption {
+  id: string;
+  text: LocalePair;
+  order: number;
+}
+
 export interface Question {
   id: string;
   certificationId: string;
@@ -32,6 +43,8 @@ export interface Question {
   submittedAt: string | null;
   createdAt: string;
   updatedAt: string;
+  /** Only populated when explicitly requested (`?i=options`). */
+  options?: QuestionOption[];
 }
 
 export interface ReviewQuestionPayload {
@@ -64,3 +77,13 @@ export interface UpdateQuestionPayload {
   points?: number;
   isActive?: boolean;
 }
+
+export interface QuestionOptionInput {
+  text: LocalePair;
+  isCorrect: boolean;
+}
+
+export interface SetQuestionOptionsPayload {
+  id: string;
+  options: QuestionOptionInput[];
+}
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 92400f9ae..63d38a013 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -738,6 +738,20 @@ export const am: Translations = {
       onlyApprovedUsable: "የጸደቁ ጥያቄዎች ብቻ በፈተና ወረቀት ላይ ሊቀመጡ ይችላሉ።",
       error: "ተግባሩ አልተሳካም",
     },
+    options: {
+      title: "የመልስ አማራጮች",
+      hint: "ትክክለኛውን አማራጭ ምረጥ/ምረጪ። ማስቀመጥ መላውን የአማራጭ ስብስብ ይተካል።",
+      optionLabel: "አማራጭ {{number}}",
+      correct: "ትክክለኛ",
+      addOption: "አማራጭ ጨምር",
+      save: "አማራጮችን አስቀምጥ",
+      saved: "አማራጮች ተቀምጠዋል",
+      saveFirst: "መጀመሪያ ጥያቄውን አስቀምጥ፣ ከዚያ አማራጮችን ጨምር።",
+      replaceNotice: "ትክክለኛ መልሶች ከተቀመጡ በኋላ እዚህ አይታዩም — እንደገና ካስተካከልክ/ካስተካከልሽ ዳግም ምረጥ/ምረጪ።",
+      needAtLeastTwo: "ጥያቄ ቢያንስ ሁለት አማራጮች ያስፈልገዋል።",
+      needOneCorrect: "ቢያንስ አንድ አማራጭ እንደ ትክክለኛ ምረጥ/ምረጪ።",
+      textRequired: "እያንዳንዱ አማራጭ በሁለቱም ቋንቋዎች ጽሑፍ ያስፈልገዋል።",
+    },
   },
 
   configuration: {
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 338a88e68..49a5a8b12 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -739,6 +739,21 @@ export const en = {
         'Only approved items can be placed on an examination paper.',
       error: 'Operation failed',
     },
+    options: {
+      title: 'Answer Options',
+      hint: 'Mark every correct option. Saving replaces the entire option set.',
+      optionLabel: 'Option {{number}}',
+      correct: 'Correct',
+      addOption: 'Add option',
+      save: 'Save options',
+      saved: 'Options saved',
+      saveFirst: 'Save the question first, then add its options.',
+      replaceNotice:
+        'Correct answers are never shown here once saved — re-mark them if you edit this set again.',
+      needAtLeastTwo: 'A question needs at least two options.',
+      needOneCorrect: 'Mark at least one option as correct.',
+      textRequired: 'Every option needs text in both languages.',
+    },
   },
 
   configuration: {

From 4edce751ee86d2abea3243956911e6a91f23990c Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Fri, 14 Aug 2026 09:17:09 +0000
Subject: [PATCH 03/16] feat(exam): candidate exam-taking experience (Phase 4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New portal feature apps/portal/src/app/features/exam-attempt/, following
the repo's existing folder convention (pages/<Page>/index.tsx, components/,
types/, hooks/ — matches the payments feature's hooks/ precedent):

- types/exam-attempt.ts — response/local-state shapes
- hooks/useExamAttempt.ts — all API orchestration: load (registration +
  attempt), start/resume, per-question autosave (immediate on MCQ select,
  debounced+flushed-on-navigation for essay text), local countdown seeded
  from the server's serverTime/remainingSeconds, submit, and resync from
  the server whenever a write is refused as expired/already-submitted
- components/ExamInstructions, ExamTimer, ExamQuestionNav,
  ExamQuestionDisplay, ExamCompletion — one concern per file, not a single
  page dump
- pages/ExamAttemptPage — thin view layer over the hook

Flow: /exams (existing) gets a 'Take exam' action on eligible registration
rows → /exams/:examId/take, which shows instructions before an attempt
exists, the live exam screen while IN_PROGRESS, and a no-score completion
screen once SUBMITTED/EXPIRED (never fabricates a result — grading
doesn't exist yet).

Security note: RequirePermission on the route and disabled inputs after
local timeout are UI conveniences only. Every save/submit is independently
re-checked by the backend's ownership + applyExpiry() on each call: a
client that skipped the UI entirely and hit the API directly would be
bound by exactly the same rules.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/ExamCompletion.tsx             |  50 +++
 .../components/ExamInstructions.tsx           |  94 ++++++
 .../components/ExamQuestionDisplay.tsx        | 118 ++++++++
 .../components/ExamQuestionNav.tsx            |  57 ++++
 .../exam-attempt/components/ExamTimer.tsx     |  34 +++
 .../exam-attempt/hooks/useExamAttempt.ts      | 286 ++++++++++++++++++
 .../pages/ExamAttemptPage/index.tsx           | 187 ++++++++++++
 .../exam-attempt/types/exam-attempt.ts        |  78 +++++
 .../exams/pages/ExamsPage/columns.tsx         |  24 +-
 .../features/exams/pages/ExamsPage/index.tsx  |   3 +
 apps/portal/src/app/router.tsx                |   9 +
 11 files changed, 939 insertions(+), 1 deletion(-)
 create mode 100644 apps/portal/src/app/features/exam-attempt/components/ExamCompletion.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/components/ExamInstructions.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/components/ExamQuestionDisplay.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/components/ExamQuestionNav.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/components/ExamTimer.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/hooks/useExamAttempt.ts
 create mode 100644 apps/portal/src/app/features/exam-attempt/pages/ExamAttemptPage/index.tsx
 create mode 100644 apps/portal/src/app/features/exam-attempt/types/exam-attempt.ts

diff --git a/apps/portal/src/app/features/exam-attempt/components/ExamCompletion.tsx b/apps/portal/src/app/features/exam-attempt/components/ExamCompletion.tsx
new file mode 100644
index 000000000..7f284a623
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/components/ExamCompletion.tsx
@@ -0,0 +1,50 @@
+import { Button, Card, Stack, Text, ThemeIcon, Title } from '@mantine/core';
+import { IconCircleCheck, IconClockPause } from '@tabler/icons-react';
+import { useNavigate } from 'react-router-dom';
+import type { AttemptStatus } from '../types/exam-attempt';
+
+/**
+ * No score, no pass/fail, nothing evaluation-shaped — grading hasn't run.
+ * This only confirms what actually happened: the candidate submitted, or
+ * the deadline closed the attempt out first.
+ */
+export function ExamCompletion({
+  status,
+  submittedAt,
+}: {
+  status: AttemptStatus;
+  submittedAt: string | null;
+}) {
+  const navigate = useNavigate();
+  const expired = status === 'EXPIRED';
+
+  return (
+    <Stack maw={520} mx="auto" align="center" py="xl">
+      <Card withBorder radius="lg" p="xl" w="100%">
+        <Stack align="center" gap="md">
+          <ThemeIcon size={64} radius="xl" variant="light" color={expired ? 'orange' : 'teal'}>
+            {expired ? <IconClockPause size={32} /> : <IconCircleCheck size={32} />}
+          </ThemeIcon>
+          <Title order={3} ta="center">
+            {expired ? 'Time expired' : 'Exam submitted'}
+          </Title>
+          <Text ta="center" c="dimmed">
+            {expired
+              ? 'The scheduled time ran out. Your saved answers were recorded as your final submission.'
+              : 'Your answers have been recorded.'}
+            {' '}Your result will appear on the Examinations page once marking, moderation and
+            approval are complete — it is not available yet.
+          </Text>
+          {submittedAt && (
+            <Text fz="xs" c="dimmed">
+              {expired ? 'Closed' : 'Submitted'} at {new Date(submittedAt).toLocaleString()}
+            </Text>
+          )}
+          <Button variant="light" onClick={() => navigate('/exams')}>
+            Back to Examinations
+          </Button>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/apps/portal/src/app/features/exam-attempt/components/ExamInstructions.tsx b/apps/portal/src/app/features/exam-attempt/components/ExamInstructions.tsx
new file mode 100644
index 000000000..e0bfa2c87
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/components/ExamInstructions.tsx
@@ -0,0 +1,94 @@
+import { Alert, Badge, Button, Card, Group, Stack, Text, Title } from '@mantine/core';
+import { IconAlertCircle, IconClock, IconInfoCircle, IconPlayerPlay } from '@tabler/icons-react';
+import type { Bilingual } from '@ema-platform/api';
+import type { EstimatedTime, RegistrationWithExam } from '../types/exam-attempt';
+
+function formatDuration(time: EstimatedTime | null | undefined): string {
+  if (!time) return 'Not configured';
+  const parts = [
+    time.days ? `${time.days}d` : null,
+    time.hours ? `${time.hours}h` : null,
+    time.minutes ? `${time.minutes}m` : null,
+  ].filter(Boolean);
+  return parts.length ? parts.join(' ') : '0m';
+}
+
+export function ExamInstructions({
+  registration,
+  localized,
+  showDate,
+  starting,
+  onStart,
+}: {
+  registration: RegistrationWithExam;
+  localized: (value: Bilingual | undefined) => string;
+  showDate: (value: string | null | undefined) => string;
+  starting: boolean;
+  onStart: () => void;
+}) {
+  const exam = registration.exam;
+  const canStart = exam?.status === 'ACTIVE';
+
+  return (
+    <Stack maw={720} mx="auto" gap="md">
+      <Title order={2}>{localized(exam?.title) || 'Examination'}</Title>
+      <Text c="dimmed">{localized(exam?.certification?.name)}</Text>
+
+      <Card withBorder radius="md" p="lg">
+        <Stack gap="sm">
+          <Group justify="space-between">
+            <Text fz="sm" c="dimmed">Admission number</Text>
+            <Text fz="sm" fw={600} ff="monospace">{registration.admissionNumber}</Text>
+          </Group>
+          <Group justify="space-between">
+            <Text fz="sm" c="dimmed">Session date</Text>
+            <Text fz="sm">{showDate(exam?.date)}{exam?.venue ? ` · ${exam.venue}` : ''}</Text>
+          </Group>
+          <Group justify="space-between">
+            <Text fz="sm" c="dimmed">Duration</Text>
+            <Badge variant="light" leftSection={<IconClock size={12} />}>
+              {formatDuration(exam?.givenTime)}
+            </Badge>
+          </Group>
+          <Group justify="space-between">
+            <Text fz="sm" c="dimmed">Attempt</Text>
+            <Badge variant="light" color={registration.kind === 'RETAKE' ? 'orange' : 'blue'}>
+              {registration.kind === 'RETAKE'
+                ? `Retake · sitting ${registration.attemptNumber}`
+                : 'First sitting'}
+            </Badge>
+          </Group>
+        </Stack>
+      </Card>
+
+      {exam?.direction && localized(exam.direction) && (
+        <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light" title="Instructions">
+          {localized(exam.direction)}
+        </Alert>
+      )}
+
+      <Alert icon={<IconAlertCircle size={16} />} color="yellow" variant="light">
+        Once started, the timer cannot be paused. Answers are saved automatically as you go, but
+        the exam ends the moment the deadline passes, whether or not you have submitted.
+      </Alert>
+
+      {!canStart && (
+        <Alert color="gray" variant="light">
+          This session is not currently open for candidates to begin.
+        </Alert>
+      )}
+
+      <Group justify="flex-end">
+        <Button
+          size="md"
+          leftSection={<IconPlayerPlay size={16} />}
+          loading={starting}
+          disabled={!canStart}
+          onClick={onStart}
+        >
+          Start exam
+        </Button>
+      </Group>
+    </Stack>
+  );
+}
diff --git a/apps/portal/src/app/features/exam-attempt/components/ExamQuestionDisplay.tsx b/apps/portal/src/app/features/exam-attempt/components/ExamQuestionDisplay.tsx
new file mode 100644
index 000000000..24570fe45
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/components/ExamQuestionDisplay.tsx
@@ -0,0 +1,118 @@
+import { Badge, Button, Group, Paper, Radio, Stack, Text, Textarea } from '@mantine/core';
+import { IconAlertCircle, IconCheck, IconRefresh } from '@tabler/icons-react';
+import type { Bilingual } from '@ema-platform/api';
+import type { CandidateQuestion, SaveState } from '../types/exam-attempt';
+
+function SaveIndicator({ state, onRetry }: { state: SaveState; onRetry: () => void }) {
+  if (state === 'saving') {
+    return <Text fz="xs" c="dimmed">Saving…</Text>;
+  }
+  if (state === 'saved') {
+    return (
+      <Group gap={4}>
+        <IconCheck size={13} color="var(--mantine-color-teal-6)" />
+        <Text fz="xs" c="teal">Saved</Text>
+      </Group>
+    );
+  }
+  if (state === 'error') {
+    return (
+      <Group gap={6}>
+        <IconAlertCircle size={13} color="var(--mantine-color-red-6)" />
+        <Text fz="xs" c="red">Not saved</Text>
+        <Button
+          size="compact-xs"
+          variant="light"
+          color="red"
+          leftSection={<IconRefresh size={12} />}
+          onClick={onRetry}
+        >
+          Retry
+        </Button>
+      </Group>
+    );
+  }
+  return null;
+}
+
+/**
+ * Renders one question — never the answer key, because the API response
+ * this reads from (`CandidateQuestion`/`CandidateOption`) has no such field
+ * to render even by mistake.
+ */
+export function ExamQuestionDisplay({
+  question,
+  index,
+  total,
+  localized,
+  selectedOptionId,
+  answerText,
+  saveState,
+  disabled,
+  onSelectOption,
+  onChangeText,
+  onRetry,
+}: {
+  question: CandidateQuestion;
+  index: number;
+  total: number;
+  localized: (value: Bilingual | undefined) => string;
+  selectedOptionId: string | null | undefined;
+  answerText: string | null | undefined;
+  saveState: SaveState;
+  disabled: boolean;
+  onSelectOption: (optionId: string) => void;
+  onChangeText: (text: string) => void;
+  onRetry: () => void;
+}) {
+  return (
+    <Paper withBorder radius="md" p="lg">
+      <Group justify="space-between" mb="sm">
+        <Badge variant="light" color="gray">
+          Question {index + 1} of {total} · {question.points} pts
+        </Badge>
+        <SaveIndicator state={saveState} onRetry={onRetry} />
+      </Group>
+
+      <Text fz="md" fw={500} mb="lg">
+        {localized(question.title)}
+      </Text>
+
+      {question.form === 'CHOICE' ? (
+        <Radio.Group
+          value={selectedOptionId ?? ''}
+          onChange={onSelectOption}
+        >
+          <Stack gap="sm">
+            {question.options
+              .slice()
+              .sort((a, b) => a.order - b.order)
+              .map((option) => (
+                <Radio.Card
+                  key={option.id}
+                  value={option.id}
+                  disabled={disabled}
+                  p="sm"
+                  radius="md"
+                >
+                  <Group wrap="nowrap" gap="sm">
+                    <Radio.Indicator disabled={disabled} />
+                    <Text fz="sm">{localized(option.text)}</Text>
+                  </Group>
+                </Radio.Card>
+              ))}
+          </Stack>
+        </Radio.Group>
+      ) : (
+        <Textarea
+          placeholder="Write your answer"
+          minRows={8}
+          autosize
+          disabled={disabled}
+          value={answerText ?? ''}
+          onChange={(event) => onChangeText(event.currentTarget.value)}
+        />
+      )}
+    </Paper>
+  );
+}
diff --git a/apps/portal/src/app/features/exam-attempt/components/ExamQuestionNav.tsx b/apps/portal/src/app/features/exam-attempt/components/ExamQuestionNav.tsx
new file mode 100644
index 000000000..cb7c930c2
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/components/ExamQuestionNav.tsx
@@ -0,0 +1,57 @@
+import { Paper, SimpleGrid, Text, UnstyledButton } from '@mantine/core';
+import type { CandidateQuestion } from '../types/exam-attempt';
+
+export function ExamQuestionNav({
+  questions,
+  currentIndex,
+  answeredIds,
+  disabled,
+  onJump,
+}: {
+  questions: CandidateQuestion[];
+  currentIndex: number;
+  answeredIds: Set<string>;
+  disabled: boolean;
+  onJump: (index: number) => void;
+}) {
+  return (
+    <Paper withBorder radius="md" p="sm">
+      <Text fz="xs" fw={600} c="dimmed" mb="xs" tt="uppercase">
+        Questions
+      </Text>
+      <SimpleGrid cols={5} spacing={6}>
+        {questions.map((q, index) => {
+          const answered = answeredIds.has(q.id);
+          const current = index === currentIndex;
+          return (
+            <UnstyledButton
+              key={q.id}
+              disabled={disabled}
+              onClick={() => onJump(index)}
+              style={{
+                height: 34,
+                borderRadius: 6,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 600,
+                fontSize: 13,
+                border: current ? '2px solid var(--mantine-color-blue-6)' : '1px solid var(--mantine-color-gray-4)',
+                background: answered
+                  ? 'var(--mantine-color-teal-1)'
+                  : 'var(--mantine-color-body)',
+                color: answered ? 'var(--mantine-color-teal-8)' : undefined,
+                opacity: disabled ? 0.5 : 1,
+              }}
+            >
+              {index + 1}
+            </UnstyledButton>
+          );
+        })}
+      </SimpleGrid>
+      <Text fz="xs" c="dimmed" mt="sm">
+        {answeredIds.size} of {questions.length} answered
+      </Text>
+    </Paper>
+  );
+}
diff --git a/apps/portal/src/app/features/exam-attempt/components/ExamTimer.tsx b/apps/portal/src/app/features/exam-attempt/components/ExamTimer.tsx
new file mode 100644
index 000000000..ed93de728
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/components/ExamTimer.tsx
@@ -0,0 +1,34 @@
+import { Badge, Group } from '@mantine/core';
+import { IconClock } from '@tabler/icons-react';
+
+function format(totalSeconds: number): string {
+  const s = Math.max(0, totalSeconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return h > 0 ? `${h}:${pad(m)}:${pad(sec)}` : `${pad(m)}:${pad(sec)}`;
+}
+
+/**
+ * Display only. `remainingSeconds` is a local countdown seeded once from the
+ * server's own clock (`AttemptSession.remainingSeconds`/`serverTime`) and
+ * ticked down client-side — the deadline it represents is enforced by the
+ * backend on every save/submit regardless of whether this number is right.
+ */
+export function ExamTimer({ remainingSeconds }: { remainingSeconds: number }) {
+  const low = remainingSeconds <= 300; // 5 minutes
+  return (
+    <Group gap={6}>
+      <Badge
+        size="lg"
+        variant="light"
+        color={low ? 'red' : 'blue'}
+        leftSection={<IconClock size={14} />}
+        ff="monospace"
+      >
+        {format(remainingSeconds)}
+      </Badge>
+    </Group>
+  );
+}
diff --git a/apps/portal/src/app/features/exam-attempt/hooks/useExamAttempt.ts b/apps/portal/src/app/features/exam-attempt/hooks/useExamAttempt.ts
new file mode 100644
index 000000000..e671dba76
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/hooks/useExamAttempt.ts
@@ -0,0 +1,286 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useApiMutation, useApiQuery, extractErrorMessage } from '@ema-platform/api';
+import { notify } from '@ema-platform/ui';
+import type {
+  AttemptSession,
+  CandidateAnswer,
+  ExamAttempt,
+  RegistrationWithExam,
+  SaveState,
+} from '../types/exam-attempt';
+
+const ESSAY_DEBOUNCE_MS = 1500;
+
+type ViewState = 'loading' | 'not-started' | 'taking' | 'completed' | 'error';
+
+type LocalAnswer = { selectedOptionId?: string | null; answerText?: string | null };
+
+/**
+ * All state and API orchestration for taking one exam. Kept out of the page
+ * component so the component tree stays about rendering, not about save
+ * timers and expiry races.
+ *
+ * Nothing here is a security boundary — every write still goes through the
+ * backend's own ownership + `applyExpiry()` checks on every call. This hook
+ * only decides what to show; a client that skipped straight to calling the
+ * API directly would hit exactly the same server-side rules.
+ */
+export function useExamAttempt(examId: string | undefined) {
+  const [session, setSession] = useState<AttemptSession | null>(null);
+  const [viewState, setViewState] = useState<ViewState>('loading');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, LocalAnswer>>({});
+  const [saveStates, setSaveStates] = useState<Record<string, SaveState>>({});
+  const [remainingSeconds, setRemainingSeconds] = useState(0);
+
+  const answersRef = useRef(answers);
+  answersRef.current = answers;
+  const debounceTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  const seeded = useRef(false);
+
+  const {
+    data: registrations,
+    isLoading: loadingRegistrations,
+  } = useApiQuery<RegistrationWithExam[]>({ url: '/exams/registrations/mine' });
+  const registration = registrations?.find((r) => r.exam?.id === examId);
+
+  const {
+    data: mineData,
+    isLoading: loadingMine,
+    isError: mineIsError,
+    error: mineError,
+    refetch: refetchMine,
+  } = useApiQuery<AttemptSession>(
+    { url: `/exam-attempts/mine/${examId}` },
+    { skip: !examId },
+  );
+
+  const [startTrigger, { isLoading: starting }] = useApiMutation<AttemptSession>();
+  const [answerTrigger] = useApiMutation<CandidateAnswer>();
+  const [submitTrigger, { isLoading: submitting }] = useApiMutation<ExamAttempt>();
+
+  const seedFrom = useCallback((data: AttemptSession) => {
+    setSession(data);
+    const map: Record<string, LocalAnswer> = {};
+    for (const a of data.answers) {
+      map[a.questionId] = { selectedOptionId: a.selectedOptionId, answerText: a.answerText };
+    }
+    setAnswers(map);
+    setRemainingSeconds(data.remainingSeconds);
+    setViewState(data.attempt.status === 'IN_PROGRESS' ? 'taking' : 'completed');
+  }, []);
+
+  // Seed once from the initial load — after that, local state (ticking
+  // timer, in-flight edits) is the source of truth, not this query.
+  useEffect(() => {
+    if (seeded.current) return;
+    if (loadingRegistrations || loadingMine) return;
+    seeded.current = true;
+
+    if (!registration) {
+      setViewState('error');
+      setErrorMessage('You are not registered for this examination.');
+      return;
+    }
+    if (mineData) {
+      seedFrom(mineData);
+      return;
+    }
+    if (mineIsError) {
+      const key = extractErrorMessage(mineError, '');
+      if (key === 'attempt_not_found') {
+        setViewState('not-started');
+        return;
+      }
+      setViewState('error');
+      setErrorMessage(extractErrorMessage(mineError, 'Could not load the exam.'));
+    }
+  }, [loadingRegistrations, loadingMine, registration, mineData, mineIsError, mineError, seedFrom]);
+
+  /** Authoritative resync — used after any write is refused as expired/submitted. */
+  const syncFromServer = useCallback(async () => {
+    const result = await refetchMine();
+    if (result.data) {
+      seedFrom(result.data as AttemptSession);
+    } else {
+      setViewState('error');
+      setErrorMessage(extractErrorMessage(result.error, 'The exam session ended.'));
+    }
+  }, [refetchMine, seedFrom]);
+
+  const persistAnswer = useCallback(
+    async (questionId: string, payload: LocalAnswer) => {
+      if (!session) return;
+      setSaveStates((s) => ({ ...s, [questionId]: 'saving' }));
+      try {
+        const saved = await answerTrigger({
+          url: `/exam-attempts/${session.attempt.id}/answers`,
+          method: 'POST',
+          body: { questionId, ...payload },
+        }).unwrap();
+        setAnswers((a) => ({
+          ...a,
+          [questionId]: { selectedOptionId: saved.selectedOptionId, answerText: saved.answerText },
+        }));
+        setSaveStates((s) => ({ ...s, [questionId]: 'saved' }));
+      } catch (error) {
+        setSaveStates((s) => ({ ...s, [questionId]: 'error' }));
+        const key = extractErrorMessage(error, '');
+        if (key === 'attempt_expired' || key === 'attempt_already_submitted') {
+          notify.error(
+            key === 'attempt_expired'
+              ? 'Time is up — this answer was not saved.'
+              : 'This attempt has already been submitted.',
+          );
+          syncFromServer();
+        }
+      }
+    },
+    [session, answerTrigger, syncFromServer],
+  );
+
+  const flush = useCallback(
+    (questionId: string) => {
+      const timer = debounceTimers.current[questionId];
+      if (!timer) return;
+      clearTimeout(timer);
+      delete debounceTimers.current[questionId];
+      const current = answersRef.current[questionId];
+      if (current) persistAnswer(questionId, current);
+    },
+    [persistAnswer],
+  );
+
+  const selectOption = useCallback(
+    (questionId: string, optionId: string) => {
+      setAnswers((a) => ({ ...a, [questionId]: { ...a[questionId], selectedOptionId: optionId } }));
+      persistAnswer(questionId, { selectedOptionId: optionId });
+    },
+    [persistAnswer],
+  );
+
+  const changeText = useCallback(
+    (questionId: string, text: string) => {
+      setAnswers((a) => ({ ...a, [questionId]: { ...a[questionId], answerText: text } }));
+      setSaveStates((s) => ({ ...s, [questionId]: 'idle' }));
+      clearTimeout(debounceTimers.current[questionId]);
+      debounceTimers.current[questionId] = setTimeout(() => {
+        delete debounceTimers.current[questionId];
+        persistAnswer(questionId, { answerText: text });
+      }, ESSAY_DEBOUNCE_MS);
+    },
+    [persistAnswer],
+  );
+
+  const goTo = useCallback(
+    (index: number) => {
+      const current = session?.questions[currentIndex];
+      if (current) flush(current.id);
+      setCurrentIndex(index);
+    },
+    [session, currentIndex, flush],
+  );
+
+  const retry = useCallback(
+    (questionId: string) => {
+      const current = answersRef.current[questionId];
+      if (current) persistAnswer(questionId, current);
+    },
+    [persistAnswer],
+  );
+
+  const start = useCallback(async () => {
+    if (!examId) return;
+    try {
+      const result = await startTrigger({
+        url: '/exam-attempts/start',
+        method: 'POST',
+        body: { examId },
+      }).unwrap();
+      seedFrom(result);
+    } catch (error) {
+      notify.error(extractErrorMessage(error, 'Could not start the exam.'));
+    }
+  }, [examId, startTrigger, seedFrom]);
+
+  const submit = useCallback(async () => {
+    if (!session) return;
+    const current = session.questions[currentIndex];
+    if (current) flush(current.id);
+    try {
+      const attempt = await submitTrigger({
+        url: `/exam-attempts/${session.attempt.id}/submit`,
+        method: 'POST',
+      }).unwrap();
+      setSession((s) => (s ? { ...s, attempt } : s));
+      setViewState('completed');
+    } catch (error) {
+      const key = extractErrorMessage(error, '');
+      if (key === 'attempt_expired' || key === 'attempt_already_submitted') {
+        syncFromServer();
+      } else {
+        notify.error(extractErrorMessage(error, 'Could not submit the exam.'));
+      }
+    }
+  }, [session, currentIndex, flush, submitTrigger, syncFromServer]);
+
+  /** Local countdown only — every write is still checked server-side regardless. */
+  useEffect(() => {
+    if (viewState !== 'taking') return;
+    const id = setInterval(() => {
+      setRemainingSeconds((s) => {
+        if (s <= 1) {
+          clearInterval(id);
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1000);
+    return () => clearInterval(id);
+  }, [viewState]);
+
+  // Time reaching zero locally: stop taking input, tell the server, then
+  // trust whatever it reports back over anything computed in the browser.
+  const timedOutRef = useRef(false);
+  useEffect(() => {
+    if (viewState !== 'taking' || remainingSeconds > 0 || timedOutRef.current) return;
+    timedOutRef.current = true;
+    notify.error("Time's up.");
+    // submit() itself resyncs from the server if this loses the race against
+    // applyExpiry() — either way the final state comes from the backend, not
+    // from this timer having reached zero.
+    submit();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [remainingSeconds, viewState]);
+
+  const answeredIds = useMemo(
+    () =>
+      new Set(
+        Object.entries(answers)
+          .filter(([, v]) => v.selectedOptionId || v.answerText?.trim())
+          .map(([id]) => id),
+      ),
+    [answers],
+  );
+
+  return {
+    viewState,
+    errorMessage,
+    registration,
+    session,
+    currentIndex,
+    answers,
+    saveStates,
+    answeredIds,
+    remainingSeconds,
+    starting,
+    submitting,
+    start,
+    selectOption,
+    changeText,
+    goTo,
+    retry,
+    submit,
+  };
+}
diff --git a/apps/portal/src/app/features/exam-attempt/pages/ExamAttemptPage/index.tsx b/apps/portal/src/app/features/exam-attempt/pages/ExamAttemptPage/index.tsx
new file mode 100644
index 000000000..e70143550
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/pages/ExamAttemptPage/index.tsx
@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Alert, Button, Center, Group, Loader, Modal, Stack, Text } from '@mantine/core';
+import { IconAlertCircle, IconSend } from '@tabler/icons-react';
+import { useLocalized } from '@ema-platform/api';
+import { useDateDisplayer } from '@ema-platform/shared';
+import { useExamAttempt } from '../../hooks/useExamAttempt';
+import { ExamInstructions } from '../../components/ExamInstructions';
+import { ExamTimer } from '../../components/ExamTimer';
+import { ExamQuestionNav } from '../../components/ExamQuestionNav';
+import { ExamQuestionDisplay } from '../../components/ExamQuestionDisplay';
+import { ExamCompletion } from '../../components/ExamCompletion';
+
+/**
+ * The candidate exam-taking screen (Phase 4). Route: `/exams/:examId/take`.
+ *
+ * All state/API orchestration lives in `useExamAttempt` — this component is
+ * the view: pick which of loading/not-started/taking/completed/error to
+ * render. Every write it triggers (start, save, submit) is re-checked by the
+ * backend regardless of what this screen currently shows; nothing here is
+ * the actual security boundary.
+ */
+export function ExamAttemptPage() {
+  const { examId } = useParams<{ examId: string }>();
+  const localized = useLocalized();
+  const showDate = useDateDisplayer();
+  const [confirmOpened, setConfirmOpened] = useState(false);
+
+  const {
+    viewState,
+    errorMessage,
+    registration,
+    session,
+    currentIndex,
+    answers,
+    saveStates,
+    answeredIds,
+    remainingSeconds,
+    starting,
+    submitting,
+    start,
+    selectOption,
+    changeText,
+    goTo,
+    retry,
+    submit,
+  } = useExamAttempt(examId);
+
+  if (viewState === 'loading') {
+    return (
+      <Center py="xl">
+        <Loader />
+      </Center>
+    );
+  }
+
+  if (viewState === 'error') {
+    return (
+      <Alert icon={<IconAlertCircle size={16} />} color="red" maw={600} mx="auto" mt="xl">
+        {errorMessage}
+      </Alert>
+    );
+  }
+
+  if (viewState === 'not-started') {
+    if (!registration) return null; // guarded by 'error' above, appeases TS
+    return (
+      <ExamInstructions
+        registration={registration}
+        localized={localized}
+        showDate={showDate}
+        starting={starting}
+        onStart={start}
+      />
+    );
+  }
+
+  if (viewState === 'completed' && session) {
+    return (
+      <ExamCompletion status={session.attempt.status} submittedAt={session.attempt.submittedAt} />
+    );
+  }
+
+  if (!session) return null; // 'taking' always has a session by construction
+
+  const question = session.questions[currentIndex];
+  const answer = answers[question.id];
+
+  return (
+    <Stack maw={1000} mx="auto" gap="md">
+      <Group justify="space-between" wrap="nowrap">
+        <Text fw={600}>{localized(registration?.exam?.title) || 'Examination in progress'}</Text>
+        <ExamTimer remainingSeconds={remainingSeconds} />
+      </Group>
+
+      <Group align="flex-start" gap="md" wrap="wrap-reverse">
+        <div style={{ flex: 1, minWidth: 280 }}>
+          <ExamQuestionDisplay
+            question={question}
+            index={currentIndex}
+            total={session.questions.length}
+            localized={localized}
+            selectedOptionId={answer?.selectedOptionId}
+            answerText={answer?.answerText}
+            saveState={saveStates[question.id] ?? 'idle'}
+            disabled={remainingSeconds <= 0}
+            onSelectOption={(optionId) => selectOption(question.id, optionId)}
+            onChangeText={(text) => changeText(question.id, text)}
+            onRetry={() => retry(question.id)}
+          />
+
+          <Group justify="space-between" mt="md">
+            <Button
+              variant="default"
+              disabled={currentIndex === 0}
+              onClick={() => goTo(currentIndex - 1)}
+            >
+              Previous
+            </Button>
+            {currentIndex < session.questions.length - 1 ? (
+              <Button onClick={() => goTo(currentIndex + 1)}>Next</Button>
+            ) : (
+              <Button
+                color="teal"
+                leftSection={<IconSend size={15} />}
+                onClick={() => setConfirmOpened(true)}
+              >
+                Submit exam
+              </Button>
+            )}
+          </Group>
+        </div>
+
+        <div style={{ width: 220, flexShrink: 0 }}>
+          <ExamQuestionNav
+            questions={session.questions}
+            currentIndex={currentIndex}
+            answeredIds={answeredIds}
+            disabled={remainingSeconds <= 0}
+            onJump={goTo}
+          />
+          <Button
+            fullWidth
+            mt="sm"
+            variant="light"
+            color="teal"
+            leftSection={<IconSend size={15} />}
+            onClick={() => setConfirmOpened(true)}
+          >
+            Submit exam
+          </Button>
+        </div>
+      </Group>
+
+      <Modal
+        opened={confirmOpened}
+        onClose={() => setConfirmOpened(false)}
+        title="Submit this exam?"
+        radius="lg"
+      >
+        <Stack>
+          <Text size="sm">
+            {answeredIds.size} of {session.questions.length} questions answered. Once submitted,
+            answers cannot be changed.
+          </Text>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setConfirmOpened(false)}>
+              Keep working
+            </Button>
+            <Button
+              color="teal"
+              loading={submitting}
+              onClick={async () => {
+                await submit();
+                setConfirmOpened(false);
+              }}
+            >
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}
+
+export default ExamAttemptPage;
diff --git a/apps/portal/src/app/features/exam-attempt/types/exam-attempt.ts b/apps/portal/src/app/features/exam-attempt/types/exam-attempt.ts
new file mode 100644
index 000000000..c11713ac5
--- /dev/null
+++ b/apps/portal/src/app/features/exam-attempt/types/exam-attempt.ts
@@ -0,0 +1,78 @@
+import type { Bilingual } from '@ema-platform/api';
+
+export type AttemptStatus = 'IN_PROGRESS' | 'SUBMITTED' | 'EXPIRED';
+export type QuestionForm = 'ESSAY' | 'CHOICE';
+
+export interface CandidateOption {
+  id: string;
+  text: Bilingual;
+  order: number;
+}
+
+/** Never carries a correct-answer flag — the API doesn't send one. */
+export interface CandidateQuestion {
+  id: string;
+  title: Bilingual;
+  form: QuestionForm;
+  points: number;
+  options: CandidateOption[];
+}
+
+export interface ExamAttempt {
+  id: string;
+  examId: string;
+  registrationId: string;
+  status: AttemptStatus;
+  startedAt: string;
+  expiresAt: string;
+  submittedAt: string | null;
+}
+
+export interface CandidateAnswer {
+  id: string;
+  attemptId: string;
+  questionId: string;
+  selectedOptionId: string | null;
+  answerText: string | null;
+}
+
+/** Response shape shared by POST /exam-attempts/start and GET .../mine/:examId. */
+export interface AttemptSession {
+  attempt: ExamAttempt;
+  questions: CandidateQuestion[];
+  answers: CandidateAnswer[];
+  serverTime: string;
+  remainingSeconds: number;
+}
+
+export type SaveState = 'idle' | 'saving' | 'saved' | 'error';
+
+export interface EstimatedTime {
+  days: number;
+  hours: number;
+  minutes: number;
+}
+
+/**
+ * The subset of `GET /exams/registrations/mine`'s response this feature
+ * reads — the endpoint returns the full raw exam/registration, this is
+ * just this feature's own narrow view of it (matches the sibling `exams`
+ * feature's pattern of each screen typing only what it uses).
+ */
+export interface RegistrationWithExam {
+  id: string;
+  admissionNumber: string;
+  kind: 'NEW' | 'RETAKE';
+  attemptNumber: number;
+  attendanceStatus: string;
+  exam?: {
+    id: string;
+    title: Bilingual;
+    direction?: Bilingual;
+    date: string;
+    venue: string | null;
+    status: string;
+    givenTime: EstimatedTime | null;
+    certification?: { name?: Bilingual };
+  };
+}
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
index f58e39a7f..760b814c1 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
@@ -1,5 +1,5 @@
 import { Badge, Button, Text } from '@mantine/core';
-import { IconFileText, IconGavel } from '@tabler/icons-react';
+import { IconFileText, IconGavel, IconPlayerPlay } from '@tabler/icons-react';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { Bilingual } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS } from '@ema-platform/auth';
@@ -19,12 +19,15 @@ const ATTENDANCE_COLOR: Record<AttendanceStatus, string> = {
   DISQUALIFIED: 'red',
 };
 
+const NOT_SITTING: AttendanceStatus[] = ['ABSENT', 'WITHDRAWN', 'DISQUALIFIED'];
+
 export function registrationColumns(deps: {
   /** Permission check from usePermissions() — hooks can't run in a cell. */
   can: (required?: string[]) => boolean;
   localized: (value: Bilingual | undefined) => string;
   showDate: (value: string | null | undefined) => string;
   onDownloadSlip: (registration: MyRegistration) => void;
+  onStartExam: (registration: MyRegistration) => void;
 }): AdvancedColumn<MyRegistration>[] {
   return [
     {
@@ -87,6 +90,25 @@ export function registrationColumns(deps: {
           </Button>
         ) : null,
     },
+    {
+      header: 'Exam',
+      cell: ({ row }) => {
+        const exam = row.original.exam;
+        const eligible =
+          exam?.status === 'ACTIVE' && !NOT_SITTING.includes(row.original.attendanceStatus);
+        if (!eligible || !deps.can([PORTAL_PERMISSIONS.APPLY_EXAM])) return null;
+        return (
+          <Button
+            size="compact-xs"
+            color="teal"
+            leftSection={<IconPlayerPlay size={13} />}
+            onClick={() => deps.onStartExam(row.original)}
+          >
+            Take exam
+          </Button>
+        );
+      },
+    },
   ];
 }
 
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
index b4cb0e0cf..5a5c081d9 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Badge,
   Button,
@@ -79,6 +80,7 @@ export interface MyAppeal {
  * when a mark looks wrong.
  */
 export function ExamsPage() {
+  const navigate = useNavigate();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [appealFor, setAppealFor] = useState<MyResult | null>(null);
@@ -243,6 +245,7 @@ export function ExamsPage() {
             localized,
             showDate,
             onDownloadSlip: downloadSlip,
+            onStartExam: (registration) => navigate(`/exams/${registration.exam?.id}/take`),
           })}
           data={pagedRegistrations.rows}
           itemCount={pagedRegistrations.itemCount}
diff --git a/apps/portal/src/app/router.tsx b/apps/portal/src/app/router.tsx
index e6ec53024..957d3e19d 100644
--- a/apps/portal/src/app/router.tsx
+++ b/apps/portal/src/app/router.tsx
@@ -32,6 +32,7 @@ import { SeafarerRegistrationPage } from "./features/seafarer/pages/SeafarerRegi
 import { MySeaRecordsPage } from "./features/seafarer/pages/MySeaRecordsPage";
 import { VerifyCertificatePage } from "./features/verify/pages/VerifyCertificatePage";
 import { ExamsPage } from "./features/exams/pages/ExamsPage";
+import { ExamAttemptPage } from "./features/exam-attempt/pages/ExamAttemptPage";
 
 // Phase 1 pages
 import { DocumentVaultPage } from "./features/documents/pages/DocumentVaultPage";
@@ -184,6 +185,14 @@ export const router = createBrowserRouter([
           </RequirePermission>
         ),
       },
+      {
+        path: "/exams/:examId/take",
+        element: (
+          <RequirePermission anyOf={[P.APPLY_EXAM, P.VIEW_OWN_EXAM]}>
+            <ExamAttemptPage />
+          </RequirePermission>
+        ),
+      },
       // The public-facing registry was a hardcoded mock and does not belong in
       // the applicant portal; officers browse seafarers in the backoffice.
       {

From 84ff644ebb83318ecd8d0d782e9583d3c8a4e2ac Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 08:26:21 +0000
Subject: [PATCH 04/16] fix(question): show both language fields for MCQ
 options

Options editor used a single toggle-based bilingual field (BilingualInput)
that swapped English/Amharic in place via a tiny, easy-to-miss button.
Authors were filling English only and never noticing Amharic was empty.

- QuestionOptionsEditor: show separate always-visible English/Amharic
  TextInputs per option instead of the toggle field.
- BilingualInput (shared): for other callers still using the toggle,
  add a tooltip and a red dot indicator when the hidden language is
  empty, so the gap is visible without switching.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/QuestionOptionsEditor.tsx      | 39 +++++----
 apps/backoffice/src/app/i18n/locales/am.ts    |  2 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  2 +
 libs/ui/src/lib/input/BilingualInput.tsx      | 80 ++++++++++++-------
 4 files changed, 81 insertions(+), 42 deletions(-)

diff --git a/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx b/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx
index 2daab604a..3a464cff2 100644
--- a/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx
+++ b/apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text } from '@mantine/core';
+import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { IconGripVertical, IconInfoCircle, IconPlus, IconTrash } from '@tabler/icons-react';
-import { BilingualInput, notify, useErrorHandler } from '@ema-platform/ui';
+import { notify, useErrorHandler } from '@ema-platform/ui';
 import type { BilingualValue } from '@ema-platform/ui';
 import {
   useGetQuestionWithOptionsQuery,
@@ -48,8 +48,10 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
     // pretending to know what they were.
   }, [question]);
 
-  const updateText = (index: number, text: BilingualValue) => {
-    setDraft((prev) => prev.map((o, i) => (i === index ? { ...o, text } : o)));
+  const updateField = (index: number, lang: keyof BilingualValue, value: string) => {
+    setDraft((prev) =>
+      prev.map((o, i) => (i === index ? { ...o, text: { ...o.text, [lang]: value } } : o)),
+    );
   };
 
   const toggleCorrect = (index: number) => {
@@ -93,26 +95,33 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
         {t('question.options.hint')}
       </Alert>
       {draft.map((option, index) => (
-        <Group key={index} gap="xs" wrap="nowrap" align="flex-end">
-          <IconGripVertical size={16} style={{ opacity: 0.4, marginBottom: 8 }} />
-          <BilingualInput
-            label={t('question.options.optionLabel', { number: index + 1 })}
-            value={option.text}
-            onChange={(v) => updateText(index, v)}
-            size="sm"
-            style={{ flex: 1 }}
-          />
+        <Group key={index} gap="xs" wrap="nowrap" align="center">
+          <IconGripVertical size={16} style={{ opacity: 0.4 }} />
+          <Stack gap={6} style={{ flex: 1 }}>
+            <TextInput
+              label={t('question.options.optionEn', { number: index + 1 })}
+              value={option.text.en}
+              onChange={(e) => updateField(index, 'en', e.currentTarget.value)}
+              size="sm"
+              required
+            />
+            <TextInput
+              label={t('question.options.optionAm', { number: index + 1 })}
+              value={option.text.am}
+              onChange={(e) => updateField(index, 'am', e.currentTarget.value)}
+              size="sm"
+              required
+            />
+          </Stack>
           <Checkbox
             label={t('question.options.correct')}
             checked={option.isCorrect}
             onChange={() => toggleCorrect(index)}
-            mb={4}
           />
           <ActionIcon
             variant="subtle"
             color="red"
             size="sm"
-            mb={4}
             disabled={draft.length <= 2}
             onClick={() => removeOption(index)}
           >
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 63d38a013..ed93619ff 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -742,6 +742,8 @@ export const am: Translations = {
       title: "የመልስ አማራጮች",
       hint: "ትክክለኛውን አማራጭ ምረጥ/ምረጪ። ማስቀመጥ መላውን የአማራጭ ስብስብ ይተካል።",
       optionLabel: "አማራጭ {{number}}",
+      optionEn: "አማራጭ {{number}} (እንግሊዝኛ)",
+      optionAm: "አማራጭ {{number}} (አማርኛ)",
       correct: "ትክክለኛ",
       addOption: "አማራጭ ጨምር",
       save: "አማራጮችን አስቀምጥ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 49a5a8b12..bce0a87d9 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -743,6 +743,8 @@ export const en = {
       title: 'Answer Options',
       hint: 'Mark every correct option. Saving replaces the entire option set.',
       optionLabel: 'Option {{number}}',
+      optionEn: 'Option {{number}} (English)',
+      optionAm: 'Option {{number}} (Amharic)',
       correct: 'Correct',
       addOption: 'Add option',
       save: 'Save options',
diff --git a/libs/ui/src/lib/input/BilingualInput.tsx b/libs/ui/src/lib/input/BilingualInput.tsx
index 3e0a9684d..9fb7c4836 100644
--- a/libs/ui/src/lib/input/BilingualInput.tsx
+++ b/libs/ui/src/lib/input/BilingualInput.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import {
+  Tooltip,
   TextInput,
   UnstyledButton,
   rem,
@@ -37,6 +38,9 @@ export function BilingualInput({
   ...rest
 }: BilingualInputProps) {
   const [lang, setLang] = useState<'en' | 'am'>('en');
+  const otherLang = lang === 'en' ? 'am' : 'en';
+  const otherLangName = otherLang === 'en' ? 'English' : 'Amharic';
+  const otherIsEmpty = !value[otherLang]?.trim();
 
   const toggle = () => setLang((l) => (l === 'en' ? 'am' : 'en'));
 
@@ -48,37 +52,59 @@ export function BilingualInput({
       value={value[lang]}
       onChange={(e) => onChange({ ...value, [lang]: e.currentTarget.value })}
       rightSection={
-        <UnstyledButton
-          onClick={toggle}
-          aria-label={`Switch to ${lang === 'en' ? 'Amharic' : 'English'}`}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: rem(28),
-            height: rem(20),
-            borderRadius: rem(4),
-            fontSize: rem(10),
-            fontWeight: 700,
-            letterSpacing: '0.05em',
-            background:
-              lang === 'en'
-                ? 'var(--mantine-color-blue-1)'
-                : 'var(--mantine-color-teal-1)',
-            color:
-              lang === 'en'
-                ? 'var(--mantine-color-blue-7)'
-                : 'var(--mantine-color-teal-7)',
-            cursor: 'pointer',
-            transition: 'background 150ms ease',
-          }}
+        <Tooltip
+          label={`Switch to ${otherLangName}${otherIsEmpty ? ' — empty' : ''}`}
+          withArrow
         >
-          {lang === 'en' ? 'EN' : 'AM'}
-        </UnstyledButton>
+          <UnstyledButton
+            onClick={toggle}
+            aria-label={`Switch to ${otherLangName}`}
+            style={{
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: rem(32),
+              height: rem(24),
+              borderRadius: rem(4),
+              fontSize: rem(11),
+              fontWeight: 700,
+              letterSpacing: '0.05em',
+              background:
+                lang === 'en'
+                  ? 'var(--mantine-color-blue-1)'
+                  : 'var(--mantine-color-teal-1)',
+              color:
+                lang === 'en'
+                  ? 'var(--mantine-color-blue-7)'
+                  : 'var(--mantine-color-teal-7)',
+              cursor: 'pointer',
+              transition: 'background 150ms ease',
+            }}
+          >
+            {lang === 'en' ? 'EN' : 'AM'}
+            {otherIsEmpty && (
+              <span
+                aria-hidden
+                title={`${otherLangName} text is missing`}
+                style={{
+                  position: 'absolute',
+                  top: -2,
+                  right: -2,
+                  width: rem(7),
+                  height: rem(7),
+                  borderRadius: '50%',
+                  background: 'var(--mantine-color-red-6)',
+                  border: '1px solid var(--mantine-color-body)',
+                }}
+              />
+            )}
+          </UnstyledButton>
+        </Tooltip>
       }
       styles={{
         input: {
-          paddingRight: rem(42),
+          paddingRight: rem(46),
         },
       }}
       {...rest}

From 4f692c6bcf8a3e36d8ac90b3ae771be01009af87 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 08:48:32 +0000
Subject: [PATCH 05/16] fix(exam): stop Create/Update Exam form from silently
 failing to submit

Three bugs compounded into a button that looked unwired:

- cuttingPoint carried a native HTML required attribute while sitting on
  the hidden Settings tab (Mantine keeps inactive tab panels mounted with
  display:none). The browser blocked form submission entirely, silently
  - no toast, no error, nothing. Replaced required with withAsterisk and
  moved validation into JS.
- Manual required-field validation never checked type/form/adminMethod/
  evalMethod/cuttingPoint at all, so even without the native block above
  a half-filled Settings tab would silently no-op. Validation now covers
  every required field on both tabs and switches to whichever tab has
  the problem.
- Filling only the English Direction field (leaving Amharic blank) passed
  frontend validation but the backend hard-rejects it, producing a 400
  with a confusing error. Frontend now requires both-or-neither, matching
  the same rule already applied to MCQ options.

Also translates the previously hardcoded validation message in both
locales.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/exam/pages/ExamPage/index.tsx    | 30 ++++++++++---------
 apps/backoffice/src/app/i18n/locales/am.ts    |  3 ++
 apps/backoffice/src/app/i18n/locales/en.ts    |  3 ++
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
index c34e5975b..036d5f946 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
@@ -77,21 +77,23 @@ function ExamForm({
     editing?.cuttingPoint ?? 0,
   );
   const [status, setStatus] = useState<string | null>(editing?.status ?? null);
+  const [activeTab, setActiveTab] = useState<string | null>("basic");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (
-      !certificationId ||
-      !titleEn ||
-      !titleAm ||
-      !date ||
-      !type ||
-      !form ||
-      !venue ||
-      !adminMethod ||
-      !evalMethod
-    ) {
-      notify.error("Please fill all required fields");
+    if (!certificationId || !titleEn || !titleAm || !date || !venue) {
+      setActiveTab("basic");
+      notify.error(t("exam.form.fillRequiredBasic"));
+      return;
+    }
+    if ((directionEn || directionAm) && !(directionEn && directionAm)) {
+      setActiveTab("basic");
+      notify.error(t("exam.form.directionBothLanguages"));
+      return;
+    }
+    if (!type || !form || !adminMethod || !evalMethod || !cuttingPoint) {
+      setActiveTab("settings");
+      notify.error(t("exam.form.fillRequiredSettings"));
       return;
     }
     onSubmit(
@@ -121,7 +123,7 @@ function ExamForm({
   return (
     <Modal opened onClose={onCancel} title={editing ? t("exam.update") : t("exam.add")} size="xl">
       <form onSubmit={handleSubmit}>
-        <Tabs defaultValue="basic" variant="outline" radius="md">
+        <Tabs value={activeTab} onChange={setActiveTab} variant="outline" radius="md">
           <Tabs.List mb="md">
             <Tabs.Tab value="basic" leftSection={<IconInfoCircle size={15} />}>
               {t("exam.form.basicInfo")}
@@ -296,7 +298,7 @@ function ExamForm({
                   onChange={(v) => setCuttingPoint(Number(v))}
                   min={0}
                   size="sm"
-                  required
+                  withAsterisk
                 />
               </SimpleGrid>
               {editing && (
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index ed93619ff..2d2405ea1 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -254,6 +254,9 @@ export const am: Translations = {
       random: "በዘፈቀደ",
       cuttingPoint: "የማለፊያ ነጥብ",
       cuttingPointPlaceholder: "ለማለፍ ዝቅተኛ ነጥብ",
+      fillRequiredBasic: "በመሠረታዊ መረጃ ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ።",
+      fillRequiredSettings: "በቅንብሮች ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ — ዓይነት፣ ቅጽ፣ የአስተዳደር ዘዴ፣ የግምገማ ዘዴ እና የማለፊያ ነጥብ።",
+      directionBothLanguages: "መመሪያ በሁለቱም እንግሊዝኛ እና አማርኛ ጽሑፍ ያስፈልገዋል፣ ወይም ሁለቱንም ባዶ ይተዉ።",
       status: "ሁኔታ",
       statusPlaceholder: "የፈተና ሁኔታ",
       pending: "በመጠባበቅ ላይ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index bce0a87d9..adacf10a8 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -251,6 +251,9 @@ export const en = {
       random: 'Random',
       cuttingPoint: 'Cutting Point (Pass Mark)',
       cuttingPointPlaceholder: 'Minimum score to pass',
+      fillRequiredBasic: 'Please fill all required fields in Basic Info.',
+      fillRequiredSettings: 'Please fill all required fields in Settings — type, form, administration method, evaluation method, and cutting point.',
+      directionBothLanguages: 'Direction needs text in both English and Amharic, or leave both empty.',
       status: 'Status',
       statusPlaceholder: 'Exam status',
       pending: 'Pending',

From 4a7d36369f17931ccf895d244e9e8e0648a43bc0 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 09:43:09 +0000
Subject: [PATCH 06/16] fix(exam): print real MCQ options,
 evaluation-method-aware cutting point check
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Print showed blank A/B/C/D fill-in lines for every CHOICE question instead
of the real options — the detail page never fetched option data at all
(GET /exams/:id?i=questions, no nested options), and the print template
hardcoded the blanks regardless. Now requests
?i=questions,questions.options and prints the real option text, falling
back to blank lines only when a question genuinely has none on record.

Also fixed the print-time cutting-point guard: it compared raw point sum
to cutting point regardless of evaluationMethod, wrongly blocking valid
low-point-sum PERCENTAGE papers from printing. Now branches the same way
RecordResultModal's grading preview already does, and surfaces the
matching backend validation error (paper_cannot_reach_cutting_point) added
server-side for the same reason.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/features/exam/api/exam-api.ts     |  4 +-
 .../features/exam/pages/ExamDetailPage.tsx    | 56 ++++++++++++++++---
 .../src/app/features/exam/types/exam.ts       |  8 +++
 apps/backoffice/src/app/i18n/locales/am.ts    |  2 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  2 +
 5 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/api/exam-api.ts b/apps/backoffice/src/app/features/exam/api/exam-api.ts
index 83dbd473b..78f3c74ea 100644
--- a/apps/backoffice/src/app/features/exam/api/exam-api.ts
+++ b/apps/backoffice/src/app/features/exam/api/exam-api.ts
@@ -20,7 +20,9 @@ const examApi = baseApi.injectEndpoints({
       providesTags: ['Api'],
     }),
     getExam: builder.query<Exam, string>({
-      query: (id) => `/exams/${id}?i=questions`,
+      // Nested relation so CHOICE questions carry their options here too —
+      // needed to print real answer choices instead of blank A/B/C/D lines.
+      query: (id) => `/exams/${id}?i=questions,questions.options`,
       providesTags: ['Api'],
     }),
     createExam: builder.mutation<Exam, CreateExamPayload>({
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
index e49efe907..0bbb98aa8 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
@@ -174,7 +174,12 @@ export function ExamDetailPage() {
       notify.error(
         key.startsWith('insufficient_approved_questions')
           ? `${t('exam.notEnoughApproved')} (${key.split(':')[1] ?? ''})`
-          : key,
+          : key.startsWith('paper_cannot_reach_cutting_point')
+            ? t('exam.cannotReachCuttingPoint', {
+                max: key.split(':')[1]?.split('/')[0] ?? '',
+                cuttingPoint: key.split(':')[1]?.split('/')[1] ?? '',
+              })
+            : key,
       );
     }
   };
@@ -190,18 +195,35 @@ export function ExamDetailPage() {
       notify.error(
         key.startsWith('question_not_approved')
           ? t('question.qc.onlyApprovedUsable')
-          : key,
+          : key.startsWith('paper_cannot_reach_cutting_point')
+            ? t('exam.cannotReachCuttingPoint', {
+                max: key.split(':')[1]?.split('/')[0] ?? '',
+                cuttingPoint: key.split(':')[1]?.split('/')[1] ?? '',
+              })
+            : key,
       );
     }
   };
   const handlePrint = async () => {
-    const total = (exam.questions ?? []).reduce(
-      (s, q) => s + Number(q.points),
-      0,
-    );
-    if (total < Number(exam.cuttingPoint)) {
+    // The reachable max depends on the evaluation method, not the raw point
+    // sum — mirrors RecordResultModal's grading math so "can this paper pass"
+    // means the same thing here as it does at marking time. Cutting point can
+    // be raised after the paper was assembled (edit modal, no re-check on
+    // save), so this still needs to run even though assignment now enforces
+    // it too.
+    const questions = exam.questions ?? [];
+    const total = questions.reduce((s, q) => s + Number(q.points), 0);
+    const reachableMax =
+      exam.evaluationMethod === 'AVERAGE'
+        ? questions.length
+          ? total / questions.length
+          : 0
+        : exam.evaluationMethod === 'PERCENTAGE'
+          ? 100
+          : total;
+    if (reachableMax < Number(exam.cuttingPoint)) {
       notify.error(
-        `Total question marks (${total}) is less than the passing mark (${exam.cuttingPoint}). Add more questions or adjust the cutting point before printing.`,
+        `This paper cannot reach the passing mark under its ${EVAL_LABEL[exam.evaluationMethod] ?? exam.evaluationMethod} evaluation (max ${reachableMax}, pass mark ${exam.cuttingPoint}). Add more questions or adjust the cutting point before printing.`,
       );
       return;
     }
@@ -235,7 +257,23 @@ export function ExamDetailPage() {
         <p style="margin: 0 0 4px 0; font-size: 14px; line-height: 1.5;">${titleStr}</p>
         ${descStr ? `<p style="margin: 0 0 8px 0; font-size: 12px; color: #555; line-height: 1.4;">${descStr}</p>` : ""}
         ${q.form === "ESSAY" ? '<div style="border-bottom: 1px dashed #ccc; height: 80px; margin-bottom: 12px;"></div>'.repeat(3) : ""}
-        ${q.form === "CHOICE" ? ["A. ______", "B. ______", "C. ______", "D. ______"].map((l) => `<p style="margin: 4px 0; font-size: 13px;">${l}</p>`).join("") : ""}
+        ${
+          q.form === "CHOICE"
+            ? q.options && q.options.length
+              ? q.options
+                  .slice()
+                  .sort((a, b) => a.order - b.order)
+                  .map(
+                    (o, oi) =>
+                      `<p style="margin: 4px 0; font-size: 13px;">${String.fromCharCode(65 + oi)}. ${o.text[locale] || o.text.en}</p>`,
+                  )
+                  .join("")
+              // No options on record (legacy question, or options relation
+              // wasn't loaded) — fall back to blank lines rather than
+              // printing nothing.
+              : ["A. ______", "B. ______", "C. ______", "D. ______"].map((l) => `<p style="margin: 4px 0; font-size: 13px;">${l}</p>`).join("")
+            : ""
+        }
       </div>`;
       })
       .join("");
diff --git a/apps/backoffice/src/app/features/exam/types/exam.ts b/apps/backoffice/src/app/features/exam/types/exam.ts
index d1a3d3587..cb42676fe 100644
--- a/apps/backoffice/src/app/features/exam/types/exam.ts
+++ b/apps/backoffice/src/app/features/exam/types/exam.ts
@@ -15,11 +15,19 @@ export type ExamStatus =
   | "POSTPONED"
   | "PUBLISHED";
 
+/** Only populated when the exam is fetched with `?i=questions,questions.options`. */
+export interface QuestionOptionBrief {
+  id: string;
+  text: LocalePair;
+  order: number;
+}
+
 export interface QuestionBrief {
   id: string;
   title: LocalePair;
   form: QuestionForm;
   points: number;
+  options?: QuestionOptionBrief[];
 }
 
 export interface Exam {
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 2d2405ea1..9a6627c66 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -365,6 +365,8 @@ export const am: Translations = {
     randomSelected: "{{count}} የጸደቁ ጥያቄዎች ተመርጠዋል",
     randomError: "ጥያቄዎችን መምረጥ አልተቻለም",
     notEnoughApproved: "ለዚህ ትምህርት በቂ የጸደቁ ጥያቄዎች የሉም።",
+    cannotReachCuttingPoint:
+      "ይህ ወረቀት የማለፊያ ነጥቡን ሊደርስ አይችልም (ከፍተኛ {{max}}፣ የማለፊያ ነጥብ {{cuttingPoint}})። ተጨማሪ ወይም ከፍ ያለ ነጥብ ያላቸው ጥያቄዎችን ጨምር፣ ወይም የማለፊያ ነጥቡን ቀንስ።",
   },
 
   country: {
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index adacf10a8..9169a464b 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -362,6 +362,8 @@ export const en = {
     randomError: 'Could not draw questions',
     notEnoughApproved:
       'Not enough approved questions in the bank for this subject.',
+    cannotReachCuttingPoint:
+      'This paper cannot reach the passing mark (max {{max}}, pass mark {{cuttingPoint}}). Add more/higher-point questions, or lower the cutting point.',
   },
 
   country: {

From 83d309248d1faea9fd7d41c249bd20d4e15581d1 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 12:00:45 +0000
Subject: [PATCH 07/16] feat(exam): regrade action + stop inviting a re-take on
 a finished exam
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes surfaced by actual candidate-flow testing:

- Portal 'My registrations' always showed 'Take exam' regardless of whether
  the candidate had already finished — clicking it just hit
  attempt_already_submitted server-side. The registrations/mine response
  now carries the attempt's status; the row shows a Completed/Time expired
  badge once finished, or 'Resume exam' while still in progress, and only
  invites a fresh start when there's genuinely nothing yet.
- Backoffice candidates panel: a Regrade button next to a SUBMITTED/EXPIRED
  sitting, calling the new POST /exam-attempts/:id/regrade — the officer's
  path to the same staff-triggered regrade, no SQL needed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/features/exam/api/exam-api.ts     | 10 +++
 .../ExamCandidatesPanel/columns.tsx           | 62 ++++++++++++++-----
 .../components/ExamCandidatesPanel/index.tsx  | 28 ++++++++-
 .../src/app/features/exam/types/exam.ts       |  6 ++
 apps/backoffice/src/app/i18n/locales/am.ts    |  4 ++
 apps/backoffice/src/app/i18n/locales/en.ts    |  4 ++
 .../exams/pages/ExamsPage/columns.tsx         | 19 +++++-
 .../features/exams/pages/ExamsPage/index.tsx  |  2 +
 8 files changed, 116 insertions(+), 19 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/api/exam-api.ts b/apps/backoffice/src/app/features/exam/api/exam-api.ts
index 78f3c74ea..d313a38ac 100644
--- a/apps/backoffice/src/app/features/exam/api/exam-api.ts
+++ b/apps/backoffice/src/app/features/exam/api/exam-api.ts
@@ -11,6 +11,7 @@ import type {
   ExamIncident,
   CreateIncidentPayload,
   ResolveIncidentPayload,
+  RegradeOutcome,
 } from '../types/exam';
 
 const examApi = baseApi.injectEndpoints({
@@ -92,6 +93,14 @@ const examApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ['Api'],
     }),
+    /** Staff-triggered re-run of auto-grading for one finalized attempt. */
+    regradeAttempt: builder.mutation<RegradeOutcome, string>({
+      query: (attemptId) => ({
+        url: `/exam-attempts/${attemptId}/regrade`,
+        method: 'POST',
+      }),
+      invalidatesTags: ['Api'],
+    }),
   }),
   overrideExisting: false,
 });
@@ -109,4 +118,5 @@ export const {
   useGetExamIncidentsQuery,
   useRecordIncidentMutation,
   useResolveIncidentMutation,
+  useRegradeAttemptMutation,
 } = examApi;
diff --git a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
index 421a39c02..7501723ef 100644
--- a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
+++ b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
@@ -1,5 +1,5 @@
 import { Badge, Button, Text } from '@mantine/core';
-import { IconUserCheck } from '@tabler/icons-react';
+import { IconRefresh, IconUserCheck } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -25,7 +25,11 @@ export const candidateName = (registration: ExamRegistration) =>
 
 export function examCandidateColumns(
   t: TFunction,
-  handlers: { onRecord: (registration: ExamRegistration) => void },
+  handlers: {
+    onRecord: (registration: ExamRegistration) => void;
+    onRegrade: (registration: ExamRegistration) => void;
+    regrading?: string | null;
+  },
 ): AdvancedColumn<ExamRegistration>[] {
   return [
     {
@@ -78,21 +82,45 @@ export function examCandidateColumns(
       header: '',
       label: t('exam.candidates.record'),
       align: 'right',
-      cell: ({ row }) => (
-        <RequirePermission
-          anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_ATTENDANCE]}
-          hideOnly
-        >
-          <Button
-            size="compact-xs"
-            variant="light"
-            leftSection={<IconUserCheck size={12} />}
-            onClick={() => handlers.onRecord(row.original)}
-          >
-            {t('exam.candidates.record')}
-          </Button>
-        </RequirePermission>
-      ),
+      cell: ({ row }) => {
+        const attemptStatus = row.original.attempt?.status;
+        const canRegrade = attemptStatus === 'SUBMITTED' || attemptStatus === 'EXPIRED';
+        return (
+          <>
+            <RequirePermission
+              anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_ATTENDANCE]}
+              hideOnly
+            >
+              <Button
+                size="compact-xs"
+                variant="light"
+                leftSection={<IconUserCheck size={12} />}
+                onClick={() => handlers.onRecord(row.original)}
+                mr={canRegrade ? 6 : 0}
+              >
+                {t('exam.candidates.record')}
+              </Button>
+            </RequirePermission>
+            {canRegrade && (
+              <RequirePermission
+                anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_RESULT]}
+                hideOnly
+              >
+                <Button
+                  size="compact-xs"
+                  variant="light"
+                  color="grape"
+                  leftSection={<IconRefresh size={12} />}
+                  loading={handlers.regrading === row.original.attempt?.id}
+                  onClick={() => handlers.onRegrade(row.original)}
+                >
+                  {t('exam.candidates.regrade')}
+                </Button>
+              </RequirePermission>
+            )}
+          </>
+        );
+      },
     },
   ];
 }
diff --git a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/index.tsx b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/index.tsx
index e02dad17c..4c11d1b7b 100644
--- a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/index.tsx
+++ b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/index.tsx
@@ -18,6 +18,7 @@ import { extractErrorMessage } from '@ema-platform/api';
 import {
   useGetExamRegistrationsQuery,
   useRecordAttendanceMutation,
+  useRegradeAttemptMutation,
 } from '../../api/exam-api';
 import type { AttendanceStatus, ExamRegistration } from '../../types/exam';
 import { candidateName, examCandidateColumns } from './columns';
@@ -43,11 +44,32 @@ export function ExamCandidatesPanel({ examId }: { examId: string }) {
   const { t } = useTranslation();
   const { data: registrations, isError, refetch } = useGetExamRegistrationsQuery(examId);
   const [recordAttendance, { isLoading }] = useRecordAttendanceMutation();
+  const [regradeAttempt] = useRegradeAttemptMutation();
+  const [regrading, setRegrading] = useState<string | null>(null);
   const [target, setTarget] = useState<ExamRegistration | null>(null);
   const [status, setStatus] = useState<AttendanceStatus>('PRESENT');
   const [remark, setRemark] = useState('');
   const table = useServerTable();
 
+  const regrade = async (registration: ExamRegistration) => {
+    const attemptId = registration.attempt?.id;
+    if (!attemptId) return;
+    setRegrading(attemptId);
+    try {
+      const outcome = await regradeAttempt(attemptId).unwrap();
+      if (outcome.graded) {
+        notify.success(t('exam.candidates.regraded'));
+      } else {
+        notify.error(t('exam.candidates.regradeNotEligible', { reason: outcome.reason }));
+      }
+      refetch();
+    } catch (error) {
+      notify.error(extractErrorMessage(error, t('exam.candidates.regradeError')));
+    } finally {
+      setRegrading(null);
+    }
+  };
+
   const startRecording = (registration: ExamRegistration) => {
     setTarget(registration);
     setStatus(
@@ -96,7 +118,11 @@ export function ExamCandidatesPanel({ examId }: { examId: string }) {
       ) : (
         <AdvancedTable
           tableName={t('exam.candidates.section')}
-          columns={examCandidateColumns(t, { onRecord: startRecording })}
+          columns={examCandidateColumns(t, {
+            onRecord: startRecording,
+            onRegrade: regrade,
+            regrading,
+          })}
           data={paged.rows}
           itemCount={paged.itemCount}
           pageIndex={paged.pageIndex}
diff --git a/apps/backoffice/src/app/features/exam/types/exam.ts b/apps/backoffice/src/app/features/exam/types/exam.ts
index cb42676fe..1c25cfd7d 100644
--- a/apps/backoffice/src/app/features/exam/types/exam.ts
+++ b/apps/backoffice/src/app/features/exam/types/exam.ts
@@ -126,8 +126,14 @@ export interface ExamRegistration {
     lastName: string | null;
     seafarerNumber: string | null;
   };
+  /** The candidate's online sitting, when one has been started. */
+  attempt?: { id: string; status: 'IN_PROGRESS' | 'SUBMITTED' | 'EXPIRED' } | null;
 }
 
+export type RegradeOutcome =
+  | { graded: true; resultId: string }
+  | { graded: false; reason: string };
+
 export interface RecordAttendancePayload {
   registrationId: string;
   status: AttendanceStatus;
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 1a0d06e5c..3ee42dd5a 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -325,6 +325,10 @@ export const am: Translations = {
       retake: "ድጋሚ {{n}}",
       firstSitting: "የመጀመሪያ ሙከራ",
       remarkRequired: "ለመውጣት ወይም ለመታገድ ምክንያት ያስፈልጋል።",
+      regrade: "እንደገና ደረጃ ስጥ",
+      regraded: "ውጤት ከተመዘገበው ሙከራ ተፈጥሯል።",
+      regradeNotEligible: "በራስ-ሰር ሊገመገም አይችልም፦ {{reason}}። ውጤት መዝግብ ተጠቀም።",
+      regradeError: "ይህን ሙከራ እንደገና መገምገም አልተቻለም።",
     },
     attendance: {
       REGISTERED: "አልተጠራም",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 5d5a7d2f2..04baaf1d7 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -322,6 +322,10 @@ export const en = {
       retake: 'Retake {{n}}',
       firstSitting: 'First sitting',
       remarkRequired: 'A reason is required for a withdrawal or a disqualification.',
+      regrade: 'Regrade',
+      regraded: 'Result created from the graded attempt.',
+      regradeNotEligible: 'Not auto-gradable: {{reason}}. Use Record Result instead.',
+      regradeError: 'Could not regrade this attempt.',
     },
     attendance: {
       REGISTERED: 'Not called',
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
index 760b814c1..d46d073f8 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
@@ -94,6 +94,23 @@ export function registrationColumns(deps: {
       header: 'Exam',
       cell: ({ row }) => {
         const exam = row.original.exam;
+        const attemptStatus = row.original.attempt?.status;
+        // Already finished — no restart, no more room for "Take exam" to
+        // invite a click that the backend would just refuse.
+        if (attemptStatus === 'SUBMITTED') {
+          return (
+            <Badge size="sm" variant="light" color="teal">
+              Completed
+            </Badge>
+          );
+        }
+        if (attemptStatus === 'EXPIRED') {
+          return (
+            <Badge size="sm" variant="light" color="red">
+              Time expired
+            </Badge>
+          );
+        }
         const eligible =
           exam?.status === 'ACTIVE' && !NOT_SITTING.includes(row.original.attendanceStatus);
         if (!eligible || !deps.can([PORTAL_PERMISSIONS.APPLY_EXAM])) return null;
@@ -104,7 +121,7 @@ export function registrationColumns(deps: {
             leftSection={<IconPlayerPlay size={13} />}
             onClick={() => deps.onStartExam(row.original)}
           >
-            Take exam
+            {attemptStatus === 'IN_PROGRESS' ? 'Resume exam' : 'Take exam'}
           </Button>
         );
       },
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
index 5a5c081d9..067012ad5 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
@@ -54,6 +54,8 @@ export interface MyRegistration {
   attemptNumber: number;
   attendanceStatus: AttendanceStatus;
   exam?: OpenExam;
+  /** The candidate's online sitting, when one has been started. */
+  attempt?: { status: 'IN_PROGRESS' | 'SUBMITTED' | 'EXPIRED' } | null;
 }
 
 export interface MyResult {

From 8239d7ebe230b378954c142dcabc045870aa9a0b Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 12:20:21 +0000
Subject: [PATCH 08/16] feat(exam,result): quick status action, per-row publish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two UX gaps found in testing:

- Exams list: changing status (e.g. PENDING -> ACTIVE) required opening the
  full Edit modal for a one-field change. Added a status menu (teal toggle
  icon) directly in the row actions, calling PUT /exams/:id with just
  {status} — the backend DTO was already PartialType, nothing to change
  there.
- Exam Results: publishing required first picking the exam in a page-level
  filter to un-grey the header Publish button — not discoverable, and an
  extra step disconnected from the row you actually care about. Added a
  Publish action directly on any APPROVED result's row, confirm-gated since
  it publishes every approved result for that exam (not just the one row)
  and notifies every candidate. The header filter+button still works too,
  for publishing a batch at once.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/exam/pages/ExamPage/actions.tsx  | 41 +++++++++++++++++--
 .../features/exam/pages/ExamPage/index.tsx    | 15 +++++++
 .../result/pages/ResultPage/actions.tsx       | 16 +++++++-
 .../result/pages/ResultPage/index.tsx         | 30 ++++++++++++++
 apps/backoffice/src/app/i18n/locales/am.ts    |  2 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  2 +
 6 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
index ba902be9d..1b62e4283 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
@@ -1,9 +1,18 @@
-import { ActionIcon, Group } from "@mantine/core";
-import { IconEdit, IconTrash, IconDetails } from "@tabler/icons-react";
+import { ActionIcon, Group, Menu } from "@mantine/core";
+import { IconEdit, IconTrash, IconDetails, IconToggleRight } from "@tabler/icons-react";
 import type { TFunction } from "i18next";
 import type { AdvancedColumn } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
-import type { Exam } from "../../types/exam";
+import type { Exam, ExamStatus } from "../../types/exam";
+
+const STATUSES: ExamStatus[] = [
+  "PENDING",
+  "ACTIVE",
+  "COMPLETED",
+  "CANCELLED",
+  "POSTPONED",
+  "PUBLISHED",
+];
 
 export function examActionsColumn(
   t: TFunction,
@@ -11,6 +20,8 @@ export function examActionsColumn(
     onEdit: (exam: Exam) => void;
     onDelete: (exam: Exam) => void;
     onDetails: (exam: Exam) => void;
+    onChangeStatus: (exam: Exam, status: ExamStatus) => void;
+    changingStatusId?: string | null;
   },
 ): AdvancedColumn<Exam> {
   return {
@@ -19,6 +30,30 @@ export function examActionsColumn(
     cell: ({ row }) => (
       <Group gap="xs">
         <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
+          <Menu shadow="md" width={160} position="bottom-end">
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                color="teal"
+                size="sm"
+                loading={handlers.changingStatusId === row.original.id}
+              >
+                <IconToggleRight size={14} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Label>{t("exam.form.status")}</Menu.Label>
+              {STATUSES.map((status) => (
+                <Menu.Item
+                  key={status}
+                  disabled={status === row.original.status}
+                  onClick={() => handlers.onChangeStatus(row.original, status)}
+                >
+                  {t(`exam.form.${status.toLowerCase()}`)}
+                </Menu.Item>
+              ))}
+            </Menu.Dropdown>
+          </Menu>
           <ActionIcon
             variant="subtle"
             color="blue"
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
index 036d5f946..ed58a449c 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
@@ -355,6 +355,7 @@ export function ExamPage() {
   const [deleteTarget, setDeleteTarget] = useState<Exam | null>(null);
   const [deleteOpened, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
+  const [changingStatusId, setChangingStatusId] = useState<string | null>(null);
 
   const certOptions = certifications
     .filter((c) => c.isActive)
@@ -405,6 +406,18 @@ export function ExamPage() {
     }
   };
 
+  const handleChangeStatus = async (exam: Exam, status: Exam["status"]) => {
+    setChangingStatusId(exam.id);
+    try {
+      await updateExam({ id: exam.id, status }).unwrap();
+      notify.success(t("exam.updated"));
+    } catch (e) {
+      handleError(e);
+    } finally {
+      setChangingStatusId(null);
+    }
+  };
+
   const handleDelete = async () => {
     if (!deleteTarget) return;
     try {
@@ -438,6 +451,8 @@ export function ExamPage() {
         openDelete();
       },
       onDetails: (exam) => navigate(`/exams/${exam.id}`),
+      onChangeStatus: handleChangeStatus,
+      changingStatusId,
     }),
   ];
 
diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
index d24ad573f..335c964cc 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
@@ -1,5 +1,5 @@
 import { Button, Group } from '@mantine/core';
-import { IconEye, IconTrash } from '@tabler/icons-react';
+import { IconEye, IconSend, IconTrash } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -13,6 +13,7 @@ export function resultActionsColumn(
     onQc: (result: Result, action: QcAction) => void;
     onViewDetail: (result: Result) => void;
     onDelete: (result: Result) => void;
+    onPublish: (result: Result) => void;
   },
 ): AdvancedColumn<Result> {
   return {
@@ -49,6 +50,19 @@ export function resultActionsColumn(
               </Button>
             </RequirePermission>
           )}
+          {r.reviewStatus === 'APPROVED' && (
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.PUBLISH_EXAM_RESULT]} hideOnly>
+              <Button
+                size="compact-xs"
+                variant="light"
+                color="teal"
+                leftSection={<IconSend size={13} />}
+                onClick={() => handlers.onPublish(r)}
+              >
+                {t('result.review.publish')}
+              </Button>
+            </RequirePermission>
+          )}
           <Button size="xs" variant="subtle" leftSection={<IconEye size={13} />} onClick={() => handlers.onViewDetail(r)}>
             {t('result.action.viewEdit')}
           </Button>
diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
index b9acb34ca..422555080 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx
@@ -126,6 +126,8 @@ export function ResultPage() {
   const [detailOpened, { open: openDetail, close: closeDetail }] = useDisclosure(false);
   const [deleteTarget, setDeleteTarget] = useState<Result | null>(null);
   const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+  const [publishTarget, setPublishTarget] = useState<Result | null>(null);
+  const [publishOpened, { open: openPublish, close: closePublish }] = useDisclosure(false);
   const [detailRemark, setDetailRemark] = useState<BilingualValue>({ en: '', am: '' });
   const [detailBreakdowns, setDetailBreakdowns] = useState<ResultBreakdown[]>([]);
   const [detailSaving, setDetailSaving] = useState(false);
@@ -262,6 +264,19 @@ export function ResultPage() {
     }
   };
 
+  /** Same publish call as handlePublish, but scoped to one row's exam — no page filter needed. */
+  const handleConfirmPublish = async () => {
+    if (!publishTarget) return;
+    try {
+      const outcome = await publishResults(publishTarget.examId).unwrap();
+      notify.success(t('result.review.publishedCount', outcome));
+      closePublish();
+      setPublishTarget(null);
+    } catch (error) {
+      notify.error(extractErrorMessage(error, t('result.review.error')));
+    }
+  };
+
   const handleDetailClose = () => {
     closeDetail();
     setDetailBreakdowns([]);
@@ -288,6 +303,7 @@ export function ResultPage() {
       onQc: openQc,
       onViewDetail: viewDetail,
       onDelete: (r) => { setDeleteTarget(r); openDelete(); },
+      onPublish: (r) => { setPublishTarget(r); openPublish(); },
     }),
   ];
 
@@ -584,6 +600,20 @@ export function ResultPage() {
         </ModalFooter>
       </Modal>
 
+      <Modal opened={publishOpened} onClose={closePublish} title={t('result.review.publish')} size="sm">
+        <Text mb="md">
+          {t('result.review.publishConfirmText', {
+            exam: publishTarget ? getExamTitle(publishTarget.examId) : '',
+          })}
+        </Text>
+        <ModalFooter>
+          <Button variant="default" onClick={closePublish} size="sm">{t('result.cancel')}</Button>
+          <Button color="teal" loading={isPublishing} onClick={handleConfirmPublish} size="sm">
+            {t('result.review.publish')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+
       {/* Choose exam, then record */}
       <Modal opened={pickerOpened} onClose={closePicker} title={t('result.record')} size="md" radius="lg">
         <Stack gap="md">
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 3ee42dd5a..b30de16b1 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -660,6 +660,8 @@ export const am: Translations = {
       returned: "ውጤት ወደ ፈታኙ ተመልሷል",
       publishedCount: "{{published}} ውጤቶች ወጥተዋል፤ {{skipped}} ተዘለዋል።",
       publishNeedsExam: "ውጤቶችን ለማውጣት መጀመሪያ በፈተና ያጣሩ።",
+      publishConfirmText:
+        "ይህ ለ{{exam}} የጸደቁትን ሁሉንም ውጤቶች ያወጣል — ይህን ብቻ አይደለም — እና እያንዳንዱን ተፈታኝ ያሳውቃል። ይቀጥል?",
       lockedAfterApproval: "ይህ ውጤት ጸድቋል፤ ማስተካከል አይቻልም። መጀመሪያ ወደ ፈታኙ ይመልሱት።",
       originalScore: "የፈታኙ ጠቅላላ",
       derivedStatus: "ውጤት (ከማለፊያ ነጥብ የተገኘ)",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 04baaf1d7..450768341 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -660,6 +660,8 @@ export const en = {
       returned: 'Result returned to the examiner',
       publishedCount: 'Published {{published}} result(s); {{skipped}} skipped.',
       publishNeedsExam: 'Filter by an exam first to publish its results.',
+      publishConfirmText:
+        'This publishes every approved result for {{exam}} — not just this one — and notifies each candidate. Continue?',
       lockedAfterApproval:
         'This result is approved and can no longer be edited. Return it to the examiner first.',
       originalScore: 'Examiner total',

From f0443b84b16281d98ad3cd125e1a1b7681bd1111 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Mon, 17 Aug 2026 17:20:16 +0000
Subject: [PATCH 09/16] fix(exam): lock the exam form to CHOICE when
 administration is Online
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Matches the new backend rule (online_exam_requires_choice_form) — picking
Online in the exam form now auto-sets Form to Choice and disables that
field with an explanatory hint, instead of letting the user pick Essay
and only finding out at save time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../app/features/exam/pages/ExamPage/index.tsx    | 15 ++++++++++++++-
 apps/backoffice/src/app/i18n/locales/am.ts        |  1 +
 apps/backoffice/src/app/i18n/locales/en.ts        |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
index ed58a449c..75d6243ef 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
@@ -254,6 +254,12 @@ function ExamForm({
                   onChange={setForm}
                   size="sm"
                   required
+                  disabled={adminMethod === "ONLINE"}
+                  description={
+                    adminMethod === "ONLINE"
+                      ? t("exam.form.onlineChoiceOnlyHint")
+                      : undefined
+                  }
                 />
                 <Select
                   label={t("exam.detail.administration")}
@@ -263,7 +269,14 @@ function ExamForm({
                     { value: "ONLINE", label: t("exam.form.online") },
                   ]}
                   value={adminMethod}
-                  onChange={setAdminMethod}
+                  onChange={(value) => {
+                    setAdminMethod(value);
+                    // Online exams are graded automatically, and that only
+                    // has an answer model for CHOICE — matches the backend
+                    // rule (online_exam_requires_choice_form), not just a
+                    // UI nicety.
+                    if (value === "ONLINE") setForm("CHOICE");
+                  }}
                   size="sm"
                   required
                 />
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index b30de16b1..77fffb65d 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -251,6 +251,7 @@ export const am: Translations = {
       choice: "ምርጫ",
       offline: "ከመስመር ውጪ",
       online: "በመስመር",
+      onlineChoiceOnlyHint: "የመስመር ላይ ፈተናዎች በራስ-ሰር ይመዘገባሉ፣ ይህም ለምርጫ ጥያቄዎች ብቻ ይሰራል።",
       sum: "ድምር",
       average: "አማካይ",
       percentage: "መቶኛ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 450768341..a5337a539 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -249,6 +249,7 @@ export const en = {
       choice: 'Choice',
       offline: 'Offline',
       online: 'Online',
+      onlineChoiceOnlyHint: 'Online exams are graded automatically, which only works for multiple choice.',
       sum: 'Sum',
       average: 'Average',
       percentage: 'Percentage',

From 3ca5c342c38e22cc760742d310f9c686c276970d Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 11:32:42 +0000
Subject: [PATCH 10/16] fix(question): collapse row actions into a dropdown
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Matches the exams table's action pattern — a single Actions button opening
a menu, instead of a row of inline buttons/icons that got crowded once a
question had submit/approve/reject/retire/edit/delete all applicable at
once.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../question/pages/QuestionPage/actions.tsx   | 108 ++++++++++--------
 1 file changed, 63 insertions(+), 45 deletions(-)

diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
index 05f1b02fb..fcea510ff 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
@@ -1,5 +1,11 @@
-import { ActionIcon, Button, Group } from '@mantine/core';
-import { IconEdit, IconGavel, IconSend, IconTrash } from '@tabler/icons-react';
+import { Button, Menu } from '@mantine/core';
+import {
+  IconChevronDown,
+  IconEdit,
+  IconGavel,
+  IconSend,
+  IconTrash,
+} from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -21,52 +27,64 @@ export function questionActionsColumn(
     cell: ({ row }) => {
       const q = row.original;
       return (
-        <Group gap="xs">
-          {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
+        <Menu shadow="md" width={180} position="bottom-end">
+          <Menu.Target>
+            <Button
+              size="compact-xs"
+              variant="light"
+              rightSection={<IconChevronDown size={12} />}
+              loading={handlers.isSubmittingReview}
+            >
+              {t('question.columns.actions', 'Actions')}
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
+                <Menu.Item
+                  leftSection={<IconSend size={14} />}
+                  onClick={() => handlers.onSubmitForApproval(q)}
+                >
+                  {t('question.qc.submit')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            {q.status === 'PENDING_APPROVAL' && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
+                <Menu.Item color="teal" onClick={() => handlers.onReview(q, 'APPROVED')}>
+                  {t('question.qc.approve')}
+                </Menu.Item>
+                <Menu.Item color="red" onClick={() => handlers.onReview(q, 'REJECTED')}>
+                  {t('question.qc.reject')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            {q.status === 'APPROVED' && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
+                <Menu.Item
+                  color="dark"
+                  leftSection={<IconGavel size={14} />}
+                  onClick={() => handlers.onReview(q, 'RETIRED')}
+                >
+                  {t('question.qc.retire')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
             <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
-              <Button
-                size="compact-xs"
-                variant="light"
-                leftSection={<IconSend size={12} />}
-                loading={handlers.isSubmittingReview}
-                onClick={() => handlers.onSubmitForApproval(q)}
+              <Menu.Divider />
+              <Menu.Item leftSection={<IconEdit size={14} />} onClick={() => handlers.onEdit(q)}>
+                {t('question.action.edit', 'Edit')}
+              </Menu.Item>
+              <Menu.Item
+                color="red"
+                leftSection={<IconTrash size={14} />}
+                onClick={() => handlers.onDelete(q)}
               >
-                {t('question.qc.submit')}
-              </Button>
+                {t('question.action.delete', 'Delete')}
+              </Menu.Item>
             </RequirePermission>
-          )}
-          {q.status === 'PENDING_APPROVAL' && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
-              <Button size="compact-xs" variant="light" color="teal" onClick={() => handlers.onReview(q, 'APPROVED')}>
-                {t('question.qc.approve')}
-              </Button>
-              <Button size="compact-xs" variant="light" color="red" onClick={() => handlers.onReview(q, 'REJECTED')}>
-                {t('question.qc.reject')}
-              </Button>
-            </RequirePermission>
-          )}
-          {q.status === 'APPROVED' && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
-              <Button
-                size="compact-xs"
-                variant="subtle"
-                color="dark"
-                leftSection={<IconGavel size={12} />}
-                onClick={() => handlers.onReview(q, 'RETIRED')}
-              >
-                {t('question.qc.retire')}
-              </Button>
-            </RequirePermission>
-          )}
-          <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
-            <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => handlers.onEdit(q)}>
-              <IconEdit size={14} />
-            </ActionIcon>
-            <ActionIcon variant="subtle" color="red" size="sm" onClick={() => handlers.onDelete(q)}>
-              <IconTrash size={14} />
-            </ActionIcon>
-          </RequirePermission>
-        </Group>
+          </Menu.Dropdown>
+        </Menu>
       );
     },
   };

From 80db2016765f8bafa561b07c366d8e91ddd70013 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 11:40:13 +0000
Subject: [PATCH 11/16] fix(exam,result): collapse row actions into a dropdown
 menu everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same treatment as the questions table, applied consistently: exams list,
exam results list, and the exam-detail candidates panel all now show a
single Actions button opening a dropdown instead of a row of inline
buttons/icons. Also fixes the exams list's action column header, which was
rendering the literal untranslated key ('exam.columns.actions') — missing
a fallback string, same pattern already used elsewhere in this file.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../ExamCandidatesPanel/columns.tsx           |  56 +++++----
 .../features/exam/pages/ExamPage/actions.tsx  | 107 ++++++++--------
 .../result/pages/ResultPage/actions.tsx       | 118 +++++++++---------
 3 files changed, 145 insertions(+), 136 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
index 7501723ef..e25910ab2 100644
--- a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
+++ b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
@@ -1,5 +1,5 @@
-import { Badge, Button, Text } from '@mantine/core';
-import { IconRefresh, IconUserCheck } from '@tabler/icons-react';
+import { Badge, Button, Menu, Text } from '@mantine/core';
+import { IconChevronDown, IconRefresh, IconUserCheck } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -86,39 +86,45 @@ export function examCandidateColumns(
         const attemptStatus = row.original.attempt?.status;
         const canRegrade = attemptStatus === 'SUBMITTED' || attemptStatus === 'EXPIRED';
         return (
-          <>
-            <RequirePermission
-              anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_ATTENDANCE]}
-              hideOnly
-            >
+          <Menu shadow="md" width={180} position="bottom-end">
+            <Menu.Target>
               <Button
                 size="compact-xs"
                 variant="light"
-                leftSection={<IconUserCheck size={12} />}
-                onClick={() => handlers.onRecord(row.original)}
-                mr={canRegrade ? 6 : 0}
+                rightSection={<IconChevronDown size={12} />}
+                loading={handlers.regrading === row.original.attempt?.id}
               >
-                {t('exam.candidates.record')}
+                {t('exam.candidates.record', 'Actions')}
               </Button>
-            </RequirePermission>
-            {canRegrade && (
+            </Menu.Target>
+            <Menu.Dropdown>
               <RequirePermission
-                anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_RESULT]}
+                anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_ATTENDANCE]}
                 hideOnly
               >
-                <Button
-                  size="compact-xs"
-                  variant="light"
-                  color="grape"
-                  leftSection={<IconRefresh size={12} />}
-                  loading={handlers.regrading === row.original.attempt?.id}
-                  onClick={() => handlers.onRegrade(row.original)}
+                <Menu.Item
+                  leftSection={<IconUserCheck size={14} />}
+                  onClick={() => handlers.onRecord(row.original)}
                 >
-                  {t('exam.candidates.regrade')}
-                </Button>
+                  {t('exam.candidates.record')}
+                </Menu.Item>
               </RequirePermission>
-            )}
-          </>
+              {canRegrade && (
+                <RequirePermission
+                  anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_RESULT]}
+                  hideOnly
+                >
+                  <Menu.Item
+                    color="grape"
+                    leftSection={<IconRefresh size={14} />}
+                    onClick={() => handlers.onRegrade(row.original)}
+                  >
+                    {t('exam.candidates.regrade')}
+                  </Menu.Item>
+                </RequirePermission>
+              )}
+            </Menu.Dropdown>
+          </Menu>
         );
       },
     },
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
index 1b62e4283..6c0728578 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
@@ -1,5 +1,10 @@
-import { ActionIcon, Group, Menu } from "@mantine/core";
-import { IconEdit, IconTrash, IconDetails, IconToggleRight } from "@tabler/icons-react";
+import { Button, Menu } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconDetails,
+  IconEdit,
+  IconTrash,
+} from "@tabler/icons-react";
 import type { TFunction } from "i18next";
 import type { AdvancedColumn } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
@@ -25,61 +30,55 @@ export function examActionsColumn(
   },
 ): AdvancedColumn<Exam> {
   return {
-    header: t("exam.columns.actions"),
+    header: t("exam.columns.actions", "Actions"),
     align: "right",
     cell: ({ row }) => (
-      <Group gap="xs">
-        <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
-          <Menu shadow="md" width={160} position="bottom-end">
-            <Menu.Target>
-              <ActionIcon
-                variant="subtle"
-                color="teal"
-                size="sm"
-                loading={handlers.changingStatusId === row.original.id}
+      <Menu shadow="md" width={200} position="bottom-end">
+        <Menu.Target>
+          <Button
+            size="compact-xs"
+            variant="light"
+            rightSection={<IconChevronDown size={12} />}
+            loading={handlers.changingStatusId === row.original.id}
+          >
+            {t("exam.columns.actions", "Actions")}
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconDetails size={14} />}
+            onClick={() => handlers.onDetails(row.original)}
+          >
+            {t("exam.action.details", "Details")}
+          </Menu.Item>
+          <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
+            <Menu.Item
+              leftSection={<IconEdit size={14} />}
+              onClick={() => handlers.onEdit(row.original)}
+            >
+              {t("exam.action.edit", "Edit")}
+            </Menu.Item>
+            <Menu.Item
+              color="red"
+              leftSection={<IconTrash size={14} />}
+              onClick={() => handlers.onDelete(row.original)}
+            >
+              {t("exam.action.delete", "Delete")}
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Label>{t("exam.form.status")}</Menu.Label>
+            {STATUSES.map((status) => (
+              <Menu.Item
+                key={status}
+                disabled={status === row.original.status}
+                onClick={() => handlers.onChangeStatus(row.original, status)}
               >
-                <IconToggleRight size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Label>{t("exam.form.status")}</Menu.Label>
-              {STATUSES.map((status) => (
-                <Menu.Item
-                  key={status}
-                  disabled={status === row.original.status}
-                  onClick={() => handlers.onChangeStatus(row.original, status)}
-                >
-                  {t(`exam.form.${status.toLowerCase()}`)}
-                </Menu.Item>
-              ))}
-            </Menu.Dropdown>
-          </Menu>
-          <ActionIcon
-            variant="subtle"
-            color="blue"
-            size="sm"
-            onClick={() => handlers.onEdit(row.original)}
-          >
-            <IconEdit size={14} />
-          </ActionIcon>
-          <ActionIcon
-            variant="subtle"
-            color="red"
-            size="sm"
-            onClick={() => handlers.onDelete(row.original)}
-          >
-            <IconTrash size={14} />
-          </ActionIcon>
-        </RequirePermission>
-        <ActionIcon
-          variant="subtle"
-          color="red"
-          size="sm"
-          onClick={() => handlers.onDetails(row.original)}
-        >
-          <IconDetails size={14} />
-        </ActionIcon>
-      </Group>
+                {t(`exam.form.${status.toLowerCase()}`)}
+              </Menu.Item>
+            ))}
+          </RequirePermission>
+        </Menu.Dropdown>
+      </Menu>
     ),
   };
 }
diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
index 335c964cc..90ea74d9b 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
@@ -1,5 +1,5 @@
-import { Button, Group } from '@mantine/core';
-import { IconEye, IconSend, IconTrash } from '@tabler/icons-react';
+import { Button, Menu } from '@mantine/core';
+import { IconChevronDown, IconEye, IconSend, IconTrash } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -22,62 +22,66 @@ export function resultActionsColumn(
     cell: ({ row }) => {
       const r = row.original;
       return (
-        <Group gap="xs">
-          {(r.reviewStatus === 'MARKED' || r.reviewStatus === 'MODERATED') && (
-            <>
-              <RequirePermission anyOf={[LICENSE_PERMISSIONS.MODERATE_EXAM_RESULT]} hideOnly>
-                <Button size="compact-xs" variant="light" color="yellow" onClick={() => handlers.onQc(r, 'moderate')}>
-                  {t('result.review.moderate')}
-                </Button>
-              </RequirePermission>
-              <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT]} hideOnly>
-                <Button size="compact-xs" variant="light" color="blue" onClick={() => handlers.onQc(r, 'approve')}>
-                  {t('result.review.approve')}
-                </Button>
-              </RequirePermission>
-            </>
-          )}
-          {(r.reviewStatus === 'APPROVED' || r.reviewStatus === 'MODERATED') && (
-            <RequirePermission
-              anyOf={[
-                LICENSE_PERMISSIONS.MODERATE_EXAM_RESULT,
-                LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT,
-              ]}
-              hideOnly
-            >
-              <Button size="compact-xs" variant="subtle" color="orange" onClick={() => handlers.onQc(r, 'return')}>
-                {t('result.review.return')}
-              </Button>
-            </RequirePermission>
-          )}
-          {r.reviewStatus === 'APPROVED' && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.PUBLISH_EXAM_RESULT]} hideOnly>
-              <Button
-                size="compact-xs"
-                variant="light"
-                color="teal"
-                leftSection={<IconSend size={13} />}
-                onClick={() => handlers.onPublish(r)}
-              >
-                {t('result.review.publish')}
-              </Button>
-            </RequirePermission>
-          )}
-          <Button size="xs" variant="subtle" leftSection={<IconEye size={13} />} onClick={() => handlers.onViewDetail(r)}>
-            {t('result.action.viewEdit')}
-          </Button>
-          <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT]} hideOnly>
-            <Button
-              size="xs"
-              variant="subtle"
-              color="red"
-              leftSection={<IconTrash size={13} />}
-              onClick={() => handlers.onDelete(r)}
-            >
-              {t('result.action.delete')}
+        <Menu shadow="md" width={180} position="bottom-end">
+          <Menu.Target>
+            <Button size="compact-xs" variant="light" rightSection={<IconChevronDown size={12} />}>
+              {t('result.columns.actions', 'Actions')}
             </Button>
-          </RequirePermission>
-        </Group>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item leftSection={<IconEye size={14} />} onClick={() => handlers.onViewDetail(r)}>
+              {t('result.action.viewEdit')}
+            </Menu.Item>
+            {(r.reviewStatus === 'MARKED' || r.reviewStatus === 'MODERATED') && (
+              <>
+                <RequirePermission anyOf={[LICENSE_PERMISSIONS.MODERATE_EXAM_RESULT]} hideOnly>
+                  <Menu.Item color="yellow" onClick={() => handlers.onQc(r, 'moderate')}>
+                    {t('result.review.moderate')}
+                  </Menu.Item>
+                </RequirePermission>
+                <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT]} hideOnly>
+                  <Menu.Item color="blue" onClick={() => handlers.onQc(r, 'approve')}>
+                    {t('result.review.approve')}
+                  </Menu.Item>
+                </RequirePermission>
+              </>
+            )}
+            {(r.reviewStatus === 'APPROVED' || r.reviewStatus === 'MODERATED') && (
+              <RequirePermission
+                anyOf={[
+                  LICENSE_PERMISSIONS.MODERATE_EXAM_RESULT,
+                  LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT,
+                ]}
+                hideOnly
+              >
+                <Menu.Item color="orange" onClick={() => handlers.onQc(r, 'return')}>
+                  {t('result.review.return')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            {r.reviewStatus === 'APPROVED' && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.PUBLISH_EXAM_RESULT]} hideOnly>
+                <Menu.Item
+                  color="teal"
+                  leftSection={<IconSend size={14} />}
+                  onClick={() => handlers.onPublish(r)}
+                >
+                  {t('result.review.publish')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_EXAM_RESULT]} hideOnly>
+              <Menu.Divider />
+              <Menu.Item
+                color="red"
+                leftSection={<IconTrash size={14} />}
+                onClick={() => handlers.onDelete(r)}
+              >
+                {t('result.action.delete')}
+              </Menu.Item>
+            </RequirePermission>
+          </Menu.Dropdown>
+        </Menu>
       );
     },
   };

From ae3af7777e903053462fc1bef57e47956a04681c Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 11:46:16 +0000
Subject: [PATCH 12/16] fix(exam,result,question): kebab-icon action menus,
 status change as a picker

Two follow-ups on the dropdown-actions pass:
- All four action menus (exams, results, questions, candidates panel) now
  trigger off a plain three-dot icon button instead of a text 'Actions'
  button with a chevron.
- Exam status change no longer lists all six statuses flat in the dropdown
  (bad UX, looked like six always-visible options). 'Status' is now one
  menu item that opens a small picker modal (current status + a Select +
  Update) rather than the full edit form.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../ExamCandidatesPanel/columns.tsx           | 16 ++---
 .../features/exam/pages/ExamPage/actions.tsx  | 49 ++++++---------
 .../features/exam/pages/ExamPage/index.tsx    | 60 +++++++++++++++++--
 .../question/pages/QuestionPage/actions.tsx   | 16 ++---
 .../result/pages/ResultPage/actions.tsx       | 10 ++--
 5 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
index e25910ab2..0884a3db6 100644
--- a/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
+++ b/apps/backoffice/src/app/features/exam/components/ExamCandidatesPanel/columns.tsx
@@ -1,5 +1,5 @@
-import { Badge, Button, Menu, Text } from '@mantine/core';
-import { IconChevronDown, IconRefresh, IconUserCheck } from '@tabler/icons-react';
+import { ActionIcon, Badge, Menu, Text } from '@mantine/core';
+import { IconDotsVertical, IconRefresh, IconUserCheck } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -88,14 +88,14 @@ export function examCandidateColumns(
         return (
           <Menu shadow="md" width={180} position="bottom-end">
             <Menu.Target>
-              <Button
-                size="compact-xs"
-                variant="light"
-                rightSection={<IconChevronDown size={12} />}
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="sm"
                 loading={handlers.regrading === row.original.attempt?.id}
               >
-                {t('exam.candidates.record', 'Actions')}
-              </Button>
+                <IconDotsVertical size={16} />
+              </ActionIcon>
             </Menu.Target>
             <Menu.Dropdown>
               <RequirePermission
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
index 6c0728578..ce6377a36 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx
@@ -1,23 +1,15 @@
-import { Button, Menu } from "@mantine/core";
+import { ActionIcon, Menu } from "@mantine/core";
 import {
-  IconChevronDown,
   IconDetails,
+  IconDotsVertical,
   IconEdit,
   IconTrash,
+  IconToggleRight,
 } from "@tabler/icons-react";
 import type { TFunction } from "i18next";
 import type { AdvancedColumn } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
-import type { Exam, ExamStatus } from "../../types/exam";
-
-const STATUSES: ExamStatus[] = [
-  "PENDING",
-  "ACTIVE",
-  "COMPLETED",
-  "CANCELLED",
-  "POSTPONED",
-  "PUBLISHED",
-];
+import type { Exam } from "../../types/exam";
 
 export function examActionsColumn(
   t: TFunction,
@@ -25,7 +17,7 @@ export function examActionsColumn(
     onEdit: (exam: Exam) => void;
     onDelete: (exam: Exam) => void;
     onDetails: (exam: Exam) => void;
-    onChangeStatus: (exam: Exam, status: ExamStatus) => void;
+    onOpenStatusChange: (exam: Exam) => void;
     changingStatusId?: string | null;
   },
 ): AdvancedColumn<Exam> {
@@ -33,16 +25,16 @@ export function examActionsColumn(
     header: t("exam.columns.actions", "Actions"),
     align: "right",
     cell: ({ row }) => (
-      <Menu shadow="md" width={200} position="bottom-end">
+      <Menu shadow="md" width={180} position="bottom-end">
         <Menu.Target>
-          <Button
-            size="compact-xs"
-            variant="light"
-            rightSection={<IconChevronDown size={12} />}
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="sm"
             loading={handlers.changingStatusId === row.original.id}
           >
-            {t("exam.columns.actions", "Actions")}
-          </Button>
+            <IconDotsVertical size={16} />
+          </ActionIcon>
         </Menu.Target>
         <Menu.Dropdown>
           <Menu.Item
@@ -58,6 +50,12 @@ export function examActionsColumn(
             >
               {t("exam.action.edit", "Edit")}
             </Menu.Item>
+            <Menu.Item
+              leftSection={<IconToggleRight size={14} />}
+              onClick={() => handlers.onOpenStatusChange(row.original)}
+            >
+              {t("exam.form.status")}
+            </Menu.Item>
             <Menu.Item
               color="red"
               leftSection={<IconTrash size={14} />}
@@ -65,17 +63,6 @@ export function examActionsColumn(
             >
               {t("exam.action.delete", "Delete")}
             </Menu.Item>
-            <Menu.Divider />
-            <Menu.Label>{t("exam.form.status")}</Menu.Label>
-            {STATUSES.map((status) => (
-              <Menu.Item
-                key={status}
-                disabled={status === row.original.status}
-                onClick={() => handlers.onChangeStatus(row.original, status)}
-              >
-                {t(`exam.form.${status.toLowerCase()}`)}
-              </Menu.Item>
-            ))}
           </RequirePermission>
         </Menu.Dropdown>
       </Menu>
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
index 75d6243ef..61ff9aa36 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
@@ -369,6 +369,10 @@ export function ExamPage() {
   const [deleteOpened, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
   const [changingStatusId, setChangingStatusId] = useState<string | null>(null);
+  const [statusTarget, setStatusTarget] = useState<Exam | null>(null);
+  const [pendingStatus, setPendingStatus] = useState<Exam["status"] | null>(null);
+  const [statusOpened, { open: openStatus, close: closeStatus }] =
+    useDisclosure(false);
 
   const certOptions = certifications
     .filter((c) => c.isActive)
@@ -419,11 +423,14 @@ export function ExamPage() {
     }
   };
 
-  const handleChangeStatus = async (exam: Exam, status: Exam["status"]) => {
-    setChangingStatusId(exam.id);
+  const handleChangeStatus = async () => {
+    if (!statusTarget || !pendingStatus) return;
+    setChangingStatusId(statusTarget.id);
     try {
-      await updateExam({ id: exam.id, status }).unwrap();
+      await updateExam({ id: statusTarget.id, status: pendingStatus }).unwrap();
       notify.success(t("exam.updated"));
+      closeStatus();
+      setStatusTarget(null);
     } catch (e) {
       handleError(e);
     } finally {
@@ -464,7 +471,11 @@ export function ExamPage() {
         openDelete();
       },
       onDetails: (exam) => navigate(`/exams/${exam.id}`),
-      onChangeStatus: handleChangeStatus,
+      onOpenStatusChange: (exam) => {
+        setStatusTarget(exam);
+        setPendingStatus(exam.status);
+        openStatus();
+      },
       changingStatusId,
     }),
   ];
@@ -541,6 +552,47 @@ export function ExamPage() {
           </Button>
         </ModalFooter>
       </Modal>
+
+      {/* Quick status change — not the full edit form */}
+      <Modal
+        opened={statusOpened}
+        onClose={closeStatus}
+        title={t("exam.form.status")}
+        size="sm"
+      >
+        <Stack gap="md">
+          <Text fz="sm" c="dimmed">
+            {statusTarget?.title?.[locale]}
+          </Text>
+          <Select
+            label={t("exam.form.status")}
+            data={[
+              { value: "PENDING", label: t("exam.form.pending") },
+              { value: "ACTIVE", label: t("exam.form.active") },
+              { value: "COMPLETED", label: t("exam.form.completed") },
+              { value: "CANCELLED", label: t("exam.form.cancelled") },
+              { value: "POSTPONED", label: t("exam.form.postponed") },
+              { value: "PUBLISHED", label: t("exam.form.published") },
+            ]}
+            value={pendingStatus}
+            onChange={(value) => setPendingStatus(value as Exam["status"])}
+            size="sm"
+          />
+          <ModalFooter>
+            <Button variant="default" onClick={closeStatus} size="sm">
+              {t("exam.cancel")}
+            </Button>
+            <Button
+              onClick={handleChangeStatus}
+              size="sm"
+              loading={changingStatusId === statusTarget?.id}
+              disabled={pendingStatus === statusTarget?.status}
+            >
+              {t("exam.update")}
+            </Button>
+          </ModalFooter>
+        </Stack>
+      </Modal>
     </Stack>
   );
 }
diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
index fcea510ff..7226fc109 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
@@ -1,6 +1,6 @@
-import { Button, Menu } from '@mantine/core';
+import { ActionIcon, Menu } from '@mantine/core';
 import {
-  IconChevronDown,
+  IconDotsVertical,
   IconEdit,
   IconGavel,
   IconSend,
@@ -29,14 +29,14 @@ export function questionActionsColumn(
       return (
         <Menu shadow="md" width={180} position="bottom-end">
           <Menu.Target>
-            <Button
-              size="compact-xs"
-              variant="light"
-              rightSection={<IconChevronDown size={12} />}
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
               loading={handlers.isSubmittingReview}
             >
-              {t('question.columns.actions', 'Actions')}
-            </Button>
+              <IconDotsVertical size={16} />
+            </ActionIcon>
           </Menu.Target>
           <Menu.Dropdown>
             {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
index 90ea74d9b..0921e9459 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage/actions.tsx
@@ -1,5 +1,5 @@
-import { Button, Menu } from '@mantine/core';
-import { IconChevronDown, IconEye, IconSend, IconTrash } from '@tabler/icons-react';
+import { ActionIcon, Menu } from '@mantine/core';
+import { IconDotsVertical, IconEye, IconSend, IconTrash } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -24,9 +24,9 @@ export function resultActionsColumn(
       return (
         <Menu shadow="md" width={180} position="bottom-end">
           <Menu.Target>
-            <Button size="compact-xs" variant="light" rightSection={<IconChevronDown size={12} />}>
-              {t('result.columns.actions', 'Actions')}
-            </Button>
+            <ActionIcon variant="subtle" color="gray" size="sm">
+              <IconDotsVertical size={16} />
+            </ActionIcon>
           </Menu.Target>
           <Menu.Dropdown>
             <Menu.Item leftSection={<IconEye size={14} />} onClick={() => handlers.onViewDetail(r)}>

From df9db6a36e2bedc499ba0072fbaa320adaded50c Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 12:00:15 +0000
Subject: [PATCH 13/16] feat(question): add CHOICE options inline while
 creating, not after
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create a CHOICE question and the options fields were hidden behind a
'save first' message — had to save, then reopen via Edit, to actually add
options. Added an inline options editor (local state, same bilingual
fields/correct-checkbox as the existing edit-mode one) directly in the
create form. On submit: create the question, then immediately call
setOptions with the drafted options using the new question's id — one
action from the user's point of view, two API calls under the hood.
Edit mode is unchanged, still uses the existing QuestionOptionsEditor
against the real question id.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../question/pages/QuestionPage/index.tsx     | 122 +++++++++++++++++-
 1 file changed, 116 insertions(+), 6 deletions(-)

diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
index 1ee40bc5d..519c937f5 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx
@@ -13,10 +13,12 @@ import {
   Select,
   NumberInput,
   Textarea,
+  Checkbox,
+  ActionIcon,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
-import { IconPlus, IconInfoCircle } from '@tabler/icons-react';
+import { IconPlus, IconInfoCircle, IconTrash, IconGripVertical } from '@tabler/icons-react';
 import { AdvancedColumn, AdvancedTable, ModalFooter, notify, useErrorHandler, useServerTable } from '@ema-platform/ui';
 import { extractErrorMessage } from '@ema-platform/api';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -28,12 +30,87 @@ import {
   useDeleteQuestionMutation,
   useSubmitQuestionMutation,
   useReviewQuestionMutation,
+  useSetQuestionOptionsMutation,
 } from '../../api/question-api';
-import type { Question, QuestionForm } from '../../types/question';
+import type { Question, QuestionForm, QuestionOptionInput } from '../../types/question';
 import { QuestionOptionsEditor } from '../../components/QuestionOptionsEditor';
 import { questionColumns } from './columns';
 import { questionActionsColumn } from './actions';
 
+type DraftOption = { textEn: string; textAm: string; isCorrect: boolean };
+
+const BLANK_DRAFT_OPTIONS: DraftOption[] = [
+  { textEn: '', textAm: '', isCorrect: false },
+  { textEn: '', textAm: '', isCorrect: false },
+];
+
+/**
+ * Options for a brand-new CHOICE question, entered inline in the same
+ * modal — no question id exists yet, so this is pure local state, only
+ * turned into a real setOptions() call once the question itself is
+ * created (see QuestionPage.handleSubmit).
+ */
+function InlineOptionsEditor({
+  options,
+  onChange,
+}: {
+  options: DraftOption[];
+  onChange: (options: DraftOption[]) => void;
+}) {
+  const { t } = useTranslation();
+
+  const update = (index: number, patch: Partial<DraftOption>) =>
+    onChange(options.map((o, i) => (i === index ? { ...o, ...patch } : o)));
+
+  return (
+    <Stack gap="xs">
+      {options.map((option, index) => (
+        <Group key={index} gap="xs" wrap="nowrap" align="center">
+          <IconGripVertical size={16} style={{ opacity: 0.4 }} />
+          <Stack gap={6} style={{ flex: 1 }}>
+            <TextInput
+              label={t('question.options.optionEn', { number: index + 1 })}
+              value={option.textEn}
+              onChange={(e) => update(index, { textEn: e.currentTarget.value })}
+              size="sm"
+              required
+            />
+            <TextInput
+              label={t('question.options.optionAm', { number: index + 1 })}
+              value={option.textAm}
+              onChange={(e) => update(index, { textAm: e.currentTarget.value })}
+              size="sm"
+              required
+            />
+          </Stack>
+          <Checkbox
+            label={t('question.options.correct')}
+            checked={option.isCorrect}
+            onChange={() => update(index, { isCorrect: !option.isCorrect })}
+          />
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            size="sm"
+            disabled={options.length <= 2}
+            onClick={() => onChange(options.filter((_, i) => i !== index))}
+          >
+            <IconTrash size={14} />
+          </ActionIcon>
+        </Group>
+      ))}
+      <Button
+        variant="subtle"
+        size="xs"
+        leftSection={<IconPlus size={14} />}
+        onClick={() => onChange([...options, { textEn: '', textAm: '', isCorrect: false }])}
+      >
+        {t('question.options.addOption')}
+      </Button>
+    </Stack>
+  );
+}
+
 function QuestionForm({
   editing,
   certOptions,
@@ -53,6 +130,7 @@ function QuestionForm({
     days: number;
     hours: number;
     minutes: number;
+    draftOptions: DraftOption[];
   }, isEdit: boolean) => void;
   onCancel: () => void;
 }) {
@@ -66,6 +144,7 @@ function QuestionForm({
   const [days, setDays] = useState(editing?.time?.days ?? 0);
   const [hours, setHours] = useState(editing?.time?.hours ?? 0);
   const [minutes, setMinutes] = useState(editing?.time?.minutes ?? 0);
+  const [draftOptions, setDraftOptions] = useState<DraftOption[]>(BLANK_DRAFT_OPTIONS);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -73,8 +152,23 @@ function QuestionForm({
       notify.error('Please fill all required fields');
       return;
     }
+    if (!editing && form === 'CHOICE') {
+      if (draftOptions.length < 2) {
+        notify.error(t('question.options.needAtLeastTwo'));
+        return;
+      }
+      if (!draftOptions.some((o) => o.isCorrect)) {
+        notify.error(t('question.options.needOneCorrect'));
+        return;
+      }
+      if (draftOptions.some((o) => !o.textEn.trim() || !o.textAm.trim())) {
+        notify.error(t('question.options.textRequired'));
+        return;
+      }
+    }
     onSubmit({
-        certificationId, titleEn, titleAm, form, points, days, hours, minutes
+        certificationId, titleEn, titleAm, form, points, days, hours, minutes,
+        draftOptions: !editing && form === 'CHOICE' ? draftOptions : [],
     }, !!editing);
   };
 
@@ -100,7 +194,10 @@ function QuestionForm({
             </>
           )}
           {!editing && form === 'CHOICE' && (
-            <Text fz="xs" c="dimmed">{t('question.options.saveFirst')}</Text>
+            <>
+              <Text fz="sm" fw={500} mt="sm">{t('question.options.title')}</Text>
+              <InlineOptionsEditor options={draftOptions} onChange={setDraftOptions} />
+            </>
           )}
           <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">{t('question.cancel')}</Button>
@@ -122,6 +219,7 @@ export function QuestionPage() {
   const [createQ, { isLoading: isCreating }] = useCreateQuestionMutation();
   const [updateQ, { isLoading: isUpdating }] = useUpdateQuestionMutation();
   const [deleteQ] = useDeleteQuestionMutation();
+  const [setOptions, { isLoading: isSavingOptions }] = useSetQuestionOptionsMutation();
   const [submitQ, { isLoading: isSubmittingReview }] = useSubmitQuestionMutation();
   const [reviewQ, { isLoading: isReviewing }] = useReviewQuestionMutation();
 
@@ -149,6 +247,7 @@ export function QuestionPage() {
   const handleSubmit = async (values: {
     certificationId: string; titleEn: string; titleAm: string;
     form: string; points: number; days: number; hours: number; minutes: number;
+    draftOptions: DraftOption[];
   }, isEdit: boolean) => {
     const title = { en: values.titleEn, am: values.titleAm };
     const time = { days: values.days, hours: values.hours, minutes: values.minutes };
@@ -157,7 +256,18 @@ export function QuestionPage() {
         await updateQ({ id: editing.id, certificationId: values.certificationId, title, form: values.form as QuestionForm, points: values.points, time }).unwrap();
         notify.success(t('question.updated'));
       } else {
-        await createQ({ certificationId: values.certificationId, title, description: { en: '', am: '' }, form: values.form as QuestionForm, points: values.points, time }).unwrap();
+        const created = await createQ({ certificationId: values.certificationId, title, description: { en: '', am: '' }, form: values.form as QuestionForm, points: values.points, time }).unwrap();
+        // The question needs an id to attach options to — this is the second
+        // half of one "create" action from the user's point of view, not a
+        // separate edit step, so it happens right here rather than waiting
+        // for them to reopen the question later.
+        if (values.form === 'CHOICE' && values.draftOptions.length) {
+          const options: QuestionOptionInput[] = values.draftOptions.map((o) => ({
+            text: { en: o.textEn, am: o.textAm },
+            isCorrect: o.isCorrect,
+          }));
+          await setOptions({ id: created.id, options }).unwrap();
+        }
         notify.success(t('question.created'));
       }
       resetForm();
@@ -242,7 +352,7 @@ export function QuestionPage() {
         <QuestionForm
           editing={editing}
           certOptions={certOptions}
-          isSubmitting={isCreating || isUpdating}
+          isSubmitting={isCreating || isUpdating || isSavingOptions}
           onSubmit={handleSubmit}
           onCancel={resetForm}
         />

From cb3f945a2ab0153ab7ec454c89517c44f959a113 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 12:02:45 +0000
Subject: [PATCH 14/16] fix(exam): cap cutting point input at 100 for
 Percentage evaluation

Matches the new backend rule. Field caps at 100 and shows a hint the
moment Percentage is selected, instead of letting you type 150 and only
finding out later.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/features/exam/pages/ExamPage/index.tsx   | 12 +++++++++++-
 apps/backoffice/src/app/i18n/locales/am.ts           |  2 ++
 apps/backoffice/src/app/i18n/locales/en.ts           |  2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
index 61ff9aa36..a7ba0d5de 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx
@@ -306,12 +306,22 @@ function ExamForm({
                 />
                 <NumberInput
                   label={t("exam.form.cuttingPoint")}
-                  placeholder={t("exam.form.cuttingPointPlaceholder")}
+                  placeholder={
+                    evalMethod === "PERCENTAGE"
+                      ? t("exam.form.cuttingPointPercentagePlaceholder")
+                      : t("exam.form.cuttingPointPlaceholder")
+                  }
                   value={cuttingPoint}
                   onChange={(v) => setCuttingPoint(Number(v))}
                   min={0}
+                  max={evalMethod === "PERCENTAGE" ? 100 : undefined}
                   size="sm"
                   withAsterisk
+                  description={
+                    evalMethod === "PERCENTAGE"
+                      ? t("exam.form.cuttingPointPercentageHint")
+                      : undefined
+                  }
                 />
               </SimpleGrid>
               {editing && (
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 77fffb65d..65eca375b 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -259,6 +259,8 @@ export const am: Translations = {
       random: "በዘፈቀደ",
       cuttingPoint: "የማለፊያ ነጥብ",
       cuttingPointPlaceholder: "ለማለፍ ዝቅተኛ ነጥብ",
+      cuttingPointPercentagePlaceholder: "ለማለፍ ዝቅተኛ መቶኛ (0-100)",
+      cuttingPointPercentageHint: "የመቶኛ ግምገማ — ከ100 አይበልጥም።",
       fillRequiredBasic: "በመሠረታዊ መረጃ ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ።",
       fillRequiredSettings: "በቅንብሮች ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ — ዓይነት፣ ቅጽ፣ የአስተዳደር ዘዴ፣ የግምገማ ዘዴ እና የማለፊያ ነጥብ።",
       directionBothLanguages: "መመሪያ በሁለቱም እንግሊዝኛ እና አማርኛ ጽሑፍ ያስፈልገዋል፣ ወይም ሁለቱንም ባዶ ይተዉ።",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index a5337a539..d4201ec53 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -257,6 +257,8 @@ export const en = {
       random: 'Random',
       cuttingPoint: 'Cutting Point (Pass Mark)',
       cuttingPointPlaceholder: 'Minimum score to pass',
+      cuttingPointPercentagePlaceholder: 'Minimum % to pass (0-100)',
+      cuttingPointPercentageHint: 'Percentage evaluation — capped at 100.',
       fillRequiredBasic: 'Please fill all required fields in Basic Info.',
       fillRequiredSettings: 'Please fill all required fields in Settings — type, form, administration method, evaluation method, and cutting point.',
       directionBothLanguages: 'Direction needs text in both English and Amharic, or leave both empty.',

From 20b7de2310bfea6f03e5cff0accb19d32e1b40c9 Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 12:12:00 +0000
Subject: [PATCH 15/16] fix(exam): pin print footer to the bottom of every page

Footer was just the last thing in document flow, so on a short paper it
landed mid-page instead of at the bottom. position:fixed in @media print
(the standard trick for a repeating page footer) plus a matching @page
bottom margin so it never overlaps the last question's text.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/features/exam/pages/ExamDetailPage.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
index 0bbb98aa8..454238995 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
@@ -288,7 +288,15 @@ export function ExamDetailPage() {
         .header p { margin: 2px 0; font-size: 13px; color: #555; }
         .directions { background: #f5f5f5; padding: 12px 16px; border-radius: 4px; margin-bottom: 24px; font-size: 13px; }
         .directions strong { display: block; margin-bottom: 4px; }
-        @media print { @page { margin: 20mm; } body { -webkit-print-color-adjust: exact; } }
+        .footer { margin-top: 40px; border-top: 1px solid #ccc; padding-top: 12px; font-size: 12px; color: #888; text-align: center; }
+        /* Pinned to the bottom of every printed page (not just after the
+           last question) — @page's bottom margin leaves room for it so it
+           never overlaps question text on the last page. */
+        @media print {
+          @page { margin: 20mm 20mm 28mm 20mm; }
+          body { -webkit-print-color-adjust: exact; padding-bottom: 0; }
+          .footer { position: fixed; bottom: 0; left: 0; right: 0; margin-top: 0; }
+        }
       </style></head><body>
       <div class="header">
         ${logoBase64 ? `<img src="${logoBase64}" alt="Logo" class="header-logo" />` : ""}
@@ -299,7 +307,7 @@ export function ExamDetailPage() {
       </div>
       ${exam.direction?.[locale] ? `<div class="directions"><strong>Directions:</strong> ${exam.direction[locale]}</div>` : ""}
       ${qHtml}
-      <div style="margin-top: 40px; border-top: 1px solid #ccc; padding-top: 12px; font-size: 12px; color: #888; text-align: center;">
+      <div class="footer">
         Generated by EMA — Ethiopian Maritime Authority
       </div>
       </body></html>

From 59bb8cefb95aba7ff54d3aa0651e3730bbed0c2f Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 12:59:08 +0000
Subject: [PATCH 16/16] fix(exam): stop print margins doubling up, fitting far
 fewer questions per page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

body had its own 40px padding + max-width:800px for the on-screen preview
tab, which stacked with @page's own margin once actual printing kicked in
— the preview tab never shows @page at all, so it looked like one
continuous page while the real printed output wasted ~150px+ of page
height per side and was capped to 800px wide regardless of the physical
page width. In @media print specifically: padding:0, max-width:none —
@page's margin is the only inset that should apply once printing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/features/exam/pages/ExamDetailPage.tsx         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
index 454238995..682104fab 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
@@ -294,7 +294,12 @@ export function ExamDetailPage() {
            never overlaps question text on the last page. */
         @media print {
           @page { margin: 20mm 20mm 28mm 20mm; }
-          body { -webkit-print-color-adjust: exact; padding-bottom: 0; }
+          /* @page's margin already insets content from the physical page
+             edge — body's own 40px padding (needed on-screen, for the
+             preview tab before printing) would double up with it here,
+             wasting real page height on every side and fitting noticeably
+             fewer questions per page than the paper actually has room for. */
+          body { -webkit-print-color-adjust: exact; padding: 0; max-width: none; }
           .footer { position: fixed; bottom: 0; left: 0; right: 0; margin-top: 0; }
         }
       </style></head><body>