feat: added exam modules

apps/backoffice/src/app/features/exam/api/exam-api.ts

@@ -0,0 +1,55 @@
+import { baseApi } from '@ema-platform/api';
+import type {
+  Exam,
+  ListResponse,
+  CreateExamPayload,
+  UpdateExamPayload,
+  AssignQuestionsPayload,
+} from '../types/exam';
+
+const examApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getExams: builder.query<ListResponse<Exam>, void>({
+      query: () => '/exams?q=i=questions',
+      providesTags: ['Api'],
+    }),
+    getExam: builder.query<Exam, string>({
+      query: (id) => `/exams/${id}?i=questions`,
+      providesTags: ['Api'],
+    }),
+    createExam: builder.mutation<Exam, CreateExamPayload>({
+      query: (body) => ({ url: '/exams', method: 'POST', body }),
+      invalidatesTags: ['Api'],
+    }),
+    updateExam: builder.mutation<Exam, UpdateExamPayload>({
+      query: ({ id, ...body }) => ({
+        url: `/exams/${id}`,
+        method: 'PUT',
+        body,
+      }),
+      invalidatesTags: ['Api'],
+    }),
+    deleteExam: builder.mutation<void, string>({
+      query: (id) => ({ url: `/exams/${id}`, method: 'DELETE' }),
+      invalidatesTags: ['Api'],
+    }),
+    assignQuestions: builder.mutation<Exam, AssignQuestionsPayload>({
+      query: ({ examId, questionIds, remark }) => ({
+        url: `/exams/${examId}/questions`,
+        method: 'POST',
+        body: { examId, questionIds, remark },
+      }),
+      invalidatesTags: ['Api'],
+    }),
+  }),
+  overrideExisting: false,
+});
+
+export const {
+  useGetExamsQuery,
+  useGetExamQuery,
+  useCreateExamMutation,
+  useUpdateExamMutation,
+  useDeleteExamMutation,
+  useAssignQuestionsMutation,
+} = examApi;

apps/backoffice/src/app/features/exam/components/QuestionAssigner.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import {
+  Paper,
+  Group,
+  Text,
+  Stack,
+  TextInput,
+  Badge,
+  ScrollArea,
+  Checkbox,
+  Box,
+  Button,
+} from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import type { QuestionBrief } from '../types/exam';
+
+interface QuestionAssignerProps {
+  available: QuestionBrief[];
+  assigned: QuestionBrief[];
+  onChange: (assigned: QuestionBrief[]) => void;
+}
+
+function QuestionList({
+  items,
+  selected,
+  onToggle,
+  search,
+  onSearchChange,
+  label,
+}: {
+  items: QuestionBrief[];
+  selected: Set<string>;
+  onToggle: (id: string) => void;
+  search: string;
+  onSearchChange: (v: string) => void;
+  label: string;
+}) {
+  return (
+    <Box style={{ flex: 1, minWidth: 0 }}>
+      <Text fz="xs" fw={600} c="dimmed" mb={4}>{label} ({items.length})</Text>
+      <Paper withBorder radius="md">
+        <Group p="sm" pb={0}>
+          <TextInput
+            placeholder="Search..."
+            leftSection={<IconSearch size={14} />}
+            value={search}
+            onChange={(e) => onSearchChange(e.currentTarget.value)}
+            size="xs"
+            style={{ flex: 1 }}
+          />
+        </Group>
+        <ScrollArea h={280} p="sm" pt="xs">
+          <Stack gap={4}>
+            {items.length === 0 && (
+              <Text fz="xs" c="dimmed" ta="center" py="xl">No questions</Text>
+            )}
+            {items.map((q) => (
+              <Paper
+                key={q.id}
+                withBorder
+                p="xs"
+                radius="sm"
+                style={{
+                  cursor: 'pointer',
+                  borderColor: selected.has(q.id) ? 'var(--mantine-color-blue-5)' : undefined,
+                  background: selected.has(q.id) ? 'var(--mantine-color-blue-0)' : undefined,
+                }}
+                onClick={() => onToggle(q.id)}
+              >
+                <Group gap="sm" wrap="nowrap">
+                  <Checkbox checked={selected.has(q.id)} onChange={() => onToggle(q.id)} size="xs" />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Text fz="xs" lineClamp={2}>{q.title.en}</Text>
+                    <Group gap={4} mt={2}>
+                      <Badge size="xs" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{q.form}</Badge>
+                      <Badge size="xs" variant="light" color="gray">{q.points} pts</Badge>
+                    </Group>
+                  </div>
+                </Group>
+              </Paper>
+            ))}
+          </Stack>
+        </ScrollArea>
+      </Paper>
+    </Box>
+  );
+}
+
+export function QuestionAssigner({ available, assigned, onChange }: QuestionAssignerProps) {
+  const [searchLeft, setSearchLeft] = useState('');
+  const [searchRight, setSearchRight] = useState('');
+  const [selectedLeft, setSelectedLeft] = useState<Set<string>>(new Set());
+  const [selectedRight, setSelectedRight] = useState<Set<string>>(new Set());
+
+  const assignedIds = new Set(assigned.map((q) => q.id));
+
+  const filteredAvailable = available.filter(
+    (q) => !assignedIds.has(q.id) && (q.title.en.toLowerCase().includes(searchLeft.toLowerCase()) || q.title.am.includes(searchLeft))
+  );
+  const filteredAssigned = assigned.filter(
+    (q) => q.title.en.toLowerCase().includes(searchRight.toLowerCase()) || q.title.am.includes(searchRight)
+  );
+
+  const assignSelected = () => {
+    const toAssign = available.filter((q) => selectedLeft.has(q.id));
+    onChange([...assigned, ...toAssign]);
+    setSelectedLeft(new Set());
+  };
+
+  const removeSelected = () => {
+    onChange(assigned.filter((q) => !selectedRight.has(q.id)));
+    setSelectedRight(new Set());
+  };
+
+  return (
+    <Stack gap="sm">
+      <Text fz="sm" fw={500}>Assign Questions to Exam</Text>
+      <Group gap="sm" align="stretch" wrap="nowrap">
+        <QuestionList
+          items={filteredAvailable}
+          selected={selectedLeft}
+          onToggle={(id) => {
+            const next = new Set(selectedLeft);
+            if (next.has(id)) next.delete(id); else next.add(id);
+            setSelectedLeft(next);
+          }}
+          search={searchLeft}
+          onSearchChange={setSearchLeft}
+          label="Available Questions"
+        />
+        <QuestionList
+          items={filteredAssigned}
+          selected={selectedRight}
+          onToggle={(id) => {
+            const next = new Set(selectedRight);
+            if (next.has(id)) next.delete(id); else next.add(id);
+            setSelectedRight(next);
+          }}
+          search={searchRight}
+          onSearchChange={setSearchRight}
+          label="Assigned Questions"
+        />
+      </Group>
+      <Group gap="sm" justify="center">
+        {selectedLeft.size > 0 && (
+          <Button size="xs" variant="light" onClick={assignSelected}>
+            Assign Selected ({selectedLeft.size})
+          </Button>
+        )}
+        {selectedRight.size > 0 && (
+          <Button size="xs" variant="light" color="red" onClick={removeSelected}>
+            Remove Selected ({selectedRight.size})
+          </Button>
+        )}
+      </Group>
+    </Stack>
+  );
+}

apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx

@@ -0,0 +1,381 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  Stack,
+  Title,
+  Group,
+  Text,
+  Paper,
+  Badge,
+  SimpleGrid,
+  Divider,
+  Button,
+  ActionIcon,
+  Alert,
+  Loader,
+  Center,
+  Modal,
+  Table,
+  Select,
+  NumberInput,
+  TextInput,
+  ThemeIcon,
+  Box,
+  rem,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import {
+  IconArrowLeft,
+  IconPrinter,
+  IconPlus,
+  IconInfoCircle,
+  IconCertificate,
+  IconCalendar,
+  IconMapPin,
+  IconClock,
+  IconScoreboard,
+  IconUser,
+  IconCheck,
+  IconX,
+} from '@tabler/icons-react';
+import { notify } from '@ema-platform/ui';
+import { useApiQuery, useApiMutation } from '@ema-platform/api';
+import { useGetExamQuery, useUpdateExamMutation } from '../api/exam-api';
+import type { Exam, ExamStatus } from '../types/exam';
+
+const STATUS_COLOR: Record<string, string> = {
+  PENDING: 'gray', ACTIVE: 'blue', COMPLETED: 'teal',
+  CANCELLED: 'red', POSTPONED: 'orange', PUBLISHED: 'green',
+};
+
+const FORM_LABEL: Record<string, string> = { ESSAY: 'Essay', CHOICE: 'Choice' };
+const TYPE_LABEL: Record<string, string> = { WRITTEN: 'Written', ORAL: 'Oral' };
+const ADMIN_LABEL: Record<string, string> = { OFFLINE: 'Offline', ONLINE: 'Online' };
+const EVAL_LABEL: Record<string, string> = { SUM: 'Sum', AVERAGE: 'Average', PERCENTAGE: 'Percentage' };
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <Text fz="xs" c="dimmed" tt="uppercase" fw={600}>{label}</Text>
+      <Text fz="sm" fw={500}>{value || '—'}</Text>
+    </div>
+  );
+}
+
+function RecordResultModal({
+  exam,
+  opened,
+  onClose,
+}: {
+  exam: Exam;
+  opened: boolean;
+  onClose: () => void;
+}) {
+  const [seafarerSearch, setSeafarerSearch] = useState('');
+  const [selectedSeafarerId, setSelectedSeafarerId] = useState<string | null>(null);
+  const [scores, setScores] = useState<Record<string, number>>({});
+  const [remark, setRemark] = useState('');
+
+  const { data: profilesRes } = useApiQuery<{ total: number; items: any[] }>({
+    url: '/profiles',
+    params: { q: 'w=type:=:SEAFARER' },
+  });
+  const [createResult, { isLoading: isSaving }] = useApiMutation();
+
+  const seafarers = profilesRes?.items ?? [];
+  const questions = exam.questions ?? [];
+
+  const seafarerOptions = seafarers.map((s: any) => ({
+    value: s.id,
+    label: `${s.firstName} ${s.middleName ?? ''} ${s.lastName}`,
+  }));
+
+  const filteredOptions = seafarerSearch
+    ? seafarerOptions.filter((o: any) => o.label.toLowerCase().includes(seafarerSearch.toLowerCase()))
+    : seafarerOptions;
+
+  const totalScore = questions.reduce((sum, q) => sum + (scores[q.id] ?? 0), 0);
+  const passed = totalScore >= exam.cuttingPoint;
+
+  const handleScoreChange = (questionId: string, value: number) => {
+    setScores((prev) => ({ ...prev, [questionId]: value }));
+  };
+
+  const handleSave = async () => {
+    if (!selectedSeafarerId) {
+      notify.error('Please select a seafarer');
+      return;
+    }
+    try {
+      const breakdowns = questions.map((q) => ({
+        questionId: q.id,
+        score: scores[q.id] ?? 0,
+        remark: '',
+      }));
+      await createResult({
+        url: '/results',
+        method: 'POST',
+        body: {
+          seafarerId: selectedSeafarerId,
+          examId: exam.id,
+          resultBreakdowns: breakdowns,
+          totalScore,
+          remark: remark ? { en: remark, am: '' } : undefined,
+        },
+      }).unwrap();
+      notify.success(`Result recorded — ${passed ? 'PASSED' : 'FAILED'} (${totalScore}/${exam.cuttingPoint})`);
+      setSelectedSeafarerId(null);
+      setScores({});
+      setRemark('');
+      setSeafarerSearch('');
+      onClose();
+    } catch {
+      notify.error('Failed to save result');
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title={`Record Result — ${exam.title.en}`} size="lg" radius="lg">
+      <Stack gap="md">
+        <Select
+          label="Seafarer"
+          placeholder="Search and select a seafarer"
+          data={filteredOptions}
+          value={selectedSeafarerId}
+          onChange={(v) => {
+            setSelectedSeafarerId(v);
+            setScores({});
+          }}
+          searchable
+          onSearchChange={setSeafarerSearch}
+          size="sm"
+          required
+        />
+
+        {selectedSeafarerId && questions.length > 0 && (
+          <>
+            <Divider label="Score per Question" labelPosition="center" />
+            <Table striped>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Question</Table.Th>
+                  <Table.Th>Form</Table.Th>
+                  <Table.Th>Max Points</Table.Th>
+                  <Table.Th>Score</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {questions.map((q) => (
+                  <Table.Tr key={q.id}>
+                    <Table.Td><Text fz="sm" maw={250} lineClamp={2}>{q.title.en}</Text></Table.Td>
+                    <Table.Td>
+                      <Badge size="xs" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{q.form}</Badge>
+                    </Table.Td>
+                    <Table.Td><Text fz="sm" fw={600}>{q.points}</Text></Table.Td>
+                    <Table.Td>
+                      <NumberInput
+                        value={scores[q.id] ?? 0}
+                        onChange={(v) => handleScoreChange(q.id, Number(v))}
+                        min={0}
+                        max={q.points}
+                        size="xs"
+                        style={{ width: 80 }}
+                      />
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+
+            <Paper withBorder p="sm" radius="md" bg="gray.0">
+              <SimpleGrid cols={3} spacing="sm">
+                <InfoRow label="Total Score" value={String(totalScore)} />
+                <InfoRow label="Pass Mark" value={String(exam.cuttingPoint)} />
+                <div>
+                  <Text fz="xs" c="dimmed" tt="uppercase" fw={600}>Status</Text>
+                  <Group gap={4} mt={2}>
+                    {passed
+                      ? <><IconCheck size={14} color="var(--mantine-color-teal-6)" /><Text fz="sm" fw={700} c="teal">PASSED</Text></>
+                      : <><IconX size={14} color="var(--mantine-color-red-6)" /><Text fz="sm" fw={700} c="red">FAILED</Text></>}
+                  </Group>
+                </div>
+              </SimpleGrid>
+            </Paper>
+
+            <TextInput
+              label="Remark (optional)"
+              placeholder="Officer remarks"
+              value={remark}
+              onChange={(e) => setRemark(e.currentTarget.value)}
+              size="sm"
+            />
+
+            <Group justify="flex-end">
+              <Button variant="default" onClick={onClose} size="sm">Cancel</Button>
+              <Button onClick={handleSave} size="sm" loading={isSaving}>
+                Save Result
+              </Button>
+            </Group>
+          </>
+        )}
+
+        {selectedSeafarerId && questions.length === 0 && (
+          <Alert color="yellow" icon={<IconInfoCircle size={15} />}>
+            No questions assigned to this exam. Assign questions first.
+          </Alert>
+        )}
+      </Stack>
+    </Modal>
+  );
+}
+
+export function ExamDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const printRef = useRef<HTMLDivElement>(null);
+  const [recordOpened, { open: openRecord, close: closeRecord }] = useDisclosure(false);
+  const [updateExam] = useUpdateExamMutation();
+
+  const { data: exam, isLoading, isError } = useGetExamQuery(id ?? '', { skip: !id });
+
+  if (isLoading) return <Center py="xl"><Loader /></Center>;
+  if (isError || !exam) {
+    return (
+      <Stack gap="md">
+        <Button variant="subtle" leftSection={<IconArrowLeft size={15} />} w="fit-content" onClick={() => navigate('/exams')}>Back to Exams</Button>
+        <Alert color="red" icon={<IconInfoCircle size={17} />}>Exam not found.</Alert>
+      </Stack>
+    );
+  }
+
+  const handlePrint = () => {
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) return;
+    const qHtml = (exam.questions ?? []).map((q, i) => `
+      <div style="margin-bottom: 24px; page-break-inside: avoid;">
+        <p style="font-weight: 700; margin-bottom: 4px; font-size: 13px;">Question ${i + 1} (${q.points} pts — ${FORM_LABEL[q.form] ?? q.form})</p>
+        <p style="margin: 0 0 8px 0; font-size: 14px; line-height: 1.5;">${q.title.en}</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('') : ''}
+      </div>
+    `).join('');
+
+    printWindow.document.write(`
+      <html><head><title>${exam.title.en}</title>
+      <style>
+        body { font-family: sans-serif; padding: 40px; max-width: 800px; margin: auto; }
+        .header { text-align: center; margin-bottom: 32px; border-bottom: 2px solid #333; padding-bottom: 16px; }
+        .header h1 { font-size: 20px; margin: 0 0 4px; }
+        .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; } }
+      </style></head><body>
+      <div class="header">
+        <h1>${exam.title.en}</h1>
+        <p>${exam.title.am}</p>
+        <p>Date: ${exam.date} | Venue: ${exam.venue}</p>
+        <p>Form: ${FORM_LABEL[exam.form]} | Type: ${TYPE_LABEL[exam.type]} | Time Allowed: ${exam.givenTime ? `${exam.givenTime.days}d ${exam.givenTime.hours}h ${exam.givenTime.minutes}m` : 'N/A'}</p>
+        <p>Pass Mark: ${exam.cuttingPoint} | Total Questions: ${(exam.questions ?? []).length}</p>
+      </div>
+      ${exam.direction?.en ? `<div class="directions"><strong>Directions:</strong>${exam.direction.en}</div>` : ''}
+      ${qHtml}
+      <div style="margin-top: 40px; border-top: 1px solid #ccc; padding-top: 12px; font-size: 12px; color: #888; text-align: center;">
+        Generated by EMA — Ethiopian Maritime Authority
+      </div>
+      </body></html>
+    `);
+    printWindow.document.close();
+    printWindow.focus();
+    setTimeout(() => printWindow.print(), 500);
+  };
+
+  const totalPoints = (exam.questions ?? []).reduce((s, q) => s + q.points, 0);
+
+  return (
+    <Stack gap="md" ref={printRef}>
+      {/* Header */}
+      <Group justify="space-between">
+        <Group gap="sm">
+          <ActionIcon variant="subtle" size="lg" onClick={() => navigate('/exams')}>
+            <IconArrowLeft size={18} />
+          </ActionIcon>
+          <div>
+            <Title order={3}>{exam.title.en}</Title>
+            <Group gap={6} mt={2}>
+              <Text fz="sm" c="dimmed">{exam.title.am}</Text>
+              <Text fz="sm" c="dimmed">·</Text>
+              <Text fz="sm" c="dimmed">{exam.date}</Text>
+            </Group>
+          </div>
+        </Group>
+        <Group gap="sm">
+          <Button variant="light" leftSection={<IconPrinter size={15} />} onClick={handlePrint} size="sm">
+            Print Exam
+          </Button>
+          <Button leftSection={<IconPlus size={15} />} onClick={openRecord} size="sm">
+            Record Result
+          </Button>
+        </Group>
+      </Group>
+
+      {/* Status badge */}
+      <Badge size="lg" variant="light" color={STATUS_COLOR[exam.status]} style={{ width: 'fit-content' }}>
+        {exam.status}
+      </Badge>
+
+      {/* Exam Info */}
+      <Paper withBorder radius="lg" p="lg">
+        <Title order={5} mb="md">Exam Details</Title>
+        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
+          <InfoRow label="Certification" value={exam.certification?.name?.en ?? exam.certificationId} />
+          <InfoRow label="Type" value={TYPE_LABEL[exam.type] ?? exam.type} />
+          <InfoRow label="Form" value={FORM_LABEL[exam.form] ?? exam.form} />
+          <InfoRow label="Venue" value={exam.venue} />
+          <InfoRow label="Date" value={exam.date} />
+          <InfoRow label="Administration" value={ADMIN_LABEL[exam.administrationMethod] ?? exam.administrationMethod} />
+          <InfoRow label="Evaluation" value={EVAL_LABEL[exam.evaluationMethod] ?? exam.evaluationMethod} />
+          <InfoRow label="Selection" value={exam.selectionMethod} />
+          <InfoRow label="Time Allowed" value={exam.givenTime ? `${exam.givenTime.days}d ${exam.givenTime.hours}h ${exam.givenTime.minutes}m` : '—'} />
+          <InfoRow label="Pass Mark" value={String(exam.cuttingPoint)} />
+          <InfoRow label="Total Points" value={String(totalPoints)} />
+          <InfoRow label="Questions" value={String((exam.questions ?? []).length)} />
+        </SimpleGrid>
+        {exam.direction?.en && (
+          <>
+            <Divider my="md" />
+            <InfoRow label="Directions" value={exam.direction.en} />
+          </>
+        )}
+      </Paper>
+
+      {/* Questions */}
+      <Paper withBorder radius="lg" p="lg">
+        <Title order={5} mb="md">Questions ({totalPoints} pts total)</Title>
+        {(exam.questions ?? []).length === 0 ? (
+          <Alert color="gray" icon={<IconInfoCircle size={16} />}>
+            No questions assigned yet. Use the exam list to assign questions.
+          </Alert>
+        ) : (
+          <Stack gap="md">
+            {(exam.questions ?? []).map((q, i) => (
+              <Paper key={q.id} withBorder p="md" radius="md">
+                <Group justify="space-between" mb="xs">
+                  <Text fz="sm" fw={700}>Question {i + 1}</Text>
+                  <Group gap={4}>
+                    <Badge size="xs" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{FORM_LABEL[q.form] ?? q.form}</Badge>
+                    <Badge size="xs" variant="light" color="gray">{q.points} pts</Badge>
+                  </Group>
+                </Group>
+                <Text fz="sm">{q.title.en}</Text>
+                {q.title.am && <Text fz="xs" c="dimmed" mt={2}>{q.title.am}</Text>}
+              </Paper>
+            ))}
+          </Stack>
+        )}
+      </Paper>
+
+      <RecordResultModal exam={exam} opened={recordOpened} onClose={closeRecord} />
+    </Stack>
+  );
+}

apps/backoffice/src/app/features/exam/pages/ExamPage.tsx

@@ -0,0 +1,379 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Stack,
+  Title,
+  Group,
+  Button,
+  Table,
+  Badge,
+  ActionIcon,
+  Modal,
+  Text,
+  TextInput,
+  Textarea,
+  Paper,
+  Loader,
+  Center,
+  Alert,
+  Select,
+  NumberInput,
+  Tabs,
+  SimpleGrid,
+  Divider,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconEdit, IconTrash, IconPlus, IconInfoCircle, IconCalendar, IconClipboardList } from '@tabler/icons-react';
+import { notify } from '@ema-platform/ui';
+import { useGetCertificationsQuery } from '../../certification/api/certification-api';
+import { useGetQuestionsQuery } from '../../question/api/question-api';
+import {
+  useGetExamsQuery,
+  useCreateExamMutation,
+  useUpdateExamMutation,
+  useDeleteExamMutation,
+  useAssignQuestionsMutation,
+} from '../api/exam-api';
+import type { Exam } from '../types/exam';
+import { QuestionAssigner } from '../components/QuestionAssigner';
+
+const STATUS_COLOR: Record<string, string> = {
+  PENDING: 'gray',
+  ACTIVE: 'blue',
+  COMPLETED: 'teal',
+  CANCELLED: 'red',
+  POSTPONED: 'orange',
+  PUBLISHED: 'green',
+};
+
+function ExamForm({
+  editing,
+  certOptions,
+  isSubmitting,
+  onSubmit,
+  onCancel,
+}: {
+  editing: Exam | null;
+  certOptions: { value: string; label: string }[];
+  isSubmitting: boolean;
+  onSubmit: (values: any, isEdit: boolean) => void;
+  onCancel: () => void;
+}) {
+  const [certificationId, setCertificationId] = useState<string | null>(editing?.certificationId ?? null);
+  const [titleEn, setTitleEn] = useState(editing?.title?.en ?? '');
+  const [titleAm, setTitleAm] = useState(editing?.title?.am ?? '');
+  const [directionEn, setDirectionEn] = useState(editing?.direction?.en ?? '');
+  const [directionAm, setDirectionAm] = useState(editing?.direction?.am ?? '');
+  const [date, setDate] = useState(editing?.date ?? '');
+  const [days, setDays] = useState(editing?.givenTime?.days ?? 0);
+  const [hours, setHours] = useState(editing?.givenTime?.hours ?? 0);
+  const [minutes, setMinutes] = useState(editing?.givenTime?.minutes ?? 0);
+  const [type, setType] = useState<string | null>(editing?.type ?? null);
+  const [form, setForm] = useState<string | null>(editing?.form ?? null);
+  const [venue, setVenue] = useState(editing?.venue ?? '');
+  const [adminMethod, setAdminMethod] = useState<string | null>(editing?.administrationMethod ?? null);
+  const [evalMethod, setEvalMethod] = useState<string | null>(editing?.evaluationMethod ?? null);
+  const [selMethod, setSelMethod] = useState<string | null>(editing?.selectionMethod ?? null);
+  const [cuttingPoint, setCuttingPoint] = useState<number>(editing?.cuttingPoint ?? 0);
+  const [status, setStatus] = useState<string | null>(editing?.status ?? null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!certificationId || !titleEn || !titleAm || !date || !type || !form || !venue || !adminMethod || !evalMethod) {
+      notify.error('Please fill all required fields');
+      return;
+    }
+    onSubmit({
+      certificationId, titleEn, titleAm, directionEn, directionAm,
+      date, days, hours, minutes, type, form, venue, adminMethod, evalMethod, selMethod, cuttingPoint, status,
+    }, !!editing);
+  };
+
+  return (
+    <Paper p="md" withBorder mb="md" radius="md">
+      <form onSubmit={handleSubmit}>
+        <Tabs defaultValue="basic" variant="outline" radius="md">
+          <Tabs.List mb="md">
+            <Tabs.Tab value="basic" leftSection={<IconInfoCircle size={15} />}>Basic Info</Tabs.Tab>
+            <Tabs.Tab value="settings" leftSection={<IconClipboardList size={15} />}>Settings</Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="basic">
+            <Stack gap="sm">
+              <Select label="Certification" placeholder="Select certification" data={certOptions} value={certificationId} onChange={setCertificationId} size="sm" searchable required />
+              <TextInput label="Title (English)" placeholder="Exam title in English" value={titleEn} onChange={(e) => setTitleEn(e.currentTarget.value)} size="sm" required />
+              <TextInput label="Title (Amharic)" placeholder="የፈተና ርዕስ" value={titleAm} onChange={(e) => setTitleAm(e.currentTarget.value)} size="sm" required />
+              <Textarea label="Direction (English)" placeholder="Instructions in English" value={directionEn} onChange={(e) => setDirectionEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
+              <Textarea label="Direction (Amharic)" placeholder="መመሪያ በአማርኛ" value={directionAm} onChange={(e) => setDirectionAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
+              <TextInput label="Exam Date" type="date" value={date} onChange={(e) => setDate(e.currentTarget.value)} size="sm" leftSection={<IconCalendar size={14} />} required />
+              <TextInput label="Venue" placeholder="Exam venue" value={venue} onChange={(e) => setVenue(e.currentTarget.value)} size="sm" required />
+
+              <Text fz="sm" fw={500}>Time Allowed</Text>
+              <Group gap="sm" grow>
+                <NumberInput label="Days" value={days} onChange={(v) => setDays(Number(v))} min={0} size="sm" />
+                <NumberInput label="Hours" value={hours} onChange={(v) => setHours(Number(v))} min={0} size="sm" />
+                <NumberInput label="Minutes" value={minutes} onChange={(v) => setMinutes(Number(v))} min={0} size="sm" />
+              </Group>
+            </Stack>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="settings">
+            <Stack gap="sm">
+              <SimpleGrid cols={2} spacing="sm">
+                <Select label="Type" placeholder="Written or Oral" data={[{ value: 'WRITTEN', label: 'Written' }, { value: 'ORAL', label: 'Oral' }]} value={type} onChange={setType} size="sm" required />
+                <Select label="Form" placeholder="Essay or Choice" data={[{ value: 'ESSAY', label: 'Essay' }, { value: 'CHOICE', label: 'Choice' }]} value={form} onChange={setForm} size="sm" required />
+                <Select label="Administration" placeholder="Offline or Online" data={[{ value: 'OFFLINE', label: 'Offline' }, { value: 'ONLINE', label: 'Online' }]} value={adminMethod} onChange={setAdminMethod} size="sm" required />
+                <Select label="Evaluation Method" placeholder="How to compute score" data={[{ value: 'SUM', label: 'Sum' }, { value: 'AVERAGE', label: 'Average' }, { value: 'PERCENTAGE', label: 'Percentage' }]} value={evalMethod} onChange={setEvalMethod} size="sm" required />
+                <Select label="Selection Method" placeholder="Manual or Random" data={[{ value: 'MANUAL', label: 'Manual' }, { value: 'RANDOM', label: 'Random' }]} value={selMethod} onChange={setSelMethod} size="sm" />
+                <NumberInput label="Cutting Point (Pass Mark)" placeholder="Minimum score to pass" value={cuttingPoint} onChange={(v) => setCuttingPoint(Number(v))} min={0} size="sm" required />
+              </SimpleGrid>
+              {editing && (
+                <Select label="Status" placeholder="Exam status" data={[
+                  { value: 'PENDING', label: 'Pending' }, { value: 'ACTIVE', label: 'Active' },
+                  { value: 'COMPLETED', label: 'Completed' }, { value: 'CANCELLED', label: 'Cancelled' },
+                  { value: 'POSTPONED', label: 'Postponed' }, { value: 'PUBLISHED', label: 'Published' },
+                ]} value={status} onChange={setStatus} size="sm" />
+              )}
+            </Stack>
+          </Tabs.Panel>
+        </Tabs>
+
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onCancel} size="sm">Cancel</Button>
+          <Button type="submit" size="sm" loading={isSubmitting}>{editing ? 'Update Exam' : 'Create Exam'}</Button>
+        </Group>
+      </form>
+    </Paper>
+  );
+}
+
+export function ExamPage() {
+  const navigate = useNavigate();
+  const { data: certRes } = useGetCertificationsQuery();
+  const { data: qRes } = useGetQuestionsQuery();
+  const { data, isLoading, isError } = useGetExamsQuery();
+  const [createExam, { isLoading: isCreating }] = useCreateExamMutation();
+  const [updateExam, { isLoading: isUpdating }] = useUpdateExamMutation();
+  const [deleteExam] = useDeleteExamMutation();
+  const [assignQuestions] = useAssignQuestionsMutation();
+
+  const certifications = certRes?.items ?? [];
+  const allQuestions = qRes?.items ?? [];
+  const exams = data?.items ?? [];
+
+  const [editing, setEditing] = useState<Exam | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Exam | null>(null);
+  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+  const [assignTarget, setAssignTarget] = useState<Exam | null>(null);
+  const [assignOpened, { open: openAssign, close: closeAssign }] = useDisclosure(false);
+  const [randomCount, setRandomCount] = useState(5);
+
+  const certOptions = certifications.filter((c) => c.isActive).map((c) => ({ value: c.id, label: c.name.en }));
+  const getCertName = (id: string) => certifications.find((c) => c.id === id)?.name?.en ?? '-';
+
+  const resetForm = () => { setEditing(null); setShowForm(false); };
+
+  const handleSubmit = async (values: any, isEdit: boolean) => {
+    const payload: any = {
+      certificationId: values.certificationId,
+      title: { en: values.titleEn, am: values.titleAm },
+      direction: values.directionEn || values.directionAm ? { en: values.directionEn, am: values.directionAm } : undefined,
+      date: values.date,
+      givenTime: { days: values.days, hours: values.hours, minutes: values.minutes },
+      type: values.type,
+      form: values.form,
+      venue: values.venue,
+      administrationMethod: values.adminMethod,
+      evaluationMethod: values.evalMethod,
+      selectionMethod: values.selMethod || 'MANUAL',
+      cuttingPoint: values.cuttingPoint,
+    };
+    if (isEdit) payload.status = values.status;
+
+    try {
+      if (isEdit && editing) {
+        await updateExam({ id: editing.id, ...payload }).unwrap();
+        notify.success('Exam updated');
+      } else {
+        await createExam(payload).unwrap();
+        notify.success('Exam created');
+      }
+      resetForm();
+    } catch {
+      notify.error('Operation failed');
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteExam(deleteTarget.id).unwrap();
+      notify.success('Exam deleted');
+      closeDelete();
+      setDeleteTarget(null);
+    } catch {
+      notify.error('Failed to delete');
+    }
+  };
+
+  const handleRandomSelect = () => {
+    if (!assignTarget) return;
+    const assignedIds = new Set((assignTarget.questions ?? []).map((q) => q.id));
+    const unassigned = allQuestions
+      .filter((q) => !assignedIds.has(q.id))
+      .map((q) => ({ id: q.id, title: q.title, form: q.form, points: q.points }));
+    const shuffled = [...unassigned].sort(() => Math.random() - 0.5);
+    const picked = shuffled.slice(0, Math.min(randomCount, shuffled.length));
+    setAssignTarget({
+      ...assignTarget,
+      questions: [...(assignTarget.questions ?? []), ...picked],
+    });
+    notify.info(`Randomly selected ${picked.length} questions`);
+  };
+
+  const handleAssign = async () => {
+    if (!assignTarget) return;
+    try {
+      const questionIds = assignTarget.questions?.map((q) => q.id) ?? [];
+      await assignQuestions({ examId: assignTarget.id, questionIds, remark: undefined }).unwrap();
+      notify.success('Questions assigned');
+      closeAssign();
+      setAssignTarget(null);
+    } catch {
+      notify.error('Failed to assign questions');
+    }
+  };
+
+  if (isLoading) return <Center py="xl"><Loader /></Center>;
+  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title="Error loading exams" />;
+
+  return (
+    <Stack gap="lg">
+      <Group justify="space-between" align="flex-end">
+        <div>
+          <Title order={2}>Examinations</Title>
+          <Text fz="sm" c="dimmed">Manage exams, assign questions, and track results</Text>
+        </div>
+        {!showForm && (
+          <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
+            Create Exam
+          </Button>
+        )}
+      </Group>
+
+      {showForm && (
+        <ExamForm
+          editing={editing}
+          certOptions={certOptions}
+          isSubmitting={isCreating || isUpdating}
+          onSubmit={handleSubmit}
+          onCancel={resetForm}
+        />
+      )}
+
+      <Paper withBorder radius="md">
+        <Table striped highlightOnHover>
+          <Table.Thead bg="var(--mantine-color-default-hover)">
+            <Table.Tr>
+              <Table.Th>Title</Table.Th>
+              <Table.Th>Certification</Table.Th>
+              <Table.Th>Date</Table.Th>
+              <Table.Th>Type</Table.Th>
+              <Table.Th>Form</Table.Th>
+              <Table.Th>Venue</Table.Th>
+              <Table.Th>Questions</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th />
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {exams.map((exam) => (
+              <Table.Tr key={exam.id}>
+                <Table.Td>
+                  <Text fz="sm" fw={500} c="blue" style={{ cursor: 'pointer' }} onClick={() => navigate(`/exams/${exam.id}`)}>
+                    {exam.title.en}
+                  </Text>
+                </Table.Td>
+                <Table.Td><Text fz="sm">{getCertName(exam.certificationId)}</Text></Table.Td>
+                <Table.Td><Text fz="sm">{exam.date}</Text></Table.Td>
+                <Table.Td><Badge size="sm" variant="light" color={exam.type === 'WRITTEN' ? 'blue' : 'orange'}>{exam.type}</Badge></Table.Td>
+                <Table.Td><Badge size="sm" variant="light" color={exam.form === 'ESSAY' ? 'blue' : 'violet'}>{exam.form}</Badge></Table.Td>
+                <Table.Td><Text fz="sm">{exam.venue}</Text></Table.Td>
+                <Table.Td>
+                  <Button size="xs" variant="subtle" onClick={() => { setAssignTarget(exam); openAssign(); }}>
+                    {exam.questions?.length ?? 0} questions
+                  </Button>
+                </Table.Td>
+                <Table.Td>
+                  <Badge size="sm" variant="light" color={STATUS_COLOR[exam.status]}>{exam.status}</Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Group gap="xs">
+                    <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => { setEditing(exam); setShowForm(true); }}>
+                      <IconEdit size={14} />
+                    </ActionIcon>
+                    <ActionIcon variant="subtle" color="red" size="sm" onClick={() => { setDeleteTarget(exam); openDelete(); }}>
+                      <IconTrash size={14} />
+                    </ActionIcon>
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+            {exams.length === 0 && (
+              <Table.Tr>
+                <Table.Td colSpan={9}>
+                  <Text c="dimmed" ta="center" py="xl">No exams found</Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </Paper>
+
+      {/* Delete confirmation */}
+      <Modal opened={deleteOpened} onClose={closeDelete} title="Delete Exam" size="sm">
+        <Text mb="md">Are you sure you want to delete <strong>{deleteTarget?.title?.en}</strong>?</Text>
+        <Group justify="flex-end">
+          <Button variant="default" onClick={closeDelete} size="sm">Cancel</Button>
+          <Button color="red" onClick={handleDelete} size="sm">Delete</Button>
+        </Group>
+      </Modal>
+
+      {/* Question assignment modal */}
+      <Modal opened={assignOpened} onClose={closeAssign} title={`Assign Questions — ${assignTarget?.title?.en ?? ''}`} size="xl" radius="lg">
+        {assignTarget && (
+          <Stack gap="md">
+            <QuestionAssigner
+              available={allQuestions.map((q) => ({ id: q.id, title: q.title, form: q.form, points: q.points }))}
+              assigned={assignTarget.questions ?? []}
+              onChange={(updated) => {
+                setAssignTarget({ ...assignTarget, questions: updated });
+              }}
+            />
+            <Group justify="space-between">
+              <Group gap="sm">
+                <NumberInput
+                  placeholder="Count"
+                  value={randomCount}
+                  onChange={(v) => setRandomCount(Number(v))}
+                  min={1}
+                  max={allQuestions.length}
+                  size="xs"
+                  style={{ width: 80 }}
+                />
+                <Button size="xs" variant="light" onClick={handleRandomSelect}>
+                  Randomly Select
+                </Button>
+              </Group>
+              <Group gap="sm">
+                <Button variant="default" onClick={closeAssign} size="sm">Cancel</Button>
+                <Button onClick={handleAssign} size="sm">Save Assignments</Button>
+              </Group>
+            </Group>
+          </Stack>
+        )}
+      </Modal>
+    </Stack>
+  );
+}

apps/backoffice/src/app/features/exam/types/exam.ts

@@ -0,0 +1,81 @@
+import type { LocalePair } from '../../certification/types/certification';
+import type { EstimatedTime } from '../../question/types/question';
+import type { QuestionForm } from '../../question/types/question';
+export type { QuestionForm };
+
+export type ExamType = 'WRITTEN' | 'ORAL';
+export type ExamAdministrationMethod = 'OFFLINE' | 'ONLINE';
+export type ExamEvaluationMethod = 'SUM' | 'AVERAGE' | 'PERCENTAGE';
+export type ExamSelectionMethod = 'MANUAL' | 'RANDOM';
+export type ExamStatus = 'PENDING' | 'ACTIVE' | 'COMPLETED' | 'CANCELLED' | 'POSTPONED' | 'PUBLISHED';
+
+export interface QuestionBrief {
+  id: string;
+  title: LocalePair;
+  form: QuestionForm;
+  points: number;
+}
+
+export interface Exam {
+  id: string;
+  certificationId: string;
+  certification?: { id: string; name: LocalePair };
+  title: LocalePair;
+  direction: LocalePair | null;
+  date: string;
+  givenTime: EstimatedTime | null;
+  type: ExamType;
+  form: QuestionForm;
+  venue: string;
+  administrationMethod: ExamAdministrationMethod;
+  evaluationMethod: ExamEvaluationMethod;
+  selectionMethod: ExamSelectionMethod;
+  cuttingPoint: number;
+  status: ExamStatus;
+  questions?: QuestionBrief[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ListResponse<T> {
+  total: number;
+  items: T[];
+}
+
+export interface CreateExamPayload {
+  certificationId: string;
+  title: LocalePair;
+  direction?: LocalePair;
+  date: string;
+  givenTime: EstimatedTime;
+  type: ExamType;
+  form: QuestionForm;
+  venue: string;
+  administrationMethod: ExamAdministrationMethod;
+  evaluationMethod: ExamEvaluationMethod;
+  selectionMethod?: ExamSelectionMethod;
+  cuttingPoint: number;
+}
+
+export interface UpdateExamPayload {
+  id: string;
+  certificationId?: string;
+  title?: LocalePair;
+  direction?: LocalePair;
+  date?: string;
+  givenTime?: EstimatedTime;
+  type?: ExamType;
+  form?: QuestionForm;
+  venue?: string;
+  administrationMethod?: ExamAdministrationMethod;
+  evaluationMethod?: ExamEvaluationMethod;
+  selectionMethod?: ExamSelectionMethod;
+  cuttingPoint?: number;
+  status?: ExamStatus;
+}
+
+export interface AssignQuestionsPayload {
+  examId: string;
+  questionIds: string[];
+  remark?: LocalePair;
+}