From def6218dbfe52db4155f09b7667dd40b1a10daef Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Thu, 27 Aug 2026 07:50:43 +0000
Subject: [PATCH 01/16] fix: show inspection-failed alert at page level, not
 inside the inspection tab

A license type configured without an inspection detail section (e.g. vessel
ownership transfer) would hide the "approval blocked" explanation entirely if
it ever reached INSPECTION_FAILED. The alert now renders beside the other
page-level status notices, so the reason is visible regardless of which detail
sections the type declares.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../pages/LicenseReviewPage/index.tsx         | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
index 71a13403a..23311a189 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -1077,18 +1077,6 @@ 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">
@@ -1136,6 +1124,18 @@ export function LicenseReviewPage() {
             </Tabs.Panel>
           </Tabs>
 
+          {/* Page-level, not inside the inspection tab: a license type
+              configured without an inspection detail section must still show
+              why approval is blocked if it ever lands here. */}
+          {status === "INSPECTION_FAILED" && (
+            <Alert mt="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>
+          )}
+
           {status === "PAYMENT_PENDING" && (
             <Alert
               mt="md"

From 3d7bd99b4b3d5ba2e102960b98a670c00d3398cf Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Thu, 27 Aug 2026 08:16:20 +0000
Subject: [PATCH 02/16] style: update component background and icon colors to
 use semantic theme variables

---
 .../certificate-requirements/components/ConditionBuilder.tsx  | 2 +-
 .../components/DocumentRequirementsTab.tsx                    | 2 +-
 .../certificate-requirements/components/FormSchemaTab.tsx     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
index b1192fca2..7c016bd76 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
@@ -198,7 +198,7 @@ function ConditionArmFields({
               fz="xs"
               px={6}
               py={2}
-              bg="var(--mantine-color-gray-1)"
+              bg="var(--mantine-color-default-hover)"
               style={{ borderRadius: 4, cursor: 'pointer' }}
               onClick={() => setInValues((value.in ?? []).filter((_, idx) => idx !== i).map(String))}
               title={t('certReq.condition.removeValue', 'Click to remove')}
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
index 05680009d..033795186 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
@@ -127,7 +127,7 @@ export function DocumentRequirementsTab({ licenseType }: { licenseType: LicenseT
             ) : (
               <Stack gap="xs">
                 {rows.map((req) => (
-                  <Card key={req.id} withBorder radius="sm" p="xs" bg="var(--mantine-color-gray-0)">
+                  <Card key={req.id} withBorder radius="sm" p="xs" bg="var(--mantine-color-default-hover)">
                     <Group justify="space-between" wrap="nowrap">
                       <div style={{ minWidth: 0 }}>
                         <Group gap={6}>
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
index ddeb712f1..f103b43d4 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
@@ -209,7 +209,7 @@ export function FormSchemaTab({ licenseType }: { licenseType: LicenseType }) {
             <Card key={section.key} withBorder radius="md" p="md">
               <Group justify="space-between" align="flex-start" mb="sm">
                 <Group gap="xs" wrap="nowrap">
-                  <IconGripVertical size={16} color="var(--mantine-color-gray-5)" />
+                  <IconGripVertical size={16} color="var(--mantine-color-dimmed)" />
                   <div>
                     <Group gap="xs">
                       <Text fw={700}>{localized(section.title) || section.key}</Text>
@@ -237,7 +237,7 @@ export function FormSchemaTab({ licenseType }: { licenseType: LicenseType }) {
 
               <Stack gap="xs">
                 {section.fields.map((field, fIndex) => (
-                  <Card key={field.key} withBorder radius="sm" p="xs" bg="var(--mantine-color-gray-0)">
+                  <Card key={field.key} withBorder radius="sm" p="xs" bg="var(--mantine-color-default-hover)">
                     <Group justify="space-between" wrap="nowrap">
                       <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
                         <div style={{ minWidth: 0 }}>

From 88a1caa52b6dea89e1c0761e457380a16e0af14d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Thu, 27 Aug 2026 12:29:54 +0000
Subject: [PATCH 03/16] feat: add sorting support to seafarer registration
 query and default queue to newest first

---
 .../pages/SeafarerRegistrationQueuePage.tsx               | 4 +++-
 .../seafarer-registration/seafarer-registration-api.ts    | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage.tsx b/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage.tsx
index 4a3787697..7c978f38d 100644
--- a/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage.tsx
@@ -26,7 +26,7 @@ export function applicantName(r: Pick<SeafarerRegistration, 'firstName' | 'middl
   return [r.firstName, r.middleName, r.lastName].filter(Boolean).join(' ') || '—';
 }
 
-/** Submitted seafarer registrations, oldest first — click a row to review it. */
+/** Submitted seafarer registrations, newest first — click a row to review it. */
 export function SeafarerRegistrationQueuePage() {
   const navigate = useNavigate();
   const showDate = useDateDisplayer();
@@ -43,6 +43,8 @@ export function SeafarerRegistrationQueuePage() {
   const { data, isLoading, isFetching, refetch } = useListSeafarerRegistrationsQuery({
     status: status ?? undefined,
     search: debouncedSearch || undefined,
+    sortBy: 'submittedAt',
+    sortDir: 'DESC',
     take: pageSize,
     skip: page * pageSize,
   });
diff --git a/libs/api/src/lib/features/seafarer-registration/seafarer-registration-api.ts b/libs/api/src/lib/features/seafarer-registration/seafarer-registration-api.ts
index 4b42681eb..87f5fef15 100644
--- a/libs/api/src/lib/features/seafarer-registration/seafarer-registration-api.ts
+++ b/libs/api/src/lib/features/seafarer-registration/seafarer-registration-api.ts
@@ -10,9 +10,17 @@ const TAG = 'SeafarerRegistration' as const;
 const LIST = { type: TAG, id: 'LIST' } as const;
 const item = (id: string) => ({ type: TAG, id }) as const;
 
+export type SeafarerRegistrationSortField =
+  | 'submittedAt'
+  | 'registrationNumber'
+  | 'lastName'
+  | 'status';
+
 export interface SeafarerRegistrationListFilter {
   status?: SeafarerRegistrationStatus;
   search?: string;
+  sortBy?: SeafarerRegistrationSortField;
+  sortDir?: 'ASC' | 'DESC';
   take?: number;
   skip?: number;
 }

From e86375e7619908f20f367753802287e32742b2c4 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Thu, 27 Aug 2026 12:37:04 +0000
Subject: [PATCH 04/16] refactor: update application locking logic to handle
 staff remarks and itemized rounds

---
 .../pages/LicenseApplicationPage.tsx          | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
index 30b801ab3..ac497f5f7 100644
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -352,14 +352,18 @@ export function LicenseApplicationPage() {
       ),
     [roundRemarks],
   );
-  const hasSectionRemarks = Object.keys(flaggedSections).length > 0;
-  const hasDocRemarks = Object.keys(flaggedDocuments).length > 0;
+  const hasStaffRemarks = roundRemarks.some((r) => r.targetType === "STAFF");
+  // Nothing at all came back for this round (a detail response that predates
+  // the remarks, say) — lock nothing rather than freeze the whole application
+  // with no way forward. Any remark present means the round is itemised, so
+  // only what the officer flagged opens: a documents-only round leaves every
+  // form section frozen, and a sections-only round leaves every document as
+  // filed.
+  const roundIsItemised = isAdjusting && roundRemarks.length > 0;
 
-  // A round that flagged no form sections carries no section locks — mirror of
-  // the server's fallback, without which a documents-only correction round
-  // froze every field and the applicant could not edit anything at all.
   const isSectionLocked = (sectionKey: string) =>
-    isAdjusting && hasSectionRemarks && !flaggedSections[sectionKey];
+    roundIsItemised && !flaggedSections[sectionKey];
+  const staffLocked = roundIsItemised && !hasStaffRemarks;
 
   // Sections that share a group collapse onto one step, so the stepper stays
   // short instead of showing a page per section.
@@ -862,7 +866,7 @@ export function LicenseApplicationPage() {
                             complete
                           </Badge>
                         )}
-                        {!readOnly && (
+                        {!readOnly && !staffLocked && (
                           <Button
                             size="xs"
                             variant="light"
@@ -898,7 +902,7 @@ export function LicenseApplicationPage() {
                                   : ""}
                               </Text>
                             </div>
-                            {!readOnly && (
+                            {!readOnly && !staffLocked && (
                               <ActionIcon
                                 variant="subtle"
                                 color="red"
@@ -917,7 +921,7 @@ export function LicenseApplicationPage() {
                           <StaffEvidence
                             staffId={member.id}
                             evidence={role.requiredEvidence}
-                            readOnly={readOnly}
+                            readOnly={readOnly || staffLocked}
                             onUploaded={refetch}
                           />
                         </Card>
@@ -937,7 +941,7 @@ export function LicenseApplicationPage() {
               ownerType="APPLICATION"
               ownerId={appId}
               flagged={flaggedDocuments}
-              restrictToFlagged={isAdjusting && hasDocRemarks}
+              restrictToFlagged={roundIsItemised}
               readOnly={readOnly}
               onUploaded={() => {
                 refetchAttachments();

From 822abe4de40c8e6a6aef3cb04afba2253bc00e5f Mon Sep 17 00:00:00 2001
From: Nati <natinigussie7@gmail.com>
Date: Fri, 28 Aug 2026 06:45:47 +0000
Subject: [PATCH 05/16] feat(biometric-enrollment): add biometric enrollment
 feature with API integration and UI components

---
 .../pages/BiometricEnrollmentPage.tsx         | 253 ++++++++++++++++++
 apps/backoffice/src/app/i18n/locales/am.ts    |   1 +
 apps/backoffice/src/app/i18n/locales/en.ts    |   1 +
 apps/backoffice/src/app/layouts/nav-config.ts |   2 +
 apps/backoffice/src/app/router/index.tsx      |   2 +
 libs/api/src/index.ts                         |   1 +
 .../biometric-enrollment-api.ts               |  44 +++
 .../biometric-enrollment.types.ts             |  32 +++
 .../features/biometric-enrollment/index.ts    |   2 +
 libs/auth/src/lib/permissions.constants.ts    |   2 +
 10 files changed, 340 insertions(+)
 create mode 100644 apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
 create mode 100644 libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
 create mode 100644 libs/api/src/lib/features/biometric-enrollment/biometric-enrollment.types.ts
 create mode 100644 libs/api/src/lib/features/biometric-enrollment/index.ts

diff --git a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
new file mode 100644
index 000000000..87f56fbfa
--- /dev/null
+++ b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
@@ -0,0 +1,253 @@
+import { useMemo, useState } from 'react';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Group,
+  Loader,
+  Select,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  ThemeIcon,
+} from '@mantine/core';
+import { IconAlertTriangle, IconFingerprint, IconPrinter, IconScan, IconSearch, IconX } from '@tabler/icons-react';
+import { useDebouncedValue } from '@mantine/hooks';
+import {
+  extractErrorMessage,
+  openAuthedDocument,
+  useEnrollBiometricMutation,
+  useGetBiometricEnrollmentsQuery,
+  useListSeafarerRegistrationsQuery,
+  useRevokeBiometricEnrollmentMutation,
+  type BiometricModality,
+  type SeafarerRegistration,
+} from '@ema-platform/api';
+import { notify, PageHeader, StatusBadge } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
+
+const MODALITIES: { value: BiometricModality; label: string }[] = [
+  { value: 'FINGERPRINT', label: 'Fingerprint' },
+  { value: 'FACE', label: 'Face' },
+];
+
+function applicantName(r: Pick<SeafarerRegistration, 'firstName' | 'middleName' | 'lastName'>): string {
+  return [r.firstName, r.middleName, r.lastName].filter(Boolean).join(' ') || '—';
+}
+
+/**
+ * No scanner is wired yet (US-BIO placeholder): "Simulate Scan" stands in for
+ * the real vendor SDK capture, producing a random template so the rest of the
+ * pipeline — encrypt, store, print — is exercisable end to end. Swap the
+ * simulated bytes for the SDK's real template once a vendor is chosen; the
+ * API call shape (base64 template + format tag) does not change.
+ */
+function fakeTemplate(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(64));
+  return btoa(String.fromCharCode(...bytes));
+}
+
+/** Pick a registered seafarer to enroll — approved registrations carry a profileId. */
+function ProfilePicker({ onPick }: { onPick: (r: SeafarerRegistration) => void }) {
+  const [search, setSearch] = useState('');
+  const [debounced] = useDebouncedValue(search, 300);
+  const { data, isFetching } = useListSeafarerRegistrationsQuery({
+    status: 'APPROVED',
+    search: debounced || undefined,
+    take: 10,
+  });
+
+  return (
+    <Card withBorder radius="md" p="md">
+      <TextInput
+        placeholder="Search seafarer by name, ID or registration number…"
+        leftSection={<IconSearch size={14} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+        mb="sm"
+      />
+      {isFetching && <Loader size="sm" />}
+      <Table highlightOnHover fz="sm">
+        <Table.Tbody>
+          {(data?.items ?? []).map((r) => (
+            <Table.Tr key={r.id} onClick={() => onPick(r)} style={{ cursor: 'pointer' }}>
+              <Table.Td>
+                <Text fz="sm" fw={600}>{applicantName(r)}</Text>
+                <Text fz="xs" c="dimmed" ff="monospace">{r.seafarerNumber}</Text>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+          {!isFetching && (data?.items ?? []).length === 0 && (
+            <Table.Tr>
+              <Table.Td>
+                <Text fz="sm" c="dimmed">No registered seafarer matches.</Text>
+              </Table.Td>
+            </Table.Tr>
+          )}
+        </Table.Tbody>
+      </Table>
+    </Card>
+  );
+}
+
+/** Backoffice counter screen: enroll a scanner capture against a profile, view what's on file, print the slip. */
+export function BiometricEnrollmentPage() {
+  const showDate = useDateDisplayer();
+  const [selected, setSelected] = useState<SeafarerRegistration | null>(null);
+  const [modality, setModality] = useState<BiometricModality>('FINGERPRINT');
+  const [deviceId, setDeviceId] = useState('');
+
+  const profileId = selected?.profileId ?? '';
+  const { data: enrollments, isLoading } = useGetBiometricEnrollmentsQuery(profileId, { skip: !profileId });
+  const [enroll, { isLoading: enrolling }] = useEnrollBiometricMutation();
+  const [revoke, { isLoading: revoking }] = useRevokeBiometricEnrollmentMutation();
+  const [printing, setPrinting] = useState(false);
+
+  const hasActive = useMemo(
+    () => (m: BiometricModality) => (enrollments ?? []).some((e) => e.modality === m),
+    [enrollments],
+  );
+
+  async function handleEnroll() {
+    if (!profileId) return;
+    try {
+      await enroll({
+        profileId,
+        modality,
+        template: fakeTemplate(),
+        templateFormat: 'SIMULATED',
+        deviceId: deviceId || undefined,
+        consentAt: new Date().toISOString(),
+      }).unwrap();
+      notify.success(`${modality === 'FINGERPRINT' ? 'Fingerprint' : 'Face'} enrolled.`);
+    } catch (err) {
+      notify.error(extractErrorMessage(err, 'Enrollment failed.'));
+    }
+  }
+
+  async function handleRevoke(id: string) {
+    if (!profileId) return;
+    try {
+      await revoke({ id, profileId, reason: 'Withdrawn at counter' }).unwrap();
+      notify.success('Enrollment revoked.');
+    } catch (err) {
+      notify.error(extractErrorMessage(err, 'Could not revoke.'));
+    }
+  }
+
+  async function handlePrint() {
+    if (!profileId) return;
+    setPrinting(true);
+    try {
+      await openAuthedDocument(
+        `/biometric-enrollments/profile/${profileId}/certificate`,
+        `biometric-enrollment-${profileId}.pdf`,
+      );
+    } catch (err) {
+      notify.error(extractErrorMessage(err, 'Could not open the certificate.'));
+    } finally {
+      setPrinting(false);
+    }
+  }
+
+  return (
+    <Container size="md" py="md">
+      <PageHeader
+        title="Biometric Enrollment"
+        subtitle="Capture a fingerprint or face template for a registered seafarer, and print the enrollment slip."
+      />
+
+      {!selected ? (
+        <ProfilePicker onPick={setSelected} />
+      ) : (
+        <Stack gap="md">
+          <Card withBorder radius="md" p="md">
+            <Group justify="space-between">
+              <div>
+                <Text fw={600}>{applicantName(selected)}</Text>
+                <Text fz="xs" c="dimmed" ff="monospace">{selected.seafarerNumber}</Text>
+              </div>
+              <Button variant="subtle" size="xs" leftSection={<IconX size={14} />} onClick={() => setSelected(null)}>
+                Change seafarer
+              </Button>
+            </Group>
+          </Card>
+
+          <Card withBorder radius="md" p="md">
+            <Text fz="sm" fw={600} mb="sm">Capture</Text>
+            <Alert color="yellow" icon={<IconAlertTriangle size={16} />} mb="sm" variant="light">
+              No scanner is wired yet — this simulates a capture so the rest of the flow can be tested.
+            </Alert>
+            <Group align="flex-end">
+              <Select label="Modality" data={MODALITIES} value={modality} onChange={(v) => setModality((v as BiometricModality) ?? 'FINGERPRINT')} w={160} />
+              <TextInput label="Device (optional)" placeholder="scanner-01" value={deviceId} onChange={(e) => setDeviceId(e.currentTarget.value)} w={180} />
+              <Button leftSection={<IconScan size={16} />} onClick={handleEnroll} loading={enrolling}>
+                Simulate Scan &amp; Enroll
+              </Button>
+            </Group>
+          </Card>
+
+          <Card withBorder radius="md" p="md">
+            <Group justify="space-between" mb="sm">
+              <Text fz="sm" fw={600}>On file</Text>
+              <Button
+                variant="light"
+                size="xs"
+                leftSection={<IconPrinter size={14} />}
+                onClick={handlePrint}
+                loading={printing}
+              >
+                Print certificate
+              </Button>
+            </Group>
+            {isLoading ? (
+              <Loader size="sm" />
+            ) : (
+              <Stack gap="xs">
+                {MODALITIES.map((m) => (
+                  <Group key={m.value} justify="space-between" p="xs" style={{ borderRadius: 8, background: 'var(--mantine-color-default-hover)' }}>
+                    <Group gap="xs">
+                      <ThemeIcon variant="light" color={hasActive(m.value) ? 'teal' : 'gray'} size={30} radius="md">
+                        <IconFingerprint size={15} />
+                      </ThemeIcon>
+                      <Text fz="sm">{m.label}</Text>
+                    </Group>
+                    {hasActive(m.value) ? (
+                      <Group gap="xs">
+                        <StatusBadge tone="success" label="Enrolled" />
+                        <Button
+                          size="xs"
+                          color="red"
+                          variant="subtle"
+                          loading={revoking}
+                          onClick={() => {
+                            const row = (enrollments ?? []).find((e) => e.modality === m.value);
+                            if (row) handleRevoke(row.id);
+                          }}
+                        >
+                          Revoke
+                        </Button>
+                      </Group>
+                    ) : (
+                      <Badge color="gray" variant="light">Not enrolled</Badge>
+                    )}
+                  </Group>
+                ))}
+                {(enrollments ?? []).map((e) => (
+                  <Text key={e.id} fz="xs" c="dimmed">
+                    {e.modality} captured {showDate(e.enrolledAt)}{e.deviceId ? ` · ${e.deviceId}` : ''}
+                  </Text>
+                ))}
+              </Stack>
+            )}
+          </Card>
+        </Stack>
+      )}
+    </Container>
+  );
+}
+
+export default BiometricEnrollmentPage;
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 94622fa47..672c771a1 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -93,6 +93,7 @@ export const am: Translations = {
     // vesselRegistrationReport: 'የምዝገባ ሪፖርት',
     vesselTransfers: "የመርከብ ባለቤትነት ዝውውር",
     seafarerRegistry: "የመርከበኞች መዝገብ",
+    biometricEnrollment: "ባዮሜትሪክ ምዝገባ",
     seafarerRegistrationQueue: "የመርከበኞች ምዝገባ ወረፋ",
     applications: "ማመልከቻዎች",
     paymentConfig: "የክፍያ ውቅረት",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index e98459f58..197ff06f8 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -92,6 +92,7 @@ export const en = {
     vesselRegistrations: 'Vessel Registration',
     vesselTransfers: 'Vessel Ownership Transfer',
     seafarerRegistry: 'Seafarer Registry',
+    biometricEnrollment: 'Biometric Enrollment',
     seafarerRegistrationQueue: 'Seafarer Registration Queue',
     applications: 'Applications',
     paymentConfig: 'Payment Config',
diff --git a/apps/backoffice/src/app/layouts/nav-config.ts b/apps/backoffice/src/app/layouts/nav-config.ts
index 969e7d0f9..3122c22a2 100644
--- a/apps/backoffice/src/app/layouts/nav-config.ts
+++ b/apps/backoffice/src/app/layouts/nav-config.ts
@@ -8,6 +8,7 @@ import {
   IconCreditCard,
   IconFileDescription,
   IconFilePlus,
+  IconFingerprint,
   IconGauge,
   IconGavel,
   IconHeart,
@@ -96,6 +97,7 @@ export const NAV_SECTIONS: NavSection[] = [
     label: 'nav.groupSeafarer',
     items: [
       { to: '/seafarer-registry', label: 'nav.seafarerRegistry', icon: IconUsers, permissions: [P.VIEW_SEAFARER_REGISTRY] },
+      { to: '/biometric-enrollment', label: 'nav.biometricEnrollment', icon: IconFingerprint, permissions: [P.ENROLL_BIOMETRICS, P.VIEW_BIOMETRICS] },
       { to: '/seafarer-registrations', label: 'nav.seafarerRegistrationQueue', icon: IconId, permissions: [P.VIEW_SEAFARER_REGISTRY] },
       { to: '/licence-review/type/CERTIFICATE_OF_COMPETENCY', label: 'nav.cocQueue', icon: IconShieldCheck, permissions: [P.VIEW_SEAFARER_REGISTRY] },
       { to: '/licence-review/type/CERTIFICATE_OF_PROFICIENCY', label: 'nav.copQueue', icon: IconShieldCheck, permissions: [P.VIEW_SEAFARER_REGISTRY] },
diff --git a/apps/backoffice/src/app/router/index.tsx b/apps/backoffice/src/app/router/index.tsx
index dde6d1e2e..46f0879f0 100644
--- a/apps/backoffice/src/app/router/index.tsx
+++ b/apps/backoffice/src/app/router/index.tsx
@@ -48,6 +48,7 @@ import { LicenseReviewPage } from '../features/license-review/pages/LicenseRevie
 import { LogisticsHeadDashboardPage } from '../features/logistics-head/pages/LogisticsHeadDashboardPage';
 import { CertificateDesignerPage } from '../features/certificate-designer/pages/CertificateDesignerPage';
 import { CertificateRequirementsPage } from '../features/certificate-requirements/pages/CertificateRequirementsPage';
+import { BiometricEnrollmentPage } from '../features/biometric-enrollment/pages/BiometricEnrollmentPage';
 
 /** Any-of gate shared by every licence-type queue and its review workspace. */
 const APPLICATION_QUEUE = [P.VIEW_APPLICATION_QUEUE, P.VIEW_APPLICATIONS];
@@ -100,6 +101,7 @@ const router = createBrowserRouter([
           { path: 'sea-service-verification', element: guard([P.VERIFY_SEAFARER_RECORDS], <SeaServiceVerificationPage />) },
           { path: 'payment-config', element: guard([P.VIEW_PAYMENTS], <PaymentConfigPage />) },
           { path: 'seafarer-registry', element: guard([P.VIEW_SEAFARER_REGISTRY], <SeafarerRegistryPage />) },
+          { path: 'biometric-enrollment', element: guard([P.ENROLL_BIOMETRICS, P.VIEW_BIOMETRICS], <BiometricEnrollmentPage />) },
           // Seafarer registration is not a licence: own queue, own review.
           { path: 'seafarer-registrations', element: guard(APPLICATION_QUEUE, <SeafarerRegistrationQueuePage />) },
           { path: 'seafarer-registrations/:id', element: guard(APPLICATION_QUEUE, <SeafarerRegistrationReviewPage />) },
diff --git a/libs/api/src/index.ts b/libs/api/src/index.ts
index 903012532..558be9a7a 100644
--- a/libs/api/src/index.ts
+++ b/libs/api/src/index.ts
@@ -6,6 +6,7 @@ export * from './lib/features/location';
 export * from './lib/features/seafarer';
 export * from './lib/features/seafarer-registration';
 export * from './lib/features/seafarer-document';
+export * from './lib/features/biometric-enrollment';
 export * from './lib/features/vessel';
 export { baseQueryWithReauth, configureTokenRefresh } from './lib/base-api/base-query-with-reauth';
 export { openAuthedDocument, downloadAuthedFile } from './lib/base-api/download';
diff --git a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
new file mode 100644
index 000000000..fd10cec4f
--- /dev/null
+++ b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
@@ -0,0 +1,44 @@
+import { baseApi } from '../../base-api';
+import type { BiometricEnrollment, EnrollBiometric } from './biometric-enrollment.types';
+
+const TAG = 'BiometricEnrollment' as const;
+const forProfile = (profileId: string) => ({ type: TAG, id: profileId }) as const;
+
+/**
+ * Scanner capture (fingerprint, face) stored per profile. No applicant-facing
+ * endpoint — enrollment happens at a counter with a scanner.
+ */
+export const biometricEnrollmentApi = baseApi
+  .enhanceEndpoints({ addTagTypes: [TAG] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      enrollBiometric: builder.mutation<BiometricEnrollment, EnrollBiometric>({
+        query: (body) => ({ url: '/biometric-enrollments', method: 'POST', body }),
+        invalidatesTags: (r, error) => (error || !r ? [] : [forProfile(r.profileId)]),
+      }),
+
+      getBiometricEnrollments: builder.query<BiometricEnrollment[], string>({
+        query: (profileId) => ({ url: `/biometric-enrollments/profile/${profileId}` }),
+        providesTags: (_r, _e, profileId) => [forProfile(profileId)],
+      }),
+
+      revokeBiometricEnrollment: builder.mutation<
+        BiometricEnrollment,
+        { id: string; profileId: string; reason: string }
+      >({
+        query: ({ id, reason }) => ({
+          url: `/biometric-enrollments/${id}/revoke`,
+          method: 'POST',
+          body: { reason },
+        }),
+        invalidatesTags: (_r, error, { profileId }) => (error ? [] : [forProfile(profileId)]),
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+export const {
+  useEnrollBiometricMutation,
+  useGetBiometricEnrollmentsQuery,
+  useRevokeBiometricEnrollmentMutation,
+} = biometricEnrollmentApi;
diff --git a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment.types.ts b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment.types.ts
new file mode 100644
index 000000000..d70322672
--- /dev/null
+++ b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment.types.ts
@@ -0,0 +1,32 @@
+export type BiometricModality = 'FINGERPRINT' | 'FACE';
+export type BiometricEnrollmentStatus = 'ACTIVE' | 'REVOKED';
+
+export interface BiometricEnrollment {
+  id: string;
+  profileId: string;
+  modality: BiometricModality;
+  templateFormat: string;
+  qualityScore: number | null;
+  deviceId: string | null;
+  status: BiometricEnrollmentStatus;
+  enrolledById: string;
+  enrolledAt: string;
+  consentAt: string;
+  revokedReason: string | null;
+  revokedById: string | null;
+  revokedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface EnrollBiometric {
+  profileId: string;
+  modality: BiometricModality;
+  /** Vendor SDK template, base64. Never the raw scan image. */
+  template: string;
+  templateFormat: string;
+  qualityScore?: number;
+  deviceId?: string;
+  /** ISO 8601 — when the subject consented to capture. */
+  consentAt: string;
+}
diff --git a/libs/api/src/lib/features/biometric-enrollment/index.ts b/libs/api/src/lib/features/biometric-enrollment/index.ts
new file mode 100644
index 000000000..f824d5e0a
--- /dev/null
+++ b/libs/api/src/lib/features/biometric-enrollment/index.ts
@@ -0,0 +1,2 @@
+export * from './biometric-enrollment.types';
+export * from './biometric-enrollment-api';
diff --git a/libs/auth/src/lib/permissions.constants.ts b/libs/auth/src/lib/permissions.constants.ts
index 3ea7859c8..b09917649 100644
--- a/libs/auth/src/lib/permissions.constants.ts
+++ b/libs/auth/src/lib/permissions.constants.ts
@@ -47,6 +47,8 @@ export const LICENSE_PERMISSIONS = {
   MANAGE_SEAFARER_STATUS: "can:manage:seafarer-status",
   VIEW_SEAFARER_REGISTRY: "can:View:seafarer-registry",
   VERIFY_SEAFARER_RECORDS: "can:verify:seafarer-records",
+  ENROLL_BIOMETRICS: "can:enroll:biometrics",
+  VIEW_BIOMETRICS: "can:View:biometrics",
   VIEW_VESSEL_REGISTRY: "can:View:vessel-registry",
   MANAGE_VESSEL_STATUS: "can:manage:vessel-status",
   APPROVE_QUESTION: "can:approve:exam-question",

From 51627f991864385052f94071c208f272208b7b31 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 06:46:06 +0000
Subject: [PATCH 06/16] feat: add inspection rescheduling workflow and unlock
 dependencies for flagged document sections

---
 .../features/license-review/config/actions.ts |  18 ++
 .../pages/LicenseReviewPage/index.tsx         | 198 +++++++++++++-----
 apps/backoffice/src/app/i18n/locales/am.ts    |   5 +
 apps/backoffice/src/app/i18n/locales/en.ts    |   5 +
 apps/backoffice/vite.config.mts               |  20 +-
 .../licensing/components/DocumentSlots.tsx    |  13 +-
 .../pages/LicenseApplicationPage.tsx          |  31 ++-
 .../lib/features/licensing/licensing-api.ts   |  25 +++
 .../features/licensing/licensing.helpers.ts   |  43 ++++
 9 files changed, 295 insertions(+), 63 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/config/actions.ts b/apps/backoffice/src/app/features/license-review/config/actions.ts
index 8511b7b29..a5ac52faa 100644
--- a/apps/backoffice/src/app/features/license-review/config/actions.ts
+++ b/apps/backoffice/src/app/features/license-review/config/actions.ts
@@ -28,6 +28,7 @@ export type ActionId =
   | 'complete-review'
   | 'approve-documents'
   | 'schedule-inspection'
+  | 'reschedule-inspection'
   | 'record-inspection'
   | 'final-approve'
   | 'request-adjustment'
@@ -200,6 +201,17 @@ export const ACTIONS: ActionDefinition[] = [
     permissions: ['can:create:inspection'],
     emphasis: 'filled',
   },
+  {
+    id: 'reschedule-inspection',
+    tier: 'primary',
+    labelKey: 'review.actions.rescheduleInspection',
+    from: ['INSPECTION_PENDING', 'INSPECTION_FAILED'],
+    // Either permission: the team leader who booked the visit holds CREATE,
+    // the inspector who has to attend holds UPDATE, and both have a reason to
+    // move it. The server guards the same pair.
+    permissions: ['can:create:inspection', 'can:update:inspection'],
+    emphasis: 'light',
+  },
   {
     id: 'record-inspection',
     tier: 'primary',
@@ -441,6 +453,12 @@ export function resolveActions(ctx: ResolveContext): ResolvedAction[] {
       // one applies depends on whether an inspection is already booked.
       if (action.id === 'schedule-inspection' && ctx.hasPendingInspection) return [];
       if (action.id === 'record-inspection' && !ctx.hasPendingInspection) return [];
+      // The mirror of the scheduling gate: there is nothing to move until a
+      // visit is booked, and once one is, moving it is the officer's only
+      // option until the day arrives.
+      if (action.id === 'reschedule-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
diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
index 3c5b8f2f1..cfb2bf6ee 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -32,6 +32,7 @@ import {
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,
   IconPaperclip,
+  IconPencil,
   IconQuestionMark,
   IconX,
 } from "@tabler/icons-react";
@@ -70,6 +71,7 @@ import {
   useRequestAdjustmentMutation,
   useResumeApplicationMutation,
   useScheduleInspectionMutation,
+  useRescheduleInspectionMutation,
   useGetCertificateUrlForOfficerMutation,
   uploadDocument,
   type RemarkTargetType,
@@ -218,6 +220,7 @@ export function LicenseReviewPage() {
   const [finalApprove] = useFinalApproveMutation();
   const [rejectApplication] = useRejectApplicationMutation();
   const [scheduleInspection] = useScheduleInspectionMutation();
+  const [rescheduleInspection] = useRescheduleInspectionMutation();
   const [recordResult] = useRecordInspectionResultMutation();
   const [confirmPayment] = useConfirmPaymentMutation();
   const [scheduleIssuance] = useScheduleIssuanceMutation();
@@ -261,6 +264,9 @@ export function LicenseReviewPage() {
   const [inspectionTimeSlot, setInspectionTimeSlot] = useState<"MORNING" | "AFTERNOON">(
     "MORNING",
   );
+  /** The booking modal moves an existing visit rather than creating one. */
+  const [rescheduling, setRescheduling] = useState(false);
+  const [rescheduleReason, setRescheduleReason] = useState("");
   const [issuanceOpen, setIssuanceOpen] = useState(false);
   const [issuanceDate, setIssuanceDate] = useState("");
   const [resultOpen, setResultOpen] = useState(false);
@@ -311,10 +317,14 @@ export function LicenseReviewPage() {
 
   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.
+  // inspection_not_yet_due guard. The column holds a calendar day, so the
+  // comparison is between day strings in the authority's timezone: parsing
+  // "2026-08-28" as a Date would read it as UTC midnight, i.e. 03:00 in Addis.
   const inspectionNotYetDue = Boolean(
     pendingInspection?.scheduledDate &&
-      new Date(pendingInspection.scheduledDate) > new Date(),
+      new Intl.DateTimeFormat("en-CA", { timeZone: "Africa/Addis_Ababa" }).format(
+        new Date(),
+      ) < pendingInspection.scheduledDate.slice(0, 10),
   );
 
   const { data: findingsEvidence = [], refetch: refetchFindingsEvidence } =
@@ -558,12 +568,29 @@ export function LicenseReviewPage() {
     }
   }
 
+  /** Opens the booking modal seeded with the visit already on the books. */
+  function openReschedule() {
+    if (!pendingInspection) return;
+    setRescheduling(true);
+    setInspectionDate(pendingInspection.scheduledDate ?? "");
+    setInspectionTimeSlot(pendingInspection.timeSlot ?? "MORNING");
+    setRescheduleReason("");
+    setInspectionOpen(true);
+  }
+
   /** Actions with their own dedicated form open that; the rest confirm. */
   function handleAction(action: ResolvedAction) {
     switch (action.id) {
       case "schedule-inspection":
+        setRescheduling(false);
+        setInspectionDate("");
+        setInspectionTimeSlot("MORNING");
+        setRescheduleReason("");
         setInspectionOpen(true);
         return;
+      case "reschedule-inspection":
+        openReschedule();
+        return;
       case "schedule-issuance":
         setIssuanceOpen(true);
         return;
@@ -1246,21 +1273,48 @@ export function LicenseReviewPage() {
                             </Text>
                           )}
                         </div>
-                        <Badge
-                          variant="light"
-                          color={
-                            inspection.result === "FAILED" ? "red" : "teal"
-                          }
-                        >
-                          {inspection.result === "PASSED"
-                            ? t("review.passed", "Passed")
-                            : inspection.result === "FAILED"
-                              ? t("review.failed", "Failed")
-                              : t(
-                                  `review.inspectionStatus.${inspection.status}`,
-                                  inspection.status,
+                        <Group gap="xs">
+                          {inspection.status === "SCHEDULED" &&
+                            inspection.id === pendingInspection?.id &&
+                            can([
+                              "can:create:inspection",
+                              "can:update:inspection",
+                            ]) && (
+                              <Tooltip
+                                label={t(
+                                  "review.actions.rescheduleInspection",
+                                  "Reschedule inspection",
                                 )}
-                        </Badge>
+                              >
+                                <ActionIcon
+                                  variant="subtle"
+                                  size="sm"
+                                  aria-label={t(
+                                    "review.actions.rescheduleInspection",
+                                    "Reschedule inspection",
+                                  )}
+                                  onClick={openReschedule}
+                                >
+                                  <IconPencil size={16} />
+                                </ActionIcon>
+                              </Tooltip>
+                            )}
+                          <Badge
+                            variant="light"
+                            color={
+                              inspection.result === "FAILED" ? "red" : "teal"
+                            }
+                          >
+                            {inspection.result === "PASSED"
+                              ? t("review.passed", "Passed")
+                              : inspection.result === "FAILED"
+                                ? t("review.failed", "Failed")
+                                : t(
+                                    `review.inspectionStatus.${inspection.status}`,
+                                    inspection.status,
+                                  )}
+                          </Badge>
+                        </Group>
                       </Group>
                     ))}
                   </Stack>
@@ -1430,7 +1484,11 @@ export function LicenseReviewPage() {
       <Modal
         opened={inspectionOpen}
         onClose={() => setInspectionOpen(false)}
-        title={t("review.actions.scheduleInspection", "Schedule inspection")}
+        title={
+          rescheduling
+            ? t("review.actions.rescheduleInspection", "Reschedule inspection")
+            : t("review.actions.scheduleInspection", "Schedule inspection")
+        }
       >
         <Stack>
           <AmharicDatePicker
@@ -1446,36 +1504,72 @@ export function LicenseReviewPage() {
               { value: "AFTERNOON", label: t("review.afternoon", "Afternoon") },
             ]}
           />
+          {rescheduling && (
+            <Textarea
+              label={t("review.rescheduleReason", "Why is it moving?")}
+              description={t(
+                "review.rescheduleReasonHint",
+                "Kept in the audit trail and sent to the applicant.",
+              )}
+              value={rescheduleReason}
+              onChange={(e) => setRescheduleReason(e.currentTarget.value)}
+              autosize
+              minRows={2}
+            />
+          )}
           <ModalFooter>
+            {/* Mantine strips pointer events from a disabled control, so the
+                tooltip wraps a span — same trick as DecisionBar's ActionButton;
+                a disabled button must still say why. */}
             <Tooltip
               label={t("review.pickDate", "Pick a date first")}
               disabled={Boolean(inspectionDate)}
             >
-              <span>
-                <button type="button" hidden aria-hidden />
-              </span>
-            </Tooltip>
+              <span style={{ display: "inline-flex" }}>
             <ActionIcon
               variant="filled"
               size="lg"
               disabled={!inspectionDate}
-              aria-label={t("review.schedule", "Schedule")}
+              aria-label={
+                rescheduling
+                  ? t("review.reschedule", "Reschedule")
+                  : t("review.schedule", "Schedule")
+              }
               onClick={() =>
                 run(
                   async () => {
-                    await scheduleInspection({
-                      applicationId: id,
-                      scheduledDate: inspectionDate,
-                      timeSlot: inspectionTimeSlot,
-                    }).unwrap();
+                    if (rescheduling) {
+                      // Guarded by the action's own gate, which only offers
+                      // rescheduling while a booking exists.
+                      if (!pendingInspection) return;
+                      await rescheduleInspection({
+                        inspectionId: pendingInspection.id,
+                        applicationId: id,
+                        scheduledDate: inspectionDate,
+                        timeSlot: inspectionTimeSlot,
+                        ...(rescheduleReason.trim()
+                          ? { reason: rescheduleReason.trim() }
+                          : {}),
+                      }).unwrap();
+                    } else {
+                      await scheduleInspection({
+                        applicationId: id,
+                        scheduledDate: inspectionDate,
+                        timeSlot: inspectionTimeSlot,
+                      }).unwrap();
+                    }
                     setInspectionOpen(false);
                   },
-                  t("review.done.scheduled", "Inspection scheduled"),
+                  rescheduling
+                    ? t("review.done.rescheduled", "Inspection rescheduled")
+                    : t("review.done.scheduled", "Inspection scheduled"),
                 )
               }
             >
               <IconCheck size={18} />
             </ActionIcon>
+              </span>
+            </Tooltip>
           </ModalFooter>
         </Stack>
       </Modal>
@@ -1492,34 +1586,36 @@ export function LicenseReviewPage() {
             onChange={setIssuanceDate}
           />
           <ModalFooter>
+            {/* Span-wrapped like DecisionBar's ActionButton — Mantine strips
+                pointer events from a disabled control, and a disabled button
+                must still say why. */}
             <Tooltip
-              label={t("review.pickDate", "Pick a date and time first")}
+              label={t("review.pickDate", "Pick a date first")}
               disabled={Boolean(issuanceDate)}
             >
-              <span>
-                <button type="button" hidden aria-hidden />
+              <span style={{ display: "inline-flex" }}>
+                <ActionIcon
+                  variant="filled"
+                  size="lg"
+                  disabled={!issuanceDate}
+                  aria-label={t("review.schedule", "Schedule")}
+                  onClick={() =>
+                    run(
+                      async () => {
+                        await scheduleIssuance({
+                          id,
+                          scheduledDate: issuanceDate,
+                        }).unwrap();
+                        setIssuanceOpen(false);
+                      },
+                      t("review.done.scheduleIssuance", "Pickup scheduled"),
+                    )
+                  }
+                >
+                  <IconCheck size={18} />
+                </ActionIcon>
               </span>
             </Tooltip>
-            <ActionIcon
-              variant="filled"
-              size="lg"
-              disabled={!issuanceDate}
-              aria-label={t("review.schedule", "Schedule")}
-              onClick={() =>
-                run(
-                  async () => {
-                    await scheduleIssuance({
-                      id,
-                      scheduledDate: issuanceDate,
-                    }).unwrap();
-                    setIssuanceOpen(false);
-                  },
-                  t("review.done.scheduleIssuance", "Pickup scheduled"),
-                )
-              }
-            >
-              <IconCheck size={18} />
-            </ActionIcon>
           </ModalFooter>
         </Stack>
       </Modal>
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index feb26b9e8..dd093c079 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -986,6 +986,9 @@ export const am: Translations = {
     morning: "ጠዋት",
     afternoon: "ከሰዓት በኋላ",
     schedule: "ያዝ",
+    reschedule: "አዛውር",
+    rescheduleReason: "ለምን ይዛወራል?",
+    rescheduleReasonHint: "በኦዲት መዝገብ ውስጥ ተይዞ ለአመልካቹ ይላካል።",
     pickDate: "መጀመሪያ ቀን ይምረጡ",
     passed: "አልፏል",
     failed: "ወድቋል",
@@ -1022,6 +1025,7 @@ export const am: Translations = {
       completeReview: "ግምገማ አጠናቅቅ",
       approveDocuments: "ሰነዶችን አጽድቅ",
       scheduleInspection: "ምርመራ ያዝ",
+      rescheduleInspection: "ምርመራ አዛውር",
       recordInspection: "የምርመራ ውጤት መዝግብ",
       finalApprove: "አጽድቅ እና ስጥ",
       requestAdjustment: "ማስተካከያ ጠይቅ",
@@ -1175,6 +1179,7 @@ export const am: Translations = {
       assign: "እንደገና ተመድቧል",
       assignReviewer: "ግምገማ ተመድቧል",
       scheduled: "ምርመራ ተይዟል",
+      rescheduled: "ምርመራ ተዛውሯል",
       inspectionPassed: "ምርመራ አልፏል",
       inspectionFailed: "ምርመራ ወድቋል",
     },
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 79edd53d7..848a48603 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -995,6 +995,9 @@ export const en = {
     morning: 'Morning',
     afternoon: 'Afternoon',
     schedule: 'Schedule',
+    reschedule: 'Reschedule',
+    rescheduleReason: 'Why is it moving?',
+    rescheduleReasonHint: 'Kept in the audit trail and sent to the applicant.',
     pickDate: 'Pick a date first',
     passed: 'Passed',
     failed: 'Failed',
@@ -1031,6 +1034,7 @@ export const en = {
       completeReview: 'Complete review',
       approveDocuments: 'Approve documents',
       scheduleInspection: 'Schedule inspection',
+      rescheduleInspection: 'Reschedule inspection',
       recordInspection: 'Record inspection result',
       finalApprove: 'Approve & issue',
       requestAdjustment: 'Request adjustment',
@@ -1181,6 +1185,7 @@ export const en = {
       assign: 'Reassigned',
       assignReviewer: 'Review assigned',
       scheduled: 'Inspection scheduled',
+      rescheduled: 'Inspection rescheduled',
       inspectionPassed: 'Inspection passed',
       inspectionFailed: 'Inspection failed',
     },
diff --git a/apps/backoffice/vite.config.mts b/apps/backoffice/vite.config.mts
index 97ed5cae3..355a26fdf 100644
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -42,14 +42,14 @@ export default defineConfig({
     emptyOutDir: true,
     reportCompressedSize: true,
   },
-  // Unit tests for the pure helpers behind a screen (formatters, URL state).
-  // Component tests are deliberately not set up: nothing here renders React,
-  // so no jsdom environment or setup file is needed.
-  // test: {
-  //   watch: false,
-  //   globals: true,
-  //   environment: 'node',
-  //   include: ['src/**/*.spec.ts'],
-  //   reporters: ['default'],
-  // },
+  // Unit tests for the pure helpers behind a screen (formatters, URL state,
+  // queue views). Component tests are deliberately not set up: nothing here
+  // renders React, so no jsdom environment or setup file is needed.
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
+    reporters: ['default'],
+  },
 });
diff --git a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
index b0fb505ed..06a137b46 100644
--- a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
+++ b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
@@ -37,6 +37,12 @@ interface Props {
   flagged?: Record<string, string>;
   /** When set, only flagged slots accept a new upload. */
   restrictToFlagged?: boolean;
+  /**
+   * Requirement keys opened because a flagged section drives their condition —
+   * a category correction can make documents newly required, and those have to
+   * be uploadable even though the officer flagged no document.
+   */
+  alsoUnlocked?: string[];
   onUploaded: () => void;
   readOnly?: boolean;
 }
@@ -55,6 +61,7 @@ export function DocumentSlots({
   ownerId,
   flagged = {},
   restrictToFlagged = false,
+  alsoUnlocked = [],
   onUploaded,
   readOnly,
 }: Props) {
@@ -106,7 +113,11 @@ export function DocumentSlots({
         const uploaded = Boolean(existing?.files?.length);
         const fileUrl = existing?.files?.[0]?.url;
         const flagRemark = flagged[requirement.key];
-        const locked = readOnly || (restrictToFlagged && !flagRemark);
+        const locked =
+          readOnly ||
+          (restrictToFlagged &&
+            !flagRemark &&
+            !alsoUnlocked.includes(requirement.key));
 
         return (
           <Card
diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
index ac497f5f7..19b83b655 100644
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -32,6 +32,8 @@ import { useTranslation } from "react-i18next";
 import {
   buildWizardSteps,
   conditionHolds,
+  conditionSections,
+  sectionsDependingOn,
   extractErrorMessage,
   extractValidationIssues,
   useLocalized,
@@ -361,8 +363,34 @@ export function LicenseApplicationPage() {
   // filed.
   const roundIsItemised = isAdjusting && roundRemarks.length > 0;
 
+  // An answer the officer flagged can decide which fields *other* sections
+  // require — the vessel category is the live example. Freeze those and the
+  // applicant is shown newly-required fields they cannot fill, and cannot
+  // resubmit; the server unlocks them the same way.
+  const cascadeUnlocked = useMemo(
+    () =>
+      sectionsDependingOn(
+        config?.licenseType?.formSchema?.sections ?? [],
+        new Set(Object.keys(flaggedSections)),
+      ),
+    [config, flaggedSections],
+  );
+  const unlockedDocuments = useMemo(
+    () =>
+      (config?.documentRequirements ?? [])
+        .filter((requirement) =>
+          conditionSections(requirement.conditionExpression).some(
+            (sectionKey) => sectionKey in flaggedSections,
+          ),
+        )
+        .map((requirement) => requirement.key),
+    [config, flaggedSections],
+  );
+
   const isSectionLocked = (sectionKey: string) =>
-    roundIsItemised && !flaggedSections[sectionKey];
+    roundIsItemised &&
+    !flaggedSections[sectionKey] &&
+    !cascadeUnlocked.has(sectionKey);
   const staffLocked = roundIsItemised && !hasStaffRemarks;
 
   // Sections that share a group collapse onto one step, so the stepper stays
@@ -942,6 +970,7 @@ export function LicenseApplicationPage() {
               ownerId={appId}
               flagged={flaggedDocuments}
               restrictToFlagged={roundIsItemised}
+              alsoUnlocked={unlockedDocuments}
               readOnly={readOnly}
               onUploaded={() => {
                 refetchAttachments();
diff --git a/libs/api/src/lib/features/licensing/licensing-api.ts b/libs/api/src/lib/features/licensing/licensing-api.ts
index d6c518fd2..ae2ffba53 100644
--- a/libs/api/src/lib/features/licensing/licensing-api.ts
+++ b/libs/api/src/lib/features/licensing/licensing-api.ts
@@ -1015,6 +1015,30 @@ export const licensingApi = baseApi
           error ? [] : [itemTag('LicenseApplication', applicationId), listTag('Inspection')],
       }),
 
+      /** Moves a booked visit: another day, slot, inspector or place. */
+      rescheduleInspection: builder.mutation<
+        Inspection,
+        {
+          inspectionId: string;
+          applicationId: string;
+          scheduledDate: string;
+          timeSlot: 'MORNING' | 'AFTERNOON';
+          inspectorId?: string;
+          location?: string;
+          reason?: string;
+        }
+      >({
+        query: ({ inspectionId, scheduledDate, timeSlot, inspectorId, location, reason }) => ({
+          url: `/inspections/${inspectionId}/schedule`,
+          method: 'PATCH',
+          // applicationId is for cache invalidation only; the visit knows its
+          // own application.
+          body: { scheduledDate, timeSlot, inspectorId, location, reason },
+        }),
+        invalidatesTags: (_r, error, { applicationId }) =>
+          error ? [] : [itemTag('LicenseApplication', applicationId), listTag('Inspection')],
+      }),
+
       getInspections: builder.query<Inspection[], string>({
         query: (applicationId) => ({ url: `/inspections/application/${applicationId}` }),
         providesTags: () => [listTag('Inspection')],
@@ -1152,6 +1176,7 @@ export const {
   useScheduleIssuanceMutation,
   useIssueCertificateMutation,
   useScheduleInspectionMutation,
+  useRescheduleInspectionMutation,
   useGetInspectionsQuery,
   useRecordInspectionResultMutation,
   useGetNotificationsQuery,
diff --git a/libs/api/src/lib/features/licensing/licensing.helpers.ts b/libs/api/src/lib/features/licensing/licensing.helpers.ts
index 888b57be9..840aa8d12 100644
--- a/libs/api/src/lib/features/licensing/licensing.helpers.ts
+++ b/libs/api/src/lib/features/licensing/licensing.helpers.ts
@@ -595,6 +595,49 @@ interface ConditionLike {
   anyOf?: ConditionLike[];
 }
 
+/**
+ * Section keys a condition reads, recursing `anyOf`.
+ *
+ * `FieldCondition.field` is a `sectionKey.fieldKey` path, so the prefix names
+ * the section whose answer decides the condition.
+ */
+export function conditionSections(
+  condition: FieldCondition | undefined | null,
+): string[] {
+  if (!condition) return [];
+  if (condition.anyOf) return condition.anyOf.flatMap(conditionSections);
+  if (!condition.field) return [];
+  const [sectionKey] = condition.field.split('.');
+  return sectionKey ? [sectionKey] : [];
+}
+
+/**
+ * Sections whose visibility hangs on an answer in one of `flagged`.
+ *
+ * Mirrors the server's `sectionsDependingOn`: an officer flagging the section
+ * that holds the vessel category is asking for an answer that decides which
+ * fields in other sections are required, so those sections have to open too —
+ * otherwise the applicant sees newly-required fields they cannot edit and
+ * cannot resubmit.
+ */
+export function sectionsDependingOn(
+  sections: FormSectionConfig[],
+  flagged: Set<string>,
+): Set<string> {
+  const dependent = new Set<string>();
+  if (flagged.size === 0) return dependent;
+
+  for (const section of sections) {
+    if (flagged.has(section.key)) continue;
+    const reads = [
+      section.showWhen,
+      ...(section.fields ?? []).map((field) => field.showWhen),
+    ].flatMap(conditionSections);
+    if (reads.some((key) => flagged.has(key))) dependent.add(section.key);
+  }
+  return dependent;
+}
+
 export function conditionHolds(
   condition: FieldCondition | undefined | null,
   formData: Record<string, Record<string, unknown>>,

From 6d2c01ae73409b5752f4bfbe7bd74ef89ee8cba3 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:32:31 +0000
Subject: [PATCH 07/16] feat: allow applicants to view declared personal
 licenses in the catalogue by expanding the filter to include non-logistics
 family types present in the user declaration

---
 .../licensing/components/LicenseCatalogue.tsx | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index d6a11871c..b4dedc212 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -45,9 +45,9 @@ const CATEGORY_ICONS: Record<LicenseCategory, typeof IconShip> = {
   CARGO_FREIGHT: IconBuildingWarehouse,
   SHIPPING_AGENCY: IconShip,
   INVESTMENT: IconTrendingUp,
-  // The three below are filtered out of this catalogue today
-  // (requiresOperatorMode is false for all of them), and are listed only so
-  // the record stays total if that ever changes.
+  // The three below appear only when the applicant has declared a licence
+  // type in them (see the family filter below); listed here so the record
+  // stays total either way.
   MARITIME_PERSONNEL: IconShip,
   VESSEL_SERVICES: IconAnchor,
   WAIVER_SERVICES: IconShieldOff,
@@ -81,15 +81,19 @@ export function LicenseCatalogue() {
   const { groups, orphans } = useMemo(() => {
     const active = (types?.items ?? [])
       .filter((t) => t.isActive)
-      // Logistics licences only: this is the operator catalogue, not the
-      // seafarer certificate or vessel/seafarer document catalogue — those
-      // have their own entry points. `familyKind` is the real data-model
-      // classification (set on the type at seed time); `requiresOperatorMode`
-      // was the proxy this used before that column existed and happened to
-      // agree for every type seeded so far, but a type can only be trusted to
-      // stay in sync with the catalogue it belongs in if the catalogue reads
-      // its actual family instead of a flag with a different purpose.
-      .filter((t) => t.familyKind === 'LOGISTICS_LICENSE')
+      // The logistics family, plus whatever this applicant actually declared.
+      //
+      // `familyKind` is the real data-model classification and is what keeps
+      // browse-all to the operator catalogue rather than every certificate and
+      // document type in the system. But it is not what decides eligibility:
+      // the Operations tab also offers the personal registrations (seafarer,
+      // vessel) and the seafarer endorsement, which are DOCUMENT/CERTIFICATE
+      // family, so an applicant who declared one of those was shown an empty
+      // catalogue — allowed to file, and offered nothing to file. Each of
+      // those keys already has an entry point at `/licensing/<key>/apply`
+      // (a router redirect for SEAFARER_REGISTRATION and SEAMAN_BOOK, the
+      // generic wizard for the rest), so the card leads somewhere real.
+      .filter((t) => t.familyKind === 'LOGISTICS_LICENSE' || declared.has(t.id))
       // Only what the applicant operates as. The server enforces the same rule
       // on create; this is what stops them starting an application they will
       // be refused at the end of.

From 82b316e90b566c186ec94d5110405a03767f5a8e Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:37:43 +0000
Subject: [PATCH 08/16] feat: localize license status labels and display
 detailed status reasons in LicenseCard

---
 .../licensing/components/LicenseCard.tsx      | 28 +++++++++++++++++--
 apps/portal/src/app/i18n/locales/am.ts        |  8 ++++++
 apps/portal/src/app/i18n/locales/en.ts        |  8 ++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
index c8942a140..8fe493e76 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
@@ -81,6 +81,11 @@ export function LicenseCard({
   // only for a cached response from before those fields existed.
   const days = license.daysUntilExpiry ?? daysUntil(license.expiryDate);
   const expired = license.status === 'EXPIRED' || days < 0;
+  // Suspended, cancelled and superseded are none of them "valid until" their
+  // expiry date — the card used to say exactly that, because only EXPIRED was
+  // treated as not-current. A suspended licence read as a live one with a grey
+  // badge.
+  const current = license.status === 'ACTIVE' && !expired;
   const renewable = license.renewable ?? false;
   const showDate = useDateDisplayer();
   const localized = useLocalized();
@@ -100,9 +105,15 @@ export function LicenseCard({
         <Badge
           size="sm"
           variant="light"
-          color={expired ? 'red' : license.status === 'ACTIVE' ? 'teal' : 'gray'}
+          color={expired ? 'red' : current ? 'teal' : 'gray'}
         >
-          {expired ? t('licensing.card.expired') : license.status}
+          {/* The raw enum was rendered here, so an Amharic page showed
+              "SUSPENDED" among otherwise translated text. */}
+          {expired
+            ? t('licensing.card.expired')
+            : t(`licensing.card.status.${license.status}`, {
+                defaultValue: license.status,
+              })}
         </Badge>
       </Group>
 
@@ -113,8 +124,19 @@ export function LicenseCard({
           <Text size="sm" fw={500}>
             {expired
               ? t('licensing.card.expiredOn', { date: showDate(license.expiryDate) })
-              : t('licensing.card.validUntil', { date: showDate(license.expiryDate) })}
+              : current
+                ? t('licensing.card.validUntil', { date: showDate(license.expiryDate) })
+                : t(`licensing.card.status.${license.status}`, {
+                    defaultValue: license.status,
+                  })}
           </Text>
+          {/* Why it stopped being current. The API returns it; the card threw
+              it away, leaving the holder to guess. */}
+          {!current && license.statusReason && (
+            <Text size="xs" c="dimmed" mt={2}>
+              {t('licensing.card.statusReason', { reason: license.statusReason })}
+            </Text>
+          )}
         </Box>
         <RequirePermission
           anyOf={[
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 5f921d909..ab5013291 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -802,6 +802,14 @@ export const am: Translations = {
       renewDays_one: 'አድስ — በ{{count}} ቀን ውስጥ ያበቃል',
       renewDays_other: 'አድስ — በ{{count}} ቀናት ውስጥ ያበቃል',
       renewFailed: 'ዕድሳት መጀመር አልተቻለም',
+      status: {
+        ACTIVE: 'የፀና',
+        EXPIRED: 'ጊዜው ያለፈበት',
+        SUSPENDED: 'የታገደ',
+        CANCELLED: 'የተሰረዘ',
+        SUPERSEDED: 'በአዲስ የምስክር ወረቀት የተተካ',
+      },
+      statusReason: 'ምክንያት፦ {{reason}}',
     },
     catalogue: {
       emptyTitle: 'የሚሰሩበትን የስራ ዘርፍ ይንገሩን',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index f3e0d4d83..f0a99d212 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -802,6 +802,14 @@ export const en = {
       renewDays_one: 'Renew — expires in {{count}} day',
       renewDays_other: 'Renew — expires in {{count}} days',
       renewFailed: 'Could not start the renewal',
+      status: {
+        ACTIVE: 'Active',
+        EXPIRED: 'Expired',
+        SUSPENDED: 'Suspended',
+        CANCELLED: 'Cancelled',
+        SUPERSEDED: 'Replaced by a newer certificate',
+      },
+      statusReason: 'Reason: {{reason}}',
     },
     catalogue: {
       emptyTitle: 'Tell us what you operate as',

From 7f69cb2cbab86ff168a3d2d26e7d7002141b9623 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:38:47 +0000
Subject: [PATCH 09/16] feat: disable unavailable licenses in catalogue and add
 explanation with link to operations management

---
 .../licensing/components/LicenseCatalogue.tsx | 57 +++++++++++++++----
 apps/portal/src/app/i18n/locales/am.ts        |  2 +
 apps/portal/src/app/i18n/locales/en.ts        |  2 +
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index b4dedc212..f0042b260 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -20,6 +20,7 @@ import {
   IconBuildingWarehouse,
   IconChevronRight,
   IconFileText,
+  IconLock,
   IconShieldOff,
   IconShip,
   IconTrendingUp,
@@ -277,8 +278,14 @@ function LicenseTypeCard({
       withBorder
       radius="md"
       padding="md"
-      style={{ cursor: 'pointer', height: '100%' }}
-      onClick={() => onSelect(type)}
+      style={{
+        cursor: canApply ? 'pointer' : 'default',
+        height: '100%',
+        // Dimmed rather than hidden: browse-all exists so an applicant can see
+        // what else the authority issues. It just must not look actionable.
+        opacity: canApply ? 1 : 0.6,
+      }}
+      onClick={canApply ? () => onSelect(type) : undefined}
     >
       <Stack gap="xs" justify="space-between" h="100%">
         <Box>
@@ -286,11 +293,19 @@ function LicenseTypeCard({
             <Text fw={600} size="sm" lh={1.35}>
               {localized(type.name)}
             </Text>
-            <IconChevronRight
-              size={16}
-              color="var(--mantine-color-dimmed)"
-              style={{ flexShrink: 0, marginTop: 2 }}
-            />
+            {canApply ? (
+              <IconChevronRight
+                size={16}
+                color="var(--mantine-color-dimmed)"
+                style={{ flexShrink: 0, marginTop: 2 }}
+              />
+            ) : (
+              <IconLock
+                size={16}
+                color="var(--mantine-color-dimmed)"
+                style={{ flexShrink: 0, marginTop: 2 }}
+              />
+            )}
           </Group>
           {type.description && (
             <Text size="xs" c="dimmed" mt={6} lineClamp={3}>
@@ -329,13 +344,33 @@ function LicenseTypeCard({
               mt="sm"
               size="xs"
               variant="light"
-              color={canApply ? undefined : 'gray'}
+              disabled={!canApply}
               rightSection={<IconArrowRight size={14} />}
             >
-              {canApply
-                ? t('licensing.catalogue.startApplication')
-                : t('licensing.catalogue.addToOperations')}
+              {t('licensing.catalogue.startApplication')}
             </Button>
+            {/* A disabled button on its own only says "no". This says why, and
+                where to go about it — the licence is offered against a declared
+                mode of operation, and the server refuses a create for one the
+                applicant has not declared. */}
+            {!canApply && (
+              <Text size="xs" c="dimmed" mt={6} ta="center">
+                {t('licensing.catalogue.lockedHint')}{' '}
+                <Anchor
+                  size="xs"
+                  component="button"
+                  type="button"
+                  onClick={(event) => {
+                    // The card is inert while locked, but the anchor inside it
+                    // must not re-trigger anything if that ever changes.
+                    event.stopPropagation();
+                    onSelect(type);
+                  }}
+                >
+                  {t('licensing.catalogue.addToOperations')}
+                </Anchor>
+              </Text>
+            )}
           </RequirePermission>
         </Box>
       </Stack>
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index ab5013291..2a56acf6c 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -831,6 +831,8 @@ export const am: Translations = {
       evaluationOnly: 'ግምገማ ብቻ',
       startApplication: 'ማመልከቻ ጀምር',
       addToOperations: 'ወደ ስራ ዘርፎቼ ጨምር',
+      lockedHint:
+        'ከተመዘገቡ የስራ ዘርፎችዎ ውስጥ ስላልሆነ እስካሁን ማመልከት አይችሉም።',
     },
   },
 
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index f0a99d212..a181d2ead 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -831,6 +831,8 @@ export const en = {
       evaluationOnly: 'Evaluation only',
       startApplication: 'Start application',
       addToOperations: 'Add to my operations',
+      lockedHint:
+        'Not one of your declared operations, so it cannot be applied for yet.',
     },
   },
 

From c1005cf9271650199c4b3765557b0ea1a8df7e5a Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:40:58 +0000
Subject: [PATCH 10/16] refactor: replace dimmed text hint with an alert box
 and remove opacity styling on locked license cards

---
 .../licensing/components/LicenseCatalogue.tsx | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index f0042b260..c948e5e58 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+  Alert,
   Anchor,
   Badge,
   Box,
@@ -278,13 +279,7 @@ function LicenseTypeCard({
       withBorder
       radius="md"
       padding="md"
-      style={{
-        cursor: canApply ? 'pointer' : 'default',
-        height: '100%',
-        // Dimmed rather than hidden: browse-all exists so an applicant can see
-        // what else the authority issues. It just must not look actionable.
-        opacity: canApply ? 1 : 0.6,
-      }}
+      style={{ cursor: canApply ? 'pointer' : 'default', height: '100%' }}
       onClick={canApply ? () => onSelect(type) : undefined}
     >
       <Stack gap="xs" justify="space-between" h="100%">
@@ -352,14 +347,26 @@ function LicenseTypeCard({
             {/* A disabled button on its own only says "no". This says why, and
                 where to go about it — the licence is offered against a declared
                 mode of operation, and the server refuses a create for one the
-                applicant has not declared. */}
+                applicant has not declared. Called out rather than set in dimmed
+                small print: it is the only thing on a locked card the applicant
+                can act on. */}
             {!canApply && (
-              <Text size="xs" c="dimmed" mt={6} ta="center">
-                {t('licensing.catalogue.lockedHint')}{' '}
+              <Alert
+                variant="light"
+                color="orange"
+                radius="md"
+                mt="sm"
+                p="xs"
+              >
+                <Text size="xs" lh={1.4}>
+                  {t('licensing.catalogue.lockedHint')}
+                </Text>
                 <Anchor
                   size="xs"
+                  fw={600}
                   component="button"
                   type="button"
+                  mt={4}
                   onClick={(event) => {
                     // The card is inert while locked, but the anchor inside it
                     // must not re-trigger anything if that ever changes.
@@ -369,7 +376,7 @@ function LicenseTypeCard({
                 >
                   {t('licensing.catalogue.addToOperations')}
                 </Anchor>
-              </Text>
+              </Alert>
             )}
           </RequirePermission>
         </Box>

From c26528dad5e51e69843952b46a4a668816f07b60 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 07:56:04 +0000
Subject: [PATCH 11/16] feat: implement DocumentVaultPage to display seafarer
 licenses, medical certificates, and official documents with PDF preview
 functionality.

---
 .../documents/pages/DocumentVaultPage.tsx     | 544 +++++++++++++++++-
 apps/portal/src/app/i18n/locales/am.ts        |  45 ++
 apps/portal/src/app/i18n/locales/en.ts        |  47 ++
 3 files changed, 627 insertions(+), 9 deletions(-)

diff --git a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
index 172419552..d7605054a 100644
--- a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
+++ b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
@@ -1,21 +1,547 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Alert,
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Group,
+  Loader,
+  SimpleGrid,
+  Stack,
+  Tabs,
+  Text,
+  ThemeIcon,
+  Title,
+} from '@mantine/core';
+import {
+  IconAnchor,
+  IconCertificate,
+  IconEye,
+  IconHeartbeat,
+  IconIdBadge2,
+  IconInfoCircle,
+  IconPaperclip,
+} from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
+import { useDateDisplayer } from '@ema-platform/shared';
+import { notify, PdfPreviewModal } from '@ema-platform/ui';
+import {
+  extractErrorMessage,
+  useGetAttachmentsQuery,
+  useGetCertificateUrlMutation,
+  useGetMyLicensesQuery,
+  useGetMyMedicalCertificatesQuery,
+  useGetMySeaServiceRecordsQuery,
+  useGetMySeafarerDocumentsQuery,
+  useGetMySeafarerRegistrationQuery,
+  useLazyGetMySeafarerDocumentDownloadQuery,
+  type SeafarerDocument,
+  type SeafarerRecordStatus,
+} from '@ema-platform/api';
+import { LicenseCard, useRenewLicense } from '../../licensing/components/LicenseCard';
+import { documentSlots } from '../../seafarer-registration/components/RegistrationDocuments';
+
+type Preview = { url: string; title: string };
+
+const RECORD_STATUS_COLOR: Record<SeafarerRecordStatus, string> = {
+  SUBMITTED: 'blue',
+  VERIFIED: 'teal',
+  REJECTED: 'red',
+};
 
 /**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered invented figures/records that were
- * indistinguishable from real ones.
+ * The files attached to one record, read from the attachment store the record
+ * owns. One query per card rather than a page-wide fetch: `/attachments` is
+ * owner-scoped, and RTK Query dedupes and caches them by owner anyway.
  */
+function RecordFiles({
+  ownerType,
+  ownerId,
+  onPreview,
+}: {
+  ownerType: 'SEA_SERVICE_RECORD' | 'MEDICAL_CERTIFICATE' | 'SEAFARER_REGISTRATION';
+  ownerId: string;
+  onPreview: (preview: Preview) => void;
+}) {
+  const { t } = useTranslation();
+  const { data, isLoading } = useGetAttachmentsQuery({ ownerType, ownerId });
+  const files = (data ?? []).flatMap((a) => a.files);
+
+  if (isLoading) return <Loader size="xs" type="oval" />;
+  if (files.length === 0)
+    return (
+      <Text fz="xs" c="dimmed">
+        {t('documents.files.none')}
+      </Text>
+    );
+
+  return (
+    <Stack gap={4}>
+      {files.map((file) => (
+        <Group key={file.id} gap={6} wrap="nowrap">
+          <IconPaperclip size={14} />
+          {file.url ? (
+            <Anchor
+              component="button"
+              type="button"
+              fz="xs"
+              onClick={() => onPreview({ url: file.url as string, title: file.originalName })}
+            >
+              {file.originalName}
+            </Anchor>
+          ) : (
+            <Text fz="xs">{file.originalName}</Text>
+          )}
+        </Group>
+      ))}
+    </Stack>
+  );
+}
+
+function FieldRow({ label, value }: { label: string; value: string }) {
+  return (
+    <Group justify="space-between" gap="xs" wrap="nowrap">
+      <Text fz="xs" c="dimmed">
+        {label}
+      </Text>
+      <Text fz="xs" fw={500} ta="right">
+        {value}
+      </Text>
+    </Group>
+  );
+}
+
+/** Seaman Book / BTC — issued on their own workflow, not as licences. */
+function IssuedDocumentCard({
+  document,
+  onPreview,
+}: {
+  document: SeafarerDocument;
+  onPreview: (preview: Preview) => void;
+}) {
+  const { t } = useTranslation();
+  const showDate = useDateDisplayer();
+  const [download, { isFetching }] = useLazyGetMySeafarerDocumentDownloadQuery();
+  const issued = document.status === 'ISSUED';
+
+  async function open() {
+    try {
+      const { url } = await download(document.id).unwrap();
+      onPreview({ url, title: t(`documents.kind.${document.kind}`) });
+    } catch (err) {
+      notify.error(extractErrorMessage(err), t('documents.openFailed'));
+    }
+  }
+
+  return (
+    <Card withBorder radius="md" padding="md">
+      <Group justify="space-between" align="flex-start" wrap="nowrap">
+        <Group gap="sm" wrap="nowrap">
+          <ThemeIcon size="lg" variant="light" color={issued ? 'teal' : 'gray'} radius="md">
+            <IconCertificate size={18} stroke={1.5} />
+          </ThemeIcon>
+          <div>
+            <Text fz="sm" fw={600}>
+              {t(`documents.kind.${document.kind}`)}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              {document.documentNumber ?? document.requestNumber}
+            </Text>
+          </div>
+        </Group>
+        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'}>
+          {t(`documents.documentStatus.${document.status}`, { defaultValue: document.status })}
+        </Badge>
+      </Group>
+
+      <Divider my="sm" />
+
+      <Stack gap={4}>
+        {document.issueDate && (
+          <FieldRow label={t('seaRecords.columns.issued')} value={showDate(document.issueDate)} />
+        )}
+        {document.expiryDate && (
+          <FieldRow label={t('seaRecords.columns.expires')} value={showDate(document.expiryDate)} />
+        )}
+      </Stack>
+
+      <Button
+        mt="sm"
+        size="xs"
+        variant="light"
+        fullWidth
+        leftSection={<IconEye size={14} />}
+        disabled={!issued}
+        loading={isFetching}
+        onClick={open}
+      >
+        {issued ? t('documents.view') : t('documents.notIssued')}
+      </Button>
+    </Card>
+  );
+}
+
 export function DocumentVaultPage() {
   const { t } = useTranslation();
+  const showDate = useDateDisplayer();
+  const [preview, setPreview] = useState<Preview | null>(null);
+
+  const { data: licences, isLoading: loadingLicences } = useGetMyLicensesQuery();
+  const { data: issuedDocuments } = useGetMySeafarerDocumentsQuery();
+  const { data: medicals, isLoading: loadingMedicals } = useGetMyMedicalCertificatesQuery();
+  const { data: seaService, isLoading: loadingSeaService } = useGetMySeaServiceRecordsQuery();
+  const { data: registrationData, isLoading: loadingRegistration } =
+    useGetMySeafarerRegistrationQuery();
+
+  const [getCertificateUrl, { isLoading: isDownloadingCert }] = useGetCertificateUrlMutation();
+  const { renewLicense, isRenewing } = useRenewLicense();
+
+  const registration = registrationData?.registration ?? null;
+  const { data: registrationFiles } = useGetAttachmentsQuery(
+    { ownerType: 'SEAFARER_REGISTRATION', ownerId: registration?.id ?? '' },
+    { skip: !registration },
+  );
+
+  async function openCertificate(licenseId: string) {
+    try {
+      const { url } = await getCertificateUrl(licenseId).unwrap();
+      setPreview({ url, title: t('licensing.card.downloadCertificate') });
+    } catch (err) {
+      notify.error(extractErrorMessage(err), t('documents.openFailed'));
+    }
+  }
+
+  const licenceItems = licences?.items ?? [];
+  const issued = [issuedDocuments?.seamanBook, issuedDocuments?.btc].filter(
+    (d): d is SeafarerDocument => Boolean(d),
+  );
 
   return (
     <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title={t('featureUnavailable.documents.title')}
-        description={t('featureUnavailable.documents.description')}
+      <Stack gap="md">
+        <div>
+          <Title order={3}>{t('documents.title')}</Title>
+          <Text fz="sm" c="dimmed">
+            {t('documents.subtitle')}
+          </Text>
+        </div>
+
+        <Tabs defaultValue="license" variant="outline" radius="md" keepMounted={false}>
+          <Tabs.List mb="md">
+            <Tabs.Tab value="license" leftSection={<IconCertificate size={16} />}>
+              {t('documents.tabs.license')}
+            </Tabs.Tab>
+            <Tabs.Tab value="medical" leftSection={<IconHeartbeat size={16} />}>
+              {t('documents.tabs.medical')}
+            </Tabs.Tab>
+            <Tabs.Tab value="sea-service" leftSection={<IconAnchor size={16} />}>
+              {t('documents.tabs.seaService')}
+            </Tabs.Tab>
+            <Tabs.Tab value="personal" leftSection={<IconIdBadge2 size={16} />}>
+              {t('documents.tabs.personal')}
+            </Tabs.Tab>
+          </Tabs.List>
+
+          {/* ── Licences and EMA-issued documents ───────────────────────── */}
+          <Tabs.Panel value="license">
+            <Stack gap="xl">
+              {issued.length > 0 && (
+                <div>
+                  <Text fw={700} fz="sm" mb="sm" tt="uppercase" c="dimmed">
+                    {t('documents.issuedTitle')}
+                  </Text>
+                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                    {issued.map((document) => (
+                      <IssuedDocumentCard
+                        key={document.id}
+                        document={document}
+                        onPreview={setPreview}
+                      />
+                    ))}
+                  </SimpleGrid>
+                </div>
+              )}
+
+              <div>
+                <Text fw={700} fz="sm" mb="sm" tt="uppercase" c="dimmed">
+                  {t('documents.licensesTitle')}
+                </Text>
+                {loadingLicences ? (
+                  <Loader size="sm" type="oval" />
+                ) : licenceItems.length === 0 ? (
+                  <Text fz="sm" c="dimmed">
+                    {t('documents.empty.licenses')}
+                  </Text>
+                ) : (
+                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                    {licenceItems.map((licence) => (
+                      <LicenseCard
+                        key={licence.id}
+                        license={licence}
+                        isDownloading={isDownloadingCert}
+                        isRenewing={isRenewing}
+                        onDownload={() => openCertificate(licence.id)}
+                        onRenew={() => renewLicense(licence)}
+                      />
+                    ))}
+                  </SimpleGrid>
+                )}
+              </div>
+            </Stack>
+          </Tabs.Panel>
+
+          {/* ── Medical certificates ────────────────────────────────────── */}
+          <Tabs.Panel value="medical">
+            {loadingMedicals ? (
+              <Loader size="sm" type="oval" />
+            ) : (medicals ?? []).length === 0 ? (
+              <Text fz="sm" c="dimmed">
+                {t('documents.empty.medical')}
+              </Text>
+            ) : (
+              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                {(medicals ?? []).map((record) => (
+                  <Card key={record.id} withBorder radius="md" padding="md">
+                    <Group justify="space-between" align="flex-start" wrap="nowrap">
+                      <Group gap="sm" wrap="nowrap">
+                        <ThemeIcon size="lg" variant="light" color="pink" radius="md">
+                          <IconHeartbeat size={18} stroke={1.5} />
+                        </ThemeIcon>
+                        <div>
+                          <Text fz="sm" fw={600}>
+                            {record.issuerName}
+                          </Text>
+                          {record.certificateNumber && (
+                            <Text fz="xs" c="dimmed">
+                              {t('seaRecords.columns.certNumber', {
+                                number: record.certificateNumber,
+                              })}
+                            </Text>
+                          )}
+                        </div>
+                      </Group>
+                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                        {t(`seaRecords.columns.recordStatus.${record.status}`, {
+                          defaultValue: record.status,
+                        })}
+                      </Badge>
+                    </Group>
+
+                    <Divider my="sm" />
+
+                    <Stack gap={4}>
+                      <FieldRow
+                        label={t('seaRecords.columns.issued')}
+                        value={showDate(record.issueDate)}
+                      />
+                      <FieldRow
+                        label={t('seaRecords.columns.expires')}
+                        value={showDate(record.expiryDate)}
+                      />
+                      <FieldRow
+                        label={t('seaRecords.columns.fitness')}
+                        value={t(`seaRecords.columns.fitnessOptions.${record.fitnessStatus}`, {
+                          defaultValue: record.fitnessStatus,
+                        })}
+                      />
+                    </Stack>
+
+                    <Divider my="sm" />
+                    <RecordFiles
+                      ownerType="MEDICAL_CERTIFICATE"
+                      ownerId={record.id}
+                      onPreview={setPreview}
+                    />
+                  </Card>
+                ))}
+              </SimpleGrid>
+            )}
+          </Tabs.Panel>
+
+          {/* ── Sea service records ─────────────────────────────────────── */}
+          <Tabs.Panel value="sea-service">
+            {loadingSeaService ? (
+              <Loader size="sm" type="oval" />
+            ) : (seaService ?? []).length === 0 ? (
+              <Text fz="sm" c="dimmed">
+                {t('documents.empty.seaService')}
+              </Text>
+            ) : (
+              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                {(seaService ?? []).map((record) => (
+                  <Card key={record.id} withBorder radius="md" padding="md">
+                    <Group justify="space-between" align="flex-start" wrap="nowrap">
+                      <Group gap="sm" wrap="nowrap">
+                        <ThemeIcon size="lg" variant="light" color="blue" radius="md">
+                          <IconAnchor size={18} stroke={1.5} />
+                        </ThemeIcon>
+                        <div>
+                          <Text fz="sm" fw={600}>
+                            {record.vesselName}
+                          </Text>
+                          {record.imoNumber && (
+                            <Text fz="xs" c="dimmed">
+                              {t('seaRecords.columns.imo', { number: record.imoNumber })}
+                            </Text>
+                          )}
+                        </div>
+                      </Group>
+                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                        {t(`seaRecords.columns.recordStatus.${record.status}`, {
+                          defaultValue: record.status,
+                        })}
+                      </Badge>
+                    </Group>
+
+                    <Divider my="sm" />
+
+                    <Stack gap={4}>
+                      <FieldRow label={t('seaRecords.columns.rank')} value={record.rank} />
+                      <FieldRow
+                        label={t('seaRecords.columns.from')}
+                        value={showDate(record.engagementDate)}
+                      />
+                      <FieldRow
+                        label={t('seaRecords.columns.to')}
+                        value={showDate(record.dischargeDate)}
+                      />
+                    </Stack>
+
+                    <Divider my="sm" />
+                    <RecordFiles
+                      ownerType="SEA_SERVICE_RECORD"
+                      ownerId={record.id}
+                      onPreview={setPreview}
+                    />
+                  </Card>
+                ))}
+              </SimpleGrid>
+            )}
+          </Tabs.Panel>
+
+          {/* ── Personal documents from the seafarer registration ───────── */}
+          <Tabs.Panel value="personal">
+            {loadingRegistration ? (
+              <Loader size="sm" type="oval" />
+            ) : !registration ? (
+              // Personal documents are uploaded against a registration, so
+              // without one there is nothing to show — and nowhere to put an
+              // upload either.
+              <Alert color="blue" icon={<IconInfoCircle size={16} />}>
+                <Stack gap="xs" align="flex-start">
+                  <Text fz="sm">{t('documents.personal.noRegistration')}</Text>
+                  <Button
+                    size="xs"
+                    variant="light"
+                    component={Link}
+                    to="/seafarer-registration"
+                  >
+                    {t('documents.personal.startRegistration')}
+                  </Button>
+                </Stack>
+              </Alert>
+            ) : (
+              <Stack gap="md">
+                <Text fz="sm" c="dimmed">
+                  {t('documents.personal.description')}
+                </Text>
+                <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                  {documentSlots(
+                    Boolean(registration.passportNumber),
+                    registration.nationality,
+                  ).map((slot) => {
+                    const attachment = (registrationFiles ?? []).find(
+                      (a) => a.documentKey === slot.key,
+                    );
+                    const files = attachment?.files ?? [];
+                    return (
+                      <Card
+                        key={slot.key}
+                        withBorder
+                        radius="md"
+                        padding="md"
+                        style={{
+                          borderStyle: files.length ? 'solid' : 'dashed',
+                          borderColor: files.length
+                            ? 'var(--mantine-color-teal-4)'
+                            : slot.isRequired
+                              ? 'var(--mantine-color-orange-4)'
+                              : undefined,
+                        }}
+                      >
+                        <Group justify="space-between" align="flex-start" wrap="nowrap">
+                          <div>
+                            <Text fz="sm" fw={600}>
+                              {slot.name}
+                            </Text>
+                            {slot.description && (
+                              <Text fz="xs" c="dimmed">
+                                {slot.description}
+                              </Text>
+                            )}
+                          </div>
+                          <Badge
+                            size="sm"
+                            variant="light"
+                            color={files.length ? 'teal' : slot.isRequired ? 'orange' : 'gray'}
+                          >
+                            {files.length
+                              ? t('documents.personal.uploaded')
+                              : t('documents.personal.missing')}
+                          </Badge>
+                        </Group>
+
+                        <Divider my="sm" />
+
+                        {files.length === 0 ? (
+                          <Text fz="xs" c="dimmed">
+                            {t('documents.files.none')}
+                          </Text>
+                        ) : (
+                          <Stack gap={4}>
+                            {files.map((file) => (
+                              <Group key={file.id} gap={6} wrap="nowrap">
+                                <IconPaperclip size={14} />
+                                {file.url ? (
+                                  <Anchor
+                                    component="button"
+                                    type="button"
+                                    fz="xs"
+                                    onClick={() =>
+                                      setPreview({
+                                        url: file.url as string,
+                                        title: file.originalName,
+                                      })
+                                    }
+                                  >
+                                    {file.originalName}
+                                  </Anchor>
+                                ) : (
+                                  <Text fz="xs">{file.originalName}</Text>
+                                )}
+                              </Group>
+                            ))}
+                          </Stack>
+                        )}
+                      </Card>
+                    );
+                  })}
+                </SimpleGrid>
+              </Stack>
+            )}
+          </Tabs.Panel>
+        </Tabs>
+      </Stack>
+
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ''}
+        title={preview?.title}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 2a56acf6c..6d9d452a6 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -1288,4 +1288,49 @@ export const am: Translations = {
       },
     },
   },
+
+  documents: {
+    title: 'ሰነዶቼ',
+    subtitle: 'EMA ያወጣልዎት እያንዳንዱ ሰነድ፣ እንዲሁም ከመዝገቦችዎ ጋር የተያያዙ ፋይሎች።',
+    tabs: {
+      license: 'ፈቃዶች',
+      medical: 'ሕክምና',
+      seaService: 'የባህር አገልግሎት',
+      personal: 'የግል መረጃ',
+    },
+    issuedTitle: 'በ EMA የተሰጡ ሰነዶች',
+    licensesTitle: 'የምስክር ወረቀቶች እና ፈቃዶች',
+    kind: {
+      SEAMAN_BOOK: 'የመርከበኛ መጽሐፍ',
+      BTC_BASIC_TRAINING: 'የመሠረታዊ ስልጠና የምስክር ወረቀት (BTC)',
+    },
+    documentStatus: {
+      AWAITING_REGISTRATION: 'ምዝገባ በመጠበቅ ላይ',
+      PAYMENT_PENDING: 'ክፍያ በመጠበቅ ላይ',
+      PAID: 'ተከፍሏል',
+      PAYMENT_CONFIRMED: 'ሰነድ በመዘጋጀት ላይ',
+      SCHEDULED: 'የመውሰጃ ቀጠሮ ተይዟል',
+      ISSUED: 'ተሰጥቷል',
+      REJECTED: 'ተቀባይነት አላገኘም',
+      CANCELLED: 'ተሰርዟል',
+    },
+    view: 'ይመልከቱ',
+    notIssued: 'እስካሁን አልተሰጠም',
+    openFailed: 'ሰነዱን መክፈት አልተቻለም',
+    files: {
+      none: 'ምንም የተያያዘ ፋይል የለም።',
+    },
+    empty: {
+      licenses: 'እስካሁን የተሰጠዎት የምስክር ወረቀት ወይም ፈቃድ የለም።',
+      medical: 'እስካሁን በመዝገብ ላይ የሕክምና የምስክር ወረቀት የለም።',
+      seaService: 'እስካሁን በመዝገብ ላይ የባህር አገልግሎት መዝገብ የለም።',
+    },
+    personal: {
+      description: 'ከመርከበኛ ምዝገባዎ ጋር ያስገቡት ሰነዶች።',
+      noRegistration: 'እስካሁን የመርከበኛ ምዝገባ ስለሌለዎት በመዝገብ ላይ የግል ሰነዶች የሉም።',
+      startRegistration: 'ወደ መርከበኛ ምዝገባ ይሂዱ',
+      uploaded: 'ተሰቅሏል',
+      missing: 'አልተሰቀለም',
+    },
+  },
 };
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index a181d2ead..209a5e8b6 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -1290,6 +1290,53 @@ export const en = {
       },
     },
   },
+
+  documents: {
+    title: 'My documents',
+    subtitle:
+      'Every document EMA has issued you, and the files attached to your records.',
+    tabs: {
+      license: 'Licences',
+      medical: 'Medical',
+      seaService: 'Sea Service',
+      personal: 'Personal Data',
+    },
+    issuedTitle: 'EMA-issued documents',
+    licensesTitle: 'Certificates and licences',
+    kind: {
+      SEAMAN_BOOK: 'Seaman Book',
+      BTC_BASIC_TRAINING: 'Basic Training Certificate (BTC)',
+    },
+    documentStatus: {
+      AWAITING_REGISTRATION: 'Awaiting registration',
+      PAYMENT_PENDING: 'Payment pending',
+      PAID: 'Paid',
+      PAYMENT_CONFIRMED: 'Preparing document',
+      SCHEDULED: 'Pickup scheduled',
+      ISSUED: 'Issued',
+      REJECTED: 'Rejected',
+      CANCELLED: 'Cancelled',
+    },
+    view: 'View',
+    notIssued: 'Not issued yet',
+    openFailed: 'Could not open the document',
+    files: {
+      none: 'No files attached.',
+    },
+    empty: {
+      licenses: 'No certificates or licences have been issued to you yet.',
+      medical: 'No medical certificates on file yet.',
+      seaService: 'No sea-service records on file yet.',
+    },
+    personal: {
+      description: 'The documents you submitted with your seafarer registration.',
+      noRegistration:
+        'You have no seafarer registration yet, so there are no personal documents on file.',
+      startRegistration: 'Go to seafarer registration',
+      uploaded: 'Uploaded',
+      missing: 'Not uploaded',
+    },
+  },
 };
 
 export type Translations = typeof en;

From 5006e4685bce3c394c75aa4d5d26c36939a3efa7 Mon Sep 17 00:00:00 2001
From: Nati <natinigussie7@gmail.com>
Date: Fri, 28 Aug 2026 08:15:39 +0000
Subject: [PATCH 12/16] feat: add biometric enrollment and viewing capabilities
 with API integration

---
 .../pages/BiometricEnrollmentPage.tsx         |  34 +++-
 .../seafarer/pages/Biometrics/index.tsx       | 180 ++++++++++++++++++
 apps/portal/src/app/layouts/PortalLayout.tsx  |   9 +
 apps/portal/src/app/router.tsx                |   9 +
 .../biometric-enrollment-api.ts               |  13 ++
 libs/auth/src/lib/permissions.constants.ts    |   1 +
 6 files changed, 236 insertions(+), 10 deletions(-)
 create mode 100644 apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx

diff --git a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
index 87f56fbfa..4b6e1e5e1 100644
--- a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
+++ b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
@@ -21,6 +21,7 @@ import {
   openAuthedDocument,
   useEnrollBiometricMutation,
   useGetBiometricEnrollmentsQuery,
+  useGetBiometricSimulateCapabilitiesQuery,
   useListSeafarerRegistrationsQuery,
   useRevokeBiometricEnrollmentMutation,
   type BiometricModality,
@@ -102,6 +103,11 @@ export function BiometricEnrollmentPage() {
 
   const profileId = selected?.profileId ?? '';
   const { data: enrollments, isLoading } = useGetBiometricEnrollmentsQuery(profileId, { skip: !profileId });
+  // No vendor SDK integrated yet — "Simulate Scan" fakes a capture so the
+  // rest of the flow is exercisable. Reports false in production unless
+  // ALLOW_BIOMETRIC_SIMULATION=true, same shortcut the payment bypass uses.
+  const { data: capabilities } = useGetBiometricSimulateCapabilitiesQuery();
+  const simulateEnabled = capabilities?.simulateEnabled ?? false;
   const [enroll, { isLoading: enrolling }] = useEnrollBiometricMutation();
   const [revoke, { isLoading: revoking }] = useRevokeBiometricEnrollmentMutation();
   const [printing, setPrinting] = useState(false);
@@ -178,16 +184,24 @@ export function BiometricEnrollmentPage() {
 
           <Card withBorder radius="md" p="md">
             <Text fz="sm" fw={600} mb="sm">Capture</Text>
-            <Alert color="yellow" icon={<IconAlertTriangle size={16} />} mb="sm" variant="light">
-              No scanner is wired yet — this simulates a capture so the rest of the flow can be tested.
-            </Alert>
-            <Group align="flex-end">
-              <Select label="Modality" data={MODALITIES} value={modality} onChange={(v) => setModality((v as BiometricModality) ?? 'FINGERPRINT')} w={160} />
-              <TextInput label="Device (optional)" placeholder="scanner-01" value={deviceId} onChange={(e) => setDeviceId(e.currentTarget.value)} w={180} />
-              <Button leftSection={<IconScan size={16} />} onClick={handleEnroll} loading={enrolling}>
-                Simulate Scan &amp; Enroll
-              </Button>
-            </Group>
+            {simulateEnabled ? (
+              <>
+                <Alert color="yellow" icon={<IconAlertTriangle size={16} />} mb="sm" variant="light">
+                  No scanner is wired yet — this simulates a capture so the rest of the flow can be tested.
+                </Alert>
+                <Group align="flex-end">
+                  <Select label="Modality" data={MODALITIES} value={modality} onChange={(v) => setModality((v as BiometricModality) ?? 'FINGERPRINT')} w={160} />
+                  <TextInput label="Device (optional)" placeholder="scanner-01" value={deviceId} onChange={(e) => setDeviceId(e.currentTarget.value)} w={180} />
+                  <Button leftSection={<IconScan size={16} />} onClick={handleEnroll} loading={enrolling}>
+                    Simulate Scan &amp; Enroll
+                  </Button>
+                </Group>
+              </>
+            ) : (
+              <Alert color="gray" icon={<IconAlertTriangle size={16} />} variant="light">
+                No scanner is wired yet, and capture simulation is off in this environment.
+              </Alert>
+            )}
           </Card>
 
           <Card withBorder radius="md" p="md">
diff --git a/apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx b/apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx
new file mode 100644
index 000000000..522a07ba1
--- /dev/null
+++ b/apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx
@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Group,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import {
+  IconDownload,
+  IconFingerprint,
+  IconInfoCircle,
+  IconScan,
+} from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import { authStorage } from '@ema-platform/auth';
+import { useGetMyBiometricEnrollmentsQuery } from '@ema-platform/api';
+import { PdfPreviewModal } from '@ema-platform/ui';
+
+const API_BASE =
+  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
+  'http://localhost:3000/api';
+
+async function fetchCertificate(): Promise<Blob> {
+  const token = authStorage.getToken();
+  if (!token) throw new Error('No auth token found');
+  const res = await fetch(`${API_BASE}/biometric-enrollments/mine/certificate`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) throw new Error(`Failed to fetch certificate (${res.status})`);
+  return res.blob();
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+const MODALITY_LABEL: Record<string, string> = {
+  FINGERPRINT: 'Fingerprint',
+  FACE: 'Face',
+};
+
+/**
+ * View-only: what's enrolled, plus a printable slip. Capture stays
+ * counter-side with a scanner — there is no self-enrollment flow here.
+ */
+export function BiometricsPage() {
+  const { t } = useTranslation();
+  const { data: enrollments, isLoading } = useGetMyBiometricEnrollmentsQuery();
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const openPreview = async () => {
+    setBusy(true);
+    try {
+      setPreviewUrl(URL.createObjectURL(await fetchCertificate()));
+    } catch (err) {
+      notifications.show({
+        color: 'red',
+        title: 'Error',
+        message: err instanceof Error ? err.message : 'Could not load certificate',
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDownload = async () => {
+    setBusy(true);
+    try {
+      downloadBlob(await fetchCertificate(), 'biometric-enrollment-certificate.pdf');
+    } catch (err) {
+      notifications.show({
+        color: 'red',
+        title: 'Error',
+        message: err instanceof Error ? err.message : 'Could not download certificate',
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const rows = enrollments ?? [];
+
+  return (
+    <Stack>
+      <Group gap="xs">
+        <IconFingerprint size={22} />
+        <Title order={2}>{t('biometrics.title', 'Biometrics')}</Title>
+      </Group>
+      <Alert variant="light" color="blue" icon={<IconInfoCircle size={16} />}>
+        {t(
+          'biometrics.pageIntro',
+          'Fingerprint and face enrollment happen in person at an EMA counter. This page shows what is on file for you.',
+        )}
+      </Alert>
+
+      <Paper withBorder radius="lg" p="xl">
+        {isLoading ? (
+          <Group justify="center" py="lg">
+            <Loader size="sm" />
+          </Group>
+        ) : rows.length === 0 ? (
+          <Alert variant="light" color="gray" icon={<IconInfoCircle size={15} />}>
+            {t('biometrics.empty', 'No biometric enrollment on file yet.')}
+          </Alert>
+        ) : (
+          <Stack>
+            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+              {rows.map((e) => (
+                <Card key={e.id} withBorder radius="md" p="md">
+                  <Group justify="space-between">
+                    <Group gap="sm">
+                      <ThemeIcon size={36} radius="md" color="blue" variant="light">
+                        <IconScan size={18} />
+                      </ThemeIcon>
+                      <div>
+                        <Text fw={700} fz="sm">
+                          {MODALITY_LABEL[e.modality] ?? e.modality}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          Enrolled {new Date(e.enrolledAt).toLocaleDateString('en-GB', {
+                            day: '2-digit',
+                            month: 'short',
+                            year: 'numeric',
+                          })}
+                        </Text>
+                      </div>
+                    </Group>
+                    <Badge color="teal" variant="light">
+                      {e.status}
+                    </Badge>
+                  </Group>
+                </Card>
+              ))}
+            </SimpleGrid>
+            <Group>
+              <Button
+                variant="light"
+                leftSection={busy ? <Loader size={12} /> : <IconInfoCircle size={12} />}
+                onClick={openPreview}
+                disabled={busy}
+              >
+                {t('biometrics.view', 'View certificate')}
+              </Button>
+              <Button
+                variant="default"
+                leftSection={<IconDownload size={12} />}
+                onClick={handleDownload}
+                disabled={busy}
+              >
+                {t('biometrics.download', 'Download')}
+              </Button>
+            </Group>
+          </Stack>
+        )}
+      </Paper>
+
+      <PdfPreviewModal
+        opened={!!previewUrl}
+        onClose={() => setPreviewUrl(null)}
+        url={previewUrl ?? ''}
+        title={t('biometrics.title', 'Biometrics')}
+      />
+    </Stack>
+  );
+}
diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index c6ffb7fb4..cc5313e68 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -5,6 +5,7 @@ import {
   IconArrowsExchange,
   IconBell,
   IconBook2,
+  IconFingerprint,
   IconFolderOpen,
   IconHeadset,
   IconHome2,
@@ -131,6 +132,13 @@ const NAV_SECTIONS: { label?: string; items: PortalNavItem[] }[] = [
         icon: IconShieldCheck,
         permissions: [P.VIEW_OWN_CERTIFICATES],
       },
+      {
+        to: "/seafarer/biometrics",
+        label: "Biometrics",
+        i18nKey: "nav.biometrics",
+        icon: IconFingerprint,
+        permissions: [P.VIEW_OWN_BIOMETRICS],
+      },
       {
         to: "/exams",
         label: "Examinations",
@@ -206,6 +214,7 @@ const PAGE_META: Record<string, { i18nKey: string }> = {
   "/seaman-book": { i18nKey: "nav.seamanBook" },
   "/basic-training-certificate": { i18nKey: "nav.btc" },
   "/certificates": { i18nKey: "nav.certificates" },
+  "/seafarer/biometrics": { i18nKey: "nav.biometrics" },
   "/exams": { i18nKey: "nav.exams" },
   "/endorsements": { i18nKey: "nav.endorsements" },
   "/documents": { i18nKey: "nav.documents" },
diff --git a/apps/portal/src/app/router.tsx b/apps/portal/src/app/router.tsx
index a8c20ea4f..70938af0e 100644
--- a/apps/portal/src/app/router.tsx
+++ b/apps/portal/src/app/router.tsx
@@ -28,6 +28,7 @@ import { OperationsOnboardingPage } from "./features/onboarding/pages/Operations
 import { ProfilePage } from "./features/profile/pages/ProfilePage";
 import { SupportPage } from "./features/support/pages/SupportPage";
 import { MedicalRecordsPage, SeaServicePage } from "./features/seafarer/pages/SeaRecords";
+import { BiometricsPage } from "./features/seafarer/pages/Biometrics";
 import { SeafarerRegistrationPage } from "./features/seafarer-registration/pages/SeafarerRegistrationPage";
 import { ExamsPage } from "./features/exams/pages/ExamsPage";
 import { ExamAttemptPage } from "./features/exam-attempt/pages/ExamAttemptPage";
@@ -205,6 +206,14 @@ export const router = createBrowserRouter([
           </RequirePermission>
         ),
       },
+      {
+        path: "/seafarer/biometrics",
+        element: (
+          <RequirePermission anyOf={[P.VIEW_OWN_BIOMETRICS]}>
+            <BiometricsPage />
+          </RequirePermission>
+        ),
+      },
       { path: "/seafarer/records", element: <Navigate to="/seafarer/sea-service" replace /> },
       {
         path: "/exams",
diff --git a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
index fd10cec4f..d6117dd25 100644
--- a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
+++ b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
@@ -22,6 +22,17 @@ export const biometricEnrollmentApi = baseApi
         providesTags: (_r, _e, profileId) => [forProfile(profileId)],
       }),
 
+      /** Self-service, view-only: the caller's own live enrollments. */
+      getMyBiometricEnrollments: builder.query<BiometricEnrollment[], void>({
+        query: () => ({ url: '/biometric-enrollments/mine' }),
+        providesTags: [{ type: TAG, id: 'MINE' }],
+      }),
+
+      /** Dev/test only — the API reports false in production. */
+      getBiometricSimulateCapabilities: builder.query<{ simulateEnabled: boolean }, void>({
+        query: () => ({ url: '/biometric-enrollments/simulate/capabilities' }),
+      }),
+
       revokeBiometricEnrollment: builder.mutation<
         BiometricEnrollment,
         { id: string; profileId: string; reason: string }
@@ -40,5 +51,7 @@ export const biometricEnrollmentApi = baseApi
 export const {
   useEnrollBiometricMutation,
   useGetBiometricEnrollmentsQuery,
+  useGetMyBiometricEnrollmentsQuery,
+  useGetBiometricSimulateCapabilitiesQuery,
   useRevokeBiometricEnrollmentMutation,
 } = biometricEnrollmentApi;
diff --git a/libs/auth/src/lib/permissions.constants.ts b/libs/auth/src/lib/permissions.constants.ts
index b09917649..e17d8885d 100644
--- a/libs/auth/src/lib/permissions.constants.ts
+++ b/libs/auth/src/lib/permissions.constants.ts
@@ -83,6 +83,7 @@ export const PORTAL_PERMISSIONS = {
   APPLY_EXAM: "can:apply:exam",
   VIEW_OWN_EXAM: "can:View:own-exam",
   VIEW_OWN_CERTIFICATES: "can:View:own-certificates",
+  VIEW_OWN_BIOMETRICS: "can:View:own-biometrics",
   APPLY_VESSEL_REGISTRATION: "can:apply:vessel-registration",
   VIEW_OWN_VESSELS: "can:View:own-vessels",
   REPORT_VESSEL_INCIDENT: "can:report:own-vessel-incident",

From 627fcfbfde517317283768d59d4ccceed00ba376 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 08:18:19 +0000
Subject: [PATCH 13/16] UI fixes

---
 .../documents/pages/DocumentVaultPage.tsx     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
index d7605054a..82313ad9c 100644
--- a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
+++ b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
@@ -153,7 +153,7 @@ function IssuedDocumentCard({
             </Text>
           </div>
         </Group>
-        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'}>
+        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'} style={{ flexShrink: 0 }}>
           {t(`documents.documentStatus.${document.status}`, { defaultValue: document.status })}
         </Badge>
       </Group>
@@ -277,7 +277,10 @@ export function DocumentVaultPage() {
                     {t('documents.empty.licenses')}
                   </Text>
                 ) : (
-                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                  // Two per row, not three: licence type names run long
+                  // ("Multimodal Transport Operator License") and a third
+                  // column truncates them.
+                  <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
                     {licenceItems.map((licence) => (
                       <LicenseCard
                         key={licence.id}
@@ -324,7 +327,12 @@ export function DocumentVaultPage() {
                           )}
                         </div>
                       </Group>
-                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={RECORD_STATUS_COLOR[record.status]}
+                        style={{ flexShrink: 0 }}
+                      >
                         {t(`seaRecords.columns.recordStatus.${record.status}`, {
                           defaultValue: record.status,
                         })}
@@ -390,7 +398,12 @@ export function DocumentVaultPage() {
                           )}
                         </div>
                       </Group>
-                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={RECORD_STATUS_COLOR[record.status]}
+                        style={{ flexShrink: 0 }}
+                      >
                         {t(`seaRecords.columns.recordStatus.${record.status}`, {
                           defaultValue: record.status,
                         })}
@@ -488,6 +501,7 @@ export function DocumentVaultPage() {
                             size="sm"
                             variant="light"
                             color={files.length ? 'teal' : slot.isRequired ? 'orange' : 'gray'}
+                            style={{ flexShrink: 0 }}
                           >
                             {files.length
                               ? t('documents.personal.uploaded')

From 4dc1ee18b95fb10ab5a1f81b2a15ea0a7efe846b Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:59:23 +0300
Subject: [PATCH 14/16] revert

---
 .../documents/pages/DocumentVaultPage.tsx     | 558 +-----------------
 1 file changed, 9 insertions(+), 549 deletions(-)

diff --git a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
index 82313ad9c..172419552 100644
--- a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
+++ b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
@@ -1,561 +1,21 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Alert,
-  Anchor,
-  Badge,
-  Button,
-  Card,
-  Container,
-  Divider,
-  Group,
-  Loader,
-  SimpleGrid,
-  Stack,
-  Tabs,
-  Text,
-  ThemeIcon,
-  Title,
-} from '@mantine/core';
-import {
-  IconAnchor,
-  IconCertificate,
-  IconEye,
-  IconHeartbeat,
-  IconIdBadge2,
-  IconInfoCircle,
-  IconPaperclip,
-} from '@tabler/icons-react';
+import { Container } from '@mantine/core';
+import { FeatureUnavailable } from '@ema-platform/ui';
 import { useTranslation } from 'react-i18next';
-import { useDateDisplayer } from '@ema-platform/shared';
-import { notify, PdfPreviewModal } from '@ema-platform/ui';
-import {
-  extractErrorMessage,
-  useGetAttachmentsQuery,
-  useGetCertificateUrlMutation,
-  useGetMyLicensesQuery,
-  useGetMyMedicalCertificatesQuery,
-  useGetMySeaServiceRecordsQuery,
-  useGetMySeafarerDocumentsQuery,
-  useGetMySeafarerRegistrationQuery,
-  useLazyGetMySeafarerDocumentDownloadQuery,
-  type SeafarerDocument,
-  type SeafarerRecordStatus,
-} from '@ema-platform/api';
-import { LicenseCard, useRenewLicense } from '../../licensing/components/LicenseCard';
-import { documentSlots } from '../../seafarer-registration/components/RegistrationDocuments';
-
-type Preview = { url: string; title: string };
-
-const RECORD_STATUS_COLOR: Record<SeafarerRecordStatus, string> = {
-  SUBMITTED: 'blue',
-  VERIFIED: 'teal',
-  REJECTED: 'red',
-};
 
 /**
- * The files attached to one record, read from the attachment store the record
- * owns. One query per card rather than a page-wide fetch: `/attachments` is
- * owner-scoped, and RTK Query dedupes and caches them by owner anyway.
+ * Placeholder until this feature has a backend.
+ *
+ * This page previously rendered invented figures/records that were
+ * indistinguishable from real ones.
  */
-function RecordFiles({
-  ownerType,
-  ownerId,
-  onPreview,
-}: {
-  ownerType: 'SEA_SERVICE_RECORD' | 'MEDICAL_CERTIFICATE' | 'SEAFARER_REGISTRATION';
-  ownerId: string;
-  onPreview: (preview: Preview) => void;
-}) {
-  const { t } = useTranslation();
-  const { data, isLoading } = useGetAttachmentsQuery({ ownerType, ownerId });
-  const files = (data ?? []).flatMap((a) => a.files);
-
-  if (isLoading) return <Loader size="xs" type="oval" />;
-  if (files.length === 0)
-    return (
-      <Text fz="xs" c="dimmed">
-        {t('documents.files.none')}
-      </Text>
-    );
-
-  return (
-    <Stack gap={4}>
-      {files.map((file) => (
-        <Group key={file.id} gap={6} wrap="nowrap">
-          <IconPaperclip size={14} />
-          {file.url ? (
-            <Anchor
-              component="button"
-              type="button"
-              fz="xs"
-              onClick={() => onPreview({ url: file.url as string, title: file.originalName })}
-            >
-              {file.originalName}
-            </Anchor>
-          ) : (
-            <Text fz="xs">{file.originalName}</Text>
-          )}
-        </Group>
-      ))}
-    </Stack>
-  );
-}
-
-function FieldRow({ label, value }: { label: string; value: string }) {
-  return (
-    <Group justify="space-between" gap="xs" wrap="nowrap">
-      <Text fz="xs" c="dimmed">
-        {label}
-      </Text>
-      <Text fz="xs" fw={500} ta="right">
-        {value}
-      </Text>
-    </Group>
-  );
-}
-
-/** Seaman Book / BTC — issued on their own workflow, not as licences. */
-function IssuedDocumentCard({
-  document,
-  onPreview,
-}: {
-  document: SeafarerDocument;
-  onPreview: (preview: Preview) => void;
-}) {
-  const { t } = useTranslation();
-  const showDate = useDateDisplayer();
-  const [download, { isFetching }] = useLazyGetMySeafarerDocumentDownloadQuery();
-  const issued = document.status === 'ISSUED';
-
-  async function open() {
-    try {
-      const { url } = await download(document.id).unwrap();
-      onPreview({ url, title: t(`documents.kind.${document.kind}`) });
-    } catch (err) {
-      notify.error(extractErrorMessage(err), t('documents.openFailed'));
-    }
-  }
-
-  return (
-    <Card withBorder radius="md" padding="md">
-      <Group justify="space-between" align="flex-start" wrap="nowrap">
-        <Group gap="sm" wrap="nowrap">
-          <ThemeIcon size="lg" variant="light" color={issued ? 'teal' : 'gray'} radius="md">
-            <IconCertificate size={18} stroke={1.5} />
-          </ThemeIcon>
-          <div>
-            <Text fz="sm" fw={600}>
-              {t(`documents.kind.${document.kind}`)}
-            </Text>
-            <Text fz="xs" c="dimmed">
-              {document.documentNumber ?? document.requestNumber}
-            </Text>
-          </div>
-        </Group>
-        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'} style={{ flexShrink: 0 }}>
-          {t(`documents.documentStatus.${document.status}`, { defaultValue: document.status })}
-        </Badge>
-      </Group>
-
-      <Divider my="sm" />
-
-      <Stack gap={4}>
-        {document.issueDate && (
-          <FieldRow label={t('seaRecords.columns.issued')} value={showDate(document.issueDate)} />
-        )}
-        {document.expiryDate && (
-          <FieldRow label={t('seaRecords.columns.expires')} value={showDate(document.expiryDate)} />
-        )}
-      </Stack>
-
-      <Button
-        mt="sm"
-        size="xs"
-        variant="light"
-        fullWidth
-        leftSection={<IconEye size={14} />}
-        disabled={!issued}
-        loading={isFetching}
-        onClick={open}
-      >
-        {issued ? t('documents.view') : t('documents.notIssued')}
-      </Button>
-    </Card>
-  );
-}
-
 export function DocumentVaultPage() {
   const { t } = useTranslation();
-  const showDate = useDateDisplayer();
-  const [preview, setPreview] = useState<Preview | null>(null);
-
-  const { data: licences, isLoading: loadingLicences } = useGetMyLicensesQuery();
-  const { data: issuedDocuments } = useGetMySeafarerDocumentsQuery();
-  const { data: medicals, isLoading: loadingMedicals } = useGetMyMedicalCertificatesQuery();
-  const { data: seaService, isLoading: loadingSeaService } = useGetMySeaServiceRecordsQuery();
-  const { data: registrationData, isLoading: loadingRegistration } =
-    useGetMySeafarerRegistrationQuery();
-
-  const [getCertificateUrl, { isLoading: isDownloadingCert }] = useGetCertificateUrlMutation();
-  const { renewLicense, isRenewing } = useRenewLicense();
-
-  const registration = registrationData?.registration ?? null;
-  const { data: registrationFiles } = useGetAttachmentsQuery(
-    { ownerType: 'SEAFARER_REGISTRATION', ownerId: registration?.id ?? '' },
-    { skip: !registration },
-  );
-
-  async function openCertificate(licenseId: string) {
-    try {
-      const { url } = await getCertificateUrl(licenseId).unwrap();
-      setPreview({ url, title: t('licensing.card.downloadCertificate') });
-    } catch (err) {
-      notify.error(extractErrorMessage(err), t('documents.openFailed'));
-    }
-  }
-
-  const licenceItems = licences?.items ?? [];
-  const issued = [issuedDocuments?.seamanBook, issuedDocuments?.btc].filter(
-    (d): d is SeafarerDocument => Boolean(d),
-  );
 
   return (
     <Container size="lg" py="xl">
-      <Stack gap="md">
-        <div>
-          <Title order={3}>{t('documents.title')}</Title>
-          <Text fz="sm" c="dimmed">
-            {t('documents.subtitle')}
-          </Text>
-        </div>
-
-        <Tabs defaultValue="license" variant="outline" radius="md" keepMounted={false}>
-          <Tabs.List mb="md">
-            <Tabs.Tab value="license" leftSection={<IconCertificate size={16} />}>
-              {t('documents.tabs.license')}
-            </Tabs.Tab>
-            <Tabs.Tab value="medical" leftSection={<IconHeartbeat size={16} />}>
-              {t('documents.tabs.medical')}
-            </Tabs.Tab>
-            <Tabs.Tab value="sea-service" leftSection={<IconAnchor size={16} />}>
-              {t('documents.tabs.seaService')}
-            </Tabs.Tab>
-            <Tabs.Tab value="personal" leftSection={<IconIdBadge2 size={16} />}>
-              {t('documents.tabs.personal')}
-            </Tabs.Tab>
-          </Tabs.List>
-
-          {/* ── Licences and EMA-issued documents ───────────────────────── */}
-          <Tabs.Panel value="license">
-            <Stack gap="xl">
-              {issued.length > 0 && (
-                <div>
-                  <Text fw={700} fz="sm" mb="sm" tt="uppercase" c="dimmed">
-                    {t('documents.issuedTitle')}
-                  </Text>
-                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-                    {issued.map((document) => (
-                      <IssuedDocumentCard
-                        key={document.id}
-                        document={document}
-                        onPreview={setPreview}
-                      />
-                    ))}
-                  </SimpleGrid>
-                </div>
-              )}
-
-              <div>
-                <Text fw={700} fz="sm" mb="sm" tt="uppercase" c="dimmed">
-                  {t('documents.licensesTitle')}
-                </Text>
-                {loadingLicences ? (
-                  <Loader size="sm" type="oval" />
-                ) : licenceItems.length === 0 ? (
-                  <Text fz="sm" c="dimmed">
-                    {t('documents.empty.licenses')}
-                  </Text>
-                ) : (
-                  // Two per row, not three: licence type names run long
-                  // ("Multimodal Transport Operator License") and a third
-                  // column truncates them.
-                  <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
-                    {licenceItems.map((licence) => (
-                      <LicenseCard
-                        key={licence.id}
-                        license={licence}
-                        isDownloading={isDownloadingCert}
-                        isRenewing={isRenewing}
-                        onDownload={() => openCertificate(licence.id)}
-                        onRenew={() => renewLicense(licence)}
-                      />
-                    ))}
-                  </SimpleGrid>
-                )}
-              </div>
-            </Stack>
-          </Tabs.Panel>
-
-          {/* ── Medical certificates ────────────────────────────────────── */}
-          <Tabs.Panel value="medical">
-            {loadingMedicals ? (
-              <Loader size="sm" type="oval" />
-            ) : (medicals ?? []).length === 0 ? (
-              <Text fz="sm" c="dimmed">
-                {t('documents.empty.medical')}
-              </Text>
-            ) : (
-              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-                {(medicals ?? []).map((record) => (
-                  <Card key={record.id} withBorder radius="md" padding="md">
-                    <Group justify="space-between" align="flex-start" wrap="nowrap">
-                      <Group gap="sm" wrap="nowrap">
-                        <ThemeIcon size="lg" variant="light" color="pink" radius="md">
-                          <IconHeartbeat size={18} stroke={1.5} />
-                        </ThemeIcon>
-                        <div>
-                          <Text fz="sm" fw={600}>
-                            {record.issuerName}
-                          </Text>
-                          {record.certificateNumber && (
-                            <Text fz="xs" c="dimmed">
-                              {t('seaRecords.columns.certNumber', {
-                                number: record.certificateNumber,
-                              })}
-                            </Text>
-                          )}
-                        </div>
-                      </Group>
-                      <Badge
-                        size="sm"
-                        variant="light"
-                        color={RECORD_STATUS_COLOR[record.status]}
-                        style={{ flexShrink: 0 }}
-                      >
-                        {t(`seaRecords.columns.recordStatus.${record.status}`, {
-                          defaultValue: record.status,
-                        })}
-                      </Badge>
-                    </Group>
-
-                    <Divider my="sm" />
-
-                    <Stack gap={4}>
-                      <FieldRow
-                        label={t('seaRecords.columns.issued')}
-                        value={showDate(record.issueDate)}
-                      />
-                      <FieldRow
-                        label={t('seaRecords.columns.expires')}
-                        value={showDate(record.expiryDate)}
-                      />
-                      <FieldRow
-                        label={t('seaRecords.columns.fitness')}
-                        value={t(`seaRecords.columns.fitnessOptions.${record.fitnessStatus}`, {
-                          defaultValue: record.fitnessStatus,
-                        })}
-                      />
-                    </Stack>
-
-                    <Divider my="sm" />
-                    <RecordFiles
-                      ownerType="MEDICAL_CERTIFICATE"
-                      ownerId={record.id}
-                      onPreview={setPreview}
-                    />
-                  </Card>
-                ))}
-              </SimpleGrid>
-            )}
-          </Tabs.Panel>
-
-          {/* ── Sea service records ─────────────────────────────────────── */}
-          <Tabs.Panel value="sea-service">
-            {loadingSeaService ? (
-              <Loader size="sm" type="oval" />
-            ) : (seaService ?? []).length === 0 ? (
-              <Text fz="sm" c="dimmed">
-                {t('documents.empty.seaService')}
-              </Text>
-            ) : (
-              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-                {(seaService ?? []).map((record) => (
-                  <Card key={record.id} withBorder radius="md" padding="md">
-                    <Group justify="space-between" align="flex-start" wrap="nowrap">
-                      <Group gap="sm" wrap="nowrap">
-                        <ThemeIcon size="lg" variant="light" color="blue" radius="md">
-                          <IconAnchor size={18} stroke={1.5} />
-                        </ThemeIcon>
-                        <div>
-                          <Text fz="sm" fw={600}>
-                            {record.vesselName}
-                          </Text>
-                          {record.imoNumber && (
-                            <Text fz="xs" c="dimmed">
-                              {t('seaRecords.columns.imo', { number: record.imoNumber })}
-                            </Text>
-                          )}
-                        </div>
-                      </Group>
-                      <Badge
-                        size="sm"
-                        variant="light"
-                        color={RECORD_STATUS_COLOR[record.status]}
-                        style={{ flexShrink: 0 }}
-                      >
-                        {t(`seaRecords.columns.recordStatus.${record.status}`, {
-                          defaultValue: record.status,
-                        })}
-                      </Badge>
-                    </Group>
-
-                    <Divider my="sm" />
-
-                    <Stack gap={4}>
-                      <FieldRow label={t('seaRecords.columns.rank')} value={record.rank} />
-                      <FieldRow
-                        label={t('seaRecords.columns.from')}
-                        value={showDate(record.engagementDate)}
-                      />
-                      <FieldRow
-                        label={t('seaRecords.columns.to')}
-                        value={showDate(record.dischargeDate)}
-                      />
-                    </Stack>
-
-                    <Divider my="sm" />
-                    <RecordFiles
-                      ownerType="SEA_SERVICE_RECORD"
-                      ownerId={record.id}
-                      onPreview={setPreview}
-                    />
-                  </Card>
-                ))}
-              </SimpleGrid>
-            )}
-          </Tabs.Panel>
-
-          {/* ── Personal documents from the seafarer registration ───────── */}
-          <Tabs.Panel value="personal">
-            {loadingRegistration ? (
-              <Loader size="sm" type="oval" />
-            ) : !registration ? (
-              // Personal documents are uploaded against a registration, so
-              // without one there is nothing to show — and nowhere to put an
-              // upload either.
-              <Alert color="blue" icon={<IconInfoCircle size={16} />}>
-                <Stack gap="xs" align="flex-start">
-                  <Text fz="sm">{t('documents.personal.noRegistration')}</Text>
-                  <Button
-                    size="xs"
-                    variant="light"
-                    component={Link}
-                    to="/seafarer-registration"
-                  >
-                    {t('documents.personal.startRegistration')}
-                  </Button>
-                </Stack>
-              </Alert>
-            ) : (
-              <Stack gap="md">
-                <Text fz="sm" c="dimmed">
-                  {t('documents.personal.description')}
-                </Text>
-                <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-                  {documentSlots(
-                    Boolean(registration.passportNumber),
-                    registration.nationality,
-                  ).map((slot) => {
-                    const attachment = (registrationFiles ?? []).find(
-                      (a) => a.documentKey === slot.key,
-                    );
-                    const files = attachment?.files ?? [];
-                    return (
-                      <Card
-                        key={slot.key}
-                        withBorder
-                        radius="md"
-                        padding="md"
-                        style={{
-                          borderStyle: files.length ? 'solid' : 'dashed',
-                          borderColor: files.length
-                            ? 'var(--mantine-color-teal-4)'
-                            : slot.isRequired
-                              ? 'var(--mantine-color-orange-4)'
-                              : undefined,
-                        }}
-                      >
-                        <Group justify="space-between" align="flex-start" wrap="nowrap">
-                          <div>
-                            <Text fz="sm" fw={600}>
-                              {slot.name}
-                            </Text>
-                            {slot.description && (
-                              <Text fz="xs" c="dimmed">
-                                {slot.description}
-                              </Text>
-                            )}
-                          </div>
-                          <Badge
-                            size="sm"
-                            variant="light"
-                            color={files.length ? 'teal' : slot.isRequired ? 'orange' : 'gray'}
-                            style={{ flexShrink: 0 }}
-                          >
-                            {files.length
-                              ? t('documents.personal.uploaded')
-                              : t('documents.personal.missing')}
-                          </Badge>
-                        </Group>
-
-                        <Divider my="sm" />
-
-                        {files.length === 0 ? (
-                          <Text fz="xs" c="dimmed">
-                            {t('documents.files.none')}
-                          </Text>
-                        ) : (
-                          <Stack gap={4}>
-                            {files.map((file) => (
-                              <Group key={file.id} gap={6} wrap="nowrap">
-                                <IconPaperclip size={14} />
-                                {file.url ? (
-                                  <Anchor
-                                    component="button"
-                                    type="button"
-                                    fz="xs"
-                                    onClick={() =>
-                                      setPreview({
-                                        url: file.url as string,
-                                        title: file.originalName,
-                                      })
-                                    }
-                                  >
-                                    {file.originalName}
-                                  </Anchor>
-                                ) : (
-                                  <Text fz="xs">{file.originalName}</Text>
-                                )}
-                              </Group>
-                            ))}
-                          </Stack>
-                        )}
-                      </Card>
-                    );
-                  })}
-                </SimpleGrid>
-              </Stack>
-            )}
-          </Tabs.Panel>
-        </Tabs>
-      </Stack>
-
-      <PdfPreviewModal
-        opened={Boolean(preview)}
-        onClose={() => setPreview(null)}
-        url={preview?.url ?? ''}
-        title={preview?.title}
+      <FeatureUnavailable
+        title={t('featureUnavailable.documents.title')}
+        description={t('featureUnavailable.documents.description')}
       />
     </Container>
   );

From 4b733d4dfb6e9771eea597bb500b3c7e19d494c2 Mon Sep 17 00:00:00 2001
From: Nati <natinigussie7@gmail.com>
Date: Fri, 28 Aug 2026 09:40:13 +0000
Subject: [PATCH 15/16] feat(biometric-enrollment): add BSID generation
 functionality and update translations

---
 .../pages/BiometricEnrollmentPage.tsx         | 59 ++++++++++++++++++-
 apps/backoffice/src/app/i18n/locales/am.ts    |  1 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  1 +
 .../biometric-enrollment-api.ts               | 10 ++++
 .../features/licensing/licensing.helpers.ts   |  3 +
 .../lib/features/licensing/licensing.types.ts |  3 +
 libs/auth/src/lib/types/auth.types.ts         |  2 +
 7 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
index 4b6e1e5e1..5ab70f38e 100644
--- a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
+++ b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
@@ -20,6 +20,7 @@ import {
   extractErrorMessage,
   openAuthedDocument,
   useEnrollBiometricMutation,
+  useGenerateBsidMutation,
   useGetBiometricEnrollmentsQuery,
   useGetBiometricSimulateCapabilitiesQuery,
   useListSeafarerRegistrationsQuery,
@@ -108,6 +109,11 @@ export function BiometricEnrollmentPage() {
   // ALLOW_BIOMETRIC_SIMULATION=true, same shortcut the payment bypass uses.
   const { data: capabilities } = useGetBiometricSimulateCapabilitiesQuery();
   const simulateEnabled = capabilities?.simulateEnabled ?? false;
+  const [generateBsid, { isLoading: generatingBsid }] = useGenerateBsidMutation();
+  // Seeded from the seafarer registration list (which does not carry BSID
+  // yet) and updated locally once generated — this screen's only source of
+  // truth for it until the registry surfaces the profile's BSID directly.
+  const [bsid, setBsid] = useState<string | null>(null);
   const [enroll, { isLoading: enrolling }] = useEnrollBiometricMutation();
   const [revoke, { isLoading: revoking }] = useRevokeBiometricEnrollmentMutation();
   const [printing, setPrinting] = useState(false);
@@ -134,6 +140,17 @@ export function BiometricEnrollmentPage() {
     }
   }
 
+  async function handleGenerateBsid() {
+    if (!profileId) return;
+    try {
+      const result = await generateBsid(profileId).unwrap();
+      setBsid(result.bsid);
+      notify.success(`BSID ${result.bsid} generated.`);
+    } catch (err) {
+      notify.error(extractErrorMessage(err, 'Could not generate BSID.'));
+    }
+  }
+
   async function handleRevoke(id: string) {
     if (!profileId) return;
     try {
@@ -167,7 +184,12 @@ export function BiometricEnrollmentPage() {
       />
 
       {!selected ? (
-        <ProfilePicker onPick={setSelected} />
+        <ProfilePicker
+          onPick={(r) => {
+            setSelected(r);
+            setBsid(null);
+          }}
+        />
       ) : (
         <Stack gap="md">
           <Card withBorder radius="md" p="md">
@@ -176,7 +198,15 @@ export function BiometricEnrollmentPage() {
                 <Text fw={600}>{applicantName(selected)}</Text>
                 <Text fz="xs" c="dimmed" ff="monospace">{selected.seafarerNumber}</Text>
               </div>
-              <Button variant="subtle" size="xs" leftSection={<IconX size={14} />} onClick={() => setSelected(null)}>
+              <Button
+                variant="subtle"
+                size="xs"
+                leftSection={<IconX size={14} />}
+                onClick={() => {
+                  setSelected(null);
+                  setBsid(null);
+                }}
+              >
                 Change seafarer
               </Button>
             </Group>
@@ -204,6 +234,31 @@ export function BiometricEnrollmentPage() {
             )}
           </Card>
 
+          <Card withBorder radius="md" p="md">
+            <Text fz="sm" fw={600} mb="sm">Biometric Subject ID (BSID)</Text>
+            <Text fz="xs" c="dimmed" mb="sm">
+              Required before this registration can be approved. Generating it is final —
+              confirm the capture is good first.
+            </Text>
+            <Group justify="space-between">
+              {bsid ? (
+                <StatusBadge tone="success" label={`BSID ${bsid}`} />
+              ) : (
+                <Badge color="gray" variant="light">Not generated</Badge>
+              )}
+              {!bsid && (
+                <Button
+                  size="xs"
+                  onClick={handleGenerateBsid}
+                  loading={generatingBsid}
+                  disabled={!hasActive('FINGERPRINT') && !hasActive('FACE')}
+                >
+                  Generate BSID
+                </Button>
+              )}
+            </Group>
+          </Card>
+
           <Card withBorder radius="md" p="md">
             <Group justify="space-between" mb="sm">
               <Text fz="sm" fw={600}>On file</Text>
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index e83e9929a..3f03fe1c8 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -868,6 +868,7 @@ export const am: Translations = {
       DRAFT: "ረቂቅ",
       SUBMITTED: "ቀርቧል",
       UNDER_REVIEW: "በግምገማ ላይ",
+      AWAITING_BIOMETRICS: "ባዮሜትሪክ በመጠባበቅ ላይ",
       UNDER_EVALUATION: "በምዘና ላይ",
       RESUBMIT_REQUIRED: "እንደገና ማቅረብ ያስፈልጋል",
       INSPECTION_PENDING: "ምርመራ በመጠባበቅ ላይ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index ff4fc4f15..748d1a9ff 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -875,6 +875,7 @@ export const en = {
       DRAFT: 'Draft',
       SUBMITTED: 'Submitted',
       UNDER_REVIEW: 'Under Review',
+      AWAITING_BIOMETRICS: 'Awaiting Biometrics',
       UNDER_EVALUATION: 'Under Evaluation',
       RESUBMIT_REQUIRED: 'Resubmit Required',
       INSPECTION_PENDING: 'Inspection Pending',
diff --git a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
index d6117dd25..db42102fa 100644
--- a/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
+++ b/libs/api/src/lib/features/biometric-enrollment/biometric-enrollment-api.ts
@@ -44,6 +44,15 @@ export const biometricEnrollmentApi = baseApi
         }),
         invalidatesTags: (_r, error, { profileId }) => (error ? [] : [forProfile(profileId)]),
       }),
+
+      /** Stamps the profile's BSID once enrollment is confirmed. Requires an active enrollment. */
+      generateBsid: builder.mutation<{ id: string; bsid: string | null }, string>({
+        query: (profileId) => ({
+          url: `/biometric-enrollments/profile/${profileId}/generate-bsid`,
+          method: 'POST',
+        }),
+        invalidatesTags: (_r, error, profileId) => (error ? [] : [forProfile(profileId)]),
+      }),
     }),
     overrideExisting: false,
   });
@@ -54,4 +63,5 @@ export const {
   useGetMyBiometricEnrollmentsQuery,
   useGetBiometricSimulateCapabilitiesQuery,
   useRevokeBiometricEnrollmentMutation,
+  useGenerateBsidMutation,
 } = biometricEnrollmentApi;
diff --git a/libs/api/src/lib/features/licensing/licensing.helpers.ts b/libs/api/src/lib/features/licensing/licensing.helpers.ts
index 888b57be9..390ee330b 100644
--- a/libs/api/src/lib/features/licensing/licensing.helpers.ts
+++ b/libs/api/src/lib/features/licensing/licensing.helpers.ts
@@ -63,6 +63,7 @@ export const STATUS_LABELS: Record<LicenseStatus, string> = {
   DRAFT: 'Draft',
   SUBMITTED: 'Submitted',
   UNDER_REVIEW: 'Under Review',
+  AWAITING_BIOMETRICS: 'Awaiting Biometrics',
   UNDER_EVALUATION: 'Under Evaluation',
   RESUBMIT_REQUIRED: 'Resubmit Required',
   INSPECTION_PENDING: 'Inspection Pending',
@@ -93,6 +94,7 @@ export const STATUS_COLORS: Record<LicenseStatus, string> = {
   DRAFT: 'gray',
   SUBMITTED: 'blue',
   UNDER_REVIEW: 'indigo',
+  AWAITING_BIOMETRICS: 'indigo',
   UNDER_EVALUATION: 'indigo',
   RESUBMIT_REQUIRED: 'orange',
   INSPECTION_PENDING: 'cyan',
@@ -132,6 +134,7 @@ export const STATUS_PROGRESS: Record<LicenseStatus, number> = {
   DRAFT: 5,
   SUBMITTED: 15,
   UNDER_REVIEW: 30,
+  AWAITING_BIOMETRICS: 30,
   UNDER_EVALUATION: 45,
   RESUBMIT_REQUIRED: 30,
   INSPECTION_PENDING: 55,
diff --git a/libs/api/src/lib/features/licensing/licensing.types.ts b/libs/api/src/lib/features/licensing/licensing.types.ts
index 0fac20c6e..e14bae67e 100644
--- a/libs/api/src/lib/features/licensing/licensing.types.ts
+++ b/libs/api/src/lib/features/licensing/licensing.types.ts
@@ -25,6 +25,9 @@ export type LicenseStatus =
   | "DRAFT"
   | "SUBMITTED"
   | "UNDER_REVIEW"
+  // Seafarer registration only: same slot UNDER_REVIEW occupies elsewhere,
+  // but approval is blocked until the applicant's profile has a BSID.
+  | "AWAITING_BIOMETRICS"
   | "UNDER_EVALUATION"
   // Employee filed their review; parked with the team leader for a decision.
   | "REVIEW_REPORTED"
diff --git a/libs/auth/src/lib/types/auth.types.ts b/libs/auth/src/lib/types/auth.types.ts
index 056e574e5..ae7066a46 100644
--- a/libs/auth/src/lib/types/auth.types.ts
+++ b/libs/auth/src/lib/types/auth.types.ts
@@ -84,6 +84,8 @@ export interface CurrentProfile {
    * registration is approved, null before that.
    */
   seafarerNumber?: string | null;
+  /** Biometric Subject ID — stamped by staff once biometric enrollment is confirmed. */
+  bsid?: string | null;
   seafarerStatus?: 'ACTIVE' | 'INACTIVE' | 'PENDING' | 'SUSPENDED' | null;
   seafarerDepartment?: 'DECK' | 'ENGINE' | 'CATERING' | null;
   seafarerStatusReason?: string | null;

From 215487fd0fd051a3fead1cf71ace7d4d36ff54d7 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 10:53:53 +0000
Subject: [PATCH 16/16] fix: adjust SeafarerRegistryPage container padding and
 wrap table in scroll container for responsiveness

---
 .../features/seafarer-registry/pages/SeafarerRegistryPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx
index fc9349789..9ddebf0a0 100644
--- a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx
@@ -184,7 +184,7 @@ export function SeafarerRegistryPage() {
       </SimpleGrid>
 
       {/* Search + filters */}
-      <Paper withBorder radius="lg" p="xl">
+      <Paper withBorder radius="lg" p={{ base: 'md', sm: 'xl' }}>
         <Group mb="sm" gap="sm" justify="space-between">
           <TextInput
             placeholder="Search by name, seafarer ID, or seaman book…"
@@ -215,6 +215,7 @@ export function SeafarerRegistryPage() {
 
         <Text fz="xs" c="dimmed" mb="sm">{filtered.length} seafarer(s) found</Text>
 
+        <Table.ScrollContainer minWidth={1100}>
         <Table highlightOnHover fz="sm" verticalSpacing="sm">
           <Table.Thead bg="var(--mantine-color-default-hover)">
             <Table.Tr>
@@ -278,6 +279,7 @@ export function SeafarerRegistryPage() {
             )}
           </Table.Tbody>
         </Table>
+        </Table.ScrollContainer>
       </Paper>
 
       <DetailModal sf={selected} opened={!!selected} onClose={() => setSelected(null)} />