Merge branch 'WorkflowChange' into logestic_chnage

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 />) },