Merge branch 'WorkflowChange' of https://github.com/Tria-plc/emaui into estif-branch-1

2026-09-07 16:35:43 +00:00 · 2026-08-31 09:19:35 +03:00
parent af3fad018a 9c81731759
commit dae24f48db
30 changed files with 1768 additions and 1702 deletions
--- 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/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -338,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: 'የባህር ሙያ ዝርዝሮችዎ',
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -338,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',