feat(signature): add signature functionality for officers and seafarers

- Implemented MySignaturePad component for officers to draw and upload their signatures.
- Added signature API endpoints for managing officer signatures in the backoffice.
- Created SignaturePad component for seafarers to manage their specimen signatures.
- Updated ProfilePage to include signature tabs for both officers and seafarers.
- Added translations for signature-related terms in English and Amharic.
- Introduced RankTier options for seafarer registration.
- Added tests for canvas-point utility to ensure accurate pointer mapping on signature pad.

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;

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

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

apps/backoffice/src/app/i18n/locales/am.ts

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

apps/backoffice/src/app/i18n/locales/en.ts

@@ -464,9 +464,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.',

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;

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

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

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

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

apps/portal/src/app/i18n/locales/am.ts

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

apps/portal/src/app/i18n/locales/en.ts

@@ -334,9 +334,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',