Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-09-06 12:25:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Estifo77
2026-08-31 09:19:35 +03:00
parent af3fad018a 9c81731759
commit dae24f48db
30 changed files with 1768 additions and 1702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/backoffice/src/app/features/biometric-enrollment/pages/BiometricEnrollmentPage.tsx
View File

@@ -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" />
) : (

1
apps/backoffice/src/app/features/configuration/components/NumberFormatTab.tsx
View File

@@ -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) =>

3
apps/backoffice/src/app/features/configuration/types/configuration.ts
View File

@@ -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

42
apps/backoffice/src/app/features/profile/api/signature-api.ts Normal file
View File

@@ -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;

26
apps/backoffice/src/app/features/profile/components/MySignaturePad.tsx Normal file
View File

@@ -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()}
/>
);
}

27
apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
View File

@@ -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">

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

@@ -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}

22
apps/backoffice/src/app/i18n/locales/am.ts
View File

@@ -471,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: "በአስተዳደር ፓነል ውስጥ የሚጠቀሙትን ቋንቋ ይምረጡ።",

23
apps/backoffice/src/app/i18n/locales/en.ts
View File

@@ -470,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.',

2
apps/backoffice/vite.config.mts
View File

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

46
apps/portal/src/app/features/profile/api/signature-api.ts Normal file
View File

@@ -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;

28
apps/portal/src/app/features/profile/components/SignaturePad.tsx Normal file
View File

@@ -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()}
/>
);
}

13
apps/portal/src/app/features/profile/pages/ProfilePage.tsx
View File

@@ -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">

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

@@ -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 />

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

@@ -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'],

141
apps/portal/src/app/features/seafarer/pages/Biometrics/index.tsx
View File

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

22
apps/portal/src/app/i18n/locales/am.ts
View File

@@ -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: 'የባህር ሙያ ዝርዝሮችዎ',

23
apps/portal/src/app/i18n/locales/en.ts
View File

@@ -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',

9
apps/portal/vite.config.mts
View File

@@ -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"],