Merge pull request #45 from Tria-plc/WorkflowChange

Workflow change
2026-09-01 22:53:27 +00:00 · 2026-08-29 13:04:32 +03:00
parent f158f3e649 9c81731759
commit d5e34b59ff
53 changed files with 3016 additions and 1734 deletions
--- a/.env.example
+++ b/.env.example
@@ -12,10 +12,8 @@
 # frontend never speaks to Fayda directly.

 # Base URL of the emaapi backend, including the /api prefix.
-# 3001, not 3000: the portal itself takes 3000 in development, because that is
-# the port in the Fayda redirect URI registered for local testing. Set PORT=3001
-# in emaapi's .env to match.
-VITE_BASE_API_URL=http://localhost:3001/api
+# The portal runs on 4200 and the local API runs on 3000.
+VITE_BASE_API_URL=http://localhost:3000/api

 # Serve fixture data instead of calling the API. Any value other than "true"
 # uses the real backend.
@@ -25,7 +23,7 @@ VITE_USE_MOCKS=false
 # Host ports published by docker-compose.yml. It also expects per-app env files
 # at apps/portal/.env and apps/backoffice/.env, which can each be a copy of this
 # file. Ignored when running the Vite dev servers, which serve the portal on
-# 3000 and the backoffice on 4201.
+# 4200 and the backoffice on 4201.
 # EMA_PORTAL_PORT=8021
 # EMA_BACKOFFICE_PORT=8022

@@ -34,6 +32,5 @@ VITE_USE_MOCKS=false
 # page at /callback and /signup/fayda/callback, and whichever path is registered
 # with Fayda must match the API's FAYDA_REDIRECT_URI exactly.
 #
-# The value being registered first is http://localhost:3001/callback, so the
-# portal's dev server now listens on 3000 and emaapi moves to 3001. Nothing
+# Register http://localhost:4200/callback with Fayda. Nothing
 # extra to run — `nx serve portal` already binds the right port.
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ npm run dev:all

 | Variable                      | Required     | Default                 | Description                                                                                                                              |
 | ----------------------------- | ------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `VITE_BASE_API_URL`           | Yes          | `http://localhost:3001` | Base URL for all API requests                                                                                                            |
+| `VITE_BASE_API_URL`           | Yes          | `http://localhost:3000` | Base URL for all API requests                                                                                                            |
 | `VITE_ENABLE_DEVELOPER_TOOLS` | No           | `true`                  | Toggle Redux DevTools                                                                                                                    |
 | `VITE_PAYMENT_API_URL`        | Yes (portal) | —                       | Base URL for the payment service (portal `payment` feature). Can be a same-origin path if a backend proxy is later placed in front of it |
 | `VITE_PAYMENT_SERVICE_TOKEN`  | Yes (portal) | —                       | Sent as `x-service-token` on every payment request. Note: bundled `VITE_*` values are public in the built app, not secret                |
--- a/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
+++ b/apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
@@ -14,11 +14,10 @@ import {
  TextInput,
  ThemeIcon,
 } from '@mantine/core';
-import { IconAlertTriangle, IconFingerprint, IconPrinter, IconScan, IconSearch, IconX } from '@tabler/icons-react';
+import { IconAlertTriangle, IconFingerprint, IconScan, IconSearch, IconX } from '@tabler/icons-react';
 import { useDebouncedValue } from '@mantine/hooks';
 import {
  extractErrorMessage,
-  openAuthedDocument,
  useEnrollBiometricMutation,
  useGenerateBsidMutation,
  useGetBiometricEnrollmentsQuery,
@@ -52,12 +51,19 @@ function fakeTemplate(): string {
  return btoa(String.fromCharCode(...bytes));
 }

-/** Pick a registered seafarer to enroll — approved registrations carry a profileId. */
+/**
+ * Pick a seafarer waiting on enrolment.
+ *
+ * AWAITING_BIOMETRICS only: enrolment is the step that unblocks the review, so
+ * this queue is exactly the registrations held for it. An approved seafarer has
+ * already been through here — listing them would invite a second capture of
+ * someone who is finished.
+ */
 function ProfilePicker({ onPick }: { onPick: (r: SeafarerRegistration) => void }) {
  const [search, setSearch] = useState('');
  const [debounced] = useDebouncedValue(search, 300);
  const { data, isFetching } = useListSeafarerRegistrationsQuery({
-    status: 'APPROVED',
+    status: 'AWAITING_BIOMETRICS',
    search: debounced || undefined,
    take: 10,
  });
@@ -65,7 +71,7 @@ function ProfilePicker({ onPick }: { onPick: (r: SeafarerRegistration) => void }
  return (
    <Card withBorder radius="md" p="md">
      <TextInput
-        placeholder="Search seafarer by name, ID or registration number…"
+        placeholder="Search seafarers awaiting enrolment…"
        leftSection={<IconSearch size={14} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -78,14 +84,16 @@ function ProfilePicker({ onPick }: { onPick: (r: SeafarerRegistration) => void }
            <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>
+                {/* Not seafarerNumber: that is only issued on approval, which
+                    is downstream of this screen, so it is always blank here. */}
+                <Text fz="xs" c="dimmed" ff="monospace">{r.registrationNumber}</Text>
              </Table.Td>
            </Table.Tr>
          ))}
          {!isFetching && (data?.items ?? []).length === 0 && (
            <Table.Tr>
              <Table.Td>
-                <Text fz="sm" c="dimmed">No registered seafarer matches.</Text>
+                <Text fz="sm" c="dimmed">No seafarer is waiting on enrolment.</Text>
              </Table.Td>
            </Table.Tr>
          )}
@@ -116,7 +124,6 @@ export function BiometricEnrollmentPage() {
  const [bsid, setBsid] = useState<string | null>(null);
  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),
@@ -161,26 +168,11 @@ export function BiometricEnrollmentPage() {
    }
  }

-  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."
+        subtitle="Capture a fingerprint or face template for a seafarer awaiting enrolment, then issue their BSID."
      />

      {!selected ? (
@@ -196,7 +188,7 @@ export function BiometricEnrollmentPage() {
            <Group justify="space-between">
              <div>
                <Text fw={600}>{applicantName(selected)}</Text>
-                <Text fz="xs" c="dimmed" ff="monospace">{selected.seafarerNumber}</Text>
+                <Text fz="xs" c="dimmed" ff="monospace">{selected.registrationNumber}</Text>
              </div>
              <Button
                variant="subtle"
@@ -260,18 +252,7 @@ export function BiometricEnrollmentPage() {
          </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>
+            <Text fz="sm" fw={600} mb="sm">On file</Text>
            {isLoading ? (
              <Loader size="sm" />
            ) : (
--- a/apps/backoffice/src/app/features/configuration/components/NumberFormatTab.tsx
+++ b/apps/backoffice/src/app/features/configuration/components/NumberFormatTab.tsx
@@ -38,6 +38,7 @@ const SCOPES: { value: NumberFormatScope; label: string }[] = [
  { value: 'SEAFARER_NUMBER', label: 'Seafarer Number' },
  { value: 'SEAMAN_BOOK_NUMBER', label: 'Seaman Book Number' },
  { value: 'BTC_NUMBER', label: 'BTC Number' },
+  { value: 'BSID', label: 'Biometric Subject ID (BSID)' },
 ];

 const scopeLabel = (scope: NumberFormatScope) =>
--- a/apps/backoffice/src/app/features/configuration/types/configuration.ts
+++ b/apps/backoffice/src/app/features/configuration/types/configuration.ts
@@ -51,7 +51,8 @@ export interface UpdateProfessionPayload {
 export type NumberFormatScope =
  | 'SEAFARER_NUMBER'
  | 'SEAMAN_BOOK_NUMBER'
-  | 'BTC_NUMBER';
+  | 'BTC_NUMBER'
+  | 'BSID';

 /**
 * The shape of a generated identifier — prefix, optional year, separator and
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx
@@ -1,14 +1,21 @@
 import type { Dispatch, ReactNode, SetStateAction } from "react";
-import { Badge, Checkbox, Text, Tooltip } from "@mantine/core";
+import { Badge, Checkbox, Group, Text, Tooltip } from "@mantine/core";
 import type { TFunction } from "i18next";
 import {
  STATUS_COLORS,
  STATUS_LABELS,
  applicantOrCompanyName,
  localized,
+  type ApplicationKind,
  type LicenseApplication,
  type QueueFilter,
 } from "@ema-platform/api";
+
+const KIND_COLOR: Record<ApplicationKind, string> = {
+  NEW: "blue",
+  RENEWAL: "teal",
+  REISSUE: "orange",
+};
 import type { AdvancedColumn } from "@ema-platform/ui";
 import { dateDisplayer } from "@ema-platform/shared";
 import { computeSla } from "../../sla";
@@ -112,9 +119,19 @@ export function licenseQueueColumns(
    {
      header: t("queue.typeCol", "Type"),
      cell: ({ row }) => (
-        <Text size="sm">
-          {localized(row.original.licenseType?.name, locale) || "—"}
-        </Text>
+        <Group gap={6} wrap="nowrap">
+          <Text size="sm">
+            {localized(row.original.licenseType?.name, locale) || "—"}
+          </Text>
+          {row.original.kind !== "NEW" && (
+            <Badge size="xs" variant="light" color={KIND_COLOR[row.original.kind]}>
+              {t(
+                `queue.kindValues.${row.original.kind}`,
+                row.original.kind === "RENEWAL" ? "Renewal" : "Replacement",
+              )}
+            </Badge>
+          )}
+        </Group>
      ),
    },
    {
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx
@@ -42,6 +42,7 @@ import {
  useGetQueueCountsQuery,
  useGetQueueQuery,
  useLazyExportApplicationsQuery,
+  type ApplicationKind,
  type LicenseApplication,
  type LicenseStatus,
  type LicenseType,
@@ -437,6 +438,7 @@ export function LicenseQueuePage() {
  const hasFacets = Boolean(
    urlFilter.status?.length ||
    urlFilter.licenseTypeId ||
+    urlFilter.kind ||
    urlFilter.assignee ||
    urlFilter.submittedFrom ||
    debouncedSearch,
@@ -589,6 +591,19 @@ export function LicenseQueuePage() {
              w={220}
            />
          )}
+          <Select
+            label={t("queue.kind", "Application kind")}
+            placeholder={t("queue.anyType", "Any")}
+            data={[
+              { value: "NEW", label: t("queue.kindValues.NEW", "New") },
+              { value: "RENEWAL", label: t("queue.kindValues.RENEWAL", "Renewal") },
+              { value: "REISSUE", label: t("queue.kindValues.REISSUE", "Replacement") },
+            ]}
+            value={urlFilter.kind ?? null}
+            onChange={(v) => setFacet({ kind: (v as ApplicationKind) ?? undefined })}
+            clearable
+            w={180}
+          />
          <AmharicDatePicker
            label={t("queue.submittedFrom", "Submitted from")}
            value={urlFilter.submittedFrom ?? ""}
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -269,6 +269,9 @@ export function LicenseReviewPage() {
  const [rescheduleReason, setRescheduleReason] = useState("");
  const [issuanceOpen, setIssuanceOpen] = useState(false);
  const [issuanceDate, setIssuanceDate] = useState("");
+  const [issuancePeriod, setIssuancePeriod] = useState<"MORNING" | "AFTERNOON">(
+    "MORNING",
+  );
  const [resultOpen, setResultOpen] = useState(false);
  const [scheduleExamOpen, setScheduleExamOpen] = useState(false);
  const [examOutcomeOpen, setExamOutcomeOpen] = useState(false);
@@ -884,6 +887,11 @@ export function LicenseReviewPage() {
            <Badge color={STATUS_COLORS[status]} variant="light">
              {t(`queue.statusValues.${status}`, STATUS_LABELS[status])}
            </Badge>
+            {data.issuedLicenseStatus === "SUPERSEDED" && (
+              <Badge color="gray" variant="light">
+                {t("review.certificateSuperseded", "Certificate superseded")}
+              </Badge>
+            )}
            {app.adjustmentRound > 0 && (
              <Badge color="orange" variant="light" size="sm">
                {t("review.round", {
@@ -1585,6 +1593,14 @@ export function LicenseReviewPage() {
            value={issuanceDate}
            onChange={setIssuanceDate}
          />
+          <SegmentedControl
+            value={issuancePeriod}
+            onChange={(value) => setIssuancePeriod(value as "MORNING" | "AFTERNOON")}
+            data={[
+              { value: "MORNING", label: t("review.morning", "Morning") },
+              { value: "AFTERNOON", label: t("review.afternoon", "Afternoon") },
+            ]}
+          />
          <ModalFooter>
            {/* Span-wrapped like DecisionBar's ActionButton — Mantine strips
                pointer events from a disabled control, and a disabled button
@@ -1605,6 +1621,7 @@ export function LicenseReviewPage() {
                        await scheduleIssuance({
                          id,
                          scheduledDate: issuanceDate,
+                          scheduledPeriod: issuancePeriod,
                        }).unwrap();
                        setIssuanceOpen(false);
                      },
--- a/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/actions.tsx
+++ b/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/actions.tsx
@@ -0,0 +1,71 @@
+import { Button, Group } from '@mantine/core';
+import { IconCheck, IconUserCheck, IconX } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
+import type { AdvancedColumn } from '@ema-platform/ui';
+import type { PickupAppointment } from '@ema-platform/api';
+import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
+
+export function pickupDeskActionsColumn(
+  t: TFunction,
+  handlers: {
+    onCheckIn: (appointment: PickupAppointment) => void;
+    onIssue: (appointment: PickupAppointment) => void;
+    onNoShow: (appointment: PickupAppointment) => void;
+  },
+  loadingId: string | null,
+): AdvancedColumn<PickupAppointment> {
+  return {
+    header: '',
+    size: 260,
+    align: 'right',
+    cell: ({ row }) => {
+      const appointment = row.original;
+      const loading = loadingId === appointment.id;
+      return (
+        <Group gap="xs" justify="flex-end" wrap="nowrap">
+          {appointment.status === 'SCHEDULED' && (
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_PICKUP_DESK]} hideOnly>
+              <Button
+                size="xs"
+                variant="light"
+                loading={loading}
+                leftSection={<IconUserCheck size={14} />}
+                onClick={() => handlers.onCheckIn(appointment)}
+              >
+                {t('pickupDesk.checkIn', 'Check in')}
+              </Button>
+            </RequirePermission>
+          )}
+          {(appointment.status === 'SCHEDULED' || appointment.status === 'CHECKED_IN') && (
+            <>
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.ISSUE_CERTIFICATE]} hideOnly>
+                <Button
+                  size="xs"
+                  variant="filled"
+                  color="teal"
+                  loading={loading}
+                  leftSection={<IconCheck size={14} />}
+                  onClick={() => handlers.onIssue(appointment)}
+                >
+                  {t('pickupDesk.issue', 'Issue')}
+                </Button>
+              </RequirePermission>
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_PICKUP_DESK]} hideOnly>
+                <Button
+                  size="xs"
+                  variant="subtle"
+                  color="red"
+                  loading={loading}
+                  leftSection={<IconX size={14} />}
+                  onClick={() => handlers.onNoShow(appointment)}
+                >
+                  {t('pickupDesk.noShow', 'No-show')}
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+        </Group>
+      );
+    },
+  };
+}
--- a/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/columns.tsx
+++ b/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/columns.tsx
@@ -0,0 +1,51 @@
+import { Badge, Text } from '@mantine/core';
+import type { TFunction } from 'i18next';
+import type { AdvancedColumn } from '@ema-platform/ui';
+import type { PickupAppointment, PickupOffice } from '@ema-platform/api';
+
+const STATUS_COLOR: Record<PickupAppointment['status'], string> = {
+  SCHEDULED: 'cyan',
+  CHECKED_IN: 'yellow',
+  ISSUED: 'green',
+  NO_SHOW: 'red',
+  RESCHEDULED: 'gray',
+  CANCELLED: 'gray',
+};
+
+export function pickupDeskColumns(
+  t: TFunction,
+  officesById: Map<string, PickupOffice>,
+): AdvancedColumn<PickupAppointment>[] {
+  return [
+    {
+      header: t('pickupDesk.columns.time', 'Time'),
+      cell: ({ row }) => (
+        <Text size="sm" fw={600} ff="monospace">
+          {row.original.slotStartTime}
+        </Text>
+      ),
+    },
+    {
+      header: t('pickupDesk.columns.appointment', 'Appointment'),
+      cell: ({ row }) => (
+        <Text size="sm" ff="monospace">
+          {row.original.appointmentNumber}
+        </Text>
+      ),
+    },
+    {
+      header: t('pickupDesk.columns.office', 'Office'),
+      cell: ({ row }) => (
+        <Text size="sm">{officesById.get(row.original.officeId)?.name ?? '—'}</Text>
+      ),
+    },
+    {
+      header: t('pickupDesk.columns.status', 'Status'),
+      cell: ({ row }) => (
+        <Badge size="sm" variant="light" color={STATUS_COLOR[row.original.status]}>
+          {row.original.status.replace('_', ' ')}
+        </Badge>
+      ),
+    },
+  ];
+}
--- a/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/index.tsx
+++ b/apps/backoffice/src/app/features/pickup/pages/PickupDeskPage/index.tsx
@@ -0,0 +1,150 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Group, Select, Stack, ThemeIcon } from '@mantine/core';
+import { IconCalendarEvent } from '@tabler/icons-react';
+import { AmharicDatePicker, AdvancedTable, PageHeader, notify, useServerTable } from '@ema-platform/ui';
+import {
+  extractErrorMessage,
+  useCheckInPickupMutation,
+  useGetPickupOfficesQuery,
+  useGetPickupWorklistQuery,
+  useIssueCertificateMutation,
+  useMarkPickupIssuedMutation,
+  useMarkPickupNoShowMutation,
+  type PickupAppointment,
+} from '@ema-platform/api';
+import { pickupDeskActionsColumn } from './actions';
+import { pickupDeskColumns } from './columns';
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+/**
+ * The pickup officer's worklist for one day (spec §43): who is booked, when,
+ * and where they are in the visit. Check-in and no-show are pickup-desk
+ * concerns; Issue calls the existing certificate-issuance endpoint and then
+ * marks the appointment issued, so the two stay in the same state a
+ * `SCHEDULED` application has always moved through.
+ */
+export function PickupDeskPage() {
+  const { t } = useTranslation();
+  const [date, setDate] = useState(todayIso());
+  const [officeId, setOfficeId] = useState<string | null>(null);
+  const [loadingId, setLoadingId] = useState<string | null>(null);
+  const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
+
+  const { data: offices } = useGetPickupOfficesQuery();
+  const {
+    data: appointments,
+    isFetching,
+    refetch,
+  } = useGetPickupWorklistQuery({ date, officeId: officeId ?? undefined });
+
+  const [checkIn] = useCheckInPickupMutation();
+  const [markIssued] = useMarkPickupIssuedMutation();
+  const [markNoShow] = useMarkPickupNoShowMutation();
+  const [issueCertificate] = useIssueCertificateMutation();
+
+  const officesById = useMemo(
+    () => new Map((offices ?? []).map((o) => [o.id, o])),
+    [offices],
+  );
+  const officeOptions = useMemo(
+    () => (offices ?? []).map((o) => ({ value: o.id, label: o.name })),
+    [offices],
+  );
+
+  const rows = [...(appointments ?? [])].sort((a, b) =>
+    a.slotStartTime.localeCompare(b.slotStartTime),
+  );
+  const page = paginate(rows);
+
+  async function withLoading(id: string, action: () => Promise<unknown>) {
+    setLoadingId(id);
+    try {
+      await action();
+    } catch (err) {
+      notify.error(extractErrorMessage(err), t('pickupDesk.actionFailed', 'Action failed'));
+    } finally {
+      setLoadingId(null);
+    }
+  }
+
+  async function handleCheckIn(appointment: PickupAppointment) {
+    await withLoading(appointment.id, () => checkIn(appointment.id).unwrap());
+  }
+
+  async function handleIssue(appointment: PickupAppointment) {
+    await withLoading(appointment.id, async () => {
+      // Renders and stores the certificate — the same action a raw
+      // schedule-only application reaches from the review page.
+      await issueCertificate(appointment.applicationId).unwrap();
+      await markIssued(appointment.id).unwrap();
+      notify.success(t('pickupDesk.issued', 'Document issued'));
+    });
+  }
+
+  async function handleNoShow(appointment: PickupAppointment) {
+    await withLoading(appointment.id, () => markNoShow(appointment.id).unwrap());
+  }
+
+  const columns = [
+    ...pickupDeskColumns(t, officesById),
+    pickupDeskActionsColumn(
+      t,
+      { onCheckIn: handleCheckIn, onIssue: handleIssue, onNoShow: handleNoShow },
+      loadingId,
+    ),
+  ];
+
+  return (
+    <Stack gap="lg">
+      <PageHeader
+        title={t('pickupDesk.title', 'Pickup Desk')}
+        subtitle={t(
+          'pickupDesk.subtitle',
+          "Today's and upcoming document pickup appointments.",
+        )}
+        noMargin
+        action={
+          <ThemeIcon size="xl" radius="md" variant="light">
+            <IconCalendarEvent size={22} />
+          </ThemeIcon>
+        }
+      />
+
+      <Group gap="sm">
+        <AmharicDatePicker
+          label={t('pickupDesk.date', 'Date')}
+          value={date}
+          onChange={setDate}
+        />
+        <Select
+          label={t('pickupDesk.office', 'Office')}
+          placeholder={t('pickupDesk.allOffices', 'All offices')}
+          data={officeOptions}
+          value={officeId}
+          onChange={setOfficeId}
+          clearable
+        />
+      </Group>
+
+      <AdvancedTable
+        tableName="pickup-desk-appointments"
+        columns={columns}
+        data={page.rows}
+        itemCount={page.itemCount}
+        pageIndex={page.pageIndex}
+        onPageChange={setPageIndex}
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        refresh={refetch}
+        isLoading={isFetching}
+        emptyText={t('pickupDesk.empty', 'No appointments for this day.')}
+      />
+    </Stack>
+  );
+}
+
+export default PickupDeskPage;
--- a/apps/backoffice/src/app/features/pickup/pages/PickupOfficesPage/index.tsx
+++ b/apps/backoffice/src/app/features/pickup/pages/PickupOfficesPage/index.tsx
@@ -0,0 +1,309 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Badge,
+  Button,
+  Group,
+  Modal,
+  MultiSelect,
+  NumberInput,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+  ThemeIcon,
+} from '@mantine/core';
+import { IconBuildingWarehouse, IconPlus } from '@tabler/icons-react';
+import { AdvancedTable, ModalFooter, PageHeader, notify, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
+import {
+  extractErrorMessage,
+  useCreatePickupOfficeMutation,
+  useGetPickupOfficesQuery,
+  useUpdatePickupOfficeMutation,
+  type PickupOffice,
+} from '@ema-platform/api';
+import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
+
+const WEEKDAYS = [
+  { value: '0', label: 'Sun' },
+  { value: '1', label: 'Mon' },
+  { value: '2', label: 'Tue' },
+  { value: '3', label: 'Wed' },
+  { value: '4', label: 'Thu' },
+  { value: '5', label: 'Fri' },
+  { value: '6', label: 'Sat' },
+];
+
+type OfficeDraft = {
+  name: string;
+  address: string;
+  workingDays: string[];
+  startTime: string;
+  endTime: string;
+  slotDurationMinutes: number;
+  maxApplicantsPerSlot: number;
+  rescheduleMinNoticeHours: number;
+  isActive: boolean;
+};
+
+const EMPTY_DRAFT: OfficeDraft = {
+  name: '',
+  address: '',
+  workingDays: ['1', '2', '3', '4', '5'],
+  startTime: '08:30',
+  endTime: '17:00',
+  slotDurationMinutes: 30,
+  maxApplicantsPerSlot: 10,
+  rescheduleMinNoticeHours: 24,
+  isActive: true,
+};
+
+function toDraft(office: PickupOffice): OfficeDraft {
+  return {
+    name: office.name,
+    address: office.address ?? '',
+    workingDays: office.workingDays.map(String),
+    startTime: office.startTime,
+    endTime: office.endTime,
+    slotDurationMinutes: office.slotDurationMinutes,
+    maxApplicantsPerSlot: office.maxApplicantsPerSlot,
+    rescheduleMinNoticeHours: office.rescheduleMinNoticeHours,
+    isActive: office.isActive,
+  };
+}
+
+/**
+ * Office/location, working hours, slot capacity and reschedule cutoff — the
+ * configuration `PickupService.availableSlots` computes real slots from
+ * (spec §20). Holiday management lives here too, one office at a time,
+ * rather than a separate page — a holiday has no meaning without an office.
+ */
+export function PickupOfficesPage() {
+  const { t } = useTranslation();
+  const { data: offices, isFetching, refetch } = useGetPickupOfficesQuery();
+  const [createOffice, { isLoading: creating }] = useCreatePickupOfficeMutation();
+  const [updateOffice, { isLoading: updating }] = useUpdatePickupOfficeMutation();
+  const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
+
+  const [editing, setEditing] = useState<PickupOffice | null>(null);
+  const [creatingNew, setCreatingNew] = useState(false);
+  const [draft, setDraft] = useState<OfficeDraft>(EMPTY_DRAFT);
+
+  const page = paginate(offices ?? []);
+
+  function openEdit(office: PickupOffice) {
+    setEditing(office);
+    setDraft(toDraft(office));
+  }
+
+  function openCreate() {
+    setCreatingNew(true);
+    setDraft(EMPTY_DRAFT);
+  }
+
+  function close() {
+    setEditing(null);
+    setCreatingNew(false);
+  }
+
+  async function save() {
+    const body = {
+      name: draft.name,
+      address: draft.address || undefined,
+      workingDays: draft.workingDays.map(Number),
+      startTime: draft.startTime,
+      endTime: draft.endTime,
+      slotDurationMinutes: draft.slotDurationMinutes,
+      maxApplicantsPerSlot: draft.maxApplicantsPerSlot,
+      rescheduleMinNoticeHours: draft.rescheduleMinNoticeHours,
+      isActive: draft.isActive,
+    };
+    try {
+      if (editing) {
+        await updateOffice({ id: editing.id, ...body }).unwrap();
+      } else {
+        await createOffice(body).unwrap();
+      }
+      notify.success(t('pickupOffices.saved', 'Office saved'));
+      close();
+    } catch (err) {
+      notify.error(extractErrorMessage(err), t('pickupOffices.saveFailed', 'Could not save'));
+    }
+  }
+
+  const columns: AdvancedColumn<PickupOffice>[] = [
+    {
+      header: t('pickupOffices.columns.name', 'Office'),
+      cell: ({ row }) => (
+        <>
+          <Text size="sm" fw={600}>
+            {row.original.name}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {row.original.address ?? '—'}
+          </Text>
+        </>
+      ),
+    },
+    {
+      header: t('pickupOffices.columns.hours', 'Working hours'),
+      cell: ({ row }) => (
+        <Text size="sm">
+          {row.original.startTime}–{row.original.endTime}
+        </Text>
+      ),
+    },
+    {
+      header: t('pickupOffices.columns.capacity', 'Capacity / slot'),
+      cell: ({ row }) => (
+        <Text size="sm">
+          {row.original.maxApplicantsPerSlot} · {row.original.slotDurationMinutes}min
+        </Text>
+      ),
+    },
+    {
+      header: t('pickupOffices.columns.status', 'Status'),
+      cell: ({ row }) => (
+        <Badge size="sm" color={row.original.isActive ? 'teal' : 'gray'} variant="light">
+          {row.original.isActive
+            ? t('pickupOffices.active', 'Active')
+            : t('pickupOffices.inactive', 'Inactive')}
+        </Badge>
+      ),
+    },
+    {
+      header: '',
+      align: 'right',
+      cell: ({ row }) => (
+        <RequirePermission anyOf={[LICENSE_PERMISSIONS.CONFIGURE_PICKUP_OFFICES]} hideOnly>
+          <Button size="xs" variant="light" onClick={() => openEdit(row.original)}>
+            {t('pickupOffices.edit', 'Edit')}
+          </Button>
+        </RequirePermission>
+      ),
+    },
+  ];
+
+  return (
+    <Stack gap="lg">
+      <PageHeader
+        title={t('pickupOffices.title', 'Pickup Offices')}
+        subtitle={t(
+          'pickupOffices.subtitle',
+          'Where applicants collect printed documents, and how many can be booked into each slot.',
+        )}
+        noMargin
+        action={
+          <Group gap="sm">
+            <ThemeIcon size="xl" radius="md" variant="light">
+              <IconBuildingWarehouse size={22} />
+            </ThemeIcon>
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.CONFIGURE_PICKUP_OFFICES]} hideOnly>
+              <Button leftSection={<IconPlus size={16} />} onClick={openCreate}>
+                {t('pickupOffices.new', 'New office')}
+              </Button>
+            </RequirePermission>
+          </Group>
+        }
+      />
+
+      <AdvancedTable
+        tableName="pickup-offices"
+        columns={columns}
+        data={page.rows}
+        itemCount={page.itemCount}
+        pageIndex={page.pageIndex}
+        onPageChange={setPageIndex}
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        refresh={refetch}
+        isLoading={isFetching}
+      />
+
+      <Modal
+        opened={Boolean(editing) || creatingNew}
+        onClose={close}
+        title={editing ? t('pickupOffices.editTitle', 'Edit office') : t('pickupOffices.new', 'New office')}
+      >
+        <Stack>
+          <TextInput
+            label={t('pickupOffices.form.name', 'Name')}
+            value={draft.name}
+            onChange={(e) => setDraft((d) => ({ ...d, name: e.currentTarget.value }))}
+            withAsterisk
+          />
+          <TextInput
+            label={t('pickupOffices.form.address', 'Address')}
+            value={draft.address}
+            onChange={(e) => setDraft((d) => ({ ...d, address: e.currentTarget.value }))}
+          />
+          <MultiSelect
+            label={t('pickupOffices.form.workingDays', 'Working days')}
+            data={WEEKDAYS}
+            value={draft.workingDays}
+            onChange={(v) => setDraft((d) => ({ ...d, workingDays: v }))}
+          />
+          <Group grow>
+            <TextInput
+              label={t('pickupOffices.form.startTime', 'Start time')}
+              placeholder="08:30"
+              value={draft.startTime}
+              onChange={(e) => setDraft((d) => ({ ...d, startTime: e.currentTarget.value }))}
+            />
+            <TextInput
+              label={t('pickupOffices.form.endTime', 'End time')}
+              placeholder="17:00"
+              value={draft.endTime}
+              onChange={(e) => setDraft((d) => ({ ...d, endTime: e.currentTarget.value }))}
+            />
+          </Group>
+          <Group grow>
+            <NumberInput
+              label={t('pickupOffices.form.slotDuration', 'Slot length (min)')}
+              min={5}
+              value={draft.slotDurationMinutes}
+              onChange={(v) =>
+                setDraft((d) => ({ ...d, slotDurationMinutes: Number(v) || d.slotDurationMinutes }))
+              }
+            />
+            <NumberInput
+              label={t('pickupOffices.form.capacity', 'Max per slot')}
+              min={1}
+              value={draft.maxApplicantsPerSlot}
+              onChange={(v) =>
+                setDraft((d) => ({ ...d, maxApplicantsPerSlot: Number(v) || d.maxApplicantsPerSlot }))
+              }
+            />
+          </Group>
+          <NumberInput
+            label={t('pickupOffices.form.rescheduleCutoff', 'Reschedule minimum notice (hours)')}
+            min={0}
+            value={draft.rescheduleMinNoticeHours}
+            onChange={(v) =>
+              setDraft((d) => ({
+                ...d,
+                rescheduleMinNoticeHours: Number(v) || d.rescheduleMinNoticeHours,
+              }))
+            }
+          />
+          <Switch
+            label={t('pickupOffices.form.active', 'Active')}
+            checked={draft.isActive}
+            onChange={(e) => setDraft((d) => ({ ...d, isActive: e.currentTarget.checked }))}
+          />
+
+          <ModalFooter>
+            <Button variant="default" onClick={close}>
+              {t('common.cancel', 'Cancel')}
+            </Button>
+            <Button loading={creating || updating} disabled={!draft.name.trim()} onClick={save}>
+              {t('common.save', 'Save')}
+            </Button>
+          </ModalFooter>
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}
+
+export default PickupOfficesPage;
--- a/apps/backoffice/src/app/features/profile/api/signature-api.ts
+++ b/apps/backoffice/src/app/features/profile/api/signature-api.ts
@@ -0,0 +1,42 @@
+import { baseApi } from '@ema-platform/api';
+
+/**
+ * The officer's own signing signature — drawn onto certificates they approve
+ * (`{{signatureImage}}`), as distinct from the seafarer's specimen signature
+ * that the portal manages.
+ *
+ * Scoped to the caller: the API resolves the employee record from the token,
+ * so no employee id is passed and nobody can upload on another's behalf.
+ */
+const signatureApi = baseApi
+  .enhanceEndpoints({ addTagTypes: ['MyEmployeeSignature'] as const })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getMyEmployeeSignature: builder.query<{ url: string | null }, void>({
+        query: () => ({ url: '/employee-signatures/me' }),
+        providesTags: ['MyEmployeeSignature'],
+      }),
+
+      uploadMyEmployeeSignature: builder.mutation<{ id: string }, File>({
+        query: (file) => {
+          const body = new FormData();
+          body.append('file', file);
+          // No Content-Type header: fetch sets it with the multipart boundary.
+          return { url: '/employee-signatures/me', method: 'POST', body };
+        },
+        invalidatesTags: (_r, error) => (error ? [] : ['MyEmployeeSignature']),
+      }),
+
+      deleteMyEmployeeSignature: builder.mutation<{ removed: boolean }, void>({
+        query: () => ({ url: '/employee-signatures/me', method: 'DELETE' }),
+        invalidatesTags: (_r, error) => (error ? [] : ['MyEmployeeSignature']),
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+export const {
+  useGetMyEmployeeSignatureQuery,
+  useUploadMyEmployeeSignatureMutation,
+  useDeleteMyEmployeeSignatureMutation,
+} = signatureApi;
--- a/apps/backoffice/src/app/features/profile/components/MySignaturePad.tsx
+++ b/apps/backoffice/src/app/features/profile/components/MySignaturePad.tsx
@@ -0,0 +1,26 @@
+import { SignaturePad } from '@ema-platform/ui';
+import {
+  useDeleteMyEmployeeSignatureMutation,
+  useGetMyEmployeeSignatureQuery,
+  useUploadMyEmployeeSignatureMutation,
+} from '../api/signature-api';
+
+/** The signature drawn onto certificates this officer approves. */
+export function MySignaturePad() {
+  const { data, isLoading } = useGetMyEmployeeSignatureQuery();
+  const [upload, { isLoading: isUploading }] =
+    useUploadMyEmployeeSignatureMutation();
+  const [remove, { isLoading: isDeleting }] =
+    useDeleteMyEmployeeSignatureMutation();
+
+  return (
+    <SignaturePad
+      currentUrl={data?.url ?? null}
+      isLoading={isLoading}
+      isUploading={isUploading}
+      isDeleting={isDeleting}
+      onUpload={(file) => upload(file).unwrap()}
+      onDelete={() => remove().unwrap()}
+    />
+  );
+}
--- a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
@@ -32,6 +32,7 @@ import {
  IconMail,
  IconMoon,
  IconSettings,
+  IconSignature,
  IconShieldLock,
  IconSun,
  IconUser,
@@ -43,12 +44,18 @@ import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
 import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, phoneNumber, PhoneInput } from '@ema-platform/ui';
 import { useApiMutation } from '@ema-platform/api';
-import { ActiveSessions, setUser } from '@ema-platform/auth';
+import {
+  ActiveSessions,
+  LICENSE_PERMISSIONS,
+  setUser,
+  usePermissions,
+} from '@ema-platform/auth';
 import type { AuthUser } from '@ema-platform/auth';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '../../../i18n/config';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { setLayoutMode } from '../../../store/preferences.slice';
 import type { LayoutMode } from '../../../store/preferences.slice';
+import { MySignaturePad } from '../components/MySignaturePad';
 import classes from './ProfilePage.module.css';

 function getInitials(name: string, fallback: string) {
@@ -77,6 +84,10 @@ export function ProfilePage() {
  const { colorScheme, setColorScheme } = useMantineColorScheme();
  const layoutMode = useAppSelector((state) => state.preferences.layoutMode);
  const { handleError } = useErrorHandler();
+  // Only officers who approve applications ever sign a certificate, so nobody
+  // else is asked for a signature they would never use.
+  const { can } = usePermissions();
+  const canSign = can([LICENSE_PERMISSIONS.APPROVE_APPLICATION]);

  const [updateTrigger] = useApiMutation<AuthUser>();
  const [meTrigger] = useApiMutation<AuthUser>();
@@ -318,6 +329,11 @@ export function ProfilePage() {
          <Tabs.Tab value="profile" leftSection={<IconUserCircle size={18} />}>
            {t('profile.tabs.profile')}
          </Tabs.Tab>
+          {canSign && (
+            <Tabs.Tab value="signature" leftSection={<IconSignature size={18} />}>
+              {t('profile.tabs.signature')}
+            </Tabs.Tab>
+          )}
          <Tabs.Tab value="security" leftSection={<IconShieldLock size={18} />}>
            {t('profile.tabs.security')}
          </Tabs.Tab>
@@ -405,6 +421,15 @@ export function ProfilePage() {
          </Paper>
        </Tabs.Panel>

+        {/* ---- Signature (drawn onto certificates this officer approves) ---- */}
+        {canSign && (
+          <Tabs.Panel value="signature" pt="md">
+            <Paper p="xl" shadow="sm" radius="lg" withBorder>
+              <MySignaturePad />
+            </Paper>
+          </Tabs.Panel>
+        )}
+
        {/* ---- Security ---- */}
        <Tabs.Panel value="security" pt="md">
          <Stack gap="lg">
--- a/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentQueuePage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentQueuePage.tsx
@@ -5,10 +5,13 @@ import { IconSearch } from '@tabler/icons-react';
 import { useDebouncedValue } from '@mantine/hooks';
 import {
  SEAFARER_DOCUMENT_KIND_LABELS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_COLORS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_LABELS,
  SEAFARER_DOCUMENT_STATUS_COLORS,
  SEAFARER_DOCUMENT_STATUS_LABELS,
  useListSeafarerDocumentsQuery,
  type SeafarerDocumentKind,
+  type SeafarerDocumentRequestKind,
  type SeafarerDocumentRow,
  type SeafarerDocumentStatus,
 } from '@ema-platform/api';
@@ -22,6 +25,10 @@ const STATUS_FILTERS = (
  ['PAYMENT_PENDING', 'PAID', 'PAYMENT_CONFIRMED', 'SCHEDULED', 'ISSUED', 'REJECTED'] as SeafarerDocumentStatus[]
 ).map((value) => ({ value, label: SEAFARER_DOCUMENT_STATUS_LABELS[value] }));

+const REQUEST_KIND_FILTERS = (
+  ['NEW', 'RENEWAL', 'REPLACEMENT'] as SeafarerDocumentRequestKind[]
+).map((value) => ({ value, label: SEAFARER_DOCUMENT_REQUEST_KIND_LABELS[value] }));
+
 /**
 * The Seaman Book queue and the BTC queue — one page, keyed by kind. Requests
 * appear here once the seafarer registration that opened them is approved.
@@ -30,6 +37,7 @@ export function SeafarerDocumentQueuePage({ kind }: { kind: SeafarerDocumentKind
  const navigate = useNavigate();
  const showDate = useDateDisplayer();
  const [status, setStatus] = useState<SeafarerDocumentStatus | null>(null);
+  const [requestKind, setRequestKind] = useState<SeafarerDocumentRequestKind | null>(null);
  const [search, setSearch] = useState('');
  const [debouncedSearch] = useDebouncedValue(search, 300);
  const [page, setPage] = useState(0);
@@ -38,6 +46,7 @@ export function SeafarerDocumentQueuePage({ kind }: { kind: SeafarerDocumentKind
  const { data, isLoading, isFetching, refetch } = useListSeafarerDocumentsQuery({
    kind,
    status: status ?? undefined,
+    requestKind: requestKind ?? undefined,
    search: debouncedSearch || undefined,
    take: pageSize,
    skip: page * pageSize,
@@ -75,6 +84,15 @@ export function SeafarerDocumentQueuePage({ kind }: { kind: SeafarerDocumentKind
          </div>
        ),
      },
+      {
+        header: 'Type',
+        accessorKey: 'requestKind',
+        cell: ({ row }) => (
+          <Badge size="sm" variant="outline" color={SEAFARER_DOCUMENT_REQUEST_KIND_COLORS[row.original.requestKind]}>
+            {SEAFARER_DOCUMENT_REQUEST_KIND_LABELS[row.original.requestKind]}
+          </Badge>
+        ),
+      },
      {
        header: 'Fee',
        accessorKey: 'feeAmount',
@@ -148,6 +166,17 @@ export function SeafarerDocumentQueuePage({ kind }: { kind: SeafarerDocumentKind
              clearable
              w={200}
            />
+            <Select
+              placeholder="All types"
+              data={REQUEST_KIND_FILTERS}
+              value={requestKind}
+              onChange={(v) => {
+                setRequestKind(v as SeafarerDocumentRequestKind | null);
+                setPage(0);
+              }}
+              clearable
+              w={160}
+            />
          </>
        }
        itemCount={data?.total ?? 0}
--- a/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx
@@ -4,6 +4,8 @@ import {Alert, Avatar, Badge, Button, Center, Container, Divider, Group, Loader,
 import { IconAlertTriangle, IconArrowLeft, IconCash, IconCheck, IconDownload, IconFileCertificate } from '@tabler/icons-react';
 import {
  SEAFARER_DOCUMENT_KIND_LABELS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_COLORS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_LABELS,
  SEAFARER_DOCUMENT_STATUS_COLORS,
  SEAFARER_DOCUMENT_STATUS_LABELS,
  extractErrorMessage,
@@ -133,6 +135,11 @@ export function SeafarerDocumentReviewPage() {
            <Badge size="sm" variant="light" color={SEAFARER_DOCUMENT_STATUS_COLORS[document.status]}>
              {SEAFARER_DOCUMENT_STATUS_LABELS[document.status]}
            </Badge>
+            {document.requestKind !== 'NEW' && (
+              <Badge size="sm" variant="outline" color={SEAFARER_DOCUMENT_REQUEST_KIND_COLORS[document.requestKind]}>
+                {SEAFARER_DOCUMENT_REQUEST_KIND_LABELS[document.requestKind]}
+              </Badge>
+            )}
            {document.documentNumber && (
              <Badge size="sm" color="teal" leftSection={<IconCheck size={10} />}>
                {document.documentNumber}
--- a/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationReviewPage.tsx
+++ b/apps/backoffice/src/app/features/seafarer-registration-review/pages/SeafarerRegistrationReviewPage.tsx
@@ -63,8 +63,13 @@ export function SeafarerRegistrationReviewPage() {
  }

  const { registration, attachments } = data;
-  // Decided straight off the queue — no claim step.
-  const canDecide = registration.status === 'SUBMITTED';
+  // Decided straight off the queue — no claim step. AWAITING_BIOMETRICS is
+  // deliberately excluded: approval is blocked on a BSID that only exists once
+  // the applicant has been enrolled, so the decision is not the reviewer's to
+  // take yet. SUBMITTED stays decidable for files that predate the gate.
+  const awaitingBiometrics = registration.status === 'AWAITING_BIOMETRICS';
+  const canDecide =
+    registration.status === 'UNDER_REVIEW' || registration.status === 'SUBMITTED';
  const busy = approving || rejecting || requesting;

  async function run(action: () => Promise<unknown>, done: string) {
@@ -141,6 +146,18 @@ export function SeafarerRegistrationReviewPage() {
        }
      />

+      {awaitingBiometrics && (
+        <Alert
+          color="blue"
+          icon={<IconAlertTriangle size={16} />}
+          title="Awaiting biometric enrolment"
+          mb="md"
+        >
+          This registration cannot be decided yet. The applicant has to be
+          enrolled at a counter and issued a BSID first — the registration moves
+          to Under Review automatically once that happens.
+        </Alert>
+      )}
      {registration.status === 'RESUBMIT_REQUIRED' && (
        <Alert color="orange" icon={<IconAlertTriangle size={16} />} title="Awaiting the applicant's corrections" mb="md">
          {registration.reviewRemark}
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -88,6 +88,8 @@ export const am: Translations = {
    btcQueue: "የBTC ወረፋ",
    cocQueue: "የCoC ወረፋ",
    copQueue: "የCoP ወረፋ",
+    endorsementCocQueue: "የCoC እውቅና ወረፋ",
+    endorsementGocQueue: "የGOC እውቅና ወረፋ",
    endorsementQueue: "የማስተያየት ወረፋ",
    vesselRegistrations: "የመርከብ ምዝገባ",
    // vesselRegistrationReport: 'የምዝገባ ሪፖርት',
@@ -97,6 +99,8 @@ export const am: Translations = {
    seafarerRegistrationQueue: "የመርከበኞች ምዝገባ ወረፋ",
    applications: "ማመልከቻዎች",
    paymentConfig: "የክፍያ ውቅረት",
+    pickupDesk: "የመረከቢያ ዴስክ",
+    pickupOffices: "የመረከቢያ ቢሮዎች",
    analytics: "ትንታኔ",
    seaServiceVerification: "የባህር አገልግሎት ማረጋገጫ",
    medicalVerification: "የሕክምና ማረጋገጫ",
@@ -467,9 +471,31 @@ export const am: Translations = {
    unverified: "ያልተረጋገጠ",
    tabs: {
      profile: "መገለጫ",
+      signature: "ፊርማ",
      security: "ደህንነት",
      preferences: "ምርጫዎች",
    },
+    signature: {
+      title: "የመፈረሚያ ፊርማ",
+      description: "እርስዎ በሚያጸድቋቸው ሰነዶች ላይ ይታተማል። አንድ ጊዜ ይሳሉ ወይም ምስል ይጫኑ።",
+      reissueNotice:
+        "ፊርማዎን መቀየር አስቀድሞ የተሰጠን ሰነድ አይለውጥም — ከአሁን በኋላ በሚፈርሙዋቸው ላይ ብቻ ይሠራል።",
+      current: "የተመዘገበ ፊርማ",
+      currentAlt: "የተቀመጠ ፊርማዎ",
+      none: "እስካሁን የተመዘገበ ፊርማ የለም። የሚያጸድቋቸው ሰነዶች ያለ ፊርማ ይሰጣሉ።",
+      modeDraw: "ይሳሉ",
+      modeUpload: "ይጫኑ",
+      save: "ፊርማ አስቀምጥ",
+      clear: "አጽዳ",
+      choose: "ምስል ይምረጡ",
+      fileHint: "PNG ወይም JPEG፣ እስከ 2 ሜባ።",
+      remove: "አስወግድ",
+      saved: "ፊርማ ተቀምጧል።",
+      removed: "ፊርማ ተወግዷል።",
+      badType: "PNG እና JPEG ምስሎች ብቻ ይፈቀዳሉ።",
+      tooLarge: "ምስሉ ከ2 ሜባ ይበልጣል።",
+      drawFailed: "ሥዕሉን ማንበብ አልተቻለም። እባክዎ እንደገና ይሞክሩ።",
+    },
    personalHint: "በኦፊሴላዊ ኢማ ሰነዶች ላይ እንደሚታየው ስምዎ።",
    languageTitle: "ቋንቋ",
    languageHint: "በአስተዳደር ፓነል ውስጥ የሚጠቀሙትን ቋንቋ ይምረጡ።",
@@ -870,6 +896,12 @@ export const am: Translations = {
    type: "ዓይነት",
    anyType: "ማንኛውም",
    typeCol: "ዓይነት",
+    kind: "የማመልከቻ ዓይነት",
+    kindValues: {
+      NEW: "አዲስ",
+      RENEWAL: "እድሳት",
+      REISSUE: "ምትክ",
+    },
    statusCol: "ሁኔታ",
    statusValues: {
      DRAFT: "ረቂቅ",
@@ -945,6 +977,7 @@ export const am: Translations = {
  },

  review: {
+    certificateSuperseded: "ሰርተፍኬቱ ተተክቷል",
    summary: "ማጠቃለያ",
    officer: "ሹም",
    supervisor: "የበላይ ኃላፊ",
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -88,6 +88,8 @@ export const en = {
    postWaiverQueue: 'Post-Waiver Queue',
    cocQueue: 'CoC Queue',
    copQueue: 'CoP Queue',
+    endorsementCocQueue: 'CoC Endorsement Queue',
+    endorsementGocQueue: 'GOC Endorsement Queue',
    endorsementQueue: 'Endorsement Queue',
    vesselRegistrations: 'Vessel Registration',
    vesselTransfers: 'Vessel Ownership Transfer',
@@ -96,6 +98,8 @@ export const en = {
    seafarerRegistrationQueue: 'Seafarer Registration Queue',
    applications: 'Applications',
    paymentConfig: 'Payment Config',
+    pickupDesk: 'Pickup Desk',
+    pickupOffices: 'Pickup Offices',
    analytics: 'Analytics',
    seaServiceVerification: 'Sea Service Verification',
    medicalVerification: 'Medical Verification',
@@ -466,9 +470,32 @@ export const en = {
    unverified: 'Unverified',
    tabs: {
      profile: 'Profile',
+      signature: 'Signature',
      security: 'Security',
      preferences: 'Preferences',
    },
+    signature: {
+      title: 'Signing signature',
+      description:
+        'Drawn onto the certificates you approve. Draw it once or upload an image.',
+      reissueNotice:
+        'Changing your signature does not alter a certificate already issued — it applies to whatever you sign from now on.',
+      current: 'Signature on file',
+      currentAlt: 'Your stored signature',
+      none: 'No signature on file yet. Certificates you approve will be issued without one.',
+      modeDraw: 'Draw',
+      modeUpload: 'Upload',
+      save: 'Save signature',
+      clear: 'Clear',
+      choose: 'Choose image',
+      fileHint: 'PNG or JPEG, up to 2 MB.',
+      remove: 'Remove',
+      saved: 'Signature saved.',
+      removed: 'Signature removed.',
+      badType: 'Only PNG and JPEG images are accepted.',
+      tooLarge: 'That image is larger than 2 MB.',
+      drawFailed: 'Could not read the drawing. Please try again.',
+    },
    personalHint: 'Your name as it appears on official EMA documents.',
    languageTitle: 'Language',
    languageHint: 'Choose the language used across the admin panel.',
@@ -877,6 +904,12 @@ export const en = {
    type: 'Type',
    anyType: 'Any',
    typeCol: 'Type',
+    kind: 'Application kind',
+    kindValues: {
+      NEW: 'New',
+      RENEWAL: 'Renewal',
+      REISSUE: 'Replacement',
+    },
    statusCol: 'Status',
    statusValues: {
      DRAFT: 'Draft',
@@ -954,6 +987,7 @@ export const en = {
  },

  review: {
+    certificateSuperseded: 'Certificate superseded',
    summary: 'Summary',
    officer: 'Officer',
    supervisor: 'Supervisor',
--- a/apps/backoffice/src/app/layouts/nav-config.ts
+++ b/apps/backoffice/src/app/layouts/nav-config.ts
@@ -2,6 +2,8 @@ import {
  IconAnchor,
  IconArrowsExchange,
  IconBook2,
+  IconBuildingWarehouse,
+  IconCalendarEvent,
  IconChartBar,
  IconClipboardList,
  IconClipboardText,
@@ -42,6 +44,12 @@ const APPLICATION_QUEUE = [P.VIEW_APPLICATION_QUEUE, P.VIEW_APPLICATIONS];
 */
 const SEAFARER_QUEUE = [P.VIEW_SEAFARER_REGISTRY, ...APPLICATION_QUEUE];

+const BIOMETRIC_ENROLLMENT = [
+  P.ENROLL_BIOMETRICS,
+  P.VIEW_BIOMETRICS,
+  P.VIEW_SEAFARER_REGISTRY,
+];
+
 /**
 * The backoffice information architecture.
 *
@@ -149,7 +157,7 @@ export const NAV_SECTIONS: NavSection[] = [
        to: "/biometric-enrollment",
        label: "nav.biometricEnrollment",
        icon: IconFingerprint,
-        permissions: [P.ENROLL_BIOMETRICS, P.VIEW_BIOMETRICS],
+        permissions: BIOMETRIC_ENROLLMENT,
      },
      {
        to: "/seafarer-registrations",
@@ -309,6 +317,18 @@ export const NAV_SECTIONS: NavSection[] = [
        icon: IconCreditCard,
        permissions: [P.VIEW_PAYMENTS],
      },
+      {
+        to: '/pickup-desk',
+        label: 'nav.pickupDesk',
+        icon: IconCalendarEvent,
+        permissions: [P.MANAGE_PICKUP_DESK],
+      },
+      {
+        to: '/pickup-offices',
+        label: 'nav.pickupOffices',
+        icon: IconBuildingWarehouse,
+        permissions: [P.CONFIGURE_PICKUP_OFFICES],
+      },
    ],
  },
  {
--- a/apps/backoffice/src/app/router/index.tsx
+++ b/apps/backoffice/src/app/router/index.tsx
@@ -28,6 +28,8 @@ import {
  SeaServiceVerificationPage,
 } from '../features/medical-verification/pages/MedicalVerificationPage';
 import { PaymentConfigPage } from '../features/payment-config/pages/PaymentConfigPage';
+import { PickupDeskPage } from '../features/pickup/pages/PickupDeskPage';
+import { PickupOfficesPage } from '../features/pickup/pages/PickupOfficesPage';
 import { SeafarerRegistryPage } from '../features/seafarer-registry/pages/SeafarerRegistryPage';
 import { SeafarerRegistrationQueuePage } from '../features/seafarer-registration-review/pages/SeafarerRegistrationQueuePage';
 import { SeafarerRegistrationReviewPage } from '../features/seafarer-registration-review/pages/SeafarerRegistrationReviewPage';
@@ -53,6 +55,12 @@ import { BiometricEnrollmentPage } from '../features/biometric-enrollment/pages/
 /** Any-of gate shared by every licence-type queue and its review workspace. */
 const APPLICATION_QUEUE = [P.VIEW_APPLICATION_QUEUE, P.VIEW_APPLICATIONS];

+const BIOMETRIC_ENROLLMENT = [
+  P.ENROLL_BIOMETRICS,
+  P.VIEW_BIOMETRICS,
+  P.VIEW_SEAFARER_REGISTRY,
+];
+
 /** Route gate: same keys as the route's nav item in nav-config.ts. */
 const guard = (anyOf: string[], element: ReactNode) => (
  <RequirePermission anyOf={anyOf}>{element}</RequirePermission>
@@ -100,8 +108,10 @@ const router = createBrowserRouter([
          { path: 'medical-verification', element: guard([P.VERIFY_SEAFARER_RECORDS], <MedicalVerificationPage />) },
          { path: 'sea-service-verification', element: guard([P.VERIFY_SEAFARER_RECORDS], <SeaServiceVerificationPage />) },
          { path: 'payment-config', element: guard([P.VIEW_PAYMENTS], <PaymentConfigPage />) },
+          { path: 'pickup-desk', element: guard([P.MANAGE_PICKUP_DESK], <PickupDeskPage />) },
+          { path: 'pickup-offices', element: guard([P.CONFIGURE_PICKUP_OFFICES], <PickupOfficesPage />) },
          { path: 'seafarer-registry', element: guard([P.VIEW_SEAFARER_REGISTRY], <SeafarerRegistryPage />) },
-          { path: 'biometric-enrollment', element: guard([P.ENROLL_BIOMETRICS, P.VIEW_BIOMETRICS], <BiometricEnrollmentPage />) },
+          { path: 'biometric-enrollment', element: guard(BIOMETRIC_ENROLLMENT, <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 />) },
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -17,7 +17,7 @@ export default defineConfig({
 //   port: 4201,
 //   proxy: {
 //     '/api': {
-//       target: 'http://localhost:3001', // change from 'https://ema-api-dev.triaplc.com'
+//       target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
 //       changeOrigin: true,
 //     },
 //   },
--- a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
@@ -10,7 +10,7 @@ import {
  Text,
  Tooltip,
 } from '@mantine/core';
-import { IconDownload, IconRefresh } from '@tabler/icons-react';
+import { IconAlertTriangle, IconDownload, IconRefresh } from '@tabler/icons-react';
 import {
  extractErrorMessage,
  useLocalized,
@@ -59,6 +59,36 @@ export function useRenewLicense() {
  return { renewLicense, isRenewing };
 }

+/**
+ * Damaged/Reissue reuses the same wizard, application kind REISSUE — the
+ * "Damage Information" step and the Reissue document set only appear because
+ * the created application carries that kind, exactly the way RENEWAL's own
+ * fields do above.
+ */
+export function useReissueLicense() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [createApplication, { isLoading: isReissuing }] =
+    useCreateApplicationMutation();
+
+  async function reissueLicense(license: IssuedLicense) {
+    const typeKey = license.licenseType?.key;
+    if (!typeKey) return;
+    try {
+      const application = await createApplication({
+        licenseType: typeKey,
+        kind: 'REISSUE',
+        previousLicenseId: license.id,
+      }).unwrap();
+      navigate(`/licensing/${typeKey}/applications/${application.id}`);
+    } catch (err) {
+      notify.error(extractErrorMessage(err), t('licensing.card.reissueFailed'));
+    }
+  }
+
+  return { reissueLicense, isReissuing };
+}
+
 function daysUntil(date: string): number {
  const ms = new Date(date).getTime() - Date.now();
  return Math.ceil(ms / 86_400_000);
@@ -68,14 +98,18 @@ export function LicenseCard({
  license,
  isDownloading,
  isRenewing,
+  isReissuing,
  onDownload,
  onRenew,
+  onReissue,
 }: {
  license: IssuedLicense;
  isDownloading: boolean;
  isRenewing: boolean;
+  isReissuing?: boolean;
  onDownload: () => void;
  onRenew: () => void;
+  onReissue?: () => void;
 }) {
  // The API computes both in the authority's timezone; the local fallbacks are
  // only for a cached response from before those fields existed.
@@ -87,6 +121,7 @@ export function LicenseCard({
  // badge.
  const current = license.status === 'ACTIVE' && !expired;
  const renewable = license.renewable ?? false;
+  const reissuable = license.reissuable ?? false;
  const showDate = useDateDisplayer();
  const localized = useLocalized();
  const { t } = useTranslation();
@@ -179,6 +214,25 @@ export function LicenseCard({
          </Button>
        </RequirePermission>
      )}
+
+      {/* Damaged/Reissue has no window — a lost or damaged document can be
+          replaced at any point in its validity, unlike Renewal above. */}
+      {reissuable && onReissue && (
+        <RequirePermission anyOf={[LICENSE_PERMISSIONS.CREATE_APPLICATION]} hideOnly>
+          <Button
+            fullWidth
+            mt="xs"
+            size="xs"
+            variant="subtle"
+            color="gray"
+            loading={isReissuing}
+            leftSection={<IconAlertTriangle size={14} />}
+            onClick={onReissue}
+          >
+            {t('licensing.card.reportDamaged')}
+          </Button>
+        </RequirePermission>
+      )}
    </Card>
  );
 }
--- a/apps/portal/src/app/features/licensing/components/PickupSchedulingPanel.tsx
+++ b/apps/portal/src/app/features/licensing/components/PickupSchedulingPanel.tsx
@@ -0,0 +1,54 @@
+import { Group, Paper, Stack, Text } from '@mantine/core';
+import { IconCalendarEvent } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import type { IssuancePeriod } from '@ema-platform/api';
+
+/**
+ * Read-only view of the pickup appointment a team leader assigned (spec
+ * §19-21 — the office decides who comes in when, the applicant doesn't pick
+ * a slot). Shown once payment is confirmed and the licence type prints once
+ * and hands the document over in person.
+ */
+export function PickupSchedulingPanel({
+  scheduledDate,
+  scheduledPeriod,
+}: {
+  scheduledDate: string | null;
+  scheduledPeriod: IssuancePeriod | null;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Paper withBorder p="md" radius="md">
+      <Group gap="xs" mb="sm">
+        <IconCalendarEvent size={16} />
+        <Text fw={600} size="sm">
+          {t('pickup.title')}
+        </Text>
+      </Group>
+
+      {scheduledDate ? (
+        <Stack gap={4}>
+          <Text size="sm">
+            {t('pickup.scheduledFor', {
+              date: scheduledDate,
+              period:
+                scheduledPeriod === 'AFTERNOON'
+                  ? t('pickup.afternoon')
+                  : t('pickup.morning'),
+            })}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t('pickup.setByOffice')}
+          </Text>
+        </Stack>
+      ) : (
+        <Text size="sm" c="dimmed">
+          {t('pickup.awaitingSchedule')}
+        </Text>
+      )}
+    </Paper>
+  );
+}
+
+export default PickupSchedulingPanel;
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -4,6 +4,7 @@ import {
  ActionIcon,
  Alert,
  Badge,
+  Box,
  Button,
  Card,
  Container,
@@ -67,6 +68,7 @@ import {
  PORTAL_PERMISSIONS,
  RequirePermission,
  useCurrentProfile,
+  usePermissions,
 } from "@ema-platform/auth";
 import { ApplicationSummary } from "../components/ApplicationSummary";
 import {
@@ -74,6 +76,7 @@ import {
  fillFromVessel,
 } from "../components/ConfigDrivenSection";
 import { DocumentSlots } from "../components/DocumentSlots";
+import { PickupSchedulingPanel } from "../components/PickupSchedulingPanel";
 import { StaffEvidence } from "../components/StaffEvidence";
 import { useAppSelector } from "../../../store/hooks";
 import { AdvancedTable, useServerTable, PageLoader } from '@ema-platform/ui';
@@ -117,9 +120,14 @@ export function LicenseApplicationPage() {
  const { data: config, isLoading: loadingConfig } =
    useGetLicenseTypeRequirementsQuery({ idOrKey: typeCode });
  const { profile } = useCurrentProfile();
+  const { can: hasPermission, known: permissionsKnown } = usePermissions();
  // Only the vessel-select field (ConfigDrivenSection) reads this — fetched
  // here rather than deeper down since it's the shared source of draft state.
-  const { data: vessels } = useGetMyVesselsQuery();
+  // Skipped for accounts without VIEW_OWN_VESSELS (e.g. freight forwarders):
+  // the API 403s for them, since vessels belong to VESSEL_OWNER accounts.
+  const { data: vessels } = useGetMyVesselsQuery(undefined, {
+    skip: !permissionsKnown || !hasPermission([PORTAL_PERMISSIONS.VIEW_OWN_VESSELS]),
+  });
  const [createApplication] = useCreateApplicationMutation();
  const [appId, setAppId] = useState<string | undefined>(applicationId);

@@ -394,14 +402,20 @@ export function LicenseApplicationPage() {
  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.
+  // short instead of showing a page per section. A Damaged/Reissue
+  // application skips Staff and Documents outright — it asks nothing beyond
+  // the Damage Information step, regardless of what the licence type
+  // otherwise requires for a new application or renewal.
+  const isReissue = application?.kind === 'REISSUE';
  const steps = useMemo(
    () =>
      buildWizardSteps(config?.licenseType?.formSchema?.sections ?? [], draft, {
-        hasStaff: (config?.staffRoleRequirements?.length ?? 0) > 0,
+        hasStaff: isReissue ? false : (config?.staffRoleRequirements?.length ?? 0) > 0,
+        hasDocuments: !isReissue,
        language: i18n.language,
+        applicationKind: application?.kind,
      }),
-    [config, draft, i18n.language],
+    [config, draft, i18n.language, application?.kind, isReissue],
  );
  const sections = useMemo(
    () => steps.flatMap((step) => step.sections),
@@ -720,6 +734,11 @@ export function LicenseApplicationPage() {
            >
              {STATUS_LABELS[application.status]}
            </Badge>
+            {detail?.issuedLicenseStatus === "SUPERSEDED" && (
+              <Badge size="sm" variant="light" color="gray">
+                {t("licensing.certificateSuperseded", "Certificate superseded")}
+              </Badge>
+            )}
          </Group>
        </div>
        <Group gap="md" align="center">
@@ -759,6 +778,17 @@ export function LicenseApplicationPage() {
        </Alert>
      )}

+      {config.licenseType.requiresIssuanceScheduling &&
+        (application.status === "PAYMENT_CONFIRMED" ||
+          application.status === "SCHEDULED") && (
+          <Box mb="md">
+            <PickupSchedulingPanel
+              scheduledDate={application.scheduledIssuanceDate}
+              scheduledPeriod={application.scheduledIssuancePeriod}
+            />
+          </Box>
+        )}
+
      {showSummary && editableWhileSubmitted && (
        <Alert
          color="blue"
--- a/apps/portal/src/app/features/licensing/pages/MyApplicationsPage/columns.tsx
+++ b/apps/portal/src/app/features/licensing/pages/MyApplicationsPage/columns.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, Progress, Text } from '@mantine/core';
+import { Badge, Box, Group, Progress, Text } from '@mantine/core';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import {
@@ -6,10 +6,23 @@ import {
  STATUS_PROGRESS,
  applicantOrCompanyName,
  localized,
+  type ApplicationKind,
  type LicenseApplication,
  type LicenseStatus,
 } from '@ema-platform/api';

+const KIND_LABEL: Record<ApplicationKind, string> = {
+  NEW: 'applications.table.kindNew',
+  RENEWAL: 'applications.table.kindRenewal',
+  REISSUE: 'applications.table.kindReissue',
+};
+
+const KIND_COLOR: Record<ApplicationKind, string> = {
+  NEW: 'blue',
+  RENEWAL: 'teal',
+  REISSUE: 'orange',
+};
+
 export function applicationColumns(
  t: TFunction,
  deps: {
@@ -23,9 +36,16 @@ export function applicationColumns(
      header: t('applications.table.licence'),
      cell: ({ row }) => (
        <Box>
-          <Text size="sm" fw={600}>
-            {localized(row.original.licenseType?.name, deps.language) || '—'}
-          </Text>
+          <Group gap={6} wrap="nowrap">
+            <Text size="sm" fw={600}>
+              {localized(row.original.licenseType?.name, deps.language) || '—'}
+            </Text>
+            {row.original.kind !== 'NEW' && (
+              <Badge size="xs" variant="light" color={KIND_COLOR[row.original.kind]}>
+                {t(KIND_LABEL[row.original.kind])}
+              </Badge>
+            )}
+          </Group>
          <Text size="xs" c="dimmed">
            {row.original.applicationNumber}
          </Text>
--- a/apps/portal/src/app/features/licensing/pages/MyApplicationsPage/index.tsx
+++ b/apps/portal/src/app/features/licensing/pages/MyApplicationsPage/index.tsx
@@ -32,7 +32,7 @@ import {
 import { AdvancedTable, AmharicDatePicker, EmptyState, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import { LicenseCatalogue } from '../../components/LicenseCatalogue';
-import { LicenseCard, useRenewLicense } from '../../components/LicenseCard';
+import { LicenseCard, useReissueLicense, useRenewLicense } from '../../components/LicenseCard';
 import { useApplicationPayment } from '../../../payments/hooks/useApplicationPayment';
 import { notifications } from '@mantine/notifications';
 import {
@@ -47,6 +47,7 @@ import {
  useGetMyLicensesQuery,
  useGetPaymentCapabilitiesQuery,
  useRetakeExamMutation,
+  type ApplicationKind,
  type LicenseStatus,
 } from '@ema-platform/api';
 import {
@@ -102,6 +103,7 @@ export function MyApplicationsPage() {
  const [retakeExam, { isLoading: requestingExamFee }] = useRetakeExamMutation();
  const [getCertificateUrl] = useGetCertificateUrlMutation();
  const { renewLicense, isRenewing } = useRenewLicense();
+  const { reissueLicense, isReissuing } = useReissueLicense();
  const [isDownloadingCert, setIsDownloadingCert] = useState(false);
  const { can } = usePermissions();

@@ -207,10 +209,13 @@ export function MyApplicationsPage() {

  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<LicenseStatus | null>(null);
+  const [kindFilter, setKindFilter] = useState<ApplicationKind | null>(null);
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const [bucketFilter, setBucketFilter] = useState<Bucket>(null);
-  const hasFilters = Boolean(search || statusFilter || dateFrom || dateTo || bucketFilter);
+  const hasFilters = Boolean(
+    search || statusFilter || kindFilter || dateFrom || dateTo || bucketFilter,
+  );
  const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });

  const counts = useMemo(() => {
@@ -228,6 +233,7 @@ export function MyApplicationsPage() {
        if (!haystack.includes(q)) return false;
      }
      if (statusFilter && app.status !== statusFilter) return false;
+      if (kindFilter && app.kind !== kindFilter) return false;
      // Drafts have no submittedAt, so date filtering falls back to createdAt
      // rather than silently excluding every draft from a date-ranged search.
      const at = app.submittedAt ?? app.createdAt;
@@ -245,13 +251,14 @@ export function MyApplicationsPage() {
      const bAt = b.submittedAt ?? b.createdAt;
      return aAt < bAt ? 1 : aAt > bAt ? -1 : 0;
    });
-  }, [allItems, search, statusFilter, dateFrom, dateTo, bucketFilter]);
+  }, [allItems, search, statusFilter, kindFilter, dateFrom, dateTo, bucketFilter]);

  const page = paginate(items);

  function clearFilters() {
    setSearch('');
    setStatusFilter(null);
+    setKindFilter(null);
    setDateFrom('');
    setDateTo('');
    setBucketFilter(null);
@@ -385,6 +392,22 @@ export function MyApplicationsPage() {
                    clearable
                    w={200}
                  />
+                  <Select
+                    label={t('applications.filters.kind')}
+                    placeholder={t('applications.filters.any')}
+                    data={[
+                      { value: 'NEW', label: t('applications.table.kindNew') },
+                      { value: 'RENEWAL', label: t('applications.table.kindRenewal') },
+                      { value: 'REISSUE', label: t('applications.table.kindReissue') },
+                    ]}
+                    value={kindFilter}
+                    onChange={(v) => {
+                      setKindFilter(v as ApplicationKind | null);
+                      setPageIndex(0);
+                    }}
+                    clearable
+                    w={160}
+                  />
                  <AmharicDatePicker
                    label={t('applications.filters.from')}
                    value={dateFrom}
@@ -475,8 +498,10 @@ export function MyApplicationsPage() {
                    license={license}
                    isDownloading={isDownloadingCert}
                    isRenewing={isRenewing}
+                    isReissuing={isReissuing}
                    onDownload={() => downloadCertificate(license.id)}
                    onRenew={() => renewLicense(license)}
+                    onReissue={() => reissueLicense(license)}
                  />
                ))}
              </SimpleGrid>
--- a/apps/portal/src/app/features/profile/api/signature-api.ts
+++ b/apps/portal/src/app/features/profile/api/signature-api.ts
@@ -0,0 +1,46 @@
+import { baseApi } from '@ema-platform/api';
+
+/**
+ * The caller's specimen signature.
+ *
+ * Upload is multipart rather than the presign+PUT flow used for documents:
+ * the API validates type and size on the way through, which it cannot do when
+ * bytes go straight to storage. `signatureUrl` on the profile is an
+ * object-storage key, so the stored signature is displayed through a
+ * short-lived link from `GET me/signature` rather than read off the profile.
+ */
+const signatureApi = baseApi
+  .enhanceEndpoints({ addTagTypes: ['CurrentProfile', 'MySignature'] as const })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getMySignature: builder.query<{ url: string | null }, void>({
+        query: () => ({ url: '/profiles/me/signature' }),
+        providesTags: ['MySignature'],
+      }),
+
+      uploadMySignature: builder.mutation<{ signatureUrl: string }, File>({
+        query: (file) => {
+          const body = new FormData();
+          body.append('file', file);
+          // No Content-Type header: fetch sets it with the multipart boundary,
+          // and naming it here would omit the boundary and fail to parse.
+          return { url: '/profiles/me/signature', method: 'POST', body };
+        },
+        invalidatesTags: (_r, error) =>
+          error ? [] : ['MySignature', 'CurrentProfile'],
+      }),
+
+      deleteMySignature: builder.mutation<{ signatureUrl: null }, void>({
+        query: () => ({ url: '/profiles/me/signature', method: 'DELETE' }),
+        invalidatesTags: (_r, error) =>
+          error ? [] : ['MySignature', 'CurrentProfile'],
+      }),
+    }),
+    overrideExisting: false,
+  });
+
+export const {
+  useGetMySignatureQuery,
+  useUploadMySignatureMutation,
+  useDeleteMySignatureMutation,
+} = signatureApi;
--- a/apps/portal/src/app/features/profile/components/SignaturePad.tsx
+++ b/apps/portal/src/app/features/profile/components/SignaturePad.tsx
@@ -0,0 +1,28 @@
+import { SignaturePad } from '@ema-platform/ui';
+import {
+  useDeleteMySignatureMutation,
+  useGetMySignatureQuery,
+  useUploadMySignatureMutation,
+} from '../api/signature-api';
+
+/**
+ * The seafarer's own specimen signature, printed on documents issued to them
+ * (`{{seafarerSignature}}`). Distinct from an officer's signing signature,
+ * which the backoffice manages against a different endpoint.
+ */
+export function MySignaturePad() {
+  const { data, isLoading } = useGetMySignatureQuery();
+  const [upload, { isLoading: isUploading }] = useUploadMySignatureMutation();
+  const [remove, { isLoading: isDeleting }] = useDeleteMySignatureMutation();
+
+  return (
+    <SignaturePad
+      currentUrl={data?.url ?? null}
+      isLoading={isLoading}
+      isUploading={isUploading}
+      isDeleting={isDeleting}
+      onUpload={(file) => upload(file).unwrap()}
+      onDelete={() => remove().unwrap()}
+    />
+  );
+}
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -38,6 +38,7 @@ import {
  IconMapPin,
  IconMoon,
  IconSettings,
+  IconSignature,
  IconShieldLock,
  IconSun,
  IconUser,
@@ -67,6 +68,7 @@ import {
 import { useSaveMyAddressMutation } from '../api/address-api';
 import { toAddressPayload } from '../types/address';
 import { OperationsFormContent } from '../components/OperationsFormContent';
+import { MySignaturePad } from '../components/SignaturePad';
 import { SEAFARER_PROFILE_REQUIREMENT } from '../components/RequireSeafarerProfile';
 import classes from './ProfilePage.module.css';

@@ -76,6 +78,7 @@ const VALID_TABS = [
  'profile',
  'address',
  'operations',
+  'signature',
  'security',
  'preferences',
 ];
@@ -633,6 +636,9 @@ export function ProfilePage() {
          >
            {t('profile.tabs.operations')}
          </Tabs.Tab>
+          <Tabs.Tab value="signature" leftSection={<IconSignature size={18} />}>
+            {t('profile.tabs.signature')}
+          </Tabs.Tab>
          <Tabs.Tab value="security" leftSection={<IconShieldLock size={18} />}>
            {t('profile.tabs.security')}
          </Tabs.Tab>
@@ -808,6 +814,13 @@ export function ProfilePage() {
          </Paper>
        </Tabs.Panel>

+        {/* ---- Signature (printed on issued documents) ---- */}
+        <Tabs.Panel value="signature" pt="md">
+          <Paper p="xl" shadow="sm" radius="lg" withBorder>
+            <MySignaturePad />
+          </Paper>
+        </Tabs.Panel>
+
        {/* ---- Security ---- */}
        <Tabs.Panel value="security" pt="md">
          <Stack gap="lg">
--- a/apps/portal/src/app/features/seafarer-registration/components/steps.tsx
+++ b/apps/portal/src/app/features/seafarer-registration/components/steps.tsx
@@ -6,6 +6,7 @@ import {
  GENDER_OPTIONS,
  HAIR_COLOR_OPTIONS,
  MARITAL_STATUS_OPTIONS,
+  RANK_TIER_OPTIONS,
  isEthiopianNationality,
  useGetActiveDepartmentsQuery,
  useLocalized,
@@ -130,6 +131,18 @@ export function ApplicantDetailsStep(p: StepProps) {
          options={departmentOptions}
          description="The STCW department you serve in. Determines which certificates, examinations and services apply to you."
        />
+        <SelectField
+          {...p}
+          name="tier"
+          label="Certificate Limitation"
+          required
+          options={RANK_TIER_OPTIONS}
+          description={
+            p.form.department === 'ENGINE'
+              ? 'Above covers ships of 3000 kW propulsion power or more; Below covers 750–3000 kW. Every Certificate of Competency you apply for is issued under this limit.'
+              : 'Above covers ships of 3000 gross tonnage or more; Below covers 500–3000 GT. Every Certificate of Competency you apply for is issued under this limit.'
+          }
+        />
      </Grid>

      <Divider />
--- a/apps/portal/src/app/features/seafarer-registration/pages/SeafarerRegistrationPage.tsx
+++ b/apps/portal/src/app/features/seafarer-registration/pages/SeafarerRegistrationPage.tsx
@@ -59,7 +59,7 @@ const STEPS = [
 */
 const REQUIRED_BY_STEP: AnswerKey[][] = [
  ['firstName', 'lastName', 'gender', 'dateOfBirth', 'maritalStatus', 'nationality'],
-  ['placeOfBirth', 'department', 'locationId', 'hairColor', 'eyeColor', 'heightCm', 'weightKg'],
+  ['placeOfBirth', 'department', 'tier', 'locationId', 'hairColor', 'eyeColor', 'heightCm', 'weightKg'],
  ['medicalCertificateNumber', 'medicalIssuerName', 'medicalIssueDate'],
  [],
  ['declarationAccepted'],
--- a/apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx
@@ -1,9 +1,8 @@
-import { useState } from 'react';
 import {
  Alert,
  Badge,
-  Button,
  Card,
+  CopyButton,
  Group,
  Loader,
  Paper,
@@ -12,41 +11,20 @@ import {
  Text,
  ThemeIcon,
  Title,
+  Tooltip,
+  UnstyledButton,
 } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
 import {
-  IconDownload,
+  IconCheck,
+  IconCopy,
  IconFingerprint,
+  IconIdBadge2,
  IconInfoCircle,
  IconScan,
 } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { authStorage } from '@ema-platform/auth';
+import { useCurrentProfile } 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',
@@ -54,44 +32,17 @@ const MODALITY_LABEL: Record<string, string> = {
 };

 /**
- * View-only: what's enrolled, plus a printable slip. Capture stays
- * counter-side with a scanner — there is no self-enrollment flow here.
+ * View-only: the seafarer's BSID and what is enrolled against it. 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);
-    }
-  };
+  // The BSID lives on the profile, stamped by staff once a capture is
+  // confirmed — it is not a property of any one enrollment, so it is read
+  // from the profile rather than from the rows below.
+  const { profile, isLoading: profileLoading } = useCurrentProfile();
+  const bsid = profile?.bsid ?? null;

  const rows = enrollments ?? [];

@@ -109,6 +60,45 @@ export function BiometricsPage() {
      </Alert>

      <Paper withBorder radius="lg" p="xl">
+        <Group gap="sm" mb={rows.length || isLoading ? 'lg' : 0} align="flex-start">
+          <ThemeIcon size={40} radius="md" color="indigo" variant="light">
+            <IconIdBadge2 size={20} />
+          </ThemeIcon>
+          <div style={{ flex: 1 }}>
+            <Text fz="xs" c="dimmed" tt="uppercase" fw={600}>
+              {t('biometrics.bsidLabel', 'Biometric Subject ID')}
+            </Text>
+            {profileLoading ? (
+              <Loader size="xs" mt={6} />
+            ) : bsid ? (
+              <CopyButton value={bsid} timeout={1500}>
+                {({ copied, copy }) => (
+                  <Tooltip
+                    label={copied ? t('biometrics.copied', 'Copied') : t('biometrics.copy', 'Copy')}
+                    withArrow
+                  >
+                    <UnstyledButton onClick={copy}>
+                      <Group gap={6} align="center">
+                        <Text ff="monospace" fw={700} fz="lg">
+                          {bsid}
+                        </Text>
+                        {copied ? <IconCheck size={15} /> : <IconCopy size={15} />}
+                      </Group>
+                    </UnstyledButton>
+                  </Tooltip>
+                )}
+              </CopyButton>
+            ) : (
+              <Text fz="sm" c="dimmed" mt={2}>
+                {t(
+                  'biometrics.bsidPending',
+                  'Not issued yet. Your BSID is generated once your enrolment is confirmed at the counter.',
+                )}
+              </Text>
+            )}
+          </div>
+        </Group>
+
        {isLoading ? (
          <Group justify="center" py="lg">
            <Loader size="sm" />
@@ -147,34 +137,9 @@ export function BiometricsPage() {
                </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>
  );
 }
--- a/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
+++ b/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
@@ -22,11 +22,15 @@ import {
  IconFileDescription,
  IconInfoCircle,
  IconPrinter,
+  IconRefresh,
+  IconReplace,
  IconShield,
 } from "@tabler/icons-react";
 import { notifications } from "@mantine/notifications";
 import {
  SEAFARER_DOCUMENT_KIND_LABELS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_COLORS,
+  SEAFARER_DOCUMENT_REQUEST_KIND_LABELS,
  SEAFARER_DOCUMENT_STATUS_COLORS,
  SEAFARER_DOCUMENT_STATUS_LABELS,
  extractErrorMessage,
@@ -34,6 +38,8 @@ import {
  useGetMySeafarerDocumentsQuery,
  useGetPaymentCapabilitiesQuery,
  useLazyGetMySeafarerDocumentDownloadQuery,
+  useRenewSeafarerDocumentMutation,
+  useReplaceSeafarerDocumentMutation,
  type SeafarerDocument,
  type SeafarerDocumentStatus,
 } from "@ema-platform/api";
@@ -73,9 +79,20 @@ function DocumentCard({ document, onChanged }: { document: SeafarerDocument; onC
  const { data: capabilities } = useGetPaymentCapabilitiesQuery();
  const [bypass, { isLoading: bypassing }] = useBypassDocumentPaymentMutation();
  const [getDownload, { isFetching: downloading }] = useLazyGetMySeafarerDocumentDownloadQuery();
+  const [renew, { isLoading: renewing }] = useRenewSeafarerDocumentMutation();
+  const [replaceDoc, { isLoading: replacing }] = useReplaceSeafarerDocumentMutation();
  const title = SEAFARER_DOCUMENT_KIND_LABELS[document.kind];
  const activeStep = stageIndexFor(document.status);

+  async function renewOrReplace(action: () => ReturnType<typeof renew>) {
+    try {
+      await action().unwrap();
+      onChanged();
+    } catch (err) {
+      notifications.show({ color: "red", title: "Request failed", message: extractErrorMessage(err) });
+    }
+  }
+
  async function download() {
    try {
      const { url } = await getDownload(document.id).unwrap();
@@ -102,9 +119,16 @@ function DocumentCard({ document, onChanged }: { document: SeafarerDocument; onC
            </Text>
          </div>
        </Group>
-        <Badge color={SEAFARER_DOCUMENT_STATUS_COLORS[document.status]} variant="light" size="lg">
-          {SEAFARER_DOCUMENT_STATUS_LABELS[document.status]}
-        </Badge>
+        <Group gap="xs">
+          {document.requestKind !== "NEW" && (
+            <Badge color={SEAFARER_DOCUMENT_REQUEST_KIND_COLORS[document.requestKind]} variant="outline" size="lg">
+              {SEAFARER_DOCUMENT_REQUEST_KIND_LABELS[document.requestKind]}
+            </Badge>
+          )}
+          <Badge color={SEAFARER_DOCUMENT_STATUS_COLORS[document.status]} variant="light" size="lg">
+            {SEAFARER_DOCUMENT_STATUS_LABELS[document.status]}
+          </Badge>
+        </Group>
      </Group>

      {document.status !== "REJECTED" && document.status !== "CANCELLED" && (
@@ -165,9 +189,29 @@ function DocumentCard({ document, onChanged }: { document: SeafarerDocument; onC
              {document.issueDate && ` on ${formatDate(document.issueDate)}`}
              {document.expiryDate && `, valid until ${formatDate(document.expiryDate)}`}.
            </span>
-            <Button size="xs" variant="light" leftSection={<IconDownload size={14} />} loading={downloading} onClick={download}>
-              Download PDF
-            </Button>
+            <Group gap="xs">
+              <Button size="xs" variant="light" leftSection={<IconDownload size={14} />} loading={downloading} onClick={download}>
+                Download PDF
+              </Button>
+              <Button
+                size="xs"
+                variant="default"
+                leftSection={<IconRefresh size={14} />}
+                loading={renewing}
+                onClick={() => renewOrReplace(() => renew(document.id))}
+              >
+                Renew
+              </Button>
+              <Button
+                size="xs"
+                variant="default"
+                leftSection={<IconReplace size={14} />}
+                loading={replacing}
+                onClick={() => renewOrReplace(() => replaceDoc(document.id))}
+              >
+                Report Lost/Damaged
+              </Button>
+            </Group>
          </Group>
        </Alert>
      )}
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -59,6 +59,7 @@ export const am: Translations = {
    seaRecords: 'የባህር መዝገቦቼ',
    seaService: 'የባህር አገልግሎት',
    medical: 'የሕክምና የምስክር ወረቀት',
+    biometrics: 'ባዮሜትሪክ',
    myApplication: 'ማመልከቻዬ',
    certificates: 'የምስክር ወረቀቶች',
    seamanBook: 'የመርከበኛ መጽሐፍ እና BTC',
@@ -192,6 +193,7 @@ export const am: Translations = {
      search: 'ፈልግ',
      searchPlaceholder: 'ቁጥር ወይም አመልካች',
      status: 'ሁኔታ',
+      kind: 'ዓይነት',
      any: 'ማንኛውም',
      from: 'ከ',
      to: 'እስከ',
@@ -215,6 +217,9 @@ export const am: Translations = {
      applicant: 'አመልካች',
      progress: 'ደረጃ',
      applicationNumber: 'የማመልከቻ ቁጥር',
+      kindNew: 'አዲስ',
+      kindRenewal: 'እድሳት',
+      kindReissue: 'ምትክ',
    },
    actions: {
      continue: 'ቀጥል',
@@ -333,9 +338,31 @@ export const am: Translations = {
      profile: 'መገለጫ',
      address: 'አድራሻ',
      operations: 'የስራ ዘርፍ',
+      signature: 'ፊርማ',
      security: 'ደህንነት',
      preferences: 'ምርጫዎች',
    },
+    signature: {
+      title: 'የፊርማ ናሙና',
+      description: 'አንድ ጊዜ ይሳሉ ወይም ይጫኑ፤ በሚሰጡዎት ሰነዶች ላይ ይታተማል።',
+      reissueNotice:
+        'ፊርማዎን መቀየር አስቀድሞ የተሰጠን ሰነድ አይለውጥም — ከአሁን በኋላ በሚሰጡ ሰነዶች ላይ ብቻ ይሠራል።',
+      current: 'የተመዘገበ ፊርማ',
+      currentAlt: 'የተቀመጠ ፊርማዎ',
+      none: 'እስካሁን የተመዘገበ ፊርማ የለም።',
+      modeDraw: 'ይሳሉ',
+      modeUpload: 'ይጫኑ',
+      save: 'ፊርማ አስቀምጥ',
+      clear: 'አጽዳ',
+      choose: 'ምስል ይምረጡ',
+      fileHint: 'PNG ወይም JPEG፣ እስከ 2 ሜባ።',
+      remove: 'አስወግድ',
+      saved: 'ፊርማ ተቀምጧል።',
+      removed: 'ፊርማ ተወግዷል።',
+      badType: 'PNG እና JPEG ምስሎች ብቻ ይፈቀዳሉ።',
+      tooLarge: 'ምስሉ ከ2 ሜባ ይበልጣል።',
+      drawFailed: 'ሥዕሉን ማንበብ አልተቻለም። እባክዎ እንደገና ይሞክሩ።',
+    },
    maritimeSection: {
      title: 'የባህር ሙያ መገለጫ',
      subtitle: 'የባህር ሙያ ዝርዝሮችዎ',
@@ -800,6 +827,7 @@ export const am: Translations = {
  },

  licensing: {
+    certificateSuperseded: 'ሰርተፍኬቱ ተተክቷል',
    vesselPicker: {
      placeholder: 'የተመዘገበ መርከብ ይምረጡ',
    },
@@ -824,6 +852,8 @@ export const am: Translations = {
      renewDays_one: 'አድስ — በ{{count}} ቀን ውስጥ ያበቃል',
      renewDays_other: 'አድስ — በ{{count}} ቀናት ውስጥ ያበቃል',
      renewFailed: 'ዕድሳት መጀመር አልተቻለም',
+      reportDamaged: 'ጉዳት ሪፖርት ያድርጉ / ምትክ ይጠይቁ',
+      reissueFailed: 'የምትክ ጥያቄ መጀመር አልተቻለም',
      status: {
        ACTIVE: 'የፀና',
        EXPIRED: 'ጊዜው ያለፈበት',
@@ -858,6 +888,15 @@ export const am: Translations = {
    },
  },

+  pickup: {
+    title: 'የሰነድ መረከቢያ',
+    scheduledFor: 'ሰነድዎን ለመረከብ በ{{date}} ({{period}}) ወደ ቢሮ ይምጡ።',
+    setByOffice: 'ይህ ቀጠሮ በፈቃድ ጽ/ቤቱ ተይዟል።',
+    awaitingSchedule: 'ክፍያዎ ከተረጋገጠ በኋላ ፈቃድ ጽ/ቤቱ የመረከቢያ ቀን ይይዝልዎታል።',
+    morning: 'ጠዋት',
+    afternoon: 'ከሰዓት በኋላ',
+  },
+
  certificates: {
    title: "የእኔ የምስክር ወረቀቶች",
    loading: "የምስክር ወረቀቶች በመጫን ላይ…",
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -49,6 +49,7 @@ export const en = {
    seaRecords: 'My Sea Records',
    seaService: 'Sea Service',
    medical: 'Medical Certificate',
+    biometrics: 'Biometrics',
    myApplication: 'My Application',
    vesselRegistration: 'Vessel Registration',
    vesselRegistrationDashboard: 'Vessel Registration Dashboard',
@@ -192,6 +193,7 @@ export const en = {
      search: 'Search',
      searchPlaceholder: 'Number or applicant',
      status: 'Status',
+      kind: 'Type',
      any: 'Any',
      from: 'From',
      to: 'To',
@@ -215,6 +217,9 @@ export const en = {
      applicant: 'Applicant',
      progress: 'Progress',
      applicationNumber: 'Application №',
+      kindNew: 'New',
+      kindRenewal: 'Renewal',
+      kindReissue: 'Replacement',
    },
    actions: {
      continue: 'Continue',
@@ -333,9 +338,32 @@ export const en = {
      profile: 'Profile',
      address: 'Address',
      operations: 'Operations',
+      signature: 'Signature',
      security: 'Security',
      preferences: 'Preferences',
    },
+    signature: {
+      title: 'Specimen signature',
+      description:
+        'Drawn or uploaded once and printed on the documents issued to you.',
+      reissueNotice:
+        'Changing your signature does not alter a document already issued — it applies to whatever is issued from now on.',
+      current: 'Signature on file',
+      currentAlt: 'Your stored signature',
+      none: 'No signature on file yet.',
+      modeDraw: 'Draw',
+      modeUpload: 'Upload',
+      save: 'Save signature',
+      clear: 'Clear',
+      choose: 'Choose image',
+      fileHint: 'PNG or JPEG, up to 2 MB.',
+      remove: 'Remove',
+      saved: 'Signature saved.',
+      removed: 'Signature removed.',
+      badType: 'Only PNG and JPEG images are accepted.',
+      tooLarge: 'That image is larger than 2 MB.',
+      drawFailed: 'Could not read the drawing. Please try again.',
+    },
    maritimeSection: {
      title: 'Maritime Profile',
      subtitle: 'Your professional maritime details',
@@ -800,6 +828,7 @@ export const en = {
  },

  licensing: {
+    certificateSuperseded: 'Certificate superseded',
    vesselPicker: {
      placeholder: 'Select a registered vessel',
    },
@@ -824,6 +853,8 @@ export const en = {
      renewDays_one: 'Renew — expires in {{count}} day',
      renewDays_other: 'Renew — expires in {{count}} days',
      renewFailed: 'Could not start the renewal',
+      reportDamaged: 'Report damaged / request replacement',
+      reissueFailed: 'Could not start the replacement request',
      status: {
        ACTIVE: 'Active',
        EXPIRED: 'Expired',
@@ -858,6 +889,15 @@ export const en = {
    },
  },

+  pickup: {
+    title: 'Document Pickup',
+    scheduledFor: 'Visit the office on {{date}} ({{period}}) to collect your document.',
+    setByOffice: 'This appointment was scheduled by the licensing office.',
+    awaitingSchedule: 'The licensing office will assign a pickup date once your payment is confirmed.',
+    morning: 'Morning',
+    afternoon: 'Afternoon',
+  },
+
  certificates: {
    title: 'My Certificates',
    loading: 'Loading Certificates…',
--- a/apps/portal/vite.config.mts
+++ b/apps/portal/vite.config.mts
@@ -9,20 +9,17 @@ export default defineConfig({
  // built-in default.
  envDir: "../../",
  cacheDir: "../../node_modules/.vite/apps/portal",
-  // 3000, not the usual 4200: the Fayda redirect URI registered for local
-  // testing is http://localhost:3001/callback, and the provider matches it
-  // exactly. The API moves to 3001 to make room.
-  server: { port: 3000, host: "localhost" },
+  server: { port: 4200, host: "localhost" },
  //   server: {
  //   port: 4200,
  //   proxy: {
  //     '/api': {
-  //       target: 'http://localhost:3001', // change from 'https://ema-api-dev.triaplc.com'
+  //       target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
  //       changeOrigin: true,
  //     },
  //   },
  // },
-  preview: { port: 3000, host: "localhost" },
+  preview: { port: 4200, host: "localhost" },
  plugins: [react(), nxViteTsPaths()],
  resolve: {
    dedupe: ["react", "react-dom", "react-router-dom", "@tanstack/react-query"],
--- a/libs/api/src/lib/base-api/base-query-with-reauth.ts
+++ b/libs/api/src/lib/base-api/base-query-with-reauth.ts
@@ -10,7 +10,7 @@ import { resolveSessionContext } from "../session";
 export const BASE_API_URL =
  (import.meta as { env?: Record<string, string> }).env?.[
    "VITE_BASE_API_URL"
-  ]?.trim() || "http://localhost:3001/api";
+  ]?.trim() || "http://localhost:3000/api";

 let _onTokenExpired: (() => Promise<string>) | null = null;
 let _onAuthFailure: (() => void) | null = null;
--- a/libs/api/src/lib/features/licensing/licensing-api.ts
+++ b/libs/api/src/lib/features/licensing/licensing-api.ts
@@ -13,6 +13,7 @@ import type {
  InitiatePaymentResult,
  IssuedLicense,
  Inspection,
+  IssuancePeriod,
  LicenseApplication,
  LicenseCategoryDefinition,
  LicenseStatus,
@@ -26,6 +27,9 @@ import type {
  ExportResult,
  LicenseTemplate,
  Paginated,
+  PickupAppointment,
+  PickupOffice,
+  PickupSlot,
  QueueCounts,
  QueueFilter,
  Rank,
@@ -75,6 +79,8 @@ const TAGS = [
  'SavedView',
  'LicenseTemplate',
  'DocumentRequirement',
+  'PickupOffice',
+  'PickupAppointment',
  'Department',
  'Rank',
 ] as const;
@@ -980,12 +986,12 @@ export const licensingApi = baseApi

      scheduleIssuance: builder.mutation<
        LicenseApplication,
-        { id: string; scheduledDate: string }
+        { id: string; scheduledDate: string; scheduledPeriod: IssuancePeriod }
      >({
-        query: ({ id, scheduledDate }) => ({
+        query: ({ id, scheduledDate, scheduledPeriod }) => ({
          url: `/license-application-review/${id}/schedule-issuance`,
          method: 'POST',
-          body: { scheduledDate },
+          body: { scheduledDate, scheduledPeriod },
        }),
        invalidatesTags: (_r, error, { id }) =>
          error ? [] : [itemTag('LicenseApplication', id), listTag('ApplicationQueue')],
@@ -1000,6 +1006,104 @@ export const licensingApi = baseApi
          error ? [] : [itemTag('LicenseApplication', id), listTag('ApplicationQueue')],
      }),

+      // ------------------------------------------------------------- pickup
+      getPickupOffices: builder.query<PickupOffice[], void>({
+        query: () => ({ url: '/pickup/offices' }),
+        providesTags: [listTag('PickupOffice')],
+      }),
+
+      getPickupSlots: builder.query<
+        PickupSlot[],
+        { officeId: string; from: string; to: string }
+      >({
+        query: ({ officeId, from, to }) => ({
+          url: `/pickup/offices/${officeId}/slots`,
+          params: { from, to },
+        }),
+      }),
+
+      schedulePickup: builder.mutation<
+        PickupAppointment,
+        { applicationId: string; officeId: string; date: string; slotStartTime: string }
+      >({
+        query: (body) => ({ url: '/pickup/appointments', method: 'POST', body }),
+        invalidatesTags: (_r, error, { applicationId }) =>
+          error
+            ? []
+            : [
+                itemTag('LicenseApplication', applicationId),
+                listTag('ApplicationQueue'),
+                listTag('PickupAppointment'),
+              ],
+      }),
+
+      reschedulePickup: builder.mutation<
+        PickupAppointment,
+        { appointmentId: string; officeId: string; date: string; slotStartTime: string }
+      >({
+        query: ({ appointmentId, ...body }) => ({
+          url: `/pickup/appointments/${appointmentId}/reschedule`,
+          method: 'PATCH',
+          body,
+        }),
+        invalidatesTags: (_r, error, { appointmentId }) =>
+          error ? [] : [itemTag('PickupAppointment', appointmentId), listTag('PickupAppointment')],
+      }),
+
+      getPickupAppointmentsForApplication: builder.query<PickupAppointment[], string>({
+        query: (applicationId) => ({
+          url: `/pickup/applications/${applicationId}/appointments`,
+        }),
+        providesTags: (_r, _e, applicationId) => [itemTag('PickupAppointment', applicationId)],
+      }),
+
+      getPickupWorklist: builder.query<
+        PickupAppointment[],
+        { date: string; officeId?: string }
+      >({
+        query: ({ date, officeId }) => ({
+          url: '/pickup/appointments',
+          params: officeId ? { date, officeId } : { date },
+        }),
+        providesTags: [listTag('PickupAppointment')],
+      }),
+
+      checkInPickup: builder.mutation<PickupAppointment, string>({
+        query: (id) => ({ url: `/pickup/appointments/${id}/check-in`, method: 'PATCH' }),
+        invalidatesTags: (_r, error, id) =>
+          error ? [] : [itemTag('PickupAppointment', id), listTag('PickupAppointment')],
+      }),
+
+      markPickupIssued: builder.mutation<PickupAppointment, string>({
+        query: (id) => ({ url: `/pickup/appointments/${id}/issued`, method: 'PATCH' }),
+        invalidatesTags: (_r, error, id) =>
+          error ? [] : [itemTag('PickupAppointment', id), listTag('PickupAppointment')],
+      }),
+
+      markPickupNoShow: builder.mutation<PickupAppointment, string>({
+        query: (id) => ({ url: `/pickup/appointments/${id}/no-show`, method: 'PATCH' }),
+        invalidatesTags: (_r, error, id) =>
+          error ? [] : [itemTag('PickupAppointment', id), listTag('PickupAppointment')],
+      }),
+
+      createPickupOffice: builder.mutation<PickupOffice, Partial<PickupOffice>>({
+        query: (body) => ({ url: '/pickup/offices', method: 'POST', body }),
+        invalidatesTags: [listTag('PickupOffice')],
+      }),
+
+      updatePickupOffice: builder.mutation<
+        PickupOffice,
+        { id: string } & Partial<PickupOffice>
+      >({
+        query: ({ id, ...body }) => ({
+          url: `/pickup/offices/${id}`,
+          method: 'PATCH',
+          body,
+        }),
+        invalidatesTags: (_r, error, { id }) =>
+          error ? [] : [itemTag('PickupOffice', id), listTag('PickupOffice')],
+      }),
+
      // --------------------------------------------------------- inspection
      scheduleInspection: builder.mutation<
        Inspection,
@@ -1175,6 +1279,17 @@ export const {
  useConfirmPaymentMutation,
  useScheduleIssuanceMutation,
  useIssueCertificateMutation,
+  useGetPickupOfficesQuery,
+  useGetPickupSlotsQuery,
+  useSchedulePickupMutation,
+  useReschedulePickupMutation,
+  useGetPickupAppointmentsForApplicationQuery,
+  useGetPickupWorklistQuery,
+  useCheckInPickupMutation,
+  useMarkPickupIssuedMutation,
+  useMarkPickupNoShowMutation,
+  useCreatePickupOfficeMutation,
+  useUpdatePickupOfficeMutation,
  useScheduleInspectionMutation,
  useRescheduleInspectionMutation,
  useGetInspectionsQuery,
--- a/libs/api/src/lib/features/licensing/licensing.helpers.ts
+++ b/libs/api/src/lib/features/licensing/licensing.helpers.ts
@@ -1,6 +1,8 @@
 import { isValidPhoneNumber } from 'libphonenumber-js';
 import { resolveTokenFromStorage } from '../../session';
+import { BASE_API_URL } from '../../base-api/base-query-with-reauth';
 import type {
+  ApplicationKind,
  Bilingual,
  FamilyKind,
  FieldCondition,
@@ -11,7 +13,10 @@ import type {
  ValidationIssue,
 } from './licensing.types';

-import { BASE_API_URL } from '../../base-api/base-query-with-reauth';
+/** A section with no `applicationKinds` applies to every kind, as before that field existed. */
+function sectionAppliesToKind(section: FormSectionConfig, kind: ApplicationKind): boolean {
+  return !section.applicationKinds?.length || section.applicationKinds.includes(kind);
+}

 /**
 * Uploads a document straight to the API.
@@ -450,12 +455,28 @@ export function buildWizardSteps(
     * instead of showing an empty page.
     */
    hasStaff?: boolean;
+    /**
+     * Whether this application has any document requirements to upload.
+     * False for a Damaged/Reissue application, which asks nothing beyond the
+     * Damage Information step — showing an empty Documents page would be a
+     * page to click past for nothing.
+     */
+    hasDocuments?: boolean;
    /** Active UI language. Components get this from `useLocalized`; this is a
     *  pure function, so the caller passes `i18n.language` through. */
    language?: string;
+    /**
+     * The application's kind — NEW unless the caller is renewing or
+     * reissuing. A section scoped to a different kind via
+     * `applicationKinds` is left out entirely, the same as a `showWhen`
+     * that never holds.
+     */
+    applicationKind?: ApplicationKind;
  },
 ): WizardStep[] {
+  const kind = options?.applicationKind ?? 'NEW';
  const visible = [...sections]
+    .filter((section) => sectionAppliesToKind(section, kind))
    .filter((section) => conditionHolds(section.showWhen, formData))
    .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));

@@ -510,7 +531,9 @@ export function buildWizardSteps(
    ...(options?.hasStaff === false
      ? []
      : [{ key: 'staff', label: 'Staff', kind: 'staff', sections: [] } as WizardStep]),
-    { key: 'documents', label: 'Documents', kind: 'documents', sections: [] },
+    ...(options?.hasDocuments === false
+      ? []
+      : [{ key: 'documents', label: 'Documents', kind: 'documents', sections: [] } as WizardStep]),
    { key: 'review', label: 'Review', kind: 'review', sections: reviewSections },
  ];
 }
--- a/libs/api/src/lib/features/licensing/licensing.types.ts
+++ b/libs/api/src/lib/features/licensing/licensing.types.ts
@@ -63,7 +63,10 @@ export type LicenseStatus =
  | "EXAM_PASSED"
  | "EXAM_FAILED";

-export type ApplicationKind = "NEW" | "RENEWAL";
+export type ApplicationKind = "NEW" | "RENEWAL" | "REISSUE";
+
+/** Half-day window a team leader books an applicant's document pickup into. */
+export type IssuancePeriod = "MORNING" | "AFTERNOON";

 export type FormFieldType =
  | "TEXT"
@@ -120,6 +123,12 @@ export interface FormSectionConfig {
  group?: string;
  /** Position of the group in the stepper; lowest value in a group wins. */
  groupOrder?: number;
+  /**
+   * Restricts this section to specific application kinds — e.g. the
+   * Damaged/Reissue "Damage Information" step. Undefined or empty means
+   * every kind.
+   */
+  applicationKinds?: ApplicationKind[];
 }

 /** Grouping the portal organises the licence catalogue by. */
@@ -349,6 +358,7 @@ export interface LicenseApplication {
  issuedLicenseId: string | null;
  /** Set once an officer schedules pickup for a document requiring in-person handover. */
  scheduledIssuanceDate: string | null;
+  scheduledIssuancePeriod: IssuancePeriod | null;
  scheduledBy: string | null;
  createdAt: string;
 }
@@ -440,6 +450,13 @@ export interface ApplicationApplicant {

 export interface ApplicationDetail {
  application: LicenseApplication;
+  /**
+   * Current status of the license this application issued, independent of
+   * the application's own (permanently historical) status — a later
+   * reissue/renewal can supersede the license without changing what this
+   * application itself accomplished. Null when nothing has been issued yet.
+   */
+  issuedLicenseStatus: "ACTIVE" | "EXPIRED" | "SUSPENDED" | "CANCELLED" | "SUPERSEDED" | null;
  relatedApplications?: LicenseApplication[];
  /** Null when the applicant has no profile row (never expected in practice). */
  applicant: ApplicationApplicant | null;
@@ -466,6 +483,50 @@ export interface Inspection {
  findings: string | null;
 }

+export type PickupAppointmentStatus =
+  | "SCHEDULED"
+  | "CHECKED_IN"
+  | "ISSUED"
+  | "NO_SHOW"
+  | "RESCHEDULED"
+  | "CANCELLED";
+
+export interface PickupOffice {
+  id: string;
+  name: string;
+  address: string | null;
+  /** 0=Sunday .. 6=Saturday. */
+  workingDays: number[];
+  startTime: string;
+  endTime: string;
+  slotDurationMinutes: number;
+  maxApplicantsPerSlot: number;
+  rescheduleMinNoticeHours: number;
+  isActive: boolean;
+}
+
+export interface PickupSlot {
+  date: string;
+  slotStartTime: string;
+  capacity: number;
+  booked: number;
+  available: number;
+}
+
+export interface PickupAppointment {
+  id: string;
+  applicationId: string;
+  appointmentNumber: string;
+  officeId: string;
+  date: string;
+  slotStartTime: string;
+  status: PickupAppointmentStatus;
+  rescheduledFromId: string | null;
+  rescheduleCount: number;
+  checkedInAt: string | null;
+  checkedInById: string | null;
+}
+
 export interface AppNotification {
  id: string;
  subject: Bilingual;
@@ -482,6 +543,7 @@ export interface QueueFilter {
  licenseTypeId?: string;
  search?: string;
  status?: LicenseStatus[];
+  kind?: ApplicationKind;
  /** Officer uuid, or the literal 'unassigned'. */
  assignee?: string;
  submittedFrom?: string;
@@ -747,6 +809,8 @@ export interface IssuedLicense {
   * configuration.
   */
  renewable?: boolean;
+  /** Whether a Damaged/Reissue replacement may be requested for this licence. */
+  reissuable?: boolean;
  verificationCode: string;
  certificateFileKey: string | null;
 }
--- a/libs/api/src/lib/features/seafarer-document/seafarer-document-api.ts
+++ b/libs/api/src/lib/features/seafarer-document/seafarer-document-api.ts
@@ -4,6 +4,7 @@ import type {
  SeafarerDocument,
  SeafarerDocumentDetail,
  SeafarerDocumentKind,
+  SeafarerDocumentRequestKind,
  SeafarerDocumentRow,
  SeafarerDocumentStatus,
 } from './seafarer-document.types';
@@ -14,6 +15,7 @@ const item = (id: string) => ({ type: TAG, id }) as const;

 export interface SeafarerDocumentListFilter {
  kind?: SeafarerDocumentKind;
+  requestKind?: SeafarerDocumentRequestKind;
  status?: SeafarerDocumentStatus;
  search?: string;
  take?: number;
@@ -63,6 +65,16 @@ export const seafarerDocumentApi = baseApi
        invalidatesTags: (_r, error, id) => (error ? [] : [LIST, item(id)]),
      }),

+      renewSeafarerDocument: builder.mutation<SeafarerDocument, string>({
+        query: (id) => ({ url: `/seafarer-documents/${id}/renew`, method: 'POST' }),
+        invalidatesTags: (_r, error) => (error ? [] : [LIST]),
+      }),
+
+      replaceSeafarerDocument: builder.mutation<SeafarerDocument, string>({
+        query: (id) => ({ url: `/seafarer-documents/${id}/replace`, method: 'POST' }),
+        invalidatesTags: (_r, error) => (error ? [] : [LIST]),
+      }),
+
      // --------------------------------------------------------------- review
      listSeafarerDocuments: builder.query<
        { total: number; items: SeafarerDocumentRow[] },
@@ -121,6 +133,8 @@ export const {
  useInitiateDocumentPaymentMutation,
  useGetDocumentPaymentQuery,
  useBypassDocumentPaymentMutation,
+  useRenewSeafarerDocumentMutation,
+  useReplaceSeafarerDocumentMutation,
  useListSeafarerDocumentsQuery,
  useGetSeafarerDocumentReviewQuery,
  useLazyGetSeafarerDocumentReviewDownloadQuery,
--- a/libs/api/src/lib/features/seafarer-document/seafarer-document.constants.ts
+++ b/libs/api/src/lib/features/seafarer-document/seafarer-document.constants.ts
@@ -1,10 +1,26 @@
-import type { SeafarerDocumentKind, SeafarerDocumentStatus } from './seafarer-document.types';
+import type {
+  SeafarerDocumentKind,
+  SeafarerDocumentRequestKind,
+  SeafarerDocumentStatus,
+} from './seafarer-document.types';

 export const SEAFARER_DOCUMENT_KIND_LABELS: Record<SeafarerDocumentKind, string> = {
  SEAMAN_BOOK: 'Seaman Book',
  BTC_BASIC_TRAINING: 'Basic Training Certificate',
 };

+export const SEAFARER_DOCUMENT_REQUEST_KIND_LABELS: Record<SeafarerDocumentRequestKind, string> = {
+  NEW: 'New',
+  RENEWAL: 'Renewal',
+  REPLACEMENT: 'Replacement',
+};
+
+export const SEAFARER_DOCUMENT_REQUEST_KIND_COLORS: Record<SeafarerDocumentRequestKind, string> = {
+  NEW: 'gray',
+  RENEWAL: 'blue',
+  REPLACEMENT: 'orange',
+};
+
 export const SEAFARER_DOCUMENT_STATUS_LABELS: Record<SeafarerDocumentStatus, string> = {
  AWAITING_REGISTRATION: 'Awaiting Registration',
  PAYMENT_PENDING: 'Payment Pending',
--- a/libs/api/src/lib/features/seafarer-document/seafarer-document.types.ts
+++ b/libs/api/src/lib/features/seafarer-document/seafarer-document.types.ts
@@ -12,14 +12,19 @@ export type SeafarerDocumentStatus =
  | 'REJECTED'
  | 'CANCELLED';

-/** A Seaman Book or BTC request — opened by a seafarer registration. */
+/** NEW comes from a seafarer registration; RENEWAL/REPLACEMENT are applicant-initiated. */
+export type SeafarerDocumentRequestKind = 'NEW' | 'RENEWAL' | 'REPLACEMENT';
+
+/** A Seaman Book or BTC request — opened by a seafarer registration, or by the applicant as a renewal/replacement. */
 export interface SeafarerDocument {
  id: string;
  kind: SeafarerDocumentKind;
+  requestKind: SeafarerDocumentRequestKind;
  requestNumber: string;
  applicantUserId: string;
  profileId: string | null;
  seafarerRegistrationId: string | null;
+  previousDocumentId: string | null;
  status: SeafarerDocumentStatus;
  feeAmount: number | null;
  feeCurrency: string;
--- a/libs/api/src/lib/features/seafarer-registration/seafarer-registration.constants.ts
+++ b/libs/api/src/lib/features/seafarer-registration/seafarer-registration.constants.ts
@@ -25,6 +25,19 @@ export const DEPARTMENT_OPTIONS = [
  { value: 'CATERING', label: 'Catering' },
 ];

+/**
+ * The STCW limitation a Certificate of Competency is issued under.
+ *
+ * One choice, worded generically, because the threshold it means differs by
+ * department — gross tonnage on deck, propulsion power in the engine room. The
+ * certificate states the department-specific wording; the applicant only picks
+ * which side of the line they serve.
+ */
+export const RANK_TIER_OPTIONS = [
+  { value: 'ABOVE', label: 'Above' },
+  { value: 'BELOW', label: 'Below' },
+];
+
 export const HAIR_COLOR_OPTIONS = [
  { value: 'BLACK', label: 'Black' },
  { value: 'BROWN', label: 'Brown' },
@@ -117,6 +130,8 @@ export const SEAFARER_REGISTRATION_DOCUMENTS: {
 export const SEAFARER_REGISTRATION_STATUS_LABELS: Record<SeafarerRegistrationStatus, string> = {
  DRAFT: 'Draft',
  SUBMITTED: 'Submitted',
+  AWAITING_BIOMETRICS: 'Awaiting Biometrics',
+  UNDER_REVIEW: 'Under Review',
  RESUBMIT_REQUIRED: 'Corrections Requested',
  APPROVED: 'Approved',
  REJECTED: 'Rejected',
@@ -139,6 +154,8 @@ export const SEAFARER_REGISTRATION_STATUS_TONES: Record<
 > = {
  DRAFT: 'neutral',
  SUBMITTED: 'info',
+  AWAITING_BIOMETRICS: 'pending',
+  UNDER_REVIEW: 'info',
  RESUBMIT_REQUIRED: 'pending',
  APPROVED: 'success',
  REJECTED: 'danger',
@@ -158,6 +175,7 @@ export const SEAFARER_REGISTRATION_FIELD_LABELS: Record<keyof SeafarerRegistrati
  passportNumber: 'Passport Number',
  passportExpiry: 'Passport Expiry Date',
  department: 'Department',
+  tier: 'Certificate Limitation',
  locationId: 'Location',
  permanentAddress: 'Permanent Address',
  currentAddress: 'Current Address',
@@ -192,7 +210,7 @@ export const SEAFARER_REGISTRATION_SECTIONS: {
  {
    key: 'identity',
    title: 'Identity',
-    fields: ['placeOfBirth', 'passportNumber', 'passportExpiry', 'department'],
+    fields: ['placeOfBirth', 'passportNumber', 'passportExpiry', 'department', 'tier'],
  },
  {
    key: 'address',
@@ -220,6 +238,7 @@ const OPTION_LABELS: Partial<Record<keyof SeafarerRegistrationAnswers, { value:
  gender: GENDER_OPTIONS,
  maritalStatus: MARITAL_STATUS_OPTIONS,
  department: DEPARTMENT_OPTIONS,
+  tier: RANK_TIER_OPTIONS,
  hairColor: HAIR_COLOR_OPTIONS,
  eyeColor: EYE_COLOR_OPTIONS,
  bloodType: BLOOD_TYPE_OPTIONS,
--- a/libs/api/src/lib/features/seafarer-registration/seafarer-registration.types.ts
+++ b/libs/api/src/lib/features/seafarer-registration/seafarer-registration.types.ts
@@ -1,7 +1,16 @@
 import type { SeafarerDepartment } from '../seafarer/seafarer.types';

+/** Above/Below — the STCW limitation a Certificate of Competency is issued under. */
+export type RankTier = 'ABOVE' | 'BELOW';
+
 export type SeafarerRegistrationStatus =
  | 'DRAFT'
+  // Filed, waiting on the counter-side biometric capture that produces the
+  // BSID approval is blocked on.
+  | 'AWAITING_BIOMETRICS'
+  // BSID issued — the file is a reviewer's to decide.
+  | 'UNDER_REVIEW'
+  // Retained for registrations filed before biometrics moved ahead of review.
  | 'SUBMITTED'
  | 'RESUBMIT_REQUIRED'
  | 'APPROVED'
@@ -30,6 +39,11 @@ export interface SeafarerRegistrationAnswers {
  passportNumber: string | null;
  passportExpiry: string | null;
  department: SeafarerDepartment | null;
+  /**
+   * The STCW ship-size limitation this seafarer's CoCs are issued under.
+   * Read with `department` to pick the CoC ladder; CoP carries no tier.
+   */
+  tier: RankTier | null;
  locationId: string | null;
  permanentAddress: string | null;
  currentAddress: string | null;
--- a/libs/api/src/lib/session/index.ts
+++ b/libs/api/src/lib/session/index.ts
@@ -11,7 +11,7 @@ export const SESSION_HEADER_KEYS = {
 * Which app this bundle is, so it reads its own session and no one else's.
 *
 * Set by each app's store via `configureSessionScope`. Cookies ignore the
- * port, so `localhost:3001` and `localhost:4201` share one jar: without a
+ * port, so `localhost:3000` and `localhost:4201` share one jar: without a
 * scope the backoffice would happily authenticate as whoever last signed into
 * the portal, and render a staff console with an applicant's permissions.
 */
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -24,6 +24,8 @@ export * from "./lib/layout/SkipLink";
 export * from "./lib/input/PasswordRequirements";
 export * from "./lib/input/CountrySelect";
 export * from "./lib/input/PhoneInput";
+export * from "./lib/input/canvas-point";
+export * from "./lib/components/SignaturePad";
 export * from "./lib/input/phone";
 export * from "./lib/data/AdvancedTable";
 export * from "./lib/data/WaitingFor";
--- a/libs/ui/src/lib/components/SignaturePad.tsx
+++ b/libs/ui/src/lib/components/SignaturePad.tsx
@@ -0,0 +1,316 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  Group,
+  Image,
+  Loader,
+  Paper,
+  SegmentedControl,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import {
+  IconInfoCircle,
+  IconPencil,
+  IconTrash,
+  IconUpload,
+  IconWriting,
+} from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import { notify } from '../feedback/notify';
+import { useErrorHandler } from '../feedback/use-error-handler';
+import { toCanvasPoint } from '../input/canvas-point';
+
+/** Mirrors the API's own limits (`ProfileService.saveSignature`). */
+const ACCEPTED = ['image/png', 'image/jpeg'];
+const MAX_BYTES = 2 * 1024 * 1024;
+
+/**
+ * The drawing surface's backing-store size.
+ *
+ * Fixed rather than matched to the rendered element: this is what gets printed
+ * on a Seaman Book, so the stored image must not vary with the width of the
+ * browser window it happened to be drawn in. The canvas is displayed at
+ * whatever width the layout gives it and scaled to these dimensions.
+ */
+const PAD_WIDTH = 800;
+const PAD_HEIGHT = 260;
+
+/**
+ * Captures a specimen signature, drawn or uploaded.
+ *
+ * Drawing is a plain canvas with pointer events — one element and ~40 lines,
+ * where a signature-pad dependency would be a package to keep patched. Pointer
+ * events (not mouse + touch separately) cover mouse, finger and stylus in one
+ * set of handlers.
+ */
+export interface SignaturePadProps {
+  /** Short-lived link to the signature on file, or null when there is none. */
+  currentUrl: string | null;
+  isLoading: boolean;
+  isUploading: boolean;
+  isDeleting: boolean;
+  onUpload: (file: File) => Promise<unknown>;
+  onDelete: () => Promise<unknown>;
+}
+
+export function SignaturePad({
+  currentUrl,
+  isLoading,
+  isUploading,
+  isDeleting,
+  onUpload,
+  onDelete,
+}: SignaturePadProps) {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const drawing = useRef(false);
+  // Whether anything has actually been drawn — a blank canvas still encodes to
+  // a valid PNG, so without this "Save" would happily store an empty image.
+  const [hasInk, setHasInk] = useState(false);
+  const [mode, setMode] = useState<'draw' | 'upload'>('draw');
+
+  const busy = isUploading || isDeleting;
+
+  const context = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!ctx) return null;
+    ctx.lineWidth = 2.5;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeStyle = '#111';
+    return ctx;
+  }, []);
+
+  // The stored signature is flattened onto white before upload, so a canvas
+  // left transparent would print as a black box on some renderers.
+  const clear = useCallback(() => {
+    const ctx = context();
+    if (!ctx) return;
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, PAD_WIDTH, PAD_HEIGHT);
+    setHasInk(false);
+  }, [context]);
+
+  useEffect(() => {
+    if (mode === 'draw') clear();
+  }, [mode, clear]);
+
+  const pointAt = (event: React.PointerEvent<HTMLCanvasElement>) =>
+    toCanvasPoint(
+      event.clientX,
+      event.clientY,
+      event.currentTarget.getBoundingClientRect(),
+      { width: PAD_WIDTH, height: PAD_HEIGHT },
+    );
+
+  const onPointerDown = (event: React.PointerEvent<HTMLCanvasElement>) => {
+    const ctx = context();
+    if (!ctx) return;
+    // Keeps strokes tracking the pointer when it leaves the canvas mid-signature
+    // rather than ending the line at the edge.
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drawing.current = true;
+    const { x, y } = pointAt(event);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    // A tap with no movement should still leave a mark (a dot on an "i").
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    setHasInk(true);
+  };
+
+  const onPointerMove = (event: React.PointerEvent<HTMLCanvasElement>) => {
+    if (!drawing.current) return;
+    const ctx = context();
+    if (!ctx) return;
+    const { x, y } = pointAt(event);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  const onPointerUp = () => {
+    drawing.current = false;
+  };
+
+  const save = async (file: File) => {
+    try {
+      await onUpload(file);
+      notify.success(t('profile.signature.saved'));
+      if (mode === 'draw') clear();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const saveDrawing = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !hasInk) return;
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        notify.error(t('profile.signature.drawFailed'));
+        return;
+      }
+      void save(new File([blob], 'signature.png', { type: 'image/png' }));
+    }, 'image/png');
+  };
+
+  // Validated here as well as server-side so the reason is immediate and the
+  // user is not made to wait on an upload that is going to be rejected.
+  const onFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    // Lets the same file be picked again after a rejection.
+    event.target.value = '';
+    if (!file) return;
+    if (!ACCEPTED.includes(file.type)) {
+      notify.error(t('profile.signature.badType'));
+      return;
+    }
+    if (file.size > MAX_BYTES) {
+      notify.error(t('profile.signature.tooLarge'));
+      return;
+    }
+    void save(file);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await onDelete();
+      notify.success(t('profile.signature.removed'));
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Title order={5}>{t('profile.signature.title')}</Title>
+        <Text size="sm" c="dimmed">
+          {t('profile.signature.description')}
+        </Text>
+      </div>
+
+      <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
+        {t('profile.signature.reissueNotice')}
+      </Alert>
+
+      {isLoading ? (
+        <Group justify="center" py="xl">
+          <Loader size="sm" />
+        </Group>
+      ) : currentUrl ? (
+        <Paper p="md" radius="md" withBorder>
+          <Stack gap="sm">
+            <Text size="sm" fw={500}>
+              {t('profile.signature.current')}
+            </Text>
+            <Image
+              src={currentUrl}
+              alt={t('profile.signature.currentAlt')}
+              fit="contain"
+              h={120}
+              bg="white"
+            />
+            <Group>
+              <Button
+                variant="light"
+                color="red"
+                size="xs"
+                leftSection={<IconTrash size={16} />}
+                onClick={handleDelete}
+                loading={isDeleting}
+              >
+                {t('profile.signature.remove')}
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      ) : (
+        <Text size="sm" c="dimmed">
+          {t('profile.signature.none')}
+        </Text>
+      )}
+
+      <SegmentedControl
+        value={mode}
+        onChange={(value) => setMode(value as 'draw' | 'upload')}
+        data={[
+          { value: 'draw', label: t('profile.signature.modeDraw') },
+          { value: 'upload', label: t('profile.signature.modeUpload') },
+        ]}
+      />
+
+      {mode === 'draw' ? (
+        <Stack gap="sm">
+          <Box
+            component="canvas"
+            ref={canvasRef}
+            width={PAD_WIDTH}
+            height={PAD_HEIGHT}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+            style={{
+              width: '100%',
+              height: 'auto',
+              aspectRatio: `${PAD_WIDTH} / ${PAD_HEIGHT}`,
+              border: '1px dashed var(--mantine-color-gray-4)',
+              borderRadius: 'var(--mantine-radius-md)',
+              background: '#fff',
+              // Stops the browser panning/zooming the page mid-stroke on touch.
+              touchAction: 'none',
+              cursor: 'crosshair',
+            }}
+          />
+          <Group>
+            <Button
+              leftSection={<IconWriting size={16} />}
+              onClick={saveDrawing}
+              loading={isUploading}
+              disabled={!hasInk || busy}
+            >
+              {t('profile.signature.save')}
+            </Button>
+            <Button
+              variant="default"
+              leftSection={<IconPencil size={16} />}
+              onClick={clear}
+              disabled={!hasInk || busy}
+            >
+              {t('profile.signature.clear')}
+            </Button>
+          </Group>
+        </Stack>
+      ) : (
+        <Stack gap="sm">
+          <Button
+            component="label"
+            variant="light"
+            leftSection={<IconUpload size={16} />}
+            loading={isUploading}
+            disabled={busy}
+            style={{ alignSelf: 'flex-start' }}
+          >
+            {t('profile.signature.choose')}
+            <input
+              type="file"
+              hidden
+              accept={ACCEPTED.join(',')}
+              onChange={onFile}
+            />
+          </Button>
+          <Text size="xs" c="dimmed">
+            {t('profile.signature.fileHint')}
+          </Text>
+        </Stack>
+      )}
+    </Stack>
+  );
+}
--- a/libs/ui/src/lib/input/canvas-point.spec.ts
+++ b/libs/ui/src/lib/input/canvas-point.spec.ts
@@ -0,0 +1,30 @@
+import { toCanvasPoint } from './canvas-point';
+
+/**
+ * Guards the scaling between a canvas's on-screen size and its backing store.
+ * Getting this wrong offsets strokes from the cursor — worse the further from
+ * the origin — which stays invisible until someone actually tries to sign.
+ */
+describe('toCanvasPoint', () => {
+  const size = { width: 800, height: 260 };
+  // Half scale: 400px wide on screen, 800 in the backing store.
+  const rect = { left: 100, top: 50, width: 400, height: 130 };
+
+  it('maps the top-left corner to the origin', () => {
+    expect(toCanvasPoint(100, 50, rect, size)).toEqual({ x: 0, y: 0 });
+  });
+
+  it('maps the bottom-right corner to the full backing-store size', () => {
+    expect(toCanvasPoint(500, 180, rect, size)).toEqual({ x: 800, y: 260 });
+  });
+
+  it('scales a midpoint rather than using raw client pixels', () => {
+    // Raw offset would be (200, 65) — half of the correct answer.
+    expect(toCanvasPoint(300, 115, rect, size)).toEqual({ x: 400, y: 130 });
+  });
+
+  it('is unscaled when the element is already the backing-store size', () => {
+    const exact = { left: 0, top: 0, width: 800, height: 260 };
+    expect(toCanvasPoint(123, 45, exact, size)).toEqual({ x: 123, y: 45 });
+  });
+});
--- a/libs/ui/src/lib/input/canvas-point.ts
+++ b/libs/ui/src/lib/input/canvas-point.ts
@@ -0,0 +1,20 @@
+/**
+ * Pointer position in canvas coordinates.
+ *
+ * A canvas is displayed at whatever width the layout gives it, but drawn into a
+ * fixed backing store, so a click at the right-hand edge of a 400px-wide
+ * element has to land at x=width, not x=400. Skipping this scaling is the
+ * classic canvas bug: strokes appear offset from the cursor, worsening the
+ * further from the origin you draw.
+ */
+export function toCanvasPoint(
+  clientX: number,
+  clientY: number,
+  rect: { left: number; top: number; width: number; height: number },
+  size: { width: number; height: number },
+) {
+  return {
+    x: ((clientX - rect.left) / rect.width) * size.width,
+    y: ((clientY - rect.top) / rect.height) * size.height,
+  };
+}
--- a/package-lock.json
+++ b/package-lock.json