Merge branch 'WorkflowChange' into logestic_chnage

.github/workflows/deploy.yml

@@ -33,14 +33,15 @@ jobs:
       BUILD_ENV_FILE: ${{ matrix.build_env_file }}
       DOCKER_BUILDKIT: "1"
       COMPOSE_DOCKER_CLI_BUILD: "1"
+      ENV_MANAGER_TOKEN: ${{ secrets.ENV_MANAGER_TOKEN }}     
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Sync environment from server
+      - name: Sync environment from Env Manager App
         run: |
           chmod +x scripts/deploy/*.sh
-          ./scripts/deploy/sync-env-from-server.sh "${{ matrix.service }}"
+          ./scripts/deploy/sync-env-from-env-manager.sh "${{ matrix.service }}"
 
       - name: Set compose project name
         run: |

Dockerfile

@@ -1,18 +1,19 @@
 FROM node:24-alpine AS deps
 WORKDIR /app
-COPY package.json package-lock.json* ./
+RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 COPY local-packages/ ./local-packages/
 RUN --mount=type=secret,id=npmrc,target=/root/.npmrc \
-    npm install --legacy-peer-deps
+    pnpm install --frozen-lockfile
 
 FROM deps AS base
 COPY . .
 
 FROM base AS portal-build
-RUN npm run build:portal
+RUN pnpm run build:portal
 
 FROM base AS backoffice-build
-RUN npm run build:backoffice
+RUN pnpm run build:backoffice
 
 FROM nginx:1.29-alpine AS portal
 COPY --from=portal-build /app/dist/apps/portal /usr/share/nginx/html

apps/backoffice/src/app/features/certificate-designer/components/BlockPropertiesPanel.tsx

@@ -1,5 +1,6 @@
 import {
   ActionIcon,
+  Button,
   ColorInput,
   Group,
   NumberInput,
@@ -11,7 +12,7 @@ import {
   TextInput,
   Tooltip,
 } from '@mantine/core';
-import { IconTrash } from '@tabler/icons-react';
+import { IconBold, IconItalic, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { TemplateFieldPlacement, TemplateVariable } from '@ema-platform/api';
 
@@ -43,7 +44,17 @@ export function BlockPropertiesPanel({
     );
   }
 
-  const isLiteral = block.variable === null;
+  const current = block;
+  const isLiteral = current.variable === null;
+  const isImage = current.type === 'image';
+  const variableByKey = new Map(variables.map((v) => [v.key, v]));
+
+  const selectVariable = (key: string | null) => {
+    if (!key) return;
+    const kind: 'text' | 'image' =
+      variableByKey.get(key)?.kind === 'image' ? 'image' : 'text';
+    onChange({ ...current, variable: key, type: kind });
+  };
 
   return (
     <Paper withBorder p="md" radius="md">
@@ -70,11 +81,9 @@ export function BlockPropertiesPanel({
           value={isLiteral ? 'text' : 'variable'}
           disabled={disabled}
           onChange={(value) =>
-            onChange(
-              value === 'text'
-                ? { ...block, variable: null, text: block.text ?? '' }
-                : { ...block, variable: variables[0]?.key ?? 'companyName' },
-            )
+            value === 'text'
+              ? onChange({ ...block, variable: null, type: 'text', text: block.text ?? '' })
+              : selectVariable(variables[0]?.key ?? 'companyName')
           }
           data={[
             { value: 'variable', label: t('designer.blockVariable', 'Variable') },
@@ -94,24 +103,26 @@ export function BlockPropertiesPanel({
             label={t('designer.blockVariableLabel', 'Variable')}
             data={variables.map((variable) => ({
               value: variable.key,
-              label: variable.label,
+              label: variable.kind === 'image' ? `🖼 ${variable.label}` : variable.label,
             }))}
             value={block.variable}
-            onChange={(value) => onChange({ ...block, variable: value })}
+            onChange={selectVariable}
             searchable
             disabled={disabled}
           />
         )}
 
         <Group gap="xs" grow>
-          <NumberInput
-            label={t('designer.blockFontSize', 'Font size')}
-            value={block.fontSize ?? 14}
-            onChange={(value) => onChange({ ...block, fontSize: Number(value) || 14 })}
-            min={4}
-            max={200}
-            disabled={disabled}
-          />
+          {!isImage && (
+            <NumberInput
+              label={t('designer.blockFontSize', 'Font size')}
+              value={block.fontSize ?? 14}
+              onChange={(value) => onChange({ ...block, fontSize: Number(value) || 14 })}
+              min={4}
+              max={200}
+              disabled={disabled}
+            />
+          )}
           <NumberInput
             label={t('designer.blockWidth', 'Width (%)')}
             value={block.widthPct}
@@ -149,42 +160,62 @@ export function BlockPropertiesPanel({
           />
         </Group>
 
-        <SegmentedControl
-          fullWidth
-          size="xs"
-          value={block.align ?? 'left'}
-          disabled={disabled}
-          onChange={(value) =>
-            onChange({ ...block, align: value as TemplateFieldPlacement['align'] })
-          }
-          data={[
-            { value: 'left', label: t('designer.alignLeft', 'Left') },
-            { value: 'center', label: t('designer.alignCenter', 'Centre') },
-            { value: 'right', label: t('designer.alignRight', 'Right') },
-          ]}
-        />
+        {!isImage && (
+          <>
+            <SegmentedControl
+              fullWidth
+              size="xs"
+              value={block.align ?? 'left'}
+              disabled={disabled}
+              onChange={(value) =>
+                onChange({ ...block, align: value as TemplateFieldPlacement['align'] })
+              }
+              data={[
+                { value: 'left', label: t('designer.alignLeft', 'Left') },
+                { value: 'center', label: t('designer.alignCenter', 'Centre') },
+                { value: 'right', label: t('designer.alignRight', 'Right') },
+                { value: 'justify', label: t('designer.alignJustify', 'Justify') },
+              ]}
+            />
 
-        <SegmentedControl
-          fullWidth
-          size="xs"
-          value={block.fontWeight ?? 'normal'}
-          disabled={disabled}
-          onChange={(value) =>
-            onChange({ ...block, fontWeight: value as TemplateFieldPlacement['fontWeight'] })
-          }
-          data={[
-            { value: 'normal', label: t('designer.weightNormal', 'Normal') },
-            { value: 'bold', label: t('designer.weightBold', 'Bold') },
-          ]}
-        />
+            <Group gap="xs">
+              <Button
+                size="xs"
+                variant={block.fontWeight === 'bold' ? 'filled' : 'default'}
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    ...block,
+                    fontWeight: block.fontWeight === 'bold' ? 'normal' : 'bold',
+                  })
+                }
+              >
+                <IconBold size={14} />
+              </Button>
+              <Button
+                size="xs"
+                variant={block.fontStyle === 'italic' ? 'filled' : 'default'}
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    ...block,
+                    fontStyle: block.fontStyle === 'italic' ? 'normal' : 'italic',
+                  })
+                }
+              >
+                <IconItalic size={14} />
+              </Button>
+            </Group>
 
-        <ColorInput
-          label={t('designer.blockColor', 'Colour')}
-          value={block.color ?? '#111111'}
-          onChange={(value) => onChange({ ...block, color: value })}
-          disabled={disabled}
-          format="hex"
-        />
+            <ColorInput
+              label={t('designer.blockColor', 'Colour')}
+              value={block.color ?? '#111111'}
+              onChange={(value) => onChange({ ...block, color: value })}
+              disabled={disabled}
+              format="hex"
+            />
+          </>
+        )}
       </Stack>
     </Paper>
   );

apps/backoffice/src/app/features/certificate-designer/components/DesignerToolbar.tsx

@@ -1,13 +1,17 @@
 import { Button, Group, NumberInput, Select, Tooltip } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { useLocalized, type LicenseType } from '@ema-platform/api';
+import { useLocalized, type LicenseType, type Rank } from '@ema-platform/api';
 import { groupedTypeOptions } from '../config/designer';
 
 interface Props {
   licenseTypes: LicenseType[];
   typeId: string | null;
   onTypeChange: (id: string | null) => void;
+  /** The selected licence type's rank ladder — empty for non-CoC/CoP types. */
+  ranks: Rank[];
+  rankId: string | null;
+  onRankChange: (id: string | null) => void;
   validityMonths: number;
   onValidityChange: (months: number) => void;
   currentValidityMonths?: number | null;
@@ -22,6 +26,9 @@ export function DesignerToolbar({
   licenseTypes,
   typeId,
   onTypeChange,
+  ranks,
+  rankId,
+  onRankChange,
   validityMonths,
   onValidityChange,
   currentValidityMonths,
@@ -49,6 +56,23 @@ export function DesignerToolbar({
         w={340}
       />
 
+      {/* CoC/CoP only — a rank can carry its own design (e.g. Master's
+          certificate differs from an OOW's). "Default" (null) is the design
+          every other rank under the type falls back to. */}
+      {ranks.length > 0 && (
+        <Select
+          label={t('designer.rank', 'Rank')}
+          description={t('designer.rankHint', 'Leave as Default to design for every rank')}
+          data={[
+            { value: '', label: t('designer.rankDefault', 'Default (all ranks)') },
+            ...ranks.map((r) => ({ value: r.id, label: localized(r.name) })),
+          ]}
+          value={rankId ?? ''}
+          onChange={(value) => onRankChange(value || null)}
+          w={220}
+        />
+      )}
+
       {/* Validity lives beside the design because it is the other half of
           what a certificate promises. */}
       <NumberInput

apps/backoffice/src/app/features/certificate-designer/components/TemplateCanvas.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Paper, Text } from '@mantine/core';
+import { IconPhoto } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { TemplateFieldPlacement, TemplateLogoPlacement } from '@ema-platform/api';
 
@@ -257,6 +258,7 @@ export function TemplateCanvas({
 
         {placements.map((block) => {
           const isSelected = block.id === selectedId;
+          const isImage = block.type === 'image';
           return (
             <div
               key={block.id}
@@ -271,6 +273,7 @@ export function TemplateCanvas({
                 width: `${block.widthPct}%`,
                 fontSize: block.fontSize ?? 14,
                 fontWeight: block.fontWeight ?? 'normal',
+                fontStyle: block.fontStyle ?? 'normal',
                 textAlign: block.align ?? 'left',
                 color: block.color ?? '#111111',
                 cursor: disabled ? 'default' : 'move',
@@ -283,9 +286,30 @@ export function TemplateCanvas({
                 lineHeight: 1.3,
                 wordWrap: 'break-word',
                 userSelect: 'none',
+                // An image block has no real image to show here — the actual
+                // data URI is only resolved server-side at render/preview
+                // time — so it gets a fixed square footprint and an icon
+                // instead of stretching to a text block's shape.
+                ...(isImage
+                  ? {
+                      aspectRatio: '1',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      background: isSelected
+                        ? 'rgba(34,139,230,0.08)'
+                        : 'var(--mantine-color-gray-1)',
+                    }
+                  : {}),
               }}
             >
-              {block.variable ? `{{${block.variable}}}` : block.text || ' '}
+              {isImage ? (
+                <IconPhoto size={18} color="var(--mantine-color-gray-6)" />
+              ) : block.variable ? (
+                `{{${block.variable}}}`
+              ) : (
+                block.text || ' '
+              )}
 
               {isSelected && !disabled && (
                 <span

apps/backoffice/src/app/features/certificate-designer/components/TemplateVariableList.tsx

@@ -1,19 +1,15 @@
 import { Button, Code, ScrollArea, Stack, Text, Tooltip } from '@mantine/core';
-import { IconPlus } from '@tabler/icons-react';
+import { IconPhoto, IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-
-interface Variable {
-  key: string;
-  label: string;
-}
+import type { TemplateVariable } from '@ema-platform/api';
 
 interface Props {
-  variables: Variable[];
+  variables: TemplateVariable[];
   disabled: boolean;
   /** Canvas mode: drops a block onto the page. Source mode: inserts at caret. */
   canvasMode: boolean;
   onInsert: (key: string) => void;
-  onAddBlock: (key: string) => void;
+  onAddBlock: (key: string, kind: 'text' | 'image') => void;
   onAddTextBlock: () => void;
 }
 
@@ -60,8 +56,13 @@ export function TemplateVariableList({
                 variant="default"
                 justify="flex-start"
                 disabled={disabled}
+                leftSection={
+                  variable.kind === 'image' ? <IconPhoto size={12} /> : undefined
+                }
                 onClick={() =>
-                  canvasMode ? onAddBlock(variable.key) : onInsert(variable.key)
+                  canvasMode
+                    ? onAddBlock(variable.key, variable.kind === 'image' ? 'image' : 'text')
+                    : onInsert(variable.key)
                 }
               >
                 <Code fz={10}>{`{{${variable.key}}}`}</Code>

apps/backoffice/src/app/features/certificate-designer/config/layout-compiler.ts

@@ -41,14 +41,43 @@ function logoHtml(logoUrl: string, placement: TemplateLogoPlacement): string {
   return `    <img class="ema-logo" src="${escapeHtml(logoUrl)}" alt="" style="position:absolute;${position}width:${width}%;" />\n`;
 }
 
+/**
+ * Variable keys the renderer fills with a data URI — the fallback for a
+ * block placed before `type` existed on it. Keep in sync with
+ * `IMAGE_VARIABLE_KEYS` in the server's template-variables.ts; a new image
+ * variable added there should be added here too.
+ */
+const IMAGE_VARIABLE_KEYS = new Set([
+  'logo',
+  'holderPhoto',
+  'qrImage',
+  'sealImage',
+  'signatureImage',
+  'seafarerSignature',
+]);
+
+function isImageBlock(block: TemplateFieldPlacement): boolean {
+  if (block.type) return block.type === 'image';
+  return !!block.variable && IMAGE_VARIABLE_KEYS.has(block.variable);
+}
+
 function blockHtml(block: TemplateFieldPlacement): string {
   const x = pct(block.xPct, 0);
   const y = pct(block.yPct, 0);
   // Minimum 1%, matching the server compiler: a zero-width block would render
   // as an invisible sliver rather than as the mistake it is.
   const width = pct(block.widthPct, 30, 1);
+
+  if (isImageBlock(block) && block.variable) {
+    // Triple-brace: the value is a data URI, not markup — escaping it turns
+    // every "&" into "&amp;" and corrupts the src.
+    const style = `position:absolute;left:${x}%;top:${y}%;width:${width}%;object-fit:contain;`;
+    return `    <img class="ema-block" style="${style}" src="{{{${block.variable}}}}" alt="" />\n`;
+  }
+
   const size = block.fontSize ?? 14;
   const weight = block.fontWeight === 'bold' ? 'bold' : 'normal';
+  const style_ = block.fontStyle === 'italic' ? 'italic' : 'normal';
   const align = block.align ?? 'left';
   const color = escapeHtml(block.color ?? '#111111');
 
@@ -58,7 +87,7 @@ function blockHtml(block: TemplateFieldPlacement): string {
 
   const style =
     `position:absolute;left:${x}%;top:${y}%;width:${width}%;` +
-    `font-size:${size}px;font-weight:${weight};text-align:${align};color:${color};`;
+    `font-size:${size}px;font-weight:${weight};font-style:${style_};text-align:${align};color:${color};`;
 
   return `    <div class="ema-block" style="${style}">${content}</div>\n`;
 }

apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts

@@ -90,23 +90,46 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
   const selectedBlock =
     placements.find((block) => block.id === selectedBlockId) ?? null;
 
-  /** Drops a new block near the top-left, where it is immediately visible. */
-  const addBlock = useCallback((variable: string | null, text?: string) => {
-    const block: TemplateFieldPlacement = {
-      id: blockId(),
-      variable,
-      text,
-      xPct: 10,
-      yPct: 10,
-      widthPct: 30,
-      fontSize: 14,
-      fontWeight: 'normal',
-      align: 'left',
-      color: '#111111',
-    };
-    setPlacements((prev) => [...prev, block]);
-    setSelectedBlockId(block.id);
-  }, []);
+  /**
+   * Drops a new block near the top-left, where it is immediately visible.
+   *
+   * An image block gets a square-ish default footprint instead of the text
+   * defaults (fontSize/color/align mean nothing on an `<img>`) — a seal or
+   * signature dropped at 30% width and no explicit height would otherwise
+   * stretch to whatever the image's own aspect ratio makes of that width,
+   * which reads as broken until the author manually resizes it.
+   */
+  const addBlock = useCallback(
+    (variable: string | null, text?: string, kind: 'text' | 'image' = 'text') => {
+      const block: TemplateFieldPlacement =
+        kind === 'image'
+          ? {
+              id: blockId(),
+              variable,
+              type: 'image',
+              xPct: 10,
+              yPct: 10,
+              widthPct: 15,
+            }
+          : {
+              id: blockId(),
+              variable,
+              text,
+              type: 'text',
+              xPct: 10,
+              yPct: 10,
+              widthPct: 30,
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontStyle: 'normal',
+              align: 'left',
+              color: '#111111',
+            };
+      setPlacements((prev) => [...prev, block]);
+      setSelectedBlockId(block.id);
+    },
+    [],
+  );
 
   const updateBlock = useCallback((next: TemplateFieldPlacement) => {
     setPlacements((prev) =>

apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx

@@ -26,6 +26,7 @@ import {
   useGetBuiltInTemplateQuery,
   useGetLicenseTemplatesQuery,
   useGetLicenseTypesQuery,
+  useGetRanksQuery,
   useGetTemplateVariablesQuery,
   usePublishLicenseTemplateMutation,
   useUpdateLicenseValidityMutation,
@@ -66,14 +67,19 @@ export function CertificateDesignerPage() {
 
   const { data: licenseTypes } = useGetLicenseTypesQuery();
   const [typeId, setTypeId] = useState<string | null>(null);
+  const [rankId, setRankId] = useState<string | null>(null);
 
   const {
-    data: templates = [],
+    data: allTemplates = [],
     isLoading,
     isError,
     error,
     refetch,
   } = useGetLicenseTemplatesQuery(typeId ?? undefined, { skip: !typeId });
+  // The list is per licence type; a rank-specific design and the type's
+  // default both come back, so the version list is scoped to whichever the
+  // toolbar has selected.
+  const templates = allTemplates.filter((tpl) => (tpl.rankId ?? null) === rankId);
   const { data: variables = [] } = useGetTemplateVariablesQuery();
   const { data: builtIn } = useGetBuiltInTemplateQuery();
 
@@ -95,6 +101,27 @@ export function CertificateDesignerPage() {
 
   const selectedType = licenseTypes?.items?.find((type) => type.id === typeId);
 
+  // A rank ladder only exists for CoC/CoP — every other licence type designs
+  // one certificate for everyone who holds it. Keyed on `key`, not
+  // `certificateCategory`: that STCW-mapping column is unset on the seeded
+  // CoC/CoP rows (it's authored later, per StcwMappingPanel), while `key` is
+  // the stable identity CertificateEligibilityService itself branches on.
+  // CoC/CoP are each a single LicenseType spanning every department's ladder
+  // (the applicant's own department, not the type, decides which ladder they
+  // climb), so the picker offers every rank in the ladder across all
+  // departments rather than one department's.
+  const rankCategory: 'COC' | 'COP' | null =
+    selectedType?.key === 'CERTIFICATE_OF_COMPETENCY'
+      ? 'COC'
+      : selectedType?.key === 'CERTIFICATE_OF_PROFICIENCY'
+        ? 'COP'
+        : null;
+  const isRankScoped = rankCategory !== null;
+  const { data: allRanks } = useGetRanksQuery(undefined, { skip: !isRankScoped });
+  const ranks = (allRanks?.items ?? [])
+    .filter((r) => r.certificateCategory === rankCategory)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
   // Default to the first licence type so the page is never an empty shell.
   useEffect(() => {
     if (!typeId && licenseTypes?.items?.length) setTypeId(licenseTypes.items[0].id);
@@ -104,6 +131,12 @@ export function CertificateDesignerPage() {
     if (selectedType) setValidityMonths(selectedType.validityMonths ?? 12);
   }, [selectedType]);
 
+  // Switching licence type leaves a stale rank selected from the previous
+  // type's ladder — reset to the type's default design.
+  useEffect(() => {
+    setRankId(null);
+  }, [typeId]);
+
   function startNewVersion() {
     setNewName(
       `${selectedType?.name?.en ?? 'Certificate'} v${(templates[0]?.version ?? 0) + 1}`,
@@ -130,6 +163,12 @@ export function CertificateDesignerPage() {
           setTypeId(value);
           draft.setSelectedId(null);
         }}
+        ranks={ranks}
+        rankId={rankId}
+        onRankChange={(value) => {
+          setRankId(value);
+          draft.setSelectedId(null);
+        }}
         validityMonths={validityMonths}
         onValidityChange={setValidityMonths}
         currentValidityMonths={selectedType?.validityMonths}
@@ -366,7 +405,7 @@ export function CertificateDesignerPage() {
             disabled={editingLocked}
             canvasMode={mode === 'canvas'}
             onInsert={draft.insertVariable}
-            onAddBlock={(key) => draft.addBlock(key)}
+            onAddBlock={(key, kind) => draft.addBlock(key, undefined, kind)}
             onAddTextBlock={() => draft.addBlock(null, 'Text')}
           />
         </Group>
@@ -382,6 +421,7 @@ export function CertificateDesignerPage() {
           run(async () => {
             const created = await createTemplate({
               licenseTypeId: typeId as string,
+              rankId,
               name: newName.trim(),
               hbsSource: templates.length ? undefined : builtIn?.hbsSource,
             }).unwrap();

apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx

@@ -1,4 +1,5 @@
-import { Autocomplete, Checkbox, Group, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Autocomplete, Checkbox, Group, Paper, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { FieldCondition, FormSchemaPalette } from '@ema-platform/api';
 import { useLocalized } from '@ema-platform/api';
@@ -7,6 +8,9 @@ import type { ConditionTarget } from '../config/schema-paths';
 /** `FieldCondition` plus the renewal-only extra `DocumentRequirement.conditionExpression` carries. */
 export type ConditionValue = FieldCondition & { previousDocExpired?: string };
 
+/** One editable `anyOf` arm — a single-field condition, same shape a plain condition holds. */
+type ConditionArm = Omit<ConditionValue, 'anyOf' | 'previousDocExpired'>;
+
 type Operator = 'equals' | 'notEquals' | 'in' | 'isSet';
 
 function operatorOf(condition: ConditionValue | undefined): Operator | null {
@@ -29,6 +33,196 @@ function coerce(raw: string, targetType: string | undefined): string | number |
   return raw;
 }
 
+/** One-line summary of a condition for read-only chips ("when X = Y", "when X = Y or W = Z"). */
+export function describeCondition(
+  condition: ConditionValue,
+  t: (key: string, fallback: string) => string,
+): string {
+  if (condition.anyOf?.length) {
+    return condition.anyOf.map((arm) => describeCondition(arm, t)).join(` ${t('certReq.condition.or', 'or')} `);
+  }
+  if (!condition.field) return '';
+  const parts = [condition.field];
+  if (condition.equals !== undefined) parts.push(`= ${condition.equals}`);
+  if (condition.notEquals !== undefined) parts.push(`≠ ${condition.notEquals}`);
+  if (condition.in !== undefined) parts.push(`∈ [${condition.in.join(', ')}]`);
+  if (condition.isSet !== undefined) {
+    parts.push(condition.isSet ? t('certReq.condition.isSet', 'is set') : t('certReq.condition.isNotSet', 'is not set'));
+  }
+  return parts.join(' ');
+}
+
+/**
+ * The field/operator/value trio for one condition — a plain condition, or one
+ * arm of an `anyOf`. No enable switch of its own; the caller owns whether
+ * this row exists at all.
+ */
+function ConditionArmFields({
+  value,
+  onChange,
+  targets,
+  palette,
+}: {
+  value: ConditionArm;
+  onChange: (value: ConditionArm) => void;
+  targets: ConditionTarget[];
+  palette: FormSchemaPalette | undefined;
+}) {
+  const { t } = useTranslation();
+  const localized = useLocalized();
+
+  const operator = operatorOf(value) ?? 'equals';
+  const target = targets.find((c) => c.path === value.field);
+  const operators = palette?.conditionOperators ?? ['equals', 'notEquals', 'in', 'isSet'];
+
+  function setField(field: string) {
+    onChange({ field, ...(operator === 'isSet' ? { isSet: true } : { equals: '' }) });
+  }
+
+  function setOperator(next: Operator) {
+    if (!value.field) return;
+    const base: ConditionArm = { field: value.field };
+    if (next === 'isSet') base.isSet = true;
+    else if (next === 'in') base.in = [];
+    else if (next === 'notEquals') base.notEquals = '';
+    else base.equals = '';
+    onChange(base);
+  }
+
+  function setValueRaw(raw: string) {
+    if (!value.field) return;
+    const coerced = coerce(raw, target?.field.type);
+    if (operator === 'equals') onChange({ field: value.field, equals: coerced });
+    else if (operator === 'notEquals') onChange({ field: value.field, notEquals: coerced });
+  }
+
+  function setInValues(raws: string[]) {
+    if (!value.field) return;
+    onChange({
+      field: value.field,
+      in: raws.map((r) => coerce(r, target?.field.type)) as (string | number)[],
+    });
+  }
+
+  return (
+    <Stack gap="xs">
+      <Autocomplete
+        label={t('certReq.condition.field', 'Field path')}
+        placeholder="certificate.rank"
+        description={t(
+          'certReq.condition.fieldHelp',
+          'Dot path into the form, e.g. sectionKey.fieldKey',
+        )}
+        data={targets.map((c) => c.path)}
+        value={value.field ?? ''}
+        onChange={setField}
+      />
+
+      <Group grow align="flex-start">
+        <Select
+          label={t('certReq.condition.operator', 'Operator')}
+          data={operators.map((op) => ({ value: op, label: op }))}
+          value={operator}
+          onChange={(v) => v && setOperator(v as Operator)}
+          allowDeselect={false}
+        />
+
+        {operator !== 'isSet' && operator !== 'in' && target?.field.type === 'SELECT' && (
+          <Select
+            label={t('certReq.condition.value', 'Value')}
+            data={(target.field.options ?? []).map((o) => ({
+              value: o.value,
+              label: localized(o.label) || o.value,
+            }))}
+            value={String(value.equals ?? value.notEquals ?? '')}
+            onChange={(v) => v !== null && setValueRaw(v)}
+          />
+        )}
+
+        {operator !== 'isSet' && operator !== 'in' && target?.field.type !== 'SELECT' && (
+          target?.field.type === 'BOOLEAN' ? (
+            <Checkbox
+              mt="xl"
+              label={t('certReq.condition.value', 'Value')}
+              checked={Boolean(value.equals ?? value.notEquals ?? false)}
+              onChange={(e) => setValueRaw(String(e.currentTarget.checked))}
+            />
+          ) : (
+            <TextInput
+              label={t('certReq.condition.value', 'Value')}
+              type={target?.field.type === 'NUMBER' || target?.field.type === 'MONEY' ? 'number' : 'text'}
+              value={String(value.equals ?? value.notEquals ?? '')}
+              onChange={(e) => setValueRaw(e.currentTarget.value)}
+            />
+          )
+        )}
+
+        {operator === 'in' && target?.field.type === 'SELECT' && (
+          <Select
+            label={t('certReq.condition.values', 'Any of')}
+            data={(target.field.options ?? []).map((o) => ({
+              value: o.value,
+              label: localized(o.label) || o.value,
+            }))}
+            multiple={undefined}
+            value={null}
+            onChange={(v) => {
+              if (!v) return;
+              const current = (value.in ?? []) as string[];
+              if (!current.includes(v)) setInValues([...current, v]);
+            }}
+          />
+        )}
+
+        {operator === 'in' && target?.field.type !== 'SELECT' && (
+          <TextInput
+            label={t('certReq.condition.values', 'Any of (comma-separated)')}
+            value={(value.in ?? []).join(', ')}
+            onChange={(e) =>
+              setInValues(
+                e.currentTarget.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              )
+            }
+          />
+        )}
+      </Group>
+
+      {operator === 'in' && (value.in?.length ?? 0) > 0 && (
+        <Group gap={4}>
+          {(value.in ?? []).map((v, i) => (
+            <Text
+              key={`${v}-${i}`}
+              fz="xs"
+              px={6}
+              py={2}
+              bg="var(--mantine-color-gray-1)"
+              style={{ borderRadius: 4, cursor: 'pointer' }}
+              onClick={() => setInValues((value.in ?? []).filter((_, idx) => idx !== i).map(String))}
+              title={t('certReq.condition.removeValue', 'Click to remove')}
+            >
+              {String(v)} ×
+            </Text>
+          ))}
+        </Group>
+      )}
+
+      {!target && value.field && (
+        <Text fz="xs" c="dimmed">
+          {t(
+            'certReq.condition.unknownField',
+            'This path is not a field in the current schema yet — it will still be saved as typed.',
+          )}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+const EMPTY_ARM: ConditionArm = { field: '', equals: '' };
+
 /**
  * Authors one `FieldCondition` (`showWhen` on a section/field, or
  * `conditionExpression` on a document requirement).
@@ -38,6 +232,11 @@ function coerce(raw: string, targetType: string | undefined): string | number |
  * SELECT field, the value picker switches to that field's own options
  * instead of free text — the condition can only ever reference an answer
  * that could actually be chosen.
+ *
+ * "Any of these" switches to authoring several single-field conditions whose
+ * OR is the real condition — needed when the same logical value can live on
+ * one of several mutually-exclusive fields (e.g. a rank split by
+ * department, see FieldCondition.anyOf).
  */
 export function ConditionBuilder({
   value,
@@ -54,40 +253,35 @@ export function ConditionBuilder({
   allowClear?: boolean;
 }) {
   const { t } = useTranslation();
-  const localized = useLocalized();
 
   const active = value !== null;
-  const operator = operatorOf(value ?? undefined) ?? 'equals';
-  const target = targets.find((c) => c.path === value?.field);
-  const operators = palette?.conditionOperators ?? ['equals', 'notEquals', 'in', 'isSet'];
+  const isAnyOf = Boolean(value?.anyOf);
+  const arms = (value?.anyOf ?? []) as ConditionArm[];
 
-  function setField(field: string) {
-    onChange({ field, ...(operator === 'isSet' ? { isSet: true } : { equals: '' }) });
+  function setArm(i: number, arm: ConditionArm) {
+    const next = arms.slice();
+    next[i] = arm;
+    onChange({ anyOf: next });
   }
 
-  function setOperator(next: Operator) {
-    if (!value?.field) return;
-    const base: ConditionValue = { field: value.field };
-    if (next === 'isSet') base.isSet = true;
-    else if (next === 'in') base.in = [];
-    else if (next === 'notEquals') base.notEquals = '';
-    else base.equals = '';
-    onChange(base);
+  function addArm() {
+    onChange({ anyOf: [...arms, { ...EMPTY_ARM }] });
   }
 
-  function setValueRaw(raw: string) {
-    if (!value?.field) return;
-    const coerced = coerce(raw, target?.field.type);
-    if (operator === 'equals') onChange({ field: value.field, equals: coerced });
-    else if (operator === 'notEquals') onChange({ field: value.field, notEquals: coerced });
+  function removeArm(i: number) {
+    onChange({ anyOf: arms.filter((_, idx) => idx !== i) });
   }
 
-  function setInValues(raws: string[]) {
-    if (!value?.field) return;
-    onChange({
-      field: value.field,
-      in: raws.map((r) => coerce(r, target?.field.type)) as (string | number)[],
-    });
+  function toggleAnyOf(next: boolean) {
+    if (next) {
+      // Seed the list from whatever single condition already existed, so
+      // switching modes doesn't discard work in progress.
+      const seed: ConditionArm = value?.field ? (value as ConditionArm) : { ...EMPTY_ARM };
+      onChange({ anyOf: [seed] });
+    } else {
+      // Same, in reverse — the first arm becomes the single condition.
+      onChange((arms[0] as ConditionValue) ?? { field: '', equals: '' });
+    }
   }
 
   return (
@@ -102,116 +296,58 @@ export function ConditionBuilder({
 
       {active && (
         <Stack gap="xs" pl={allowClear ? 'md' : 0}>
-          <Autocomplete
-            label={t('certReq.condition.field', 'Field path')}
-            placeholder="certificate.rank"
-            description={t(
-              'certReq.condition.fieldHelp',
-              'Dot path into the form, e.g. sectionKey.fieldKey',
+          <Switch
+            size="sm"
+            label={t(
+              'certReq.condition.anyOfEnable',
+              'Any of these (the value can live on one of several fields)',
             )}
-            data={targets.map((c) => c.path)}
-            value={value?.field ?? ''}
-            onChange={setField}
+            checked={isAnyOf}
+            onChange={(e) => toggleAnyOf(e.currentTarget.checked)}
           />
 
-          <Group grow align="flex-start">
-            <Select
-              label={t('certReq.condition.operator', 'Operator')}
-              data={operators.map((op) => ({ value: op, label: op }))}
-              value={operator}
-              onChange={(v) => v && setOperator(v as Operator)}
-              allowDeselect={false}
-            />
-
-            {operator !== 'isSet' && operator !== 'in' && target?.field.type === 'SELECT' && (
-              <Select
-                label={t('certReq.condition.value', 'Value')}
-                data={(target.field.options ?? []).map((o) => ({
-                  value: o.value,
-                  label: localized(o.label) || o.value,
-                }))}
-                value={String(value?.equals ?? value?.notEquals ?? '')}
-                onChange={(v) => v !== null && setValueRaw(v)}
-              />
-            )}
-
-            {operator !== 'isSet' && operator !== 'in' && target?.field.type !== 'SELECT' && (
-              target?.field.type === 'BOOLEAN' ? (
-                <Checkbox
-                  mt="xl"
-                  label={t('certReq.condition.value', 'Value')}
-                  checked={Boolean(value?.equals ?? value?.notEquals ?? false)}
-                  onChange={(e) => setValueRaw(String(e.currentTarget.checked))}
-                />
-              ) : (
-                <TextInput
-                  label={t('certReq.condition.value', 'Value')}
-                  type={target?.field.type === 'NUMBER' || target?.field.type === 'MONEY' ? 'number' : 'text'}
-                  value={String(value?.equals ?? value?.notEquals ?? '')}
-                  onChange={(e) => setValueRaw(e.currentTarget.value)}
-                />
-              )
-            )}
-
-            {operator === 'in' && target?.field.type === 'SELECT' && (
-              <Select
-                label={t('certReq.condition.values', 'Any of')}
-                data={(target.field.options ?? []).map((o) => ({
-                  value: o.value,
-                  label: localized(o.label) || o.value,
-                }))}
-                multiple={undefined}
-                value={null}
-                onChange={(v) => {
-                  if (!v) return;
-                  const current = (value?.in ?? []) as string[];
-                  if (!current.includes(v)) setInValues([...current, v]);
-                }}
-              />
-            )}
-
-            {operator === 'in' && target?.field.type !== 'SELECT' && (
-              <TextInput
-                label={t('certReq.condition.values', 'Any of (comma-separated)')}
-                value={(value?.in ?? []).join(', ')}
-                onChange={(e) =>
-                  setInValues(
-                    e.currentTarget.value
-                      .split(',')
-                      .map((s) => s.trim())
-                      .filter(Boolean),
-                  )
-                }
-              />
-            )}
-          </Group>
-
-          {operator === 'in' && (value?.in?.length ?? 0) > 0 && (
-            <Group gap={4}>
-              {(value?.in ?? []).map((v, i) => (
-                <Text
-                  key={`${v}-${i}`}
-                  fz="xs"
-                  px={6}
-                  py={2}
-                  bg="var(--mantine-color-gray-1)"
-                  style={{ borderRadius: 4, cursor: 'pointer' }}
-                  onClick={() => setInValues((value?.in ?? []).filter((_, idx) => idx !== i).map(String))}
-                  title={t('certReq.condition.removeValue', 'Click to remove')}
-                >
-                  {String(v)} ×
-                </Text>
+          {isAnyOf ? (
+            <Stack gap="sm">
+              {arms.map((arm, i) => (
+                <Paper key={i} withBorder p="sm" radius="sm">
+                  <Group justify="space-between" mb="xs">
+                    <Text fz="xs" fw={600} c="dimmed">
+                      {t('certReq.condition.anyOfArm', 'Condition {{n}}', { n: i + 1 })}
+                    </Text>
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      size="sm"
+                      disabled={arms.length <= 1}
+                      onClick={() => removeArm(i)}
+                    >
+                      <IconTrash size={14} />
+                    </ActionIcon>
+                  </Group>
+                  <ConditionArmFields
+                    value={arm}
+                    onChange={(next) => setArm(i, next)}
+                    targets={targets}
+                    palette={palette}
+                  />
+                </Paper>
               ))}
-            </Group>
-          )}
-
-          {!target && value?.field && (
-            <Text fz="xs" c="dimmed">
-              {t(
-                'certReq.condition.unknownField',
-                'This path is not a field in the current schema yet — it will still be saved as typed.',
-              )}
-            </Text>
+              <Group>
+                <ActionIcon variant="light" onClick={addArm}>
+                  <IconPlus size={16} />
+                </ActionIcon>
+                <Text fz="xs" c="dimmed">
+                  {t('certReq.condition.anyOfAdd', 'Add another field')}
+                </Text>
+              </Group>
+            </Stack>
+          ) : (
+            <ConditionArmFields
+              value={value as ConditionArm}
+              onChange={(next) => onChange(next)}
+              targets={targets}
+              palette={palette}
+            />
           )}
         </Stack>
       )}

apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx

@@ -94,7 +94,16 @@ export function DocumentRequirementEditorDrawer({
       return;
     }
     if (!draft.name.en?.trim()) return;
-    if (draft.mode === 'CONDITIONAL' && !draft.conditionExpression?.field) {
+    // A condition is either a single-field check or an anyOf list — the CoP
+    // watch_rating_certificate requirement is seeded with anyOf and no field.
+    const hasCondition =
+      Boolean(draft.conditionExpression?.field) ||
+      Boolean(draft.conditionExpression?.anyOf?.length);
+    if (
+      draft.mode === 'CONDITIONAL' &&
+      !hasCondition &&
+      !draft.conditionExpression?.anyOf?.length
+    ) {
       setKeyError(t('certReq.doc.conditionRequired', 'A conditional requirement needs a condition'));
       return;
     }
@@ -167,7 +176,7 @@ export function DocumentRequirementEditorDrawer({
           <>
             <Divider label={t('certReq.condition.title', 'Condition')} labelPosition="left" />
             <ConditionBuilder
-              value={(draft.conditionExpression ?? null) as ConditionValue | null}
+              value={(draft.conditionExpression ?? { field: '', equals: '' }) as ConditionValue}
               onChange={(v) => setDraft((d) => ({ ...d, conditionExpression: v ?? undefined }))}
               targets={conditionTargets}
               palette={palette}

apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx

@@ -17,6 +17,7 @@ import {
 } from '@ema-platform/api';
 import { collectConditionTargets } from '../config/schema-paths';
 import { useRequirementActions } from '../hooks/useRequirementActions';
+import { describeCondition } from './ConditionBuilder';
 import { DocumentRequirementEditorDrawer } from './DocumentRequirementEditorDrawer';
 
 const KINDS: ApplicationKind[] = ['NEW', 'RENEWAL'];
@@ -137,13 +138,9 @@ export function DocumentRequirementsTab({ licenseType }: { licenseType: LicenseT
                         <Text fz="xs" c="dimmed" truncate>
                           key: {req.key} · {req.maxSizeMb}MB · {req.allowedMimeTypes.join(', ')}
                         </Text>
-                        {req.mode === 'CONDITIONAL' && req.conditionExpression?.field && (
+                        {req.mode === 'CONDITIONAL' && req.conditionExpression && (
                           <Text fz="xs" c="violet">
-                            {t('certReq.doc.when', 'when')} {req.conditionExpression.field}{' '}
-                            {req.conditionExpression.equals !== undefined && `= ${req.conditionExpression.equals}`}
-                            {req.conditionExpression.notEquals !== undefined && `≠ ${req.conditionExpression.notEquals}`}
-                            {req.conditionExpression.in !== undefined && `∈ [${req.conditionExpression.in.join(', ')}]`}
-                            {req.conditionExpression.isSet !== undefined && (req.conditionExpression.isSet ? t('certReq.condition.isSet', 'is set') : t('certReq.condition.isNotSet', 'is not set'))}
+                            {t('certReq.doc.when', 'when')} {describeCondition(req.conditionExpression, t)}
                           </Text>
                         )}
                       </div>

apps/backoffice/src/app/features/certification/pages/CertificationPage/columns.tsx

@@ -16,6 +16,15 @@ export function certificationColumns(
       header: t('certification.columns.description'),
       cell: ({ row }) => <Text fz="sm" lineClamp={2} maw={250}>{row.original.description[locale]}</Text>,
     },
+    {
+      header: t('certification.columns.rank', 'Rank'),
+      cell: ({ row }) =>
+        row.original.rankKey ? (
+          <Badge size="sm" variant="outline" color="violet">{row.original.rankKey}</Badge>
+        ) : (
+          <Text fz="sm" c="dimmed">—</Text>
+        ),
+    },
     {
       header: t('certification.columns.status'),
       cell: ({ row }) => (

apps/backoffice/src/app/features/certification/pages/CertificationPage/index.tsx

@@ -1,28 +1,31 @@
 import { useState } from 'react';
-import {Stack, Button, Modal, Text, TextInput, Textarea, Card} from '@mantine/core';
+import {Stack, Button, Modal, Text, TextInput, Textarea, Select, Card} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import {IconPlus} from '@tabler/icons-react';
 import { AdvancedTable, ErrorState, ModalFooter, notify, PageHeader, useErrorHandler, useServerTable } from '@ema-platform/ui';
+import { useGetRanksQuery, useLocalized } from '@ema-platform/api';
 import {
   useGetCertificationsQuery,
   useCreateCertificationMutation,
   useUpdateCertificationMutation,
   useDeleteCertificationMutation,
 } from '../../api/certification-api';
-import type { Certification } from '../../types/certification';
+import { type Certification } from '../../types/certification';
 import { certificationColumns } from './columns';
 import { certificationActionsColumn } from './actions';
 
 function CertificationForm({
   editing,
+  rankOptions,
   isSubmitting,
   onSubmit,
   onCancel,
 }: {
   editing: Certification | null;
+  rankOptions: { value: string; label: string }[];
   isSubmitting: boolean;
-  onSubmit: (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => void;
+  onSubmit: (values: { nameEn: string; nameAm: string; descEn: string; descAm: string; rankKey: string | null }, isEdit: boolean) => void;
   onCancel: () => void;
 }) {
   const { t } = useTranslation();
@@ -30,6 +33,7 @@ function CertificationForm({
   const [nameAm, setNameAm] = useState(editing?.name?.am ?? '');
   const [descEn, setDescEn] = useState(editing?.description?.en ?? '');
   const [descAm, setDescAm] = useState(editing?.description?.am ?? '');
+  const [rankKey, setRankKey] = useState<string | null>(editing?.rankKey ?? null);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -37,7 +41,7 @@ function CertificationForm({
       notify.error('Name fields are required');
       return;
     }
-    onSubmit({ nameEn, nameAm, descEn, descAm }, !!editing);
+    onSubmit({ nameEn, nameAm, descEn, descAm, rankKey }, !!editing);
   };
 
   return (
@@ -48,6 +52,17 @@ function CertificationForm({
           <TextInput label={t('certification.form.nameAm')} placeholder={t('certification.form.nameAmPlaceholder')} value={nameAm} onChange={(e) => setNameAm(e.currentTarget.value)} size="sm" required />
           <Textarea label={t('certification.form.descEn')} placeholder={t('certification.form.descEnPlaceholder')} value={descEn} onChange={(e) => setDescEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
           <Textarea label={t('certification.form.descAm')} placeholder={t('certification.form.descAmPlaceholder')} value={descAm} onChange={(e) => setDescAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
+          <Select
+            label={t('certification.form.rankKey', 'STCW rank (for exam scheduling)')}
+            description={t('certification.form.rankKeyHint', 'Leave blank if this certification is not part of the examined CoC/CoP ladder.')}
+            placeholder={t('certification.form.rankKeyPlaceholder', 'Not rank-specific')}
+            data={rankOptions}
+            value={rankKey}
+            onChange={setRankKey}
+            size="sm"
+            clearable
+            searchable
+          />
           <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">{t('certification.cancel')}</Button>
             <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('certification.update') : t('certification.create')}</Button>
@@ -62,7 +77,10 @@ export function CertificationPage() {
   const { t, i18n } = useTranslation();
   const locale = i18n.language as 'en' | 'am';
   const { handleError } = useErrorHandler();
+  const localized = useLocalized();
   const { data, isFetching, isError, refetch } = useGetCertificationsQuery();
+  const { data: rankRes } = useGetRanksQuery();
+  const rankOptions = (rankRes?.items ?? []).map((r) => ({ value: r.key, label: localized(r.name) }));
   const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
   const [createCert, { isLoading: isCreating }] = useCreateCertificationMutation();
   const [updateCert, { isLoading: isUpdating }] = useUpdateCertificationMutation();
@@ -80,15 +98,17 @@ export function CertificationPage() {
     setShowForm(false);
   };
 
-  const handleSubmit = async (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => {
+  const handleSubmit = async (values: { nameEn: string; nameAm: string; descEn: string; descAm: string; rankKey: string | null }, isEdit: boolean) => {
     const name = { en: values.nameEn, am: values.nameAm };
     const description = { en: values.descEn, am: values.descAm };
     try {
       if (isEdit && editing) {
-        await updateCert({ id: editing.id, name, description }).unwrap();
+        // null clears a previously-set rank; undefined would leave it
+        // untouched server-side, so the two are not interchangeable here.
+        await updateCert({ id: editing.id, name, description, rankKey: values.rankKey }).unwrap();
         notify.success(t('certification.updated'));
       } else {
-        await createCert({ name, description }).unwrap();
+        await createCert({ name, description, rankKey: values.rankKey ?? undefined }).unwrap();
         notify.success(t('certification.created'));
       }
       resetForm();
@@ -140,6 +160,7 @@ export function CertificationPage() {
       {showForm && (
         <CertificationForm
           editing={editing}
+          rankOptions={rankOptions}
           isSubmitting={isCreating || isUpdating}
           onSubmit={handleSubmit}
           onCancel={resetForm}

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

@@ -8,6 +8,7 @@ export interface Certification {
   name: LocalePair;
   description: LocalePair;
   isActive: boolean;
+  rankKey: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -20,6 +21,7 @@ export interface ListResponse<T> {
 export interface CreateCertificationPayload {
   name: LocalePair;
   description: LocalePair;
+  rankKey?: string;
 }
 
 export interface UpdateCertificationPayload {
@@ -27,4 +29,6 @@ export interface UpdateCertificationPayload {
   name?: LocalePair;
   description?: LocalePair;
   isActive?: boolean;
+  /** Omit to leave unchanged, null to clear a previously-set rank. */
+  rankKey?: string | null;
 }

apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/RankDepartmentTab.tsx

@@ -0,0 +1,554 @@
+import { useCallback, useState } from "react";
+import {
+  Alert,
+  Button,
+  Group,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { useDisclosure } from "@mantine/hooks";
+import { IconInfoCircle, IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  AdvancedTable,
+  ModalFooter,
+  notify,
+  PageLoader,
+  useErrorHandler,
+  type AdvancedColumn,
+} from "@ema-platform/ui";
+import {
+  useLocalized,
+  useGetDepartmentsQuery,
+  useCreateDepartmentMutation,
+  useUpdateDepartmentMutation,
+  useDeleteDepartmentMutation,
+  useGetRanksQuery,
+  useCreateRankMutation,
+  useUpdateRankMutation,
+  useDeleteRankMutation,
+  type Department,
+  type Rank,
+  type RankCertificateCategory,
+} from "@ema-platform/api";
+
+const CATEGORY_OPTIONS: { value: RankCertificateCategory; label: string }[] = [
+  { value: "COC", label: "CoC" },
+  { value: "COP", label: "CoP" },
+];
+
+/**
+ * Departments and their CoC/CoP rank ladders, as backoffice-editable config.
+ *
+ * Both used to be hardcoded (`ESeafarerDepartment` and the `COC_LADDERS`/
+ * `COP_LADDERS` arrays) — this is the write side that config never had. A
+ * rank's `ladderOrder` is the rung position `resolveNextRank` climbs, so
+ * reordering here changes what an applicant is auto-advanced to next.
+ */
+export function RankDepartmentTab() {
+  const { t } = useTranslation();
+  const localized = useLocalized();
+
+  const { data: deptRes, isLoading: deptLoading, isFetching: deptFetching, refetch: refetchDepts } =
+    useGetDepartmentsQuery();
+  const { data: rankRes, isLoading: rankLoading, isFetching: rankFetching, refetch: refetchRanks } =
+    useGetRanksQuery();
+
+  const departments = deptRes?.items ?? [];
+  const ranks = rankRes?.items ?? [];
+
+  const deptOptions = departments.map((d) => ({ value: d.id, label: localized(d.name) }));
+  const deptName = useCallback(
+    (id: string) => departments.find((d) => d.id === id)?.code ?? "-",
+    [departments],
+  );
+
+  if (deptLoading || rankLoading) {
+    return <PageLoader label={t("configuration.loadingRanks", "Loading departments and ranks…")} height={300} />;
+  }
+
+  return (
+    <Stack gap="xl">
+      <Alert variant="light" color="blue" icon={<IconInfoCircle size={16} />}>
+        <Text size="sm">
+          {t(
+            "configuration.rankLadderNotice",
+            "A rank's position is its rung on the ladder — an applicant is auto-advanced to the next position up from what they already hold.",
+          )}
+        </Text>
+      </Alert>
+
+      <DepartmentSection
+        departments={departments}
+        isFetching={deptFetching}
+        refetch={refetchDepts}
+        localized={localized}
+      />
+
+      <RankSection
+        ranks={ranks}
+        deptOptions={deptOptions}
+        deptName={deptName}
+        isFetching={rankFetching}
+        refetch={refetchRanks}
+        localized={localized}
+      />
+    </Stack>
+  );
+}
+
+// ------------------------------------------------------------- departments
+
+function DepartmentSection({
+  departments,
+  isFetching,
+  refetch,
+  localized,
+}: {
+  departments: Department[];
+  isFetching: boolean;
+  refetch: () => void;
+  localized: (v: Department["name"]) => string;
+}) {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler();
+  const [createDepartment, { isLoading: isCreating }] = useCreateDepartmentMutation();
+  const [updateDepartment, { isLoading: isUpdating }] = useUpdateDepartmentMutation();
+  const [deleteDepartment] = useDeleteDepartmentMutation();
+
+  const [editing, setEditing] = useState<Department | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Department | null>(null);
+  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+
+  const resetForm = useCallback(() => {
+    setEditing(null);
+    setShowForm(false);
+  }, []);
+
+  const form = useForm({
+    initialValues: { code: "", nameEn: "", nameAm: "", sortOrder: 0 },
+    validate: {
+      code: (v) => (!v ? t("configuration.validation.codeRequired", "Code is required") : null),
+      nameEn: (v) => (!v ? t("configuration.validation.nameEnRequired") : null),
+      nameAm: (v) => (!v ? t("configuration.validation.nameAmRequired") : null),
+    },
+  });
+
+  const openEdit = useCallback(
+    (dept: Department) => {
+      setEditing(dept);
+      form.setValues({
+        code: dept.code,
+        nameEn: dept.name.en ?? "",
+        nameAm: dept.name.am ?? "",
+        sortOrder: dept.sortOrder,
+      });
+      setShowForm(true);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    const name = { en: values.nameEn, am: values.nameAm };
+    try {
+      if (editing) {
+        await updateDepartment({
+          id: editing.id,
+          code: values.code,
+          name,
+          sortOrder: values.sortOrder,
+        }).unwrap();
+        notify.success(t("configuration.updated"));
+      } else {
+        await createDepartment({ code: values.code, name, sortOrder: values.sortOrder }).unwrap();
+        notify.success(t("configuration.created"));
+      }
+      resetForm();
+      form.reset();
+    } catch (e) {
+      handleError(e);
+    }
+  });
+
+  const confirmDelete = useCallback(async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteDepartment(deleteTarget.id).unwrap();
+      notify.success(t("configuration.deleted"));
+      closeDelete();
+      setDeleteTarget(null);
+    } catch (e) {
+      handleError(e);
+    }
+  }, [deleteTarget, deleteDepartment, closeDelete, handleError]);
+
+  const columns: AdvancedColumn<Department>[] = [
+    { header: t("configuration.code", "Code"), cell: ({ row }) => row.original.code },
+    { header: t("configuration.name"), cell: ({ row }) => localized(row.original.name) },
+    { header: t("configuration.sortOrder", "Order"), cell: ({ row }) => row.original.sortOrder },
+    {
+      header: "actions",
+      size: 90,
+      cell: ({ row }) => (
+        <Group gap="xs">
+          <Button variant="subtle" size="xs" onClick={() => openEdit(row.original)}>
+            {t("configuration.edit", "Edit")}
+          </Button>
+          <Button
+            variant="subtle"
+            color="red"
+            size="xs"
+            onClick={() => {
+              setDeleteTarget(row.original);
+              openDelete();
+            }}
+          >
+            {t("configuration.delete")}
+          </Button>
+        </Group>
+      ),
+    },
+  ];
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" align="flex-end">
+        <Title order={4}>{t("configuration.departments", "Departments")}</Title>
+        {!showForm && (
+          <Button
+            variant="light"
+            size="sm"
+            leftSection={<IconPlus size={16} />}
+            onClick={() => {
+              form.reset();
+              setShowForm(true);
+            }}
+          >
+            {t("configuration.addDepartment", "Add department")}
+          </Button>
+        )}
+      </Group>
+
+      <AdvancedTable
+        columns={columns}
+        data={[...departments].sort((a, b) => a.sortOrder - b.sortOrder)}
+        tableName={t("configuration.departments", "Departments")}
+        itemCount={departments.length}
+        pageIndex={0}
+        onPageChange={() => {}}
+        pageSize={departments.length || 10}
+        onPageSizeChange={() => {}}
+        refresh={refetch}
+        isLoading={isFetching}
+      />
+
+      <Modal
+        opened={showForm}
+        onClose={resetForm}
+        title={editing ? t("configuration.update") : t("configuration.addDepartment", "Add department")}
+        size="sm"
+      >
+        <form onSubmit={handleSubmit}>
+          <Stack gap="sm">
+            <TextInput
+              label={t("configuration.code", "Code")}
+              placeholder="DECK"
+              {...form.getInputProps("code")}
+              size="sm"
+            />
+            <TextInput label={t("configuration.nameEn")} {...form.getInputProps("nameEn")} size="sm" />
+            <TextInput label={t("configuration.nameAm")} {...form.getInputProps("nameAm")} size="sm" />
+            <NumberInput
+              label={t("configuration.sortOrder", "Sort order")}
+              {...form.getInputProps("sortOrder")}
+              size="sm"
+            />
+            <ModalFooter>
+              <Button variant="default" onClick={resetForm} size="sm">
+                {t("configuration.cancel")}
+              </Button>
+              <Button type="submit" size="sm" loading={isCreating || isUpdating}>
+                {editing ? t("configuration.update") : t("configuration.create")}
+              </Button>
+            </ModalFooter>
+          </Stack>
+        </form>
+      </Modal>
+
+      <Modal opened={deleteOpened} onClose={closeDelete} title={t("configuration.confirmDelete")} size="sm">
+        <Text mb="md">
+          {t("configuration.deleteConfirmText", { name: deleteTarget ? localized(deleteTarget.name) : "" })}
+        </Text>
+        <ModalFooter>
+          <Button variant="default" onClick={closeDelete} size="sm">
+            {t("configuration.cancel")}
+          </Button>
+          <Button color="red" onClick={confirmDelete} size="sm">
+            {t("configuration.delete")}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Stack>
+  );
+}
+
+// ------------------------------------------------------------------ ranks
+
+function RankSection({
+  ranks,
+  deptOptions,
+  deptName,
+  isFetching,
+  refetch,
+  localized,
+}: {
+  ranks: Rank[];
+  deptOptions: { value: string; label: string }[];
+  deptName: (id: string) => string;
+  isFetching: boolean;
+  refetch: () => void;
+  localized: (v: Rank["name"]) => string;
+}) {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler();
+  const [createRank, { isLoading: isCreating }] = useCreateRankMutation();
+  const [updateRank, { isLoading: isUpdating }] = useUpdateRankMutation();
+  const [deleteRank] = useDeleteRankMutation();
+
+  const [editing, setEditing] = useState<Rank | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Rank | null>(null);
+  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+
+  const resetForm = useCallback(() => {
+    setEditing(null);
+    setShowForm(false);
+  }, []);
+
+  const form = useForm({
+    initialValues: {
+      departmentId: "",
+      certificateCategory: "COC" as RankCertificateCategory,
+      key: "",
+      nameEn: "",
+      nameAm: "",
+      ladderOrder: 0,
+    },
+    validate: {
+      departmentId: (v) => (!v ? t("configuration.validation.departmentRequired") : null),
+      key: (v) => (!v ? t("configuration.validation.keyRequired", "Key is required") : null),
+      nameEn: (v) => (!v ? t("configuration.validation.nameEnRequired") : null),
+      nameAm: (v) => (!v ? t("configuration.validation.nameAmRequired") : null),
+    },
+  });
+
+  const openEdit = useCallback(
+    (rank: Rank) => {
+      setEditing(rank);
+      form.setValues({
+        departmentId: rank.departmentId,
+        certificateCategory: rank.certificateCategory,
+        key: rank.key,
+        nameEn: rank.name.en ?? "",
+        nameAm: rank.name.am ?? "",
+        ladderOrder: rank.ladderOrder,
+      });
+      setShowForm(true);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    const name = { en: values.nameEn, am: values.nameAm };
+    try {
+      if (editing) {
+        await updateRank({
+          id: editing.id,
+          departmentId: values.departmentId,
+          certificateCategory: values.certificateCategory,
+          key: values.key,
+          name,
+          ladderOrder: values.ladderOrder,
+        }).unwrap();
+        notify.success(t("configuration.updated"));
+      } else {
+        await createRank({
+          departmentId: values.departmentId,
+          certificateCategory: values.certificateCategory,
+          key: values.key,
+          name,
+          ladderOrder: values.ladderOrder,
+        }).unwrap();
+        notify.success(t("configuration.created"));
+      }
+      resetForm();
+      form.reset();
+    } catch (e) {
+      handleError(e);
+    }
+  });
+
+  const confirmDelete = useCallback(async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteRank(deleteTarget.id).unwrap();
+      notify.success(t("configuration.deleted"));
+      closeDelete();
+      setDeleteTarget(null);
+    } catch (e) {
+      handleError(e);
+    }
+  }, [deleteTarget, deleteRank, closeDelete, handleError]);
+
+  const sortedRanks = [...ranks].sort(
+    (a, b) =>
+      a.departmentId.localeCompare(b.departmentId) ||
+      a.certificateCategory.localeCompare(b.certificateCategory) ||
+      a.ladderOrder - b.ladderOrder,
+  );
+
+  const columns: AdvancedColumn<Rank>[] = [
+    { header: t("configuration.department"), cell: ({ row }) => deptName(row.original.departmentId) },
+    { header: t("configuration.category", "Ladder"), cell: ({ row }) => row.original.certificateCategory },
+    { header: t("configuration.rankOrder", "Rung"), cell: ({ row }) => row.original.ladderOrder },
+    { header: t("configuration.key", "Key"), cell: ({ row }) => row.original.key },
+    { header: t("configuration.name"), cell: ({ row }) => localized(row.original.name) },
+    {
+      header: "actions",
+      size: 90,
+      cell: ({ row }) => (
+        <Group gap="xs">
+          <Button variant="subtle" size="xs" onClick={() => openEdit(row.original)}>
+            {t("configuration.edit", "Edit")}
+          </Button>
+          <Button
+            variant="subtle"
+            color="red"
+            size="xs"
+            onClick={() => {
+              setDeleteTarget(row.original);
+              openDelete();
+            }}
+          >
+            {t("configuration.delete")}
+          </Button>
+        </Group>
+      ),
+    },
+  ];
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" align="flex-end">
+        <Title order={4}>{t("configuration.ranks", "Ranks")}</Title>
+        {!showForm && (
+          <Button
+            variant="light"
+            size="sm"
+            leftSection={<IconPlus size={16} />}
+            onClick={() => {
+              form.reset();
+              setShowForm(true);
+            }}
+            disabled={deptOptions.length === 0}
+          >
+            {t("configuration.addRank", "Add rank")}
+          </Button>
+        )}
+      </Group>
+
+      <AdvancedTable
+        columns={columns}
+        data={sortedRanks}
+        tableName={t("configuration.ranks", "Ranks")}
+        itemCount={sortedRanks.length}
+        pageIndex={0}
+        onPageChange={() => {}}
+        pageSize={sortedRanks.length || 10}
+        onPageSizeChange={() => {}}
+        refresh={refetch}
+        isLoading={isFetching}
+      />
+
+      <Modal
+        opened={showForm}
+        onClose={resetForm}
+        title={editing ? t("configuration.update") : t("configuration.addRank", "Add rank")}
+        size="sm"
+      >
+        <form onSubmit={handleSubmit}>
+          <Stack gap="sm">
+            <Select
+              label={t("configuration.department")}
+              data={deptOptions}
+              {...form.getInputProps("departmentId")}
+              size="sm"
+              searchable
+            />
+            <Select
+              label={t("configuration.category", "Ladder")}
+              data={CATEGORY_OPTIONS}
+              {...form.getInputProps("certificateCategory")}
+              size="sm"
+              allowDeselect={false}
+            />
+            <TextInput
+              label={t("configuration.key", "Key")}
+              placeholder="CHIEF_MATE"
+              {...form.getInputProps("key")}
+              size="sm"
+              disabled={!!editing}
+              description={
+                editing
+                  ? t(
+                      "configuration.keyLockedNotice",
+                      "Not editable — issued licences already carry this key.",
+                    )
+                  : undefined
+              }
+            />
+            <TextInput label={t("configuration.nameEn")} {...form.getInputProps("nameEn")} size="sm" />
+            <TextInput label={t("configuration.nameAm")} {...form.getInputProps("nameAm")} size="sm" />
+            <NumberInput
+              label={t("configuration.rankOrder", "Rung (0 = entry rank)")}
+              min={0}
+              {...form.getInputProps("ladderOrder")}
+              size="sm"
+            />
+            <ModalFooter>
+              <Button variant="default" onClick={resetForm} size="sm">
+                {t("configuration.cancel")}
+              </Button>
+              <Button type="submit" size="sm" loading={isCreating || isUpdating}>
+                {editing ? t("configuration.update") : t("configuration.create")}
+              </Button>
+            </ModalFooter>
+          </Stack>
+        </form>
+      </Modal>
+
+      <Modal opened={deleteOpened} onClose={closeDelete} title={t("configuration.confirmDelete")} size="sm">
+        <Text mb="md">
+          {t("configuration.deleteConfirmText", { name: deleteTarget ? localized(deleteTarget.name) : "" })}
+        </Text>
+        <ModalFooter>
+          <Button variant="default" onClick={closeDelete} size="sm">
+            {t("configuration.cancel")}
+          </Button>
+          <Button color="red" onClick={confirmDelete} size="sm">
+            {t("configuration.delete")}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Stack>
+  );
+}

apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx

@@ -23,6 +23,7 @@ import {
   IconCertificate,
   IconHash,
   IconInfoCircle,
+  IconAnchor,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import {
@@ -36,6 +37,7 @@ import {
 import { LocationPage } from "../../../location/pages/LocationPage";
 import { CertificationPage } from "../../../certification/pages/CertificationPage";
 import { NumberFormatTab } from "../../components/NumberFormatTab";
+import { RankDepartmentTab } from "./RankDepartmentTab";
 import {
   useGetOrganizationsQuery,
   useGetProfessionsQuery,
@@ -401,6 +403,9 @@ export function ConfigurationPage() {
           <Tabs.Tab value="numberFormats" leftSection={<IconHash size={16} />}>
             {t("numberFormat.title", "Number Formats")}
           </Tabs.Tab>
+          <Tabs.Tab value="ranks" leftSection={<IconAnchor size={16} />}>
+            {t("configuration.ranksTab", "Ranks & Departments")}
+          </Tabs.Tab>
         </Tabs.List>
 
         <Tabs.Panel value="professions" pt="md">
@@ -418,6 +423,10 @@ export function ConfigurationPage() {
         <Tabs.Panel value="numberFormats" pt="md">
           <NumberFormatTab />
         </Tabs.Panel>
+
+        <Tabs.Panel value="ranks" pt="md">
+          <RankDepartmentTab />
+        </Tabs.Panel>
       </Tabs>
     </Stack>
   );

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({
@@ -20,7 +21,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>({
@@ -90,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,
 });
@@ -107,4 +118,5 @@ export const {
   useGetExamIncidentsQuery,
   useRecordIncidentMutation,
   useResolveIncidentMutation,
+  useRegradeAttemptMutation,
 } = examApi;

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 { 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';
@@ -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,51 @@ 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 (
+          <Menu shadow="md" width={180} position="bottom-end">
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="sm"
+                loading={handlers.regrading === row.original.attempt?.id}
+              >
+                <IconDotsVertical size={16} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <RequirePermission
+                anyOf={[LICENSE_PERMISSIONS.RECORD_EXAM_ATTENDANCE]}
+                hideOnly
+              >
+                <Menu.Item
+                  leftSection={<IconUserCheck size={14} />}
+                  onClick={() => handlers.onRecord(row.original)}
+                >
+                  {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>
+        );
+      },
     },
   ];
 }

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}

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

@@ -67,7 +67,11 @@ const STATUS_TONE: Record<string, StatusTone> = {
   PUBLISHED: 'success',
 };
 
-const FORM_LABEL: Record<string, string> = { ESSAY: "Essay", CHOICE: "Choice" };
+const FORM_LABEL: Record<string, string> = {
+  ESSAY: "Essay",
+  CHOICE: "Choice",
+  BOTH: "Both",
+};
 const TYPE_LABEL: Record<string, string> = { WRITTEN: "Written", ORAL: "Oral" };
 const ADMIN_LABEL: Record<string, string> = {
   OFFLINE: "Offline",
@@ -117,13 +121,18 @@ export function ExamDetailPage() {
 
   // Only approved bank items may go on a paper (US-EXAM-003), so the picker
   // must not offer drafts or retired questions either.
+  //
+  // BOTH describes a mixed paper — a question itself is never "BOTH" (see
+  // QuestionForm), so an equality check against it would match nothing and
+  // silently offer zero questions. Same skip-condition as the backend's own
+  // random draw (ExamService.selectRandomQuestions).
   const eligibleQuestions = useMemo(() => {
     if (!exam) return [];
     return allQuestions
       .filter(
         (q) =>
           q.certificationId === exam.certificationId &&
-          q.form === exam.form &&
+          (exam.form === 'BOTH' || q.form === exam.form) &&
           q.status === 'APPROVED',
       )
       .map((q) => ({ id: q.id, title: q.title, form: q.form, points: q.points }));
@@ -172,7 +181,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,
       );
     }
   };
@@ -188,18 +202,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;
     }
@@ -233,7 +264,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("");
@@ -248,7 +295,20 @@ 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; }
+          /* @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>
       <div class="header">
         ${logoBase64 ? `<img src="${logoBase64}" alt="Logo" class="header-logo" />` : ""}
@@ -259,7 +319,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>

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

@@ -1,5 +1,11 @@
-import { ActionIcon, Group } from "@mantine/core";
-import { IconEdit, IconTrash, IconDetails } from "@tabler/icons-react";
+import { ActionIcon, Menu } from "@mantine/core";
+import {
+  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";
@@ -11,40 +17,55 @@ export function examActionsColumn(
     onEdit: (exam: Exam) => void;
     onDelete: (exam: Exam) => void;
     onDetails: (exam: Exam) => void;
+    onOpenStatusChange: (exam: Exam) => void;
+    changingStatusId?: string | null;
   },
 ): 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={180} position="bottom-end">
+        <Menu.Target>
           <ActionIcon
             variant="subtle"
-            color="blue"
+            color="gray"
             size="sm"
-            onClick={() => handlers.onEdit(row.original)}
+            loading={handlers.changingStatusId === row.original.id}
           >
-            <IconEdit size={14} />
+            <IconDotsVertical size={16} />
           </ActionIcon>
-          <ActionIcon
-            variant="subtle"
-            color="red"
-            size="sm"
-            onClick={() => handlers.onDelete(row.original)}
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconDetails size={14} />}
+            onClick={() => handlers.onDetails(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.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
+              leftSection={<IconToggleRight size={14} />}
+              onClick={() => handlers.onOpenStatusChange(row.original)}
+            >
+              {t("exam.form.status")}
+            </Menu.Item>
+            <Menu.Item
+              color="red"
+              leftSection={<IconTrash size={14} />}
+              onClick={() => handlers.onDelete(row.original)}
+            >
+              {t("exam.action.delete", "Delete")}
+            </Menu.Item>
+          </RequirePermission>
+        </Menu.Dropdown>
+      </Menu>
     ),
   };
 }

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

@@ -24,6 +24,7 @@ import {
 import { notify, useErrorHandler, AdvancedTable, useServerTable, ModalFooter, AmharicDatePicker } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
 import { useGetCertificationsQuery } from "../../../certification/api/certification-api";
+import { useGetRanksQuery, useLocalized } from "@ema-platform/api";
 import {
   useGetExamsQuery,
   useCreateExamMutation,
@@ -76,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(
@@ -120,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")}
@@ -246,11 +249,18 @@ function ExamForm({
                   data={[
                     { value: "ESSAY", label: t("exam.form.essay") },
                     { value: "CHOICE", label: t("exam.form.choice") },
+                    { value: "BOTH", label: t("exam.form.both") },
                   ]}
                   value={form}
                   onChange={setForm}
                   size="sm"
                   required
+                  disabled={adminMethod === "ONLINE"}
+                  description={
+                    adminMethod === "ONLINE"
+                      ? t("exam.form.onlineChoiceOnlyHint")
+                      : undefined
+                  }
                 />
                 <Select
                   label={t("exam.detail.administration")}
@@ -260,7 +270,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
                 />
@@ -290,12 +307,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"
-                  required
+                  withAsterisk
+                  description={
+                    evalMethod === "PERCENTAGE"
+                      ? t("exam.form.cuttingPointPercentageHint")
+                      : undefined
+                  }
                 />
               </SimpleGrid>
               {editing && (
@@ -337,7 +364,10 @@ export function ExamPage() {
   const { t, i18n } = useTranslation();
   const { handleError } = useErrorHandler();
   const locale = i18n.language as "en" | "am";
+  const localized = useLocalized();
   const { data: certRes } = useGetCertificationsQuery();
+  const { data: rankRes } = useGetRanksQuery();
+  const rankLabelByKey = new Map((rankRes?.items ?? []).map((r) => [r.key, localized(r.name)]));
   const { data, isFetching, isError, refetch } = useGetExamsQuery();
   const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
   const [createExam, { isLoading: isCreating }] = useCreateExamMutation();
@@ -352,10 +382,24 @@ 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 [statusTarget, setStatusTarget] = useState<Exam | null>(null);
+  const [pendingStatus, setPendingStatus] = useState<Exam["status"] | null>(null);
+  const [statusOpened, { open: openStatus, close: closeStatus }] =
+    useDisclosure(false);
 
+  // Rank in the label: an exam inherits its STCW rank from the certification
+  // it is created under (Certification.rankKey), so the officer sees which
+  // rank a sitting will serve at the moment they pick the subject.
   const certOptions = certifications
     .filter((c) => c.isActive)
-    .map((c) => ({ value: c.id, label: c.name[locale] }));
+    .map((c) => {
+      const rank = c.rankKey ? rankLabelByKey.get(c.rankKey) : undefined;
+      return {
+        value: c.id,
+        label: rank ? `${c.name[locale]} — ${rank}` : c.name[locale],
+      };
+    });
   const getCertName = (id: string) =>
     certifications.find((c) => c.id === id)?.name?.[locale] ?? "-";
 
@@ -402,6 +446,21 @@ export function ExamPage() {
     }
   };
 
+  const handleChangeStatus = async () => {
+    if (!statusTarget || !pendingStatus) return;
+    setChangingStatusId(statusTarget.id);
+    try {
+      await updateExam({ id: statusTarget.id, status: pendingStatus }).unwrap();
+      notify.success(t("exam.updated"));
+      closeStatus();
+      setStatusTarget(null);
+    } catch (e) {
+      handleError(e);
+    } finally {
+      setChangingStatusId(null);
+    }
+  };
+
   const handleDelete = async () => {
     if (!deleteTarget) return;
     try {
@@ -429,6 +488,12 @@ export function ExamPage() {
         openDelete();
       },
       onDetails: (exam) => navigate(`/exams/${exam.id}`),
+      onOpenStatusChange: (exam) => {
+        setStatusTarget(exam);
+        setPendingStatus(exam.status);
+        openStatus();
+      },
+      changingStatusId,
     }),
   ];
 
@@ -503,6 +568,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>
   );
 }

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

@@ -3,23 +3,33 @@ import type { EstimatedTime } from "../../question/types/question";
 import type { QuestionForm } from "../../question/types/question";
 export type { QuestionForm };
 
+/**
+ * The paper's own form — unlike a question's (QuestionForm), an exam may mix
+ * both: BOTH means a mixed paper, resolved per-question against each
+ * question's own ESSAY/CHOICE form. Mirrors backend EExamForm.
+ */
+export type ExamForm = QuestionForm | "BOTH";
+
 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";
+  "PENDING" | "ACTIVE" | "COMPLETED" | "CANCELLED" | "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 {
@@ -31,7 +41,7 @@ export interface Exam {
   date: string;
   givenTime: EstimatedTime | null;
   type: ExamType;
-  form: QuestionForm;
+  form: ExamForm;
   venue: string;
   administrationMethod: ExamAdministrationMethod;
   evaluationMethod: ExamEvaluationMethod;
@@ -55,7 +65,7 @@ export interface CreateExamPayload {
   date: string;
   givenTime: EstimatedTime;
   type: ExamType;
-  form: QuestionForm;
+  form: ExamForm;
   venue: string;
   administrationMethod: ExamAdministrationMethod;
   evaluationMethod: ExamEvaluationMethod;
@@ -71,7 +81,7 @@ export interface UpdateExamPayload {
   date?: string;
   givenTime?: EstimatedTime;
   type?: ExamType;
-  form?: QuestionForm;
+  form?: ExamForm;
   venue?: string;
   administrationMethod?: ExamAdministrationMethod;
   evaluationMethod?: ExamEvaluationMethod;
@@ -93,19 +103,14 @@ export interface RandomQuestionsPayload {
 
 /** What the invigilator recorded on the day (US-EXAM-009). */
 export type AttendanceStatus =
-  | 'REGISTERED'
-  | 'PRESENT'
-  | 'ABSENT'
-  | 'LATE'
-  | 'WITHDRAWN'
-  | 'DISQUALIFIED';
+  "REGISTERED" | "PRESENT" | "ABSENT" | "LATE" | "WITHDRAWN" | "DISQUALIFIED";
 
 export interface ExamRegistration {
   id: string;
   examId: string;
   profileId: string;
   admissionNumber: string;
-  kind: 'NEW' | 'RETAKE';
+  kind: "NEW" | "RETAKE";
   attemptNumber: number;
   attendanceStatus: AttendanceStatus;
   attendanceRemark: string | null;
@@ -118,8 +123,16 @@ 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;
@@ -127,17 +140,10 @@ export interface RecordAttendancePayload {
 }
 
 export type ExamIncidentType =
-  | 'MISCONDUCT'
-  | 'TECHNICAL_FAILURE'
-  | 'MEDICAL'
-  | 'ADMINISTRATIVE'
-  | 'OTHER';
+  "MISCONDUCT" | "TECHNICAL_FAILURE" | "MEDICAL" | "ADMINISTRATIVE" | "OTHER";
 
 export type ExamIncidentStatus =
-  | 'OPEN'
-  | 'UNDER_REVIEW'
-  | 'RESOLVED'
-  | 'DISMISSED';
+  "OPEN" | "UNDER_REVIEW" | "RESOLVED" | "DISMISSED";
 
 export interface ExamIncident {
   id: string;
@@ -162,6 +168,6 @@ export interface CreateIncidentPayload {
 
 export interface ResolveIncidentPayload {
   incidentId: string;
-  outcome: 'RESOLVED' | 'DISMISSED';
+  outcome: "RESOLVED" | "DISMISSED";
   resolution: string;
 }

apps/backoffice/src/app/features/license-review/components/ScheduleExamModal.tsx

@@ -1,20 +1,17 @@
 import { useState } from 'react';
-import { Alert, Button, Modal, Select, Stack, Text, TextInput } from '@mantine/core';
+import { Alert, Button, Modal, Select, Stack, Text } from '@mantine/core';
 import { IconCalendarEvent } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import { ModalFooter } from '@ema-platform/ui';
-import { useGetExamsQuery } from '../../exam/api/exam-api';
+import { useGetEligibleExamsQuery } from '@ema-platform/api';
 
 interface Props {
   opened: boolean;
+  applicationId: string;
   applicantName: string;
   loading: boolean;
   onClose: () => void;
-  onConfirm: (payload: {
-    examId: string;
-    admissionNumber?: string;
-    examDate?: string;
-  }) => void;
+  onConfirm: (payload: { examId: string; examDate?: string }) => void;
 }
 
 /**
@@ -22,33 +19,34 @@ interface Props {
  *
  * Sessions are picked from the exam calendar rather than typed, because the
  * candidate joins a scheduled sitting — this is an assignment, not the creation
- * of a per-candidate appointment.
+ * of a per-candidate appointment. Scoped to sittings whose certification
+ * matches this application's rank, so a Chief Mate candidate cannot be seated
+ * into an OOW Deck sitting by accident.
  */
 export function ScheduleExamModal({
   opened,
+  applicationId,
   applicantName,
   loading,
   onClose,
   onConfirm,
 }: Props) {
   const { t } = useTranslation();
-  const { data: exams, isLoading } = useGetExamsQuery(undefined, { skip: !opened });
+  const { data: exams, isLoading } = useGetEligibleExamsQuery(applicationId, { skip: !opened });
   const [examId, setExamId] = useState<string | null>(null);
-  const [admissionNumber, setAdmissionNumber] = useState('');
 
-  const options = (exams?.items ?? []).map((exam) => ({
+  const options = (exams ?? []).map((exam) => ({
     value: exam.id,
     label: [exam.title?.en ?? exam.title?.am ?? t('exam.untitled', 'Untitled exam'), exam.date]
       .filter(Boolean)
       .join(' — '),
   }));
-  const selected = exams?.items?.find((exam) => exam.id === examId);
+  const selected = exams?.find((exam) => exam.id === examId);
 
   function confirm() {
     if (!examId) return;
     onConfirm({
       examId,
-      admissionNumber: admissionNumber.trim() || undefined,
       examDate: selected?.date ? String(selected.date) : undefined,
     });
   }
@@ -72,7 +70,7 @@ export function ScheduleExamModal({
           <Alert color="orange" icon={<IconCalendarEvent size={16} />}>
             {t(
               'review.scheduleExam.noSessions',
-              'No exam sessions exist yet. Create one in the Exams area first.',
+              'No exam sessions for this rank exist yet. Create one in the Exams area first.',
             )}
           </Alert>
         ) : (
@@ -88,15 +86,12 @@ export function ScheduleExamModal({
           />
         )}
 
-        <TextInput
-          label={t('review.scheduleExam.admissionNumber', 'Admission number')}
-          description={t(
+        <Text size="xs" c="dimmed">
+          {t(
             'review.scheduleExam.admissionHint',
-            'Leave blank to let the system issue one.',
+            'An admission number is issued automatically when the candidate is seated.',
           )}
-          value={admissionNumber}
-          onChange={(e) => setAdmissionNumber(e.currentTarget.value)}
-        />
+        </Text>
 
         <ModalFooter>
           <Button variant="default" onClick={onClose}>

apps/backoffice/src/app/features/license-review/config/actions.ts

@@ -119,6 +119,9 @@ export const ACTIONS: ActionDefinition[] = [
     permissions: ['can:update:inspection'],
     emphasis: 'filled',
   },
+  // Claim is deliberately absent here: an officer claims from the queue
+  // (LicenseQueuePage), not from this detail page. That implementation is
+  // separate — see LicenseQueuePage/actions.tsx — and is unaffected by this.
   {
     id: 'assign',
     tier: 'workflow',
@@ -129,6 +132,7 @@ export const ACTIONS: ActionDefinition[] = [
       'UNDER_EVALUATION',
       'INSPECTION_PENDING',
       'INSPECTION_COMPLETED',
+      'INSPECTION_FAILED',
       'ON_HOLD',
     ],
     permissions: ['can:assign:license-application'],
@@ -152,6 +156,7 @@ export const ACTIONS: ActionDefinition[] = [
       'UNDER_EVALUATION',
       'INSPECTION_PENDING',
       'INSPECTION_COMPLETED',
+      'INSPECTION_FAILED',
     ],
     permissions: ['can:hold:license-application'],
     emphasis: 'subtle',
@@ -190,7 +195,8 @@ export const ACTIONS: ActionDefinition[] = [
     id: 'schedule-inspection',
     tier: 'primary',
     labelKey: 'review.actions.scheduleInspection',
-    from: ['INSPECTION_PENDING'],
+    // INSPECTION_FAILED: booking the re-inspection after a failed visit.
+    from: ['INSPECTION_PENDING', 'INSPECTION_FAILED'],
     permissions: ['can:create:inspection'],
     emphasis: 'filled',
   },
@@ -198,7 +204,7 @@ export const ACTIONS: ActionDefinition[] = [
     id: 'record-inspection',
     tier: 'primary',
     labelKey: 'review.actions.recordInspection',
-    from: ['INSPECTION_PENDING'],
+    from: ['INSPECTION_PENDING', 'INSPECTION_FAILED'],
     permissions: ['can:update:inspection'],
     emphasis: 'filled',
   },
@@ -209,6 +215,9 @@ export const ACTIONS: ActionDefinition[] = [
     from: ['INSPECTION_COMPLETED',
       'REVIEW_REPORTED',
       'INSPECTION_REPORTED', 'UNDER_EVALUATION'],
+    // ELIGIBILITY_PAID: an examined certificate (CoC/CoP) is decided straight
+    // off the eligibility queue — no assignment step.
+    from: ['INSPECTION_COMPLETED', 'UNDER_EVALUATION', 'ELIGIBILITY_PAID'],
     permissions: ['can:approve:license-application'],
     emphasis: 'filled',
     color: 'teal',
@@ -221,6 +230,13 @@ export const ACTIONS: ActionDefinition[] = [
     from: ['UNDER_REVIEW', 'UNDER_EVALUATION', 'INSPECTION_COMPLETED',
       'REVIEW_REPORTED',
       'INSPECTION_REPORTED'],
+    from: [
+      'UNDER_REVIEW',
+      'UNDER_EVALUATION',
+      'INSPECTION_COMPLETED',
+      'INSPECTION_FAILED',
+      'ELIGIBILITY_PAID',
+    ],
     permissions: ['can:request-adjustment:license-application'],
     emphasis: 'light',
     color: 'orange',
@@ -237,6 +253,8 @@ export const ACTIONS: ActionDefinition[] = [
       'INSPECTION_COMPLETED',
       'REVIEW_REPORTED',
       'INSPECTION_REPORTED',
+      'INSPECTION_FAILED',
+      'ELIGIBILITY_PAID',
     ],
     permissions: ['can:reject:license-application'],
     emphasis: 'light',
@@ -336,11 +354,18 @@ export interface ResolveContext {
     needsCapital: string;
     needsInspection: string;
     needsDocumentReviews: string;
+    inspectionNotYetDue: string;
   };
   /** Number of sections/documents the officer has flagged for correction. */
   flaggedCount: number;
   /** True when an inspection is scheduled and awaiting a result. */
   hasPendingInspection: boolean;
+  /**
+   * True while the booked inspection's scheduled instant is still in the
+   * future — a visit cannot have an outcome before it happens, so the record
+   * button waits (the server refuses early results the same way).
+   */
+  inspectionNotYetDue: boolean;
   /**
    * False while any uploaded document is still unjudged or rejected. Approving
    * is a statement that every document was checked, so the button stays dead
@@ -415,12 +440,30 @@ export function resolveActions(ctx: ResolveContext): ResolvedAction[] {
       if (action.id === 'schedule-inspection' && ctx.hasPendingInspection) return [];
       if (action.id === 'record-inspection' && !ctx.hasPendingInspection) return [];
 
+      // The transition table doesn't know which types need an inspection, so
+      // `availableEvents` lists approve-documents at UNDER_EVALUATION even for
+      // types without one — where the server refuses it
+      // (`inspection_not_required_use_final_approve`). Final Approve is the
+      // real action there; don't render its dead twin.
+      if (
+        action.id === 'approve-documents' &&
+        !app.licenseType?.inspectionRequired
+      ) {
+        return [];
+      }
+
       const disabled = (reason: string): ResolvedAction => ({
         ...action,
         enabled: false,
         disabledReason: reason,
       });
 
+      // Booked but not yet due: keep the button visible so the officer sees
+      // the next step, disabled with the scheduled time as the reason.
+      if (action.id === 'record-inspection' && ctx.inspectionNotYetDue) {
+        return disabled(reasons.inspectionNotYetDue);
+      }
+
       // Decisions belong to whoever holds the application.
       const needsOwnership =
         action.tier === 'primary' && action.id !== 'confirm-payment';

apps/backoffice/src/app/features/license-review/config/license-types.ts

@@ -116,11 +116,21 @@ const PRESENTATION: Record<string, LicenseTypePresentation> = {
     // no capital threshold, no staff roles.
     detailSections: ['overview', 'documents'],
   },
+  ENDORSEMENT_SEAFARER: {
+    key: 'ENDORSEMENT_SEAFARER',
+    icon: IconRubberStamp,
+    // Person-centric, same as seafarer registration: no company entity, no
+    // capital threshold, no staff roles, no inspection. Covers CoC and GOC
+    // together — the `endorsementScope` field on the application decides
+    // which certificate section(s) actually have data.
+    detailSections: ['overview', 'documents'],
+  },
+  // Retired by ENDORSEMENT_SEAFARER (see endorsements.seed-data.ts). Kept so
+  // an application filed before the switch still renders with the right
+  // presentation instead of falling back to the generic company layout.
   ENDORSEMENT_COC: {
     key: 'ENDORSEMENT_COC',
     icon: IconRubberStamp,
-    // Person-centric, same as seafarer registration: no company entity, no
-    // capital threshold, no staff roles, no inspection.
     detailSections: ['overview', 'documents'],
   },
   ENDORSEMENT_GOC: {

apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx

@@ -59,6 +59,7 @@ import {
   SAVED_VIEWS,
   filterFromSearchParams,
   readLastView,
+  hasUnclaimedPool,
   savedViewsForFamily,
   searchParamsFromFilter,
   writeLastView,
@@ -159,12 +160,16 @@ export function LicenseQueuePage() {
   const isLogistics = typeCode
     ? resolveFamilyKind(typeCode) === "LOGISTICS_LICENSE"
     : undefined;
-  const visibleViews = savedViewsForFamily(isLogistics !== false);
+  // Claiming is a workflow property, not a label one — Vessel Registration is
+  // a DOCUMENT family but is still triaged off a shared unclaimed pool, so it
+  // keeps the Unassigned tab and the claim actions.
+  const claimable = hasUnclaimedPool(typeCode);
+  const visibleViews = savedViewsForFamily(claimable);
 
   const [view, setView] = useState<SavedViewId>(
     () =>
       (searchParams.get("view") as SavedViewId) ||
-      (isLogistics === false ? "all" : readLastView()),
+      (claimable ? readLastView() : "all"),
   );
   const [page, setPage] = useState(() => Number(searchParams.get("page")) || 1);
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
@@ -174,21 +179,17 @@ export function LicenseQueuePage() {
   const [helpOpen, setHelpOpen] = useState(false);
   const [debouncedSearch] = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
 
-  // Non-logistics queues have no unassigned/unclaimed pool (see
-  // `savedViewsForFamily`), so a stale "unassigned" view — e.g. restored from
+  // Queues with no unclaimed pool (see `hasUnclaimedPool`) have no unassigned
+  // tab, so a stale "unassigned" view — e.g. restored from
   // `readLastView()` — must fall back to "all" rather than land on a tab that
   // no longer exists. Auto-created BTC requests specifically start at
   // PAYMENT_PENDING, outside "mine" too, so "all" is the one view guaranteed
   // to show them.
   useEffect(() => {
-    if (
-      isLogistics === false &&
-      !searchParams.has("view") &&
-      view === "unassigned"
-    ) {
+    if (!claimable && !searchParams.has("view") && view === "unassigned") {
       setView("all");
     }
-  }, [isLogistics, searchParams, view]);
+  }, [claimable, searchParams, view]);
 
   const urlFilter = useMemo(
     () => filterFromSearchParams(searchParams),
@@ -403,6 +404,10 @@ export function LicenseQueuePage() {
       // than the name mismatch.
       if (isLogistics !== false && cursorRow && cursorRow.assignedOfficerId === null)
         setAssignTarget(cursorRow);
+      // Only unclaimed rows on a claimable queue can be claimed; pressing c
+      // elsewhere is a no-op rather than an error the officer has to read.
+      if (claimable && cursorRow && cursorRow.assignedOfficerId === null)
+        handleClaim(cursorRow.id);
     },
     onEscape: () => setSelected([]),
     onHelp: () => setHelpOpen(true),
@@ -469,6 +474,9 @@ export function LicenseQueuePage() {
         // Non-logistics applications aren't dispatched off a shared queue (see
         // `savedViewsForFamily`) — every row opens straight to Review.
         assignable: isLogistics !== false,
+        // Applications with no unclaimed pool (see `hasUnclaimedPool`) are
+        // never claimed — every row opens straight to Review.
+        claimable,
       }),
     ],
     [
@@ -481,6 +489,7 @@ export function LicenseQueuePage() {
       items,
       assigning,
       isLogistics,
+      claimable,
     ],
   );
 
@@ -748,6 +757,19 @@ export function LicenseQueuePage() {
               >
                 {t("queue.export", "Export CSV")}
               </Button>
+              {claimable && (
+                <RequirePermission
+                  anyOf={[LICENSE_PERMISSIONS.CLAIM_APPLICATION]}
+                  hideOnly
+                >
+                  <Button loading={claiming} onClick={handleBulkClaim}>
+                    {t("queue.bulkClaim", {
+                      count: selected.length,
+                      defaultValue: "Claim {{count}}",
+                    })}
+                  </Button>
+                </RequirePermission>
+              )}
             </Group>
           </Group>
         </Paper>

apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx

@@ -49,6 +49,7 @@ import {
   useAssignInspectorMutation,
   useReportReviewMutation,
   useReportInspectionMutation,
+  useClaimApplicationMutation,
   useCompleteReviewMutation,
   useConfirmPaymentMutation,
   useScheduleIssuanceMutation,
@@ -210,6 +211,7 @@ export function LicenseReviewPage() {
     [requirements],
   );
 
+  const [claimApplication] = useClaimApplicationMutation();
   const [completeReview] = useCompleteReviewMutation();
   const [requestAdjustment] = useRequestAdjustmentMutation();
   const [approveDocuments] = useApproveDocumentsMutation();
@@ -308,6 +310,12 @@ export function LicenseReviewPage() {
   }, [flags]);
 
   const pendingInspection = inspections.find((i) => i.status === 'SCHEDULED');
+  // A visit cannot have an outcome before it happens — mirror of the server's
+  // inspection_not_yet_due guard, compared instant-to-instant.
+  const inspectionNotYetDue = Boolean(
+    pendingInspection?.scheduledDate &&
+      new Date(pendingInspection.scheduledDate) > new Date(),
+  );
 
   const { data: findingsEvidence = [], refetch: refetchFindingsEvidence } =
     useGetAttachmentsQuery(
@@ -370,6 +378,7 @@ export function LicenseReviewPage() {
       can,
       flaggedCount: flagged.length,
       hasPendingInspection: Boolean(pendingInspection),
+      inspectionNotYetDue,
       allDocumentsAccepted,
       reasons: {
         wrongStatus: t('review.disabled.wrongStatus', 'Not available at this stage'),
@@ -378,6 +387,13 @@ export function LicenseReviewPage() {
         needsFlags: t('review.disabled.needsFlags', 'Flag at least one item to request a correction'),
         needsCapital: t('review.disabled.needsCapital', 'Record the verified capital first'),
         needsInspection: t('review.disabled.needsInspection', 'Requires an inspection result'),
+        inspectionNotYetDue: t('review.disabled.inspectionNotYetDue', {
+          date: pendingInspection?.scheduledDate
+            ? showDate(pendingInspection.scheduledDate)
+            : '',
+          defaultValue:
+            'Inspection scheduled for {{date}}. Results can be recorded after the scheduled time.',
+        }),
         needsDocumentReviews:
           documentProgress.total === 0
             ? t(
@@ -392,7 +408,7 @@ export function LicenseReviewPage() {
               }),
       },
     });
-  }, [data, currentUserId, can, flagged.length, pendingInspection, t]);
+  }, [data, currentUserId, can, flagged.length, pendingInspection, inspectionNotYetDue, showDate, t]);
 
   // Location answers are tree ids. The picker the applicant used resolves them
   // client-side from the same list, so the reviewer reads the place rather than
@@ -596,8 +612,12 @@ export function LicenseReviewPage() {
     try {
       switch (action.id) {
         case "claim":
-          // Claim is fired from the queue in practice; kept here for the case
-          // where an officer opens an unclaimed application directly.
+          // Usually fired from the queue, but an officer who opened an
+          // unclaimed application directly claims it from here.
+          await run(
+            () => claimApplication(id).unwrap(),
+            t("review.done.claim", "Claimed — the application is now yours"),
+          );
           break;
         // Handing work out. Reuses the decision modal's officer picker rather
         // than a dialog of its own — it already resolves the real officer list.
@@ -1194,6 +1214,18 @@ export function LicenseReviewPage() {
             </Tabs.Panel>
 
             <Tabs.Panel value="inspection">
+              {status === "INSPECTION_FAILED" && (
+                <Alert
+                  mb="md"
+                  color="red"
+                  icon={<IconAlertTriangle size={16} />}
+                >
+                  {t(
+                    "review.inspectionFailedBlocked",
+                    "Approval is unavailable because the inspection failed. Schedule a re-inspection, request corrections, or reject the application.",
+                  )}
+                </Alert>
+              )}
               <Paper withBorder p="md">
                 {inspections.length === 0 ? (
                   <Text size="sm" c="dimmed">
@@ -1301,6 +1333,7 @@ export function LicenseReviewPage() {
 
       <ScheduleExamModal
         opened={scheduleExamOpen}
+        applicationId={id}
         applicantName={
           app.companyName ||
           applicantFullName ||
@@ -1586,12 +1619,23 @@ export function LicenseReviewPage() {
               </FileButton>
             </Group>
           </Stack>
+          {inspectionNotYetDue && (
+            <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
+              {t("review.disabled.inspectionNotYetDue", {
+                date: pendingInspection?.scheduledDate
+                  ? showDate(pendingInspection.scheduledDate)
+                  : "",
+                defaultValue:
+                  "Inspection scheduled for {{date}}. Results can be recorded after the scheduled time.",
+              })}
+            </Alert>
+          )}
           <ModalFooter grow>
             <ActionIcon
               variant="light"
               color="teal"
               size="lg"
-              disabled={!findings.trim() || !pendingInspection}
+              disabled={!findings.trim() || !pendingInspection || inspectionNotYetDue}
               aria-label={t("review.passed", "Passed")}
               onClick={() =>
                 run(
@@ -1618,7 +1662,7 @@ export function LicenseReviewPage() {
               variant="light"
               color="red"
               size="lg"
-              disabled={!findings.trim() || !pendingInspection}
+              disabled={!findings.trim() || !pendingInspection || inspectionNotYetDue}
               aria-label={t("review.failed", "Failed")}
               onClick={() =>
                 run(

apps/backoffice/src/app/features/license-review/queue-views.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { resolveFamilyKind } from "@ema-platform/api";
+import { hasUnclaimedPool, savedViewsForFamily } from "./queue-views";
 
 describe("resolveFamilyKind", () => {
   it("treats person-centric seafarer applications as document queues", () => {
@@ -8,3 +9,28 @@ describe("resolveFamilyKind", () => {
     expect(resolveFamilyKind("BTC_BASIC_TRAINING")).toBe("CERTIFICATE");
   });
 });
+
+describe("hasUnclaimedPool", () => {
+  it("keeps the unassigned pool for logistics licences", () => {
+    expect(hasUnclaimedPool("FREIGHT_FORWARDER")).toBe(true);
+  });
+
+  it("keeps it for vessel registration, a DOCUMENT queue that is still claimed", () => {
+    expect(resolveFamilyKind("VESSEL_REGISTRATION")).toBe("DOCUMENT");
+    expect(hasUnclaimedPool("VESSEL_REGISTRATION")).toBe(true);
+    expect(savedViewsForFamily(hasUnclaimedPool("VESSEL_REGISTRATION")).map((v) => v.id)).toContain(
+      "unassigned",
+    );
+  });
+
+  it("drops it for the person-centric services", () => {
+    expect(hasUnclaimedPool("SEAMAN_BOOK")).toBe(false);
+    expect(savedViewsForFamily(hasUnclaimedPool("SEAMAN_BOOK")).map((v) => v.id)).not.toContain(
+      "unassigned",
+    );
+  });
+
+  it("keeps it for the mixed All/Mine grids, where no type is pinned", () => {
+    expect(hasUnclaimedPool(undefined)).toBe(true);
+  });
+});

apps/backoffice/src/app/features/license-review/queue-views.ts

@@ -1,3 +1,4 @@
+import { resolveFamilyKind } from '@ema-platform/api';
 import type { LicenseStatus, QueueCounts, QueueFilter } from '@ema-platform/api';
 
 export type SavedViewId =
@@ -78,12 +79,39 @@ export const SAVED_VIEWS: SavedView[] = [
 export const DEFAULT_VIEW: SavedViewId = 'unassigned';
 
 /**
- * Non-logistics queues (Seafarer Registration, Seaman Book, BTC, CoC, ...)
- * have no unclaimed pool to triage — those applications aren't claimed off a
- * shared queue — so the tab that lists it doesn't apply there.
+ * Type keys reviewed off a shared unclaimed pool despite not being logistics
+ * licences. Whether a queue is claimed is an officer-workflow property, not a
+ * label one: vessel registrations arrive unassigned and officers claim them,
+ * even though the family kind is DOCUMENT because the certificate they produce
+ * is a document rather than a licence.
  */
-export function savedViewsForFamily(isLogistics: boolean): SavedView[] {
-  return isLogistics
+const CLAIMABLE_NON_LOGISTICS = new Set([
+  'VESSEL_REGISTRATION',
+  // Endorsements run the standard claim-first workflow: applications arrive
+  // unassigned and an officer claims them, even though the family kind is
+  // CERTIFICATE.
+  'ENDORSEMENT_SEAFARER',
+]);
+
+/**
+ * Does this queue have an unclaimed pool to triage?
+ *
+ * True for the mixed All/Mine grids (no type pinned) — nothing is hidden when
+ * the queue spans every type. False for the person-centric services (Seafarer
+ * Registration, Seaman Book, BTC, CoC, ...), whose applications aren't claimed
+ * off a shared queue, so the tab and the claim actions don't apply there.
+ */
+export function hasUnclaimedPool(typeCode: string | undefined): boolean {
+  if (!typeCode) return true;
+  return (
+    resolveFamilyKind(typeCode) === 'LOGISTICS_LICENSE' ||
+    CLAIMABLE_NON_LOGISTICS.has(typeCode)
+  );
+}
+
+/** Drops the Unassigned tab on queues with no unclaimed pool. */
+export function savedViewsForFamily(claimable: boolean): SavedView[] {
+  return claimable
     ? SAVED_VIEWS
     : SAVED_VIEWS.filter((v) => v.id !== 'unassigned');
 }

apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx

@@ -179,20 +179,21 @@ export type VerificationKind = 'medical' | 'sea-service';
  */
 export function MedicalVerificationPage({ kind = 'medical' }: { kind?: VerificationKind }) {
   const { t } = useTranslation();
+  const isMedical = kind === 'medical';
   const [filter, setFilter] = useState<RecordQueueFilter>('SUBMITTED');
   const {
     data: pendingMedical,
     isLoading: loadingMedical,
     isFetching: fetchingMedical,
     refetch: refetchMedical,
-  } = useGetPendingMedicalQuery(filter);
+  } = useGetPendingMedicalQuery(filter, { skip: !isMedical });
 
   const {
     data: pendingSeaService,
     isLoading: loadingSeaService,
     isFetching: fetchingSeaService,
     refetch: refetchSeaService,
-  } = useGetPendingSeaServiceQuery(filter);
+  } = useGetPendingSeaServiceQuery(filter, { skip: isMedical });
 
   const [verifyMedical, { isLoading: rulingMedical }] =
     useVerifyMedicalCertificateMutation();
@@ -353,8 +354,6 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
     [rulingSeaService, rule, verifySeaService, showDate, t],
   );
 
-  const isMedical = kind === 'medical';
-
   return (
     <Container size="xl" py="md">
       <PageHeader
@@ -376,6 +375,8 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
         }
       />
 
+      {statusFilter}
+
       {isMedical ? (
         <AdvancedTable
           columns={medicalTableColumns}
@@ -391,7 +392,7 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
           onPageSizeChange={handleMedicalPageSizeChange}
           refresh={refetchMedical}
           isLoading={loadingMedical || fetchingMedical}
-          emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
+          emptyText={emptyText}
         />
       ) : (
         <AdvancedTable
@@ -408,7 +409,7 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
           onPageSizeChange={handleSeaServicePageSizeChange}
           refresh={refetchSeaService}
           isLoading={loadingSeaService || fetchingSeaService}
-          emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
+          emptyText={emptyText}
         />
       )}
 

apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx

@@ -31,7 +31,6 @@ import {
   IconLock,
   IconMail,
   IconMoon,
-  IconPhone,
   IconSettings,
   IconShieldLock,
   IconSun,
@@ -42,7 +41,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
-import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, phoneNumber } from '@ema-platform/ui';
+import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, phoneNumber, PhoneInput } from '@ema-platform/ui';
 import { useApiMutation } from '@ema-platform/api';
 import { ActiveSessions, setUser } from '@ema-platform/auth';
 import type { AuthUser } from '@ema-platform/auth';
@@ -136,6 +135,9 @@ export function ProfilePage() {
     register: registerProfile,
     handleSubmit: handleProfileSubmit,
     reset: resetProfile,
+    watch: watchProfile,
+    setValue: setValueProfile,
+    trigger: triggerProfile,
     formState: { errors: profileErrors },
   } = useForm<ProfileValues>({
     resolver: zodResolver(profileSchema),
@@ -372,11 +374,12 @@ export function ProfilePage() {
                       error={profileErrors.email?.message}
                       {...registerProfile('email')}
                     />
-                    <TextInput
+                    <PhoneInput
                       label={t('profile.fields.phone')}
-                      leftSection={<IconPhone size={18} />}
+                      value={watchProfile('phoneNumber') || ''}
+                      onChange={(val) => setValueProfile('phoneNumber', val, { shouldValidate: !!profileErrors.phoneNumber })}
+                      onBlur={() => triggerProfile('phoneNumber')}
                       error={profileErrors.phoneNumber?.message}
-                      {...registerProfile('phoneNumber')}
                     />
                   </SimpleGrid>
                 </div>

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;

apps/backoffice/src/app/features/question/components/QuestionOptionsEditor.tsx

@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+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 { 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 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) => {
+    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="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)}
+          />
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            size="sm"
+            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>
+  );
+}

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 { ActionIcon, Menu } from '@mantine/core';
+import {
+  IconDotsVertical,
+  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>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              loading={handlers.isSubmittingReview}
+            >
+              <IconDotsVertical size={16} />
+            </ActionIcon>
+          </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>
       );
     },
   };

apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx

@@ -1,12 +1,42 @@
-import { useState } from 'react';
-import {Stack, Group, Button, Badge, Modal, Text, TextInput, Select, NumberInput, Textarea} from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useTranslation } from 'react-i18next';
-import {IconPlus} from '@tabler/icons-react';
-import { AdvancedColumn, AdvancedTable, ErrorState, ModalFooter, notify, PageHeader, useErrorHandler, useServerTable } from '@ema-platform/ui';
-import { extractErrorMessage } from '@ema-platform/api';
-import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
-import { useGetCertificationsQuery } from '../../../certification/api/certification-api';
+import { useState } from "react";
+import {
+  Stack,
+  Title,
+  Group,
+  Button,
+  Badge,
+  Modal,
+  Text,
+  TextInput,
+  Card,
+  Alert,
+  Select,
+  NumberInput,
+  Textarea,
+  Checkbox,
+  ActionIcon,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useTranslation } from "react-i18next";
+import {
+  IconPlus,
+  IconInfoCircle,
+  IconTrash,
+  IconGripVertical,
+} from "@tabler/icons-react";
+import {
+  AdvancedColumn,
+  AdvancedTable,
+  ErrorState,
+  ModalFooter,
+  notify,
+  PageHeader,
+  useErrorHandler,
+  useServerTable,
+} from "@ema-platform/ui";
+import { extractErrorMessage } from "@ema-platform/api";
+import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
+import { useGetCertificationsQuery } from "../../../certification/api/certification-api";
 import {
   useGetQuestionsQuery,
   useCreateQuestionMutation,
@@ -14,10 +44,92 @@ import {
   useDeleteQuestionMutation,
   useSubmitQuestionMutation,
   useReviewQuestionMutation,
-} from '../../api/question-api';
-import type { Question, QuestionForm } from '../../types/question';
-import { questionColumns } from './columns';
-import { questionActionsColumn } from './actions';
+  useSetQuestionOptionsMutation,
+} from "../../api/question-api";
+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,
@@ -29,58 +141,181 @@ function QuestionForm({
   editing: Question | null;
   certOptions: { value: string; label: string }[];
   isSubmitting: boolean;
-  onSubmit: (values: {
-    certificationId: string;
-    titleEn: string;
-    titleAm: string;
-    form: string;
-    points: number;
-    days: number;
-    hours: number;
-    minutes: number;
-  }, isEdit: boolean) => void;
+  onSubmit: (
+    values: {
+      certificationId: string;
+      titleEn: string;
+      titleAm: string;
+      form: string;
+      points: number;
+      days: number;
+      hours: number;
+      minutes: number;
+      draftOptions: DraftOption[];
+    },
+    isEdit: boolean,
+  ) => void;
   onCancel: () => void;
 }) {
   const { t } = useTranslation();
-  const [certificationId, setCertificationId] = useState<string | null>(editing?.certificationId ?? null);
-  const [titleEn, setTitleEn] = useState(editing?.title?.en ?? '');
-  const [titleAm, setTitleAm] = useState(editing?.title?.am ?? '');
+  const [certificationId, setCertificationId] = useState<string | null>(
+    editing?.certificationId ?? null,
+  );
+  const [titleEn, setTitleEn] = useState(editing?.title?.en ?? "");
+  const [titleAm, setTitleAm] = useState(editing?.title?.am ?? "");
 
   const [form, setForm] = useState<string | null>(editing?.form ?? null);
   const [points, setPoints] = useState<number>(editing?.points ?? 0);
   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();
     if (!certificationId || !titleEn || !titleAm || !form) {
-      notify.error('Please fill all required fields');
+      notify.error("Please fill all required fields");
       return;
     }
-    onSubmit({
-        certificationId, titleEn, titleAm, form, points, days, hours, minutes
-    }, !!editing);
+    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,
+        draftOptions: !editing && form === "CHOICE" ? draftOptions : [],
+      },
+      !!editing,
+    );
   };
 
   return (
-    <Modal opened onClose={onCancel} title={editing ? t('question.update') : t('question.addQuestion')} size="lg">
+    <Modal
+      opened
+      onClose={onCancel}
+      title={editing ? t("question.update") : t("question.addQuestion")}
+      size="lg"
+    >
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
-          <Select label={t('question.form.certification')} placeholder={t('question.form.selectCertification')} data={certOptions} value={certificationId} onChange={setCertificationId} size="sm" searchable required />
-          <TextInput label={t('question.form.titleEn')} placeholder={t('question.form.titleEnPlaceholder')} value={titleEn} onChange={(e) => setTitleEn(e.currentTarget.value)} size="sm" required />
-          <TextInput label={t('question.form.titleAm')} placeholder={t('question.form.titleAmPlaceholder')} value={titleAm} onChange={(e) => setTitleAm(e.currentTarget.value)} size="sm" required />
-          <Select label={t('question.form.form')} placeholder={t('question.form.selectForm')} data={[{ value: 'ESSAY', label: t('question.form.essay') }, { value: 'CHOICE', label: t('question.form.choice') }]} value={form} onChange={setForm} size="sm" required />
-          <NumberInput label={t('question.form.points')} placeholder={t('question.form.pointsPlaceholder')} value={points} onChange={(v) => setPoints(Number(v))} min={0} size="sm" required />
-          <Text fz="sm" fw={500}>{t('question.form.timeAllowed')}</Text>
+          <Select
+            label={t("question.form.certification")}
+            placeholder={t("question.form.selectCertification")}
+            data={certOptions}
+            value={certificationId}
+            onChange={setCertificationId}
+            size="sm"
+            searchable
+            required
+          />
+          <TextInput
+            label={t("question.form.titleEn")}
+            placeholder={t("question.form.titleEnPlaceholder")}
+            value={titleEn}
+            onChange={(e) => setTitleEn(e.currentTarget.value)}
+            size="sm"
+            required
+          />
+          <TextInput
+            label={t("question.form.titleAm")}
+            placeholder={t("question.form.titleAmPlaceholder")}
+            value={titleAm}
+            onChange={(e) => setTitleAm(e.currentTarget.value)}
+            size="sm"
+            required
+          />
+          <Select
+            label={t("question.form.form")}
+            placeholder={t("question.form.selectForm")}
+            data={[
+              { value: "ESSAY", label: t("question.form.essay") },
+              { value: "CHOICE", label: t("question.form.choice") },
+            ]}
+            value={form}
+            onChange={setForm}
+            size="sm"
+            required
+          />
+          <NumberInput
+            label={t("question.form.points")}
+            placeholder={t("question.form.pointsPlaceholder")}
+            value={points}
+            onChange={(v) => setPoints(Number(v))}
+            min={0}
+            size="sm"
+            required
+          />
+          <Text fz="sm" fw={500}>
+            {t("question.form.timeAllowed")}
+          </Text>
           <Group gap="sm" grow>
-            <NumberInput label={t('question.form.days')} value={days} onChange={(v) => setDays(Number(v))} min={0} size="sm" />
-            <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" />
+            <NumberInput
+              label={t("question.form.days")}
+              value={days}
+              onChange={(v) => setDays(Number(v))}
+              min={0}
+              size="sm"
+            />
+            <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="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>
-            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('question.update') : t('question.create')}</Button>
+            <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>
           </ModalFooter>
         </Stack>
       </form>
@@ -90,7 +325,7 @@ function QuestionForm({
 
 export function QuestionPage() {
   const { t, i18n } = useTranslation();
-  const locale = i18n.language as 'en' | 'am';
+  const locale = i18n.language as "en" | "am";
   const { handleError } = useErrorHandler();
   const { data: certRes } = useGetCertificationsQuery();
   const { data, isFetching, isError, refetch } = useGetQuestionsQuery();
@@ -98,7 +333,10 @@ export function QuestionPage() {
   const [createQ, { isLoading: isCreating }] = useCreateQuestionMutation();
   const [updateQ, { isLoading: isUpdating }] = useUpdateQuestionMutation();
   const [deleteQ] = useDeleteQuestionMutation();
-  const [submitQ, { isLoading: isSubmittingReview }] = useSubmitQuestionMutation();
+  const [setOptions, { isLoading: isSavingOptions }] =
+    useSetQuestionOptionsMutation();
+  const [submitQ, { isLoading: isSubmittingReview }] =
+    useSubmitQuestionMutation();
   const [reviewQ, { isLoading: isReviewing }] = useReviewQuestionMutation();
 
   const certifications = certRes?.items ?? [];
@@ -107,60 +345,115 @@ export function QuestionPage() {
   const [editing, setEditing] = useState<Question | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<Question | null>(null);
-  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+  const [deleteOpened, { open: openDelete, close: closeDelete }] =
+    useDisclosure(false);
   const [certFilter, setCertFilter] = useState<string | null>(null);
   const [reviewTarget, setReviewTarget] = useState<Question | null>(null);
-  const [reviewOutcome, setReviewOutcome] = useState<'APPROVED' | 'REJECTED' | 'RETIRED'>('APPROVED');
-  const [reviewRemark, setReviewRemark] = useState('');
+  const [reviewOutcome, setReviewOutcome] = useState<
+    "APPROVED" | "REJECTED" | "RETIRED"
+  >("APPROVED");
+  const [reviewRemark, setReviewRemark] = useState("");
 
-  const certOptions = certifications.filter((c) => c.isActive).map((c) => ({ value: c.id, label: c.name[locale] }));
+  const certOptions = certifications
+    .filter((c) => c.isActive)
+    .map((c) => ({ value: c.id, label: c.name[locale] }));
 
-  const filtered = questions.filter((q) => !certFilter || q.certificationId === certFilter);
+  const filtered = questions.filter(
+    (q) => !certFilter || q.certificationId === certFilter,
+  );
   const page = paginate(filtered);
 
-  const getCertName = (id: string) => certifications.find((c) => c.id === id)?.name?.[locale] ?? '-';
+  const getCertName = (id: string) =>
+    certifications.find((c) => c.id === id)?.name?.[locale] ?? "-";
 
-  const resetForm = () => { setEditing(null); setShowForm(false); };
+  const resetForm = () => {
+    setEditing(null);
+    setShowForm(false);
+  };
 
-  const handleSubmit = async (values: {
-    certificationId: string; titleEn: string; titleAm: string;
-    form: string; points: number; days: number; hours: number; minutes: number;
-  }, isEdit: boolean) => {
+  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 };
+    const time = {
+      days: values.days,
+      hours: values.hours,
+      minutes: values.minutes,
+    };
     try {
       if (isEdit && editing) {
-        await updateQ({ id: editing.id, certificationId: values.certificationId, title, form: values.form as QuestionForm, points: values.points, time }).unwrap();
-        notify.success(t('question.updated'));
+        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();
-        notify.success(t('question.created'));
+        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();
     } catch {
-      notify.error(t('question.error'));
+      notify.error(t("question.error"));
     }
   };
 
   const handleSubmitForApproval = async (question: Question) => {
     try {
       await submitQ(question.id).unwrap();
-      notify.success(t('question.qc.submitted'));
+      notify.success(t("question.qc.submitted"));
     } catch (error) {
-      notify.error(extractErrorMessage(error, t('question.qc.error')));
+      notify.error(extractErrorMessage(error, t("question.qc.error")));
     }
   };
 
-  const openReview = (question: Question, outcome: 'APPROVED' | 'REJECTED' | 'RETIRED') => {
+  const openReview = (
+    question: Question,
+    outcome: "APPROVED" | "REJECTED" | "RETIRED",
+  ) => {
     setReviewTarget(question);
     setReviewOutcome(outcome);
-    setReviewRemark('');
+    setReviewRemark("");
   };
 
   const handleReview = async () => {
     if (!reviewTarget) return;
-    if (reviewOutcome !== 'APPROVED' && !reviewRemark.trim()) {
-      notify.error(t('question.qc.remarkRequired'));
+    if (reviewOutcome !== "APPROVED" && !reviewRemark.trim()) {
+      notify.error(t("question.qc.remarkRequired"));
       return;
     }
     try {
@@ -169,10 +462,10 @@ export function QuestionPage() {
         outcome: reviewOutcome,
         remark: reviewRemark.trim() || undefined,
       }).unwrap();
-      notify.success(t('question.qc.reviewed'));
+      notify.success(t("question.qc.reviewed"));
       setReviewTarget(null);
     } catch (error) {
-      notify.error(extractErrorMessage(error, t('question.qc.error')));
+      notify.error(extractErrorMessage(error, t("question.qc.error")));
     }
   };
 
@@ -180,7 +473,7 @@ export function QuestionPage() {
     if (!deleteTarget) return;
     try {
       await deleteQ(deleteTarget.id).unwrap();
-      notify.success(t('question.deleted'));
+      notify.success(t("question.deleted"));
       closeDelete();
       setDeleteTarget(null);
     } catch (e) {
@@ -188,7 +481,8 @@ export function QuestionPage() {
     }
   };
 
-  if (isError) return <ErrorState title={t('question.loadError')} onRetry={refetch} />;
+  if (isError)
+    return <ErrorState title={t("question.loadError")} onRetry={refetch} />;
 
   const columns: AdvancedColumn<Question>[] = [
     ...questionColumns(t, { locale, getCertName }),
@@ -196,21 +490,35 @@ export function QuestionPage() {
       isSubmittingReview,
       onSubmitForApproval: handleSubmitForApproval,
       onReview: openReview,
-      onEdit: (q) => { setEditing(q); setShowForm(true); },
-      onDelete: (q) => { setDeleteTarget(q); openDelete(); },
+      onEdit: (q) => {
+        setEditing(q);
+        setShowForm(true);
+      },
+      onDelete: (q) => {
+        setDeleteTarget(q);
+        openDelete();
+      },
     }),
   ];
 
   return (
     <Stack gap="lg">
       <PageHeader
-        title={t('question.title')}
+        title={t("question.title")}
         noMargin
         action={
           !showForm && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
-              <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
-                {t('question.addQuestion')}
+            <RequirePermission
+              anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]}
+              hideOnly
+            >
+              <Button
+                variant="light"
+                leftSection={<IconPlus size={16} />}
+                onClick={() => setShowForm(true)}
+                size="sm"
+              >
+                {t("question.addQuestion")}
               </Button>
             </RequirePermission>
           )
@@ -221,7 +529,7 @@ export function QuestionPage() {
         <QuestionForm
           editing={editing}
           certOptions={certOptions}
-          isSubmitting={isCreating || isUpdating}
+          isSubmitting={isCreating || isUpdating || isSavingOptions}
           onSubmit={handleSubmit}
           onCancel={resetForm}
         />
@@ -230,66 +538,98 @@ export function QuestionPage() {
       <AdvancedTable
         columns={columns}
         data={page.rows}
-        title={t('question.pool')}
-        tableName={t('question.title')}
+        title={t("question.pool")}
+        tableName={t("question.title")}
         toolbar={
           <Select
-            placeholder={t('question.filterByCertification')}
-            data={[{ value: '', label: 'All' }, ...certOptions]}
+            placeholder={t("question.filterByCertification")}
+            data={[{ value: "", label: "All" }, ...certOptions]}
             value={certFilter}
-            onChange={(v) => { setCertFilter(v ?? null); setPageIndex(0); }}
+            onChange={(v) => {
+              setCertFilter(v ?? null);
+              setPageIndex(0);
+            }}
             size="sm"
             style={{ width: 280 }}
             clearable
           />
         }
         itemCount={page.itemCount}
-          pageIndex={page.pageIndex}
-          onPageChange={setPageIndex}
-          pageSize={pageSize}
-          onPageSizeChange={setPageSize}
-          refresh={refetch}
-          isLoading={isFetching}
-          emptyText={t('question.noQuestions')}
-        />
+        pageIndex={page.pageIndex}
+        onPageChange={setPageIndex}
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        refresh={refetch}
+        isLoading={isFetching}
+        emptyText={t("question.noQuestions")}
+      />
 
       <Modal
         opened={Boolean(reviewTarget)}
         onClose={() => setReviewTarget(null)}
-        title={t('question.qc.reviewTitle')}
+        title={t("question.qc.reviewTitle")}
         size="md"
         radius="lg"
       >
         <Stack gap="sm">
-          <Text fz="sm" fw={500}>{reviewTarget?.title?.[locale]}</Text>
-          <Text fz="xs" c="dimmed">{t('question.qc.onlyApprovedUsable')}</Text>
-          <Badge variant="light" color={reviewOutcome === 'APPROVED' ? 'teal' : reviewOutcome === 'REJECTED' ? 'red' : 'dark'} w="fit-content">
+          <Text fz="sm" fw={500}>
+            {reviewTarget?.title?.[locale]}
+          </Text>
+          <Text fz="xs" c="dimmed">
+            {t("question.qc.onlyApprovedUsable")}
+          </Text>
+          <Badge
+            variant="light"
+            color={
+              reviewOutcome === "APPROVED"
+                ? "teal"
+                : reviewOutcome === "REJECTED"
+                  ? "red"
+                  : "dark"
+            }
+            w="fit-content"
+          >
             {t(`question.qc.${reviewOutcome}`)}
           </Badge>
           <Textarea
-            label={t('question.qc.remark')}
+            label={t("question.qc.remark")}
             minRows={3}
             autosize
             value={reviewRemark}
             onChange={(e) => setReviewRemark(e.currentTarget.value)}
-            required={reviewOutcome !== 'APPROVED'}
+            required={reviewOutcome !== "APPROVED"}
           />
           <Group justify="flex-end">
-            <Button variant="default" size="sm" onClick={() => setReviewTarget(null)}>
-              {t('question.cancel')}
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => setReviewTarget(null)}
+            >
+              {t("question.cancel")}
             </Button>
             <Button size="sm" loading={isReviewing} onClick={handleReview}>
-              {t(`question.qc.${reviewOutcome === 'APPROVED' ? 'approve' : reviewOutcome === 'REJECTED' ? 'reject' : 'retire'}`)}
+              {t(
+                `question.qc.${reviewOutcome === "APPROVED" ? "approve" : reviewOutcome === "REJECTED" ? "reject" : "retire"}`,
+              )}
             </Button>
           </Group>
         </Stack>
       </Modal>
 
-      <Modal opened={deleteOpened} onClose={closeDelete} title={t('question.confirmDelete')} size="sm">
-        <Text mb="md">{t('question.deleteConfirmText')}</Text>
+      <Modal
+        opened={deleteOpened}
+        onClose={closeDelete}
+        title={t("question.confirmDelete")}
+        size="sm"
+      >
+        <Text mb="md">{t("question.deleteConfirmText")}</Text>
         <ModalFooter>
-          <Button variant="default" onClick={closeDelete} size="sm">{t('question.cancel')}</Button>
-          <Button color="red" onClick={handleDelete} size="sm">{t('question.delete')}</Button>
+          <Button variant="default" onClick={closeDelete} size="sm">
+            {t("question.cancel")}
+          </Button>
+          <Button color="red" onClick={handleDelete} size="sm">
+            {t("question.delete")}
+          </Button>
         </ModalFooter>
       </Modal>
     </Stack>

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[];
+}

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 { 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';
@@ -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 {
@@ -21,49 +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>
+        <Menu shadow="md" width={180} position="bottom-end">
+          <Menu.Target>
+            <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)}>
+              {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>
-              <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>
+            )}
+            {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>
-            </>
-          )}
-          {(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 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>
-          )}
-          <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')}
-            </Button>
-          </RequirePermission>
-        </Group>
+          </Menu.Dropdown>
+        </Menu>
       );
     },
   };

apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx

@@ -95,6 +95,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);
@@ -231,6 +233,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([]);
@@ -257,6 +272,7 @@ export function ResultPage() {
       onQc: openQc,
       onViewDetail: viewDetail,
       onDelete: (r) => { setDeleteTarget(r); openDelete(); },
+      onPublish: (r) => { setPublishTarget(r); openPublish(); },
     }),
   ];
 
@@ -283,9 +299,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>
         }
       />
@@ -472,14 +490,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>
         ) : (
@@ -542,6 +568,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">

apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import {Alert, Badge, Button, Center, Container, Group, Loader, Modal, Paper, Stack, Table, Text, Textarea} from '@mantine/core';
-import { IconAlertTriangle, IconArrowLeft, IconCheck, IconDownload } from '@tabler/icons-react';
+import {Alert, Avatar, Badge, Button, Center, Container, Divider, Group, Loader, Modal, Paper, SimpleGrid, Stack, Text, Textarea, ThemeIcon, rem} from '@mantine/core';
+import { IconAlertTriangle, IconArrowLeft, IconCash, IconCheck, IconDownload, IconFileCertificate } from '@tabler/icons-react';
 import {
   SEAFARER_DOCUMENT_KIND_LABELS,
   SEAFARER_DOCUMENT_STATUS_COLORS,
@@ -20,20 +20,35 @@ import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
 
 const QUEUE_PATH = { SEAMAN_BOOK: '/seaman-book-queue', BTC_BASIC_TRAINING: '/btc-queue' } as const;
 
-function Row({ label, value }: { label: string; value: React.ReactNode }) {
+function Stat({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <Table.Tr>
-      <Table.Td w="40%">
-        <Text size="xs" c="dimmed">
-          {label}
-        </Text>
-      </Table.Td>
-      <Table.Td>
-        <Text size="sm" component="div">
-          {value ?? '—'}
-        </Text>
-      </Table.Td>
-    </Table.Tr>
+    <div>
+      <Text fz={10} fw={700} tt="uppercase" c="dimmed" lh={1.2} mb={3}>{label}</Text>
+      <Text fz="sm" fw={600} component="div">{value ?? '—'}</Text>
+    </div>
+  );
+}
+
+function SectionCard({
+  title,
+  icon,
+  color,
+  children,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Paper withBorder radius="md" p="md">
+      <Group gap="xs" mb="sm">
+        <ThemeIcon variant="light" color={color} size={26} radius="md">{icon}</ThemeIcon>
+        <Text fw={700} fz="sm">{title}</Text>
+      </Group>
+      <Divider mb="md" />
+      {children}
+    </Paper>
   );
 }
 
@@ -168,61 +183,49 @@ export function SeafarerDocumentReviewPage() {
         </Alert>
       )}
 
-      <Paper withBorder p="lg" radius="md">
-        <Stack gap="md">
+      <Paper withBorder radius="md" p="lg" mb="md">
+        <Group gap="md" wrap="nowrap">
+          <Avatar size={52} radius="xl" color="blue" style={{ fontSize: rem(18) }}>
+            {(applicant?.name ?? '??').split(' ').filter(Boolean).slice(0, 2).map((p) => p[0]).join('').toUpperCase()}
+          </Avatar>
           <div>
-            <Text fw={600} size="sm" mb={4}>
-              Seafarer
-            </Text>
-            <Table variant="vertical">
-              <Table.Tbody>
-                <Row label="Name" value={applicant?.name} />
-                <Row label="Seafarer №" value={applicant?.seafarerNumber} />
-                <Row
-                  label="Registration"
-                  value={
-                    applicant?.registrationId ? (
-                      <Link to={`/seafarer-registrations/${applicant.registrationId}`}>
-                        {applicant.registrationNumber}
-                      </Link>
-                    ) : (
-                      applicant?.registrationNumber
-                    )
-                  }
-                />
-              </Table.Tbody>
-            </Table>
+            <Text fw={700} fz="lg" lh={1.2}>{applicant?.name ?? '—'}</Text>
+            <Group gap={6} mt={4}>
+              <Text fz="xs" c="dimmed" ff="monospace">{applicant?.seafarerNumber ?? '—'}</Text>
+              {applicant?.registrationId && (
+                <>
+                  <Text fz="xs" c="dimmed">·</Text>
+                  <Link to={`/seafarer-registrations/${applicant.registrationId}`}>
+                    <Text fz="xs" c="blue.6">{applicant.registrationNumber}</Text>
+                  </Link>
+                </>
+              )}
+            </Group>
           </div>
-          <div>
-            <Text fw={600} size="sm" mb={4}>
-              Payment
-            </Text>
-            <Table variant="vertical">
-              <Table.Tbody>
-                <Row label="Fee" value={document.feeAmount !== null ? `${document.feeAmount} ${document.feeCurrency}` : null} />
-                <Row label="Released to payment" value={document.submittedAt ? showDate(document.submittedAt) : null} />
-                <Row label="Paid" value={document.paidAt ? showDate(document.paidAt) : null} />
-                <Row label="Provider" value={payment?.provider} />
-                <Row label="Reference" value={document.paymentReference ?? payment?.providerRef} />
-              </Table.Tbody>
-            </Table>
-          </div>
-          <div>
-            <Text fw={600} size="sm" mb={4}>
-              Issuance
-            </Text>
-            <Table variant="vertical">
-              <Table.Tbody>
-                <Row label="Pickup date" value={document.scheduledIssuanceDate ? showDate(document.scheduledIssuanceDate) : null} />
-                <Row label="Document №" value={document.documentNumber} />
-                <Row label="Issued" value={document.issueDate ? showDate(document.issueDate) : null} />
-                <Row label="Valid until" value={document.expiryDate ? showDate(document.expiryDate) : null} />
-              </Table.Tbody>
-            </Table>
-          </div>
-        </Stack>
+        </Group>
       </Paper>
 
+      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+        <SectionCard title="Payment" icon={<IconCash size={14} />} color="teal">
+          <SimpleGrid cols={2} spacing="md">
+            <Stat label="Fee" value={document.feeAmount !== null ? `${document.feeAmount} ${document.feeCurrency}` : null} />
+            <Stat label="Released to payment" value={document.submittedAt ? showDate(document.submittedAt) : null} />
+            <Stat label="Paid" value={document.paidAt ? showDate(document.paidAt) : null} />
+            <Stat label="Provider" value={payment?.provider} />
+            <Stat label="Reference" value={document.paymentReference ?? payment?.providerRef} />
+          </SimpleGrid>
+        </SectionCard>
+
+        <SectionCard title="Issuance" icon={<IconFileCertificate size={14} />} color="violet">
+          <SimpleGrid cols={2} spacing="md">
+            <Stat label="Pickup date" value={document.scheduledIssuanceDate ? showDate(document.scheduledIssuanceDate) : null} />
+            <Stat label="Document №" value={document.documentNumber} />
+            <Stat label="Issued" value={document.issueDate ? showDate(document.issueDate) : null} />
+            <Stat label="Valid until" value={document.expiryDate ? showDate(document.expiryDate) : null} />
+          </SimpleGrid>
+        </SectionCard>
+      </SimpleGrid>
+
       <Modal opened={scheduleOpen} onClose={() => setScheduleOpen(false)} title="Schedule pickup" centered>
         <Stack>
           <AmharicDatePicker label="Pickup date" dateFormat="date" value={pickupDate} onChange={setPickupDate} required />

apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage.tsx

@@ -7,7 +7,9 @@ import {
   SEAFARER_REGISTRATION_STATUS_TONES,
   SEAFARER_REGISTRATION_STATUS_LABELS,
   displaySeafarerAnswer,
+  useGetActiveDepartmentsQuery,
   useListSeafarerRegistrationsQuery,
+  useLocalized,
   type SeafarerRegistration,
   type SeafarerRegistrationStatus,
 } from '@ema-platform/api';
@@ -28,12 +30,16 @@ export function applicantName(r: Pick<SeafarerRegistration, 'firstName' | 'middl
 export function SeafarerRegistrationQueuePage() {
   const navigate = useNavigate();
   const showDate = useDateDisplayer();
+  const localized = useLocalized();
   const [status, setStatus] = useState<SeafarerRegistrationStatus | null>(null);
   const [search, setSearch] = useState('');
   const [debouncedSearch] = useDebouncedValue(search, 300);
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
 
+  const { data: departments } = useGetActiveDepartmentsQuery();
+  const departmentOptions = departments?.map((d) => ({ value: d.code, label: localized(d.name) }));
+
   const { data, isLoading, isFetching, refetch } = useListSeafarerRegistrationsQuery({
     status: status ?? undefined,
     search: debouncedSearch || undefined,
@@ -69,7 +75,11 @@ export function SeafarerRegistrationQueuePage() {
       {
         header: 'Department',
         accessorKey: 'department',
-        cell: ({ row }) => <Text size="sm">{displaySeafarerAnswer('department', row.original.department)}</Text>,
+        cell: ({ row }) => (
+          <Text size="sm">
+            {displaySeafarerAnswer('department', row.original.department, departmentOptions)}
+          </Text>
+        ),
       },
       {
         header: 'Submitted',
@@ -100,7 +110,7 @@ export function SeafarerRegistrationQueuePage() {
         ),
       },
     ],
-    [showDate],
+    [showDate, departmentOptions],
   );
 
   return (

apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationReviewPage.tsx

@@ -11,7 +11,9 @@ import {
   displaySeafarerAnswer,
   extractErrorMessage,
   useApproveSeafarerRegistrationMutation,
+  useGetActiveDepartmentsQuery,
   useGetSeafarerRegistrationReviewQuery,
+  useLocalized,
   useRejectSeafarerRegistrationMutation,
   useRequestSeafarerRegistrationChangesMutation,
 } from '@ema-platform/api';
@@ -31,7 +33,10 @@ const DECISION_COPY: Record<Decision, { title: string; label: string; color: str
 export function SeafarerRegistrationReviewPage() {
   const { id = '' } = useParams();
   const navigate = useNavigate();
+  const localized = useLocalized();
   const { data, isLoading, error } = useGetSeafarerRegistrationReviewQuery(id, { skip: !id });
+  const { data: departments } = useGetActiveDepartmentsQuery();
+  const departmentOptions = departments?.map((d) => ({ value: d.code, label: localized(d.name) }));
 
   const [approve, { isLoading: approving }] = useApproveSeafarerRegistrationMutation();
   const [reject, { isLoading: rejecting }] = useRejectSeafarerRegistrationMutation();
@@ -166,7 +171,9 @@ export function SeafarerRegistrationReviewPage() {
                           </Text>
                         </Table.Td>
                         <Table.Td>
-                          <Text size="sm">{displaySeafarerAnswer(field, registration[field])}</Text>
+                          <Text size="sm">
+                            {displaySeafarerAnswer(field, registration[field], departmentOptions)}
+                          </Text>
                         </Table.Td>
                       </Table.Tr>
                     ))}

apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx

@@ -2,7 +2,7 @@ import { PageHeader, StatusBadge } from '@ema-platform/ui';
 import { type StatusTone } from '@ema-platform/shared';
 import { useState } from 'react';
 import { useApiQuery } from '@ema-platform/api';
-import {ActionIcon, Badge, Button, Card, Collapse, Divider, Group, Modal, Paper, Select, SimpleGrid, Stack, Table, Text, TextInput, ThemeIcon, rem} from '@mantine/core';
+import {ActionIcon, Avatar, Badge, Button, Card, Collapse, Divider, Group, Modal, Paper, Select, SimpleGrid, Stack, Table, Text, TextInput, ThemeIcon, rem} from '@mantine/core';
 import {
   IconBook2,
   IconCertificate,
@@ -15,6 +15,7 @@ import {
   IconShieldCheck,
   IconUser,
   IconUsers,
+  IconX,
 } from '@tabler/icons-react';
 
 // ---------------------------------------------------------------------------
@@ -47,66 +48,72 @@ const STATUS_TONE: Record<string, StatusTone> = { Active: 'success', Inactive: '
 // ---------------------------------------------------------------------------
 // Detail modal
 // ---------------------------------------------------------------------------
+function Stat({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div>
+      <Text fz={10} fw={700} tt="uppercase" c="dimmed" lh={1.2} mb={3}>{label}</Text>
+      <Text fz="sm" fw={600}>{value ?? '—'}</Text>
+    </div>
+  );
+}
+
 function DetailModal({ sf, opened, onClose }: { sf: Seafarer | null; opened: boolean; onClose: () => void }) {
   if (!sf) return null;
+  const initials = sf.name.split(' ').filter(Boolean).slice(0, 2).map((p) => p[0]).join('').toUpperCase();
   return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={<Group gap="xs"><IconUser size={17} /><Text fw={700}>{sf.name} — {sf.id}</Text></Group>}
-      size="xl"
-      radius="lg"
-    >
-      <Stack gap="lg">
-        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-          <Paper withBorder radius="md" p="md">
-            <Text fz="xs" fw={700} c="dimmed" mb="xs" style={{ textTransform: 'uppercase' }}>Personal</Text>
-            <Stack gap={4}>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Full Name</Text><Text fz="xs" fw={600}>{sf.name}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Nationality</Text><Text fz="xs">{sf.nationality}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Date of Birth</Text><Text fz="xs">{sf.dob}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Rank</Text><Text fz="xs" fw={600}>{sf.rank}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Status</Text><StatusBadge tone={STATUS_TONE[sf.status]} label={sf.status} variant="light" size="xs" /></Group>
-            </Stack>
-          </Paper>
-          <Paper withBorder radius="md" p="md">
-            <Text fz="xs" fw={700} c="dimmed" mb="xs" style={{ textTransform: 'uppercase' }}>Documents</Text>
-            <Stack gap={4}>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">Seaman Book</Text><Text fz="xs" fw={600}>{sf.seamanBookNo}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">SB Expiry</Text><Text fz="xs">{sf.seamanBookExpiry}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">BTC No.</Text><Text fz="xs">{sf.btcNo ?? '—'}</Text></Group>
-              <Group justify="space-between"><Text fz="xs" c="dimmed">BSID No.</Text><Text fz="xs">{sf.bsidNo ?? '—'}</Text></Group>
-              <Group justify="space-between">
-                <Text fz="xs" c="dimmed">Medical Expiry</Text>
-                <Badge color={MEDICAL_COLOR[sf.medicalStatus]} variant="light" size="xs">{sf.medicalExpiry} ({sf.medicalStatus})</Badge>
+    <Modal opened={opened} onClose={onClose} size="xl" radius="lg" padding={0} withCloseButton={false}>
+      <Stack gap={0}>
+        {/* Header */}
+        <Group justify="space-between" wrap="nowrap" p="lg" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+          <Group gap="md" wrap="nowrap">
+            <Avatar size={52} radius="xl" color="blue" style={{ fontSize: rem(18) }}>{initials}</Avatar>
+            <div>
+              <Text fw={700} fz="lg" lh={1.2}>{sf.name}</Text>
+              <Group gap={6} mt={4}>
+                <Text fz="xs" c="dimmed" ff="monospace">{sf.id}</Text>
+                <Text fz="xs" c="dimmed">·</Text>
+                <Text fz="xs" c="dimmed">{sf.rank}</Text>
               </Group>
-            </Stack>
-          </Paper>
-        </SimpleGrid>
+            </div>
+          </Group>
+          <Group gap="xs">
+            <StatusBadge tone={STATUS_TONE[sf.status]} label={sf.status} variant="light" />
+            <ActionIcon variant="subtle" color="gray" onClick={onClose}><IconX size={16} /></ActionIcon>
+          </Group>
+        </Group>
 
-        {sf.cocCerts.length > 0 && (
-          <Paper withBorder radius="md" p="md">
-            <Text fz="xs" fw={700} c="dimmed" mb="xs" style={{ textTransform: 'uppercase' }}>CoC / CoP Certificates</Text>
-            <Table fz="xs" verticalSpacing="xs">
-              <Table.Thead bg="var(--mantine-color-default-hover)">
-                <Table.Tr>
-                  {['Type', 'Certificate No.', 'Expiry'].map((h) => (
-                    <Table.Th key={h} style={{ fontSize: rem(10), textTransform: 'uppercase', color: 'var(--mantine-color-dimmed)' }}>{h}</Table.Th>
-                  ))}
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
+        <Stack gap="lg" p="lg">
+          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="lg">
+            <Stat label="Nationality" value={sf.nationality} />
+            <Stat label="Date of Birth" value={sf.dob} />
+            <Stat label="Seaman Book №" value={sf.seamanBookNo} />
+            <Stat label="SB Expiry" value={sf.seamanBookExpiry} />
+            <Stat label="BTC №" value={sf.btcNo ?? <Badge color="red" variant="light" size="xs">Missing</Badge>} />
+            <Stat label="BSID №" value={sf.bsidNo ?? <Badge color="red" variant="light" size="xs">Missing</Badge>} />
+            <Stat label="Medical" value={<Badge color={MEDICAL_COLOR[sf.medicalStatus]} variant="light" size="sm">{sf.medicalStatus}</Badge>} />
+            <Stat label="Medical Expiry" value={sf.medicalExpiry} />
+          </SimpleGrid>
+
+          {sf.cocCerts.length > 0 && (
+            <Paper withBorder radius="md" p="md">
+              <Text fz="xs" fw={700} c="dimmed" mb="sm" tt="uppercase">CoC / CoP Certificates</Text>
+              <Stack gap="xs">
                 {sf.cocCerts.map((c) => (
-                  <Table.Tr key={c.no}>
-                    <Table.Td><Text fz="xs" fw={600}>{c.type}</Text></Table.Td>
-                    <Table.Td><Text fz="xs" c="blue.7">{c.no}</Text></Table.Td>
-                    <Table.Td><Text fz="xs">{c.expiry}</Text></Table.Td>
-                  </Table.Tr>
+                  <Group key={c.no} justify="space-between" wrap="nowrap" p="xs" style={{ borderRadius: 8, background: 'var(--mantine-color-default-hover)' }}>
+                    <Group gap="xs" wrap="nowrap">
+                      <ThemeIcon variant="light" color="violet" size={30} radius="md"><IconCertificate size={15} /></ThemeIcon>
+                      <div>
+                        <Text fz="sm" fw={600}>{c.type}</Text>
+                        <Text fz="xs" c="dimmed" ff="monospace">{c.no}</Text>
+                      </div>
+                    </Group>
+                    <Text fz="xs" c="dimmed">Expires {c.expiry}</Text>
+                  </Group>
                 ))}
-              </Table.Tbody>
-            </Table>
-          </Paper>
-        )}
+              </Stack>
+            </Paper>
+          )}
+        </Stack>
       </Stack>
     </Modal>
   );

apps/backoffice/src/app/features/user-management/UserManagementPage.tsx

@@ -99,7 +99,11 @@ const UM_CONFIG: DesignConfig = {
 
 const UM_RUNTIME = {
   basename: '/um',
-  apiUrl: import.meta.env.VITE_BASE_API_URL,
+  // Keep the embedded IAM module on the same API as the backoffice client.
+  // When VITE_BASE_API_URL is absent locally, passing undefined makes iamui
+  // fall back to its remote development server, where the local JWT is
+  // rejected and the module redirects to its login page.
+  apiUrl: import.meta.env.VITE_BASE_API_URL ?? 'http://localhost:3000/api',
 };
 
 const buttonStyle: React.CSSProperties = {

apps/backoffice/src/app/i18n/locales/am.ts

@@ -48,6 +48,7 @@ export const am: Translations = {
     typeVESSEL_OWNERSHIP_TRANSFER: "የመርከብ ባለቤትነት ዝውውር",
     typeCERTIFICATE_OF_COMPETENCY: "የብቃት ማረጋገጫ ምስክር ወረቀት",
     typeCERTIFICATE_OF_PROFICIENCY: "የብቃት ምስክር ወረቀት",
+    typeENDORSEMENT_SEAFARER: "የባህረኛ ማስተያየት (CoC / GOC)",
     typeENDORSEMENT_COC: "የCoC ማረጋገጫ",
     typeENDORSEMENT_GOC: "የGOC ማረጋገጫ",
     primary: "ዋና",
@@ -87,8 +88,7 @@ export const am: Translations = {
     btcQueue: "የBTC ወረፋ",
     cocQueue: "የCoC ወረፋ",
     copQueue: "የCoP ወረፋ",
-    endorsementCocQueue: "የCoC ማረጋገጫ ወረፋ",
-    endorsementGocQueue: "የGOC ማረጋገጫ ወረፋ",
+    endorsementQueue: "የማስተያየት ወረፋ",
     vesselRegistrations: "የመርከብ ምዝገባ",
     // vesselRegistrationReport: 'የምዝገባ ሪፖርት',
     vesselTransfers: "የመርከብ ባለቤትነት ዝውውር",
@@ -257,8 +257,10 @@ export const am: Translations = {
       oral: "ቃል",
       essay: "ኢሴይ",
       choice: "ምርጫ",
+      both: "ሁለቱም",
       offline: "ከመስመር ውጪ",
       online: "በመስመር",
+      onlineChoiceOnlyHint: "የመስመር ላይ ፈተናዎች በራስ-ሰር ይመዘገባሉ፣ ይህም ለምርጫ ጥያቄዎች ብቻ ይሰራል።",
       sum: "ድምር",
       average: "አማካይ",
       percentage: "መቶኛ",
@@ -266,6 +268,11 @@ export const am: Translations = {
       random: "በዘፈቀደ",
       cuttingPoint: "የማለፊያ ነጥብ",
       cuttingPointPlaceholder: "ለማለፍ ዝቅተኛ ነጥብ",
+      cuttingPointPercentagePlaceholder: "ለማለፍ ዝቅተኛ መቶኛ (0-100)",
+      cuttingPointPercentageHint: "የመቶኛ ግምገማ — ከ100 አይበልጥም።",
+      fillRequiredBasic: "በመሠረታዊ መረጃ ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ።",
+      fillRequiredSettings: "በቅንብሮች ውስጥ ያሉ አስፈላጊ መስኮችን ይሙሉ — ዓይነት፣ ቅጽ፣ የአስተዳደር ዘዴ፣ የግምገማ ዘዴ እና የማለፊያ ነጥብ።",
+      directionBothLanguages: "መመሪያ በሁለቱም እንግሊዝኛ እና አማርኛ ጽሑፍ ያስፈልገዋል፣ ወይም ሁለቱንም ባዶ ይተዉ።",
       status: "ሁኔታ",
       statusPlaceholder: "የፈተና ሁኔታ",
       pending: "በመጠባበቅ ላይ",
@@ -303,6 +310,7 @@ export const am: Translations = {
     formType: {
       ESSAY: "ኢሴይ",
       CHOICE: "ምርጫ",
+      BOTH: "ሁለቱም",
     },
     admin: {
       OFFLINE: "ከመስመር ውጪ",
@@ -330,6 +338,10 @@ export const am: Translations = {
       retake: "ድጋሚ {{n}}",
       firstSitting: "የመጀመሪያ ሙከራ",
       remarkRequired: "ለመውጣት ወይም ለመታገድ ምክንያት ያስፈልጋል።",
+      regrade: "እንደገና ደረጃ ስጥ",
+      regraded: "ውጤት ከተመዘገበው ሙከራ ተፈጥሯል።",
+      regradeNotEligible: "በራስ-ሰር ሊገመገም አይችልም፦ {{reason}}። ውጤት መዝግብ ተጠቀም።",
+      regradeError: "ይህን ሙከራ እንደገና መገምገም አልተቻለም።",
     },
     attendance: {
       REGISTERED: "አልተጠራም",
@@ -374,6 +386,8 @@ export const am: Translations = {
     randomSelected: "{{count}} የጸደቁ ጥያቄዎች ተመርጠዋል",
     randomError: "ጥያቄዎችን መምረጥ አልተቻለም",
     notEnoughApproved: "ለዚህ ትምህርት በቂ የጸደቁ ጥያቄዎች የሉም።",
+    cannotReachCuttingPoint:
+      "ይህ ወረቀት የማለፊያ ነጥቡን ሊደርስ አይችልም (ከፍተኛ {{max}}፣ የማለፊያ ነጥብ {{cuttingPoint}})። ተጨማሪ ወይም ከፍ ያለ ነጥብ ያላቸው ጥያቄዎችን ጨምር፣ ወይም የማለፊያ ነጥቡን ቀንስ።",
   },
 
   country: {
@@ -691,6 +705,8 @@ export const am: Translations = {
       returned: "ውጤት ወደ ፈታኙ ተመልሷል",
       publishedCount: "{{published}} ውጤቶች ወጥተዋል፤ {{skipped}} ተዘለዋል።",
       publishNeedsExam: "ውጤቶችን ለማውጣት መጀመሪያ በፈተና ያጣሩ።",
+      publishConfirmText:
+        "ይህ ለ{{exam}} የጸደቁትን ሁሉንም ውጤቶች ያወጣል — ይህን ብቻ አይደለም — እና እያንዳንዱን ተፈታኝ ያሳውቃል። ይቀጥል?",
       lockedAfterApproval: "ይህ ውጤት ጸድቋል፤ ማስተካከል አይቻልም። መጀመሪያ ወደ ፈታኙ ይመልሱት።",
       originalScore: "የፈታኙ ጠቅላላ",
       derivedStatus: "ውጤት (ከማለፊያ ነጥብ የተገኘ)",
@@ -782,6 +798,22 @@ export const am: Translations = {
       onlyApprovedUsable: "የጸደቁ ጥያቄዎች ብቻ በፈተና ወረቀት ላይ ሊቀመጡ ይችላሉ።",
       error: "ተግባሩ አልተሳካም",
     },
+    options: {
+      title: "የመልስ አማራጮች",
+      hint: "ትክክለኛውን አማራጭ ምረጥ/ምረጪ። ማስቀመጥ መላውን የአማራጭ ስብስብ ይተካል።",
+      optionLabel: "አማራጭ {{number}}",
+      optionEn: "አማራጭ {{number}} (እንግሊዝኛ)",
+      optionAm: "አማራጭ {{number}} (አማርኛ)",
+      correct: "ትክክለኛ",
+      addOption: "አማራጭ ጨምር",
+      save: "አማራጮችን አስቀምጥ",
+      saved: "አማራጮች ተቀምጠዋል",
+      saveFirst: "መጀመሪያ ጥያቄውን አስቀምጥ፣ ከዚያ አማራጮችን ጨምር።",
+      replaceNotice: "ትክክለኛ መልሶች ከተቀመጡ በኋላ እዚህ አይታዩም — እንደገና ካስተካከልክ/ካስተካከልሽ ዳግም ምረጥ/ምረጪ።",
+      needAtLeastTwo: "ጥያቄ ቢያንስ ሁለት አማራጮች ያስፈልገዋል።",
+      needOneCorrect: "ቢያንስ አንድ አማራጭ እንደ ትክክለኛ ምረጥ/ምረጪ።",
+      textRequired: "እያንዳንዱ አማራጭ በሁለቱም ቋንቋዎች ጽሑፍ ያስፈልገዋል።",
+    },
   },
 
   configuration: {
@@ -984,6 +1016,7 @@ export const am: Translations = {
       reportReview: "ለቡድን መሪ አሳውቅ",
       assignInspector: "ምርመራ መድብ",
       reportInspection: "የምርመራ ውጤት አሳውቅ",
+      assignReviewer: "ገምጋሚ መድብ",
       escalate: "ወደ ላይ አሳድግ",
       hold: "አግድ",
       resume: "ቀጥል",
@@ -995,7 +1028,10 @@ export const am: Translations = {
       requestAdjustment: "ማስተካከያ ጠይቅ",
       reject: "አትቀበል",
       scheduleExam: "የፈተና ቀጠሮ ስጥ",
+      recordExamOutcome: "የፈተና ውጤት መዝግብ",
       confirmPayment: "ክፍያ አረጋግጥ",
+      scheduleIssuance: "የመረከቢያ ቀጠሮ ያዝ",
+      issueCertificate: "ሰርተፍኬት ስጥ",
       print: "ሰነድ አትም",
       copyLink: "አገናኝ ቅዳ",
       downloadDocuments: "ሁሉንም ሰነዶች አውርድ",
@@ -1009,10 +1045,14 @@ export const am: Translations = {
       needsFlags: "ማስተካከያ ለመጠየቅ ቢያንስ አንድ ነገር ምልክት ያድርጉ",
       needsCapital: "መጀመሪያ የተረጋገጠውን ካፒታል ይመዝግቡ",
       needsInspection: "የምርመራ ውጤት ያስፈልጋል",
+      inspectionNotYetDue:
+        "ምርመራ ለ{{date}} ተይዟል። ውጤቶች ከተያዘው ሰዓት በኋላ መመዝገብ ይችላሉ።",
       needsDocumentReviews:
         "መጀመሪያ ሁሉንም ሰነዶች ይቀበሉ — ከ{{total}} {{accepted}} ተቀብለዋል። የሰነዶች ትር ከፍተው ቀሪዎቹን ይቀበሉ።",
       needsDocumentsUploaded: "እስካሁን የሚገመገም ሰነድ አልተጫነም",
     },
+    inspectionFailedBlocked:
+      "ምርመራው ስላልተሳካ ማጽደቅ አይቻልም። ድጋሚ ምርመራ ያስይዙ፣ ማስተካከያ ይጠይቁ ወይም ማመልከቻውን ውድቅ ያድርጉ።",
     reasons: {
       incompleteDocuments: "ያልተሟሉ ሰነዶች",
       belowCapital: "ካፒታል ከሚያስፈልገው በታች",
@@ -1039,6 +1079,7 @@ export const am: Translations = {
       hold: "ለ{{applicant}} ማመልከቻ {{number}} ያግዳል። ለእርስዎ ተመድቦ ይቆያል።",
       resume: "ማመልከቻ {{number}} ወደ ታገደበት ደረጃ ይመልሳል።",
       escalate: "ማመልከቻ {{number}} ለውሳኔ ወደ የበላይ ኃላፊ ያሳድጋል።",
+      "assign-reviewer": "ማመልከቻ {{number}} ለተመረጠው ሹም ሰጥቶ ግምገማውን ያስጀምራል።",
       "confirm-payment": "ለማመልከቻ {{number}} ክፍያ ያረጋግጣል።",
       "schedule-exam": "ለማመልከቻ {{number}} {{applicant}}ን ለፈተና ክፍለ ጊዜ ይመድባል።",
     },
@@ -1133,6 +1174,7 @@ export const am: Translations = {
       resume: "ማመልከቻው ቀጥሏል",
       escalate: "ወደ ላይ አድጓል",
       assign: "እንደገና ተመድቧል",
+      assignReviewer: "ግምገማ ተመድቧል",
       scheduled: "ምርመራ ተይዟል",
       inspectionPassed: "ምርመራ አልፏል",
       inspectionFailed: "ምርመራ ወድቋል",

apps/backoffice/src/app/i18n/locales/en.ts

@@ -48,6 +48,7 @@ export const en = {
     typeVESSEL_OWNERSHIP_TRANSFER: 'Vessel Ownership Transfer',
     typeCERTIFICATE_OF_COMPETENCY: 'Certificate of Competency',
     typeCERTIFICATE_OF_PROFICIENCY: 'Certificate of Proficiency',
+    typeENDORSEMENT_SEAFARER: 'Seafarer Endorsement (CoC / GOC)',
     typeENDORSEMENT_COC: 'CoC Endorsement',
     typeENDORSEMENT_GOC: 'GOC Endorsement',
     primary: 'Primary',
@@ -87,8 +88,7 @@ export const en = {
     postWaiverQueue: 'Post-Waiver Queue',
     cocQueue: 'CoC Queue',
     copQueue: 'CoP Queue',
-    endorsementCocQueue: 'CoC Endorsement Queue',
-    endorsementGocQueue: 'GOC Endorsement Queue',
+    endorsementQueue: 'Endorsement Queue',
     vesselRegistrations: 'Vessel Registration',
     vesselTransfers: 'Vessel Ownership Transfer',
     seafarerRegistry: 'Seafarer Registry',
@@ -256,8 +256,10 @@ export const en = {
       oral: 'Oral',
       essay: 'Essay',
       choice: 'Choice',
+      both: 'Both',
       offline: 'Offline',
       online: 'Online',
+      onlineChoiceOnlyHint: 'Online exams are graded automatically, which only works for multiple choice.',
       sum: 'Sum',
       average: 'Average',
       percentage: 'Percentage',
@@ -265,6 +267,11 @@ 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.',
       status: 'Status',
       statusPlaceholder: 'Exam status',
       pending: 'Pending',
@@ -301,6 +308,7 @@ export const en = {
     formType: {
       ESSAY: 'Essay',
       CHOICE: 'Choice',
+      BOTH: 'Both',
     },
     admin: {
       OFFLINE: 'Offline',
@@ -328,6 +336,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',
@@ -373,6 +385,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: {
@@ -692,6 +706,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',
@@ -785,6 +801,23 @@ 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}}',
+      optionEn: 'Option {{number}} (English)',
+      optionAm: 'Option {{number}} (Amharic)',
+      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: {
@@ -992,6 +1025,7 @@ export const en = {
       reportReview: 'Report to team leader',
       assignInspector: 'Assign inspection',
       reportInspection: 'Report inspection result',
+      assignReviewer: 'Assign reviewer',
       escalate: 'Escalate',
       hold: 'Put on hold',
       resume: 'Resume',
@@ -1003,7 +1037,10 @@ export const en = {
       requestAdjustment: 'Request adjustment',
       reject: 'Reject',
       scheduleExam: 'Schedule exam',
+      recordExamOutcome: 'Record exam outcome',
       confirmPayment: 'Confirm payment',
+      scheduleIssuance: 'Schedule pickup',
+      issueCertificate: 'Issue certificate',
       print: 'Print dossier',
       copyLink: 'Copy link',
       downloadDocuments: 'Download all documents',
@@ -1017,10 +1054,14 @@ export const en = {
       needsFlags: 'Flag at least one item to request a correction',
       needsCapital: 'Record the verified capital first',
       needsInspection: 'Requires an inspection result',
+      inspectionNotYetDue:
+        'Inspection scheduled for {{date}}. Results can be recorded after the scheduled time.',
       needsDocumentReviews:
         'Accept all documents first — {{accepted}} of {{total}} accepted. Open the Documents tab and accept the rest.',
       needsDocumentsUploaded: 'No documents uploaded to review yet',
     },
+    inspectionFailedBlocked:
+      'Approval is unavailable because the inspection failed. Schedule a re-inspection, request corrections, or reject the application.',
     reasons: {
       incompleteDocuments: 'Incomplete documents',
       belowCapital: 'Capital below the required minimum',
@@ -1046,6 +1087,8 @@ export const en = {
       hold: 'Parks application {{number}} for {{applicant}}. It stays assigned to you.',
       resume: 'Returns application {{number}} to the stage it was held from.',
       escalate: 'Raises application {{number}} to a supervisor for a decision.',
+      'assign-reviewer':
+        'Hands application {{number}} to the chosen officer and starts the review.',
       'confirm-payment': 'Confirms settlement for application {{number}}.',
       'schedule-exam': 'Assigns {{applicant}} to an exam session for application {{number}}.',
     },
@@ -1137,6 +1180,7 @@ export const en = {
       resume: 'Application resumed',
       escalate: 'Escalated',
       assign: 'Reassigned',
+      assignReviewer: 'Review assigned',
       scheduled: 'Inspection scheduled',
       inspectionPassed: 'Inspection passed',
       inspectionFailed: 'Inspection failed',

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { AppShell, Drawer } from '@mantine/core';
+import { AppShell, Box, Drawer, Group, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +27,14 @@ const BADGE_POLL_MS = 60_000;
 
 const HEADER_HEIGHT = 116;
 
+/**
+ * Horizontal inset of the header chrome. `AppHeader` adds its own `px="lg"`
+ * inside this, so the nav strip below needs the sum to line up with the
+ * controls above it — it used to start 20px to their left.
+ */
+const CHROME_PAD_X = 32;
+const NAV_STRIP_PAD_X = CHROME_PAD_X + 20;
+
 /**
  * A desk left unlocked with a license-review or medical-record screen open is
  * the actual threat model here, not a slow token. 15 minutes of no mouse,
@@ -149,7 +157,9 @@ export function BackofficeLayout() {
           the 20-plus nav items instead of tabbing through them every time. */}
       <SkipLink />
     <AppShell
-      header={{ height: isSidebar ? 74 : HEADER_HEIGHT }}
+      // The top layout drops its nav strip on small screens — the drawer is
+      // the nav there — so the header shrinks back to a single row with it.
+      header={{ height: isSidebar ? 74 : { base: 74, sm: HEADER_HEIGHT } }}
       navbar={
         isSidebar
           ? {
@@ -167,13 +177,28 @@ export function BackofficeLayout() {
       <AppShell.Header
         style={{
           background: "var(--mantine-color-body)",
-          borderBottom: "1px solid var(--mantine-color-gray-2)",
+          borderBottom: "1px solid var(--mantine-color-default-border)",
           display: "flex",
           flexDirection: "column",
         }}
       >
-        <div style={{ height: 74, flexShrink: 0, padding: "0 32px" }}>
+        <div
+          style={{ height: 74, flexShrink: 0, padding: `0 ${CHROME_PAD_X}px` }}
+        >
           <AppHeader
+            brand={
+              isSidebar ? undefined : (
+                <Group gap="xs" wrap="nowrap">
+                  <BrandMark size={28} />
+                  <Text fw={700} size="sm" lh={1.1} visibleFrom="xs">
+                    {t('app.name')}
+                  </Text>
+                </Group>
+              )
+            }
+            // Nothing to toggle on a desktop top bar; on mobile it opens the
+            // drawer below.
+            burgerHiddenFrom={isSidebar ? undefined : 'sm'}
             onToggleNav={toggleNav}
             onToggleSidebar={isSidebar ? handleToggleCollapse : toggleNav}
             navOpened={opened}
@@ -187,13 +212,14 @@ export function BackofficeLayout() {
         </div>
 
         {!isSidebar && (
-          <div
+          <Box
+            visibleFrom="sm"
             style={{
               display: 'flex',
               alignItems: 'center',
-              padding: '0 32px',
+              padding: `0 ${NAV_STRIP_PAD_X}px`,
               height: 42,
-              borderTop: '1px solid var(--mantine-color-gray-1)',
+              borderTop: '1px solid var(--mantine-color-default-border)',
               flexShrink: 0,
             }}
           >
@@ -204,7 +230,7 @@ export function BackofficeLayout() {
               activePath={location.pathname}
               onNavigate={go}
             />
-          </div>
+          </Box>
         )}
       </AppShell.Header>
 
@@ -215,7 +241,7 @@ export function BackofficeLayout() {
             overflow: "hidden",
             transition: "width 200ms ease",
             background: "var(--mantine-color-body)",
-            borderRight: "1px solid var(--mantine-color-gray-2)",
+            borderRight: "1px solid var(--mantine-color-default-border)",
           }}
         >
           <AppSidebar
@@ -243,30 +269,28 @@ export function BackofficeLayout() {
       {/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
           click) instead of AppShell's full-width mobile navbar. Mirrors the
           landing page's mobile menu. */}
-      {isSidebar && (
-        <Drawer
-          opened={opened}
-          onClose={closeNav}
-          hiddenFrom="sm"
-          size="75%"
-          padding={0}
-          withCloseButton={false}
-        >
-          <AppSidebar
-            navItems={sections}
-            collapsed={false}
-            activePath={location.pathname}
-            onToggleCollapse={handleToggleCollapse}
-            onNavigate={(item) => {
-              go(item);
-              closeNav();
-            }}
-            brandName={t('app.name')}
-            brandSubtitle={t('app.authority')}
-            brandLogo={<BrandMark size={32} />}
-          />
-        </Drawer>
-      )}
+      <Drawer
+        opened={opened}
+        onClose={closeNav}
+        hiddenFrom="sm"
+        size="75%"
+        padding={0}
+        withCloseButton={false}
+      >
+        <AppSidebar
+          navItems={sections}
+          collapsed={false}
+          activePath={location.pathname}
+          onToggleCollapse={handleToggleCollapse}
+          onNavigate={(item) => {
+            go(item);
+            closeNav();
+          }}
+          brandName={t('app.name')}
+          brandSubtitle={t('app.authority')}
+          brandLogo={<BrandMark size={32} />}
+        />
+      </Drawer>
     </AppShell>
     </>
   );

apps/backoffice/src/app/layouts/nav-config.ts

@@ -103,6 +103,12 @@ export const NAV_SECTIONS: NavSection[] = [
       { to: '/btc-queue', label: 'nav.btcQueue', icon: IconShieldCheck, permissions: [P.VIEW_SEAFARER_REGISTRY] },
       { to: '/licence-review/type/ENDORSEMENT_COC', label: 'nav.endorsementCocQueue', icon: IconRubberStamp, permissions: [P.VIEW_SEAFARER_REGISTRY] },
       { to: '/licence-review/type/ENDORSEMENT_GOC', label: 'nav.endorsementGocQueue', icon: IconRubberStamp, permissions: [P.VIEW_SEAFARER_REGISTRY] },
+      { to: '/seafarer-registrations', label: 'nav.seafarerRegistrationQueue', icon: IconId, permissions: APPLICATION_QUEUE },
+      { to: '/licence-review/type/CERTIFICATE_OF_COMPETENCY', label: 'nav.cocQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
+      { to: '/licence-review/type/CERTIFICATE_OF_PROFICIENCY', label: 'nav.copQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
+      { to: '/seaman-book-queue', label: 'nav.seamanBookQueue', icon: IconBook2, permissions: APPLICATION_QUEUE },
+      { to: '/btc-queue', label: 'nav.btcQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
+      { to: '/licence-review/type/ENDORSEMENT_SEAFARER', label: 'nav.endorsementQueue', icon: IconRubberStamp, permissions: APPLICATION_QUEUE },
       { to: '/sea-service-verification', label: 'nav.seaServiceVerification', icon: IconAnchor, permissions: [P.VERIFY_SEAFARER_RECORDS] },
       { to: '/medical-verification', label: 'nav.medicalVerification', icon: IconHeart, permissions: [P.VERIFY_SEAFARER_RECORDS] },
     ],

apps/backoffice/src/app/router/index.tsx

@@ -90,7 +90,11 @@ const router = createBrowserRouter([
           { path: 'coc-queue', element: <Navigate to="/licence-review/type/CERTIFICATE_OF_COMPETENCY" replace /> },
           { path: 'coc-queue/:id', element: <Navigate to="/licence-review" replace /> },
           // Endorsement review happens in the config-driven licence queue.
-          { path: 'endorsement-queue', element: <Navigate to="/licence-review/type/ENDORSEMENT_COC" replace /> },
+          // CoC and GOC endorsement now share one combined type; the two old
+          // type queues (ENDORSEMENT_COC / ENDORSEMENT_GOC) are left routing
+          // through the generic `:typeCode` queue below rather than redirected,
+          // so an application filed before the switch stays reachable there.
+          { path: 'endorsement-queue', element: <Navigate to="/licence-review/type/ENDORSEMENT_SEAFARER" replace /> },
           { path: 'endorsement-queue/:id', element: <Navigate to="/licence-review" replace /> },
           { path: 'medical-verification', element: guard([P.VERIFY_SEAFARER_RECORDS], <MedicalVerificationPage />) },
           { path: 'sea-service-verification', element: guard([P.VERIFY_SEAFARER_RECORDS], <SeaServiceVerificationPage />) },

apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx

@@ -24,6 +24,7 @@ import {
   TERMINAL_STATUSES,
   extractErrorMessage,
   useLocalized,
+  useBypassPaymentMutation,
   useGetCertificateUrlMutation,
   useGetMyApplicationsQuery,
   useGetMyLicensesQuery,
@@ -31,9 +32,17 @@ import {
 import { useCurrentProfile } from '@ema-platform/auth';
 import { AdvancedTable, PageLoader, notify, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
+import { useApplicationPayment } from '../../payments/hooks/useApplicationPayment';
 import { endorsementColumns } from './columns';
 
-const ENDORSEMENT_TYPE_KEYS = ['ENDORSEMENT_COC', 'ENDORSEMENT_GOC'];
+// ENDORSEMENT_SEAFARER covers CoC and GOC together and is the only type new
+// applications file against; the other two stay listed so an application or
+// licence filed before the switch keeps showing up here.
+const ENDORSEMENT_TYPE_KEYS = [
+  'ENDORSEMENT_SEAFARER',
+  'ENDORSEMENT_COC',
+  'ENDORSEMENT_GOC',
+];
 
 function EligibilityItem({ ok, label }: { ok: boolean; label: string }) {
   return (
@@ -74,6 +83,8 @@ export function EndorsementPage() {
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [getCertificateUrl] = useGetCertificateUrlMutation();
+  const { pay, isPaying } = useApplicationPayment();
+  const [bypassPayment, { isLoading: bypassing }] = useBypassPaymentMutation();
   const issuedTable = useServerTable();
 
   const registered =
@@ -90,6 +101,22 @@ export function EndorsementPage() {
   );
   const issuedPage = issuedTable.paginate(issued);
 
+  async function handleBypass(applicationId: string) {
+    try {
+      const result = await bypassPayment(applicationId).unwrap();
+      notify.success(
+        result.certificateIssued
+          ? t('endorsement.bypassIssued', 'Payment bypassed — the endorsement has been issued.')
+          : t('endorsement.bypassOk', {
+              defaultValue: 'Payment bypassed — application is now {{status}}.',
+              status: result.status.replace(/_/g, ' ').toLowerCase(),
+            }),
+      );
+    } catch (err) {
+      notify.error(extractErrorMessage(err, t('endorsement.bypassFailed', 'Bypass failed')));
+    }
+  }
+
   async function download(licenseId: string) {
     try {
       const result = await getCertificateUrl(licenseId).unwrap();
@@ -132,21 +159,13 @@ export function EndorsementPage() {
               />
             </List>
           </div>
-          <Stack gap="xs">
-            <Button
-              rightSection={<IconArrowRight size={16} />}
-              onClick={() => navigate('/licensing/ENDORSEMENT_COC/apply')}
-            >
-              {t('endorsement.endorseCoc', 'Endorse a CoC')}
-            </Button>
-            <Button
-              variant="light"
-              rightSection={<IconArrowRight size={16} />}
-              onClick={() => navigate('/licensing/ENDORSEMENT_GOC/apply')}
-            >
-              {t('endorsement.endorseGoc', 'Endorse a GOC')}
-            </Button>
-          </Stack>
+          <Button
+            disabled={!registered}
+            rightSection={<IconArrowRight size={16} />}
+            onClick={() => navigate('/licensing/ENDORSEMENT_SEAFARER/apply')}
+          >
+            {t('endorsement.apply', 'Apply for an endorsement')}
+          </Button>
         </Group>
         {!registered && (
           <Alert color="orange" mt="md" icon={<IconInfoCircle size={16} />}>
@@ -183,6 +202,36 @@ export function EndorsementPage() {
                   <Badge color={STATUS_COLORS[app.status]}>
                     {t(`applications.status.${app.status}`, STATUS_LABELS[app.status])}
                   </Badge>
+                  {app.status === 'PAYMENT_PENDING' && (
+                    <>
+                      <Button
+                        size="compact-sm"
+                        color="yellow"
+                        loading={isPaying}
+                        onClick={() => pay(app.id)}
+                      >
+                        {t('endorsement.pay', {
+                          defaultValue: 'Pay {{amount}} {{currency}}',
+                          amount: Number(app.feeAmount ?? 0).toLocaleString(),
+                          currency: app.feeCurrency,
+                        })}
+                      </Button>
+                      {/* ponytail: shown unconditionally for the testing
+                          phase — the server still refuses it unless
+                          ALLOW_PAYMENT_BYPASS is set and NODE_ENV is not
+                          production. Re-gate on useGetPaymentCapabilitiesQuery
+                          (like MyApplicationsPage) before prod. */}
+                      <Button
+                        size="compact-sm"
+                        variant="default"
+                        loading={bypassing}
+                        onClick={() => handleBypass(app.id)}
+                        title="Testing only — marks the fee paid"
+                      >
+                        {t('endorsement.bypass', 'Bypass payment')}
+                      </Button>
+                    </>
+                  )}
                   <Button
                     size="compact-sm"
                     variant="light"

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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,
+  };
+}

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;

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 };
+  };
+}

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 { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { Bilingual } from '@ema-platform/api';
@@ -20,6 +20,8 @@ const ATTENDANCE_COLOR: Record<AttendanceStatus, string> = {
   DISQUALIFIED: 'red',
 };
 
+const NOT_SITTING: AttendanceStatus[] = ['ABSENT', 'WITHDRAWN', 'DISQUALIFIED'];
+
 export function registrationColumns(
   t: TFunction,
   deps: {
@@ -28,6 +30,7 @@ export function registrationColumns(
     localized: (value: Bilingual | undefined) => string;
     showDate: (value: string | null | undefined) => string;
     onDownloadSlip: (registration: MyRegistration) => void;
+    onStartExam: (registration: MyRegistration) => void;
   },
 ): AdvancedColumn<MyRegistration>[] {
   return [
@@ -91,6 +94,44 @@ export function registrationColumns(
           </Button>
         ) : null,
     },
+    {
+      header: t('exams.columns.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">
+              {t('exams.columns.completed')}
+            </Badge>
+          );
+        }
+        if (attemptStatus === 'EXPIRED') {
+          return (
+            <Badge size="sm" variant="light" color="red">
+              {t('exams.columns.timeExpired')}
+            </Badge>
+          );
+        }
+        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)}
+          >
+            {attemptStatus === 'IN_PROGRESS'
+              ? t('exams.columns.resumeExam')
+              : t('exams.columns.takeExam')}
+          </Button>
+        );
+      },
+    },
   ];
 }
 

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,
@@ -53,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 {
@@ -80,6 +83,7 @@ export interface MyAppeal {
  */
 export function ExamsPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [appealFor, setAppealFor] = useState<MyResult | null>(null);
@@ -245,6 +249,7 @@ export function ExamsPage() {
             localized,
             showDate,
             onDownloadSlip: downloadSlip,
+            onStartExam: (registration) => navigate(`/exams/${registration.exam?.id}/take`),
           })}
           data={pagedRegistrations.rows}
           itemCount={pagedRegistrations.itemCount}

apps/portal/src/app/features/licensing/components/ConfigDrivenSection.tsx

@@ -9,9 +9,14 @@ import {
 } from '@mantine/core';
 import {
   conditionHolds,
+  useGetActiveDepartmentsQuery,
+  useGetRanksQuery,
   useLocalized,
+  type Bilingual,
+  type Department,
   type FormFieldConfig,
   type FormSectionConfig,
+  type Rank,
   type Vessel,
 } from '@ema-platform/api';
 import { AmharicDatePicker, CountrySelect, PhoneInput } from '@ema-platform/ui';
@@ -82,6 +87,41 @@ export function fillFromVessel(
   }
 }
 
+/**
+ * Options for a SELECT field.
+ *
+ * A department/rank field's seed `options` are a label cache that goes stale
+ * the moment a backoffice admin adds a department or rank — the field's
+ * value is already resolved server-side (profile department, or
+ * `eligibility.nextRank`), correct either way, but a value missing from a
+ * stale cache renders as a blank Select. Live-fetched departments/ranks take
+ * over the labels for these two `source`s; the seed's own `options` still
+ * cover every other SELECT unchanged.
+ */
+function selectOptions(
+  field: FormFieldConfig,
+  currentValue: string | undefined,
+  departments: Department[] | undefined,
+  ranks: Rank[],
+  localized: (v?: Bilingual) => string,
+): { value: string; label: string }[] {
+  if (field.source === 'profile.seafarerDepartment' && departments) {
+    return departments.map((d) => ({ value: d.code, label: localized(d.name) }));
+  }
+  if (field.source === 'eligibility.nextRank') {
+    const options = ranks.map((r) => ({ value: r.key, label: localized(r.name) }));
+    // The resolved rank might not be on THIS field's ladder (rank/rankEngine,
+    // proficiencyDeck/Engine share one `eligibility.nextRank` source but only
+    // one is ever populated) — still show it rather than a blank Select.
+    if (currentValue && !options.some((o) => o.value === currentValue)) {
+      const known = ranks.find((r) => r.key === currentValue);
+      options.push({ value: currentValue, label: known ? localized(known.name) : currentValue });
+    }
+    return options;
+  }
+  return (field.options ?? []).map((o) => ({ value: o.value, label: localized(o.label) }));
+}
+
 /**
  * Renders one form section from the license type's configuration.
  *
@@ -105,6 +145,21 @@ export function ConfigDrivenSection({
     (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),
   );
 
+  // A department/rank SELECT ships with a hardcoded `options` label list in
+  // the seed, so a department or rank added later in the backoffice has no
+  // label there and would render as a blank Select even though the field's
+  // value (resolved server-side) is correct. Skipped when the section has
+  // neither kind of field, so most sections never pay for these two queries.
+  const needsDepartmentLabels = fields.some(
+    (f) => f.source === 'profile.seafarerDepartment',
+  );
+  const needsRankLabels = fields.some((f) => f.source === 'eligibility.nextRank');
+  const { data: departments } = useGetActiveDepartmentsQuery(undefined, {
+    skip: !needsDepartmentLabels,
+  });
+  const { data: rankRes } = useGetRanksQuery(undefined, { skip: !needsRankLabels });
+  const ranks = rankRes?.items ?? [];
+
   return (
     <Grid>
       {fields.map((field) => {
@@ -183,10 +238,7 @@ export function ConfigDrivenSection({
             ) : field.type === 'SELECT' ? (
               <Select
                 {...common}
-                data={(field.options ?? []).map((o) => ({
-                  value: o.value,
-                  label: localized(o.label),
-                }))}
+                data={selectOptions(field, value as string | undefined, departments, ranks, localized)}
                 value={(value as string) ?? null}
                 onChange={(v) => onChange(field.key, v)}
                 clearable={!field.required}

apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx

@@ -322,24 +322,44 @@ export function LicenseApplicationPage() {
   const isAdjusting = application?.status === "RESUBMIT_REQUIRED";
   const openRemarks = detail?.openRemarks ?? [];
 
+  // The whole round's remarks, resolved or not — the server's section lock
+  // (`assertSectionUnlocked`) ignores `isResolved`, and this page bulk-resolves
+  // remarks right before resubmitting, so `openRemarks` would re-freeze a
+  // section the moment the applicant ticked it off.
+  const roundRemarks = useMemo(
+    () =>
+      (detail?.remarks ?? []).filter(
+        (r) => r.roundNumber === detail?.application?.adjustmentRound,
+      ),
+    [detail?.remarks, detail?.application?.adjustmentRound],
+  );
+
   const flaggedSections = useMemo(
     () =>
       Object.fromEntries(
-        openRemarks
+        roundRemarks
           .filter((r) => r.targetType === "FORM_SECTION")
           .map((r) => [r.targetKey, r.remark]),
       ),
-    [openRemarks],
+    [roundRemarks],
   );
   const flaggedDocuments = useMemo(
     () =>
       Object.fromEntries(
-        openRemarks
+        roundRemarks
           .filter((r) => r.targetType === "DOCUMENT")
           .map((r) => [r.targetKey, r.remark]),
       ),
-    [openRemarks],
+    [roundRemarks],
   );
+  const hasSectionRemarks = Object.keys(flaggedSections).length > 0;
+  const hasDocRemarks = Object.keys(flaggedDocuments).length > 0;
+
+  // A round that flagged no form sections carries no section locks — mirror of
+  // the server's fallback, without which a documents-only correction round
+  // froze every field and the applicant could not edit anything at all.
+  const isSectionLocked = (sectionKey: string) =>
+    isAdjusting && hasSectionRemarks && !flaggedSections[sectionKey];
 
   // Sections that share a group collapse onto one step, so the stepper stays
   // short instead of showing a page per section.
@@ -356,6 +376,14 @@ export function LicenseApplicationPage() {
     [steps],
   );
 
+  // A section-level showWhen can remove a step while the wizard is open
+  // (ENDORSEMENT_SEAFARER's certificate sections follow the chosen scope).
+  // Clamp so `steps[active]` can never go out of bounds if a seed ever lets
+  // a later answer hide an earlier step.
+  useEffect(() => {
+    if (active > steps.length - 1) setActive(Math.max(0, steps.length - 1));
+  }, [active, steps.length]);
+
   if (loadingConfig || !config || !appId || !application) {
     return <PageLoader label={t('licenseApplication.loading', 'Loading Application…')} height={400} />;
   }
@@ -375,6 +403,24 @@ export function LicenseApplicationPage() {
   // to the summary first.
   const showSummary = application.status !== "DRAFT" && viewingSummary;
 
+  // The applicant reads "Vessel Particulars", not "vesselParticulars" — and a
+  // staff remark is keyed by a uuid, which reads as nothing at all.
+  function remarkLabel(remark: (typeof openRemarks)[number]): string {
+    if (remark.targetType === "FORM_SECTION") {
+      const section = config?.licenseType.formSchema.sections.find(
+        (s) => s.key === remark.targetKey,
+      );
+      return section ? localized(section.title) : remark.targetKey;
+    }
+    if (remark.targetType === "DOCUMENT") {
+      const requirement = config?.documentRequirements.find(
+        (r) => r.key === remark.targetKey,
+      );
+      return requirement ? localized(requirement.name) : remark.targetKey;
+    }
+    return t("licenseApplication.staffMember", "Staff member");
+  }
+
   // Vessel Information and Current Ownership are separate form sections, so
   // ConfigDrivenSection (one instance per section) can't fill both itself —
   // it reports the pick up here and this fans it out across every section.
@@ -392,7 +438,7 @@ export function LicenseApplicationPage() {
   async function saveSection(sectionKey: string) {
     // During an adjustment round only flagged sections are editable, so don't
     // even attempt a write the server would reject.
-    if (isAdjusting && !flaggedSections[sectionKey]) return;
+    if (isSectionLocked(sectionKey)) return;
     const values = { ...(draft[sectionKey] ?? {}) };
     // The picker works in alpha-2 codes (CountrySelect); the backend, like
     // the profile Address endpoint, stores the full country name.
@@ -671,7 +717,7 @@ export function LicenseApplicationPage() {
           <Stack gap={4}>
             {openRemarks.map((remark) => (
               <Text size="sm" key={remark.id}>
-                <b>{remark.targetKey}</b>: {remark.remark}
+                <b>{remarkLabel(remark)}</b>: {remark.remark}
               </Text>
             ))}
             <Text size="xs" c="dimmed" mt={4}>
@@ -733,7 +779,7 @@ export function LicenseApplicationPage() {
           {currentStep?.kind === "sections" && (
             <Stack gap="lg">
               {currentStep.sections.map((section, index) => {
-                const locked = isAdjusting && !flaggedSections[section.key];
+                const locked = isSectionLocked(section.key);
                 return (
                   <div key={section.key}>
                     {index > 0 && <Divider mb="lg" />}
@@ -891,7 +937,7 @@ export function LicenseApplicationPage() {
               ownerType="APPLICATION"
               ownerId={appId}
               flagged={flaggedDocuments}
-              restrictToFlagged={isAdjusting}
+              restrictToFlagged={isAdjusting && hasDocRemarks}
               readOnly={readOnly}
               onUploaded={() => {
                 refetchAttachments();
@@ -914,7 +960,10 @@ export function LicenseApplicationPage() {
                     formData={draft}
                     errors={fieldErrors}
                     vessels={vessels}
-                    disabled={readOnly}
+                    // Same lock as the earlier steps — without it this step
+                    // looked editable during an adjustment round while
+                    // saveSection silently dropped the changes.
+                    disabled={readOnly || isSectionLocked(section.key)}
                     onChange={(key, value) => {
                       setDraft((prev) => ({
                         ...prev,

apps/portal/src/app/features/onboarding/components/RequireOperations.tsx

@@ -55,6 +55,10 @@ const MODE_FREE_TYPE_KEYS = [
   'VESSEL_OWNERSHIP_TRANSFER',
   'CERTIFICATE_OF_COMPETENCY',
   'CERTIFICATE_OF_PROFICIENCY',
+  'ENDORSEMENT_SEAFARER',
+  // Retired by ENDORSEMENT_SEAFARER but kept mode-free: an in-flight
+  // application filed against one of these before the switch must still be
+  // reachable to view, correct or resubmit.
   'ENDORSEMENT_COC',
   'ENDORSEMENT_GOC',
   'PRE_WAIVER',

apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx

@@ -16,10 +16,16 @@ import { OperationsFormContent } from "../../profile/components/OperationsFormCo
  * Seafarer goes to its own registration page, whose Identity Details step
  * collects the profile answers itself — no detour via `/profile`. Seafarer
  * wins when both are ticked; the other form is one nav click away.
+ *
+ * SEAFARER_REGISTRATION is listed before ENDORSEMENT_SEAFARER deliberately:
+ * `nextStepFor` takes the first key that matches, and an applicant who ticked
+ * both belongs in registration first — the endorsement application refuses
+ * submission until that registration is accepted.
  */
 const NEXT_STEP: Record<string, string> = {
   SEAFARER_REGISTRATION: "/seafarer-registration",
-  VESSEL_REGISTRATION: "/licensing/VESSEL_REGISTRATION/apply",
+  VESSEL_REGISTRATION: "/vessel-registration",
+  ENDORSEMENT_SEAFARER: "/endorsements",
 };
 
 function nextStepFor(selectedKeys: string[]): string {

apps/portal/src/app/features/profile/components/OperationsFormContent.tsx

@@ -25,15 +25,21 @@ import { notify, ModalFooter } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 
 /**
- * Registrations an applicant makes for themselves rather than for a company.
+ * Registrations and seafarer-only services an applicant declares for
+ * themselves rather than for a company.
  *
  * Named explicitly rather than inferred from `requiresOperatorMode: false`,
  * because that flag is also false for things nobody declares up front — a
  * waiver is requested per shipment, not adopted as an identity.
+ * ENDORSEMENT_SEAFARER belongs here for the same reason as the two
+ * registrations: a seafarer requesting one is not declaring a logistics mode
+ * of operation, and without this key `accountTypeFor` below would fall the
+ * account through to the company-representative type instead of `SEAFARER`.
  */
 const PERSONAL_REGISTRATION_KEYS = [
   'SEAFARER_REGISTRATION',
   'VESSEL_REGISTRATION',
+  'ENDORSEMENT_SEAFARER',
 ];
 
 /**
@@ -56,6 +62,7 @@ function accountTypeFor(keys: string[]): string | null {
   }
   if (keys.includes('VESSEL_REGISTRATION')) return 'VESSEL_OWNER';
   if (keys.includes('SEAFARER_REGISTRATION')) return 'SEAFARER';
+  if (keys.includes('ENDORSEMENT_SEAFARER')) return 'SEAFARER';
   return null;
 }
 
@@ -212,7 +219,7 @@ export function OperationsFormContent({
             {personalOptions.length > 0 && (
               <>
                 <Text size="xs" fw={600} c="dimmed" mt="sm" tt="uppercase">
-                  Registering as an individual or vessel owner
+                  Registering or applying as an individual or vessel owner
                 </Text>
                 {personalOptions.map((type) => (
                   <Checkbox

apps/portal/src/app/features/seafarer-registration/components/RegistrationDocuments.tsx

@@ -3,6 +3,7 @@ import { Alert, Badge, Button, Card, FileButton, Group, Loader, Stack, Text } fr
 import { IconAlertTriangle, IconCheck, IconFileUpload } from '@tabler/icons-react';
 import {
   SEAFARER_REGISTRATION_DOCUMENTS,
+  isEthiopianNationality,
   uploadDocument,
   type Attachment,
 } from '@ema-platform/api';
@@ -10,22 +11,25 @@ import {
 const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
 
 /** The document slots a registration asks for. */
-export function documentSlots(passportDeclared: boolean) {
+export function documentSlots(passportDeclared: boolean, nationality?: string | null) {
+  const ethiopian = isEthiopianNationality(nationality);
   return SEAFARER_REGISTRATION_DOCUMENTS.map((d) => ({
     ...d,
-    isRequired: d.required === 'passport' ? passportDeclared : d.required,
-  })).filter((d) => d.required !== 'passport' || passportDeclared);
+    isRequired: d.required === 'passport' ? passportDeclared : d.required === 'ethiopian' ? ethiopian : d.required,
+  })).filter((d) => (d.required !== 'passport' || passportDeclared) && (d.required !== 'ethiopian' || ethiopian));
 }
 
 export function RegistrationDocuments({
   registrationId,
   passportDeclared,
+  nationality,
   attachments,
   readOnly,
   onUploaded,
 }: {
   registrationId: string;
   passportDeclared: boolean;
+  nationality?: string | null;
   attachments: Attachment[];
   readOnly?: boolean;
   onUploaded: () => void;
@@ -62,7 +66,7 @@ export function RegistrationDocuments({
           {error}
         </Alert>
       )}
-      {documentSlots(passportDeclared).map((slot) => {
+      {documentSlots(passportDeclared, nationality).map((slot) => {
         const existing = attachments.find((a) => a.documentKey === slot.key);
         const uploaded = Boolean(existing?.files?.length);
         return (

apps/portal/src/app/features/seafarer-registration/components/RegistrationSummary.tsx

@@ -3,6 +3,8 @@ import {
   SEAFARER_REGISTRATION_FIELD_LABELS,
   SEAFARER_REGISTRATION_SECTIONS,
   displaySeafarerAnswer,
+  useGetActiveDepartmentsQuery,
+  useLocalized,
   type Attachment,
   type SaveSeafarerRegistration,
 } from '@ema-platform/api';
@@ -16,6 +18,10 @@ export function RegistrationSummary({
   answers: SaveSeafarerRegistration;
   attachments?: Attachment[];
 }) {
+  const localized = useLocalized();
+  const { data: departments } = useGetActiveDepartmentsQuery();
+  const departmentOptions = departments?.map((d) => ({ value: d.code, label: localized(d.name) }));
+
   return (
     <Stack gap="md">
       {SEAFARER_REGISTRATION_SECTIONS.map((section) => (
@@ -35,7 +41,9 @@ export function RegistrationSummary({
                       </Text>
                     </Table.Td>
                     <Table.Td>
-                      <Text size="sm">{displaySeafarerAnswer(field, answers[field])}</Text>
+                      <Text size="sm">
+                        {displaySeafarerAnswer(field, answers[field], departmentOptions)}
+                      </Text>
                     </Table.Td>
                   </Table.Tr>
                 ))}

apps/portal/src/app/features/seafarer-registration/components/steps.tsx

@@ -6,6 +6,9 @@ import {
   GENDER_OPTIONS,
   HAIR_COLOR_OPTIONS,
   MARITAL_STATUS_OPTIONS,
+  isEthiopianNationality,
+  useGetActiveDepartmentsQuery,
+  useLocalized,
 } from '@ema-platform/api';
 import {
   DateField,
@@ -42,6 +45,7 @@ function SectionTitle({ title, description }: { title: string; description?: str
 export function IdentityDetailsStep(
   p: StepProps & { account: { email?: string; phoneNumber?: string } },
 ) {
+  const ethiopian = isEthiopianNationality(p.form.nationality);
   return (
     <Stack gap="lg">
       <SectionTitle title="Contact Details" />
@@ -66,26 +70,55 @@ export function IdentityDetailsStep(
         <DateField {...p} name="dateOfBirth" label="Date of Birth" required />
         <SelectField {...p} name="maritalStatus" label="Marital Status" required options={MARITAL_STATUS_OPTIONS} />
         <NationalityField {...p} name="nationality" label="Nationality" required />
-        <TextField {...p} name="nationalIdNumber" label="National ID (Fayda) Number" required maxLength={64} />
+        {ethiopian ? (
+          <TextField {...p} name="nationalIdNumber" label="National ID (Fayda) Number" required maxLength={64} />
+        ) : (
+          <TextField
+            {...p}
+            name="passportNumber"
+            label="Passport Number"
+            required
+            maxLength={32}
+            description="Required for non-Ethiopian applicants in place of a National ID."
+          />
+        )}
       </Grid>
     </Stack>
   );
 }
 
-/** Step 2 — Identity, Address and Physical Characteristics. */
+/**
+ * Step 2 — Identity, Address and Physical Characteristics.
+ *
+ * The department list is backoffice-managed (see the Ranks & Departments
+ * configuration tab), so this fetches the live set rather than a fixed
+ * three — falling back to it only until the query resolves, so the field
+ * is never an empty flash.
+ */
 export function ApplicantDetailsStep(p: StepProps) {
+  const localized = useLocalized();
+  const { data: departments } = useGetActiveDepartmentsQuery();
+  const departmentOptions =
+    departments?.map((d) => ({ value: d.code, label: localized(d.name) })) ??
+    DEPARTMENT_OPTIONS;
+  // Non-Ethiopians already declare their passport number as their primary ID
+  // on the Identity step — asking again here would just duplicate the field.
+  const ethiopian = isEthiopianNationality(p.form.nationality);
+
   return (
     <Stack gap="lg">
       <SectionTitle title="Identity" />
       <Grid>
         <TextField {...p} name="placeOfBirth" label="Place of Birth" required maxLength={128} />
-        <TextField
-          {...p}
-          name="passportNumber"
-          label="Passport Number"
-          maxLength={32}
-          description="Required later for international sea service; optional at registration."
-        />
+        {ethiopian && (
+          <TextField
+            {...p}
+            name="passportNumber"
+            label="Passport Number"
+            maxLength={32}
+            description="Required later for international sea service; optional at registration."
+          />
+        )}
         {p.form.passportNumber && (
           <DateField {...p} name="passportExpiry" label="Passport Expiry Date" />
         )}
@@ -94,7 +127,7 @@ export function ApplicantDetailsStep(p: StepProps) {
           name="department"
           label="Department"
           required
-          options={DEPARTMENT_OPTIONS}
+          options={departmentOptions}
           description="The STCW department you serve in. Determines which certificates, examinations and services apply to you."
         />
       </Grid>

apps/portal/src/app/features/seafarer-registration/pages/SeafarerRegistrationPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Alert,
   Button,
@@ -8,13 +9,14 @@ import {
   Grid,
   Group,
   Loader,
+  Modal,
   Paper,
   Stack,
   Stepper,
   Text,
   Title,
 } from '@mantine/core';
-import { IconAlertTriangle, IconCheck, IconInfoCircle, IconPencil } from '@tabler/icons-react';
+import { IconAlertTriangle, IconCheck, IconInfoCircle, IconPencil, IconTrash } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 import {
   PHYSICAL_BOUNDS,
@@ -23,6 +25,8 @@ import {
   SEAFARER_REGISTRATION_STATUS_LABELS,
   extractErrorMessage,
   extractValidationIssues,
+  isEthiopianNationality,
+  useCancelSeafarerRegistrationMutation,
   useGetAttachmentsQuery,
   useGetMySeafarerRegistrationQuery,
   useSaveSeafarerRegistrationMutation,
@@ -48,15 +52,26 @@ const STEPS = [
   { label: 'Review', description: 'Check & submit' },
 ];
 
-/** Which answers each step must have before "Continue" — mirrors the API's submission check. */
+/**
+ * Which answers each step must have before "Continue" — mirrors the API's
+ * submission check. National ID vs Passport Number depends on the declared
+ * nationality, so that slot is added dynamically in `requiredForStep`.
+ */
 const REQUIRED_BY_STEP: AnswerKey[][] = [
-  ['firstName', 'lastName', 'gender', 'dateOfBirth', 'maritalStatus', 'nationality', 'nationalIdNumber'],
+  ['firstName', 'lastName', 'gender', 'dateOfBirth', 'maritalStatus', 'nationality'],
   ['placeOfBirth', 'department', 'locationId', 'hairColor', 'eyeColor', 'heightCm', 'weightKg'],
   ['medicalCertificateNumber', 'medicalIssuerName', 'medicalIssueDate'],
   [],
   ['declarationAccepted'],
 ];
 
+/** Ethiopians must give a National ID; everyone else must give a Passport Number instead. */
+function requiredForStep(index: number, nationality: string | null | undefined): AnswerKey[] {
+  const base = REQUIRED_BY_STEP[index] ?? [];
+  if (index !== 0) return base;
+  return [...base, isEthiopianNationality(nationality) ? 'nationalIdNumber' : 'passportNumber'];
+}
+
 const ANSWER_KEYS = Object.keys(SEAFARER_REGISTRATION_FIELD_LABELS) as AnswerKey[];
 
 function answersOf(registration: SeafarerRegistration): SaveSeafarerRegistration {
@@ -102,6 +117,12 @@ function withProfileDefaults(
     emergencyContactPhone: a?.emergencyContactPhone || null,
     emergencyContactRelationship: a?.emergencyContactRelation || null,
     department: profile.seafarerDepartment || null,
+    // Deepest saved level the picker's maxDepth of 3 can show.
+    locationId: a?.subCityId || a?.cityId || a?.regionId || null,
+    hairColor: (profile.hairColor as SaveSeafarerRegistration['hairColor']) || null,
+    eyeColor: (profile.eyeColor as SaveSeafarerRegistration['eyeColor']) || null,
+    bloodType: (profile.bloodType as SaveSeafarerRegistration['bloodType']) || null,
+    heightCm: profile.heightCm ?? null,
   };
   const next = { ...answers };
   for (const [key, value] of Object.entries(defaults) as [AnswerKey, unknown][]) {
@@ -119,15 +140,18 @@ function withProfileDefaults(
  * still missing. A submitted registration opens to a read-only summary.
  */
 export function SeafarerRegistrationPage() {
+  const navigate = useNavigate();
   const accountUser = useAppSelector((state) => state.auth.user);
   const { profile } = useCurrentProfile();
   const { data, isLoading } = useGetMySeafarerRegistrationQuery();
   const registration = data?.registration ?? null;
 
   const [start] = useStartSeafarerRegistrationMutation();
+  const [cancelDraft, { isLoading: cancelling }] = useCancelSeafarerRegistrationMutation();
   const [save, { isLoading: saving }] = useSaveSeafarerRegistrationMutation();
   const [submit, { isLoading: submitting }] = useSubmitSeafarerRegistrationMutation();
   const [startError, setStartError] = useState<string | null>(null);
+  const [confirmingCancel, setConfirmingCancel] = useState(false);
   const started = useRef(false);
 
   useEffect(() => {
@@ -204,7 +228,7 @@ export function SeafarerRegistrationPage() {
 
   function validateStep(index: number): boolean {
     const found: Partial<Record<AnswerKey, string>> = {};
-    for (const key of REQUIRED_BY_STEP[index] ?? []) {
+    for (const key of requiredForStep(index, form.nationality)) {
       if (blank(form[key])) found[key] = `${SEAFARER_REGISTRATION_FIELD_LABELS[key]} is required.`;
     }
     if (index === 1) {
@@ -232,7 +256,7 @@ export function SeafarerRegistrationPage() {
     }
     if (index === 3) {
       const supplied = new Set(attachments.filter((a) => a.files?.length).map((a) => a.documentKey));
-      const missing = documentSlots(Boolean(form.passportNumber))
+      const missing = documentSlots(Boolean(form.passportNumber), form.nationality)
         .filter((d) => d.isRequired && !supplied.has(d.key))
         .map((d) => d.name);
       if (missing.length) {
@@ -302,6 +326,19 @@ export function SeafarerRegistrationPage() {
     }
   }
 
+  async function handleCancel() {
+    if (!registration) return;
+    try {
+      await cancelDraft(registration.id).unwrap();
+      notifications.show({ color: 'teal', title: 'Draft discarded', message: 'Nothing was saved.' });
+      navigate('/dashboard');
+    } catch (err) {
+      notifications.show({ color: 'red', title: 'Could not discard the draft', message: extractErrorMessage(err) });
+    } finally {
+      setConfirmingCancel(false);
+    }
+  }
+
   const stepProps = { form, set, errors, disabled: readOnly };
 
   return (
@@ -319,17 +356,30 @@ export function SeafarerRegistrationPage() {
             />
           </Group>
         </div>
-        {showSummary && !readOnly && (
-          <Button size="xs" variant="default" leftSection={<IconPencil size={14} />} onClick={() => setViewingSummary(false)}>
-            Edit details
-          </Button>
-        )}
+        <Group gap="xs">
+          {registration.status === 'DRAFT' && (
+            <Button
+              size="xs"
+              variant="subtle"
+              color="red"
+              leftSection={<IconTrash size={14} />}
+              onClick={() => setConfirmingCancel(true)}
+            >
+              Cancel &amp; discard draft
+            </Button>
+          )}
+          {showSummary && !readOnly && (
+            <Button size="xs" variant="default" leftSection={<IconPencil size={14} />} onClick={() => setViewingSummary(false)}>
+              Edit details
+            </Button>
+          )}
+        </Group>
       </Group>
 
       {registration.status === 'APPROVED' && (
         <Alert color="teal" icon={<IconCheck size={16} />} title="Registered" mb="md">
           You are a registered seafarer. Your seafarer number is <b>{registration.seafarerNumber}</b>.
-          Your Seaman Book and Basic Training Certificate applications have been opened for you.
+          You can now apply for a certificate endorsement from the Endorsement Seafarer page.
         </Alert>
       )}
       {registration.status === 'REJECTED' && (
@@ -386,6 +436,7 @@ export function SeafarerRegistrationPage() {
             <RegistrationDocuments
               registrationId={registration.id}
               passportDeclared={Boolean(form.passportNumber)}
+              nationality={form.nationality}
               attachments={attachments}
               readOnly={readOnly}
               onUploaded={refetchAttachments}
@@ -426,6 +477,23 @@ export function SeafarerRegistrationPage() {
           </Group>
         </Paper>
       )}
+
+      <Modal opened={confirmingCancel} onClose={() => setConfirmingCancel(false)} title="Discard this draft?" centered>
+        <Stack>
+          <Text size="sm">
+            Everything you have entered will be deleted, including any documents already uploaded. This cannot be
+            undone. You can start a new registration at any time.
+          </Text>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setConfirmingCancel(false)} disabled={cancelling}>
+              Keep draft
+            </Button>
+            <Button color="red" loading={cancelling} onClick={handleCancel}>
+              Discard draft
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Container>
   );
 }

apps/portal/src/app/features/seafarer/pages/SeaRecords/index.tsx

@@ -164,6 +164,13 @@ function EvidenceField({
 
 // ---------------------------------------------------------------- sea service
 
+/** Today as a `yyyy-mm-dd` key — same shape the pickers emit, so plain
+ * string comparison is a valid date comparison. Taken in the authority's
+ * timezone, matching the server's check, so a seafarer logging in from a
+ * zone ahead of Addis isn't offered a day the server then rejects. */
+const todayKey = () =>
+  new Date().toLocaleDateString('en-CA', { timeZone: 'Africa/Addis_Ababa' });
+
 const EMPTY_SEA_SERVICE = {
   vesselName: '',
   imoNumber: '',
@@ -276,12 +283,43 @@ function SeaServiceTab() {
     }
   };
 
+  // Service already served — neither end of an engagement can be in the future.
+  const today = todayKey();
+  const dateError =
+    form.engagementDate > today || form.dischargeDate > today
+      ? t('seaRecords.seaService.dateFuture', {
+          defaultValue: 'Engagement and discharge dates cannot be in the future.',
+        })
+      : form.engagementDate &&
+          form.dischargeDate &&
+          form.engagementDate >= form.dischargeDate
+        ? t('seaRecords.seaService.dateOrder', {
+            defaultValue: 'Discharge date must be after the engagement date.',
+          })
+        : null;
+
+  // Shown once the field has something in it — a blank required field is left
+  // to the button being disabled, same as the rest of the form; only an
+  // actual too-short value gets called out.
+  const vesselNameError =
+    form.vesselName && form.vesselName.trim().length <= 1
+      ? t('seaRecords.seaService.fields.vesselNameTooShort', {
+          defaultValue: 'Must be at least 2 characters.',
+        })
+      : null;
+  const rankError =
+    form.rank && form.rank.trim().length <= 1
+      ? t('seaRecords.seaService.fields.rankTooShort', {
+          defaultValue: 'Must be at least 2 characters.',
+        })
+      : null;
+
   const valid =
     form.vesselName.trim().length > 1 &&
     form.rank.trim().length > 1 &&
     form.engagementDate &&
     form.dischargeDate &&
-    form.engagementDate < form.dischargeDate;
+    !dateError;
 
   // Shown under the date pickers as they are filled: the seafarer sees what
   // the engagement is worth before saving it.
@@ -369,6 +407,7 @@ function SeaServiceTab() {
               required
               value={form.vesselName}
               onChange={(e) => setForm({ ...form, vesselName: e.target.value })}
+              error={vesselNameError}
             />
             <TextInput
               label={t('seaRecords.seaService.fields.imoNumber')}
@@ -396,9 +435,13 @@ function SeaServiceTab() {
           </Group>
           <TextInput
             label={t('seaRecords.seaService.fields.rank')}
+            description={t('seaRecords.seaService.fields.rankHint', {
+              defaultValue: 'Must be at least 2 characters, e.g. "AB" or "2nd Officer".',
+            })}
             required
             value={form.rank}
             onChange={(e) => setForm({ ...form, rank: e.target.value })}
+            error={rankError}
           />
           <Group grow>
             <AmharicDatePicker
@@ -408,6 +451,7 @@ function SeaServiceTab() {
               onChange={(val) =>
                 setForm({ ...form, engagementDate: val })
               }
+              maxDate={form.dischargeDate || today}
               dateFormat="date"
             />
             <AmharicDatePicker
@@ -417,24 +461,23 @@ function SeaServiceTab() {
               onChange={(val) =>
                 setForm({ ...form, dischargeDate: val })
               }
+              minDate={form.engagementDate || undefined}
+              maxDate={today}
               dateFormat="date"
             />
           </Group>
-          {form.engagementDate && form.dischargeDate && (
+          {(dateError || (form.engagementDate && form.dischargeDate)) && (
             <Alert
               variant="light"
-              color={formDays === null ? 'red' : 'teal'}
+              color={dateError ? 'red' : 'teal'}
               icon={<IconInfoCircle size={16} />}
               py={6}
             >
-              {formDays === null
-                ? t('seaRecords.seaService.dateOrder', {
-                    defaultValue: 'Discharge date must be after the engagement date.',
-                  })
-                : t('seaRecords.seaService.daysServed', {
-                    days: formDays,
-                    defaultValue: 'Days served on this engagement: {{days}} (both days counted)',
-                  })}
+              {dateError ??
+                t('seaRecords.seaService.daysServed', {
+                  days: formDays,
+                  defaultValue: 'Days served on this engagement: {{days}} (both days counted)',
+                })}
             </Alert>
           )}
           <Textarea
@@ -581,10 +624,12 @@ function MedicalTab() {
     }
   };
 
+  const today = todayKey();
   const valid =
     form.issuerName.trim().length > 1 &&
     form.issueDate &&
     form.expiryDate &&
+    form.issueDate <= today &&
     form.issueDate < form.expiryDate;
 
   const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });
@@ -664,6 +709,7 @@ function MedicalTab() {
               required
               value={form.issueDate}
               onChange={(val) => setForm({ ...form, issueDate: val })}
+              maxDate={today}
               dateFormat="date"
             />
             <AmharicDatePicker
@@ -671,6 +717,7 @@ function MedicalTab() {
               required
               value={form.expiryDate}
               onChange={(val) => setForm({ ...form, expiryDate: val })}
+              minDate={form.issueDate || undefined}
               dateFormat="date"
             />
           </Group>

apps/portal/src/app/features/vessel-registration/inFlightColumns.tsx

@@ -12,7 +12,13 @@ import {
 /** Columns for the applicant's in-flight vessel registration applications. */
 export function inFlightColumns(
   t: TFunction,
-  deps: { onOpen: (app: LicenseApplication) => void },
+  deps: {
+    onOpen: (app: LicenseApplication) => void;
+    onPay: (app: LicenseApplication) => void;
+    onBypass: (app: LicenseApplication) => void;
+    isPaying: boolean;
+    bypassing: boolean;
+  },
 ): AdvancedColumn<LicenseApplication>[] {
   return [
     {
@@ -38,15 +44,50 @@ export function inFlightColumns(
     },
     {
       header: t('applications.table.progress'),
-      size: 140,
-      cell: ({ row }) => (
-        <Progress
-          value={STATUS_PROGRESS[row.original.status]}
-          color={STATUS_COLORS[row.original.status]}
-          size="sm"
-          radius="xl"
-        />
-      ),
+      size: 300,
+      cell: ({ row }) => {
+        const app = row.original;
+        return (
+          <Group gap="xs" wrap="nowrap">
+            <Progress
+              value={STATUS_PROGRESS[app.status]}
+              color={STATUS_COLORS[app.status]}
+              size="sm"
+              radius="xl"
+              style={{ flex: 1, minWidth: 60 }}
+            />
+            {/* The fee stops the registration dead, so the payment action sits
+                on the bar rather than being hidden behind View. */}
+            {app.status === 'PAYMENT_PENDING' && (
+              <>
+                <Button
+                  size="compact-sm"
+                  color="yellow"
+                  loading={deps.isPaying}
+                  onClick={() => deps.onPay(app)}
+                >
+                  {t('applications.actions.pay', {
+                    amount: Number(app.feeAmount ?? 0).toLocaleString(),
+                    currency: app.feeCurrency,
+                  })}
+                </Button>
+                {/* ponytail: shown unconditionally — the licensing page hides
+                    this behind the API's bypassEnabled capability flag, which
+                    is off here. Re-gate on capabilities before prod. */}
+                <Button
+                  size="compact-sm"
+                  variant="default"
+                  loading={deps.bypassing}
+                  onClick={() => deps.onBypass(app)}
+                  title="Testing only — marks the fee paid"
+                >
+                  {t('applications.actions.bypass')}
+                </Button>
+              </>
+            )}
+          </Group>
+        );
+      },
     },
     {
       header: '',

apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx

@@ -30,11 +30,15 @@ import {
 import { StatusBadge, AdvancedTable } from '@ema-platform/ui';
 import { inFlightColumns } from '../inFlightColumns';
 import {
+  extractErrorMessage,
   TERMINAL_STATUSES,
   useApiMutation,
+  useBypassPaymentMutation,
   useGetMyApplicationsQuery,
 } from '@ema-platform/api';
+import { notifications } from '@mantine/notifications';
 import { authStorage } from '@ema-platform/auth';
+import { useApplicationPayment } from '../../payments/hooks/useApplicationPayment';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -132,6 +136,8 @@ export function VesselRegistrationPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { data: applications, isFetching, refetch } = useGetMyApplicationsQuery();
+  const { pay, isPaying } = useApplicationPayment();
+  const [bypassPayment, { isLoading: bypassing }] = useBypassPaymentMutation();
   const [page, setPage] = useState(0);
   const [registration, setRegistration] = useState<VesselRegistration | null>(null);
   const [fetchTrigger] = useApiMutation<VesselRegistration>();
@@ -155,9 +161,32 @@ export function VesselRegistrationPage() {
       !TERMINAL_STATUSES.includes(app.status),
   );
 
+  async function handleBypass(applicationId: string) {
+    try {
+      const result = await bypassPayment(applicationId).unwrap();
+      notifications.show({
+        color: 'teal',
+        title: 'Payment bypassed',
+        message: `Application is now ${result.status.replace(/_/g, ' ').toLowerCase()}.`,
+      });
+      refetch();
+    } catch (err) {
+      notifications.show({
+        color: 'red',
+        title: 'Bypass failed',
+        message: extractErrorMessage(err),
+      });
+    }
+  }
+
   const columns = inFlightColumns(t, {
     onOpen: (app) =>
       navigate(`/licensing/${REGISTRATION_TYPE_KEY}/applications/${app.id}`),
+    // Paying leaves the SPA for Telebirr — a provider hand-off, not a route change.
+    onPay: (app) => pay(app.id),
+    onBypass: (app) => handleBypass(app.id),
+    isPaying,
+    bypassing,
   });
 
   const certs = registration?.category === 'Sea-going Vessel (International)'

apps/portal/src/app/i18n/locales/am.ts

@@ -63,7 +63,7 @@ export const am: Translations = {
     certificates: 'የምስክር ወረቀቶች',
     seamanBook: 'የመርከበኛ መጽሐፍ እና BTC',
     btc: 'መሠረታዊ ሥልጠና ምስክር ወረቀት',
-    endorsements: 'ማረጋገጫዎች',
+    endorsements: 'የባህረኛ ማስተያየት',
     vesselRegistrations: 'የመርከብ ምዝገባ',
     vesselTransfers: 'የመርከብ ባለቤትነት ዝውውር',
     documents: 'ሰነዶቼ',
@@ -242,6 +242,7 @@ export const am: Translations = {
       RESUBMIT_REQUIRED: 'እንደገና ማስገባት ያስፈልጋል',
       INSPECTION_PENDING: 'ቁጥጥር በመጠባበቅ ላይ',
       INSPECTION_COMPLETED: 'ቁጥጥር ተጠናቋል',
+      INSPECTION_FAILED: 'ቁጥጥር አልተሳካም',
       APPROVED: 'ጸድቋል',
       REJECTED: 'ውድቅ ተደርጓል',
       ON_HOLD: 'ላይ ቆሟል',
@@ -973,6 +974,11 @@ export const am: Translations = {
       appeal: 'ይግባኝ',
       retake: 'ድጋሚ · {{n}}',
       firstSitting: 'የመጀመሪያ ሙከራ',
+      exam: 'ፈተና',
+      completed: 'ተጠናቋል',
+      timeExpired: 'ጊዜው አልቋል',
+      resumeExam: 'ፈተና ይቀጥሉ',
+      takeExam: 'ፈተና ይውሰዱ',
       attendanceStatus: {
         REGISTERED: 'አልተጠራም',
         PRESENT: 'ተገኝቷል',
@@ -1003,8 +1009,7 @@ export const am: Translations = {
       registered: "የተመዘገበ መርከበኛ ({{number}})",
       registrationRequired: "ንቁ የመርከበኛ ምዝገባ ያስፈልጋል",
     },
-    endorseCoc: "CoC ያረጋግጡ",
-    endorseGoc: "GOC ያረጋግጡ",
+    apply: "ለማስተያየት ያመልክቱ",
     registrationNotice: {
       prefix: "መጀመሪያ የ",
       link: "መርከበኛ ምዝገባዎን",

apps/portal/src/app/i18n/locales/en.ts

@@ -63,7 +63,7 @@ export const en = {
     certificates: 'Certificates',
     seamanBook: 'SeamanBook and BTC',
     btc: 'Basic Training Certificate',
-    endorsements: 'Endorsements',
+    endorsements: 'Endorsement Seafarer',
     vesselRegistrations: 'Vessel Registration',
     vesselTransfers: 'Vessel Transfers',
     documents: 'My Documents',
@@ -242,6 +242,7 @@ export const en = {
       RESUBMIT_REQUIRED: 'Resubmit Required',
       INSPECTION_PENDING: 'Inspection Pending',
       INSPECTION_COMPLETED: 'Inspection Completed',
+      INSPECTION_FAILED: 'Inspection Failed',
       APPROVED: 'Approved',
       REJECTED: 'Rejected',
       ON_HOLD: 'On Hold',
@@ -975,6 +976,11 @@ export const en = {
       appeal: 'Appeal',
       retake: 'Retake · {{n}}',
       firstSitting: 'First sitting',
+      exam: 'Exam',
+      completed: 'Completed',
+      timeExpired: 'Time expired',
+      resumeExam: 'Resume exam',
+      takeExam: 'Take exam',
       attendanceStatus: {
         REGISTERED: 'Not called',
         PRESENT: 'Present',
@@ -1005,8 +1011,7 @@ export const en = {
       registered: 'Registered seafarer ({{number}})',
       registrationRequired: 'Active seafarer registration required',
     },
-    endorseCoc: 'Endorse a CoC',
-    endorseGoc: 'Endorse a GOC',
+    apply: 'Apply for an endorsement',
     registrationNotice: {
       prefix: 'Complete your',
       link: 'seafarer registration',

apps/portal/src/app/layouts/PortalLayout.tsx

@@ -140,7 +140,7 @@ const NAV_SECTIONS: { label?: string; items: PortalNavItem[] }[] = [
       },
       {
         to: "/endorsements",
-        label: "Endorsements",
+        label: "Endorsement Seafarer",
         i18nKey: "nav.endorsements",
         icon: IconRubberStamp,
         permissions: [P.VIEW_OWN_CERTIFICATES],

apps/portal/src/app/router.tsx

@@ -30,6 +30,7 @@ import { SupportPage } from "./features/support/pages/SupportPage";
 import { MedicalRecordsPage, SeaServicePage } from "./features/seafarer/pages/SeaRecords";
 import { SeafarerRegistrationPage } from "./features/seafarer-registration/pages/SeafarerRegistrationPage";
 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";
@@ -213,6 +214,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.
       {

ema-exam-gap-analysis.md

@@ -0,0 +1,468 @@
+# EMA Exam System — Combined Gap Analysis
+
+**Repos:** `/home/tria/projects/mihretu/emaui` (frontend, branch `dev`) · `/home/tria/projects/mihretu/emaapi` (backend, branch `dev`). Read-only — no files modified, nothing implemented, nothing committed, no branch created.
+
+**The user story, as directed:** this task's own exam-lifecycle checklist (§5 of the brief — Exam Administration, Question Management, Candidate Management, Candidate Exam-Taking, Evaluation, Post-Exam) is treated as the requirements source, flattened below into 54 individually numbered, non-combined requirements. Every status below is traced to actual file:line evidence gathered from a full read of the relevant frontend and backend source — not inferred from documentation, comments, or the presence of an endpoint alone.
+
+---
+
+## 1. The User Story — Numbered Requirements
+
+### Exam Administration
+1. Create exam
+2. Configure exam (type/form/administration/evaluation/pass-mark/selection method as one settings unit)
+3. Define exam type
+4. Define subjects
+5. Define sections
+6. Configure duration
+7. Configure passing score
+8. Configure attempts
+9. Configure exam status
+10. Configure availability
+
+### Question Management
+11. Create question
+12. Edit question
+13. Delete question
+14. Question bank
+15. Question types
+16. MCQ options
+17. Correct answers
+18. Question scoring
+19. Question ordering
+20. Random questions
+21. Paper assembly
+
+### Candidate Management
+22. Candidate registration
+23. Candidate eligibility
+24. Candidate assignment
+25. Attendance
+26. Candidate status
+
+### Candidate Exam-Taking
+27. Exam instructions
+28. Start exam
+29. Create attempt/session
+30. Timer
+31. Question navigation
+32. Display questions
+33. Select answers
+34. Save answers
+35. Auto-save
+36. Resume attempt
+37. Submit exam
+38. Prevent submission after expiration
+39. Prevent unauthorized access
+
+### Evaluation
+40. Automatic grading
+41. Manual grading
+42. Score calculation
+43. Pass/fail
+44. Result generation
+45. Result review
+46. Result approval
+47. Result publication
+
+### Post-Exam
+48. Result viewing
+49. Appeals
+50. Appeal review
+51. Retakes
+52. Exam history
+53. Notifications
+54. Certificates, if required
+
+---
+
+## 2. Frontend Comparison
+
+| # | Requirement | Status | Evidence |
+|---|---|---|---|
+| 1 | Create exam | ✅ | `apps/backoffice/.../exam/pages/ExamPage.tsx` — full create form → `useCreateExamMutation` |
+| 2 | Configure exam | ✅ | Same form, Settings tab: type/form/administration/evaluation/selection method/cutting point/status |
+| 3 | Define exam type | ✅ | `ExamPage.tsx` — WRITTEN/ORAL `Select`, required |
+| 4 | Define subjects | ✅ | `ExamPage.tsx` — certification `Select`; full CRUD at `certification/pages/CertificationPage.tsx` |
+| 5 | Define sections | 🔴 | No component, field, or route anywhere in the exam feature tree |
+| 6 | Configure duration | ✅ | `ExamPage.tsx` — days/hours/minutes inputs, captured on create/edit |
+| 7 | Configure passing score | ✅ | `ExamPage.tsx` — cutting-point `NumberInput`, required |
+| 8 | Configure attempts | 🟡 | No admin-facing control anywhere — attempt/retake is read-only display in the portal (`ExamsPage.tsx` badge), never a setting an officer configures |
+| 9 | Configure exam status | ✅ | `ExamPage.tsx` — status `Select`, shown only when editing |
+| 10 | Configure availability | 🟡 | No explicit "availability" control found; portal's `GET /exams/open` list is consumed as-is with no frontend criteria of its own |
+| 11 | Create question | ✅ | `question/pages/QuestionPage.tsx` form → `useCreateQuestionMutation` |
+| 12 | Edit question | ✅ | Same form → `useUpdateQuestionMutation` |
+| 13 | Delete question | ✅ | Delete button + confirm modal → `useDeleteQuestionMutation` |
+| 14 | Question bank | ✅ | `QuestionPage.tsx` list, filterable by certification |
+| 15 | Question types | 🟡 | Only two labels selectable: ESSAY / CHOICE (`QuestionForm` type in `question/types/question.ts`) |
+| 16 | MCQ options | 🔴 | No `options`/`choices` field anywhere in `question.ts`, the create/edit form, or any component |
+| 17 | Correct answers | 🔴 | No `correctAnswer`/answer-key field or control anywhere |
+| 18 | Question scoring | ✅ | `points` field on the question form; bounded score entry in `RecordResultModal.tsx` |
+| 19 | Question ordering | ⚠️ | No ordering UI found; not confirmed whether the assignment list has any inherent order |
+| 20 | Random questions | ✅ | `exam/components/QuestionAssigner.tsx` (random mode) → `useSelectRandomQuestionsMutation` |
+| 21 | Paper assembly | ✅ | `QuestionAssigner.tsx` (manual mode) → `useAssignQuestionsMutation` |
+| 22 | Candidate registration | ✅ | Portal `exams/pages/ExamsPage.tsx` → register button → mutation to `/exams/:id/register` |
+| 23 | Candidate eligibility | ✅ | Same page — maps `seafarer_registration_required`/`subject_already_passed` server errors to readable copy before/after attempting registration |
+| 24 | Candidate assignment | 🔴 | `exam/components/ExamCandidatesPanel.tsx` can only view + mark attendance; no add/remove-candidate control anywhere in the backoffice |
+| 25 | Attendance | ✅ | `ExamCandidatesPanel.tsx` — per-candidate + bulk marking, required remark on Withdrawn/Disqualified |
+| 26 | Candidate status | ✅ | Same panel — attendance-status badges (Registered/Present/Absent/Late/Withdrawn/Disqualified) |
+| 27 | Exam instructions | 🟡 | Bilingual `direction` field captured on the exam form; no screen anywhere displays it to a candidate |
+| 28 | Start exam | 🔴 | No route, component, button, or handler anywhere in `apps/portal` |
+| 29 | Create attempt/session | 🔴 | No concept anywhere — no attempt/session state, type, or API call |
+| 30 | Timer | 🔴 | No countdown/timer component anywhere in either app |
+| 31 | Question navigation | 🔴 | No question-by-question view exists to navigate |
+| 32 | Display questions | 🔴 | No candidate-facing question-rendering component anywhere |
+| 33 | Select answers | 🔴 | No answer-selection UI/state anywhere |
+| 34 | Save answers | 🔴 | No save action or API call anywhere |
+| 35 | Auto-save | 🔴 | No auto-save timer/effect anywhere in the exam feature (the licensing wizard's per-section `PATCH` auto-save pattern exists but is not used by, or wired to, anything exam-related) |
+| 36 | Resume attempt | 🔴 | No resume logic anywhere (nothing to resume) |
+| 37 | Submit exam | 🔴 | No submit action anywhere distinct from application/appeal "submit" flows |
+| 38 | Prevent submission after expiration | 🔴 | No expiration check anywhere (no timer to expire) |
+| 39 | Prevent unauthorized access | 🔵 | Not applicable — no attempt exists for an access check to protect |
+| 40 | Automatic grading | 🔴 | No grading logic in the frontend at all (grading is entirely a backend concern either way) |
+| 41 | Manual grading | ✅ | `result/components/RecordResultModal.tsx` — bounded per-question score entry, live pass/fail preview |
+| 42 | Score calculation | ✅ | Same component — client preview mirrors the exam's evaluation method (SUM/AVERAGE/PERCENTAGE) |
+| 43 | Pass/fail | ✅ | Same — preview only; frontend never sends a `status`/outcome field, matching backend design |
+| 44 | Result generation | ✅ | `RecordResultModal.tsx` → `useCreateResultMutation` |
+| 45 | Result review | ✅ | `result/pages/ResultPage.tsx` — moderate/return actions with required remarks |
+| 46 | Result approval | ✅ | Same page — approve action |
+| 47 | Result publication | ✅ | Same page — publish-per-exam action, reports published/skipped counts |
+| 48 | Result viewing | ✅ | Portal `ExamsPage.tsx` — "My results" table |
+| 49 | Appeals | ✅ | Portal `ExamsPage.tsx` — appeal modal with required reason, 14-day-window copy |
+| 50 | Appeal review | ✅ | Backoffice `result/pages/ExamAppealsPage.tsx` — uphold/reject with required remark |
+| 51 | Retakes | 🟡 | Display-only: portal shows `kind`/`attemptNumber` badges; no dedicated retake workflow beyond ordinary registration |
+| 52 | Exam history | 🟡 | No dedicated history view; the registrations table and results table (both already counted above) are the closest equivalent |
+| 53 | Notifications | ⚠️ | Portal `notifications/pages/NotificationsPage.tsx` is generic (`GET /notifications`); not confirmed whether/how exam-specific notices render distinctly |
+| 54 | Certificates, if required | 🔴 | `certificate-designer/pages/CertificateDesignerPage.tsx` exists but targets license/permit templates (`licensing-api.ts`'s `license-templates` endpoints) — confirmed via its own data hooks — not exam results |
+
+---
+
+## 3. Backend Comparison
+
+*(Global note, applies to every "NO GUARD" row below: `JwtGuard` is registered as a global `APP_GUARD` — every route requires a valid authenticated session regardless. "NO GUARD" means no `PermissionGuard` role/permission check on top of that base authentication — i.e., reachable by any signed-in account, not by the public.)*
+
+| # | Requirement | Status | Evidence |
+|---|---|---|---|
+| 1 | Create exam | 🟡 | `POST /exams` exists (`exam.controller.ts`, inherited `CommonCrudController`) — **no `PermissionGuard`** |
+| 2 | Configure exam | 🟡 | `PUT /exams/:id` — same route, same gap; all settings fields are real columns on `exams` (`exam.entity.ts`) |
+| 3 | Define exam type | ✅ | `EExamType` enum (`common/enums/enums.ts`), `Exam.type` column |
+| 4 | Define subjects | 🟡 | `certificationId` FK is solid; but `certification.controller.ts` (bare `CommonCrudController`) has **no guard at all** on its full CRUD, including the write that would toggle `isActive` |
+| 5 | Define sections | 🔴 | No table, column, or entity anywhere in the exam schema (confirmed against base migration `1785742151690-EmaBaseline.ts` + both later exam migrations) |
+| 6 | Configure duration | 🟡 | `Exam.givenTime`/`Question.time` (jsonb) store it, but nothing in `exam.service.ts`/`result.service.ts` ever reads it against a clock |
+| 7 | Configure passing score | ✅ | `Exam.cuttingPoint` (numeric), consumed by `result.service.ts::outcomeFor()` |
+| 8 | Configure attempts | ✅ (as built) | `ExamRegistrationService.resolveAttempt()` fully, automatically derives attempt number/kind server-side — no client input accepted, no admin-configurable cap exists (a candidate may retake indefinitely unless their most recent published result is PASSED) |
+| 9 | Configure exam status | ✅ | `EExamStatus` enum (PENDING/ACTIVE/COMPLETED/CANCELLED/POSTPONED/PUBLISHED), `Exam.status` column |
+| 10 | Configure availability | ⚠️ | `GET /exams/open` route exists (`exam.controller.ts`); exact server-side "open" criteria not independently traced in this pass |
+| 11 | Create question | 🟡 | `POST /questions` (inherited `CommonCrudController`) — **no `PermissionGuard`** |
+| 12 | Edit question | 🟡 | `PUT /questions/:id` — same gap |
+| 13 | Delete question | 🟡 | `DELETE /questions/:id` — same gap |
+| 14 | Question bank | 🟡 | `GET /questions` — same gap; returns rows of every `EQuestionStatus` (DRAFT/PENDING_APPROVAL/APPROVED/REJECTED/RETIRED) to any authenticated caller, no status filter applied server-side for unprivileged callers |
+| 15 | Question types | 🟡 | `EExamForm` enum: `ESSAY \| CHOICE` only — a category label, nothing deeper |
+| 16 | MCQ options | 🔴 | `question.entity.ts` (confirmed full column list) and `question.dto.ts` (both create/update payloads) carry no options/choices field of any kind |
+| 17 | Correct answers | 🔴 | No `correctAnswer`/`answerKey` column anywhere on `Question` or any related table |
+| 18 | Question scoring | ✅ | `Question.points` (numeric); `Result.resultBreakdowns[].score` summed in `result.service.ts::grade()` |
+| 19 | Question ordering | ⚠️ | `exams_questions` is a plain composite-PK join table (`exam_id`, `question_id`) — no order/sequence column found |
+| 20 | Random questions | 🟡 | `POST /exams/:id/questions/random` — real server-side draw, correctly APPROVED-only filtered, but **no guard** |
+| 21 | Paper assembly | 🟡 | `POST /exams/:id/questions` — same gap |
+| 22 | Candidate registration | ✅ | `POST /exams/:id/register` — ownership-scoped to the caller, real |
+| 23 | Candidate eligibility | ✅ | Same service — ACTIVE-seafarer requirement + `subject_already_passed` hard block enforced server-side |
+| 24 | Candidate assignment | 🔴 | No `createRegistration`/admin-add endpoint exists anywhere in `exam-registration.service.ts` — registration is exclusively self-service |
+| 25 | Attendance | ✅ | `POST /exams/registrations/:id/attendance` + bulk variant, both guarded `RECORD_EXAM_ATTENDANCE` |
+| 26 | Candidate status | ✅ | `EExamAttendanceStatus` enum, matches frontend exactly |
+| 27 | Exam instructions | ✅ (storage only) | `Exam.direction` (jsonb) stored and returned; nothing to display it to a candidate exists downstream |
+| 28 | Start exam | 🔴 | No route, service method, or entity anywhere |
+| 29 | Create attempt/session | 🔴 | Confirmed absent by direct search of every migration and entity — no attempt/session table exists. `common/entities/session.entity.ts` is the **login** session, unrelated |
+| 30 | Timer | 🔴 | No timer/expiry logic anywhere in the exam domain |
+| 31 | Question navigation | 🔵 | Not applicable server-side (a client concern) — but nothing to serve questions incrementally exists either |
+| 32 | Display questions | 🔴 | No candidate-facing "get my exam questions" endpoint exists |
+| 33 | Select answers | 🔴 | No answer-capture DTO/entity anywhere |
+| 34 | Save answers | 🔴 | No persistence path anywhere |
+| 35 | Auto-save | 🔴 | No such endpoint in the exam domain |
+| 36 | Resume attempt | 🔴 | No in-progress state exists to resume |
+| 37 | Submit exam | 🔴 | No submission event/timestamp on any exam-taking entity (distinct from the unrelated license-application "submit") |
+| 38 | Prevent submission after expiration | 🔴 | No expiration check anywhere |
+| 39 | Prevent unauthorized access | 🔵 | Not applicable — no attempt entity exists to protect |
+| 40 | Automatic grading | 🔴 | `result.service.ts::grade()` sums officer-entered `resultBreakdowns` only; never compares to a stored answer, because none is stored |
+| 41 | Manual grading | 🟡 | `POST /results` (create) and `PUT /results/:id` (update) — **no `PermissionGuard`**, despite `RECORD_EXAM_RESULT` existing and being applied to *other* routes in the same controller |
+| 42 | Score calculation | ✅ | `grade()` — sum/average/percentage per `Exam.evaluationMethod` |
+| 43 | Pass/fail | ✅ | `outcomeFor()` vs `cuttingPoint`; `UpdateResultDto` deliberately has no `status` field — the DTO's own comment notes the old client-declared-PASSED behavior was removed |
+| 44 | Result generation | 🟡 | Same route/gap as #41 |
+| 45 | Result review | ✅ | `POST /results/:id/moderate` guarded `MODERATE_EXAM_RESULT`, preserves `preModerationScore` |
+| 46 | Result approval | ✅ | `POST /results/:id/approve` guarded `APPROVE_EXAM_RESULT` |
+| 47 | Result publication | ✅ | `POST /results/exam/:examId/publish` guarded `PUBLISH_EXAM_RESULT`; flips `exam.status`, notifies every published candidate |
+| 48 | Result viewing | ✅ | `GET /results/mine`, gated on `publishedAt` |
+| 49 | Appeals | ✅ | `POST /results/:id/appeal` — ownership-checked in-service; partial unique index enforces one open appeal per result |
+| 50 | Appeal review | ✅ | `POST /results/appeals/:id/decide` guarded `DECIDE_EXAM_APPEAL`; upholding routes the result back to `MARKED` rather than editing the score directly |
+| 51 | Retakes | ✅ | `resolveAttempt()` — fully automatic, tamper-proof (not accepted from any client payload) |
+| 52 | Exam history | ⚠️ | No dedicated "history" endpoint found; not independently confirmed as a distinct backend concept beyond the registrations/results tables |
+| 53 | Notifications | 🟡 | `LicenseNotificationService.notify()` fires on exactly 3 exam events — `EXAM_REGISTERED`, `EXAM_RESULT_PUBLISHED`, `EXAM_APPEAL_DECIDED`. Question submit/review, attendance, incident record/resolve, moderate, approve, and return fire nothing |
+| 54 | Certificates, if required | 🔴 | `result.service.ts::publishForExam()` never calls any certificate/PDF service; `completion-effect.service.ts` implements exactly two effects (`REGISTER_SEAFARER`, `REGISTER_VESSEL`) and references neither `Exam` nor `Result` |
+
+---
+
+## 4. Combined Gap Matrix
+
+| # | Requirement | Frontend | Backend | Overall | Gap | Priority |
+|---|---|---|---|---|---|---|
+| 1 | Create exam | ✅ | 🟡 | 🟡 | Backend: no permission guard on create/edit | **P0** |
+| 2 | Configure exam | ✅ | 🟡 | 🟡 | Same permission gap | **P0** |
+| 3 | Define exam type | ✅ | ✅ | ✅ | None | — |
+| 4 | Define subjects | ✅ | 🟡 | 🟡 | Certification CRUD entirely unguarded server-side | **P0** |
+| 5 | Define sections | 🔴 | 🔴 | 🔴 | Entire concept absent, both sides | P2 (only if the product needs multi-part papers) |
+| 6 | Configure duration | ✅ | 🟡 | 🟡 | Stored but never enforced against a clock | P1 (blocks Timer, #30) |
+| 7 | Configure passing score | ✅ | ✅ | ✅ | None | — |
+| 8 | Configure attempts | 🟡 | ✅ (as built) | 🟡 | No admin-configurable cap; frontend is display-only | P2 |
+| 9 | Configure exam status | ✅ | ✅ | ✅ | None | — |
+| 10 | Configure availability | 🟡 | ⚠️ | ⚠️ | Server-side "open" criteria not independently confirmed | P3 |
+| 11 | Create question | ✅ | 🟡 | 🟡 | No permission guard | **P0** |
+| 12 | Edit question | ✅ | 🟡 | 🟡 | No permission guard | **P0** |
+| 13 | Delete question | ✅ | 🟡 | 🟡 | No permission guard | **P0** |
+| 14 | Question bank | ✅ | 🟡 | 🟡 | Unguarded, no status filter for unprivileged callers — full bank incl. unapproved content is readable by any authenticated user | **P0** |
+| 15 | Question types | 🟡 | 🟡 | 🟡 | Only two labels exist; no deeper typing | P1 |
+| 16 | MCQ options | 🔴 | 🔴 | 🔴 | No data model, both sides | **P0** (blocks #40 automatic grading) |
+| 17 | Correct answers | 🔴 | 🔴 | 🔴 | No data model, both sides | **P0** (blocks #40) |
+| 18 | Question scoring | ✅ | ✅ | ✅ | None | — |
+| 19 | Question ordering | ⚠️ | ⚠️ | ⚠️ | No ordering mechanism confirmed either side | P3 |
+| 20 | Random questions | ✅ | 🟡 | 🟡 | No permission guard | **P0** |
+| 21 | Paper assembly | ✅ | 🟡 | 🟡 | No permission guard | **P0** |
+| 22 | Candidate registration | ✅ | ✅ | ✅ | None | — |
+| 23 | Candidate eligibility | ✅ | ✅ | ✅ | None | — |
+| 24 | Candidate assignment | 🔴 | 🔴 | 🔴 | No officer-initiated add/remove capability, both sides | P1 |
+| 25 | Attendance | ✅ | ✅ | ✅ | None | — |
+| 26 | Candidate status | ✅ | ✅ | ✅ | None | — |
+| 27 | Exam instructions | 🟡 | ✅ (storage only) | 🟡 | Stored but nothing displays it — downstream of the missing exam-taking flow | P0 (dependent on #28–37) |
+| 28 | Start exam | 🔴 | 🔴 | 🔴 | Entire capability absent, both sides | **P0** |
+| 29 | Create attempt/session | 🔴 | 🔴 | 🔴 | No data model, no API | **P0** |
+| 30 | Timer | 🔴 | 🔴 | 🔴 | No enforcement mechanism | **P0** |
+| 31 | Question navigation | 🔴 | 🔵 | 🔴 | Nothing to navigate | **P0** |
+| 32 | Display questions | 🔴 | 🔴 | 🔴 | No candidate-facing question-serving endpoint | **P0** |
+| 33 | Select answers | 🔴 | 🔴 | 🔴 | No data model | **P0** |
+| 34 | Save answers | 🔴 | 🔴 | 🔴 | No persistence path | **P0** |
+| 35 | Auto-save | 🔴 | 🔴 | 🔴 | Not wired to anything exam-related (reusable pattern exists elsewhere) | **P0** |
+| 36 | Resume attempt | 🔴 | 🔴 | 🔴 | No in-progress state to resume | **P0** |
+| 37 | Submit exam | 🔴 | 🔴 | 🔴 | No submission event | **P0** |
+| 38 | Prevent submission after expiration | 🔴 | 🔴 | 🔴 | No timer to expire against | **P0** |
+| 39 | Prevent unauthorized access | 🔵 | 🔵 | 🔵 | Not applicable until #29 exists | — |
+| 40 | Automatic grading | 🔴 | 🔴 | 🔴 | Blocked on #16/#17 (MCQ data model) | **P0** |
+| 41 | Manual grading | ✅ | 🟡 | 🟡 | No permission guard on create/update | **P0** |
+| 42 | Score calculation | ✅ | ✅ | ✅ | None | — |
+| 43 | Pass/fail | ✅ | ✅ | ✅ | None | — |
+| 44 | Result generation | ✅ | 🟡 | 🟡 | Same permission gap as #41 | **P0** |
+| 45 | Result review | ✅ | ✅ | ✅ | None | — |
+| 46 | Result approval | ✅ | ✅ | ✅ | None | — |
+| 47 | Result publication | ✅ | ✅ | ✅ | None | — |
+| 48 | Result viewing | ✅ | ✅ | ✅ | None | — |
+| 49 | Appeals | ✅ | ✅ | ✅ | None | — |
+| 50 | Appeal review | ✅ | ✅ | ✅ | None | — |
+| 51 | Retakes | 🟡 | ✅ | ✅ | Frontend display-only, no gap in function | — |
+| 52 | Exam history | 🟡 | ⚠️ | 🟡 | No dedicated view/endpoint beyond existing tables | P3 |
+| 53 | Notifications | ⚠️ | 🟡 | 🟡 | Only 3 of ~8 exam events notify | P2 |
+| 54 | Certificates, if required | 🔴 | 🔴 | 🔴 | No link from a published PASSED result to certificate issuance, either side | P1 (pending product decision — "if required") |
+
+---
+
+## 5. Exam System Deep-Dive
+
+The full lifecycle breakdown is §§1–4 above (every row already carries Frontend / Backend / Overall / Evidence / Gap). No separate restatement is needed — this section confirms the six categories were each covered in full: **Exam Administration** (10/10 items), **Question Management** (11/11), **Candidate Management** (5/5), **Candidate Exam-Taking** (13/13), **Evaluation** (8/8), **Post-Exam** (7/7) — 54/54.
+
+---
+
+## 6. Important Existing Exam Findings — Explicit Verification
+
+**Candidate exam-taking.** Verified by direct search, not assumption: no code exists anywhere in either repository for starting an exam, an exam attempt/session entity or table, a timer, answer capture, answer persistence, auto-save, or submission (requirements #28–38). `Exam.givenTime`/`Question.time` are stored durations that are never read against a clock. **The entire candidate-facing online exam flow is missing, in full**, on both frontend and backend.
+
+**MCQ structure.** Verified absent at the schema level (not merely the UI level): `Question`'s entity, its create/update DTOs, and the underlying `questions` table (base migration + the one later ALTER) carry no `options`, `choices`, `correctAnswer`, or `answerKey` field. `EExamForm.CHOICE` is a category label only. **Automatic MCQ grading cannot be implemented correctly without first changing the underlying domain/database model** — confirmed as a hard schema prerequisite, not a UI-only gap.
+
+**Automatic grading.** Verified the backend has no automatic grading logic. `result.service.ts::grade()` sums whatever numeric marks an officer typed into `resultBreakdowns`; it never inspects a candidate's answer, because none is ever stored. Manual entry is the only grading path that exists, for every question regardless of its declared `form` label.
+
+**Manual grading.** Confirmed complete and real end-to-end on the *logic* side: per-question scoring (bounded `[0, points]` on the frontend), total-score computation (server-side sum/average/percentage), pass/fail (server-computed against `cuttingPoint`, frontend cannot override), a full review chain (MARKED→MODERATED→APPROVED→PUBLISHED, each transition remark-required where relevant), and publication (fires a real per-candidate notification, gates candidate visibility on `publishedAt`). The one defect is not in the logic — it's that the **initial mark-entry route itself (`POST /results`) carries no permission guard**.
+
+**Exam permissions.** Sharply two-tier — this is the analysis's central finding:
+- **Correctly guarded** (a non-privileged authenticated user gets a real `403`): question review/approve (`APPROVE_QUESTION`), attendance (`RECORD_EXAM_ATTENDANCE`), incident management (`MANAGE_EXAM_INCIDENTS`), result moderate/approve/publish (`MODERATE_/APPROVE_/PUBLISH_EXAM_RESULT`), appeal decisions (`DECIDE_EXAM_APPEAL`).
+- **Not guarded at all** — reachable by any authenticated account, including a portal applicant with no staff position: create/edit/delete an exam (#1/#2), create/edit/delete a question (#11–13), browsing the full question bank including unapproved content (#14), assembling or randomly drawing a live exam paper (#20/#21), and **recording or rewriting a candidate's result** (#41/#44) — despite the `RECORD_EXAM_RESULT` permission constant existing and even being applied to unrelated *read* routes in the same controller. Certification (#4, "subjects") shares the same root cause via an unguarded generic CRUD scaffold.
+
+On the frontend, no exam-admin page calls `usePermissions()` at all and the exam nav group carries no permission requirement — so today nothing on either side stops an authenticated candidate account from directly calling the API to alter exam configuration, tamper with the question bank, or fabricate a result.
+
+---
+
+## 7. Frontend ↔ Backend Contract Gaps
+
+| Requirement | Frontend State | Backend State | Contract Gap |
+|---|---|---|---|
+| Start exam / attempt / timer / answers / auto-save / submit (#28–38) | Missing | Missing | Both missing — new end-to-end feature, blocked on a data-model decision first (see §14) |
+| MCQ options / correct answers (#16, #17) | Missing | Missing | Both missing — schema prerequisite for #40 |
+| Certificates on pass (#54) | Missing (wrong-domain page shares the name) | Missing | Both missing — needs a product decision on reuse-vs-new-build |
+| Candidate assignment by an officer (#24) | Missing | Missing | Both missing |
+| Question bank browsing (#14) | Assumes a curated/approved list | Returns everything, unguarded | Frontend implicitly relies on server-side filtering/guarding that doesn't exist |
+| Configure attempts (#8) | Missing (display-only) | Exists, but fully automatic with no admin-facing "cap" concept | Backend has the logic; there is no configuration surface on either side because the backend never exposes one |
+| Manual grading, result generation (#41, #44) | Complete | Logic complete, route unguarded | Backend security gap underneath an otherwise-complete frontend flow |
+
+---
+
+## 8. Data Model Gaps
+
+Confirmed against every migration touching an exam table (`1785742151690-EmaBaseline.ts`, `1785749000000-examRegistration.ts`, `1785750000000-examOperations.ts` — no other migration touches these tables) and every corresponding entity file:
+
+| Concept | Current state | Why insufficient | Requirement(s) blocked |
+|---|---|---|---|
+| Exam | `exams` table, full administrative metadata | Sufficient for the administrative workflow as built | #1–4, 6, 7, 9 |
+| Exam sections | Does not exist | Nothing partitions an exam's question set | #5 |
+| Questions | `questions` table — title, form, points, time, QC status | No options, no correct answer | #16, #17, #40 |
+| Question options/choices | Does not exist — no child table, no jsonb column | Blocks #16, and any candidate-facing question display | #16, #32, #40 |
+| Correct answer / answer key | Does not exist | Blocks automatic comparison of a candidate's answer | #17, #40 |
+| Exam attempts / sessions | Does not exist. `ExamRegistration.attemptNumber` is a *retake counter*, not a live in-progress session — no start/submit timestamp, no state machine | Nothing represents a candidate actively sitting an exam | #28, #29, #36, #37, #39 |
+| Candidate answers | Does not exist | `Result.resultBreakdowns` stores only the *outcome* (a score), never what was actually answered | #33, #34, #35, #40 |
+| Submission | Does not exist (no exam-attempt "submitted" event, distinct from the unrelated license-application "submit") | Nothing marks an attempt finished from the candidate's side | #37, #38 |
+| Scores | `Result.resultBreakdowns` + `totalScore` | Sufficient for the manual-grading workflow as built | #18, #42 |
+| Results | `results` table with a full QC-chain of columns | Sufficient, well-designed | #44–47 |
+| Retakes | `ExamRegistration.kind`/`attemptNumber`/`previousResultId`, server-derived | Sufficient | #51 |
+| Exam status | `EExamStatus` enum | Sufficient | #9 |
+| Exam timing | `Exam.givenTime`/`Question.time` — informational jsonb only | Never enforced against a clock; no "time remaining"/deadline field | #6, #30, #38 |
+
+No new schema is proposed here, per this task's scope — only what's missing and which requirement it blocks.
+
+---
+
+## 9. Existing Functionality That Should NOT Be Rebuilt
+
+- **Exam creation/configuration** (#1–4, 6, 7, 9) — solid on both sides; only needs its permission guard added, not a rewrite.
+- **Question-bank QC workflow** and **question CRUD** (#11–15, 18) — the DRAFT→PENDING_APPROVAL→APPROVED/REJECTED/RETIRED chain is genuinely well-modeled; same fix (permission guard), not a rebuild.
+- **Question assignment**, both manual and server-side random draw (#20, #21) — correct logic (random mode filters APPROVED-only, commits server-side without shipping the pool to the browser); guard the routes, don't rewrite them.
+- **Candidate registration and eligibility** (#22, #23) — real, ownership-scoped, correctly enforces the ACTIVE-seafarer and already-passed-subject rules.
+- **Attendance and incident logging** (#25, #26 and the incident panel) — complete and correctly guarded already.
+- **Retake derivation** (#8 as implemented, #51) — one of the best-engineered parts of the system: `resolveAttempt()` is tamper-proof, server-only, sourced from the candidate's own published-result history. Preserve exactly as-is.
+- **Manual grading, moderation, approval, publication chain** (#41–47) — the pipeline itself, its client-preview-but-server-authoritative pass/fail computation, and its publish-time notification are all sound. Only the initial create/update-result guard needs fixing.
+- **Appeals** (#49, #50) — complete, correctly guarded, and the "uphold sends it back to re-marking rather than editing the score directly" design is sound.
+
+---
+
+## 10. Bugs vs. Missing Features vs. Incomplete Features
+
+### Existing Bugs (functionality exists, but is incorrect)
+- No permission guard on `POST/PUT/DELETE /exams` (#1, #2), `POST/PUT/DELETE /questions` (#11–13), `GET /questions` (#14), `POST /exams/:id/questions[/random]` (#20, #21), `POST/PUT /results` (#41, #44) — any authenticated user, including a portal applicant, can alter exam configuration, the question bank, paper assembly, and candidate results.
+- No permission guard on `certification` CRUD (#4) — same root cause (unguarded generic `CommonCrudController`).
+
+### Missing Features (no meaningful implementation on either side)
+- Exam sections (#5).
+- The entire candidate exam-taking flow: start, attempt/session, timer, navigation, question display, answer selection/save/auto-save, resume, submit, expiry enforcement (#28–38).
+- MCQ options and correct-answer/answer-key data model (#16, #17).
+- Automatic grading (#40) — blocked on the above.
+- Officer-initiated candidate assignment (#24).
+- Exam-pass certificate issuance (#54).
+
+### Incomplete Features (meaningful implementation exists, gaps remain)
+- Question types (#15) — two labels exist, nothing deeper.
+- Configure duration/timing (#6) — captured but never enforced (direct consequence of the missing attempt/timer model, not a separate defect).
+- Configure attempts (#8) — fully automatic derivation exists; no admin-facing cap/configuration surface.
+- Exam instructions (#27) — captured on creation, no display surface downstream.
+- Notifications (#53) — 3 of roughly 8 relevant exam events fire; the rest are silent.
+- Exam history (#52) — no dedicated view beyond the existing registrations/results tables.
+- Configure availability (#10) and question ordering (#19) — present in some form, exact criteria/mechanism not confirmed either side (⚠️ Needs Verification, not a confirmed bug or confirmed absence).
+
+---
+
+## 11. Permission Gaps
+
+| Action | Frontend Permission Check | Backend Permission Check | Status |
+|---|---|---|---|
+| Create/edit/delete exam (#1, #2) | None (`usePermissions()` not used on exam pages) | None | **Full-stack gap** |
+| Create/edit/delete question (#11–13) | None | None | **Full-stack gap** |
+| Browse question bank (#14) | None | None | **Full-stack gap** |
+| Assign/draw exam paper (#20, #21) | None | None | **Full-stack gap** |
+| Record/edit exam result (#41, #44) | None | None (despite `RECORD_EXAM_RESULT` existing) | **Full-stack gap** |
+| Define subjects — certification CRUD (#4) | None | None | **Full-stack gap** |
+| Review/approve question | None (client-side) | `APPROVE_QUESTION` | Backend enforces; frontend gap is cosmetic only |
+| Record attendance (#25) | None (client-side) | `RECORD_EXAM_ATTENDANCE` | Backend enforces; cosmetic frontend gap |
+| Manage exam incidents | None (client-side) | `MANAGE_EXAM_INCIDENTS` | Backend enforces; cosmetic frontend gap |
+| Moderate/approve/publish result (#45–47) | None (client-side) | `MODERATE_/APPROVE_/PUBLISH_EXAM_RESULT` | Backend enforces; cosmetic frontend gap |
+| Decide exam appeal (#50) | None (client-side) | `DECIDE_EXAM_APPEAL` | Backend enforces; cosmetic frontend gap |
+
+**Inconsistent permission names:** none found — every guard that exists uses matching string keys between the frontend's `PERMISSIONS` constant and the backend's `LICENSE_PERMISSIONS` constant, for the (small) subset of exam actions the frontend mirrors at all. The frontend simply never mirrors the exam permission keys anywhere, which is why the unguarded backend routes have no corresponding client-side check to be inconsistent with.
+
+**Pattern worth noting:** where the backend *does* have a guard, the frontend's absence of a matching client-side check is harmless (a 403 after the fact) — not a security hole, just a UX rough edge. The five "Full-stack gap" rows above are the only ones that represent an actual, currently-exploitable authorization bypass.
+
+---
+
+## 12. Overall User-Story Completion
+
+**Method:** every one of the 54 numbered requirements in §1 was independently traced on both frontend and backend to file:line depth (§§2–4) — this percentage is a direct count of that table, not an estimate.
+
+- **✅ Fully Complete (both sides, no gap):** 27 of 54 = **50%** — #3, 7, 9, 18, 22, 23, 25, 26, 42, 43, 45, 46, 47, 48, 49, 50, 51 (function complete; frontend display-only doesn't block it), plus 10 more counted at the "logic is right, no gap" bar.
+
+  *(Exact list: 3, 7, 9, 18, 22, 23, 25, 26, 42, 43, 45, 46, 47, 48, 49, 50, 51 = 17 rows marked outright ✅/✅/✅ with "None" in the Gap column. Recount precisely: rows with Overall ✅ in §4 are #3, 7, 9, 18, 22, 23, 25, 26, 42, 43, 45, 46, 47, 48, 49, 50, 51 — **17 of 54 = 31%**.)*
+
+- **🟡 Partially Complete (meaningful implementation, real gap remains):** #1, 2, 4, 6, 8, 10, 11, 12, 13, 14, 15, 20, 21, 27, 41, 44, 52, 53 = **18 of 54 = 33%**.
+- **🔴 Missing (no meaningful implementation on either side):** #5, 16, 17, 24, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 40, 54 = **17 of 54 = 31%**.
+- **⚠️ Needs Verification:** #19 = **1 of 54**; #10 is already counted in Partial since a real (if unconfirmed) route exists.
+- **🔵 Not Applicable:** #39 = **1 of 54**.
+
+(17 + 18 + 17 + 1 + 1 = 54 — the count reconciles.)
+
+---
+
+## 13. Priority Gap List
+
+### P0 — Critical
+- Add permission guards to `POST/PUT/DELETE /exams`, `POST/PUT/DELETE /questions`, `GET /questions`, `POST /exams/:id/questions[/random]`, `POST/PUT /results`, and `certification` CRUD (#1, 2, 4, 11–14, 20, 21, 41, 44) — currently any authenticated user can tamper with exam configuration, the question bank, and candidate results.
+- Product decision: is online candidate exam-taking (#28–38) in scope at all? Everything else in the Candidate Exam-Taking category depends on this answer.
+- MCQ options/correct-answer data model (#16, #17) — schema prerequisite for automatic grading (#40) and any future exam-taking UI.
+
+### P1 — High
+- Exam question-type depth beyond ESSAY/CHOICE labels, if richer types are wanted (#15).
+- Officer-initiated candidate assignment (#24).
+- Exam-pass → certificate issuance (#54), pending a product decision on scope ("if required").
+- Duration/timing enforcement (#6) — meaningful only once #28–38 are scoped.
+
+### P2 — Medium
+- Admin-configurable attempt cap, if wanted beyond the current automatic/uncapped behavior (#8).
+- Round out exam-event notification coverage (#53).
+- Exam sections, if the product needs multi-part papers (#5).
+
+### P3 — Low
+- Confirm/implement explicit question ordering (#19).
+- Confirm exam-availability criteria (#10).
+- Dedicated exam-history view (#52), if wanted beyond the existing tables.
+
+---
+
+## 14. Recommended Implementation Order
+
+1. **Backend permission fixes first.** Isolated, low-risk, no business-logic change — adding an existing, already-proven guard decorator to routes that already work correctly otherwise. This closes the worst exposure (§6/§11) before anything else is touched, and has zero dependency on any other item below.
+2. **Product decision on candidate exam-taking scope.** Every remaining item in the Candidate Exam-Taking category (#28–39) and Automatic grading (#40) depends on knowing whether online delivery is being built at all, versus the system's current shape (administer on paper, record results digitally). Building past this point before the decision risks the wrong thing.
+3. **MCQ / answer-key domain model**, once (2) confirms it's needed — a backend schema and entity change that both #40 (automatic grading) and any exam-taking UI (#32, #33) depend on; nothing above it should be attempted first.
+4. **Backend attempt/session + answer-capture APIs**, once (3) exists — informed by the reusable per-section-autosave pattern already proven in the licensing wizard (`PATCH /license-applications/:id/sections/:sectionKey`), which is the closest existing precedent for #35.
+5. **Frontend exam-taking flow** (#27, 28, 31–39), once (4) has real endpoints to call.
+6. **Automatic grading logic** (#40), layered on (3)'s answer key and (4)'s captured answers — can proceed in parallel with (5) once (3)/(4) exist, since grading only needs stored answers to compare against, not the live UI.
+7. **Officer-initiated candidate assignment (#24) and certificate issuance (#54)** — independent of the exam-taking track; sequenced here only by priority (P1), not by any technical dependency, so either can be picked up any time after step 1.
+8. **Secondary items** — client-side permission-check polish, notification coverage, sections, history, ordering, availability criteria — none of these block anything else.
+
+---
+
+## 15. Final Executive Summary
+
+### Current State
+The system runs a complete, real administrative *paper trail* for examinations: create/configure an exam, build and quality-control a question bank, assemble a paper (manually or by random server-side draw), register candidates, take attendance, log incidents, enter marks by hand, run them through a four-stage review/approval/publication pipeline, and handle appeals. What it cannot do is let a candidate actually take the exam through the software — there is no start, timer, question display, answer capture, or submission anywhere in either repository.
+
+### Main Strengths
+Retake derivation, the marking/moderation/approval/publication chain, attendance/incident logging, and candidate registration/eligibility are all genuinely well-built on both sides and should be preserved as-is (§9).
+
+### Main Gaps
+The entire candidate exam-taking flow (§6); the MCQ options/correct-answer data model that automatic grading depends on; officer-initiated candidate assignment; exam-pass certificate issuance; and a cluster of exam-domain (and certification) write endpoints with no permission guard at all.
+
+### Biggest Exam Gap
+**The candidate exam-taking experience does not exist — nothing starts an attempt, runs a timer, captures an answer, auto-saves, or submits a completed exam, on either side of the stack.** This is the single largest gap in the entire examination workflow, and every downstream item (automatic grading, exam instructions display, submission-expiry handling) depends on it.
+
+### Domain/Data Model Gaps
+No exam-attempt/session entity, no candidate-answer storage, no question-option/correct-answer schema (§8). These three are prerequisites — nothing in the exam-taking or automatic-grading categories can be built correctly without them existing first.
+
+### Frontend Gaps
+The entire exam-taking UI (#27–39); officer-initiated candidate roster management (#24); certificate issuance UI (#54); client-side permission gating on the several exam actions the backend leaves entirely open.
+
+### Backend Gaps
+Missing permission guards on exam/question/result write routes and certification CRUD (§6/§11); entirely missing exam-attempt/session infrastructure, answer capture, automatic grading, and certificate issuance; no officer-initiated registration endpoint.
+
+### Critical Permission Gaps
+Any authenticated user — including a portal applicant holding no staff position — can today, via direct API calls: create, edit, or delete an exam; create, edit, delete, or browse the full question bank (unapproved content included); assemble the live question set for an exam; and record or rewrite a candidate's result. The same root cause (an unguarded generic CRUD scaffold) leaves the certification/"subjects" catalog open to the same treatment. This is the most consequential finding in this analysis and should be treated as more urgent than any feature-completeness gap.
+
+### Recommended Next Step
+Add the missing `PermissionGuard` decorators to the exam/question/result write routes and the `certification` CRUD controller. This is the single most logical next step: it is low-risk (an existing, already-proven mechanism applied to existing routes, no new logic), it closes the most severe finding in this report, and — unlike the exam-taking feature — it requires no upstream product decision to begin. (Not implemented here, per this task's read-only scope.)

libs/api/src/lib/base-api/base-query-with-reauth.ts

@@ -1,10 +1,11 @@
-import { fetchBaseQuery, type BaseQueryFn } from '@reduxjs/toolkit/query/react';
-import type { FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query';
-import { resolveSessionContext } from '../session';
+import { fetchBaseQuery, type BaseQueryFn } from "@reduxjs/toolkit/query/react";
+import type { FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { resolveSessionContext } from "../session";
 
 export const BASE_API_URL =
-  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
-  'http://localhost:3000/api';
+  (import.meta as { env?: Record<string, string> }).env?.[
+    "VITE_BASE_API_URL"
+  ] ?? "http://localhost:3000/api";
 
 let _onTokenExpired: (() => Promise<string>) | null = null;
 let _onAuthFailure: (() => void) | null = null;
@@ -28,7 +29,7 @@ export const baseQueryWithReauth: BaseQueryFn<
       const { token, sessionHeaders } = resolveSessionContext(
         api.getState() as { auth?: { token?: string } },
       );
-      if (token) headers.set('Authorization', `Bearer ${token}`);
+      if (token) headers.set("Authorization", `Bearer ${token}`);
       Object.entries(sessionHeaders).forEach(([k, v]) => headers.set(k, v));
       return headers;
     },

libs/api/src/lib/features/licensing/licensing-api.ts

@@ -6,6 +6,7 @@ import type {
   ApplicationPayment,
   ApplicationStaff,
   Attachment,
+  Department,
   DocumentRequirement,
   FormSchemaPalette,
   FormSectionConfig,
@@ -21,11 +22,14 @@ import type {
   AssignableOfficer,
   DocumentDecision,
   DocumentReview,
+  EligibleExam,
   ExportResult,
   LicenseTemplate,
   Paginated,
   QueueCounts,
   QueueFilter,
+  Rank,
+  RankCertificateCategory,
   RemarkTargetType,
   SavedQueueView,
   SchemaIssue,
@@ -71,6 +75,8 @@ const TAGS = [
   'SavedView',
   'LicenseTemplate',
   'DocumentRequirement',
+  'Department',
+  'Rank',
 ] as const;
 
 const listTag = (type: (typeof TAGS)[number]) => ({ type, id: 'LIST' }) as const;
@@ -253,6 +259,75 @@ export const licensingApi = baseApi
         invalidatesTags: (_r, error) => (error ? [] : [listTag('DocumentRequirement')]),
       }),
 
+      // --------------------------------------------------- departments & ranks
+      /** Every department, for the admin editor. */
+      getDepartments: builder.query<Paginated<Department>, void>({
+        query: () => ({ url: '/departments' }),
+        providesTags: () => [listTag('Department')],
+      }),
+
+      /** Active departments only — the applicant-facing picker. */
+      getActiveDepartments: builder.query<Department[], void>({
+        query: () => ({ url: '/departments/active/list' }),
+        providesTags: () => [listTag('Department')],
+      }),
+
+      createDepartment: builder.mutation<
+        Department,
+        Partial<Department> & { code: string; name: Department['name'] }
+      >({
+        query: (body) => ({ url: '/departments', method: 'POST', body }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Department')]),
+      }),
+
+      updateDepartment: builder.mutation<Department, { id: string } & Partial<Department>>({
+        query: ({ id, ...body }) => ({ url: `/departments/${id}`, method: 'PUT', body }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Department')]),
+      }),
+
+      deleteDepartment: builder.mutation<unknown, string>({
+        query: (id) => ({ url: `/departments/${id}`, method: 'DELETE' }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Department')]),
+      }),
+
+      /** Every rank, for the admin editor to filter/group by department client-side. */
+      getRanks: builder.query<Paginated<Rank>, void>({
+        query: () => ({ url: '/ranks' }),
+        providesTags: () => [listTag('Rank')],
+      }),
+
+      /** One department's ladder for a category, ordered — the applicant wizard's rank picker. */
+      getRankLadder: builder.query<
+        Rank[],
+        { departmentId: string; certificateCategory: RankCertificateCategory }
+      >({
+        query: (params) => ({ url: '/ranks/ladder', params }),
+        providesTags: () => [listTag('Rank')],
+      }),
+
+      createRank: builder.mutation<
+        Rank,
+        Partial<Rank> & {
+          departmentId: string;
+          certificateCategory: RankCertificateCategory;
+          key: string;
+          name: Rank['name'];
+        }
+      >({
+        query: (body) => ({ url: '/ranks', method: 'POST', body }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Rank')]),
+      }),
+
+      updateRank: builder.mutation<Rank, { id: string } & Partial<Rank>>({
+        query: ({ id, ...body }) => ({ url: `/ranks/${id}`, method: 'PUT', body }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Rank')]),
+      }),
+
+      deleteRank: builder.mutation<unknown, string>({
+        query: (id) => ({ url: `/ranks/${id}`, method: 'DELETE' }),
+        invalidatesTags: (_r, error) => (error ? [] : [listTag('Rank')]),
+      }),
+
       // -------------------------------------------------------- application
       createApplication: builder.mutation<
         LicenseApplication,
@@ -575,6 +650,15 @@ export const licensingApi = baseApi
           error ? [] : [itemTag('LicenseApplication', id), listTag('ApplicationQueue')],
       }),
 
+      /**
+       * Exam sittings valid for this application's rank — what the
+       * schedule-exam picker offers, instead of every exam in the system.
+       */
+      getEligibleExams: builder.query<EligibleExam[], string>({
+        query: (id) => ({ url: `/license-application-review/${id}/eligible-exams` }),
+        providesTags: (_r, _e, id) => [itemTag('LicenseApplication', id)],
+      }),
+
       /** Places a candidate who has paid the examination fee into a sitting. */
       scheduleExam: builder.mutation<
         LicenseApplication,
@@ -641,6 +725,8 @@ export const licensingApi = baseApi
         LicenseTemplate,
         {
           licenseTypeId: string;
+          /** Scopes the draft to one rank's certificate. Omit for the type's default design. */
+          rankId?: string | null;
           name: string;
           hbsSource?: string;
           pageOptions?: TemplatePageOptions;
@@ -654,6 +740,7 @@ export const licensingApi = baseApi
         LicenseTemplate,
         {
           id: string;
+          rankId?: string | null;
           name?: string;
           hbsSource?: string;
           pageOptions?: TemplatePageOptions;
@@ -839,6 +926,23 @@ export const licensingApi = baseApi
           error ? [] : [itemTag('LicenseApplication', id), listTag('ApplicationQueue')],
       }),
 
+      /**
+       * Starts the review: the team leader hands the file to an employee.
+       * `assign` above only re-points an application already in flight.
+       */
+      assignReviewer: builder.mutation<
+        LicenseApplication,
+        { id: string; officerId: string; remark?: string }
+      >({
+        query: ({ id, ...body }) => ({
+          url: `/license-application-review/${id}/assign-reviewer`,
+          method: 'POST',
+          body,
+        }),
+        invalidatesTags: (_r, error, { id }) =>
+          error ? [] : [itemTag('LicenseApplication', id), listTag('ApplicationQueue')],
+      }),
+
       holdApplication: builder.mutation<
         LicenseApplication,
         { id: string; reason: string }
@@ -984,6 +1088,16 @@ export const {
   useCreateDocumentRequirementMutation,
   useUpdateDocumentRequirementMutation,
   useDeleteDocumentRequirementMutation,
+  useGetDepartmentsQuery,
+  useGetActiveDepartmentsQuery,
+  useCreateDepartmentMutation,
+  useUpdateDepartmentMutation,
+  useDeleteDepartmentMutation,
+  useGetRanksQuery,
+  useGetRankLadderQuery,
+  useCreateRankMutation,
+  useUpdateRankMutation,
+  useDeleteRankMutation,
   useUpdateLicenseValidityMutation,
   useGetLicenseTypeRequirementsQuery,
   useCreateApplicationMutation,
@@ -1043,6 +1157,7 @@ export const {
   useApproveDocumentsMutation,
   useFinalApproveMutation,
   useRejectApplicationMutation,
+  useGetEligibleExamsQuery,
   useScheduleExamMutation,
   useRecordExamOutcomeMutation,
   useRetakeExamMutation,

libs/api/src/lib/features/licensing/licensing.helpers.ts

@@ -3,6 +3,7 @@ import { resolveTokenFromStorage } from '../../session';
 import type {
   Bilingual,
   FamilyKind,
+  FieldCondition,
   FormFieldConfig,
   FormSectionConfig,
   LicenseApplication,
@@ -68,6 +69,7 @@ export const STATUS_LABELS: Record<LicenseStatus, string> = {
   REVIEW_REPORTED: 'Review Reported',
   INSPECTION_COMPLETED: 'Inspection Completed',
   INSPECTION_REPORTED: 'Inspection Reported',
+  INSPECTION_FAILED: 'Inspection Failed',
   APPROVED: 'Approved',
   REJECTED: 'Rejected',
   ON_HOLD: 'On Hold',
@@ -99,6 +101,8 @@ export const STATUS_COLORS: Record<LicenseStatus, string> = {
   REVIEW_REPORTED: 'orange',
   INSPECTION_COMPLETED: 'cyan',
   INSPECTION_REPORTED: 'orange',
+  // Orange, not red: recoverable — a re-inspection can still pass.
+  INSPECTION_FAILED: 'orange',
   APPROVED: 'teal',
   REJECTED: 'red',
   ON_HOLD: 'gray',
@@ -134,6 +138,8 @@ export const STATUS_PROGRESS: Record<LicenseStatus, number> = {
   REVIEW_REPORTED: 50,
   INSPECTION_COMPLETED: 65,
   INSPECTION_REPORTED: 70,
+  // A re-inspection returns to the pending step, so no further along than it.
+  INSPECTION_FAILED: 55,
   APPROVED: 75,
   // Parked, so it keeps the progress of wherever it was held from.
   ON_HOLD: 45,
@@ -187,6 +193,7 @@ export const APPLICANT_NAME_TYPE_KEYS = [
   'CERTIFICATE_OF_PROFICIENCY',
   'VESSEL_REGISTRATION',
   'VESSEL_OWNERSHIP_TRANSFER',
+  'ENDORSEMENT_SEAFARER',
   'ENDORSEMENT_COC',
   'ENDORSEMENT_GOC',
 ];
@@ -198,6 +205,7 @@ const FAMILY_KIND_BY_KEY: Partial<Record<string, FamilyKind>> = {
   BTC_BASIC_TRAINING: 'CERTIFICATE',
   CERTIFICATE_OF_COMPETENCY: 'CERTIFICATE',
   CERTIFICATE_OF_PROFICIENCY: 'CERTIFICATE',
+  ENDORSEMENT_SEAFARER: 'CERTIFICATE',
   ENDORSEMENT_COC: 'CERTIFICATE',
   ENDORSEMENT_GOC: 'CERTIFICATE',
   FREIGHT_FORWARDER: 'LOGISTICS_LICENSE',
@@ -381,6 +389,10 @@ const ERROR_MESSAGES: Record<string, string> = {
   application_not_awaiting_inspection:
     'This application is not waiting for an inspection.',
   inspection_already_completed: 'This inspection has already been recorded.',
+  inspection_not_yet_due:
+    'Inspection results can be recorded after the scheduled inspection date and time.',
+  inspection_not_passed:
+    'Approval requires a passed inspection. Schedule a re-inspection or request corrections.',
   license_type_inactive: 'This licence type is not currently accepting applications.',
 };
 
@@ -565,15 +577,33 @@ export function validateSections(
   return errors;
 }
 
-/** Evaluates a config condition against the current form answers. */
+/**
+ * Evaluates a config condition against the current form answers.
+ *
+ * Mirrors the server's `ApplicationValidationService.conditionHolds` —
+ * `anyOf` holds when any listed sub-condition holds, needed for an answer
+ * that can live on one of several mutually-exclusive fields (e.g. a CoP rank
+ * split by department).
+ */
+interface ConditionLike {
+  field?: string;
+  equals?: unknown;
+  notEquals?: unknown;
+  in?: (string | number)[];
+  isSet?: boolean;
+  /** Holds when ANY listed sub-condition holds — see FieldCondition.anyOf. */
+  anyOf?: ConditionLike[];
+}
+
 export function conditionHolds(
-  condition:
-    | { field: string; equals?: unknown; notEquals?: unknown; in?: (string | number)[]; isSet?: boolean }
-    | undefined
-    | null,
+  condition: FieldCondition | undefined | null,
   formData: Record<string, Record<string, unknown>>,
 ): boolean {
-  if (!condition?.field) return true;
+  if (!condition) return true;
+  if (condition.anyOf) {
+    return condition.anyOf.some((sub) => conditionHolds(sub, formData));
+  }
+  if (!condition.field) return true;
   const value = condition.field
     .split('.')
     .reduce<unknown>(

libs/api/src/lib/features/licensing/licensing.types.ts

@@ -33,6 +33,10 @@ export type LicenseStatus =
   | "INSPECTION_COMPLETED"
   // Inspector filed the result; parked with the team leader for a decision.
   | "INSPECTION_REPORTED"
+  // The inspection was conducted and failed. Approval and issuance are
+  // unreachable until a re-inspection passes; the officer chooses between a
+  // repeat visit, an adjustment round, and rejection.
+  | "INSPECTION_FAILED"
   | "APPROVED"
   | "REJECTED"
   | "ON_HOLD"
@@ -71,11 +75,18 @@ export type FormFieldType =
   | "TIN";
 
 export interface FieldCondition {
-  field: string;
+  /** Omitted when `anyOf` is used instead — see below. */
+  field?: string;
   equals?: string | number | boolean;
   notEquals?: string | number | boolean;
   in?: (string | number)[];
   isSet?: boolean;
+  /**
+   * Alternative to a single-field check: holds when ANY listed condition
+   * holds. `field`/`equals`/etc are ignored when this is present. Mirrors
+   * the server's `FieldCondition` (form-schema.type.ts).
+   */
+  anyOf?: FieldCondition[];
 }
 
 export interface FormFieldConfig {
@@ -578,19 +589,50 @@ export interface TemplateFieldPlacement {
   /** Variable rendered here, or null when the block carries literal `text`. */
   variable: string | null;
   text?: string;
+  /** Renders as `<img>` when "image" — see TemplateVariable.kind. */
+  type?: "text" | "image";
   xPct: number;
   yPct: number;
   widthPct: number;
   fontSize?: number;
   fontWeight?: "normal" | "bold";
-  align?: "left" | "center" | "right";
+  fontStyle?: "normal" | "italic";
+  align?: "left" | "center" | "right" | "justify";
   color?: string;
 }
 
 /** A certificate design authored in the backoffice. */
+/** An STCW seafarer department (Deck, Engine, Catering), backoffice-managed. */
+export interface Department {
+  id: string;
+  /** Matches the ESeafarerDepartment value stored elsewhere, e.g. "DECK". */
+  code: string;
+  name: Bilingual;
+  sortOrder: number;
+  isActive: boolean;
+}
+
+export type RankCertificateCategory = "COC" | "COP";
+
+/** One rung of a CoC/CoP ladder for a department. */
+export interface Rank {
+  id: string;
+  departmentId: string;
+  certificateCategory: RankCertificateCategory;
+  /** Value stored on License.rank / Certification.rankKey, e.g. "CHIEF_MATE". */
+  key: string;
+  name: Bilingual;
+  /** Rung position within its department+category ladder. 0 is the entry rank. */
+  ladderOrder: number;
+  sortOrder: number;
+  isActive: boolean;
+}
+
 export interface LicenseTemplate {
   id: string;
   licenseTypeId: string;
+  /** Scopes this design to one rank's certificate. Null = the type's default. */
+  rankId?: string | null;
   name: string;
   version: number;
   hbsSource: string;
@@ -617,6 +659,8 @@ export interface LicenseTemplate {
 export interface TemplateVariable {
   key: string;
   label: string;
+  /** "image" means the value is a data URI to place as `<img>`, not text. */
+  kind?: "text" | "image";
 }
 
 export interface Paginated<T> {
@@ -703,3 +747,13 @@ export interface IssuedLicense {
   verificationCode: string;
   certificateFileKey: string | null;
 }
+
+/** One sitting offered to a claimed examined-certificate application, scoped to its rank. */
+export interface EligibleExam {
+  id: string;
+  title: { en: string; am: string };
+  date: string;
+  venue: string;
+  status: string;
+  certification?: { id: string; name: { en: string; am: string }; rankKey: string | null };
+}

libs/api/src/lib/features/seafarer-registration/seafarer-registration-api.ts

@@ -36,6 +36,11 @@ export const seafarerRegistrationApi = baseApi
         invalidatesTags: (_r, error) => (error ? [] : [LIST]),
       }),
 
+      cancelSeafarerRegistration: builder.mutation<void, string>({
+        query: (id) => ({ url: `/seafarer-registrations/${id}`, method: 'DELETE' }),
+        invalidatesTags: (_r, error, id) => (error ? [] : [LIST, item(id)]),
+      }),
+
       saveSeafarerRegistration: builder.mutation<
         SeafarerRegistration,
         { id: string; body: SaveSeafarerRegistration }
@@ -108,6 +113,7 @@ export const seafarerRegistrationApi = baseApi
 export const {
   useGetMySeafarerRegistrationQuery,
   useStartSeafarerRegistrationMutation,
+  useCancelSeafarerRegistrationMutation,
   useSaveSeafarerRegistrationMutation,
   useSubmitSeafarerRegistrationMutation,
   useListSeafarerRegistrationsQuery,

libs/api/src/lib/features/seafarer-registration/seafarer-registration.constants.ts

@@ -64,13 +64,28 @@ export const PHYSICAL_BOUNDS = {
   weightKg: { min: 30, max: 250 },
 } as const;
 
+/**
+ * How the platform spells Ethiopia in the `nationality` free-text field
+ * (CountrySelect's country name — matches the API's ETHIOPIAN_NATIONALITY).
+ */
+export const ETHIOPIAN_NATIONALITY = 'Ethiopia';
+
+/** Whether a declared nationality is Ethiopian — drives National ID vs Passport requirements. */
+export function isEthiopianNationality(nationality: string | null | undefined): boolean {
+  return nationality === ETHIOPIAN_NATIONALITY;
+}
+
 /** Upload slots, keyed as the API's submission check expects them. */
 export const SEAFARER_REGISTRATION_DOCUMENTS: {
   key: string;
   name: string;
   description?: string;
-  /** `'passport'`: required only once a passport number is declared. */
-  required: boolean | 'passport';
+  /**
+   * `'passport'`: required once a passport number is declared (always true
+   * for non-Ethiopians, who must declare one). `'ethiopian'`: required only
+   * for applicants who declared Ethiopian nationality.
+   */
+  required: boolean | 'passport' | 'ethiopian';
   accept?: string;
 }[] = [
   {
@@ -80,7 +95,7 @@ export const SEAFARER_REGISTRATION_DOCUMENTS: {
     required: true,
     accept: 'image/jpeg,image/png',
   },
-  { key: 'nationalId', name: 'National ID (Fayda) or Kebele ID', required: true },
+  { key: 'nationalId', name: 'National ID (Fayda) or Kebele ID', required: 'ethiopian' },
   { key: 'passport', name: 'Passport Copy', required: 'passport' },
   { key: 'graduation', name: 'Educational Certificate', required: false },
   {
@@ -210,14 +225,22 @@ const OPTION_LABELS: Partial<Record<keyof SeafarerRegistrationAnswers, { value:
   bloodType: BLOOD_TYPE_OPTIONS,
 };
 
-/** Display value for one answer: option label for enums, "—" when blank. */
+/**
+ * Display value for one answer: option label for enums, "—" when blank.
+ *
+ * `departmentOptions` overrides the hardcoded `DEPARTMENT_OPTIONS` fallback
+ * for the `department` field — the live list from `GET /departments`, so a
+ * department added in the backoffice after this constants file was written
+ * still gets its name instead of falling back to the raw code.
+ */
 export function displaySeafarerAnswer(
   field: keyof SeafarerRegistrationAnswers,
   value: unknown,
+  departmentOptions?: { value: string; label: string }[],
 ): string {
   if (value === null || value === undefined || value === '') return '—';
   if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-  const options = OPTION_LABELS[field];
+  const options = field === 'department' && departmentOptions ? departmentOptions : OPTION_LABELS[field];
   if (options) return options.find((o) => o.value === value)?.label ?? String(value);
   return String(value);
 }

libs/auth/src/lib/utils/refresh-token.ts

@@ -73,8 +73,8 @@ async function runRefresh(): Promise<string> {
   // The IAM service exposes this as `refresh-token`; posting to `/auth/refresh`
   // 404s, which the caller would turn into a silent logout.
   const response = await fetch(`${BASE_API_URL}/auth/refresh-token`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ refreshToken }),
   });
 

libs/ui/src/lib/input/AmharicDatePicker.tsx

@@ -15,7 +15,7 @@ import {
 import { TimeInput } from '@mantine/dates';
 import { useDisclosure } from '@mantine/hooks';
 import { DayPicker as EthiopicDayPicker } from '@daypicker/ethiopic';
-import { DayPicker as GregorianDayPicker } from '@daypicker/react';
+import { DayPicker as GregorianDayPicker, type Matcher } from '@daypicker/react';
 import { IconCalendarEvent } from '@tabler/icons-react';
 import '@daypicker/react/dist/style.css';
 import './AmharicDatePicker.css';
@@ -131,6 +131,11 @@ export interface AmharicDatePickerProps {
   /** Show a time-of-day field alongside the calendar. Off by default —
    * most callers only need a calendar day. */
   withTime?: boolean;
+  /** Earliest/latest selectable day. Accepts a Date or a value in the same
+   * wire format as `value`. Days outside the range are disabled in both
+   * calendars. */
+  minDate?: Date | string;
+  maxDate?: Date | string;
   /** Wire format for `value`/`onChange`: a full ISO-8601 instant (default,
    * what most backend date fields expect) or a bare `yyyy-mm-dd` calendar
    * date (what filter query params and plain `date: string` DTO fields
@@ -151,6 +156,8 @@ export function AmharicDatePicker({
   onBlur,
   w,
   withTime = false,
+  minDate,
+  maxDate,
   dateFormat = 'iso',
 }: AmharicDatePickerProps) {
   const { t, i18n } = useTranslation();
@@ -161,6 +168,21 @@ export function AmharicDatePicker({
 
   const selected = parseWireValue(value, dateFormat, withTime);
 
+  const asDate = (limit: Date | string | undefined) =>
+    limit instanceof Date ? limit : parseWireValue(limit, dateFormat, withTime);
+  const min = asDate(minDate);
+  const max = asDate(maxDate);
+  const outOfRange: Matcher[] = [
+    ...(min ? [{ before: min }] : []),
+    ...(max ? [{ after: max }] : []),
+  ];
+  // Compared as calendar days — the limits carry a midnight time-of-day, so
+  // an instant comparison would call today "after" a max of today.
+  const todayKey = formatPlainDate(new Date());
+  const todayOutOfRange =
+    (!!min && todayKey < formatPlainDate(min)) ||
+    (!!max && todayKey > formatPlainDate(max));
+
   const dateLabel = selected
     ? calendarType === 'EN'
       ? selected.toLocaleDateString('en-US', {
@@ -266,6 +288,7 @@ export function AmharicDatePicker({
             endMonth={YEAR_DROPDOWN_END}
             numerals="latn"
             captionLayout="dropdown"
+            disabled={outOfRange}
             formatters={ETH_FORMATTERS}
             onSelect={(date: Date | undefined) => {
               onChange?.(date ? formatWireValue(mergeDateTime(selected, date), dateFormat, withTime) : '');
@@ -281,6 +304,7 @@ export function AmharicDatePicker({
             startMonth={YEAR_DROPDOWN_START}
             endMonth={YEAR_DROPDOWN_END}
             captionLayout="dropdown"
+            disabled={outOfRange}
             onSelect={(date: Date | undefined) => {
               onChange?.(date ? formatWireValue(mergeDateTime(selected, date), dateFormat, withTime) : '');
               if (!withTime) close();
@@ -389,6 +413,7 @@ export function AmharicDatePicker({
           <Button
             variant="light"
             size="xs"
+            disabled={todayOutOfRange}
             onClick={() => {
               onChange?.(formatWireValue(new Date(), dateFormat, withTime));
               close();

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}

libs/ui/src/lib/layout/AppHeader.tsx

@@ -14,6 +14,7 @@ import {
   IconLogout,
   IconUserCircle,
 } from '@tabler/icons-react';
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { ColorSchemeToggle } from './ColorSchemeToggle';
@@ -36,6 +37,17 @@ interface AppHeaderProps {
   supportedLanguages: readonly string[];
   onNotificationsClick?: () => void;
   notificationCount?: number;
+  /**
+   * Rendered at the far left. The sidebar layout carries the brand in the
+   * sidebar itself; the top-bar layout has no sidebar, so it passes the brand
+   * here rather than leaving the chrome unbranded.
+   */
+  brand?: ReactNode;
+  /**
+   * Breakpoint from which the burger is hidden. The top-bar layout only needs
+   * it on small screens, where the drawer replaces the nav strip.
+   */
+  burgerHiddenFrom?: string;
 }
 
 export function AppHeader({
@@ -50,17 +62,21 @@ export function AppHeader({
   supportedLanguages,
   onNotificationsClick,
   notificationCount,
+  brand,
+  burgerHiddenFrom,
 }: AppHeaderProps) {
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
 
   return (
     <Group h="100%" px="lg" justify="space-between" wrap="nowrap">
       <Group gap="md" wrap="nowrap">
+        {brand}
         {/* Hamburger — styled like user-management Top.tsx */}
         {/* The Burger itself owns the click so the control is a real, keyboard
             reachable <button>; the Box is chrome only. It previously wrapped a
             no-op button, which no keyboard user could operate. */}
         <Box
+          hiddenFrom={burgerHiddenFrom}
           style={{
             display: 'flex',
             alignItems: 'center',

libs/ui/src/lib/layout/AppTopNav.tsx

@@ -1,4 +1,5 @@
 import { Badge, Group, Menu, UnstyledButton, rem } from '@mantine/core';
+import { forwardRef } from 'react';
 import { IconChevronDown } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { NavItem } from './AppSidebar';
@@ -23,7 +24,9 @@ interface AppTopNavProps {
  * scrolling strip, so with twenty-odd of them most were off-screen and the
  * grouping that the sidebar already had was thrown away. Here each section
  * collapses to a single labelled dropdown, which fits and keeps the same
- * information architecture as the sidebar.
+ * information architecture as the sidebar. Sections that still do not fit
+ * scroll horizontally rather than dropping off the edge — under ~1100px the
+ * last one or two were simply unreachable.
  */
 export function AppTopNav({ navItems, activePath, onNavigate }: AppTopNavProps) {
   const { t } = useTranslation();
@@ -36,6 +39,7 @@ export function AppTopNav({ navItems, activePath, onNavigate }: AppTopNavProps)
       wrap="nowrap"
       role="navigation"
       aria-label={t('nav.primary', 'Primary')}
+      style={{ flex: 1, minWidth: 0, overflowX: 'auto', scrollbarWidth: 'none' }}
     >
       {sections.map((section, index) => {
         // An unlabelled leading block (Dashboard) is a plain link, not a menu.
@@ -148,40 +152,52 @@ interface TopNavButtonProps {
   onClick?: () => void;
 }
 
-function TopNavButton({
-  label,
-  active,
-  badge,
-  soon,
-  withChevron,
-  onClick,
-}: TopNavButtonProps) {
-  return (
-    <UnstyledButton
-      onClick={onClick}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: rem(6),
-        padding: `0 ${rem(14)}`,
-        height: '100%',
-        borderBottom: '2px solid',
-        borderBottomColor: active ? 'var(--mantine-color-blue-6)' : 'transparent',
-        color: active ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-gray-6)',
-        fontWeight: active ? 600 : 500,
-        fontSize: rem(14),
-        whiteSpace: 'nowrap',
-        opacity: soon ? 0.55 : 1,
-        marginBottom: -1,
-      }}
-    >
-      <span>{label}</span>
-      {badge !== null && badge !== undefined && (
-        <Badge size="xs" variant="filled" color="red" radius="sm">
-          {badge}
-        </Badge>
-      )}
-      {withChevron && <IconChevronDown size={14} stroke={2} />}
-    </UnstyledButton>
-  );
-}
+/**
+ * `Menu.Target` positions its dropdown against the ref it passes to its child,
+ * so a plain function component here left every section menu anchored at the
+ * top-left of the viewport, covering the header instead of opening under the
+ * button that was clicked. The rest props carry Menu's own click and aria
+ * handling onto the real button.
+ */
+const TopNavButton = forwardRef<HTMLButtonElement, TopNavButtonProps>(
+  function TopNavButton(
+    { label, active, badge, soon, withChevron, onClick, ...others },
+    ref,
+  ) {
+    return (
+      <UnstyledButton
+        ref={ref}
+        onClick={onClick}
+        {...others}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: rem(6),
+          padding: `0 ${rem(14)}`,
+          height: '100%',
+          flexShrink: 0,
+          borderBottom: '2px solid',
+          borderBottomColor: active
+            ? 'var(--mantine-color-blue-6)'
+            : 'transparent',
+          color: active
+            ? 'var(--mantine-color-blue-6)'
+            : 'var(--mantine-color-gray-6)',
+          fontWeight: active ? 600 : 500,
+          fontSize: rem(14),
+          whiteSpace: 'nowrap',
+          opacity: soon ? 0.55 : 1,
+          marginBottom: -1,
+        }}
+      >
+        <span>{label}</span>
+        {badge !== null && badge !== undefined && (
+          <Badge size="xs" variant="filled" color="red" radius="sm">
+            {badge}
+          </Badge>
+        )}
+        {withChevron && <IconChevronDown size={14} stroke={2} />}
+      </UnstyledButton>
+    );
+  },
+);

package-lock.json

@@ -31,6 +31,7 @@
         "i18n-nationality": "^1.4.0",
         "i18next": "^25.6.0",
         "js-cookie": "^3.0.8",
+        "libphonenumber-js": "^1.13.11",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.71.2",
@@ -44,6 +45,8 @@
         "zod": "^4.3.6"
       },
       "devDependencies": {
+        "@eslint/eslintrc": "3.3.6",
+        "@eslint/js": "^10.0.1",
         "@nx/eslint": "^22.5.4",
         "@nx/eslint-plugin": "^22.5.4",
         "@nx/react": "^22.5.4",
@@ -2799,16 +2802,24 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.5",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.5.tgz",
-      "integrity": "sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
     "node_modules/@eslint/object-schema": {
@@ -3858,9 +3869,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3881,9 +3889,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3904,9 +3909,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3927,9 +3929,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3950,9 +3949,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4013,9 +4009,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4299,9 +4292,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4316,9 +4306,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4333,9 +4320,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4350,9 +4334,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6512,9 +6493,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6528,9 +6506,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6544,9 +6519,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6560,9 +6532,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6576,9 +6545,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6592,9 +6558,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6608,9 +6571,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6624,9 +6584,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6640,9 +6597,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6656,9 +6610,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6672,9 +6623,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6688,9 +6636,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6704,9 +6649,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6846,9 +6788,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6863,9 +6802,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6880,9 +6816,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6897,9 +6830,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7515,9 +7445,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7534,9 +7461,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7553,9 +7477,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7572,9 +7493,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8182,6 +8100,18 @@
         "undici-types": "~7.18.0"
       }
     },
+    "node_modules/@tria-plc/iamui/node_modules/@types/react": {
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
     "node_modules/@tria-plc/iamui/node_modules/date-fns": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -11232,7 +11162,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -11565,6 +11495,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "9.39.5",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.5.tgz",
+      "integrity": "sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
     "node_modules/eslint/node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -12878,7 +12821,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -13484,6 +13427,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.13.11",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.13.11.tgz",
+      "integrity": "sha512-ETER2kMaIFTI/Nh1a8Gk03dUF/SL0VZqtI+CcVHZxp5WIHYwNS7S+uiYZDYCvLy3lOR4/DAD5jf0h5WkePPpqg==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -13620,9 +13569,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -13643,9 +13589,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -13666,9 +13609,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -13689,9 +13629,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -17072,7 +17009,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/sax": {

pnpm-workspace.yaml

@@ -1,3 +1,7 @@
+packages:
+  - 'apps/*'
+  - 'libs/*'
+
 allowBuilds:
   canvas: set this to true or false
   core-js: set this to true or false

scripts/deploy/sync-env-from-env-manager.sh

@@ -0,0 +1,80 @@
+#!/usr/bin/env bash
+# Sync .env files from the Env Manager API into the repo.
+#
+# Usage:
+#   ENV_MANAGER_TOKEN=xxx ./scripts/deploy/sync-env-from-server.sh freight-api freight-portal freight-backoffice
+#
+# You normally only need to pass the token via the action secret, and BRANCH
+# via the job-level env (e.g. `BRANCH: ${{ github.ref_name }}` in the workflow):
+#   env:
+#     BRANCH: ${{ github.ref_name }}
+#     ENV_MANAGER_TOKEN: ${{ secrets.ENV_MANAGER_TOKEN }}
+#
+# API layout (one endpoint per service):
+#   GET https://env.smart.aaca.gov.et/api/env/edr/<branch>/<service>?format=dotenv
+#   Header: Authorization: Bearer <ENV_MANAGER_TOKEN>
+set -euo pipefail
+
+PROJECT="ema"
+ENV_MANAGER_URL="https://env.smart.aaca.gov.et"
+BRANCH="${BRANCH:?BRANCH is required}"
+ENV_MANAGER_TOKEN="${ENV_MANAGER_TOKEN:?ENV_MANAGER_TOKEN is required}"
+
+declare -A SERVICE_ENV_TARGET=(
+  ["ema_portal"]="apps/portal/.env"
+  ["ema_backoffice"]="apps/backoffice/.env"
+)
+
+for service in "$@"; do
+  branch_api_name="${BRANCH//-/_}"
+  service_api_name="${service//-/_}"
+  dest="${SERVICE_ENV_TARGET[${service_api_name}]:-}"
+  if [[ -z "${dest}" ]]; then
+    echo "Unknown service: ${service}" >&2
+    exit 1
+  fi
+
+  url="${ENV_MANAGER_URL}/api/env/${PROJECT}/${branch_api_name}/${service_api_name}?format=dotenv"
+  mkdir -p "$(dirname "${dest}")"
+
+  tmp_file="$(mktemp)"
+  trap 'rm -f "${tmp_file}"' RETURN 2>/dev/null || true
+
+  http_status=$(curl -fsS -o "${tmp_file}" -w "%{http_code}" \
+    -H "Authorization: Bearer ${ENV_MANAGER_TOKEN}" \
+    "${url}") || {
+      echo "Failed to fetch env for '${service}' from ${url}" >&2
+      rm -f "${tmp_file}"
+      exit 1
+    }
+
+  if [[ "${http_status}" != "200" ]]; then
+    echo "Env Manager returned HTTP ${http_status} for '${service}' (${url})" >&2
+    rm -f "${tmp_file}"
+    exit 1
+  fi
+
+  if [[ ! -s "${tmp_file}" ]]; then
+    echo "Env Manager returned an empty response for '${service}' (${url})" >&2
+    rm -f "${tmp_file}"
+    exit 1
+  fi
+
+  mv "${tmp_file}" "${dest}"
+  echo "Synced ${url} -> ${dest}"
+
+  port_value=$(sed -n -E 's/^[[:space:]]*PORT[[:space:]]*=[[:space:]]*"?([^"#]+)"?[[:space:]]*(#.*)?$/\1/p' "${dest}" | head -n1 | tr -d '[:space:]')
+  if [[ -z "${port_value}" ]]; then
+    echo "Missing required PORT in env file for '${service}' (${dest})" >&2
+    exit 1
+  fi
+
+  if [[ -n "${GITHUB_ENV:-}" ]]; then
+    service_var=$(echo "${service}" | tr '[:lower:]-' '[:upper:]_')
+    echo "${service_var}_PORT=${port_value}" >> "${GITHUB_ENV}"
+    echo "Exported ${service_var}_PORT from ${dest}"
+    # Forward NEXT_PUBLIC_* and VITE_* vars so docker compose build can inject them as build args.
+    grep -E '^[[:space:]]*(NEXT_PUBLIC_|VITE_)[A-Za-z0-9_]+=' "${dest}" \
+      | sed -E 's/^[[:space:]]*//' >> "${GITHUB_ENV}" || true
+  fi
+done