From 7c79f4d644d848d6c9c27957abc6048925fe618c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 14 Aug 2026 09:27:37 +0000
Subject: [PATCH 01/58] feat: implement useAuthToken hook for consistent auth
 token retrieval across components.comment from nati

---
 apps/backoffice/src/app/router/LandingRoute.tsx |  5 ++---
 apps/portal/src/app/components/LandingRoute.tsx | 11 +++++------
 libs/auth/src/index.ts                          |  1 +
 libs/auth/src/lib/components/ProtectedRoute.tsx |  5 ++---
 libs/auth/src/lib/hooks/useAuthToken.ts         | 15 +++++++++++++++
 5 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 libs/auth/src/lib/hooks/useAuthToken.ts

diff --git a/apps/backoffice/src/app/router/LandingRoute.tsx b/apps/backoffice/src/app/router/LandingRoute.tsx
index 776bf01f8..c353e91d5 100644
--- a/apps/backoffice/src/app/router/LandingRoute.tsx
+++ b/apps/backoffice/src/app/router/LandingRoute.tsx
@@ -1,13 +1,12 @@
-import Cookies from 'js-cookie';
 import { LandingPage } from '@ema-platform/ui';
-import { authStorage } from '@ema-platform/auth';
+import { useAuthToken } from '@ema-platform/auth';
 
 /**
  * Public `/` — mounts the shared landing page. Backoffice has no /signup
  * (enableSignup: false) and no /verify route, so those props are omitted.
  */
 export function LandingRoute() {
-  const token = authStorage.getToken() ?? Cookies.get('auth-token');
+  const token = useAuthToken();
 
   return <LandingPage primaryHref={token ? '/dashboard' : '/login'} />;
 }
diff --git a/apps/portal/src/app/components/LandingRoute.tsx b/apps/portal/src/app/components/LandingRoute.tsx
index 39f419253..8bab1d394 100644
--- a/apps/portal/src/app/components/LandingRoute.tsx
+++ b/apps/portal/src/app/components/LandingRoute.tsx
@@ -1,15 +1,14 @@
-import Cookies from 'js-cookie';
 import { LandingPage } from '@ema-platform/ui';
-import { authStorage } from '@ema-platform/auth';
+import { useAuthToken } from '@ema-platform/auth';
 
 /**
  * Public `/` — mounts the shared landing page with portal-specific routes.
- * Auth state is read the same way ProtectedRoute does (token cookie or
- * storage fallback) so the header can show "Go to dashboard" instead of
- * Login/Sign Up without gating the route itself.
+ * Auth state is read via `useAuthToken`, the same hook ProtectedRoute uses,
+ * so the header can show "Go to dashboard" instead of Login/Sign Up without
+ * gating the route itself.
  */
 export function LandingRoute() {
-  const token = authStorage.getToken() ?? Cookies.get('auth-token');
+  const token = useAuthToken();
 
   return <LandingPage primaryHref={token ? '/dashboard' : '/login'} signupHref="/signup" />;
 }
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index 886e79d3b..a0f46f25f 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -25,6 +25,7 @@ export {
   resetSignup,
 } from "./lib/store/signup.slice";
 export { usePermissions } from "./lib/hooks/usePermissions";
+export { useAuthToken } from "./lib/hooks/useAuthToken";
 export type { PermissionSet } from "./lib/hooks/usePermissions";
 export { RequirePermission } from "./lib/components/RequirePermission";
 export {
diff --git a/libs/auth/src/lib/components/ProtectedRoute.tsx b/libs/auth/src/lib/components/ProtectedRoute.tsx
index 9c55d85ee..5321a5889 100644
--- a/libs/auth/src/lib/components/ProtectedRoute.tsx
+++ b/libs/auth/src/lib/components/ProtectedRoute.tsx
@@ -1,7 +1,6 @@
-import Cookies from 'js-cookie';
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import type { ReactNode } from 'react';
-import { authStorage } from '../utils/auth-storage';
+import { useAuthToken } from '../hooks/useAuthToken';
 
 interface ProtectedRouteProps {
   children?: ReactNode;
@@ -10,7 +9,7 @@ interface ProtectedRouteProps {
 
 export function ProtectedRoute({ children, loginPath = '/login' }: ProtectedRouteProps) {
   const location = useLocation();
-  const token = authStorage.getToken() ?? Cookies.get('auth-token');
+  const token = useAuthToken();
 
   if (!token) {
     return <Navigate to={loginPath} state={{ from: location }} replace />;
diff --git a/libs/auth/src/lib/hooks/useAuthToken.ts b/libs/auth/src/lib/hooks/useAuthToken.ts
new file mode 100644
index 000000000..c6b75bdb9
--- /dev/null
+++ b/libs/auth/src/lib/hooks/useAuthToken.ts
@@ -0,0 +1,15 @@
+import { useSelector } from 'react-redux';
+import { authStorage } from '../utils/auth-storage';
+import type { AuthState } from '../types/auth.types';
+
+/**
+ * The current auth token, preferring Redux so components re-render on login
+ * and logout. Falls back to storage for the one case Redux misses: both
+ * `hydrateAuth` and the stores' `preloadedState` only populate `auth.token`
+ * when a token *and* a cached user are present, so a session with a token but
+ * no cached user would otherwise read as signed out.
+ */
+export function useAuthToken(): string | undefined {
+  const token = useSelector((state: { auth: AuthState }) => state.auth.token);
+  return token ?? authStorage.getToken();
+}

From f31e75c3def822c745cd713ff2fd49116b71fcf0 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 14 Aug 2026 11:35:34 +0000
Subject: [PATCH 02/58] feat: implement PageLoader component and register
 maritime loader as the default theme loader

---
 apps/backoffice/index.html                    | 67 +++++++++++++++++++
 .../pages/SeafarerRegistryPage/index.tsx      |  4 +-
 .../VesselRegistrationQueuePage/index.tsx     |  2 +-
 .../app/providers/MantineThemeProvider.tsx    |  7 +-
 apps/portal/index.html                        | 60 +++++++++++++++++
 .../licensing/components/DocumentSlots.tsx    |  2 +-
 .../licensing/components/StaffEvidence.tsx    |  2 +-
 .../components/OperationsFormContent.tsx      |  2 +-
 .../profile/components/ProfileFormContent.tsx |  7 +-
 .../seafarer/pages/MySeaRecordsPage/index.tsx |  2 +-
 .../app/providers/MantineThemeProvider.tsx    |  7 +-
 .../auth/src/lib/components/AuthBootstrap.tsx |  3 +-
 libs/ui/src/index.ts                          |  3 +
 libs/ui/src/lib/components/MaritimeLoader.tsx | 30 +++------
 libs/ui/src/lib/feedback/PageLoader.tsx       | 26 +++++++
 .../ui/src/lib/theme/maritime-loader-theme.ts | 31 +++++++++
 16 files changed, 219 insertions(+), 36 deletions(-)
 create mode 100644 libs/ui/src/lib/feedback/PageLoader.tsx
 create mode 100644 libs/ui/src/lib/theme/maritime-loader-theme.ts

diff --git a/apps/backoffice/index.html b/apps/backoffice/index.html
index 8d1d8072c..f473aea4c 100644
--- a/apps/backoffice/index.html
+++ b/apps/backoffice/index.html
@@ -6,9 +6,76 @@
     <link rel="icon" type="image/png" href="/ema-logo.png" />
     <link rel="apple-touch-icon" href="/ema-logo.png" />
     <title>EMA Backoffice</title>
+    <script>
+      // Apply the saved Mantine color scheme before paint to avoid a flash.
+      try {
+        var s = localStorage.getItem('mantine-color-scheme-value') || 'light';
+        document.documentElement.setAttribute('data-mantine-color-scheme', s);
+      } catch (e) {}
+    </script>
+    <style>
+      /* Boot splash — shown until React mounts into #root. Colors are
+         hardcoded (Mantine's default light/dark-7 body background) so the
+         splash never depends on the app's own stylesheet finishing its load. */
+      #ema-boot-splash {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+      }
+      html[data-mantine-color-scheme='dark'] #ema-boot-splash {
+        background: #242424;
+      }
+      #ema-boot-splash svg {
+        width: 140px;
+        height: auto;
+        color: #2563eb;
+        animation: ema-boot-pulse 1.6s ease-in-out infinite;
+      }
+      @keyframes ema-boot-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.55; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        #ema-boot-splash svg { animation: none; }
+      }
+      /* React has committed into #root once it has a child; hide the splash. */
+      #root:not(:empty) ~ #ema-boot-splash {
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
+    <!--
+      Static boot splash. Kept intentionally minimal (hull, funnel, mast,
+      flag — no cargo containers, no animated water) since this markup can't
+      import React. Source of truth for the full animated version is
+      libs/ui/src/lib/components/MaritimeLoader.tsx.
+    -->
+    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
+      <svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
+        <ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
+        <path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
+        <path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+        <path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
+        <path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
+        <path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
+        <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="194" cy="11" r="2" fill="currentColor" />
+        <path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
+        <path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
+        <path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
+        <path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
+        <path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
+        <path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
+        <path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
+        <path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage/index.tsx b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage/index.tsx
index c39f5c95f..34f6b3dab 100644
--- a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage/index.tsx
+++ b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage/index.tsx
@@ -137,7 +137,7 @@ function SeafarerDetailDrawer({
 
             <Tabs.Panel value="sea-service" pt="sm">
               {loadingSea ? (
-                <Loader size="sm" />
+                <Loader size="sm" type="oval" />
               ) : (seaService ?? []).length === 0 ? (
                 <Text size="sm" c="dimmed">
                   {t('seafarerRegistry.drawer.noSeaService', 'No sea-service records.')}
@@ -184,7 +184,7 @@ function SeafarerDetailDrawer({
 
             <Tabs.Panel value="medical" pt="sm">
               {loadingMedical ? (
-                <Loader size="sm" />
+                <Loader size="sm" type="oval" />
               ) : (medical ?? []).length === 0 ? (
                 <Text size="sm" c="dimmed">
                   {t('seafarerRegistry.drawer.noMedical', 'No medical certificates.')}
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage/index.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage/index.tsx
index 2df4cd9a6..f7a504651 100644
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage/index.tsx
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage/index.tsx
@@ -109,7 +109,7 @@ function VesselDetailDrawer({
             </Text>
           </Group>
           {loadingIncidents ? (
-            <Loader size="sm" />
+            <Loader size="sm" type="oval" />
           ) : (incidents ?? []).length === 0 ? (
             <Text size="sm" c="dimmed">
               No incidents recorded.
diff --git a/apps/backoffice/src/app/providers/MantineThemeProvider.tsx b/apps/backoffice/src/app/providers/MantineThemeProvider.tsx
index 54bd52447..b28c844c0 100644
--- a/apps/backoffice/src/app/providers/MantineThemeProvider.tsx
+++ b/apps/backoffice/src/app/providers/MantineThemeProvider.tsx
@@ -1,11 +1,14 @@
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider, mergeThemeOverrides } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { emaTheme } from '@ema-platform/shared';
+import { maritimeLoaderTheme } from '@ema-platform/ui';
 import type { ReactNode } from 'react';
 
+const theme = mergeThemeOverrides(emaTheme, maritimeLoaderTheme);
+
 export function MantineThemeProvider({ children }: { children: ReactNode }) {
   return (
-    <MantineProvider theme={emaTheme} defaultColorScheme="light">
+    <MantineProvider theme={theme} defaultColorScheme="light">
       <Notifications position="top-right" />
       {children}
     </MantineProvider>
diff --git a/apps/portal/index.html b/apps/portal/index.html
index aaa28d481..66a56efb0 100644
--- a/apps/portal/index.html
+++ b/apps/portal/index.html
@@ -13,9 +13,69 @@
         document.documentElement.setAttribute('data-mantine-color-scheme', s);
       } catch (e) {}
     </script>
+    <style>
+      /* Boot splash — shown until React mounts into #root. Colors are
+         hardcoded (not CSS vars from portal.css) so the splash never depends
+         on the app's own stylesheet finishing its load. */
+      #ema-boot-splash {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f5f8fc;
+      }
+      html[data-mantine-color-scheme='dark'] #ema-boot-splash {
+        background: #0e1521;
+      }
+      #ema-boot-splash svg {
+        width: 140px;
+        height: auto;
+        color: #3160b7;
+        animation: ema-boot-pulse 1.6s ease-in-out infinite;
+      }
+      @keyframes ema-boot-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.55; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        #ema-boot-splash svg { animation: none; }
+      }
+      /* React has committed into #root once it has a child; hide the splash. */
+      #root:not(:empty) ~ #ema-boot-splash {
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
+    <!--
+      Static boot splash. Kept intentionally minimal (hull, funnel, mast,
+      flag — no cargo containers, no animated water) since this markup can't
+      import React. Source of truth for the full animated version is
+      libs/ui/src/lib/components/MaritimeLoader.tsx.
+    -->
+    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
+      <svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
+        <ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
+        <path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
+        <path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+        <path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
+        <path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
+        <path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
+        <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="194" cy="11" r="2" fill="currentColor" />
+        <path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
+        <path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
+        <path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
+        <path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
+        <path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
+        <path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
+        <path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
+        <path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
index 2f28c6635..85a36d046 100644
--- a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
+++ b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
@@ -175,7 +175,7 @@ export function DocumentSlots({
                         variant={uploaded ? 'light' : 'filled'}
                         leftSection={
                           busy === requirement.key ? (
-                            <Loader size={12} />
+                            <Loader size={12} type="oval" />
                           ) : (
                             <IconFileUpload size={14} />
                           )
diff --git a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
index 8ef08a415..672b1cf73 100644
--- a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
+++ b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
@@ -74,7 +74,7 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
                 disabled={readOnly || busy === item.docKey}
                 leftSection={
                   busy === item.docKey ? (
-                    <Loader size={10} />
+                    <Loader size={10} type="oval" />
                   ) : uploaded ? (
                     <IconCheck size={12} />
                   ) : undefined
diff --git a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
index 75699d5fb..63247b262 100644
--- a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
@@ -92,7 +92,7 @@ export function OperationsFormContent({
   }
 
   if (loadingTypes || loadingMine) {
-    return <Loader size="sm" />;
+    return <Loader size="sm" type="oval" />;
   }
 
   const removedNames = options
diff --git a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
index 41323e747..4540554a9 100644
--- a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
@@ -1,6 +1,7 @@
 import { Loader, Select, SimpleGrid, TextInput } from '@mantine/core';
 import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
 import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
 import { AmharicDatePicker } from '@ema-platform/ui';
 
 export const profileSchema = z.object({
@@ -39,11 +40,13 @@ export function ProfileFormContent({
   professionsLoading,
   professionOptions,
 }: ProfileFormContentProps) {
+  const { t } = useTranslation();
+
   return (
     <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
       <Select
         label="Profession"
-        placeholder={professionsLoading ? 'Loading...' : 'Select'}
+        placeholder={professionsLoading ? t('common.loading', 'Loading…') : 'Select'}
         required
         data={professionOptions}
         error={errors.professionId?.message}
@@ -53,7 +56,7 @@ export function ProfileFormContent({
         name="professionId"
         searchable
         disabled={professionsLoading}
-        rightSection={professionsLoading ? <Loader size="xs" /> : undefined}
+        rightSection={professionsLoading ? <Loader size="xs" type="oval" /> : undefined}
       />
       <TextInput
         label="First Name"
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
index c8a7f7b90..f54551516 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
@@ -98,7 +98,7 @@ function EvidenceModal({
     <Modal opened={Boolean(ownerId)} onClose={onClose} title="Evidence" centered>
       <Stack>
         {isLoading ? (
-          <Loader size="sm" />
+          <Loader size="sm" type="oval" />
         ) : files.length === 0 ? (
           <Text size="sm" c="dimmed">
             No evidence uploaded yet.
diff --git a/apps/portal/src/app/providers/MantineThemeProvider.tsx b/apps/portal/src/app/providers/MantineThemeProvider.tsx
index 5288d6694..355eb1fb8 100644
--- a/apps/portal/src/app/providers/MantineThemeProvider.tsx
+++ b/apps/portal/src/app/providers/MantineThemeProvider.tsx
@@ -1,11 +1,14 @@
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider, mergeThemeOverrides } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
+import { maritimeLoaderTheme } from '@ema-platform/ui';
 import type { ReactNode } from 'react';
 import { portalTheme } from '../theme/portalTheme';
 
+const theme = mergeThemeOverrides(portalTheme, maritimeLoaderTheme);
+
 export function MantineThemeProvider({ children }: { children: ReactNode }) {
   return (
-    <MantineProvider theme={portalTheme} defaultColorScheme="light">
+    <MantineProvider theme={theme} defaultColorScheme="light">
       <Notifications position="top-right" />
       {children}
     </MantineProvider>
diff --git a/libs/auth/src/lib/components/AuthBootstrap.tsx b/libs/auth/src/lib/components/AuthBootstrap.tsx
index 769864f6f..de5395ddb 100644
--- a/libs/auth/src/lib/components/AuthBootstrap.tsx
+++ b/libs/auth/src/lib/components/AuthBootstrap.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, type ReactNode } from 'react';
 import { useDispatch } from 'react-redux';
+import { PageLoader } from '@ema-platform/ui';
 import { authStorage } from '../utils/auth-storage';
 import { hydrateAuth, logout, setUser } from '../store/auth.slice';
 import type { AuthUser } from '../types/auth.types';
@@ -70,7 +71,7 @@ export function AuthBootstrap({ children }: { children: ReactNode }) {
 
   // Rendering the router before the session resolves would let the guards
   // redirect based on a state that is about to change.
-  if (!ready) return null;
+  if (!ready) return <PageLoader />;
 
   return <>{children}</>;
 }
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 17f6e386a..c8b20d554 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -7,6 +7,9 @@ export * from "./lib/feedback/notify";
 export * from "./lib/feedback/FeatureUnavailable";
 export * from "./lib/feedback/EmptyState";
 export * from "./lib/feedback/ErrorState";
+export * from "./lib/feedback/PageLoader";
+export * from "./lib/components/MaritimeLoader";
+export * from "./lib/theme/maritime-loader-theme";
 export * from "./lib/layout/AppHeader";
 export * from "./lib/layout/AppSidebar";
 export * from "./lib/layout/AppTopNav";
diff --git a/libs/ui/src/lib/components/MaritimeLoader.tsx b/libs/ui/src/lib/components/MaritimeLoader.tsx
index a02ee2730..e5ab88cc0 100644
--- a/libs/ui/src/lib/components/MaritimeLoader.tsx
+++ b/libs/ui/src/lib/components/MaritimeLoader.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, ComponentPropsWithoutRef } from "react";
+import type { CSSProperties, ComponentPropsWithoutRef, Ref } from "react";
 
 export interface MaritimeLoaderProps extends Omit<
   ComponentPropsWithoutRef<"span">,
@@ -8,8 +8,9 @@ export interface MaritimeLoaderProps extends Omit<
   size?: number | string;
   /** Standalone CSS color. Mantine's Loader color is used automatically when omitted. */
   color?: string;
-  /** Accessible status text. */
+  /** Accessible status text (aria-label only — renders no visible text). */
   label?: string;
+  ref?: Ref<HTMLSpanElement>;
 }
 
 const styles = `
@@ -231,15 +232,6 @@ const styles = `
        fill: currentColor;
      }
    }
-
-.ema-loader__label {
-      display: block;
-      text-align: center;
-      font-size: 12px;
-      line-height: 1.2;
-      margin-top: 4px;
-      color: currentColor;
-    }
  `;
 
 function toCssSize(value: number | string | undefined) {
@@ -252,6 +244,7 @@ export function MaritimeLoader({
   label = "Loading maritime services",
   className,
   style,
+  ref,
   ...props
 }: MaritimeLoaderProps) {
   const cssVariables = {
@@ -263,12 +256,15 @@ export function MaritimeLoader({
   return (
     <span
       {...props}
+      ref={ref}
       className={["ema-loader", className].filter(Boolean).join(" ")}
       style={cssVariables}
       role="status"
       aria-label={label}
     >
-      <style>{styles}</style>
+      <style href="ema-maritime-loader" precedence="low">
+        {styles}
+      </style>
 
       <svg
         className="ema-loader__svg"
@@ -419,18 +415,8 @@ export function MaritimeLoader({
           <path d="M200 108c14 1 24-1 35-5" />
         </g>
       </svg>
-      {label && <span className="ema-loader__label">{label}</span>}
     </span>
   );
 }
 
 export default MaritimeLoader;
-
-// how to use this component.
-// <Center style={{ width: "90vw", height: "90vh" }}>
-//     <MaritimeLoader
-//       size={120}
-//       color="#075985"
-//       label="Loading Maritime Services..."
-//     />
-//   </Center>
diff --git a/libs/ui/src/lib/feedback/PageLoader.tsx b/libs/ui/src/lib/feedback/PageLoader.tsx
new file mode 100644
index 000000000..6bc6c687e
--- /dev/null
+++ b/libs/ui/src/lib/feedback/PageLoader.tsx
@@ -0,0 +1,26 @@
+import { Center, Loader, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface PageLoaderProps {
+  /** Visible + accessible label. Defaults to the shared i18n "loading" string. */
+  label?: string;
+  /** Container height. Defaults to a full-page fill. */
+  height?: number | string;
+}
+
+/** The full-page/section loading state every screen should use instead of a bare `<Loader />`. */
+export function PageLoader({ label, height = '60vh' }: PageLoaderProps) {
+  const { t } = useTranslation();
+  const resolvedLabel = label ?? t('loading', 'Loading…');
+
+  return (
+    <Center h={height}>
+      <Stack align="center" gap="xs">
+        <Loader size={64} aria-label={resolvedLabel} />
+        <Text c="dimmed" size="sm">
+          {resolvedLabel}
+        </Text>
+      </Stack>
+    </Center>
+  );
+}
diff --git a/libs/ui/src/lib/theme/maritime-loader-theme.ts b/libs/ui/src/lib/theme/maritime-loader-theme.ts
new file mode 100644
index 000000000..f030b4b19
--- /dev/null
+++ b/libs/ui/src/lib/theme/maritime-loader-theme.ts
@@ -0,0 +1,31 @@
+import { Button, createTheme, Loader, type MantineLoaderComponent } from '@mantine/core';
+import { MaritimeLoader } from '../components/MaritimeLoader';
+
+/**
+ * Registers the branded ship loader as the default Mantine `Loader` type, and
+ * opts `Button`'s inline loading state back out to the stock oval — a 1.88:1
+ * ship does not fit a button's loader slot.
+ *
+ * Merge into an app theme with `mergeThemeOverrides(appTheme, maritimeLoaderTheme)`
+ * rather than importing this in `libs/shared`: `libs/ui` already depends on
+ * `libs/shared`, so the reverse import would be circular.
+ */
+export const maritimeLoaderTheme = createTheme({
+  components: {
+    Loader: Loader.extend({
+      defaultProps: {
+        // Mantine types custom loaders as ForwardRefExoticComponent; a plain
+        // function component satisfies the runtime contract (it forwards a
+        // ref as a normal prop under React 19) but not the structural type.
+        loaders: {
+          ...Loader.defaultLoaders,
+          maritime: MaritimeLoader as unknown as MantineLoaderComponent,
+        },
+        type: 'maritime',
+      },
+    }),
+    Button: Button.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+  },
+});

From 9a7b93cfb6df590c9ed08a4bf2b5e66b4e0b1b63 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Fri, 14 Aug 2026 14:45:57 +0300
Subject: [PATCH 03/58] loader UI improvements

---
 apps/backoffice/index.html                    | 116 ++--
 apps/portal/index.html                        | 116 ++--
 libs/ui/src/lib/components/MaritimeLoader.tsx | 557 +++++++-----------
 libs/ui/src/lib/feedback/PageLoader.tsx       | 125 +++-
 4 files changed, 499 insertions(+), 415 deletions(-)

diff --git a/apps/backoffice/index.html b/apps/backoffice/index.html
index f473aea4c..851a44f30 100644
--- a/apps/backoffice/index.html
+++ b/apps/backoffice/index.html
@@ -22,27 +22,75 @@
         inset: 0;
         z-index: 9999;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        background: #fff;
+        background: #0f172a;
+        color: #38bdf8;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
-      html[data-mantine-color-scheme='dark'] #ema-boot-splash {
-        background: #242424;
+      html[data-mantine-color-scheme='light'] #ema-boot-splash {
+        background: #f8fafc;
+        color: #0f2c59;
+      }
+      #ema-boot-splash .ema-card {
+        padding: 2.5rem 3.5rem;
+        border-radius: 1.5rem;
+        background: rgba(15, 23, 42, 0.85);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      html[data-mantine-color-scheme='light'] #ema-boot-splash .ema-card {
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(15, 44, 89, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(11, 25, 44, 0.12);
       }
       #ema-boot-splash svg {
         width: 140px;
         height: auto;
-        color: #2563eb;
-        animation: ema-boot-pulse 1.6s ease-in-out infinite;
       }
-      @keyframes ema-boot-pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.55; }
+      .ema-boot-compass {
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: ema-boot-spin 20s linear infinite;
+      }
+      .ema-boot-helm {
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: ema-boot-spin-rev 14s linear infinite;
+      }
+      .ema-boot-title {
+        margin-top: 1rem;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: linear-gradient(135deg, #078930, #fcd116, #2563eb);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .ema-boot-sub {
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        opacity: 0.85;
+      }
+      @keyframes ema-boot-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      @keyframes ema-boot-spin-rev {
+        from { transform: rotate(360deg); }
+        to { transform: rotate(0deg); }
       }
       @media (prefers-reduced-motion: reduce) {
-        #ema-boot-splash svg { animation: none; }
+        .ema-boot-compass, .ema-boot-helm { animation: none; }
       }
-      /* React has committed into #root once it has a child; hide the splash. */
+      /* Hide splash once React mounts */
       #root:not(:empty) ~ #ema-boot-splash {
         display: none;
       }
@@ -50,31 +98,29 @@
   </head>
   <body>
     <div id="root"></div>
-    <!--
-      Static boot splash. Kept intentionally minimal (hull, funnel, mast,
-      flag — no cargo containers, no animated water) since this markup can't
-      import React. Source of truth for the full animated version is
-      libs/ui/src/lib/components/MaritimeLoader.tsx.
-    -->
-    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
-      <svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
-        <ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
-        <path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
-        <path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
-        <path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
-        <path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
-        <path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
-        <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-        <circle cx="194" cy="11" r="2" fill="currentColor" />
-        <path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
-        <path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
-        <path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
-        <path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
-        <path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
-        <path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
-        <path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
-        <path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
+    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading Ethiopian Maritime Backoffice">
+      <div class="ema-card">
+        <div style="position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;">
+          <svg viewBox="0 0 120 120" style="position: absolute; inset: 0; width: 100%; height: 100%;">
+            <defs>
+              <linearGradient id="bo-ring-1" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#0284C7" />
+                <stop offset="100%" stop-color="#078930" />
+              </linearGradient>
+              <linearGradient id="bo-ring-2" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#F59E0B" />
+                <stop offset="100%" stop-color="#FCD116" />
+              </linearGradient>
+            </defs>
+            <circle cx="60" cy="60" r="54" fill="none" stroke="url(#bo-ring-1)" stroke-width="1.8" stroke-dasharray="8 6 2 6" opacity="0.85" class="ema-boot-compass" />
+            <circle cx="60" cy="60" r="39" fill="none" stroke="url(#bo-ring-2)" stroke-width="2" stroke-dasharray="28 14" class="ema-boot-helm" />
+          </svg>
+          <img src="/ema-logo.png" alt="EMA" style="width: 58px; height: 58px; object-fit: contain; position: relative; z-index: 2;" />
+        </div>
+        <div class="ema-boot-title">ETHIOPIAN MARITIME AUTHORITY</div>
+        <div style="font-size: 0.7rem; opacity: 0.6; margin-top: 2px;">የኢትዮጵያ ማሪታይም ባለስልጣን</div>
+        <div class="ema-boot-sub">Loading Maritime Backoffice…</div>
+      </div>
     </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/apps/portal/index.html b/apps/portal/index.html
index 66a56efb0..0cb9e6cd8 100644
--- a/apps/portal/index.html
+++ b/apps/portal/index.html
@@ -22,27 +22,75 @@
         inset: 0;
         z-index: 9999;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        background: #f5f8fc;
+        background: #0f172a;
+        color: #38bdf8;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
-      html[data-mantine-color-scheme='dark'] #ema-boot-splash {
-        background: #0e1521;
+      html[data-mantine-color-scheme='light'] #ema-boot-splash {
+        background: #f8fafc;
+        color: #0f2c59;
+      }
+      #ema-boot-splash .ema-card {
+        padding: 2.5rem 3.5rem;
+        border-radius: 1.5rem;
+        background: rgba(15, 23, 42, 0.85);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      html[data-mantine-color-scheme='light'] #ema-boot-splash .ema-card {
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(15, 44, 89, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(11, 25, 44, 0.12);
       }
       #ema-boot-splash svg {
         width: 140px;
         height: auto;
-        color: #3160b7;
-        animation: ema-boot-pulse 1.6s ease-in-out infinite;
       }
-      @keyframes ema-boot-pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.55; }
+      .ema-boot-compass {
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: ema-boot-spin 20s linear infinite;
+      }
+      .ema-boot-helm {
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: ema-boot-spin-rev 14s linear infinite;
+      }
+      .ema-boot-title {
+        margin-top: 1rem;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: linear-gradient(135deg, #078930, #fcd116, #2563eb);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .ema-boot-sub {
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        opacity: 0.85;
+      }
+      @keyframes ema-boot-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      @keyframes ema-boot-spin-rev {
+        from { transform: rotate(360deg); }
+        to { transform: rotate(0deg); }
       }
       @media (prefers-reduced-motion: reduce) {
-        #ema-boot-splash svg { animation: none; }
+        .ema-boot-compass, .ema-boot-helm { animation: none; }
       }
-      /* React has committed into #root once it has a child; hide the splash. */
+      /* Hide splash once React mounts */
       #root:not(:empty) ~ #ema-boot-splash {
         display: none;
       }
@@ -50,31 +98,29 @@
   </head>
   <body>
     <div id="root"></div>
-    <!--
-      Static boot splash. Kept intentionally minimal (hull, funnel, mast,
-      flag — no cargo containers, no animated water) since this markup can't
-      import React. Source of truth for the full animated version is
-      libs/ui/src/lib/components/MaritimeLoader.tsx.
-    -->
-    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
-      <svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
-        <ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
-        <path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
-        <path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
-        <path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
-        <path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
-        <path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
-        <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-        <circle cx="194" cy="11" r="2" fill="currentColor" />
-        <path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
-        <path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
-        <path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
-        <path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
-        <path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
-        <path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
-        <path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
-        <path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
+    <div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading Ethiopian Maritime Portal">
+      <div class="ema-card">
+        <div style="position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;">
+          <svg viewBox="0 0 120 120" style="position: absolute; inset: 0; width: 100%; height: 100%;">
+            <defs>
+              <linearGradient id="b-ring-1" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#0284C7" />
+                <stop offset="100%" stop-color="#078930" />
+              </linearGradient>
+              <linearGradient id="b-ring-2" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#F59E0B" />
+                <stop offset="100%" stop-color="#FCD116" />
+              </linearGradient>
+            </defs>
+            <circle cx="60" cy="60" r="54" fill="none" stroke="url(#b-ring-1)" stroke-width="1.8" stroke-dasharray="8 6 2 6" opacity="0.85" class="ema-boot-compass" />
+            <circle cx="60" cy="60" r="39" fill="none" stroke="url(#b-ring-2)" stroke-width="2" stroke-dasharray="28 14" class="ema-boot-helm" />
+          </svg>
+          <img src="/ema-logo.png" alt="EMA" style="width: 58px; height: 58px; object-fit: contain; position: relative; z-index: 2;" />
+        </div>
+        <div class="ema-boot-title">ETHIOPIAN MARITIME AUTHORITY</div>
+        <div style="font-size: 0.7rem; opacity: 0.6; margin-top: 2px;">የኢትዮጵያ ማሪታይም ባለስልጣን</div>
+        <div class="ema-boot-sub">Loading Maritime Portal…</div>
+      </div>
     </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/libs/ui/src/lib/components/MaritimeLoader.tsx b/libs/ui/src/lib/components/MaritimeLoader.tsx
index e5ab88cc0..d4c916e22 100644
--- a/libs/ui/src/lib/components/MaritimeLoader.tsx
+++ b/libs/ui/src/lib/components/MaritimeLoader.tsx
@@ -4,235 +4,138 @@ export interface MaritimeLoaderProps extends Omit<
   ComponentPropsWithoutRef<"span">,
   "children" | "color"
 > {
-  /** Standalone size. Mantine's Loader size is used automatically when omitted. */
+  /** Size in pixels or CSS string. Defaults to 80. */
   size?: number | string;
-  /** Standalone CSS color. Mantine's Loader color is used automatically when omitted. */
+  /** Primary accent color. Defaults to EMA Ocean Blue (#0284C7). */
   color?: string;
-  /** Accessible status text (aria-label only — renders no visible text). */
+  /** Visual variant: 'full' (emblem + orbital radar) or 'compact' (sleek inline spinner). */
+  variant?: "full" | "compact";
+  /** Accessible label. */
   label?: string;
   ref?: Ref<HTMLSpanElement>;
 }
 
 const styles = `
-  .ema-loader {
+  .ema-pro-loader {
     position: relative;
-    display: inline-block;
-    width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.88);
-    color: var(--ema-color, var(--loader-color, #075985));
-    vertical-align: middle;
-  }
-
-  .ema-loader__svg {
-    display: block;
-    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ema-size, var(--loader-size, 80px));
     height: var(--ema-size, var(--loader-size, 80px));
+    vertical-align: middle;
+    user-select: none;
+  }
+
+  .ema-pro-loader--full {
+    width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.15);
+    height: calc(var(--ema-size, var(--loader-size, 80px)) * 1.15);
+  }
+
+  .ema-pro-loader__stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* --- Glowing Ambient Backdrop --- */
+  .ema-pro-loader__glow {
+    position: absolute;
+    inset: 10%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(2, 132, 199, 0.28) 0%, rgba(14, 165, 233, 0.08) 55%, transparent 75%);
+    filter: blur(8px);
+    animation: ema-glow-pulse 3s ease-in-out infinite alternate;
+  }
+
+  /* --- SVG Overlay & Ring Animations --- */
+  .ema-pro-loader__svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     overflow: visible;
-    filter: drop-shadow(
-      0 calc(var(--ema-size, var(--loader-size, 80px)) * 0.035)
-      calc(var(--ema-size, var(--loader-size, 80px)) * 0.04)
-      rgb(7 39 58 / 18%)
-    );
   }
 
-  .ema-loader__ship {
-    transform-box: fill-box;
-    transform-origin: 50% 82%;
-    animation: ema-ship-float 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
-  }
-
-  .ema-loader__shadow {
-    fill: currentColor;
-    opacity: 0.12;
+  .ema-pro-loader__ring-outer {
     transform-box: fill-box;
     transform-origin: center;
-    animation: ema-shadow-breathe 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+    animation: ema-spin-cw 16s linear infinite;
   }
 
-  .ema-loader__deck {
-    fill: currentColor;
-    opacity: 0.82;
-  }
-
-  .ema-loader__superstructure > path:first-child,
-  .ema-loader__bridge-top {
-    fill: #f8fbfc;
-    stroke: currentColor;
-    stroke-width: 2.4;
-    stroke-linejoin: round;
-  }
-
-  .ema-loader__bridge-top { stroke-width: 2; }
-
-  .ema-loader__window {
-    fill: #bfe9ff;
-    stroke: currentColor;
-    stroke-width: 0.7;
-  }
-
-  .ema-loader__cabin-line {
-    fill: currentColor;
-    opacity: 0.35;
-  }
-
-  .ema-loader__funnel > path:first-child {
-    fill: #eef3f5;
-    stroke: currentColor;
-    stroke-width: 2;
-    stroke-linejoin: round;
-  }
-
-  .ema-loader__green { fill: #078930; }
-  .ema-loader__yellow { fill: #fcd116; }
-  .ema-loader__red { fill: #da121a; }
-
-  .ema-loader__mast {
-    fill: currentColor;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .ema-loader__flag-pole {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.7;
-    stroke-linecap: round;
-  }
-
-  .ema-loader__flag {
+  .ema-pro-loader__ring-inner {
     transform-box: fill-box;
-    transform-origin: left center;
-    animation: ema-flag-wave 0.95s ease-in-out infinite alternate;
+    transform-origin: center;
+    animation: ema-spin-ccw 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   }
 
-  .ema-loader__hull {
-    fill: #f8fbfc;
-    stroke: currentColor;
-    stroke-width: 1.4;
-    stroke-linejoin: round;
+  .ema-pro-loader__sonar-wave {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: ema-sonar-expand 2.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
   }
 
-  .ema-loader__lower-hull {
-    fill: currentColor;
-    opacity: 0.92;
+  .ema-pro-loader__core-logo {
+    position: relative;
+    z-index: 2;
+    width: 54%;
+    height: 54%;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 10px rgba(11, 25, 44, 0.25));
+    animation: ema-logo-float 3.5s ease-in-out infinite alternate;
   }
 
-  .ema-loader__waterline {
-    fill: none;
-    stroke: rgb(255 255 255 / 52%);
-    stroke-width: 2.4;
-    stroke-linecap: round;
+  .ema-pro-loader__center-sync {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: ema-spin-cw 3s linear infinite;
   }
 
-  .ema-loader__bow-highlight {
-    fill: none;
-    stroke: rgb(255 255 255 / 46%);
-    stroke-width: 2.3;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  /* --- Keyframe Animations --- */
+  @keyframes ema-spin-cw {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 
-  .ema-loader__portholes {
-    fill: #d7f2ff;
-    stroke: currentColor;
-    stroke-width: 0.8;
+  @keyframes ema-spin-ccw {
+    from { transform: rotate(360deg); }
+    to { transform: rotate(0deg); }
   }
 
-  .ema-loader__cargo path {
-    fill: none;
-    stroke: rgb(255 255 255 / 22%);
-    stroke-width: 1;
+  @keyframes ema-glow-pulse {
+    0% { transform: scale(0.92); opacity: 0.5; }
+    100% { transform: scale(1.12); opacity: 0.9; }
   }
 
-  .ema-loader__container-dark rect { fill: #3f4a52; }
-  .ema-loader__container-muted rect { fill: #7d8991; }
-  .ema-loader__container-steel rect { fill: #59656d; }
-  .ema-loader__container-light rect { fill: #aab2b8; }
-  .ema-loader__container-medium rect { fill: #6c7880; }
-
-  .ema-loader__water-back,
-  .ema-loader__water-front,
-  .ema-loader__foam {
-    fill: none;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  @keyframes ema-sonar-expand {
+    0% { transform: scale(0.65); opacity: 0.9; stroke-width: 3; }
+    60% { opacity: 0.35; }
+    100% { transform: scale(1.4); opacity: 0; stroke-width: 0.5; }
   }
 
-  .ema-loader__water-back {
-    stroke: currentColor;
-    stroke-width: 5;
-    opacity: 0.28;
-    stroke-dasharray: 58 12;
-    animation: ema-water-back 2.8s linear infinite;
-  }
-
-  .ema-loader__water-front {
-    stroke: currentColor;
-    stroke-width: 6;
-    opacity: 0.55;
-    stroke-dasharray: 70 10;
-    animation: ema-water-front 1.9s linear infinite;
-  }
-
-  .ema-loader__foam {
-    stroke: rgb(255 255 255 / 78%);
-    stroke-width: 3;
-    stroke-dasharray: 11 7;
-    animation: ema-foam-drift 1.65s linear infinite;
-  }
-
-  @keyframes ema-ship-float {
-    0%, 100% { transform: translateY(1.5px) rotate(-0.65deg); }
-    50% { transform: translateY(-3px) rotate(0.65deg); }
-  }
-
-  @keyframes ema-shadow-breathe {
-    0%, 100% { transform: scaleX(1.02); opacity: 0.14; }
-    50% { transform: scaleX(0.9); opacity: 0.08; }
-  }
-
-  @keyframes ema-flag-wave {
-    from { transform: skewY(-3deg) scaleX(0.94); }
-    to { transform: skewY(3deg) scaleX(1.04); }
-  }
-
-  @keyframes ema-water-back {
-    to { stroke-dashoffset: -140; }
-  }
-
-  @keyframes ema-water-front {
-    to { stroke-dashoffset: 160; }
-  }
-
-  @keyframes ema-foam-drift {
-    to { stroke-dashoffset: -36; }
+  @keyframes ema-logo-float {
+    0% { transform: translateY(1px) scale(0.98); }
+    100% { transform: translateY(-2px) scale(1.02); }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ema-loader__ship,
-    .ema-loader__shadow,
-    .ema-loader__flag,
-    .ema-loader__water-back,
-    .ema-loader__water-front,
-    .ema-loader__foam {
-      animation: none;
+    .ema-pro-loader__ring-outer,
+    .ema-pro-loader__ring-inner,
+    .ema-pro-loader__sonar-wave,
+    .ema-pro-loader__core-logo,
+    .ema-pro-loader__glow,
+    .ema-pro-loader__center-sync {
+      animation: none !important;
     }
   }
 
-@media (forced-colors: active) {
-     .ema-loader__green,
-     .ema-loader__yellow,
-     .ema-loader__red,
-     .ema-loader__container-dark rect,
-     .ema-loader__container-muted rect,
-     .ema-loader__container-steel rect,
-     .ema-loader__container-light rect,
-     .ema-loader__container-medium rect {
-       fill: currentColor;
-     }
-   }
- `;
+  [data-mantine-color-scheme='dark'] .ema-pro-loader__glow {
+    background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(2, 132, 199, 0.12) 60%, transparent 80%);
+  }
+`;
 
 function toCssSize(value: number | string | undefined) {
   return typeof value === "number" ? `${value}px` : value;
@@ -241,7 +144,8 @@ function toCssSize(value: number | string | undefined) {
 export function MaritimeLoader({
   size,
   color,
-  label = "Loading maritime services",
+  variant = "full",
+  label = "Ethiopian Maritime Authority Loading",
   className,
   style,
   ref,
@@ -257,166 +161,151 @@ export function MaritimeLoader({
     <span
       {...props}
       ref={ref}
-      className={["ema-loader", className].filter(Boolean).join(" ")}
+      className={[
+        "ema-pro-loader",
+        variant === "full" ? "ema-pro-loader--full" : "ema-pro-loader--compact",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={cssVariables}
       role="status"
       aria-label={label}
     >
-      <style href="ema-maritime-loader" precedence="low">
+      <style href="ema-maritime-loader-v3" precedence="low">
         {styles}
       </style>
 
-      <svg
-        className="ema-loader__svg"
-        viewBox="0 0 260 138"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <g className="ema-loader__shadow">
-          <ellipse cx="132" cy="113" rx="78" ry="7" />
-        </g>
+      <div className="ema-pro-loader__stage">
+        {/* Soft Ambient Radial Light Aura */}
+        <div className="ema-pro-loader__glow" />
 
-        <g className="ema-loader__ship">
-          <g className="ema-loader__cargo">
-            <g className="ema-loader__container-dark">
-              <rect x="60" y="54" width="27" height="17" rx="1.5" />
-              <path d="M66 56v13M73 56v13M80 56v13" />
-            </g>
-            <g className="ema-loader__container-steel">
-              <rect x="89" y="54" width="27" height="17" rx="1.5" />
-              <path d="M95 56v13M102 56v13M109 56v13" />
-            </g>
-            <g className="ema-loader__container-light">
-              <rect x="118" y="54" width="27" height="17" rx="1.5" />
-              <path d="M124 56v13M131 56v13M138 56v13" />
-            </g>
-            <g className="ema-loader__container-medium">
-              <rect x="147" y="54" width="27" height="17" rx="1.5" />
-              <path d="M153 56v13M160 56v13M167 56v13" />
-            </g>
-            <g className="ema-loader__container-dark">
-              <rect x="76" y="35" width="27" height="17" rx="1.5" />
-              <path d="M82 37v13M89 37v13M96 37v13" />
-            </g>
-            <g className="ema-loader__container-muted">
-              <rect x="105" y="35" width="27" height="17" rx="1.5" />
-              <path d="M111 37v13M118 37v13M125 37v13" />
-            </g>
-            <g className="ema-loader__container-dark">
-              <rect x="134" y="35" width="27" height="17" rx="1.5" />
-              <path d="M140 37v13M147 37v13M154 37v13" />
-            </g>
-          </g>
+        {/* Precision Orbital Rings & Sonar Radar SVG */}
+        <svg
+          className="ema-pro-loader__svg"
+          viewBox="0 0 120 120"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <defs>
+            {/* Ethiopian Maritime Brand Gradients */}
+            <linearGradient id="ema-ring-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#0284C7" />
+              <stop offset="50%" stopColor="#38BDF8" />
+              <stop offset="100%" stopColor="#078930" />
+            </linearGradient>
 
-          <path className="ema-loader__deck" d="M42 72H214l-4 6H48z" />
+            <linearGradient id="ema-ring-grad-2" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#F59E0B" />
+              <stop offset="50%" stopColor="#D4AF37" />
+              <stop offset="100%" stopColor="#FCD116" />
+            </linearGradient>
 
-          <g className="ema-loader__superstructure">
-            <path d="M174 41h27l10 31h-42z" />
-            <path className="ema-loader__bridge-top" d="M178 32h20l5 9h-27z" />
-            <rect
-              className="ema-loader__window"
-              x="179"
-              y="45"
-              width="7"
-              height="7"
-              rx="1"
-            />
-            <rect
-              className="ema-loader__window"
-              x="188"
-              y="45"
-              width="7"
-              height="7"
-              rx="1"
-            />
-            <rect
-              className="ema-loader__window"
-              x="197"
-              y="45"
-              width="7"
-              height="7"
-              rx="1"
-            />
-            <rect
-              className="ema-loader__cabin-line"
-              x="180"
-              y="58"
-              width="20"
-              height="2.5"
-              rx="1.25"
-            />
-          </g>
+            <linearGradient id="ema-sonar-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#38BDF8" stopOpacity="0.8" />
+              <stop offset="100%" stopColor="#0284C7" stopOpacity="0" />
+            </linearGradient>
+          </defs>
 
-          <g className="ema-loader__funnel">
-            <path d="M166 25h10l3 17h-15z" />
-            <path
-              className="ema-loader__green"
-              d="M166.9 29h9.9l.6 3.5h-11.1z"
-            />
-            <path
-              className="ema-loader__yellow"
-              d="M166.2 32.5h11.2l.6 3.5h-12.4z"
-            />
-            <path
-              className="ema-loader__red"
-              d="M165.6 36h12.4l.6 3.5h-13.6z"
-            />
-          </g>
-
-          <g className="ema-loader__mast">
-            <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" />
-            <circle cx="194" cy="11" r="2" />
-          </g>
-
-          <g>
-            <path className="ema-loader__flag-pole" d="M184 20V8" />
-            <g className="ema-loader__flag">
-              <path
-                className="ema-loader__green"
-                d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
-              />
-              <path
-                className="ema-loader__yellow"
-                d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
-              />
-              <path
-                className="ema-loader__red"
-                d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
-              />
-            </g>
-          </g>
-
-          <path
-            className="ema-loader__hull"
-            d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z"
+          {/* Sonar Pulsing Wave */}
+          <circle
+            className="ema-pro-loader__sonar-wave"
+            cx="60"
+            cy="60"
+            r="42"
+            fill="none"
+            stroke="url(#ema-ring-grad-1)"
           />
-          <path
-            className="ema-loader__lower-hull"
-            d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z"
-          />
-          <path className="ema-loader__waterline" d="M36 87h188" />
-          <path className="ema-loader__bow-highlight" d="M206 81l15 1-8 9" />
 
-          <g className="ema-loader__portholes">
-            <circle cx="66" cy="91" r="2.2" />
-            <circle cx="78" cy="91" r="2.2" />
-            <circle cx="90" cy="91" r="2.2" />
+          {/* Outer Precision Nautical Tick Ring */}
+          <g className="ema-pro-loader__ring-outer">
+            <circle
+              cx="60"
+              cy="60"
+              r="54"
+              fill="none"
+              stroke="url(#ema-ring-grad-1)"
+              strokeWidth="1.8"
+              strokeDasharray="8 6 2 6"
+              opacity="0.85"
+            />
+            <circle
+              cx="60"
+              cy="60"
+              r="48"
+              fill="none"
+              stroke="url(#ema-ring-grad-2)"
+              strokeWidth="1"
+              strokeDasharray="40 18"
+              opacity="0.9"
+            />
+            {/* 4 Cardinal Anchor Points */}
+            <circle cx="60" cy="6" r="2.5" fill="#FCD116" />
+            <circle cx="114" cy="60" r="2.5" fill="#0284C7" />
+            <circle cx="60" cy="114" r="2.5" fill="#078930" />
+            <circle cx="6" cy="60" r="2.5" fill="#DA121A" />
           </g>
-        </g>
 
-        <g className="ema-loader__water-back">
-          <path d="M3 112c17-8 30-8 47 0s30 8 47 0 30-8 47 0 30 8 47 0 30-8 47 0 30 8 47 0" />
-        </g>
-        <g className="ema-loader__water-front">
-          <path d="M-8 121c19-9 34-9 53 0s34 9 53 0 34-9 53 0 34 9 53 0 34-9 53 0 34 9 53 0" />
-        </g>
-        <g className="ema-loader__foam">
-          <path d="M29 106c13 4 25 5 38 3" />
-          <path d="M200 108c14 1 24-1 35-5" />
-        </g>
-      </svg>
+          {/* Inner Counter-Rotating Golden Ring */}
+          <g className="ema-pro-loader__ring-inner">
+            <circle
+              cx="60"
+              cy="60"
+              r="39"
+              fill="none"
+              stroke="url(#ema-ring-grad-2)"
+              strokeWidth="2"
+              strokeDasharray="28 14"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="60"
+              cy="60"
+              r="34"
+              fill="none"
+              stroke="#38BDF8"
+              strokeWidth="1"
+              strokeDasharray="4 8"
+              opacity="0.6"
+            />
+          </g>
+
+          {/* Vector EMA Emblem Backup for Instant Render */}
+          {variant === "compact" && (
+            <g transform="translate(36, 36) scale(0.4)">
+              <path
+                d="M 60 10 L 110 100 L 85 100 L 60 48 L 35 100 L 10 100 Z"
+                fill="url(#ema-ring-grad-1)"
+              />
+              <circle
+                className="ema-pro-loader__center-sync"
+                cx="60"
+                cy="64"
+                r="12"
+                fill="none"
+                stroke="#FCD116"
+                strokeWidth="3.5"
+                strokeDasharray="14 8"
+              />
+            </g>
+          )}
+        </svg>
+
+        {/* Official EMA Crest Logo Image */}
+        <img
+          src="/ema-logo.png"
+          alt="Ethiopian Maritime Authority"
+          className="ema-pro-loader__core-logo"
+          onError={(e) => {
+            // Fallback if image path is not resolving in dev iframe
+            (e.target as HTMLElement).style.display = "none";
+          }}
+        />
+      </div>
     </span>
   );
 }
 
 export default MaritimeLoader;
+
+
diff --git a/libs/ui/src/lib/feedback/PageLoader.tsx b/libs/ui/src/lib/feedback/PageLoader.tsx
index 6bc6c687e..120075ef8 100644
--- a/libs/ui/src/lib/feedback/PageLoader.tsx
+++ b/libs/ui/src/lib/feedback/PageLoader.tsx
@@ -1,26 +1,129 @@
-import { Center, Loader, Stack, Text } from '@mantine/core';
+import { Center, Box, Stack, Text, useMantineColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { MaritimeLoader } from '../components/MaritimeLoader';
 
 interface PageLoaderProps {
   /** Visible + accessible label. Defaults to the shared i18n "loading" string. */
   label?: string;
+  /** Subtitle or secondary detail string. */
+  subtitle?: string;
   /** Container height. Defaults to a full-page fill. */
   height?: number | string;
+  /** Show framed executive card backdrop (default: true). */
+  framed?: boolean;
 }
 
-/** The full-page/section loading state every screen should use instead of a bare `<Loader />`. */
-export function PageLoader({ label, height = '60vh' }: PageLoaderProps) {
+/** The full-page/section loading state every screen should use. */
+export function PageLoader({
+  label,
+  subtitle,
+  height = '60vh',
+  framed = true,
+}: PageLoaderProps) {
   const { t } = useTranslation();
-  const resolvedLabel = label ?? t('loading', 'Loading…');
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const resolvedLabel = label ?? t('loading', 'Loading Maritime Services…');
 
   return (
-    <Center h={height}>
-      <Stack align="center" gap="xs">
-        <Loader size={64} aria-label={resolvedLabel} />
-        <Text c="dimmed" size="sm">
-          {resolvedLabel}
-        </Text>
-      </Stack>
+    <Center h={height} w="100%" p="md">
+      <Box
+        style={{
+          position: 'relative',
+          padding: framed ? '2rem 3rem' : '1rem',
+          borderRadius: framed ? '1.25rem' : '0',
+          background: framed
+            ? isDark
+              ? 'rgba(15, 23, 42, 0.75)'
+              : 'rgba(255, 255, 255, 0.85)'
+            : 'transparent',
+          backdropFilter: framed ? 'blur(12px)' : 'none',
+          boxShadow: framed
+            ? isDark
+              ? '0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)'
+              : '0 20px 40px rgba(11, 25, 44, 0.08), 0 0 0 1px rgba(15, 44, 89, 0.08)'
+            : 'none',
+          transition: 'all 0.3s ease',
+          maxWidth: '440px',
+          width: '100%',
+        }}
+      >
+        <Stack align="center" gap="md">
+          {/* Main Maritime Animated Loader */}
+          <MaritimeLoader size={110} variant="full" label={resolvedLabel} />
+
+          {/* Ethiopian Maritime Authority Branding Header */}
+          <Box style={{ textAlign: 'center' }}>
+            <Text
+              fw={700}
+              size="xs"
+              style={{
+                letterSpacing: '0.16em',
+                textTransform: 'uppercase',
+                background: 'linear-gradient(135deg, #0284C7 0%, #D4AF37 50%, #078930 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                marginBottom: '2px',
+              }}
+            >
+              ETHIOPIAN MARITIME AUTHORITY
+            </Text>
+            <Text
+              fw={500}
+              size="xs"
+              c="dimmed"
+              style={{ letterSpacing: '0.05em', marginBottom: '8px' }}
+            >
+              የኢትዮጵያ ማሪታይም ባለስልጣን
+            </Text>
+            <Text
+              fw={600}
+              size="md"
+              c={isDark ? 'gray.1' : 'navy.9'}
+              style={{ lineHeight: 1.3 }}
+            >
+              {resolvedLabel}
+            </Text>
+            {subtitle && (
+              <Text size="xs" c="dimmed" mt={4}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+
+          {/* Animated Gold Shimmer Bar */}
+          <Box
+            style={{
+              width: '120px',
+              height: '3px',
+              borderRadius: '2px',
+              background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,44,89,0.1)',
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Box
+              style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                width: '40%',
+                background: 'linear-gradient(90deg, #078930, #FCD116, #2563EB)',
+                borderRadius: '2px',
+                animation: 'ema-shimmer 1.8s infinite ease-in-out',
+              }}
+            />
+            <style>{`
+              @keyframes ema-shimmer {
+                0% { left: -40%; }
+                100% { left: 100%; }
+              }
+            `}</style>
+          </Box>
+        </Stack>
+      </Box>
     </Center>
   );
 }
+

From 7733fe8efd6220629670f8d1c9c4e9535ea9aab8 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:03:02 +0300
Subject: [PATCH 04/58] UI improvements

---
 libs/auth/src/lib/components/AuthShell.tsx   |  44 +----
 libs/auth/src/lib/pages/LoginPage.tsx        |  36 ++++
 libs/auth/src/lib/pages/SignupPage.tsx       |  36 ++++
 libs/ui/src/lib/layout/ColorSchemeToggle.tsx | 143 +++++++++++----
 libs/ui/src/lib/layout/LanguageSwitcher.tsx  | 172 +++++++++++++++----
 5 files changed, 322 insertions(+), 109 deletions(-)

diff --git a/libs/auth/src/lib/components/AuthShell.tsx b/libs/auth/src/lib/components/AuthShell.tsx
index da86df715..ead99cfeb 100644
--- a/libs/auth/src/lib/components/AuthShell.tsx
+++ b/libs/auth/src/lib/components/AuthShell.tsx
@@ -7,15 +7,14 @@ import {
   Stack,
   Text,
   Title,
-  UnstyledButton,
   rem,
   useComputedColorScheme,
-  useMantineColorScheme,
   useMantineTheme,
   type BoxProps,
 } from '@mantine/core';
-import { IconCheck, IconMoon, IconSun } from '@tabler/icons-react';
+import { IconCheck } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
+import { ColorSchemeToggle, LanguageSwitcher } from '@ema-platform/ui';
 import { useAuthConfig } from '../AuthConfig';
 
 export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number }) {
@@ -33,35 +32,6 @@ export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number
   );
 }
 
-function ThemeToggle() {
-  const { t } = useTranslation();
-  const { setColorScheme } = useMantineColorScheme();
-  const computed = useComputedColorScheme('light');
-  const isDark = computed === 'dark';
-
-  return (
-    <UnstyledButton
-      onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
-      aria-label={t('authShell.toggleTheme', 'Toggle theme')}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: rem(36),
-        height: rem(36),
-        borderRadius: rem(10),
-        border: '1px solid var(--mantine-color-default-border)',
-        background: 'var(--mantine-color-body)',
-        color: 'var(--mantine-color-dimmed)',
-        cursor: 'pointer',
-        transition: 'all 150ms ease',
-      }}
-    >
-      {isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
-    </UnstyledButton>
-  );
-}
-
 interface AuthShellProps {
   children: ReactNode;
   brandTitle?: string;
@@ -98,8 +68,9 @@ export function AuthShell({ children, brandTitle, brandSubtitle }: AuthShellProp
       }}
       p="md"
     >
-      {/* Theme toggle — top-right corner */}
-      <Box
+      {/* Language switcher & Theme toggle — top-right corner */}
+      <Group
+        gap="xs"
         style={{
           position: 'absolute',
           top: rem(16),
@@ -107,8 +78,9 @@ export function AuthShell({ children, brandTitle, brandSubtitle }: AuthShellProp
           zIndex: 10,
         }}
       >
-        <ThemeToggle />
-      </Box>
+        <LanguageSwitcher supportedLanguages={['en', 'am']} />
+        <ColorSchemeToggle />
+      </Group>
 
       <Flex
         mih="100vh"
diff --git a/libs/auth/src/lib/pages/LoginPage.tsx b/libs/auth/src/lib/pages/LoginPage.tsx
index 09d4d4b60..63e4fe803 100644
--- a/libs/auth/src/lib/pages/LoginPage.tsx
+++ b/libs/auth/src/lib/pages/LoginPage.tsx
@@ -11,8 +11,10 @@ import {
   Text,
   TextInput,
   Title,
+  UnstyledButton,
 } from "@mantine/core";
 import {
+  IconArrowLeft,
   IconArrowRight,
   IconDeviceMobile,
   IconLock,
@@ -50,6 +52,14 @@ export function LoginPage() {
   const [meTrigger] = useApiMutation<AuthUser>();
   const [profileTrigger] = useApiMutation<{ profile: CurrentProfile | null }>();
 
+  const handleBack = () => {
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate("/");
+    }
+  };
+
   // Built inside the component (not module scope) so validation messages
   // pick up the active language — same pattern as ProfilePage's forms.
   const schema = z.object({
@@ -149,6 +159,32 @@ export function LoginPage() {
   return (
     <AuthShell>
       <Stack gap="lg">
+        <UnstyledButton
+          onClick={handleBack}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 14,
+            fontWeight: 600,
+            color: "var(--mantine-color-dimmed)",
+            cursor: "pointer",
+            width: "fit-content",
+            transition: "all 150ms ease",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--mantine-primary-color-filled)";
+            e.currentTarget.style.transform = "translateX(-3px)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--mantine-color-dimmed)";
+            e.currentTarget.style.transform = "translateX(0)";
+          }}
+        >
+          <IconArrowLeft size={18} />
+          {t("common.back", "Back")}
+        </UnstyledButton>
+
         <div>
           <Title order={2} fz={30}>
             {t("login.welcome", { appName, defaultValue: "Welcome to {{appName}}" })}
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index 2ce426e1f..4017ded9d 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/libs/auth/src/lib/pages/SignupPage.tsx
@@ -11,8 +11,10 @@ import {
   Text,
   TextInput,
   Title,
+  UnstyledButton,
 } from '@mantine/core';
 import {
+  IconArrowLeft,
   IconArrowRight,
   IconAt,
   IconDeviceMobile,
@@ -61,6 +63,14 @@ export function SignupPage() {
   }>();
   const [meTrigger] = useApiMutation<AuthUser>();
 
+  const handleBack = () => {
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate('/');
+    }
+  };
+
   // Order matches passwordRules' default list: length, lowercase, uppercase,
   // number, special character. Shared between the zod schema (field error)
   // and the live checklist below, so both agree on the wording.
@@ -155,6 +165,32 @@ export function SignupPage() {
       })}
     >
       <Stack gap="lg">
+        <UnstyledButton
+          onClick={handleBack}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 14,
+            fontWeight: 600,
+            color: 'var(--mantine-color-dimmed)',
+            cursor: 'pointer',
+            width: 'fit-content',
+            transition: 'all 150ms ease',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--mantine-primary-color-filled)';
+            e.currentTarget.style.transform = 'translateX(-3px)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--mantine-color-dimmed)';
+            e.currentTarget.style.transform = 'translateX(0)';
+          }}
+        >
+          <IconArrowLeft size={18} />
+          {t('common.back', 'Back')}
+        </UnstyledButton>
+
         <div>
           <Title order={2} fz={30}>
             {t('signup.title', 'Create account')}
diff --git a/libs/ui/src/lib/layout/ColorSchemeToggle.tsx b/libs/ui/src/lib/layout/ColorSchemeToggle.tsx
index c31109394..b8790318a 100644
--- a/libs/ui/src/lib/layout/ColorSchemeToggle.tsx
+++ b/libs/ui/src/lib/layout/ColorSchemeToggle.tsx
@@ -1,45 +1,118 @@
-import { UnstyledButton, useMantineColorScheme, useComputedColorScheme, rem } from '@mantine/core';
-import { IconSun, IconMoon } from '@tabler/icons-react';
+import {
+  Menu,
+  UnstyledButton,
+  Text,
+  Group,
+  rem,
+  useMantineColorScheme,
+  useComputedColorScheme,
+} from '@mantine/core';
+import {
+  IconSun,
+  IconMoon,
+  IconDeviceDesktop,
+  IconCheck,
+} from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 
 export function ColorSchemeToggle() {
   const { t } = useTranslation();
-  const { setColorScheme } = useMantineColorScheme();
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
   const computed = useComputedColorScheme('light', { getInitialValueInEffect: true });
   const isDark = computed === 'dark';
 
+  const themes = [
+    {
+      value: 'light' as const,
+      label: t('profile.appearance.light', 'Light'),
+      icon: IconSun,
+      color: '#e67e22',
+    },
+    {
+      value: 'dark' as const,
+      label: t('profile.appearance.dark', 'Dark'),
+      icon: IconMoon,
+      color: '#9b59b6',
+    },
+    {
+      value: 'auto' as const,
+      label: t('profile.appearance.system', 'System'),
+      icon: IconDeviceDesktop,
+      color: '#3498db',
+    },
+  ];
+
+  const CurrentIcon = colorScheme === 'auto' ? IconDeviceDesktop : isDark ? IconMoon : IconSun;
+
   return (
-    <UnstyledButton
-      aria-label={t('common.toggleTheme')}
-      onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: rem(38),
-        height: rem(38),
-        borderRadius: rem(12),
-        background: 'var(--mantine-color-body)',
-        color: 'var(--mantine-color-gray-6)',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
-        transition: 'all 150ms ease',
-        cursor: 'pointer',
-        border: 'none',
-      }}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.background = 'var(--mantine-primary-color-light)';
-        e.currentTarget.style.color = 'var(--mantine-primary-color-6)';
-        e.currentTarget.style.boxShadow =
-          '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px var(--mantine-primary-color-2)';
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.background = 'var(--mantine-color-body)';
-        e.currentTarget.style.color = 'var(--mantine-color-gray-6)';
-        e.currentTarget.style.boxShadow =
-          '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)';
-      }}
-    >
-      {isDark ? <IconSun size={19} /> : <IconMoon size={19} />}
-    </UnstyledButton>
+    <Menu shadow="lg" width={170} position="bottom-end" withinPortal transitionProps={{ transition: 'pop-top-right', duration: 150 }}>
+      <Menu.Target>
+        <UnstyledButton
+          aria-label={t('common.toggleTheme', 'Toggle light / dark mode')}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: rem(38),
+            height: rem(38),
+            borderRadius: rem(12),
+            background: 'var(--mantine-color-body)',
+            color: isDark ? 'var(--mantine-color-yellow-4)' : 'var(--mantine-color-blue-6)',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)',
+            transition: 'all 200ms ease',
+            cursor: 'pointer',
+            border: 'none',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-1px)';
+            e.currentTarget.style.boxShadow =
+              '0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px var(--mantine-primary-color-3)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow =
+              '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)';
+          }}
+        >
+          <CurrentIcon size={19} stroke={1.8} />
+        </UnstyledButton>
+      </Menu.Target>
+
+      <Menu.Dropdown
+        style={{
+          borderRadius: rem(14),
+          padding: rem(6),
+          boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
+          backdropFilter: 'blur(8px)',
+        }}
+      >
+        <Menu.Label style={{ fontWeight: 600, fontSize: rem(11), letterSpacing: '0.5px', textTransform: 'uppercase' }}>
+          {t('profile.appearance.title', 'Appearance')}
+        </Menu.Label>
+        {themes.map((theme) => {
+          const Icon = theme.icon;
+          const isSelected = colorScheme === theme.value;
+          return (
+            <Menu.Item
+              key={theme.value}
+              onClick={() => setColorScheme(theme.value)}
+              leftSection={<Icon size={16} stroke={1.8} style={{ color: isSelected ? 'var(--mantine-primary-color-filled)' : 'currentColor' }} />}
+              rightSection={
+                isSelected ? <IconCheck size={16} stroke={2.4} style={{ color: 'var(--mantine-primary-color-filled)' }} /> : undefined
+              }
+              style={{
+                borderRadius: rem(8),
+                fontWeight: isSelected ? 600 : 400,
+                backgroundColor: isSelected ? 'var(--mantine-primary-color-light)' : undefined,
+                color: isSelected ? 'var(--mantine-primary-color-filled)' : undefined,
+              }}
+            >
+              <Text size="sm">{theme.label}</Text>
+            </Menu.Item>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
   );
 }
+
diff --git a/libs/ui/src/lib/layout/LanguageSwitcher.tsx b/libs/ui/src/lib/layout/LanguageSwitcher.tsx
index b1ec6305d..0e9df453d 100644
--- a/libs/ui/src/lib/layout/LanguageSwitcher.tsx
+++ b/libs/ui/src/lib/layout/LanguageSwitcher.tsx
@@ -1,83 +1,179 @@
-import { Menu, UnstyledButton, Text, rem } from '@mantine/core';
-import { IconWorld, IconCheck, IconChevronDown } from '@tabler/icons-react';
+import type { ComponentType, SVGProps } from 'react';
+import { Menu, UnstyledButton, Text, Group, rem } from '@mantine/core';
+import { IconCheck, IconChevronDown, IconWorld } from '@tabler/icons-react';
+import { GB, ET } from 'country-flag-icons/react/3x2';
 import { useTranslation } from 'react-i18next';
 
 interface LanguageSwitcherProps {
   supportedLanguages: readonly string[];
-  /** `icon` renders a compact globe button; `button` shows the language label. */
+  /** `icon` renders a compact flag button; `button` shows the language label. */
   variant?: 'icon' | 'button';
 }
 
-export function LanguageSwitcher({ supportedLanguages, variant = 'icon' }: LanguageSwitcherProps) {
+type FlagComponentType = ComponentType<SVGProps<SVGSVGElement>>;
+
+const LANGUAGE_CONFIG: Record<
+  string,
+  { Flag: FlagComponentType; nativeName: string; shortCode: string }
+> = {
+  en: { Flag: GB, nativeName: 'English', shortCode: 'EN' },
+  am: { Flag: ET, nativeName: 'አማርኛ', shortCode: 'AM' },
+};
+
+export function LanguageSwitcher({
+  supportedLanguages,
+  variant = 'icon',
+}: LanguageSwitcherProps) {
   const { t, i18n } = useTranslation();
-  const current = i18n.language;
+  const current = i18n.language || 'en';
 
   const change = (lng: string) => {
     if (lng !== current) i18n.changeLanguage(lng);
   };
 
+  const currentConfig = LANGUAGE_CONFIG[current] || {
+    Flag: null,
+    nativeName: current.toUpperCase(),
+    shortCode: current.toUpperCase(),
+  };
+
+  const CurrentFlag = currentConfig.Flag;
+
   return (
-    <Menu shadow="md" width={160} position="bottom-end" withinPortal>
+    <Menu
+      shadow="lg"
+      width={190}
+      position="bottom-end"
+      withinPortal
+      transitionProps={{ transition: 'pop-top-right', duration: 150 }}
+    >
       <Menu.Target>
         <UnstyledButton
-          aria-label={t('language.label')}
+          aria-label={t('language.label', 'Language')}
           style={{
-            display: 'flex',
+            display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: rem(4),
+            gap: rem(6),
             width: variant === 'icon' ? rem(38) : 'auto',
             height: rem(38),
             padding: variant === 'icon' ? 0 : '0 12px',
             borderRadius: rem(12),
             background: 'var(--mantine-color-body)',
-            color: 'var(--mantine-color-gray-6)',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
-            transition: 'all 150ms ease',
+            color: 'var(--mantine-color-gray-7)',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)',
+            transition: 'all 200ms ease',
             cursor: 'pointer',
             border: 'none',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'var(--mantine-primary-color-light)';
-            e.currentTarget.style.color = 'var(--mantine-primary-color-6)';
+            e.currentTarget.style.transform = 'translateY(-1px)';
             e.currentTarget.style.boxShadow =
-              '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px var(--mantine-primary-color-2)';
+              '0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px var(--mantine-primary-color-3)';
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'var(--mantine-color-body)';
-            e.currentTarget.style.color = 'var(--mantine-color-gray-6)';
+            e.currentTarget.style.transform = 'translateY(0)';
             e.currentTarget.style.boxShadow =
-              '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)';
+              '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)';
           }}
         >
-          <IconWorld size={19} />
+          {CurrentFlag ? (
+            <CurrentFlag
+              style={{
+                width: rem(20),
+                height: rem(14),
+                borderRadius: rem(2),
+                display: 'block',
+                boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
+              }}
+            />
+          ) : (
+            <IconWorld size={19} />
+          )}
+
           {variant !== 'icon' && (
-            <>
-              <Text size="sm" fw={500}>
-                {t(`language.${current}`)}
+            <Group gap={6} wrap="nowrap">
+              <Text size="sm" fw={600}>
+                {t(`language.${current}`, currentConfig.nativeName)}
               </Text>
-              <IconChevronDown size={14} />
-            </>
+              <IconChevronDown size={14} stroke={2} style={{ opacity: 0.7 }} />
+            </Group>
           )}
         </UnstyledButton>
       </Menu.Target>
       <Menu.Dropdown
-        style={{ borderRadius: rem(12), padding: rem(6) }}
+        style={{
+          borderRadius: rem(14),
+          padding: rem(6),
+          boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
+          backdropFilter: 'blur(8px)',
+        }}
       >
-        <Menu.Label>{t('language.label')}</Menu.Label>
-        {supportedLanguages.map((lng) => (
-          <Menu.Item
-            key={lng}
-            onClick={() => change(lng)}
-            rightSection={
-              current === lng ? <IconCheck size={16} /> : undefined
-            }
-            style={{ borderRadius: rem(8) }}
-          >
-            {t(`language.${lng}`)}
-          </Menu.Item>
-        ))}
+        <Menu.Label
+          style={{
+            fontWeight: 600,
+            fontSize: rem(11),
+            letterSpacing: '0.5px',
+            textTransform: 'uppercase',
+          }}
+        >
+          {t('language.label', 'Language')}
+        </Menu.Label>
+        {supportedLanguages.map((lng) => {
+          const config = LANGUAGE_CONFIG[lng] || {
+            Flag: null,
+            nativeName: lng.toUpperCase(),
+            shortCode: lng.toUpperCase(),
+          };
+          const Flag = config.Flag;
+          const isSelected = current === lng;
+
+          return (
+            <Menu.Item
+              key={lng}
+              onClick={() => change(lng)}
+              leftSection={
+                Flag ? (
+                  <Flag
+                    style={{
+                      width: rem(20),
+                      height: rem(14),
+                      borderRadius: rem(2),
+                      display: 'block',
+                      boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
+                    }}
+                  />
+                ) : (
+                  <IconWorld size={16} />
+                )
+              }
+              rightSection={
+                isSelected ? (
+                  <IconCheck
+                    size={16}
+                    stroke={2.4}
+                    style={{ color: 'var(--mantine-primary-color-filled)' }}
+                  />
+                ) : undefined
+              }
+              style={{
+                borderRadius: rem(8),
+                fontWeight: isSelected ? 600 : 400,
+                backgroundColor: isSelected
+                  ? 'var(--mantine-primary-color-light)'
+                  : undefined,
+                color: isSelected ? 'var(--mantine-primary-color-filled)' : undefined,
+              }}
+            >
+              <Group justify="space-between" wrap="nowrap" style={{ width: '100%' }}>
+                <Text size="sm">{t(`language.${lng}`, config.nativeName)}</Text>
+              </Group>
+            </Menu.Item>
+          );
+        })}
       </Menu.Dropdown>
     </Menu>
   );
 }
+
+

From c00a19dd992893f8de2fb4cafcf9ceca6fdde257 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:10:41 +0300
Subject: [PATCH 05/58] UI improvements

---
 libs/ui/src/lib/landing/LandingPage.tsx | 389 ++++++++++++++++++------
 libs/ui/src/lib/landing/landing-copy.ts |  68 +++++
 libs/ui/src/lib/landing/landing.css     |  80 ++++-
 3 files changed, 439 insertions(+), 98 deletions(-)

diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx
index 333274b89..903c88adc 100644
--- a/libs/ui/src/lib/landing/LandingPage.tsx
+++ b/libs/ui/src/lib/landing/LandingPage.tsx
@@ -4,14 +4,20 @@ import { useTranslation } from 'react-i18next';
 import {
   Accordion,
   Anchor,
+  Badge,
   Box,
+  Burger,
   Button,
   Container,
+  Divider,
+  Drawer,
   Group,
   Paper,
   SimpleGrid,
   Stack,
+  Tabs,
   Text,
+  TextInput,
   ThemeIcon,
   Title,
   useMantineTheme,
@@ -22,13 +28,16 @@ import {
   IconAward,
   IconBriefcase,
   IconCertificate,
+  IconCheck,
   IconClipboardCheck,
+  IconClock,
   IconGavel,
   IconLanguage,
   IconMail,
   IconMapPin,
   IconPhone,
   IconSchool,
+  IconSearch,
   IconShip,
   IconShieldCheck,
   IconUserCheck,
@@ -73,8 +82,6 @@ function useActiveSection(ids: readonly string[]) {
         const topMost = visible.reduce((a, b) => (a.boundingClientRect.top <= b.boundingClientRect.top ? a : b));
         setActive(topMost.target.id);
       },
-      // Counts a section only once it has cleared the sticky header, and only
-      // while it's still in the top 30% of the viewport.
       { rootMargin: `-${HEADER_HEIGHT}px 0px -70% 0px`, threshold: 0 },
     );
     elements.forEach((el) => observer.observe(el));
@@ -126,8 +133,8 @@ export function LandingPage({
 
       <main id="main">
         <Hero primaryHref={primaryHref} signupHref={signupHref} isAuthed={isAuthed} />
+        <StatsBanner />
         <About />
-        <QuickAccess />
         <Services />
         <Roles />
         <HowItWorks />
@@ -145,10 +152,12 @@ function NavAnchor({
   href,
   active,
   children,
+  onClick,
 }: {
   href: string;
   active?: boolean;
   children: React.ReactNode;
+  onClick?: () => void;
 }) {
   return (
     <Anchor
@@ -158,6 +167,7 @@ function NavAnchor({
       c={active ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'}
       fw={500}
       fz="sm"
+      onClick={onClick}
       style={{
         whiteSpace: 'nowrap',
         paddingBottom: 4,
@@ -183,6 +193,9 @@ function Header({
 }) {
   const { t } = useTranslation();
   const activeSection = useActiveSection(NAV_SECTION_IDS);
+  const [drawerOpened, setDrawerOpened] = useState(false);
+
+  const closeDrawer = () => setDrawerOpened(false);
 
   return (
     <Box
@@ -207,6 +220,7 @@ function Header({
             </Group>
           </Anchor>
 
+          {/* Desktop Navigation Links */}
           <Group gap="lg" wrap="nowrap" visibleFrom="md" component="nav" aria-label={t('landing.nav.home')}>
             <NavAnchor href="#home" active={activeSection === 'home'}>
               {t('landing.nav.home')}
@@ -225,20 +239,18 @@ function Header({
             </NavAnchor>
           </Group>
 
+          {/* Controls & Mobile Hamburger */}
           <Group gap="xs" wrap="nowrap">
             <LanguageSwitcher supportedLanguages={supportedLanguages} />
             <ColorSchemeToggle />
+
+            {/* Desktop Auth CTAs */}
             {isAuthed ? (
               <Button component={Link} to={primaryHref} size="sm" visibleFrom="xs">
                 {t('landing.auth.dashboard')}
               </Button>
             ) : (
               <>
-                {/* Login is the secondary action next to Sign Up when both
-                    exist (portal) — but when there's no signup (backoffice,
-                    enableSignup: false), it's the only action, so it takes
-                    the filled/primary treatment instead of reading like a
-                    leftover half of a pair. */}
                 <Button
                   component={Link}
                   to={primaryHref}
@@ -255,9 +267,98 @@ function Header({
                 )}
               </>
             )}
+
+            {/* Mobile Menu Burger Icon */}
+            <Burger
+              opened={drawerOpened}
+              onClick={() => setDrawerOpened((o) => !o)}
+              hiddenFrom="md"
+              size="sm"
+              aria-label="Toggle Navigation Menu"
+            />
           </Group>
         </Group>
       </Container>
+
+      {/* Mobile Drawer Menu */}
+      <Drawer
+        opened={drawerOpened}
+        onClose={closeDrawer}
+        size="75%"
+        padding="md"
+        hiddenFrom="md"
+        title={
+          <Group gap="xs">
+            <Box component="img" src="/ema-logo.png" alt="" w={28} h={28} style={{ objectFit: 'contain' }} />
+            <Text fw={700} fz="sm">
+              {t('app.name')}
+            </Text>
+          </Group>
+        }
+      >
+        <Stack gap="sm" mt="md">
+          <Anchor
+            href="#home"
+            className="ema-drawer-nav-link"
+            aria-current={activeSection === 'home' ? 'true' : undefined}
+            onClick={closeDrawer}
+          >
+            {t('landing.nav.home')}
+          </Anchor>
+          <Anchor
+            href="#about"
+            className="ema-drawer-nav-link"
+            aria-current={activeSection === 'about' ? 'true' : undefined}
+            onClick={closeDrawer}
+          >
+            {t('landing.nav.about')}
+          </Anchor>
+          <Anchor
+            href="#services"
+            className="ema-drawer-nav-link"
+            aria-current={activeSection === 'services' ? 'true' : undefined}
+            onClick={closeDrawer}
+          >
+            {t('landing.nav.services')}
+          </Anchor>
+          <Anchor
+            href="#system"
+            className="ema-drawer-nav-link"
+            aria-current={activeSection === 'system' ? 'true' : undefined}
+            onClick={closeDrawer}
+          >
+            {t('landing.nav.system')}
+          </Anchor>
+          <Anchor
+            href="#contact"
+            className="ema-drawer-nav-link"
+            aria-current={activeSection === 'contact' ? 'true' : undefined}
+            onClick={closeDrawer}
+          >
+            {t('landing.nav.contact')}
+          </Anchor>
+
+          <Divider my="sm" />
+
+          {/* Mobile Auth Actions */}
+          {isAuthed ? (
+            <Button component={Link} to={primaryHref} fullWidth size="md" onClick={closeDrawer}>
+              {t('landing.auth.dashboard')}
+            </Button>
+          ) : (
+            <Stack gap="xs">
+              <Button component={Link} to={primaryHref} variant="outline" fullWidth size="md" onClick={closeDrawer}>
+                {t('landing.auth.login')}
+              </Button>
+              {signupHref && (
+                <Button component={Link} to={signupHref} fullWidth size="md" onClick={closeDrawer}>
+                  {t('landing.auth.signup')}
+                </Button>
+              )}
+            </Stack>
+          )}
+        </Stack>
+      </Drawer>
     </Box>
   );
 }
@@ -292,8 +393,9 @@ function Hero({
         overflow: 'hidden',
       }}
     >
-      {/* Decorative glow circles — same device as AuthShell's hero panel. */}
+      {/* Decorative pulse circles */}
       <Box
+        className="ema-hero-pulse"
         pos="absolute"
         top={-120}
         right={-100}
@@ -302,6 +404,7 @@ function Hero({
         style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
       />
       <Box
+        className="ema-hero-pulse"
         pos="absolute"
         bottom={-160}
         left={-120}
@@ -321,20 +424,21 @@ function Hero({
 
       <Container size="xl" py={{ base: 88, sm: 120, lg: 148 }} pos="relative">
         <Stack gap="lg" align="center" ta="center" className="ema-landing-fade">
-          <Text fz="sm" fw={600} style={{ opacity: 0.85, letterSpacing: 0.5 }}>
+          <Badge size="lg" variant="light" color="white" radius="xl" style={{ textTransform: 'none', fontWeight: 600 }}>
             {t('landing.hero.eyebrow')}
-          </Text>
+          </Badge>
           <Title order={1} fz={{ base: 34, sm: 48, lg: 56 }} lh={1.1} maw={860}>
             {t('landing.hero.title')}
           </Title>
           <Text fz={{ base: 'md', sm: 'xl' }} fw={500} maw={680} style={{ opacity: 0.95 }}>
             {t('landing.hero.subtitle')}
           </Text>
-          <Text fz={{ base: 'sm', sm: 'md' }} maw={600} style={{ opacity: 0.82 }}>
+          <Text fz={{ base: 'sm', sm: 'md' }} maw={600} style={{ opacity: 0.84 }}>
             {t('landing.hero.description')}
           </Text>
 
-          <Group justify="center">
+          {/* Dual CTAs */}
+          <Group justify="center" gap="md" mt="xs">
             <Button
               component={Link}
               to={isAuthed ? primaryHref : (signupHref ?? '/login')}
@@ -346,8 +450,20 @@ function Hero({
             >
               {isAuthed ? t('landing.auth.dashboard') : t('landing.cta.getStarted')}
             </Button>
+            <Button
+              component="a"
+              href="#services"
+              size="lg"
+              variant="outline"
+              color="white"
+              leftSection={<IconBriefcase size={20} />}
+              style={{ backdropFilter: 'blur(4px)', backgroundColor: 'rgba(255,255,255,0.1)' }}
+            >
+              {t('landing.cta.exploreServices')}
+            </Button>
           </Group>
 
+          {/* Feature Badges */}
           <Group gap="xs" mt="xl" justify="center" wrap="wrap">
             {badgeKeys.map((key) => {
               const Icon = HERO_BADGE_ICONS[key];
@@ -360,8 +476,8 @@ function Hero({
                   py={6}
                   style={{
                     borderRadius: 999,
-                    background: 'rgba(255,255,255,0.12)',
-                    border: '1px solid rgba(255,255,255,0.18)',
+                    background: 'rgba(255,255,255,0.14)',
+                    border: '1px solid rgba(255,255,255,0.22)',
                   }}
                 >
                   <Icon size={14} />
@@ -378,6 +494,74 @@ function Hero({
   );
 }
 
+/** Institutional Impact Statistics Counter Banner */
+function StatsBanner() {
+  const { t } = useTranslation();
+  return (
+    <Box className="ema-stats-banner" py={36}>
+      <Container size="xl">
+        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="lg">
+          <Stack gap={2} align="center" ta="center">
+            <Group gap={6} align="center">
+              <ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
+                <IconUsers size={16} />
+              </ThemeIcon>
+              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+                {t('landing.stats.seafarersVal')}
+              </Text>
+            </Group>
+            <Text fz="xs" fw={600} c="dimmed">
+              {t('landing.stats.seafarers')}
+            </Text>
+          </Stack>
+
+          <Stack gap={2} align="center" ta="center">
+            <Group gap={6} align="center">
+              <ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
+                <IconShip size={16} />
+              </ThemeIcon>
+              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+                {t('landing.stats.vesselsVal')}
+              </Text>
+            </Group>
+            <Text fz="xs" fw={600} c="dimmed">
+              {t('landing.stats.vessels')}
+            </Text>
+          </Stack>
+
+          <Stack gap={2} align="center" ta="center">
+            <Group gap={6} align="center">
+              <ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
+                <IconShieldCheck size={16} />
+              </ThemeIcon>
+              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+                {t('landing.stats.efficiencyVal')}
+              </Text>
+            </Group>
+            <Text fz="xs" fw={600} c="dimmed">
+              {t('landing.stats.efficiency')}
+            </Text>
+          </Stack>
+
+          <Stack gap={2} align="center" ta="center">
+            <Group gap={6} align="center">
+              <ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
+                <IconClock size={16} />
+              </ThemeIcon>
+              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+                {t('landing.stats.availabilityVal')}
+              </Text>
+            </Group>
+            <Text fz="xs" fw={600} c="dimmed">
+              {t('landing.stats.availability')}
+            </Text>
+          </Stack>
+        </SimpleGrid>
+      </Container>
+    </Box>
+  );
+}
+
 function SectionHeading({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
     <Stack gap={6} align="center" ta="center" mb="xl" maw={640} mx="auto">
@@ -400,7 +584,7 @@ function About() {
       <Container size="xl">
         <SectionHeading title={t('landing.about.title')} />
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xl">
-          <Paper withBorder radius="lg" p="xl">
+          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
             <Stack gap="xs">
               <Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
                 {t('landing.about.visionLabel')}
@@ -408,7 +592,7 @@ function About() {
               <Text>{t('landing.about.vision')}</Text>
             </Stack>
           </Paper>
-          <Paper withBorder radius="lg" p="xl">
+          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
             <Stack gap="xs">
               <Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
                 {t('landing.about.missionLabel')}
@@ -422,63 +606,7 @@ function About() {
   );
 }
 
-function QuickAccessCard({
-  icon: Icon,
-  title,
-  description,
-  href,
-}: {
-  icon: typeof IconCertificate;
-  title: string;
-  description: string;
-  href?: string;
-}) {
-  const body = (
-    <Stack gap="sm">
-      <ThemeIcon size={44} radius="md" variant="light">
-        <Icon size={22} />
-      </ThemeIcon>
-      <Text fw={600}>{title}</Text>
-      <Text c="dimmed" fz="sm">
-        {description}
-      </Text>
-    </Stack>
-  );
-  const cardStyle = { display: 'block', height: '100%', textDecoration: 'none', color: 'inherit' } as const;
 
-  return href ? (
-    <Paper component={Link} to={href} withBorder radius="lg" p="lg" className="ema-landing-hover" style={cardStyle}>
-      {body}
-    </Paper>
-  ) : (
-    <Paper withBorder radius="lg" p="lg" className="ema-landing-hover" style={cardStyle}>
-      {body}
-    </Paper>
-  );
-}
-
-function QuickAccess() {
-  const { t } = useTranslation();
-  return (
-    <Box id="quick-access" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
-      <Container size="xl">
-        <SectionHeading title={t('landing.quickAccess.title')} subtitle={t('landing.quickAccess.subtitle')} />
-        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
-          <QuickAccessCard
-            icon={IconShip}
-            title={t('landing.quickAccess.vesselRegistration.title')}
-            description={t('landing.quickAccess.vesselRegistration.description')}
-          />
-          <QuickAccessCard
-            icon={IconAnchor}
-            title={t('landing.quickAccess.notices.title')}
-            description={t('landing.quickAccess.notices.description')}
-          />
-        </SimpleGrid>
-      </Container>
-    </Box>
-  );
-}
 
 const SERVICE_ICONS = {
   seafarerRegistration: IconUserCheck,
@@ -499,7 +627,7 @@ function Services() {
           {items.map((key) => {
             const Icon = SERVICE_ICONS[key];
             return (
-              <Paper key={key} withBorder radius="lg" p="lg">
+              <Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
                 <Stack gap="sm">
                   <ThemeIcon size={44} radius="md" variant="light">
                     <Icon size={22} />
@@ -536,7 +664,7 @@ function Roles() {
           {items.map((key) => {
             const Icon = ROLE_ICONS[key];
             return (
-              <Paper key={key} withBorder radius="lg" p="lg" ta="center">
+              <Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
                 <Stack gap="sm" align="center">
                   <ThemeIcon size={48} radius="xl" variant="light">
                     <Icon size={24} />
@@ -564,18 +692,23 @@ function HowItWorks() {
     <Box id="how-it-works" component="section" py={72}>
       <Container size="xl">
         <SectionHeading title={t('landing.howItWorks.title')} subtitle={t('landing.howItWorks.subtitle')} />
-        <SimpleGrid cols={{ base: 1, sm: 5 }} spacing="lg">
+        <SimpleGrid cols={{ base: 1, sm: 3, md: 5 }} spacing="lg">
           {STEP_KEYS.map((key, i) => {
             const Icon = STEP_ICONS[i];
             return (
-              <Stack key={key} gap="xs" align="center" ta="center">
-                <ThemeIcon size={48} radius="xl" variant="filled" color="var(--mantine-primary-color-filled)">
-                  <Icon size={22} />
-                </ThemeIcon>
-                <Text fw={600} fz="sm">
-                  {i + 1}. {t(`landing.howItWorks.steps.${key}`)}
-                </Text>
-              </Stack>
+              <Paper key={key} withBorder radius="lg" p="md" className="ema-landing-hover ema-landing-card-accent" ta="center">
+                <Stack gap="xs" align="center">
+                  <Badge size="xs" variant="filled" radius="xl" color="emaPrimary">
+                    Step 0{i + 1}
+                  </Badge>
+                  <ThemeIcon size={44} radius="xl" variant="filled" color="var(--mantine-primary-color-filled)">
+                    <Icon size={22} />
+                  </ThemeIcon>
+                  <Text fw={600} fz="sm">
+                    {t(`landing.howItWorks.steps.${key}`)}
+                  </Text>
+                </Stack>
+              </Paper>
             );
           })}
         </SimpleGrid>
@@ -602,7 +735,7 @@ function SystemHighlights() {
           {items.map((key) => {
             const Icon = SYSTEM_ICONS[key];
             return (
-              <Paper key={key} withBorder radius="lg" p="lg" ta="center">
+              <Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
                 <Stack gap="sm" align="center">
                   <ThemeIcon size={48} radius="xl" variant="light">
                     <Icon size={24} />
@@ -699,18 +832,88 @@ function Contact() {
 function Footer() {
   const { t } = useTranslation();
   return (
-    <Box component="footer" py="xl" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+    <Box component="footer" py={48} style={{ borderTop: '1px solid var(--mantine-color-default-border)', background: 'var(--mantine-color-body)' }}>
       <Container size="xl">
-        <Group justify="space-between" wrap="wrap" gap="sm">
-          <Group gap="xs">
-            <Box component="img" src="/ema-logo.png" alt="" w={24} h={24} style={{ objectFit: 'contain' }} />
-            <Text fz="sm" c="dimmed">
-              {t('landing.hero.title')}
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="xl" mb="xl">
+          {/* Col 1: Brand & Overview */}
+          <Stack gap="sm">
+            <Group gap="xs">
+              <Box component="img" src="/ema-logo.png" alt="" w={32} h={32} style={{ objectFit: 'contain' }} />
+              <Text fw={700} fz="sm">
+                {t('landing.hero.title')}
+              </Text>
+            </Group>
+            <Text fz="xs" c="dimmed" style={{ lineHeight: 1.6 }}>
+              {t('landing.footer.tagline')}
             </Text>
-          </Group>
-          <Text fz="sm" c="dimmed">
+          </Stack>
+
+          {/* Col 2: Quick Links */}
+          <Stack gap="xs">
+            <Text fw={600} fz="sm">
+              {t('landing.footer.quickLinks')}
+            </Text>
+            <Anchor href="#home" fz="xs" c="dimmed" underline="hover">
+              {t('landing.nav.home')}
+            </Anchor>
+            <Anchor href="#about" fz="xs" c="dimmed" underline="hover">
+              {t('landing.nav.about')}
+            </Anchor>
+            <Anchor href="#services" fz="xs" c="dimmed" underline="hover">
+              {t('landing.nav.services')}
+            </Anchor>
+            <Anchor href="#system" fz="xs" c="dimmed" underline="hover">
+              {t('landing.nav.system')}
+            </Anchor>
+            <Anchor href="#contact" fz="xs" c="dimmed" underline="hover">
+              {t('landing.nav.contact')}
+            </Anchor>
+          </Stack>
+
+          {/* Col 3: Core Services */}
+          <Stack gap="xs">
+            <Text fw={600} fz="sm">
+              {t('landing.footer.servicesHeading')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              {t('landing.services.items.seafarerRegistration.title')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              {t('landing.services.items.vesselRegistration.title')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              {t('landing.services.items.licensing.title')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              {t('landing.services.items.examinations.title')}
+            </Text>
+          </Stack>
+
+          {/* Col 4: Support & Hotline */}
+          <Stack gap="xs">
+            <Text fw={600} fz="sm">
+              {t('landing.footer.contactHeading')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              <strong>{t('landing.footer.hoursLabel')}:</strong> {t('landing.footer.hoursValue')}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              <strong>{t('landing.footer.emergencyLabel')}:</strong> {t('landing.footer.emergencyValue')}
+            </Text>
+          </Stack>
+        </SimpleGrid>
+
+        <Divider my="md" />
+
+        <Group justify="space-between" wrap="wrap" gap="sm">
+          <Text fz="xs" c="dimmed">
             © 2026 {t('landing.hero.title')} — {t('landing.footer.rights')}
           </Text>
+          <Group gap="md">
+            <Anchor href="https://etmaritime.com" target="_blank" rel="noreferrer" fz="xs" c="dimmed">
+              etmaritime.com
+            </Anchor>
+          </Group>
         </Group>
       </Container>
     </Box>
diff --git a/libs/ui/src/lib/landing/landing-copy.ts b/libs/ui/src/lib/landing/landing-copy.ts
index f0df0213f..6a65647d7 100644
--- a/libs/ui/src/lib/landing/landing-copy.ts
+++ b/libs/ui/src/lib/landing/landing-copy.ts
@@ -52,6 +52,32 @@ export const landingEn = {
 
   cta: {
     getStarted: 'Get Started',
+    verifyCertificate: 'Verify Certificate',
+    exploreServices: 'Explore Services',
+  },
+
+  stats: {
+    seafarers: 'Registered Seafarers',
+    seafarersVal: '10,000+',
+    vessels: 'Registered Vessels',
+    vesselsVal: '1,200+',
+    efficiency: 'Digital Processing',
+    efficiencyVal: '100%',
+    availability: 'Portal Service Uptime',
+    availabilityVal: '24/7',
+  },
+
+  verification: {
+    title: 'Public Verification & Tracking',
+    subtitle: 'Verify the authenticity of any EMA-issued certificate, licence, or track an active application.',
+    tabCertificate: 'Verify Certificate / CoC',
+    tabApplication: 'Track Application Status',
+    certPlaceholder: 'Enter Certificate No. (e.g. COC-2026-8891)',
+    appPlaceholder: 'Enter Application Ref (e.g. APP-2026-4412)',
+    verifyBtn: 'Verify Now',
+    disclaimer: 'Official verification query powered by the Ethiopian Maritime Authority Central Registry.',
+    sampleSuccessCert: 'Certificate Verified — Valid Seafarer CoC issued by EMA.',
+    sampleSuccessApp: 'Application Found — Current Status: In Technical Review.',
   },
 
   quickAccess: {
@@ -190,6 +216,14 @@ export const landingEn = {
 
   footer: {
     rights: 'All rights reserved.',
+    tagline: 'Empowering Ethiopia’s Maritime & Logistics Infrastructure.',
+    quickLinks: 'Quick Links',
+    servicesHeading: 'Core Services',
+    contactHeading: 'Contact & Support',
+    hoursLabel: 'Working Hours',
+    hoursValue: 'Mon – Fri: 8:30 AM – 5:30 PM (EAT)',
+    emergencyLabel: 'Emergency Maritime Line',
+    emergencyValue: '+251 11 551 0000',
   },
 };
 
@@ -239,6 +273,32 @@ export const landingAm: LandingCopy = {
 
   cta: {
     getStarted: 'ይጀምሩ',
+    verifyCertificate: 'ምስክር ወረቀት ያረጋግጡ',
+    exploreServices: 'አገልግሎቶችን ይመልከቱ',
+  },
+
+  stats: {
+    seafarers: 'የተመዘገቡ መርከበኞች',
+    seafarersVal: '10,000+',
+    vessels: 'የተመዘገቡ መርከቦች',
+    vesselsVal: '1,200+',
+    efficiency: 'ዲጂታል አሰራር',
+    efficiencyVal: '100%',
+    availability: 'የፖርታል አገልግሎት ዝግጁነት',
+    availabilityVal: '24/7',
+  },
+
+  verification: {
+    title: 'የህዝብ ማረጋገጫና ክትትል',
+    subtitle: 'በኢትዮጵያ ማሪታይም ባለስልጣን የተሰጠ ማንኛውንም ምስክር ወረቀት፣ ፈቃድ ወይም የማመልከቻ ሁኔታ ያረጋግጡ።',
+    tabCertificate: 'የምስክር ወረቀት / CoC ማረጋገጫ',
+    tabApplication: 'የማመልከቻ ሁኔታ',
+    certPlaceholder: 'የምስክር ወረቀት ቁጥር ያስገቡ (ምሳሌ፡ COC-2026-8891)',
+    appPlaceholder: 'የማመልከቻ መለያ ያስገቡ (ምሳሌ፡ APP-2026-4412)',
+    verifyBtn: 'አሁን ያረጋግጡ',
+    disclaimer: 'በኢትዮጵያ ማሪታይም ባለስልጣን ማዕከላዊ መዝገብ የተደገፈ ይፋዊ የማረጋገጫ ስርዓት።',
+    sampleSuccessCert: 'ምስክር ወረቀቱ ተረጋገጠ — በEMA የተሰጠ ህጋዊ የመርከበኛ CoC።',
+    sampleSuccessApp: 'ማመልከቻው ተገኝቷል — ሁኔታ፡ በቴክኒክ ግምገማ ላይ።',
   },
 
   quickAccess: {
@@ -373,5 +433,13 @@ export const landingAm: LandingCopy = {
 
   footer: {
     rights: 'ሁሉም መብቶች የተጠበቁ ናቸው።',
+    tagline: 'የኢትዮጵያን የባህር እና የሎጂስቲክስ መሠረተ ልማት ማሳደግ።',
+    quickLinks: 'ፈጣን ማያያዣዎች',
+    servicesHeading: 'ዋና አገልግሎቶች',
+    contactHeading: 'ግንኙነትና ድጋፍ',
+    hoursLabel: 'የስራ ሰዓት',
+    hoursValue: 'ሰኞ – አርብ፡ ከጠዋቱ 2:30 – ከሰዓት 11:30 (የምስራቅ አፍሪካ ሰዓት)',
+    emergencyLabel: 'የአደጋ ጊዜ የባህር መስመር',
+    emergencyValue: '+251 11 551 0000',
   },
 };
diff --git a/libs/ui/src/lib/landing/landing.css b/libs/ui/src/lib/landing/landing.css
index 8720f9d46..f274ee079 100644
--- a/libs/ui/src/lib/landing/landing.css
+++ b/libs/ui/src/lib/landing/landing.css
@@ -33,12 +33,81 @@ html:has(.ema-landing) {
 
 .ema-landing .ema-landing-hover {
   transition:
-    transform 160ms ease,
-    box-shadow 160ms ease,
-    border-color 160ms ease;
+    transform 180ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
+    border-color 180ms ease;
 }
 .ema-landing .ema-landing-hover:hover {
-  transform: translateY(-3px);
+  transform: translateY(-4px);
+  box-shadow: var(--mantine-shadow-md);
+  border-color: var(--mantine-primary-color-light-color);
+}
+
+/* Card top accent gradient bar */
+.ema-landing .ema-landing-card-accent {
+  position: relative;
+  overflow: hidden;
+}
+.ema-landing .ema-landing-card-accent::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #3160b7 0%, #1fc29d 100%);
+  opacity: 0.85;
+  transition: opacity 180ms ease;
+}
+.ema-landing .ema-landing-card-accent:hover::before {
+  opacity: 1;
+}
+
+/* Stats counter card background glassmorphism */
+.ema-landing .ema-stats-banner {
+  background: linear-gradient(135deg, rgba(49, 96, 183, 0.04) 0%, rgba(31, 194, 157, 0.07) 100%);
+  border-top: 1px solid var(--mantine-color-default-border);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+/* Hero floating animation */
+.ema-hero-pulse {
+  animation: ema-hero-float 8s ease-in-out infinite alternate;
+}
+
+@keyframes ema-hero-float {
+  0% {
+    transform: translateY(0px) scale(1);
+  }
+  100% {
+    transform: translateY(-12px) scale(1.03);
+  }
+}
+
+/* Verification tab search box focus ring */
+.ema-verification-box {
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
+  transition: box-shadow 200ms ease;
+}
+.ema-verification-box:focus-within {
+  box-shadow: 0 16px 40px rgba(49, 96, 183, 0.14);
+}
+
+/* Mobile drawer link item */
+.ema-drawer-nav-link {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+  color: var(--mantine-color-text);
+  text-decoration: none;
+  transition: background-color 140ms ease;
+}
+.ema-drawer-nav-link:hover,
+.ema-drawer-nav-link[aria-current='true'] {
+  background-color: var(--mantine-color-default-hover);
+  color: var(--mantine-primary-color-filled);
 }
 
 /* Amharic runs 20-40% longer than English and falls back to a different font
@@ -52,7 +121,8 @@ html:has(.ema-landing) {
     scroll-behavior: auto;
   }
   .ema-landing .ema-landing-fade,
-  .ema-landing .ema-landing-hover {
+  .ema-landing .ema-landing-hover,
+  .ema-hero-pulse {
     animation: none;
     transition: none;
   }

From 57682188de28dd34bb7bd088794b1bc246735089 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:33:14 +0300
Subject: [PATCH 06/58] UI improvments on landing page

---
 libs/ui/src/lib/landing/LandingPage.tsx | 509 ++++++++++++++++++------
 libs/ui/src/lib/landing/landing-copy.ts | 314 +++++++++++----
 libs/ui/src/lib/landing/landing.css     | 104 ++++-
 3 files changed, 718 insertions(+), 209 deletions(-)

diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx
index 903c88adc..cdafc626d 100644
--- a/libs/ui/src/lib/landing/LandingPage.tsx
+++ b/libs/ui/src/lib/landing/LandingPage.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   Accordion,
+  Alert,
   Anchor,
   Badge,
   Box,
@@ -13,11 +14,12 @@ import {
   Drawer,
   Group,
   Paper,
+  Select,
   SimpleGrid,
   Stack,
-  Tabs,
   Text,
   TextInput,
+  Textarea,
   ThemeIcon,
   Title,
   useMantineTheme,
@@ -25,21 +27,30 @@ import {
 import {
   IconActivity,
   IconAnchor,
+  IconArrowRight,
   IconAward,
   IconBriefcase,
   IconCertificate,
   IconCheck,
   IconClipboardCheck,
   IconClock,
+  IconCoin,
+  IconCompass,
+  IconExternalLink,
+  IconFileCheck,
   IconGavel,
+  IconGlobe,
+  IconHelpCircle,
   IconLanguage,
   IconMail,
   IconMapPin,
+  IconMessage,
   IconPhone,
   IconSchool,
-  IconSearch,
+  IconSend,
   IconShip,
   IconShieldCheck,
+  IconTarget,
   IconUserCheck,
   IconUserCircle,
   IconUsers,
@@ -99,6 +110,29 @@ export function LandingPage({
   const { t } = useTranslation();
   const isAuthed = primaryHref !== '/login';
 
+  useEffect(() => {
+    const handleAnchorClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const anchor = target.closest<HTMLAnchorElement>('a[href^="#"]');
+      if (!anchor) return;
+      const href = anchor.getAttribute('href');
+      if (!href || href === '#') return;
+
+      const targetEl = document.querySelector(href);
+      if (targetEl) {
+        e.preventDefault();
+        targetEl.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+        window.history.pushState(null, '', href);
+      }
+    };
+
+    document.addEventListener('click', handleAnchorClick);
+    return () => document.removeEventListener('click', handleAnchorClick);
+  }, []);
+
   return (
     <Box className="ema-landing" style={{ minHeight: '100dvh', background: 'var(--mantine-color-body)' }}>
       <Anchor
@@ -135,6 +169,7 @@ export function LandingPage({
         <Hero primaryHref={primaryHref} signupHref={signupHref} isAuthed={isAuthed} />
         <StatsBanner />
         <About />
+        <InstitutionalMandate />
         <Services />
         <Roles />
         <HowItWorks />
@@ -424,9 +459,18 @@ function Hero({
 
       <Container size="xl" py={{ base: 88, sm: 120, lg: 148 }} pos="relative">
         <Stack gap="lg" align="center" ta="center" className="ema-landing-fade">
-          <Badge size="lg" variant="light" color="white" radius="xl" style={{ textTransform: 'none', fontWeight: 600 }}>
-            {t('landing.hero.eyebrow')}
+          {/* Floating live status pill */}
+          <Badge
+            size="lg"
+            variant="light"
+            color="white"
+            radius="xl"
+            leftSection={<span className="ema-live-dot" style={{ marginRight: 4 }} />}
+            style={{ textTransform: 'none', fontWeight: 600, backdropFilter: 'blur(6px)' }}
+          >
+            {t('landing.hero.livePill')}
           </Badge>
+
           <Title order={1} fz={{ base: 34, sm: 48, lg: 56 }} lh={1.1} maw={860}>
             {t('landing.hero.title')}
           </Title>
@@ -457,7 +501,7 @@ function Hero({
               variant="outline"
               color="white"
               leftSection={<IconBriefcase size={20} />}
-              style={{ backdropFilter: 'blur(4px)', backgroundColor: 'rgba(255,255,255,0.1)' }}
+              style={{ backdropFilter: 'blur(8px)', backgroundColor: 'rgba(255,255,255,0.12)' }}
             >
               {t('landing.cta.exploreServices')}
             </Button>
@@ -503,10 +547,10 @@ function StatsBanner() {
         <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="lg">
           <Stack gap={2} align="center" ta="center">
             <Group gap={6} align="center">
-              <ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
-                <IconUsers size={16} />
+              <ThemeIcon size={36} radius="xl" variant="light" color="emaPrimary">
+                <IconUsers size={18} />
               </ThemeIcon>
-              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+              <Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
                 {t('landing.stats.seafarersVal')}
               </Text>
             </Group>
@@ -517,10 +561,10 @@ function StatsBanner() {
 
           <Stack gap={2} align="center" ta="center">
             <Group gap={6} align="center">
-              <ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
-                <IconShip size={16} />
+              <ThemeIcon size={36} radius="xl" variant="light" color="emaTeal">
+                <IconShip size={18} />
               </ThemeIcon>
-              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+              <Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
                 {t('landing.stats.vesselsVal')}
               </Text>
             </Group>
@@ -531,10 +575,10 @@ function StatsBanner() {
 
           <Stack gap={2} align="center" ta="center">
             <Group gap={6} align="center">
-              <ThemeIcon size={32} radius="xl" variant="light" color="emaPrimary">
-                <IconShieldCheck size={16} />
+              <ThemeIcon size={36} radius="xl" variant="light" color="emaPrimary">
+                <IconShieldCheck size={18} />
               </ThemeIcon>
-              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+              <Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
                 {t('landing.stats.efficiencyVal')}
               </Text>
             </Group>
@@ -545,10 +589,10 @@ function StatsBanner() {
 
           <Stack gap={2} align="center" ta="center">
             <Group gap={6} align="center">
-              <ThemeIcon size={32} radius="xl" variant="light" color="emaTeal">
-                <IconClock size={16} />
+              <ThemeIcon size={36} radius="xl" variant="light" color="emaTeal">
+                <IconClock size={18} />
               </ThemeIcon>
-              <Text fz={{ base: 24, sm: 30 }} fw={800} c="var(--mantine-primary-color-filled)">
+              <Text fz={{ base: 26, sm: 32 }} fw={800} className="ema-text-gradient">
                 {t('landing.stats.availabilityVal')}
               </Text>
             </Group>
@@ -569,7 +613,7 @@ function SectionHeading({ title, subtitle }: { title: string; subtitle?: string
         {title}
       </Title>
       {subtitle && (
-        <Text c="dimmed" fz="md">
+        <Text c="dimmed" fz="md" fw={500}>
           {subtitle}
         </Text>
       )}
@@ -582,22 +626,37 @@ function About() {
   return (
     <Box id="about" component="section" py={72}>
       <Container size="xl">
-        <SectionHeading title={t('landing.about.title')} />
+        <SectionHeading title={t('landing.about.title')} subtitle={t('landing.about.eyebrow')} />
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xl">
-          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
-            <Stack gap="xs">
-              <Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
-                {t('landing.about.visionLabel')}
+          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-vision-card">
+            <Stack gap="sm">
+              <Group gap="xs">
+                <ThemeIcon size={32} radius="md" variant="light" color="emaPrimary">
+                  <IconCompass size={18} />
+                </ThemeIcon>
+                <Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.8 }}>
+                  {t('landing.about.visionLabel')}
+                </Text>
+              </Group>
+              <Text fz="sm" style={{ lineHeight: 1.6 }}>
+                {t('landing.about.vision')}
               </Text>
-              <Text>{t('landing.about.vision')}</Text>
             </Stack>
           </Paper>
-          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-landing-card-accent">
-            <Stack gap="xs">
-              <Text fw={700} c="var(--mantine-primary-color-filled)" tt="uppercase" fz="xs" style={{ letterSpacing: 0.5 }}>
-                {t('landing.about.missionLabel')}
+
+          <Paper withBorder radius="lg" p="xl" className="ema-landing-hover ema-mission-card">
+            <Stack gap="sm">
+              <Group gap="xs">
+                <ThemeIcon size={32} radius="md" variant="light" color="emaTeal">
+                  <IconTarget size={18} />
+                </ThemeIcon>
+                <Text fw={700} c="#009879" tt="uppercase" fz="xs" style={{ letterSpacing: 0.8 }}>
+                  {t('landing.about.missionLabel')}
+                </Text>
+              </Group>
+              <Text fz="sm" style={{ lineHeight: 1.6 }}>
+                {t('landing.about.mission')}
               </Text>
-              <Text>{t('landing.about.mission')}</Text>
             </Stack>
           </Paper>
         </SimpleGrid>
@@ -606,21 +665,61 @@ function About() {
   );
 }
 
+const MANDATE_ICONS = {
+  safety: { icon: IconShieldCheck, color: 'blue' },
+  logistics: { icon: IconShip, color: 'emaTeal' },
+  stcw: { icon: IconSchool, color: 'emaPrimary' },
+  flagState: { icon: IconAnchor, color: 'indigo' },
+} as const;
 
+function InstitutionalMandate() {
+  const { t } = useTranslation();
+  const items = Object.keys(MANDATE_ICONS) as (keyof typeof MANDATE_ICONS)[];
+  return (
+    <Box id="mandate" component="section" py={72}>
+      <Container size="xl">
+        <SectionHeading title={t('landing.mandate.title')} subtitle={t('landing.mandate.subtitle')} />
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
+          {items.map((key) => {
+            const { icon: Icon, color } = MANDATE_ICONS[key];
+            return (
+              <Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
+                <Stack gap="sm" align="flex-start" justify="space-between" h="100%">
+                  <Stack gap="xs">
+                    <ThemeIcon size={44} radius="lg" variant="light" color={color}>
+                      <Icon size={22} />
+                    </ThemeIcon>
+                    <Text fw={700} fz="md">
+                      {t(`landing.mandate.items.${key}.title`)}
+                    </Text>
+                    <Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
+                      {t(`landing.mandate.items.${key}.description`)}
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Paper>
+            );
+          })}
+        </SimpleGrid>
+      </Container>
+    </Box>
+  );
+}
 
 const SERVICE_ICONS = {
   seafarerRegistration: IconUserCheck,
   vesselRegistration: IconShip,
   licensing: IconBriefcase,
   examinations: IconSchool,
-  waivers: IconShieldCheck,
+  medical: IconActivity,
+  waivers: IconGavel,
 } as const;
 
 function Services() {
   const { t } = useTranslation();
   const items = Object.keys(SERVICE_ICONS) as (keyof typeof SERVICE_ICONS)[];
   return (
-    <Box id="services" component="section" py={72}>
+    <Box id="services" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
       <Container size="xl">
         <SectionHeading title={t('landing.services.title')} subtitle={t('landing.services.subtitle')} />
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
@@ -628,14 +727,24 @@ function Services() {
             const Icon = SERVICE_ICONS[key];
             return (
               <Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
-                <Stack gap="sm">
-                  <ThemeIcon size={44} radius="md" variant="light">
-                    <Icon size={22} />
-                  </ThemeIcon>
-                  <Text fw={600}>{t(`landing.services.items.${key}.title`)}</Text>
-                  <Text c="dimmed" fz="sm">
-                    {t(`landing.services.items.${key}.description`)}
-                  </Text>
+                <Stack gap="sm" justify="space-between" h="100%">
+                  <Stack gap="xs">
+                    <ThemeIcon size={44} radius="md" variant="light" color="emaPrimary">
+                      <Icon size={22} />
+                    </ThemeIcon>
+                    <Text fw={700} fz="md">
+                      {t(`landing.services.items.${key}.title`)}
+                    </Text>
+                    <Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
+                      {t(`landing.services.items.${key}.description`)}
+                    </Text>
+                  </Stack>
+                  <Group justify="space-between" align="center" mt="xs" pt="xs" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+                    <Text fz="xs" fw={600} c="var(--mantine-primary-color-filled)">
+                      {t('landing.cta.exploreServices')}
+                    </Text>
+                    <IconArrowRight size={16} className="ema-card-arrow" />
+                  </Group>
                 </Stack>
               </Paper>
             );
@@ -647,26 +756,26 @@ function Services() {
 }
 
 const ROLE_ICONS = {
-  seafarers: IconShip,
-  vesselOwners: IconAnchor,
-  agents: IconBriefcase,
-  reviewers: IconGavel,
+  seafarers: { icon: IconShip, color: 'emaTeal' },
+  vesselOwners: { icon: IconAnchor, color: 'emaPrimary' },
+  agents: { icon: IconBriefcase, color: 'indigo' },
+  reviewers: { icon: IconGavel, color: 'yellow' },
 } as const;
 
 function Roles() {
   const { t } = useTranslation();
   const items = Object.keys(ROLE_ICONS) as (keyof typeof ROLE_ICONS)[];
   return (
-    <Box id="roles" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
+    <Box id="roles" component="section" py={72}>
       <Container size="xl">
         <SectionHeading title={t('landing.roles.title')} subtitle={t('landing.roles.subtitle')} />
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
           {items.map((key) => {
-            const Icon = ROLE_ICONS[key];
+            const { icon: Icon, color } = ROLE_ICONS[key];
             return (
               <Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
                 <Stack gap="sm" align="center">
-                  <ThemeIcon size={48} radius="xl" variant="light">
+                  <ThemeIcon size={48} radius="xl" variant="light" color={color}>
                     <Icon size={24} />
                   </ThemeIcon>
                   <Text fw={600}>{t(`landing.roles.${key}.title`)}</Text>
@@ -683,30 +792,35 @@ function Roles() {
   );
 }
 
-const STEP_KEYS = ['selectRole', 'createAccount', 'submitApplication', 'trackStatus', 'receiveApproval'] as const;
-const STEP_ICONS = [IconUsers, IconUserCheck, IconClipboardCheck, IconAward, IconCertificate];
+const STEP_KEYS = ['createAccount', 'submitApplication', 'fulfillRequirements', 'payFees', 'receiveCertificate'] as const;
+const STEP_ICONS = [IconUserCheck, IconClipboardCheck, IconActivity, IconCoin, IconCertificate];
 
 function HowItWorks() {
   const { t } = useTranslation();
   return (
-    <Box id="how-it-works" component="section" py={72}>
+    <Box id="how-it-works" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
       <Container size="xl">
         <SectionHeading title={t('landing.howItWorks.title')} subtitle={t('landing.howItWorks.subtitle')} />
-        <SimpleGrid cols={{ base: 1, sm: 3, md: 5 }} spacing="lg">
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }} spacing="lg">
           {STEP_KEYS.map((key, i) => {
             const Icon = STEP_ICONS[i];
             return (
-              <Paper key={key} withBorder radius="lg" p="md" className="ema-landing-hover ema-landing-card-accent" ta="center">
-                <Stack gap="xs" align="center">
-                  <Badge size="xs" variant="filled" radius="xl" color="emaPrimary">
-                    Step 0{i + 1}
-                  </Badge>
-                  <ThemeIcon size={44} radius="xl" variant="filled" color="var(--mantine-primary-color-filled)">
-                    <Icon size={22} />
-                  </ThemeIcon>
-                  <Text fw={600} fz="sm">
-                    {t(`landing.howItWorks.steps.${key}`)}
-                  </Text>
+              <Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent" ta="center">
+                <Stack gap="xs" align="center" justify="space-between" h="100%">
+                  <Stack gap="xs" align="center">
+                    <Badge size="xs" variant="filled" radius="xl" color="emaPrimary">
+                      Step 0{i + 1}
+                    </Badge>
+                    <ThemeIcon size={48} radius="xl" variant="light" color="emaPrimary">
+                      <Icon size={24} />
+                    </ThemeIcon>
+                    <Text fw={700} fz="sm">
+                      {t(`landing.howItWorks.steps.${key}.title`)}
+                    </Text>
+                    <Text c="dimmed" fz="xs" style={{ lineHeight: 1.5 }}>
+                      {t(`landing.howItWorks.steps.${key}.description`)}
+                    </Text>
+                  </Stack>
                 </Stack>
               </Paper>
             );
@@ -722,26 +836,30 @@ const SYSTEM_ICONS = {
   bilingual: IconLanguage,
   tracking: IconActivity,
   singleAccount: IconUserCircle,
+  payments: IconCoin,
+  framework: IconClipboardCheck,
 } as const;
 
 function SystemHighlights() {
   const { t } = useTranslation();
   const items = Object.keys(SYSTEM_ICONS) as (keyof typeof SYSTEM_ICONS)[];
   return (
-    <Box id="system" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
+    <Box id="system" component="section" py={72}>
       <Container size="xl">
         <SectionHeading title={t('landing.system.title')} subtitle={t('landing.system.subtitle')} />
-        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
           {items.map((key) => {
             const Icon = SYSTEM_ICONS[key];
             return (
-              <Paper key={key} withBorder radius="lg" p="lg" ta="center" className="ema-landing-hover ema-landing-card-accent">
-                <Stack gap="sm" align="center">
-                  <ThemeIcon size={48} radius="xl" variant="light">
-                    <Icon size={24} />
+              <Paper key={key} withBorder radius="lg" p="lg" className="ema-landing-hover ema-landing-card-accent">
+                <Stack gap="sm" align="flex-start">
+                  <ThemeIcon size={44} radius="xl" variant="light" color="emaPrimary">
+                    <Icon size={22} />
                   </ThemeIcon>
-                  <Text fw={600}>{t(`landing.system.items.${key}.title`)}</Text>
-                  <Text c="dimmed" fz="sm">
+                  <Text fw={700} fz="md">
+                    {t(`landing.system.items.${key}.title`)}
+                  </Text>
+                  <Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
                     {t(`landing.system.items.${key}.description`)}
                   </Text>
                 </Stack>
@@ -755,21 +873,100 @@ function SystemHighlights() {
 }
 
 const FAQ_KEYS = ['whatIsPortal', 'whoCanUse', 'howToApply', 'isFree'] as const;
+const FAQ_ICONS = {
+  whatIsPortal: IconHelpCircle,
+  whoCanUse: IconUsers,
+  howToApply: IconFileCheck,
+  isFree: IconCoin,
+} as const;
 
 function Faq() {
   const { t } = useTranslation();
   return (
-    <Box component="section" py={72}>
-      <Container size="sm">
-        <SectionHeading title={t('landing.faq.title')} />
-        <Accordion variant="separated" radius="lg">
-          {FAQ_KEYS.map((key) => (
-            <Accordion.Item key={key} value={key}>
-              <Accordion.Control>{t(`landing.faq.items.${key}.question`)}</Accordion.Control>
-              <Accordion.Panel>{t(`landing.faq.items.${key}.answer`)}</Accordion.Panel>
-            </Accordion.Item>
-          ))}
-        </Accordion>
+    <Box id="faq" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
+      <Container size="xl">
+        <SectionHeading title={t('landing.faq.title')} subtitle={t('landing.faq.eyebrow')} />
+        <SimpleGrid cols={{ base: 1, md: 12 }} spacing="xl">
+          {/* Left Column: Direct Support Box */}
+          <Paper
+            component={Stack}
+            gap="md"
+            p="xl"
+            radius="lg"
+            withBorder
+            style={{ gridColumn: 'span 4' }}
+            className="ema-landing-hover ema-contact-hq-card"
+          >
+            <ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
+              <IconHelpCircle size={24} />
+            </ThemeIcon>
+
+            <Stack gap={4}>
+              <Text fw={700} fz="lg">
+                {t('landing.faq.eyebrow')}
+              </Text>
+              <Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
+                {t('landing.faq.supportPrompt')}
+              </Text>
+            </Stack>
+
+            <Button
+              component="a"
+              href="#contact"
+              variant="filled"
+              color="emaPrimary"
+              leftSection={<IconMessage size={18} />}
+              radius="md"
+            >
+              {t('landing.faq.contactSupport')}
+            </Button>
+
+            <Divider my={4} />
+
+            <Group gap="xs" align="center">
+              <ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
+                <IconPhone size={14} />
+              </ThemeIcon>
+              <Stack gap={0}>
+                <Text fz="xs" fw={700}>
+                  {t('landing.footer.emergencyLabel')}
+                </Text>
+                <Text fz="xs" c="dimmed" fw={600}>
+                  {t('landing.footer.emergencyValue')}
+                </Text>
+              </Stack>
+            </Group>
+          </Paper>
+
+          {/* Right Column: Accordion Cards */}
+          <Box style={{ gridColumn: 'span 8' }}>
+            <Accordion variant="separated" radius="lg" className="ema-faq-accordion">
+              {FAQ_KEYS.map((key) => {
+                const Icon = FAQ_ICONS[key];
+                return (
+                  <Accordion.Item key={key} value={key}>
+                    <Accordion.Control
+                      icon={
+                        <ThemeIcon size={32} radius="md" variant="light" color="emaPrimary">
+                          <Icon size={18} />
+                        </ThemeIcon>
+                      }
+                    >
+                      <Text fw={600} fz="md">
+                        {t(`landing.faq.items.${key}.question`)}
+                      </Text>
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                      <Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }} pl={42}>
+                        {t(`landing.faq.items.${key}.answer`)}
+                      </Text>
+                    </Accordion.Panel>
+                  </Accordion.Item>
+                );
+              })}
+            </Accordion>
+          </Box>
+        </SimpleGrid>
       </Container>
     </Box>
   );
@@ -777,53 +974,137 @@ function Faq() {
 
 function Contact() {
   const { t } = useTranslation();
+
   return (
-    <Box id="contact" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
+    <Box id="contact" component="section" py={72}>
       <Container size="xl">
         <SectionHeading title={t('landing.contact.title')} subtitle={t('landing.contact.subtitle')} />
-        <Paper withBorder radius="lg" p="xl" maw={560} mx="auto" component="address" style={{ fontStyle: 'normal' }}>
-          <Stack gap="lg">
-            <Group gap="md" wrap="nowrap" align="flex-start">
-              <ThemeIcon size={38} radius="md" variant="light">
-                <IconMapPin size={18} />
+
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" maw={1080} mx="auto">
+          {/* Address Card */}
+          <Paper
+            withBorder
+            radius="lg"
+            p="xl"
+            className="ema-landing-hover ema-contact-hq-card"
+            style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
+          >
+            <Stack gap="md">
+              <ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
+                <IconMapPin size={24} />
               </ThemeIcon>
-              <Stack gap={2}>
-                <Text fw={600} fz="sm">
+              <Stack gap={4}>
+                <Text fw={700} fz="sm">
                   {t('landing.contact.addressLabel')}
                 </Text>
-                <Text c="dimmed" fz="sm">
+                <Text c="dimmed" fz="sm" style={{ lineHeight: 1.6 }}>
                   {t('landing.contact.address')}
                 </Text>
               </Stack>
-            </Group>
-            <Group gap="md" wrap="nowrap" align="flex-start">
-              <ThemeIcon size={38} radius="md" variant="light">
-                <IconPhone size={18} />
+            </Stack>
+            <Button
+              component="a"
+              href="https://maps.google.com/?q=Sunshine+Building+Addis+Ababa"
+              target="_blank"
+              rel="noreferrer"
+              variant="light"
+              color="emaPrimary"
+              size="xs"
+              leftSection={<IconExternalLink size={14} />}
+              w="fit-content"
+              mt="lg"
+            >
+              {t('landing.contact.getDirections')}
+            </Button>
+          </Paper>
+
+          {/* Direct Phone & Website Card */}
+          <Paper
+            withBorder
+            radius="lg"
+            p="xl"
+            className="ema-landing-hover"
+            style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
+          >
+            <Stack gap="md">
+              <Group gap="sm" align="center" wrap="nowrap">
+                <ThemeIcon size={38} radius="md" variant="light" color="emaTeal">
+                  <IconPhone size={18} />
+                </ThemeIcon>
+                <Stack gap={2}>
+                  <Text fw={600} fz="xs" c="dimmed">
+                    {t('landing.contact.phoneLabel')}
+                  </Text>
+                  <Anchor href="tel:+251115150299" fw={700} fz="sm">
+                    +251 011 515 0299
+                  </Anchor>
+                </Stack>
+              </Group>
+
+              <Divider />
+
+              <Group gap="sm" align="center" wrap="nowrap">
+                <ThemeIcon size={38} radius="md" variant="light" color="emaPrimary">
+                  <IconGlobe size={18} />
+                </ThemeIcon>
+                <Stack gap={2}>
+                  <Text fw={600} fz="xs" c="dimmed">
+                    {t('landing.contact.websiteLabel')}
+                  </Text>
+                  <Anchor href="https://etmaritime.com" target="_blank" rel="noreferrer" fw={700} fz="sm">
+                    etmaritime.com
+                  </Anchor>
+                </Stack>
+              </Group>
+
+              <Divider />
+
+              <Group gap="sm" align="center" wrap="nowrap">
+                <ThemeIcon size={38} radius="md" variant="light" color="emaTeal">
+                  <IconClock size={18} />
+                </ThemeIcon>
+                <Stack gap={2}>
+                  <Text fw={600} fz="xs" c="dimmed">
+                    {t('landing.footer.hoursLabel')}
+                  </Text>
+                  <Text fz="xs" fw={600}>
+                    {t('landing.footer.hoursValue')}
+                  </Text>
+                </Stack>
+              </Group>
+            </Stack>
+          </Paper>
+
+          {/* Emergency Hotline Banner */}
+          <Paper
+            radius="lg"
+            p="xl"
+            style={{
+              background: 'linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%)',
+              color: '#ffffff',
+              display: 'flex',
+              flexDirection: 'column',
+              justify: 'center',
+            }}
+          >
+            <Stack gap="md" align="flex-start">
+              <ThemeIcon size={48} radius="xl" color="white" variant="white" c="blue.9">
+                <IconShieldCheck size={26} />
               </ThemeIcon>
-              <Stack gap={2}>
-                <Text fw={600} fz="sm">
-                  {t('landing.contact.phoneLabel')}
+              <Stack gap={4}>
+                <Text fz="xs" fw={700} tt="uppercase" style={{ letterSpacing: 0.5, opacity: 0.9 }}>
+                  {t('landing.footer.emergencyLabel')}
                 </Text>
-                <Anchor href="tel:+251115150299" fz="sm">
-                  +251 011 515 0299
-                </Anchor>
-              </Stack>
-            </Group>
-            <Group gap="md" wrap="nowrap" align="flex-start">
-              <ThemeIcon size={38} radius="md" variant="light">
-                <IconMail size={18} />
-              </ThemeIcon>
-              <Stack gap={2}>
-                <Text fw={600} fz="sm">
-                  {t('landing.contact.websiteLabel')}
+                <Text fz="xl" fw={800}>
+                  {t('landing.footer.emergencyValue')}
+                </Text>
+                <Text fz="xs" style={{ opacity: 0.85, lineHeight: 1.5 }}>
+                  24/7 Operational assistance for maritime safety, vessel incidents, and urgent operational support.
                 </Text>
-                <Anchor href="https://etmaritime.com" target="_blank" rel="noreferrer" fz="sm">
-                  etmaritime.com
-                </Anchor>
               </Stack>
-            </Group>
-          </Stack>
-        </Paper>
+            </Stack>
+          </Paper>
+        </SimpleGrid>
       </Container>
     </Box>
   );
diff --git a/libs/ui/src/lib/landing/landing-copy.ts b/libs/ui/src/lib/landing/landing-copy.ts
index 6a65647d7..b344af7ea 100644
--- a/libs/ui/src/lib/landing/landing-copy.ts
+++ b/libs/ui/src/lib/landing/landing-copy.ts
@@ -28,6 +28,7 @@ export const landingEn = {
   },
 
   hero: {
+    livePill: 'Official Digital Portal — FDRE',
     eyebrow: 'Federal Democratic Republic of Ethiopia',
     title: 'Ethiopian Maritime Authority',
     subtitle: 'Digital Maritime Services for Seafarers, Vessel Owners and Logistics Operators',
@@ -41,6 +42,7 @@ export const landingEn = {
   },
 
   about: {
+    eyebrow: 'Institutional Framework',
     title: 'About EMA',
     visionLabel: 'Vision',
     vision:
@@ -94,93 +96,146 @@ export const landingEn = {
   },
 
   services: {
-    title: 'Maritime Services',
-    subtitle: 'Every licence, certificate and registration EMA issues, in one digital system.',
+    title: 'Comprehensive Maritime & Logistics Services',
+    subtitle: 'Every statutory licence, seafarer certificate, vessel registration, and logistics permit issued by EMA in one unified platform.',
     items: {
       seafarerRegistration: {
-        title: 'Seafarer Registration & Certification',
+        title: 'Seafarer Certification & Seaman’s Book',
         description:
-          "Register as a seafarer, apply for a Certificate of Competency or Proficiency, and manage your seaman's book online.",
+          "Apply for Continuous Discharge Certificates (CDC/Seaman's Book), STCW Certificates of Competency (CoC), Proficiency (CoP), and foreign CoC endorsements.",
       },
       vesselRegistration: {
-        title: 'Vessel Registration',
+        title: 'Vessel Registration & Flag State Registry',
         description:
-          'Register inland or sea-going vessels and manage ownership transfers with full document tracking.',
+          'Inland waterway and sea-going ship registration, ownership transfers, tonnage measurement, safety survey inspection, and marine radio licensing.',
       },
       licensing: {
-        title: 'Operator Licensing',
+        title: 'Commercial Logistics & Operator Licensing',
         description:
-          'Apply for freight forwarder, shipping agent, combined and multimodal transport operator licences.',
+          'Licensing for Multimodal Transport Operators (MTO), Freight Forwarders, Shipping Agencies, Customs Clearance Brokers, and Terminal Operators.',
       },
       examinations: {
-        title: 'Examinations',
-        description: 'Sit competency examinations and track your results as part of certification.',
+        title: 'Maritime Competency Examinations',
+        description: 'Schedule computer-based competency exams, track examination results, and link qualified scores directly to certificate issuance.',
+      },
+      medical: {
+        title: 'Maritime Medical Examination Verification',
+        description: 'Approved Maritime Medical Practitioner portal for medical fitness certificates, sea-service health clearances, and STCW compliance.',
       },
       waivers: {
-        title: 'Waivers',
-        description: 'Apply for a maritime waiver where standard requirements do not apply.',
+        title: 'Cargo Waiver & Cargo Tracking Notes (CTN)',
+        description: 'Apply for cargo allocation clearances, maritime waivers, and cargo tracking notes across international trade corridors.',
+      },
+    },
+  },
+
+  mandate: {
+    title: 'Institutional Mandate & Regulatory Oversight',
+    subtitle: 'Under the Ministry of Transport & Logistics (FDRE), EMA drives maritime safety, logistics efficiency, and international compliance.',
+    items: {
+      safety: {
+        title: 'Maritime Safety & Security',
+        description: 'Enforcing SOLAS, MARPOL, and ISPS standards for vessel safety, marine environment protection, and shipboard security.',
+      },
+      logistics: {
+        title: 'Multimodal Logistics Development',
+        description: 'Regulating Ethiopia’s dry ports, sea-land transit corridors, freight forwarding standards, and multimodal trade infrastructure.',
+      },
+      stcw: {
+        title: 'STCW Training & Certification Standards',
+        description: 'Accrediting maritime education institutions, administering national qualification frameworks, and issuing international seafarer credentials.',
+      },
+      flagState: {
+        title: 'Flag State & Port State Inspection',
+        description: 'Conducting flag state registration, seaworthiness inspections, vessel safety surveys, and port state control oversight.',
       },
     },
   },
 
   roles: {
-    title: 'Built for Every User',
-    subtitle: 'One portal, tailored to what you do.',
+    title: 'Built for Every User & Maritime Entity',
+    subtitle: 'One digital portal tailored to your operational role in Ethiopia’s maritime sector.',
     seafarers: {
-      title: 'Seafarers',
-      description: 'Register, certify, and manage your sea service records.',
+      title: 'Seafarers & Maritime Officers',
+      description: 'Register, apply for CDC/CoC certificates, schedule STCW exams, and track sea service records.',
     },
     vesselOwners: {
-      title: 'Vessel Owners',
-      description: 'Register vessels and manage ownership and licensing.',
+      title: 'Vessel Owners & Operators',
+      description: 'Register commercial & inland vessels, request tonnage surveys, and manage fleet licenses.',
     },
     agents: {
-      title: 'Agents & Logistics Operators',
-      description: 'Apply for and renew operator licences for freight and shipping.',
+      title: 'Logistics Operators & Shipping Agencies',
+      description: 'Apply for MTO, freight forwarding, customs clearance, and shipping agent licenses.',
     },
     reviewers: {
-      title: 'EMA Reviewers',
-      description: 'Review, verify and approve applications from the backoffice.',
+      title: 'EMA Inspectors & Regulatory Reviewers',
+      description: 'Review applications, conduct technical audits, issue digital approvals, and verify credentials.',
     },
   },
 
   howItWorks: {
     title: 'How It Works',
-    subtitle: 'From application to approval, in five steps.',
+    subtitle: 'From digital registration to official certificate issuance in five streamlined steps.',
     steps: {
-      selectRole: 'Select role',
-      createAccount: 'Create account',
-      submitApplication: 'Submit application',
-      trackStatus: 'Track status',
-      receiveApproval: 'Receive approval',
+      createAccount: {
+        title: 'Create Account & Role',
+        description: 'Register with phone/email, verify via OTP, and select your operational role (Seafarer, Owner, Agent).',
+      },
+      submitApplication: {
+        title: 'Submit Digital Application',
+        description: 'Select your service (Seaman’s Book, CoC, Vessel Registration, MTO License) and upload required documents.',
+      },
+      fulfillRequirements: {
+        title: 'Medical & Examinations',
+        description: 'Complete approved maritime medical fitness checks and sit computer-based competency exams if required.',
+      },
+      payFees: {
+        title: 'Pay Statutory Fees',
+        description: 'Pay official processing fees securely via integrated e-payment channels (Telebirr, CBE Birr, e-Banking).',
+      },
+      receiveCertificate: {
+        title: 'Receive Digital Certificate',
+        description: 'Track real-time progress as EMA reviews your file, then download your QR-verifiable digital certificate or licence.',
+      },
     },
   },
 
   system: {
-    title: 'A Modern Digital System',
-    subtitle: 'Built to make maritime services faster, safer and accessible from anywhere.',
+    title: 'Advanced Digital Platform Capabilities',
+    subtitle: 'State-of-the-art infrastructure ensuring speed, security, transparency, and international compliance.',
     items: {
       secure: {
-        title: 'Secure & Verified',
-        description: 'Every application and certificate is digitally recorded and verifiable.',
+        title: 'Digital Document Vault & QR Verification',
+        description: 'All issued certificates carry encrypted QR codes and digital signatures for instant global verification by port authorities.',
       },
       bilingual: {
-        title: 'Bilingual by Design',
-        description: 'Use the system fully in English or Amharic — switch anytime.',
+        title: 'Full Amharic & English Dual Compliance',
+        description: 'Native Ethiopic (አማርኛ) and English localization providing seamless access for national seafarers and global shipping lines.',
       },
       tracking: {
-        title: 'Real-Time Tracking',
-        description: 'Follow your application from submission to approval, step by step.',
+        title: 'End-to-End Real-Time Audit Trail',
+        description: 'Track your application transparently through document verification, technical audit, fee payment, and executive sign-off.',
       },
       singleAccount: {
-        title: 'One Account, Every Service',
-        description: 'Register once and access all EMA licensing and certification services.',
+        title: 'Single Sign-On (SSO) Portal',
+        description: 'Access seafarer records, vessel registries, and commercial licenses under a unified secure digital identity.',
+      },
+      payments: {
+        title: 'Integrated Statutory e-Payment Gateway',
+        description: 'Pay statutory licensing and certification fees via Telebirr, CBE Birr, and electronic banking with automated digital receipts.',
+      },
+      framework: {
+        title: 'STCW & Multimodal Regulatory Framework',
+        description: 'Architected strictly according to IMO STCW 1978/2010 Manila Amendments, SOLAS, MARPOL, and national Proclamations.',
       },
     },
   },
 
   faq: {
+    eyebrow: 'Got Questions?',
     title: 'Frequently Asked Questions',
+    supportPrompt: 'Can’t find the answer you’re looking for? Reach out directly to our support team.',
+    contactSupport: 'Contact Support Team',
     items: {
       whatIsPortal: {
         question: 'What is the EMA portal?',
@@ -206,12 +261,27 @@ export const landingEn = {
   },
 
   contact: {
-    title: 'Contact EMA',
-    subtitle: 'Reach the Ethiopian Maritime Authority head office.',
-    addressLabel: 'Address',
+    eyebrow: 'Get In Touch',
+    title: 'Contact EMA Headquarters',
+    subtitle: 'Reach the Ethiopian Maritime Authority head office in Addis Ababa or send a direct inquiry.',
+    addressLabel: 'Head Office Address',
     address: 'Meskel Square, behind Hyatt Regency Hotel, Sunshine Building No. 4, Addis Ababa, Ethiopia',
-    phoneLabel: 'Phone',
-    websiteLabel: 'Website',
+    phoneLabel: 'Telephone Line',
+    websiteLabel: 'Official Portal',
+    inquiryTitle: 'Send a Direct Inquiry',
+    inquirySubtitle: 'Have a specific question regarding seafarer certification, vessel registration or licensing?',
+    nameLabel: 'Full Name',
+    namePlaceholder: 'e.g. Abebe Bikila',
+    emailLabel: 'Email Address',
+    emailPlaceholder: 'e.g. abebe@example.com',
+    topicLabel: 'Inquiry Topic',
+    topicPlaceholder: 'Select topic (Seafarer, Vessel, Licensing...)',
+    messageLabel: 'Your Message',
+    messagePlaceholder: 'Describe your query or assistance needed...',
+    sendBtn: 'Send Inquiry',
+    successMsg: 'Thank you! Your message has been successfully routed to EMA Customer Support.',
+    getDirections: 'Get Directions',
+    callOffice: 'Call HQ Office',
   },
 
   footer: {
@@ -249,6 +319,7 @@ export const landingAm: LandingCopy = {
   },
 
   hero: {
+    livePill: 'ይፋዊ ዲጂታል ፖርታል — ኢፌዴሪ',
     eyebrow: 'የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ',
     title: 'የኢትዮጵያ ማሪታይም ባለስልጣን',
     subtitle: 'ለመርከበኞች፣ ለመርከብ ባለቤቶች እና ለሎጂስቲክስ ኦፕሬተሮች የተዘጋጁ ዲጂታል የባህር አገልግሎቶች',
@@ -262,6 +333,7 @@ export const landingAm: LandingCopy = {
   },
 
   about: {
+    eyebrow: 'የተቋማዊ ማዕቀፍ',
     title: 'ስለ ባለስልጣኑ',
     visionLabel: 'ራዕይ',
     vision:
@@ -315,91 +387,146 @@ export const landingAm: LandingCopy = {
   },
 
   services: {
-    title: 'የባህር አገልግሎቶች',
-    subtitle: 'ባለስልጣኑ የሚሰጣቸው ሁሉም ፈቃድ፣ ምስክር ወረቀትና ምዝገባ በአንድ ዲጂታል ስርዓት ውስጥ።',
+    title: 'አጠቃላይ የባህር እና የሎጂስቲክስ አገልግሎቶች',
+    subtitle: 'በኢትዮጵያ ማሪታይም ባለስልጣን የሚሰጡ ሁሉም ህጋዊ ፈቃዶች፣ የመርከበኛ ምስክር ወረቀቶች፣ የመርከብ ምዝገባዎች እና የሎጂስቲክስ ፈቃዶች በአንድ ዲጂታል ፖርታል::',
     items: {
       seafarerRegistration: {
-        title: 'የመርከበኞች ምዝገባና ማረጋገጫ',
+        title: 'የመርከበኞች ማረጋገጫ እና የመርከበኛ ደብተር',
         description:
-          'እንደ መርከበኛ ይመዝገቡ፣ ለብቃት ወይም ችሎታ ማረጋገጫ ምስክር ወረቀት ያመልክቱ፣ እንዲሁም የመርከበኛ መዝገብ መጽሐፍዎን በመስመር ላይ ያስተዳድሩ።',
+          'የመርከበኛ መታወቂያ ደብተር (CDC/Seaman’s Book)፣ የSTCW የብቃት ምስክር ወረቀቶች (CoC/CoP) እና የውጭ CoC ማረጋገጫዎችን ያመልክቱ።',
       },
       vesselRegistration: {
-        title: 'የመርከብ ምዝገባ',
-        description: 'የውስጥ ውሃ ወይም የባህር ማዶ መርከቦችን ይመዝገቡ፣ የባለቤትነት ዝውውርንም ሙሉ በሙሉ በሰነድ ክትትል ያስተዳድሩ።',
+        title: 'የመርከብ ምዝገባ እና የባንዲራ መዝገብ',
+        description:
+          'የውስጥ ውሃ እና የባህር ማዶ መርከቦች ምዝገባ፣ የባለቤትነት ዝውውር፣ የቶን ልኬት፣ የደህንነት ፍተሻ እና የመርከብ ሬዲዮ ፈቃድ።',
       },
       licensing: {
-        title: 'የኦፕሬተር ፈቃድ',
-        description: 'ለጭነት አስተላላፊ፣ ለመርከብ ወኪል፣ ለተቀናጀ እና ለብዙ-ዘዴ ትራንስፖርት ኦፕሬተር ፈቃድ ያመልክቱ።',
+        title: 'የንግድ ሎጂስቲክስ እና የኦፕሬተር ፈቃድ',
+        description:
+          'ለብዙ-ዘዴ ትራንስፖርት ኦፕሬተሮች (MTO)፣ ጭነት አስተላላፊዎች፣ የመርከብ ወኪሎች፣ የጉምሩክ አስተላላፊዎች እና ተርሚናል ኦፕሬተሮች ፈቃድ።',
       },
       examinations: {
-        title: 'ፈተናዎች',
-        description: 'የብቃት ፈተናዎችን ይውሰዱ እንዲሁም ውጤቶችዎን እንደ ማረጋገጫ ሂደት አካል ይከታተሉ።',
+        title: 'የባህር ላይ የብቃት ፈተናዎች',
+        description: 'በኮምፒውተር የተደገፉ የብቃት ፈተናዎችን መርሃ ግብር ይያዙ፣ ውጤቶችን ይከታተሉ፣ እንዲሁም ውጤቶችን ከምስክር ወረቀት ጋር ያያይዙ።',
+      },
+      medical: {
+        title: 'የባህር ህክምና ፍተሻ ማረጋገጫ',
+        description: 'በተፈቀደላቸው የባህር ህክምና ባለሙያዎች የተሰጡ የጤና ብቃት ማረጋገጫዎች እና የSTCW ህክምና ማረጋገጫዎች ፖርታል።',
       },
       waivers: {
-        title: 'ነፃ ፈቃዶች',
-        description: 'መደበኛ መስፈርቶች በማይሟሉበት ጊዜ ለባህር ትራንስፖርት ነፃ ፈቃድ ያመልክቱ።',
+        title: 'የጭነት ነፃ ፈቃድ እና የጭነት ክትትል (CTN)',
+        description: 'በአለም አቀፍ የንግድ መስመሮች ላይ የጭነት ድልድል ነፃ ፈቃድ እና የጭነት ክትትል ሰነዶችን (CTN) ያመልክቱ።',
+      },
+    },
+  },
+
+  mandate: {
+    title: 'የተቋሙ ሃላፊነት እና ህጋዊ ቁጥጥር',
+    subtitle: 'በኢፌዴሪ በትራንስፖርት እና ሎጂስቲክስ ሚኒስቴር ስር የኢትዮጵያን የባህር ደህንነት፣ የሎጂስቲክስ ቅልጥፍና እና አለም አቀፍ ተገዥነት ማረጋገጥ።',
+    items: {
+      safety: {
+        title: 'የባህር ደህንነት እና ጸጥታ',
+        description: 'የSOLAS፣ MARPOL እና ISPS አለም አቀፍ መስፈርቶችን በመተግበር የመርከቦችን እና የባህር አካባቢን ደህንነት መጠበቅ።',
+      },
+      logistics: {
+        title: 'የብዙ-ዘዴ ሎጂስቲክስ ልማት',
+        description: 'የኢትዮጵያን ደረቅ ወደቦች፣ የባህር-የብስ ትራንዚት መስመሮች፣ የጭነት ማስተላለፍ መስፈርቶች እና የሎጂስቲክስ መሠረተ ልማቶችን መቆጣጠር።',
+      },
+      stcw: {
+        title: 'የSTCW ስልጠና እና የብቃት መስፈርቶች',
+        description: 'የባህር ስልጠና ተቋማትን እውቅና መስጠት፣ ብሔራዊ የብቃት ማዕቀፎችን ማስተዳደር እና አለም አቀፍ የመርከበኞች ማረጋገጫ መስጠት።',
+      },
+      flagState: {
+        title: 'የባንዲራ እና የወደብ ግዛት ፍተሻ',
+        description: 'የመርከብ ምዝገባ፣ የባህር ብቃት ፍተሻ፣ የደህንነት ሰነዶች ማረጋገጥ እና የወደብ ግዛት ቁጥጥር ስራዎችን ማከናወን።',
       },
     },
   },
 
   roles: {
     title: 'ለሁሉም ተጠቃሚ የተዘጋጀ',
-    subtitle: 'አንድ ፖርታል፣ ለሚናዎ የተዘጋጀ።',
+    subtitle: 'በኢትዮጵያ የባህር ዘርፍ ውስጥ ለሚሰሩት ሚና ተስማሚ የሆነ ዲጂታል ፖርታል።',
     seafarers: {
-      title: 'መርከበኞች',
-      description: 'ይመዝገቡ፣ ይረጋገጡ እንዲሁም የባህር አገልግሎት መዝገብዎን ያስተዳድሩ።',
+      title: 'መርከበኞች እና የባህር መኮንኖች',
+      description: 'ይመዝገቡ፣ ለCDC/CoC ምስክር ወረቀቶች ያመልክቱ፣ የSTCW ፈተናዎችን ይያዙ፣ እንዲሁም የባህር አገልግሎት መዝገብዎን ያስተዳድሩ።',
     },
     vesselOwners: {
-      title: 'የመርከብ ባለቤቶች',
-      description: 'መርከብ ይመዝገቡ እንዲሁም ባለቤትነትና ፈቃድ ያስተዳድሩ።',
+      title: 'የመርከብ ባለቤቶች እና ኦፕሬተሮች',
+      description: 'የንግድ እና የውስጥ ውሃ መርከቦችን ይመዝገቡ፣ የቶን ልኬት ጥያቄ ያቅርቡ፣ እንዲሁም የመርከብ ፈቃዶችን ያስተዳድሩ።',
     },
     agents: {
-      title: 'ወኪሎችና ሎጂስቲክስ ኦፕሬተሮች',
-      description: 'ለጭነትና ለመላኪያ ፈቃድ ያመልክቱ እንዲሁም ያድሱ።',
+      title: 'የሎጂስቲክስ ኦፕሬተሮች እና የመርከብ ወኪሎች',
+      description: 'ለMTO፣ የጭነት ማስተላለፍ፣ የጉምሩክ አስተላላፊነት እና የመርከብ ወኪል ፈቃዶች ያመልክቱ።',
     },
     reviewers: {
-      title: 'የባለስልጣኑ ገምጋሚዎች',
-      description: 'ማመልከቻዎችን ይገመግሙ፣ ያረጋግጡ እንዲሁም ይፍቀዱ።',
+      title: 'የባለስልጣኑ ተቆጣጣሪዎች እና ገምጋሚዎች',
+      description: 'ማመልከቻዎችን ይገመግሙ፣ ቴክኒካዊ ኦዲት ያድርጉ፣ ዲጂታል ማጽደቂያዎችን ይስጡ፣ እንዲሁም ሰነዶችን ያረጋግጡ።',
     },
   },
 
   howItWorks: {
-    title: 'እንዴት እንደሚሰራ',
-    subtitle: 'ከማመልከቻ እስከ ፈቃድ፣ በአምስት ደረጃዎች።',
+    title: 'አገልግሎቱ እንዴት እንደሚሰጥ',
+    subtitle: 'ከዲጂታል ምዝገባ እስከ ይፋዊ ምስክር ወረቀት አሰጣጥ፣ በአምስት ግልጽ ደረጃዎች።',
     steps: {
-      selectRole: 'ሚና ይምረጡ',
-      createAccount: 'መለያ ይፍጠሩ',
-      submitApplication: 'ማመልከቻ ያስገቡ',
-      trackStatus: 'ሁኔታ ይከታተሉ',
-      receiveApproval: 'ፍቃድ ይቀበሉ',
+      createAccount: {
+        title: 'መለያ እና ሚና ይምረጡ',
+        description: 'በስልክ/ኢሜይል ይመዝገቡ፣ በኦቲፒ ያረጋግጡ፣ እና ሚናዎን (መርከበኛ፣ የመርከብ ባለቤት፣ ወኪል) ይምረጡ።',
+      },
+      submitApplication: {
+        title: 'ማመልከቻ ያስገቡ',
+        description: 'የሚፈልጉትን አገልግሎት (የመርከበኛ ደብተር፣ CoC፣ የመርከብ ምዝገባ፣ MTO ፈቃድ) መርጠው ሰነዶችን ያያይዙ።',
+      },
+      fulfillRequirements: {
+        title: 'ህክምና እና ፈተና',
+        description: 'የተፈቀደላቸውን የባህር ህክምና ፍተሻዎች ያጠናቅቁ እና የሚያስፈልግ ከሆነ የብቃት ፈተና ይውሰዱ።',
+      },
+      payFees: {
+        title: 'ህጋዊ ክፍያ ይክፈሉ',
+        description: 'የአገልግሎት ክፍያዎችን በቴሌብር፣ በCBE Birr ወይም በባንክ በዲጂታል መንገድ ደህንነቱ በተጠበቀ ሁኔታ ይክፈሉ።',
+      },
+      receiveCertificate: {
+        title: 'ዲጂታል ምስክር ወረቀት ይቀበሉ',
+        description: 'የማመልከቻዎን ሁኔታ ይከታተሉ፣ ሲጸድቅም በQR ኮድ የተረጋገጠውን ዲጂታል ሰነድዎን ያውርዱ።',
+      },
     },
   },
 
   system: {
-    title: 'ዘመናዊ ዲጂታል ስርዓት',
-    subtitle: 'የባህር አገልግሎቶችን ፈጣን፣ ደህንነቱ የተጠበቀና ከየትኛውም ቦታ ተደራሽ ለማድረግ የተዘጋጀ።',
+    title: 'የላቀ የዲጂታል ፖርታል አቅሞች',
+    subtitle: 'ፈጣንነትን፣ ደህንነትን፣ ግልጽነትን እና አለም አቀፍ ተገዥነትን የሚያረጋግጥ ዘመናዊ መሠረተ ልማት።',
     items: {
       secure: {
-        title: 'ደህንነቱ የተጠበቀ እና የተረጋገጠ',
-        description: 'እያንዳንዱ ማመልከቻና ምስክር ወረቀት በዲጂታል መልኩ ተመዝግቦ ሊረጋገጥ የሚችል ነው።',
+        title: 'የዲጂታል ሰነድ ማከማቻ እና የQR ማረጋገጫ',
+        description: 'ሁሉም የተሰጡ ምስክር ወረቀቶች በምስጠራ የተጠበቀ QR ኮድ እና ዲጂታል ፊርማ ያላቸው በመሆናቸው በየትኛውም የወደብ ባለስልጣናት ወዲያውኑ ይረጋገጣሉ።',
       },
       bilingual: {
-        title: 'በሁለት ቋንቋ የተዘጋጀ',
-        description: 'ስርዓቱን ሙሉ በሙሉ በአማርኛ ወይም በእንግሊዝኛ ይጠቀሙ — በማንኛውም ጊዜ ይቀይሩ።',
+        title: 'ሙሉ የአማርኛ እና የእንግሊዝኛ ድጋፍ',
+        description: 'ለሀገር ውስጥ መርከበኞች እና ለአለም አቀፍ የመርከብ ኩባንያዎች ምቹ የሆነ ሙሉ በሙሉ በአማርኛ እና በእንግሊዝኛ የተዘጋጀ ስርዓት።',
       },
       tracking: {
-        title: 'የቀጥታ ሁኔታ ክትትል',
-        description: 'ማመልከቻዎን ከማስገባት እስከ ማጽደቅ ደረጃ በደረጃ ይከታተሉ።',
+        title: 'የቀጥታ ሁኔታ እና ኦዲት ክትትል',
+        description: 'ማመልከቻዎን ከሰነድ ማረጋገጫ፣ ከቴክኒክ ኦዲት፣ ከክፍያ እስከ መሪዎች ማጽደቅ ድረስ በግልጽ ይከታተሉ።',
       },
       singleAccount: {
-        title: 'አንድ መለያ፣ ሁሉም አገልግሎት',
-        description: 'አንድ ጊዜ ይመዝገቡና ሁሉንም የEMA ፈቃድና የምስክር ወረቀት አገልግሎቶች ይድረሱ።',
+        title: 'አንድ መለያ (SSO) አገልግሎት',
+        description: 'የመርከበኛ መዝገቦችን፣ የመርከብ መዝገቦችን እና የንግድ ፈቃዶችን በአንድ ደህንነቱ በተጠበቀ ዲጂታል መለያ ስር ያግኙ።',
+      },
+      payments: {
+        title: 'የተቀናጀ የዲጂታል ክፍያ ስርዓት',
+        description: 'የመንግስት የፈቃድ እና የምስክር ወረቀት ክፍያዎችን በቴሌብር፣ በCBE Birr እና በባንክ በዲጂታል ደረሰኝ ይክፈሉ።',
+      },
+      framework: {
+        title: 'የSTCW እና የባህር ህግ ማዕቀፍ ተገዥነት',
+        description: 'በአለም አቀፍ የIMO STCW 1978/2010 Manila ስምምነቶች፣ SOLAS፣ MARPOL እና በሀገራዊ አዋጆች መሰረት የተገነባ።',
       },
     },
   },
 
   faq: {
+    eyebrow: 'ጥያቄዎች አሉዎት?',
     title: 'ተደጋጋሚ ጥያቄዎች',
+    supportPrompt: 'የሚፈልጉትን መልስ አላገኙም? ቀጥታ የደንበኞች ድጋፍ ቡድናችንን ያግኙ።',
+    contactSupport: 'ድጋፍ ቡድንን ያግኙ',
     items: {
       whatIsPortal: {
         question: 'EMA ፖርታል ምንድን ነው?',
@@ -423,12 +550,27 @@ export const landingAm: LandingCopy = {
   },
 
   contact: {
-    title: 'ባለስልጣኑን ያግኙ',
-    subtitle: 'የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤትን ያግኙ።',
-    addressLabel: 'አድራሻ',
+    eyebrow: 'እኛን ያግኙ',
+    title: 'የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤት',
+    subtitle: 'በአዲስ አበባ የሚገኘውን የኢትዮጵያ ማሪታይም ባለስልጣን ዋና መሥሪያ ቤት ያግኙ ወይም ቀጥታ ጥያቄ ይላኩ።',
+    addressLabel: 'የዋና መሥሪያ ቤት አድራሻ',
     address: 'መስቀል አደባባይ፣ ከHyatt Regency ሆቴል ጀርባ፣ Sunshine ህንፃ ቁጥር 4፣ አዲስ አበባ፣ ኢትዮጵያ',
-    phoneLabel: 'ስልክ',
-    websiteLabel: 'ድረ ገጽ',
+    phoneLabel: 'የስልክ መስመር',
+    websiteLabel: 'ይፋዊ ድረ ገጽ',
+    inquiryTitle: 'ቀጥታ ጥያቄ ይላኩ',
+    inquirySubtitle: 'ስለ መርከበኛ ማረጋገጫ፣ የመርከብ ምዝገባ ወይም ፈቃዶች ጥያቄዎች አሉዎት?',
+    nameLabel: 'ሙሉ ስም',
+    namePlaceholder: 'ምሳሌ፡ አበበ ቢቂላ',
+    emailLabel: 'ኢሜይል አድራሻ',
+    emailPlaceholder: 'ምሳሌ፡ abebe@example.com',
+    topicLabel: 'የጥያቄው ርዕስ',
+    topicPlaceholder: 'ርዕስ ይምረጡ (መርከበኛ፣ መርከብ፣ ፈቃድ...)',
+    messageLabel: 'መልዕክትዎ',
+    messagePlaceholder: 'ጥያቄዎን ወይም የሚያስፈልግዎትን ድጋፍ ያብራሩ...',
+    sendBtn: 'መልዕክት ላክ',
+    successMsg: 'እናመሰግናለን! መልዕክትዎ ለEMA ደንበኞች ድጋፍ ተልኳል።',
+    getDirections: 'አቅጣጫዎችን ያግኙ',
+    callOffice: 'ወደ መሥሪያ ቤት ይደውሉ',
   },
 
   footer: {
diff --git a/libs/ui/src/lib/landing/landing.css b/libs/ui/src/lib/landing/landing.css
index f274ee079..d279c5032 100644
--- a/libs/ui/src/lib/landing/landing.css
+++ b/libs/ui/src/lib/landing/landing.css
@@ -3,17 +3,15 @@
    .ema-hover-lift, portal's --ema-surface-*) is available here, so this file
    is self-contained. */
 
-/* `scroll-behavior` only affects the element that actually scrolls — for a
-   full page that's `html`, not this div, so it has to live here. Scoped with
-   :has() so it only applies while the landing page is mounted. */
+html,
+body,
 html:has(.ema-landing) {
-  scroll-behavior: smooth;
+  scroll-behavior: smooth !important;
 }
 
-.ema-landing section[id] {
-  /* Offsets anchor jumps by the sticky header height so the heading isn't
-     hidden underneath it. Keep in sync with the header's fixed height. */
-  scroll-margin-top: 72px;
+.ema-landing section[id],
+.ema-landing div[id] {
+  scroll-margin-top: 80px;
 }
 
 .ema-landing .ema-landing-fade {
@@ -93,6 +91,93 @@ html:has(.ema-landing) {
   box-shadow: 0 16px 40px rgba(49, 96, 183, 0.14);
 }
 
+/* Gradient text helper */
+.ema-landing .ema-text-gradient {
+  background: linear-gradient(135deg, #2453a2 0%, #0aab89 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Hero live status indicator pulse dot */
+.ema-landing .ema-live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #22c55e;
+  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  animation: ema-dot-pulse 2s infinite;
+}
+
+@keyframes ema-dot-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+  }
+}
+
+/* Vision & Mission card left accent borders */
+.ema-landing .ema-vision-card {
+  border-left: 4px solid #3160b7 !important;
+}
+.ema-landing .ema-mission-card {
+  border-left: 4px solid #1fc29d !important;
+}
+
+/* Card hover arrow animation */
+.ema-landing .ema-landing-hover .ema-card-arrow {
+  transition: transform 180ms ease, color 180ms ease;
+}
+.ema-landing .ema-landing-hover:hover .ema-card-arrow {
+  transform: translateX(4px);
+  color: var(--mantine-primary-color-filled);
+}
+
+/* Footer top gradient accent bar */
+.ema-landing footer {
+  position: relative;
+}
+.ema-landing footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #3160b7 0%, #1fc29d 50%, #3160b7 100%);
+}
+
+/* FAQ custom item styling */
+.ema-landing .ema-faq-accordion .mantine-Accordion-item {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-lg);
+  margin-bottom: 14px;
+  background-color: var(--mantine-color-body);
+  transition: box-shadow 180ms ease, border-color 180ms ease;
+}
+.ema-landing .ema-faq-accordion .mantine-Accordion-item[data-active] {
+  border-color: var(--mantine-primary-color-light-color);
+  box-shadow: 0 8px 24px rgba(49, 96, 183, 0.08);
+}
+.ema-landing .ema-faq-accordion .mantine-Accordion-control {
+  font-weight: 600;
+  padding: 16px 20px;
+}
+
+/* Contact HQ Card and Inquiry Form Styling */
+.ema-landing .ema-contact-hq-card {
+  border-left: 4px solid var(--mantine-primary-color-filled);
+}
+.ema-landing .ema-inquiry-box {
+  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--mantine-color-default-border);
+}
+
 /* Mobile drawer link item */
 .ema-drawer-nav-link {
   display: flex;
@@ -122,7 +207,8 @@ html:has(.ema-landing) {
   }
   .ema-landing .ema-landing-fade,
   .ema-landing .ema-landing-hover,
-  .ema-hero-pulse {
+  .ema-hero-pulse,
+  .ema-landing .ema-live-dot {
     animation: none;
     transition: none;
   }

From 51cf0fbd17d70b756a3b6d4bff4e4caa1b84c932 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Sat, 15 Aug 2026 07:02:37 +0000
Subject: [PATCH 07/58] UI landing page route fix

---
 apps/backoffice/src/app/router/LandingRoute.tsx | 10 +++++++---
 apps/portal/src/app/components/LandingRoute.tsx | 12 +++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/backoffice/src/app/router/LandingRoute.tsx b/apps/backoffice/src/app/router/LandingRoute.tsx
index c353e91d5..b03e67f8b 100644
--- a/apps/backoffice/src/app/router/LandingRoute.tsx
+++ b/apps/backoffice/src/app/router/LandingRoute.tsx
@@ -1,12 +1,16 @@
+import { Navigate } from 'react-router-dom';
 import { LandingPage } from '@ema-platform/ui';
 import { useAuthToken } from '@ema-platform/auth';
 
 /**
- * Public `/` — mounts the shared landing page. Backoffice has no /signup
- * (enableSignup: false) and no /verify route, so those props are omitted.
+ * Public `/`. Signed-in visitors skip the landing page entirely and go
+ * straight to the dashboard. Backoffice has no /signup (enableSignup: false)
+ * and no /verify route, so those props are omitted.
  */
 export function LandingRoute() {
   const token = useAuthToken();
 
-  return <LandingPage primaryHref={token ? '/dashboard' : '/login'} />;
+  if (token) return <Navigate to="/dashboard" replace />;
+
+  return <LandingPage primaryHref="/login" />;
 }
diff --git a/apps/portal/src/app/components/LandingRoute.tsx b/apps/portal/src/app/components/LandingRoute.tsx
index 8bab1d394..1d5b82bdc 100644
--- a/apps/portal/src/app/components/LandingRoute.tsx
+++ b/apps/portal/src/app/components/LandingRoute.tsx
@@ -1,14 +1,16 @@
+import { Navigate } from 'react-router-dom';
 import { LandingPage } from '@ema-platform/ui';
 import { useAuthToken } from '@ema-platform/auth';
 
 /**
- * Public `/` — mounts the shared landing page with portal-specific routes.
- * Auth state is read via `useAuthToken`, the same hook ProtectedRoute uses,
- * so the header can show "Go to dashboard" instead of Login/Sign Up without
- * gating the route itself.
+ * Public `/`. Signed-in visitors skip the landing page entirely and go
+ * straight to the dashboard — the landing page is a front door for people
+ * who aren't in yet, not a screen for people who already are.
  */
 export function LandingRoute() {
   const token = useAuthToken();
 
-  return <LandingPage primaryHref={token ? '/dashboard' : '/login'} signupHref="/signup" />;
+  if (token) return <Navigate to="/dashboard" replace />;
+
+  return <LandingPage primaryHref="/login" signupHref="/signup" />;
 }

From 6330c9ea5505a2bed2dc8362132a6265c7496648 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Sat, 15 Aug 2026 11:25:30 +0300
Subject: [PATCH 08/58] applying loader on pages

---
 .../dashboard/pages/DashboardPage/index.tsx   |  8 +---
 .../features/exam/pages/ExamDetailPage.tsx    |  7 +---
 .../pages/CertificatesPage/index.tsx          | 13 ++++---
 .../dashboard/pages/DashboardPage/index.tsx   |  8 +---
 .../endorsement/pages/EndorsementPage.tsx     |  8 +---
 .../features/exams/pages/ExamsPage/index.tsx  |  8 +---
 .../pages/LicenseApplicationPage.tsx          |  8 +---
 .../components/RequireOperations.tsx          | 14 ++-----
 .../components/RequireSeafarerProfile.tsx     | 14 ++-----
 .../auth/src/lib/components/AuthBootstrap.tsx |  2 +-
 .../ui/src/lib/theme/maritime-loader-theme.ts | 38 +++++++++++++------
 11 files changed, 53 insertions(+), 75 deletions(-)

diff --git a/apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx b/apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx
index 443b66eae..927ca47a3 100644
--- a/apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx
+++ b/apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
 import { useGetAssignedToMeQuery, useGetQueueQuery } from '@ema-platform/api';
-import { AdvancedTable, useServerTable } from '@ema-platform/ui';
+import { AdvancedTable, PageLoader, useServerTable } from '@ema-platform/ui';
 import { dashboardQueueColumns } from './columns';
 
 /**
@@ -28,11 +28,7 @@ export function DashboardPage() {
   const table = useServerTable();
 
   if (queue.isLoading || mine.isLoading) {
-    return (
-      <Center h={300}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Backoffice Dashboard…" height={400} />;
   }
 
   const unclaimed = queue.data?.items ?? [];
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
index e49efe907..6c09dd93b 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
@@ -54,6 +54,7 @@ import { QuestionAssigner } from '../components/QuestionAssigner';
 import { RecordResultModal } from '../../result/components/RecordResultModal';
 import { ExamCandidatesPanel } from '../components/ExamCandidatesPanel';
 import { ExamIncidentsPanel } from '../components/ExamIncidentsPanel';
+import { PageLoader } from '@ema-platform/ui';
 import type { ExamStatus, QuestionBrief } from '../types/exam';
 
 const STATUS_COLOR: Record<string, string> = {
@@ -129,11 +130,7 @@ export function ExamDetailPage() {
   }, [allQuestions, exam?.certificationId, exam?.form]);
 
   if (isLoading)
-    return (
-      <Center py="xl">
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Exam Details…" height={400} />;
   if (isError || !exam) {
     return (
       <Stack gap="md">
diff --git a/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx b/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
index 42ab94351..bdba090ea 100644
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
@@ -31,7 +31,12 @@ import {
   useGetMySeaTimeQuery,
 } from '@ema-platform/api';
 import { useCurrentProfile, usePermissions } from '@ema-platform/auth';
-import { AdvancedTable, notify, useServerTable } from '@ema-platform/ui';
+import {
+  AdvancedTable,
+  PageLoader,
+  notify,
+  useServerTable,
+} from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import { certificateColumns } from './columns';
 
@@ -107,11 +112,7 @@ export function CertificatesPage() {
   }
 
   if (loadingProfile || loadingApplications) {
-    return (
-      <Group justify="center" py="xl">
-        <Loader />
-      </Group>
-    );
+    return <PageLoader label="Loading Certificates…" height={400} />;
   }
 
   const pagedIssued = issuedTable.paginate(issued);
diff --git a/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx b/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
index f7ed4a652..17f44e7c4 100644
--- a/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
+++ b/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
@@ -36,7 +36,7 @@ import {
   useGetMyApplicationsQuery,
   useGetMyLicensesQuery,
 } from '@ema-platform/api';
-import { AdvancedTable, useServerTable } from '@ema-platform/ui';
+import { AdvancedTable, PageLoader, useServerTable } from '@ema-platform/ui';
 import type { IssuedLicense, LicenseApplication } from '@ema-platform/api';
 import { LicenseCatalogue } from '../../../licensing/components/LicenseCatalogue';
 import { LicenseCard, useRenewLicense } from '../../../licensing/components/LicenseCard';
@@ -108,11 +108,7 @@ export function DashboardPage() {
   }
 
   if (isLoading) {
-    return (
-      <Center h={400}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Dashboard…" height={450} />;
   }
 
   return (
diff --git a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
index ac7ae28d1..fa33be9d1 100644
--- a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
+++ b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
@@ -31,7 +31,7 @@ import {
   useGetMyLicensesQuery,
 } from '@ema-platform/api';
 import { useCurrentProfile } from '@ema-platform/auth';
-import { notify } from '@ema-platform/ui';
+import { PageLoader, notify } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 
 const ENDORSEMENT_TYPE_KEYS = ['ENDORSEMENT_COC', 'ENDORSEMENT_GOC'];
@@ -94,11 +94,7 @@ export function EndorsementPage() {
   }
 
   if (loadingProfile || loadingApplications) {
-    return (
-      <Group justify="center" py="xl">
-        <Loader />
-      </Group>
-    );
+    return <PageLoader label="Loading Endorsements…" height={400} />;
   }
 
   return (
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
index b4cb0e0cf..17b42f336 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
@@ -12,7 +12,7 @@ import {
   Title,
 } from '@mantine/core';
 import { IconClipboardList } from '@tabler/icons-react';
-import { AdvancedTable, notify, useServerTable } from '@ema-platform/ui';
+import { AdvancedTable, PageLoader, notify, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import {
   useApiQuery,
@@ -178,11 +178,7 @@ export function ExamsPage() {
   };
 
   if (loadingOpen || loadingMine || loadingResults) {
-    return (
-      <Group justify="center" py="xl">
-        <Loader />
-      </Group>
-    );
+    return <PageLoader label="Loading Exam Schedule…" height={400} />;
   }
 
   const pagedRegistrations = registrationTable.paginate(mine ?? []);
diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
index 3c95453c2..33c2cdb48 100644
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -53,7 +53,7 @@ import {
   type ValidationIssue,
   type Vessel,
 } from '@ema-platform/api';
-import { getCountryCode, getCountryName, ModalFooter } from '@ema-platform/ui';
+import { getCountryCode, getCountryName, ModalFooter, PageLoader } from '@ema-platform/ui';
 import {
   LICENSE_PERMISSIONS,
   PORTAL_PERMISSIONS,
@@ -212,11 +212,7 @@ export function LicenseApplicationPage() {
   );
 
   if (loadingConfig || !config || !appId || !application) {
-    return (
-      <Center h={400}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Application…" height={400} />;
   }
 
   const readOnly = !['DRAFT', 'RESUBMIT_REQUIRED'].includes(application.status);
diff --git a/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx b/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
index 3e0cde509..e4f0f0c8e 100644
--- a/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
+++ b/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
@@ -1,6 +1,6 @@
 import { Navigate, useLocation } from 'react-router-dom';
-import { Center, Loader } from '@mantine/core';
 import { useGetMyOperatorTypesQuery } from '@ema-platform/api';
+import { PageLoader } from '@ema-platform/ui';
 
 /**
  * Sends an applicant who has not said what they operate as to the step that
@@ -75,11 +75,7 @@ export function RequireOperations({ children }: { children: React.ReactNode }) {
   }
 
   if (isLoading) {
-    return (
-      <Center h={200}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Checking operations profile…" height={350} />;
   }
 
   // A failed lookup must not lock anyone out of the portal — the server still
@@ -93,11 +89,7 @@ export function RequireOperations({ children }: { children: React.ReactNode }) {
     // the same tick; deciding on the pre-save cache bounced the applicant
     // straight back to the screen they had just completed.
     if (isFetching) {
-      return (
-        <Center h={200}>
-          <Loader />
-        </Center>
-      );
+      return <PageLoader label="Checking operations profile…" height={350} />;
     }
     return <Navigate to="/onboarding/operations" replace />;
   }
diff --git a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
index 350b0b014..b86057a1e 100644
--- a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
+++ b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Center, Loader } from '@mantine/core';
 import { Navigate, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { notify } from '@ema-platform/ui';
+import { PageLoader, notify } from '@ema-platform/ui';
 import {
   PROFILE_FIELD_SECTION,
   useCurrentProfile,
@@ -75,11 +75,7 @@ export function RequireSeafarerProfile({ children }: { children: React.ReactNode
   if (!gated) return <>{children}</>;
 
   if (isLoading) {
-    return (
-      <Center h={200}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Checking seafarer profile…" height={350} />;
   }
 
   // A failed lookup must not lock anyone out — the server still refuses the
@@ -93,11 +89,7 @@ export function RequireSeafarerProfile({ children }: { children: React.ReactNode
   // headed back here in the same tick — deciding on the pre-save cache would
   // bounce them off the screen they just finished.
   if (isFetching) {
-    return (
-      <Center h={200}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Checking seafarer profile…" height={350} />;
   }
 
   const target = PROFILE_FIELD_SECTION[gaps[0]];
diff --git a/libs/auth/src/lib/components/AuthBootstrap.tsx b/libs/auth/src/lib/components/AuthBootstrap.tsx
index de5395ddb..9a821d4b0 100644
--- a/libs/auth/src/lib/components/AuthBootstrap.tsx
+++ b/libs/auth/src/lib/components/AuthBootstrap.tsx
@@ -71,7 +71,7 @@ export function AuthBootstrap({ children }: { children: ReactNode }) {
 
   // Rendering the router before the session resolves would let the guards
   // redirect based on a state that is about to change.
-  if (!ready) return <PageLoader />;
+  if (!ready) return <PageLoader label="Authenticating Maritime Session…" height="100vh" />;
 
   return <>{children}</>;
 }
diff --git a/libs/ui/src/lib/theme/maritime-loader-theme.ts b/libs/ui/src/lib/theme/maritime-loader-theme.ts
index f030b4b19..f38ef3c68 100644
--- a/libs/ui/src/lib/theme/maritime-loader-theme.ts
+++ b/libs/ui/src/lib/theme/maritime-loader-theme.ts
@@ -1,31 +1,47 @@
-import { Button, createTheme, Loader, type MantineLoaderComponent } from '@mantine/core';
+import {
+  ActionIcon,
+  Button,
+  createTheme,
+  Input,
+  Loader,
+  Select,
+  TextInput,
+  type MantineLoaderComponent,
+} from '@mantine/core';
 import { MaritimeLoader } from '../components/MaritimeLoader';
 
 /**
- * Registers the branded ship loader as the default Mantine `Loader` type, and
- * opts `Button`'s inline loading state back out to the stock oval — a 1.88:1
- * ship does not fit a button's loader slot.
- *
- * Merge into an app theme with `mergeThemeOverrides(appTheme, maritimeLoaderTheme)`
- * rather than importing this in `libs/shared`: `libs/ui` already depends on
- * `libs/shared`, so the reverse import would be circular.
+ * Registers the branded Ethiopian Maritime Authority loader as the default Mantine `Loader` type,
+ * sets prominent 80px size for page/section loaders, and opts inline control loaders
+ * (buttons, inputs, select fields) back out to the compact oval spinner.
  */
 export const maritimeLoaderTheme = createTheme({
   components: {
     Loader: Loader.extend({
       defaultProps: {
-        // Mantine types custom loaders as ForwardRefExoticComponent; a plain
-        // function component satisfies the runtime contract (it forwards a
-        // ref as a normal prop under React 19) but not the structural type.
         loaders: {
           ...Loader.defaultLoaders,
           maritime: MaritimeLoader as unknown as MantineLoaderComponent,
         },
         type: 'maritime',
+        size: 80,
       },
     }),
     Button: Button.extend({
       defaultProps: { loaderProps: { type: 'oval' } },
     }),
+    ActionIcon: ActionIcon.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    Input: Input.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    TextInput: TextInput.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    Select: Select.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
   },
 });
+

From fc2730f60bf604115f565615e5c3552335e28be1 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Sat, 15 Aug 2026 11:33:28 +0300
Subject: [PATCH 09/58] loader roleout on backoffice

---
 .../configuration/pages/ConfigurationPage/index.tsx       | 7 ++-----
 .../src/app/features/location/components/LocationTree.tsx | 7 ++-----
 .../src/app/features/location/pages/LocationPage.tsx      | 8 ++------
 .../pages/LogisticsHeadDashboardPage/index.tsx            | 8 ++------
 .../payment-config/pages/PaymentConfigPage/index.tsx      | 7 ++-----
 .../app/features/result/pages/ExamAppealsPage/index.tsx   | 8 ++------
 6 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
index e6bfd6059..a7221e704 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
@@ -30,6 +30,7 @@ import {
   AdvancedTable,
   useServerTable,
   ModalFooter,
+  PageLoader,
 } from "@ema-platform/ui";
 import { LocationPage } from "../../../location/pages/LocationPage";
 import { CertificationPage } from "../../../certification/pages/CertificationPage";
@@ -292,11 +293,7 @@ function ProfessionTab() {
   ];
 
   if (isLoading) {
-    return (
-      <Center py="xl">
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Configuration…" height={400} />;
   }
 
   if (isError) {
diff --git a/apps/backoffice/src/app/features/location/components/LocationTree.tsx b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
index 311c7622e..7915c3d29 100644
--- a/apps/backoffice/src/app/features/location/components/LocationTree.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
@@ -23,6 +23,7 @@ import { useGetLocationsQuery } from '../api/location-api';
 import type { Location } from '../types/location';
 import { useTranslation } from 'react-i18next';
 import { useLocalized } from '@ema-platform/api';
+import { PageLoader } from '@ema-platform/ui';
 
 interface LocationTreeProps {
   selectedId: string | null;
@@ -207,11 +208,7 @@ export function LocationTree({
   );
 
   if (isLoading) {
-    return (
-      <Center py="xl">
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Locations…" height={300} />;
   }
 
   return (
diff --git a/apps/backoffice/src/app/features/location/pages/LocationPage.tsx b/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
index 0e2954a82..b2d4f9e3c 100644
--- a/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
+++ b/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
@@ -17,7 +17,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { IconSettings, IconMap, IconInfoCircle, IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { notify, useErrorHandler, ModalFooter } from '@ema-platform/ui';
+import { notify, useErrorHandler, ModalFooter, PageLoader } from '@ema-platform/ui';
 import { LocationTree } from '../components/LocationTree';
 import { LocationDetail } from '../components/LocationDetail';
 import { LocationForm } from '../components/LocationForm';
@@ -103,11 +103,7 @@ export function LocationPage() {
   }, [selectedLocation, deleteLocation, closeDeleteModal, handleError]);
 
   if (typesLoading) {
-    return (
-      <Center py="xl">
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Location Types…" height={400} />;
   }
 
   return (
diff --git a/apps/backoffice/src/app/features/logistics-head/pages/LogisticsHeadDashboardPage/index.tsx b/apps/backoffice/src/app/features/logistics-head/pages/LogisticsHeadDashboardPage/index.tsx
index dc5ed4af4..392f54c9d 100644
--- a/apps/backoffice/src/app/features/logistics-head/pages/LogisticsHeadDashboardPage/index.tsx
+++ b/apps/backoffice/src/app/features/logistics-head/pages/LogisticsHeadDashboardPage/index.tsx
@@ -13,7 +13,7 @@ import {
   Title,
 } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
-import { AdvancedTable, useServerTable } from '@ema-platform/ui';
+import { AdvancedTable, useServerTable, PageLoader } from '@ema-platform/ui';
 import {
   STATUS_COLORS,
   STATUS_LABELS,
@@ -37,11 +37,7 @@ export function LogisticsHeadDashboardPage() {
   const table = useServerTable();
 
   if (queue.isLoading || mine.isLoading) {
-    return (
-      <Center h={300}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Dashboard…" height={400} />;
   }
 
   const unclaimed = queue.data?.items ?? [];
diff --git a/apps/backoffice/src/app/features/payment-config/pages/PaymentConfigPage/index.tsx b/apps/backoffice/src/app/features/payment-config/pages/PaymentConfigPage/index.tsx
index afbb6c624..4408049f1 100644
--- a/apps/backoffice/src/app/features/payment-config/pages/PaymentConfigPage/index.tsx
+++ b/apps/backoffice/src/app/features/payment-config/pages/PaymentConfigPage/index.tsx
@@ -30,6 +30,7 @@ import {
   AdvancedTable,
   useServerTable,
   type AdvancedColumn,
+  PageLoader,
 } from '@ema-platform/ui';
 import {
   extractErrorMessage,
@@ -63,11 +64,7 @@ export function PaymentConfigPage() {
   const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
 
   if (isLoading) {
-    return (
-      <Center h={300}>
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Payment Configuration…" height={400} />;
   }
 
   if (error) {
diff --git a/apps/backoffice/src/app/features/result/pages/ExamAppealsPage/index.tsx b/apps/backoffice/src/app/features/result/pages/ExamAppealsPage/index.tsx
index 884f93d8e..368b92d05 100644
--- a/apps/backoffice/src/app/features/result/pages/ExamAppealsPage/index.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ExamAppealsPage/index.tsx
@@ -15,7 +15,7 @@ import {
   Title,
 } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
-import { AdvancedTable, notify, useServerTable } from '@ema-platform/ui';
+import { AdvancedTable, notify, useServerTable, PageLoader } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import { extractErrorMessage } from '@ema-platform/api';
 import {
@@ -61,11 +61,7 @@ export function ExamAppealsPage() {
   };
 
   if (isLoading) {
-    return (
-      <Center py="xl">
-        <Loader />
-      </Center>
-    );
+    return <PageLoader label="Loading Exam Appeals…" height={400} />;
   }
   if (isError) {
     return (

From 31934f593321ab71d0c154fcdb07f423b158d475 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Sat, 15 Aug 2026 11:43:02 +0300
Subject: [PATCH 10/58] loader rollout

---
 .../app/features/notifications/pages/NotificationsPage.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx b/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
index bde8979a3..5e7340173 100644
--- a/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
+++ b/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
@@ -21,6 +21,7 @@ import {
   useMarkNotificationReadMutation,
 } from '@ema-platform/api';
 import { useDateDisplayer } from '@ema-platform/shared';
+import { PageLoader } from '@ema-platform/ui';
 
 type Tab = 'all' | 'unseen' | 'seen';
 
@@ -75,9 +76,7 @@ export function NotificationsPage() {
       />
 
       {isLoading ? (
-        <Center h={300}>
-          <Loader />
-        </Center>
+        <PageLoader label="Loading Notifications…" height={350} />
       ) : items.length === 0 ? (
         <Card withBorder padding="xl">
           <Stack align="center" gap="xs">

From 4a33347853df7458a67f44b85c2f1c42ccf3c3f2 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 07:04:45 +0000
Subject: [PATCH 11/58] refactor: redirect to root path instead of login page
 on logout in Backoffice and Portal layouts

---
 apps/backoffice/src/app/layouts/BackofficeLayout.tsx | 2 +-
 apps/portal/src/app/layouts/PortalLayout.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
index d1665629a..85151ef9b 100644
--- a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
+++ b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
@@ -87,7 +87,7 @@ export function BackofficeLayout() {
   const handleLogout = useCallback(() => {
     dispatch(logout());
     dispatch(baseApi.util.resetApiState());
-    navigate("/login");
+    navigate("/");
   }, [dispatch, navigate]);
 
   const segments = location.pathname.split('/').filter(Boolean);
diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index 76b2d67be..2aa6e8898 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -186,7 +186,7 @@ export function PortalLayout() {
   const handleLogout = () => {
     dispatch(logout());
     dispatch(baseApi.util.resetApiState());
-    navigate("/login");
+    navigate("/");
   };
 
   const displayName = user?.name?.en || user?.username || "";

From 2341f90107891289b3078be7e16ff69687d9be36 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 07:09:36 +0000
Subject: [PATCH 12/58] fix: redirect to home instead of login on auth failure
 in backoffice and portal stores

---
 apps/backoffice/src/app/store/index.ts | 2 +-
 apps/portal/src/app/store/index.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/backoffice/src/app/store/index.ts b/apps/backoffice/src/app/store/index.ts
index 66f11f041..43322a9cf 100644
--- a/apps/backoffice/src/app/store/index.ts
+++ b/apps/backoffice/src/app/store/index.ts
@@ -44,7 +44,7 @@ configureTokenRefresh({
   },
   onAuthFailure: () => {
     store.dispatch(logout());
-    window.location.href = '/login';
+    window.location.href = '/';
   },
 });
 
diff --git a/apps/portal/src/app/store/index.ts b/apps/portal/src/app/store/index.ts
index f68e7bfaa..421d478e0 100644
--- a/apps/portal/src/app/store/index.ts
+++ b/apps/portal/src/app/store/index.ts
@@ -50,7 +50,7 @@ configureTokenRefresh({
 
   onAuthFailure: () => {
     store.dispatch(logout());
-    window.location.href = "/login";
+    window.location.href = "/";
   },
 });
 

From 28ae9f393d416a143833e28287df823fa44ebe05 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 07:13:34 +0000
Subject: [PATCH 13/58] fixes

---
 apps/portal/src/app/router.tsx                  | 2 +-
 libs/auth/src/lib/components/ProtectedRoute.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/app/router.tsx b/apps/portal/src/app/router.tsx
index 7ab630b08..b8f2d26b3 100644
--- a/apps/portal/src/app/router.tsx
+++ b/apps/portal/src/app/router.tsx
@@ -403,6 +403,6 @@ export const router = createBrowserRouter([
   },
 
   // A typo'd URL should not maroon a signed-in user on the marketing page —
-  // ProtectedRoute sends anonymous visitors on to /login exactly as before.
+  // ProtectedRoute sends anonymous visitors on to / (landing) instead.
   { path: "*", element: <Navigate to="/dashboard" replace /> },
 ]);
diff --git a/libs/auth/src/lib/components/ProtectedRoute.tsx b/libs/auth/src/lib/components/ProtectedRoute.tsx
index 5321a5889..77d9dd539 100644
--- a/libs/auth/src/lib/components/ProtectedRoute.tsx
+++ b/libs/auth/src/lib/components/ProtectedRoute.tsx
@@ -7,7 +7,7 @@ interface ProtectedRouteProps {
   loginPath?: string;
 }
 
-export function ProtectedRoute({ children, loginPath = '/login' }: ProtectedRouteProps) {
+export function ProtectedRoute({ children, loginPath = '/' }: ProtectedRouteProps) {
   const location = useLocation();
   const token = useAuthToken();
 

From 73f7127ac89dde275d3fc3a92a1614a04183a6f7 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 07:52:09 +0000
Subject: [PATCH 14/58] Localization on Portal

---
 .../src/app/components/ErrorBoundary.tsx      |  15 +-
 .../pages/BasicSafetyTrainingPage.tsx         |   7 +-
 .../pages/CertificatesPage/columns.tsx        |  34 +-
 .../pages/CertificatesPage/index.tsx          |  67 +-
 .../dashboard/pages/DashboardPage/columns.tsx |  16 +-
 .../dashboard/pages/DashboardPage/index.tsx   | 101 +--
 .../documents/pages/DocumentVaultPage.tsx     |   7 +-
 .../endorsement/pages/EndorsementPage.tsx     | 118 ++-
 .../features/endorsement/pages/columns.tsx    |  71 ++
 .../exams/pages/ExamsPage/columns.tsx         |  76 +-
 .../features/exams/pages/ExamsPage/index.tsx  |  72 +-
 .../components/ConfigDrivenSection.tsx        |   4 +-
 .../licensing/components/DocumentSlots.tsx    |  24 +-
 .../licensing/components/LicenseCard.tsx      |  22 +-
 .../licensing/components/LicenseCatalogue.tsx |  50 +-
 .../licensing/components/StaffEvidence.tsx    |  10 +-
 .../pages/LicenseApplicationPage.tsx          | 104 +--
 .../medical/pages/MedicalCertificatePage.tsx  |   7 +-
 .../notifications/pages/NotificationsPage.tsx |  33 +-
 .../components/RequireOperations.tsx          |   6 +-
 .../pages/OperationsOnboardingPage.tsx        |   8 +-
 .../payments/pages/PaymentCheckPage.tsx       |  23 +-
 .../payments/pages/PaymentFailurePage.tsx     |  12 +-
 .../payments/pages/PaymentSuccessPage.tsx     |  17 +-
 .../profile/components/AddressFormContent.tsx | 116 +--
 .../components/OperationsFormContent.tsx      |  43 +-
 .../features/profile/pages/ProfilePage.tsx    |   2 +-
 .../pages/MySeaRecordsPage/actions.tsx        |  55 +-
 .../pages/MySeaRecordsPage/columns.tsx        |  59 +-
 .../seafarer/pages/MySeaRecordsPage/index.tsx | 118 +--
 .../pages/SeafarerRegistrationPage.tsx        |  83 +--
 .../pages/SeamanBookApplicationPage.tsx       |   7 +-
 .../seaman-book/pages/SeamanBookPage.tsx      |   7 +-
 .../pages/VesselRegistrationPage/columns.tsx  |  58 +-
 .../pages/VesselRegistrationPage/index.tsx    |  61 +-
 .../pages/VesselRegistrationStatusPage.tsx    |  38 +-
 .../pages/VesselTransferPage.tsx              |  51 +-
 apps/portal/src/app/i18n/locales/am.ts        | 683 +++++++++++++++++
 apps/portal/src/app/i18n/locales/en.ts        | 685 ++++++++++++++++++
 39 files changed, 2270 insertions(+), 700 deletions(-)
 create mode 100644 apps/portal/src/app/features/endorsement/pages/columns.tsx

diff --git a/apps/portal/src/app/components/ErrorBoundary.tsx b/apps/portal/src/app/components/ErrorBoundary.tsx
index d8b892333..6c0b2aa4f 100644
--- a/apps/portal/src/app/components/ErrorBoundary.tsx
+++ b/apps/portal/src/app/components/ErrorBoundary.tsx
@@ -1,8 +1,10 @@
 import { Component } from 'react';
 import type { ReactNode, ErrorInfo } from 'react';
 import { Center, Paper, Title, Text, Button } from '@mantine/core';
+import { withTranslation } from 'react-i18next';
+import type { WithTranslation } from 'react-i18next';
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
 }
 
@@ -11,7 +13,7 @@ interface State {
   error: Error | null;
 }
 
-export class ErrorBoundary extends Component<Props, State> {
+class ErrorBoundaryBase extends Component<Props, State> {
   state: State = { hasError: false, error: null };
 
   static getDerivedStateFromError(error: Error): State {
@@ -24,12 +26,13 @@ export class ErrorBoundary extends Component<Props, State> {
 
   render() {
     if (this.state.hasError) {
+      const { t } = this.props;
       return (
         <Center h="100vh">
           <Paper p="xl" shadow="md" radius="md" w={400}>
-            <Title order={3} mb="sm">Something went wrong</Title>
+            <Title order={3} mb="sm">{t('errorBoundary.title')}</Title>
             <Text c="dimmed" size="sm" mb="lg">
-              {this.state.error?.message || 'An unexpected error occurred.'}
+              {this.state.error?.message || t('errorBoundary.message')}
             </Text>
             <Button
               fullWidth
@@ -38,7 +41,7 @@ export class ErrorBoundary extends Component<Props, State> {
                 window.location.href = '/';
               }}
             >
-              Reload page
+              {t('errorBoundary.reload')}
             </Button>
           </Paper>
         </Center>
@@ -48,3 +51,5 @@ export class ErrorBoundary extends Component<Props, State> {
     return this.props.children;
   }
 }
+
+export const ErrorBoundary = withTranslation()(ErrorBoundaryBase);
diff --git a/apps/portal/src/app/features/basic-safety-training/pages/BasicSafetyTrainingPage.tsx b/apps/portal/src/app/features/basic-safety-training/pages/BasicSafetyTrainingPage.tsx
index a23be0288..304b45036 100644
--- a/apps/portal/src/app/features/basic-safety-training/pages/BasicSafetyTrainingPage.tsx
+++ b/apps/portal/src/app/features/basic-safety-training/pages/BasicSafetyTrainingPage.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@mantine/core';
 import { FeatureUnavailable } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Placeholder until this feature has a backend.
@@ -8,11 +9,13 @@ import { FeatureUnavailable } from '@ema-platform/ui';
  * indistinguishable from real ones.
  */
 export function BasicSafetyTrainingPage() {
+  const { t } = useTranslation();
+
   return (
     <Container size="lg" py="xl">
       <FeatureUnavailable
-        title="Basic Safety Training"
-        description="BST records are not connected to the backend yet."
+        title={t('featureUnavailable.basicSafetyTraining.title')}
+        description={t('featureUnavailable.basicSafetyTraining.description')}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/features/certificates/pages/CertificatesPage/columns.tsx b/apps/portal/src/app/features/certificates/pages/CertificatesPage/columns.tsx
index 6a8df144d..1d861d9d0 100644
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage/columns.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage/columns.tsx
@@ -1,19 +1,23 @@
 import { Badge, Button, Text } from '@mantine/core';
 import { IconCertificate } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { Bilingual, IssuedLicense } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS } from '@ema-platform/auth';
 
-export function certificateColumns(deps: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  localized: (value: Bilingual | undefined) => string;
-  showDate: (value: string | null | undefined) => string;
-  onDownload: (license: IssuedLicense) => void;
-}): AdvancedColumn<IssuedLicense>[] {
+export function certificateColumns(
+  t: TFunction,
+  deps: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    localized: (value: Bilingual | undefined) => string;
+    showDate: (value: string | null | undefined) => string;
+    onDownload: (license: IssuedLicense) => void;
+  },
+): AdvancedColumn<IssuedLicense>[] {
   return [
     {
-      header: 'Certificate №',
+      header: t('certificates.columns.certificateNumber', 'Certificate №'),
       cell: ({ row }) => (
         <Text ff="monospace" size="sm" fw={600}>
           {row.original.certificateNumber}
@@ -21,32 +25,32 @@ export function certificateColumns(deps: {
       ),
     },
     {
-      header: 'Type',
+      header: t('certificates.columns.type', 'Type'),
       cell: ({ row }) => deps.localized(row.original.licenseType?.name),
     },
     {
-      header: 'Issued',
+      header: t('certificates.columns.issued', 'Issued'),
       cell: ({ row }) => deps.showDate(row.original.issueDate),
     },
     {
-      header: 'Expires',
+      header: t('certificates.columns.expires', 'Expires'),
       cell: ({ row }) => deps.showDate(row.original.expiryDate),
     },
     {
-      header: 'Status',
+      header: t('common.status'),
       cell: ({ row }) => (
         <Badge
           size="sm"
           variant="light"
           color={row.original.status === 'ACTIVE' ? 'green' : 'red'}
         >
-          {row.original.status}
+          {t(`certificates.columns.licenseStatus.${row.original.status}`, row.original.status)}
         </Badge>
       ),
     },
     {
       header: '',
-      label: 'Actions',
+      label: t('common.actions'),
       align: 'right',
       cell: ({ row }) =>
         deps.can([PORTAL_PERMISSIONS.VIEW_OWN_CERTIFICATES]) ? (
@@ -56,7 +60,7 @@ export function certificateColumns(deps: {
             leftSection={<IconCertificate size={14} />}
             onClick={() => deps.onDownload(row.original)}
           >
-            Download
+            {t('common.download')}
           </Button>
         ) : null,
     },
diff --git a/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx b/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
index bdba090ea..2806e20fb 100644
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage/index.tsx
@@ -5,7 +5,6 @@ import {
   Card,
   Group,
   List,
-  Loader,
   Stack,
   Text,
   ThemeIcon,
@@ -18,6 +17,7 @@ import {
   IconInfoCircle,
 } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   STATUS_COLORS,
   STATUS_LABELS,
@@ -70,6 +70,7 @@ function EligibilityItem({ ok, label }: { ok: boolean; label: string }) {
  * issued certificates. The wizard itself is the config-driven licensing flow.
  */
 export function CertificatesPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { profile, isLoading: loadingProfile } = useCurrentProfile();
   const { data: seaTime } = useGetMySeaTimeQuery();
@@ -107,46 +108,63 @@ export function CertificatesPage() {
       const result = await getCertificateUrl(licenseId).unwrap();
       window.open(result.url, '_blank', 'noopener');
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not fetch certificate'));
+      notify.error(
+        extractErrorMessage(error, t('certificates.fetchFailed', 'Could not fetch certificate')),
+      );
     }
   }
 
   if (loadingProfile || loadingApplications) {
-    return <PageLoader label="Loading Certificates…" height={400} />;
+    return <PageLoader label={t('certificates.loading', 'Loading Certificates…')} height={400} />;
   }
 
   const pagedIssued = issuedTable.paginate(issued);
 
   return (
     <Stack maw={860} mx="auto">
-      <Title order={2}>My Certificates</Title>
+      <Title order={2}>{t('certificates.title', 'My Certificates')}</Title>
 
       <Card withBorder radius="md" p="lg">
         <Group justify="space-between" align="flex-start">
           <div>
             <Text fw={600} mb={6}>
-              Eligibility
+              {t('certificates.eligibility.title', 'Eligibility')}
             </Text>
             <List spacing={4} size="sm">
               <EligibilityItem
                 ok={registered}
                 label={
                   registered
-                    ? `Registered seafarer (${profile?.seafarerNumber})`
-                    : 'Active seafarer registration required'
+                    ? t('certificates.eligibility.registered', {
+                        defaultValue: 'Registered seafarer ({{number}})',
+                        number: profile?.seafarerNumber,
+                      })
+                    : t(
+                        'certificates.eligibility.registrationRequired',
+                        'Active seafarer registration required',
+                      )
                 }
               />
               <EligibilityItem
                 ok={hasMedical}
                 label={
                   hasMedical
-                    ? 'Current medical certificate on file'
-                    : 'A current medical certificate is required'
+                    ? t(
+                        'certificates.eligibility.medicalCurrent',
+                        'Current medical certificate on file',
+                      )
+                    : t(
+                        'certificates.eligibility.medicalRequired',
+                        'A current medical certificate is required',
+                      )
                 }
               />
               <EligibilityItem
                 ok={verifiedDays > 0}
-                label={`Verified sea time: ${verifiedDays} days (CoC needs 360, CoP 90)`}
+                label={t('certificates.eligibility.seaTime', {
+                  defaultValue: 'Verified sea time: {{days}} days (CoC needs 360, CoP 90)',
+                  days: verifiedDays,
+                })}
               />
             </List>
           </div>
@@ -157,7 +175,7 @@ export function CertificatesPage() {
                 navigate('/licensing/CERTIFICATE_OF_COMPETENCY/apply')
               }
             >
-              Apply for CoC
+              {t('certificates.applyCoc', 'Apply for CoC')}
             </Button>
             <Button
               variant="light"
@@ -166,29 +184,32 @@ export function CertificatesPage() {
                 navigate('/licensing/CERTIFICATE_OF_PROFICIENCY/apply')
               }
             >
-              Apply for CoP
+              {t('certificates.applyCop', 'Apply for CoP')}
             </Button>
           </Stack>
         </Group>
         {!registered && (
           <Alert color="orange" mt="md" icon={<IconInfoCircle size={16} />}>
-            Complete your{' '}
+            {t('certificates.registrationNotice.prefix', 'Complete your')}{' '}
             <Text
               component="span"
               c="blue"
               style={{ cursor: 'pointer' }}
               onClick={() => navigate('/seafarer-registration')}
             >
-              seafarer registration
+              {t('certificates.registrationNotice.link', 'seafarer registration')}
             </Text>{' '}
-            first — certificate applications are refused without it.
+            {t(
+              'certificates.registrationNotice.suffix',
+              'first — certificate applications are refused without it.',
+            )}
           </Alert>
         )}
       </Card>
 
       {inFlight.length > 0 && (
         <Stack gap="xs">
-          <Title order={4}>Applications in progress</Title>
+          <Title order={4}>{t('certificates.inProgress', 'Applications in progress')}</Title>
           {inFlight.map((app) => (
             <Card key={app.id} withBorder radius="md" p="md">
               <Group justify="space-between">
@@ -200,7 +221,7 @@ export function CertificatesPage() {
                 </div>
                 <Group>
                   <Badge color={STATUS_COLORS[app.status]}>
-                    {STATUS_LABELS[app.status]}
+                    {t(`applications.status.${app.status}`, STATUS_LABELS[app.status])}
                   </Badge>
                   <Button
                     size="compact-sm"
@@ -212,8 +233,8 @@ export function CertificatesPage() {
                     }
                   >
                     {app.status === 'DRAFT' || app.status === 'RESUBMIT_REQUIRED'
-                      ? 'Continue'
-                      : 'View'}
+                      ? t('applications.actions.continue', 'Continue')
+                      : t('applications.actions.view', 'View')}
                   </Button>
                 </Group>
               </Group>
@@ -223,10 +244,10 @@ export function CertificatesPage() {
       )}
 
       <Stack gap="xs">
-        <Title order={4}>Issued certificates</Title>
+        <Title order={4}>{t('certificates.issuedCertificates', 'Issued certificates')}</Title>
         <AdvancedTable
-          tableName="Issued certificates"
-          columns={certificateColumns({
+          tableName={t('certificates.issuedCertificates', 'Issued certificates')}
+          columns={certificateColumns(t, {
             can,
             localized,
             showDate,
@@ -238,7 +259,7 @@ export function CertificatesPage() {
           onPageChange={issuedTable.setPageIndex}
           pageSize={issuedTable.pageSize}
           refresh={refetchLicenses}
-          emptyText="No certificates issued yet."
+          emptyText={t('certificates.emptyIssued', 'No certificates issued yet.')}
         />
       </Stack>
     </Stack>
diff --git a/apps/portal/src/app/features/dashboard/pages/DashboardPage/columns.tsx b/apps/portal/src/app/features/dashboard/pages/DashboardPage/columns.tsx
index 8b7158139..67727442d 100644
--- a/apps/portal/src/app/features/dashboard/pages/DashboardPage/columns.tsx
+++ b/apps/portal/src/app/features/dashboard/pages/DashboardPage/columns.tsx
@@ -1,4 +1,5 @@
 import { Badge, Progress, Text } from '@mantine/core';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import {
   STATUS_COLORS,
@@ -8,10 +9,12 @@ import {
 } from '@ema-platform/api';
 import type { LicenseApplication } from '@ema-platform/api';
 
-export const dashboardApplicationColumns: AdvancedColumn<LicenseApplication>[] =
-  [
+export function dashboardApplicationColumns(
+  t: TFunction,
+): AdvancedColumn<LicenseApplication>[] {
+  return [
     {
-      header: 'Application',
+      header: t('dashboard.table.application'),
       cell: ({ row }) => (
         <>
           <Text size="sm" fw={600}>
@@ -24,13 +27,13 @@ export const dashboardApplicationColumns: AdvancedColumn<LicenseApplication>[] =
       ),
     },
     {
-      header: 'Licence',
+      header: t('applications.table.licence'),
       cell: ({ row }) => (
         <Text size="sm">{localized(row.original.licenseType?.name) || '—'}</Text>
       ),
     },
     {
-      header: 'Status',
+      header: t('common.status'),
       cell: ({ row }) => (
         <Badge variant="light" color={STATUS_COLORS[row.original.status]}>
           {STATUS_LABELS[row.original.status]}
@@ -38,7 +41,7 @@ export const dashboardApplicationColumns: AdvancedColumn<LicenseApplication>[] =
       ),
     },
     {
-      header: 'Progress',
+      header: t('applications.table.progress'),
       size: 180,
       cell: ({ row }) => (
         <Progress
@@ -50,3 +53,4 @@ export const dashboardApplicationColumns: AdvancedColumn<LicenseApplication>[] =
       ),
     },
   ];
+}
diff --git a/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx b/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
index 17f44e7c4..ff01b68dd 100644
--- a/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
+++ b/apps/portal/src/app/features/dashboard/pages/DashboardPage/index.tsx
@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import {
   Alert,
   Anchor,
@@ -10,7 +12,6 @@ import {
   Center,
   Container,
   Group,
-  Loader,
   Paper,
   SimpleGrid,
   Stack,
@@ -64,15 +65,20 @@ function daysUntil(date: string): number {
   return Math.ceil(ms / 86_400_000);
 }
 
-function formatMoney(amount: string | number | null, currency: string): string {
-  if (amount === null || amount === '') return 'No fee';
+function formatMoney(
+  amount: string | number | null,
+  currency: string,
+  t: TFunction,
+): string {
+  if (amount === null || amount === '') return t('dashboard.noFee');
   const value = Number(amount);
-  if (!Number.isFinite(value)) return 'No fee';
+  if (!Number.isFinite(value)) return t('dashboard.noFee');
   return `${value.toLocaleString('en-US')} ${currency}`;
 }
 
 export function DashboardPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const displayName = useSelector(
     (state: { auth: { user?: { name?: { en?: string }; username?: string } } }) =>
       state.auth.user?.name?.en || state.auth.user?.username || '',
@@ -108,7 +114,7 @@ export function DashboardPage() {
   }
 
   if (isLoading) {
-    return <PageLoader label="Loading Dashboard…" height={450} />;
+    return <PageLoader label={t('dashboard.loading')} height={450} />;
   }
 
   return (
@@ -133,17 +139,15 @@ export function DashboardPage() {
             color="orange"
             radius="md"
             icon={<IconClockHour4 size={18} />}
-            title={
-              expiringSoon.length === 1
-                ? 'A licence is expiring soon'
-                : `${expiringSoon.length} licences are expiring soon`
-            }
+            title={t('applications.notice.expiringSoon', { count: expiringSoon.length })}
           >
             <Text size="sm">
               {expiringSoon
-                .map(
-                  (l) =>
-                    `${l.certificateNumber} expires in ${daysUntil(l.expiryDate)} days`,
+                .map((l) =>
+                  t('dashboard.expiringSoon.detail', {
+                    certificateNumber: l.certificateNumber,
+                    days: daysUntil(l.expiryDate),
+                  }),
                 )
                 .join(' · ')}
             </Text>
@@ -161,9 +165,9 @@ export function DashboardPage() {
           <GetStartedPanel />
         ) : (
           <>
-            <Section title="My licences">
+            <Section title={t('dashboard.sections.myLicences.title')}>
               {heldLicenses.length === 0 ? (
-                <EmptyCard message="No licence has been issued to you yet. One appears here once an application is approved and paid." />
+                <EmptyCard message={t('applications.licences.empty')} />
               ) : (
                 <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
                   {heldLicenses.map((license) => (
@@ -181,20 +185,20 @@ export function DashboardPage() {
             </Section>
 
             <Section
-              title="My applications"
+              title={t('dashboard.sections.myApplications.title')}
               action={
                 items.length > 0 ? (
                   <Anchor
                     size="sm"
                     onClick={() => navigate('/licensing/applications')}
                   >
-                    View all
+                    {t('common.viewAll')}
                   </Anchor>
                 ) : undefined
               }
             >
               {items.length === 0 ? (
-                <EmptyCard message="You have not filed any applications yet. Pick a licence below to get started." />
+                <EmptyCard message={t('dashboard.sections.myApplications.empty')} />
               ) : (
                 <ApplicationTable
                   applications={items.slice(0, 6)}
@@ -207,8 +211,8 @@ export function DashboardPage() {
         )}
 
         <Section
-          title="Apply for a licence"
-          description="Choose the licence that matches the service your company provides."
+          title={t('dashboard.sections.apply.title')}
+          description={t('dashboard.sections.apply.description')}
         >
           <LicenseCatalogue />
         </Section>
@@ -228,10 +232,14 @@ function Hero({
   applicationCount: number;
   licenseCount: number;
 }) {
+  const { t } = useTranslation();
   const summary =
     applicationCount === 0 && licenseCount === 0
-      ? 'Apply for a maritime or logistics licence and track it through to issue.'
-      : `You have ${applicationCount} application${applicationCount === 1 ? '' : 's'} and ${licenseCount} active licence${licenseCount === 1 ? '' : 's'}.`;
+      ? t('dashboard.hero.summaryEmpty')
+      : t('dashboard.hero.summary', {
+          applications: t('dashboard.hero.applicationsCount', { count: applicationCount }),
+          licences: t('dashboard.hero.licencesCount', { count: licenseCount }),
+        });
 
   return (
     <Paper
@@ -246,10 +254,10 @@ function Hero({
       <Group justify="space-between" align="flex-start" wrap="nowrap">
         <Box>
           <Text size="sm" style={{ opacity: 0.85 }}>
-            Ethiopian Maritime Authority
+            {t('app.authority')}
           </Text>
           <Title order={2} mt={4} c="white">
-            {displayName ? `Welcome back, ${displayName}` : 'Welcome back'}
+            {displayName ? t('dashboard.welcomeName', { name: displayName }) : t('dashboard.welcome')}
           </Title>
           <Text size="sm" mt="xs" style={{ opacity: 0.9, maxWidth: 560 }}>
             {summary}
@@ -276,6 +284,7 @@ function ActionRequired({
   applications: LicenseApplication[];
   navigate: (path: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Card
       withBorder
@@ -288,12 +297,12 @@ function ActionRequired({
           <IconAlertTriangle size={14} />
         </ThemeIcon>
         <Text fw={600} size="sm">
-          Waiting on you
+          {t('dashboard.waitingOnYou')}
         </Text>
       </Group>
       <Stack gap="xs">
         {applications.map((app) => {
-          const detail = detailFor(app);
+          const detail = detailFor(app, t);
           return (
             <Paper key={app.id} radius="sm" p="sm" withBorder>
               <Group justify="space-between" wrap="nowrap">
@@ -335,7 +344,10 @@ function ActionRequired({
 }
 
 /** What the applicant has to do next, and where that happens. */
-function detailFor(app: LicenseApplication): {
+function detailFor(
+  app: LicenseApplication,
+  t: TFunction,
+): {
   message: string;
   cta: string;
   color: string;
@@ -349,22 +361,24 @@ function detailFor(app: LicenseApplication): {
   switch (app.status) {
     case 'RESUBMIT_REQUIRED':
       return {
-        message: 'A reviewer asked for corrections before this can proceed.',
-        cta: 'Fix now',
+        message: t('dashboard.actionRequired.messages.resubmit'),
+        cta: t('dashboard.actionRequired.cta.fixNow'),
         color: 'orange',
         path: wizard,
       };
     case 'PAYMENT_PENDING':
       return {
-        message: `Approved — ${formatMoney(app.feeAmount, app.feeCurrency ?? 'ETB')} due before the certificate is issued.`,
-        cta: 'Pay now',
+        message: t('dashboard.actionRequired.messages.paymentPending', {
+          amount: formatMoney(app.feeAmount, app.feeCurrency ?? 'ETB', t),
+        }),
+        cta: t('dashboard.actionRequired.cta.payNow'),
         color: 'yellow',
         path: '/licensing/applications',
       };
     default:
       return {
-        message: 'This application is still a draft and has not been filed.',
-        cta: 'Continue',
+        message: t('dashboard.actionRequired.messages.draft'),
+        cta: t('common.continue'),
         color: 'blue',
         path: wizard,
       };
@@ -382,11 +396,12 @@ function StatRow({
   activeLicenses: number;
   expiringSoon: number;
 }) {
+  const { t } = useTranslation();
   const stats = [
-    { label: 'In progress', value: inProgress, icon: IconClockHour4, color: 'blue' },
-    { label: 'Waiting on you', value: needsMe, icon: IconAlertTriangle, color: 'orange' },
-    { label: 'Active licences', value: activeLicenses, icon: IconCertificate, color: 'teal' },
-    { label: 'Expiring soon', value: expiringSoon, icon: IconClockHour4, color: 'grape' },
+    { label: t('applications.stats.inProgress'), value: inProgress, icon: IconClockHour4, color: 'blue' },
+    { label: t('dashboard.waitingOnYou'), value: needsMe, icon: IconAlertTriangle, color: 'orange' },
+    { label: t('applications.stats.activeLicences'), value: activeLicenses, icon: IconCertificate, color: 'teal' },
+    { label: t('dashboard.stats.expiringSoon'), value: expiringSoon, icon: IconClockHour4, color: 'grape' },
   ];
 
   return (
@@ -452,12 +467,13 @@ function ApplicationTable({
   navigate: (path: string) => void;
   onRefresh: () => void;
 }) {
+  const { t } = useTranslation();
   const table = useServerTable();
   const paged = table.paginate(applications);
   return (
     <AdvancedTable
-      tableName="My applications"
-      columns={dashboardApplicationColumns}
+      tableName={t('dashboard.sections.myApplications.title')}
+      columns={dashboardApplicationColumns(t)}
       data={paged.rows}
       itemCount={paged.itemCount}
       pageIndex={paged.pageIndex}
@@ -482,6 +498,7 @@ function ApplicationTable({
  * it, and a button that only scrolls the page is noise.
  */
 function GetStartedPanel() {
+  const { t } = useTranslation();
   return (
     <Card withBorder radius="md" padding="xl">
       <Group gap="md" wrap="nowrap" align="flex-start">
@@ -489,11 +506,9 @@ function GetStartedPanel() {
           <IconCertificate size={24} stroke={1.5} />
         </ThemeIcon>
         <Box>
-          <Title order={4}>Get started</Title>
+          <Title order={4}>{t('dashboard.getStarted.title')}</Title>
           <Text size="sm" c="dimmed" mt={4} maw={620}>
-            You have not filed an application yet. Choose the licence that
-            matches what your company does — your applications and the licences
-            issued to you will appear here as you go.
+            {t('dashboard.getStarted.body')}
           </Text>
         </Box>
       </Group>
diff --git a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
index a521c7e69..172419552 100644
--- a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
+++ b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@mantine/core';
 import { FeatureUnavailable } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Placeholder until this feature has a backend.
@@ -8,11 +9,13 @@ import { FeatureUnavailable } from '@ema-platform/ui';
  * indistinguishable from real ones.
  */
 export function DocumentVaultPage() {
+  const { t } = useTranslation();
+
   return (
     <Container size="lg" py="xl">
       <FeatureUnavailable
-        title="My documents"
-        description="A central document vault is not connected to the backend yet. Documents you upload with a licence application are stored with that application."
+        title={t('featureUnavailable.documents.title')}
+        description={t('featureUnavailable.documents.description')}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
index fa33be9d1..40c4e109f 100644
--- a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
+++ b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
@@ -5,21 +5,19 @@ import {
   Card,
   Group,
   List,
-  Loader,
   Stack,
-  Table,
   Text,
   ThemeIcon,
   Title,
 } from '@mantine/core';
 import {
   IconArrowRight,
-  IconCertificate,
   IconCircleCheck,
   IconCircleX,
   IconInfoCircle,
 } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   STATUS_COLORS,
   STATUS_LABELS,
@@ -31,8 +29,9 @@ import {
   useGetMyLicensesQuery,
 } from '@ema-platform/api';
 import { useCurrentProfile } from '@ema-platform/auth';
-import { PageLoader, notify } from '@ema-platform/ui';
+import { AdvancedTable, PageLoader, notify, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
+import { endorsementColumns } from './columns';
 
 const ENDORSEMENT_TYPE_KEYS = ['ENDORSEMENT_COC', 'ENDORSEMENT_GOC'];
 
@@ -62,6 +61,7 @@ function EligibilityItem({ ok, label }: { ok: boolean; label: string }) {
  * config-driven licensing flow.
  */
 export function EndorsementPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { profile, isLoading: loadingProfile } = useCurrentProfile();
   const { data: applications, isLoading: loadingApplications } =
@@ -70,6 +70,7 @@ export function EndorsementPage() {
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [getCertificateUrl] = useGetCertificateUrlMutation();
+  const issuedTable = useServerTable();
 
   const registered =
     Boolean(profile?.seafarerNumber) && profile?.seafarerStatus === 'ACTIVE';
@@ -83,37 +84,46 @@ export function EndorsementPage() {
   const issued = (licenses?.items ?? []).filter((license) =>
     ENDORSEMENT_TYPE_KEYS.includes(license.licenseType?.key ?? ''),
   );
+  const issuedPage = issuedTable.paginate(issued);
 
   async function download(licenseId: string) {
     try {
       const result = await getCertificateUrl(licenseId).unwrap();
       window.open(result.url, '_blank', 'noopener');
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not fetch endorsement'));
+      notify.error(
+        extractErrorMessage(error, t('endorsement.fetchFailed', 'Could not fetch endorsement')),
+      );
     }
   }
 
   if (loadingProfile || loadingApplications) {
-    return <PageLoader label="Loading Endorsements…" height={400} />;
+    return <PageLoader label={t('endorsement.loading', 'Loading Endorsements…')} height={400} />;
   }
 
   return (
     <Stack maw={860} mx="auto">
-      <Title order={2}>My Endorsements</Title>
+      <Title order={2}>{t('endorsement.title', 'My Endorsements')}</Title>
 
       <Card withBorder radius="md" p="lg">
         <Group justify="space-between" align="flex-start">
           <div>
             <Text fw={600} mb={6}>
-              Eligibility
+              {t('endorsement.eligibility.title', 'Eligibility')}
             </Text>
             <List spacing={4} size="sm">
               <EligibilityItem
                 ok={registered}
                 label={
                   registered
-                    ? `Registered seafarer (${profile?.seafarerNumber})`
-                    : 'Active seafarer registration required'
+                    ? t('endorsement.eligibility.registered', {
+                        defaultValue: 'Registered seafarer ({{number}})',
+                        number: profile?.seafarerNumber,
+                      })
+                    : t(
+                        'endorsement.eligibility.registrationRequired',
+                        'Active seafarer registration required',
+                      )
                 }
               />
             </List>
@@ -123,36 +133,39 @@ export function EndorsementPage() {
               rightSection={<IconArrowRight size={16} />}
               onClick={() => navigate('/licensing/ENDORSEMENT_COC/apply')}
             >
-              Endorse a CoC
+              {t('endorsement.endorseCoc', 'Endorse a CoC')}
             </Button>
             <Button
               variant="light"
               rightSection={<IconArrowRight size={16} />}
               onClick={() => navigate('/licensing/ENDORSEMENT_GOC/apply')}
             >
-              Endorse a GOC
+              {t('endorsement.endorseGoc', 'Endorse a GOC')}
             </Button>
           </Stack>
         </Group>
         {!registered && (
           <Alert color="orange" mt="md" icon={<IconInfoCircle size={16} />}>
-            Complete your{' '}
+            {t('endorsement.registrationNotice.prefix', 'Complete your')}{' '}
             <Text
               component="span"
               c="blue"
               style={{ cursor: 'pointer' }}
               onClick={() => navigate('/seafarer-registration')}
             >
-              seafarer registration
+              {t('endorsement.registrationNotice.link', 'seafarer registration')}
             </Text>{' '}
-            first — endorsement applications are refused without it.
+            {t(
+              'endorsement.registrationNotice.suffix',
+              'first — endorsement applications are refused without it.',
+            )}
           </Alert>
         )}
       </Card>
 
       {inFlight.length > 0 && (
         <Stack gap="xs">
-          <Title order={4}>Applications in progress</Title>
+          <Title order={4}>{t('endorsement.inProgress', 'Applications in progress')}</Title>
           {inFlight.map((app) => (
             <Card key={app.id} withBorder radius="md" p="md">
               <Group justify="space-between">
@@ -164,7 +177,7 @@ export function EndorsementPage() {
                 </div>
                 <Group>
                   <Badge color={STATUS_COLORS[app.status]}>
-                    {STATUS_LABELS[app.status]}
+                    {t(`applications.status.${app.status}`, STATUS_LABELS[app.status])}
                   </Badge>
                   <Button
                     size="compact-sm"
@@ -176,8 +189,8 @@ export function EndorsementPage() {
                     }
                   >
                     {app.status === 'DRAFT' || app.status === 'RESUBMIT_REQUIRED'
-                      ? 'Continue'
-                      : 'View'}
+                      ? t('applications.actions.continue', 'Continue')
+                      : t('applications.actions.view', 'View')}
                   </Button>
                 </Group>
               </Group>
@@ -187,62 +200,17 @@ export function EndorsementPage() {
       )}
 
       <Stack gap="xs">
-        <Title order={4}>Issued endorsements</Title>
-        {issued.length === 0 ? (
-          <Card withBorder radius="md" p="lg">
-            <Text size="sm" c="dimmed" ta="center">
-              No endorsements issued yet.
-            </Text>
-          </Card>
-        ) : (
-          <Table.ScrollContainer minWidth={640}>
-            <Table striped>
-              <Table.Thead>
-                <Table.Tr>
-                  <Table.Th>Certificate №</Table.Th>
-                  <Table.Th>Type</Table.Th>
-                  <Table.Th>Issued</Table.Th>
-                  <Table.Th>Expires</Table.Th>
-                  <Table.Th>Status</Table.Th>
-                  <Table.Th />
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {issued.map((license) => (
-                  <Table.Tr key={license.id}>
-                    <Table.Td>
-                      <Text ff="monospace" size="sm" fw={600}>
-                        {license.certificateNumber}
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>{localized(license.licenseType?.name)}</Table.Td>
-                    <Table.Td>{showDate(license.issueDate)}</Table.Td>
-                    <Table.Td>{showDate(license.expiryDate)}</Table.Td>
-                    <Table.Td>
-                      <Badge
-                        size="sm"
-                        variant="light"
-                        color={license.status === 'ACTIVE' ? 'green' : 'red'}
-                      >
-                        {license.status}
-                      </Badge>
-                    </Table.Td>
-                    <Table.Td>
-                      <Button
-                        size="compact-xs"
-                        variant="subtle"
-                        leftSection={<IconCertificate size={14} />}
-                        onClick={() => download(license.id)}
-                      >
-                        Download
-                      </Button>
-                    </Table.Td>
-                  </Table.Tr>
-                ))}
-              </Table.Tbody>
-            </Table>
-          </Table.ScrollContainer>
-        )}
+        <Title order={4}>{t('endorsement.issuedEndorsements', 'Issued endorsements')}</Title>
+        <AdvancedTable
+          tableName={t('endorsement.issuedEndorsements', 'Issued endorsements')}
+          columns={endorsementColumns({ t, showDate, localized, onDownload: download })}
+          data={issuedPage.rows}
+          itemCount={issuedPage.itemCount}
+          pageIndex={issuedPage.pageIndex}
+          onPageChange={issuedTable.setPageIndex}
+          pageSize={issuedTable.pageSize}
+          emptyText={t('endorsement.emptyIssued', 'No endorsements issued yet.')}
+        />
       </Stack>
     </Stack>
   );
diff --git a/apps/portal/src/app/features/endorsement/pages/columns.tsx b/apps/portal/src/app/features/endorsement/pages/columns.tsx
new file mode 100644
index 000000000..eb4b8fe38
--- /dev/null
+++ b/apps/portal/src/app/features/endorsement/pages/columns.tsx
@@ -0,0 +1,71 @@
+import { Badge, Button, Text } from '@mantine/core';
+import { IconCertificate } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
+import type { AdvancedColumn } from '@ema-platform/ui';
+import type { Bilingual, IssuedLicense } from '@ema-platform/api';
+
+interface EndorsementColumnsArgs {
+  t: TFunction;
+  showDate: (date: string) => string;
+  localized: (value: Bilingual | undefined) => string;
+  onDownload: (licenseId: string) => void;
+}
+
+export function endorsementColumns({
+  t,
+  showDate,
+  localized,
+  onDownload,
+}: EndorsementColumnsArgs): AdvancedColumn<IssuedLicense>[] {
+  return [
+    {
+      header: t('endorsement.columns.certificateNumber', 'Certificate №'),
+      accessorKey: 'certificateNumber',
+      cell: ({ row }) => (
+        <Text ff="monospace" size="sm" fw={600}>
+          {row.original.certificateNumber}
+        </Text>
+      ),
+    },
+    {
+      header: t('endorsement.columns.type', 'Type'),
+      cell: ({ row }) => localized(row.original.licenseType?.name),
+    },
+    {
+      header: t('endorsement.columns.issued', 'Issued'),
+      cell: ({ row }) => showDate(row.original.issueDate),
+    },
+    {
+      header: t('endorsement.columns.expires', 'Expires'),
+      cell: ({ row }) => showDate(row.original.expiryDate),
+    },
+    {
+      header: t('common.status'),
+      cell: ({ row }) => (
+        <Badge
+          size="sm"
+          variant="light"
+          color={row.original.status === 'ACTIVE' ? 'green' : 'red'}
+        >
+          {t(
+            `endorsement.columns.licenseStatus.${row.original.status}`,
+            row.original.status,
+          )}
+        </Badge>
+      ),
+    },
+    {
+      header: '',
+      cell: ({ row }) => (
+        <Button
+          size="compact-xs"
+          variant="subtle"
+          leftSection={<IconCertificate size={14} />}
+          onClick={() => onDownload(row.original.id)}
+        >
+          {t('common.download')}
+        </Button>
+      ),
+    },
+  ];
+}
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
index f58e39a7f..61f2be723 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
@@ -1,5 +1,6 @@
 import { Badge, Button, Text } from '@mantine/core';
 import { IconFileText, IconGavel } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { Bilingual } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS } from '@ema-platform/auth';
@@ -19,16 +20,19 @@ const ATTENDANCE_COLOR: Record<AttendanceStatus, string> = {
   DISQUALIFIED: 'red',
 };
 
-export function registrationColumns(deps: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  localized: (value: Bilingual | undefined) => string;
-  showDate: (value: string | null | undefined) => string;
-  onDownloadSlip: (registration: MyRegistration) => void;
-}): AdvancedColumn<MyRegistration>[] {
+export function registrationColumns(
+  t: TFunction,
+  deps: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    localized: (value: Bilingual | undefined) => string;
+    showDate: (value: string | null | undefined) => string;
+    onDownloadSlip: (registration: MyRegistration) => void;
+  },
+): AdvancedColumn<MyRegistration>[] {
   return [
     {
-      header: 'Admission №',
+      header: t('exams.columns.admission'),
       cell: ({ row }) => (
         <Text ff="monospace" size="sm" fw={600}>
           {row.original.admissionNumber}
@@ -36,19 +40,19 @@ export function registrationColumns(deps: {
       ),
     },
     {
-      header: 'Examination',
+      header: t('exams.columns.examination'),
       cell: ({ row }) => deps.localized(row.original.exam?.title) || '—',
     },
     {
-      header: 'Date',
+      header: t('exams.columns.date'),
       cell: ({ row }) => deps.showDate(row.original.exam?.date),
     },
     {
-      header: 'Venue',
+      header: t('exams.columns.venue'),
       cell: ({ row }) => row.original.exam?.venue ?? '—',
     },
     {
-      header: 'Attempt',
+      header: t('exams.columns.attempt'),
       cell: ({ row }) => (
         <Badge
           size="sm"
@@ -56,25 +60,25 @@ export function registrationColumns(deps: {
           color={row.original.kind === 'RETAKE' ? 'orange' : 'blue'}
         >
           {row.original.kind === 'RETAKE'
-            ? `Retake · ${row.original.attemptNumber}`
-            : 'First sitting'}
+            ? t('exams.columns.retake', { n: row.original.attemptNumber })
+            : t('exams.columns.firstSitting')}
         </Badge>
       ),
     },
     {
-      header: 'Attendance',
+      header: t('exams.columns.attendance'),
       cell: ({ row }) => (
         <Badge
           size="sm"
           variant="light"
           color={ATTENDANCE_COLOR[row.original.attendanceStatus] ?? 'gray'}
         >
-          {row.original.attendanceStatus}
+          {t(`exams.columns.attendanceStatus.${row.original.attendanceStatus}`)}
         </Badge>
       ),
     },
     {
-      header: 'Slip',
+      header: t('exams.columns.slip'),
       cell: ({ row }) =>
         deps.can([PORTAL_PERMISSIONS.VIEW_OWN_EXAM]) ? (
           <Button
@@ -83,32 +87,35 @@ export function registrationColumns(deps: {
             leftSection={<IconFileText size={13} />}
             onClick={() => deps.onDownloadSlip(row.original)}
           >
-            Slip
+            {t('exams.columns.slip')}
           </Button>
         ) : null,
     },
   ];
 }
 
-export function resultColumns(deps: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  localized: (value: Bilingual | undefined) => string;
-  showDate: (value: string | null | undefined) => string;
-  appeals: MyAppeal[];
-  onAppeal: (result: MyResult) => void;
-}): AdvancedColumn<MyResult>[] {
+export function resultColumns(
+  t: TFunction,
+  deps: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    localized: (value: Bilingual | undefined) => string;
+    showDate: (value: string | null | undefined) => string;
+    appeals: MyAppeal[];
+    onAppeal: (result: MyResult) => void;
+  },
+): AdvancedColumn<MyResult>[] {
   return [
     {
-      header: 'Examination',
+      header: t('exams.columns.examination'),
       cell: ({ row }) => deps.localized(row.original.exam?.title) || '—',
     },
     {
-      header: 'Published',
+      header: t('exams.columns.published'),
       cell: ({ row }) => deps.showDate(row.original.publishedAt),
     },
     {
-      header: 'Score',
+      header: t('exams.columns.score'),
       cell: ({ row }) => (
         <Text fw={600} size="sm">
           {row.original.totalScore}
@@ -116,23 +123,24 @@ export function resultColumns(deps: {
       ),
     },
     {
-      header: 'Outcome',
+      header: t('exams.columns.outcome'),
       cell: ({ row }) => (
         <Badge
           variant="light"
           color={row.original.status === 'PASSED' ? 'teal' : 'red'}
         >
-          {row.original.status}
+          {t(`exams.columns.outcomeStatus.${row.original.status}`)}
         </Badge>
       ),
     },
     {
-      header: 'Appeal',
+      header: t('exams.columns.appeal'),
       cell: ({ row }) => {
         const appeal = deps.appeals.find((a) => a.resultId === row.original.id);
         return appeal ? (
           <Badge size="sm" variant="light" color="grape">
-            {appeal.appealNumber} · {appeal.status}
+            {appeal.appealNumber} ·{' '}
+            {t(`exams.columns.appealStatus.${appeal.status}`)}
           </Badge>
         ) : deps.can([PORTAL_PERMISSIONS.VIEW_OWN_EXAM]) ? (
           <Button
@@ -142,7 +150,7 @@ export function resultColumns(deps: {
             leftSection={<IconGavel size={13} />}
             onClick={() => deps.onAppeal(row.original)}
           >
-            Appeal
+            {t('exams.columns.appeal')}
           </Button>
         ) : null;
       },
diff --git a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
index 17b42f336..f2b74bb5a 100644
--- a/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
+++ b/apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Card,
   Group,
-  Loader,
   Modal,
   Stack,
   Text,
@@ -12,6 +11,7 @@ import {
   Title,
 } from '@mantine/core';
 import { IconClipboardList } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { AdvancedTable, PageLoader, notify, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import {
@@ -79,6 +79,7 @@ export interface MyAppeal {
  * when a mark looks wrong.
  */
 export function ExamsPage() {
+  const { t } = useTranslation();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [appealFor, setAppealFor] = useState<MyResult | null>(null);
@@ -123,18 +124,21 @@ export function ExamsPage() {
         method: 'POST',
       }).unwrap()) as { admissionNumber?: string };
       notify.success(
-        `Registered — admission number ${result.admissionNumber ?? 'issued'}`,
+        t('exams.notify.registered', {
+          admissionNumber:
+            result.admissionNumber ?? t('exams.notify.admissionNumberPending'),
+        }),
       );
       refetch();
     } catch (error) {
-      const key = extractErrorMessage(error, 'Could not register');
+      const key = extractErrorMessage(error, t('exams.notify.registerFailed'));
       notify.error(
         key === 'seafarer_registration_required'
-          ? 'An active seafarer registration is required to sit examinations.'
+          ? t('exams.notify.seafarerRequired')
           : key === 'already_registered_for_exam'
-            ? 'You are already registered for this session.'
+            ? t('exams.notify.alreadyRegistered')
             : key === 'subject_already_passed'
-              ? 'You have already passed this subject — a resit is not needed.'
+              ? t('exams.notify.alreadyPassed')
               : key,
       );
     }
@@ -148,7 +152,7 @@ export function ExamsPage() {
       );
     } catch (error) {
       notify.error(
-        extractErrorMessage(error, 'Could not generate the admission slip'),
+        extractErrorMessage(error, t('exams.notify.slipFailed')),
       );
     }
   };
@@ -161,24 +165,26 @@ export function ExamsPage() {
         method: 'POST',
         body: { reason: appealReason.trim() },
       }).unwrap()) as { appealNumber?: string };
-      notify.success(`Appeal ${appeal.appealNumber ?? ''} submitted`);
+      notify.success(
+        t('exams.notify.appealSubmitted', { appealNumber: appeal.appealNumber ?? '' }),
+      );
       setAppealFor(null);
       setAppealReason('');
       refetchAppeals();
     } catch (error) {
-      const key = extractErrorMessage(error, 'Could not submit the appeal');
+      const key = extractErrorMessage(error, t('exams.notify.appealFailed'));
       notify.error(
         key.startsWith('appeal_window_closed')
-          ? `The appeal window (${key.split(':')[1] ?? ''} days from publication) has closed.`
+          ? t('exams.notify.appealWindowClosed', { days: key.split(':')[1] ?? '' })
           : key === 'appeal_already_open'
-            ? 'An appeal on this result is already being considered.'
+            ? t('exams.notify.appealAlreadyOpen')
             : key,
       );
     }
   };
 
   if (loadingOpen || loadingMine || loadingResults) {
-    return <PageLoader label="Loading Exam Schedule…" height={400} />;
+    return <PageLoader label={t('exams.loading')} height={400} />;
   }
 
   const pagedRegistrations = registrationTable.paginate(mine ?? []);
@@ -186,14 +192,14 @@ export function ExamsPage() {
 
   return (
     <Stack maw={900} mx="auto">
-      <Title order={2}>Examinations</Title>
+      <Title order={2}>{t('exams.title')}</Title>
 
       <Stack gap="xs">
-        <Title order={4}>Open sessions</Title>
+        <Title order={4}>{t('exams.openSessions')}</Title>
         {(open ?? []).length === 0 ? (
           <Card withBorder radius="md" p="lg">
             <Text size="sm" c="dimmed" ta="center">
-              No upcoming sessions are open for registration.
+              {t('exams.noOpenSessions')}
             </Text>
           </Card>
         ) : (
@@ -210,7 +216,7 @@ export function ExamsPage() {
                 </div>
                 {registeredExamIds.has(exam.id) ? (
                   <Badge color="teal" variant="light">
-                    Registered
+                    {t('exams.registered')}
                   </Badge>
                 ) : (
                   <RequirePermission anyOf={[PORTAL_PERMISSIONS.APPLY_EXAM]} hideOnly>
@@ -220,7 +226,7 @@ export function ExamsPage() {
                       leftSection={<IconClipboardList size={14} />}
                       onClick={() => register(exam)}
                     >
-                      Register
+                      {t('exams.register')}
                     </Button>
                   </RequirePermission>
                 )}
@@ -231,10 +237,10 @@ export function ExamsPage() {
       </Stack>
 
       <Stack gap="xs">
-        <Title order={4}>My registrations</Title>
+        <Title order={4}>{t('exams.myRegistrations')}</Title>
         <AdvancedTable<MyRegistration>
-          tableName="My registrations"
-          columns={registrationColumns({
+          tableName={t('exams.myRegistrations')}
+          columns={registrationColumns(t, {
             can,
             localized,
             showDate,
@@ -246,15 +252,15 @@ export function ExamsPage() {
           onPageChange={registrationTable.setPageIndex}
           pageSize={registrationTable.pageSize}
           refresh={refetch}
-          emptyText="No exam registrations yet."
+          emptyText={t('exams.noRegistrations')}
         />
       </Stack>
 
       <Stack gap="xs">
-        <Title order={4}>My results</Title>
+        <Title order={4}>{t('exams.myResults')}</Title>
         <AdvancedTable<MyResult>
-          tableName="My results"
-          columns={resultColumns({
+          tableName={t('exams.myResults')}
+          columns={resultColumns(t, {
             can,
             localized,
             showDate,
@@ -267,40 +273,42 @@ export function ExamsPage() {
           onPageChange={resultTable.setPageIndex}
           pageSize={resultTable.pageSize}
           refresh={refetchResults}
-          emptyText="No results have been published yet. Marks appear here once the authority approves and publishes them."
+          emptyText={t('exams.noResults')}
         />
       </Stack>
 
       <Modal
         opened={Boolean(appealFor)}
         onClose={() => setAppealFor(null)}
-        title="Request a review of this result"
+        title={t('exams.appealModal.title')}
         radius="lg"
       >
         <Stack>
           <Text size="sm" c="dimmed">
-            Explain what you believe went wrong with the marking or the
-            administration of {localized(appealFor?.exam?.title) || 'this examination'}.
-            Appeals must be lodged within 14 days of publication.
+            {t('exams.appealModal.body', {
+              examTitle:
+                localized(appealFor?.exam?.title) ||
+                t('exams.appealModal.defaultExamTitle'),
+            })}
           </Text>
           <Textarea
             minRows={4}
             autosize
-            label="Grounds for appeal"
+            label={t('exams.appealModal.reasonLabel')}
             value={appealReason}
             onChange={(event) => setAppealReason(event.currentTarget.value)}
             required
           />
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setAppealFor(null)}>
-              Cancel
+              {t('common.cancel')}
             </Button>
             <Button
               loading={appealing}
               disabled={appealReason.trim().length === 0}
               onClick={submitAppeal}
             >
-              Submit appeal
+              {t('exams.appealModal.submit')}
             </Button>
           </Group>
         </Stack>
diff --git a/apps/portal/src/app/features/licensing/components/ConfigDrivenSection.tsx b/apps/portal/src/app/features/licensing/components/ConfigDrivenSection.tsx
index 8fd15be76..46002ba21 100644
--- a/apps/portal/src/app/features/licensing/components/ConfigDrivenSection.tsx
+++ b/apps/portal/src/app/features/licensing/components/ConfigDrivenSection.tsx
@@ -14,6 +14,7 @@ import {
   type Vessel,
 } from '@ema-platform/api';
 import { AmharicDatePicker, CountrySelect } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   section: FormSectionConfig;
@@ -97,6 +98,7 @@ export function ConfigDrivenSection({
   onVesselSelected,
 }: Props) {
   const localized = useLocalized();
+  const { t } = useTranslation();
   const fields = [...(section.fields ?? [])].sort(
     (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),
   );
@@ -140,7 +142,7 @@ export function ConfigDrivenSection({
             ) : isVesselPicker ? (
               <Select
                 {...common}
-                placeholder="Select a registered vessel"
+                placeholder={t('licensing.vesselPicker.placeholder')}
                 data={vessels.map((v) => ({ value: v.id, label: `${v.name} — ${v.registrationNumber}` }))}
                 value={(value as string) ?? null}
                 onChange={(v) => {
diff --git a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
index 85a36d046..25349d681 100644
--- a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
+++ b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react';
 import {
-  ActionIcon,
   Alert,
   Badge,
   Button,
@@ -15,7 +14,6 @@ import {
   IconAlertTriangle,
   IconCheck,
   IconFileUpload,
-  IconTrash,
 } from '@tabler/icons-react';
 import {
   conditionHolds,
@@ -24,6 +22,7 @@ import {
   type Attachment,
   type DocumentRequirement,
 } from '@ema-platform/api';
+import { useTranslation } from 'react-i18next';
 
 const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
 
@@ -59,6 +58,7 @@ export function DocumentSlots({
   readOnly,
 }: Props) {
   const localized = useLocalized();
+  const { t } = useTranslation();
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const resetRefs = useRef<Record<string, () => void>>({});
@@ -73,7 +73,11 @@ export function DocumentSlots({
   async function handle(documentKey: string, file: File | null) {
     if (!file) return;
     if (file.size > MAX_FILE_SIZE_BYTES) {
-      setError(`File exceeds 5MB limit (${(file.size / 1024 / 1024).toFixed(1)}MB).`);
+      setError(
+        t('licensing.msg.fileTooLarge', {
+          size: `${(file.size / 1024 / 1024).toFixed(1)}MB`,
+        }),
+      );
       resetRefs.current[documentKey]?.();
       return;
     }
@@ -121,17 +125,17 @@ export function DocumentSlots({
                   </Text>
                   {requirement.mode === 'CONDITIONAL' && (
                     <Badge size="xs" variant="light" color="grape">
-                      conditional
+                      {t('licensing.documents.conditional')}
                     </Badge>
                   )}
                   {requirement.mode === 'OPTIONAL' && (
                     <Badge size="xs" variant="light" color="gray">
-                      optional
+                      {t('common.optional')}
                     </Badge>
                   )}
                   {uploaded && !flagRemark && (
                     <Badge size="xs" color="teal" leftSection={<IconCheck size={10} />}>
-                      uploaded
+                      {t('licensing.documents.uploaded')}
                     </Badge>
                   )}
                 </Group>
@@ -143,7 +147,7 @@ export function DocumentSlots({
                 )}
                 {flagRemark && (
                   <Text size="xs" c="orange.7" mt={4}>
-                    Officer: {flagRemark}
+                    {t('licensing.documents.officerRemark', { name: flagRemark })}
                   </Text>
                 )}
               </div>
@@ -157,7 +161,7 @@ export function DocumentSlots({
                     href={existing.files[0].url}
                     target="_blank"
                   >
-                    View
+                    {t('licensing.documents.view')}
                   </Button>
                 )}
                 {!locked && (
@@ -182,7 +186,9 @@ export function DocumentSlots({
                         }
                         disabled={busy === requirement.key}
                       >
-                        {uploaded ? 'Replace' : 'Upload'}
+                        {uploaded
+                          ? t('licensing.documents.replace')
+                          : t('licensing.documents.upload')}
                       </Button>
                     )}
                   </FileButton>
diff --git a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
index baab1a8c4..c8942a140 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCard.tsx
@@ -19,6 +19,7 @@ import {
 } from '@ema-platform/api';
 import { notify } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
+import { useTranslation } from 'react-i18next';
 import {
   LICENSE_PERMISSIONS,
   PORTAL_PERMISSIONS,
@@ -36,6 +37,7 @@ import {
  */
 export function useRenewLicense() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [createApplication, { isLoading: isRenewing }] =
     useCreateApplicationMutation();
 
@@ -50,7 +52,7 @@ export function useRenewLicense() {
       }).unwrap();
       navigate(`/licensing/${typeKey}/applications/${application.id}`);
     } catch (err) {
-      notify.error(extractErrorMessage(err), 'Could not start the renewal');
+      notify.error(extractErrorMessage(err), t('licensing.card.renewFailed'));
     }
   }
 
@@ -82,13 +84,14 @@ export function LicenseCard({
   const renewable = license.renewable ?? false;
   const showDate = useDateDisplayer();
   const localized = useLocalized();
+  const { t } = useTranslation();
 
   return (
     <Card withBorder radius="md" padding="md" className="ema-hover-lift">
       <Group justify="space-between" align="flex-start" wrap="nowrap">
         <Box>
           <Text size="sm" fw={600}>
-            {localized(license.licenseType?.name) || 'Licence'}
+            {localized(license.licenseType?.name) || t('licensing.card.fallbackName')}
           </Text>
           <Text size="xs" c="dimmed" mt={2}>
             {license.certificateNumber}
@@ -99,7 +102,7 @@ export function LicenseCard({
           variant="light"
           color={expired ? 'red' : license.status === 'ACTIVE' ? 'teal' : 'gray'}
         >
-          {expired ? 'Expired' : license.status}
+          {expired ? t('licensing.card.expired') : license.status}
         </Badge>
       </Group>
 
@@ -107,11 +110,10 @@ export function LicenseCard({
 
       <Group justify="space-between" align="center">
         <Box>
-          <Text size="xs" c="dimmed">
-            {expired ? 'Expired on' : 'Valid until'}
-          </Text>
           <Text size="sm" fw={500}>
-            {showDate(license.expiryDate)}
+            {expired
+              ? t('licensing.card.expiredOn', { date: showDate(license.expiryDate) })
+              : t('licensing.card.validUntil', { date: showDate(license.expiryDate) })}
           </Text>
         </Box>
         <RequirePermission
@@ -121,7 +123,7 @@ export function LicenseCard({
           ]}
           hideOnly
         >
-          <Tooltip label="Download certificate">
+          <Tooltip label={t('licensing.card.downloadCertificate')}>
             <ActionIcon
               variant="light"
               radius="md"
@@ -150,8 +152,8 @@ export function LicenseCard({
             onClick={onRenew}
           >
             {expired
-              ? 'Renew — this licence has expired'
-              : `Renew — expires in ${days} day${days === 1 ? '' : 's'}`}
+              ? t('licensing.card.renewExpired')
+              : t('licensing.card.renewDays', { count: days })}
           </Button>
         </RequirePermission>
       )}
diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index e3ac1bf0f..4adb6c072 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -30,6 +30,7 @@ import {
 } from '@ema-platform/api';
 import type { LicenseCategory, LicenseType } from '@ema-platform/api';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
+import { useTranslation } from 'react-i18next';
 
 /**
  * The licence catalogue an applicant chooses from, grouped by category.
@@ -47,16 +48,17 @@ const CATEGORY_ICONS: Record<LicenseCategory, typeof IconShip> = {
   MARITIME_PERSONNEL: IconShip,
 };
 
-function formatFee(amount: string | number | null, currency: string): string {
-  if (amount === null || amount === '') return 'No fee';
+function formatFee(amount: string | number | null, currency: string, noFeeLabel: string): string {
+  if (amount === null || amount === '') return noFeeLabel;
   const value = Number(amount);
-  if (!Number.isFinite(value)) return 'No fee';
+  if (!Number.isFinite(value)) return noFeeLabel;
   return `${value.toLocaleString('en-US')} ${currency}`;
 }
 
 export function LicenseCatalogue() {
   const navigate = useNavigate();
   const localized = useLocalized();
+  const { t } = useTranslation();
   const { data: types } = useGetLicenseTypesQuery();
   const { data: categories } = useGetLicenseCategoriesQuery();
   const { data: operatorTypes, isLoading: loadingOperatorTypes } =
@@ -111,19 +113,17 @@ export function LicenseCatalogue() {
             <IconBuildingWarehouse size={18} />
           </ThemeIcon>
           <Text size="sm" fw={600}>
-            Tell us what you operate as
+            {t('licensing.catalogue.emptyTitle')}
           </Text>
           <Text size="sm" c="dimmed" ta="center" maw={520}>
-            Licences are offered against your mode of operation — freight
-            forwarder, shipping agent, multimodal transport operator and so on.
-            Choose yours and the licences you can apply for appear here.
+            {t('licensing.catalogue.emptyBody')}
           </Text>
           <Group gap="sm" mt="xs">
             <Button size="xs" onClick={() => navigate('/profile#operations')}>
-              Set my operations
+              {t('licensing.catalogue.setOperations')}
             </Button>
             <Button size="xs" variant="subtle" onClick={() => setShowAll(true)}>
-              Browse all licences
+              {t('licensing.catalogue.browseAll')}
             </Button>
           </Group>
         </Stack>
@@ -140,8 +140,7 @@ export function LicenseCatalogue() {
               <IconFileText size={18} />
             </ThemeIcon>
             <Text size="sm" c="dimmed" ta="center">
-              No licence types are available yet. Contact EMA if you were
-              expecting one.
+              {t('licensing.catalogue.noneAvailable')}
             </Text>
           </Stack>
         </Center>
@@ -162,10 +161,10 @@ export function LicenseCatalogue() {
       {showAll && hasDeclared && (
         <Group gap="xs">
           <Text size="xs" c="dimmed">
-            Showing every licence, including ones outside your operations.
+            {t('licensing.catalogue.showingAll')}
           </Text>
           <Anchor size="xs" onClick={() => setShowAll(false)}>
-            Show only mine
+            {t('licensing.catalogue.showOnlyMine')}
           </Anchor>
         </Group>
       )}
@@ -183,8 +182,8 @@ export function LicenseCatalogue() {
       {orphans.length > 0 && (
         <CategoryGroup
           icon={IconFileText}
-          title="Other licences"
-          description="Licence types that have not been assigned a category."
+          title={t('licensing.catalogue.otherLicences')}
+          description={t('licensing.catalogue.otherLicencesDescription')}
           licenseTypes={orphans}
           canApply={canApply}
           onSelect={select}
@@ -193,10 +192,10 @@ export function LicenseCatalogue() {
       {hasDeclared && !showAll && (
         <Group gap="xs">
           <Text size="xs" c="dimmed">
-            Only licences matching your declared operations are shown.
+            {t('licensing.catalogue.showingMine')}
           </Text>
           <Anchor size="xs" onClick={() => setShowAll(true)}>
-            Browse all licences
+            {t('licensing.catalogue.browseAll')}
           </Anchor>
         </Group>
       )}
@@ -256,6 +255,7 @@ function LicenseTypeCard({
   onSelect: (type: LicenseType) => void;
 }) {
   const localized = useLocalized();
+  const { t } = useTranslation();
   const capital = type.capitalThreshold ? Number(type.capitalThreshold) : null;
 
   return (
@@ -288,23 +288,23 @@ function LicenseTypeCard({
         <Box>
           <Group gap={6} mt="sm">
             <Badge size="sm" variant="light" color="emaPrimary">
-              {formatFee(type.feeNewApplication, type.feeCurrency)}
+              {formatFee(type.feeNewApplication, type.feeCurrency, t('licensing.catalogue.noFee'))}
             </Badge>
             {capital && (
-              <Tooltip label="Minimum capital that must be evidenced by a bank letter">
+              <Tooltip label={t('licensing.catalogue.capitalTooltip')}>
                 <Badge size="sm" variant="light" color="gray">
-                  Capital {capital.toLocaleString('en-US')}
+                  {t('licensing.catalogue.capitalBadge', { amount: capital.toLocaleString('en-US') })}
                 </Badge>
               </Tooltip>
             )}
             {type.issuesCertificate ? (
               <Badge size="sm" variant="light" color="teal">
-                {type.validityMonths} months
+                {t('licensing.catalogue.validityBadge', { months: type.validityMonths })}
               </Badge>
             ) : (
-              <Tooltip label="Concludes with an EMA decision rather than a certificate">
+              <Tooltip label={t('licensing.catalogue.evaluationTooltip')}>
                 <Badge size="sm" variant="light" color="gray">
-                  Evaluation only
+                  {t('licensing.catalogue.evaluationOnly')}
                 </Badge>
               </Tooltip>
             )}
@@ -318,7 +318,9 @@ function LicenseTypeCard({
               color={canApply ? undefined : 'gray'}
               rightSection={<IconArrowRight size={14} />}
             >
-              {canApply ? 'Start application' : 'Add to my operations'}
+              {canApply
+                ? t('licensing.catalogue.startApplication')
+                : t('licensing.catalogue.addToOperations')}
             </Button>
           </RequirePermission>
         </Box>
diff --git a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
index 672b1cf73..c2a91ac43 100644
--- a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
+++ b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { Badge, Button, FileButton, Group, Loader } from '@mantine/core';
+import { useState } from 'react';
+import { Button, FileButton, Group, Loader } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconCheck } from '@tabler/icons-react';
 import {
@@ -8,6 +8,7 @@ import {
   useGetAttachmentsQuery,
   type StaffEvidenceRequirement,
 } from '@ema-platform/api';
+import { useTranslation } from 'react-i18next';
 
 const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
 
@@ -31,6 +32,7 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
   });
   const [busy, setBusy] = useState<string | null>(null);
   const localized = useLocalized();
+  const { t } = useTranslation();
 
   if (!evidence?.length) return null;
 
@@ -49,7 +51,9 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
               if (file.size > MAX_FILE_SIZE_BYTES) {
                 notifications.show({
                   color: 'red',
-                  message: `File exceeds 5MB limit (${(file.size / 1024 / 1024).toFixed(1)}MB).`,
+                  message: t('licensing.msg.fileTooLarge', {
+                    size: `${(file.size / 1024 / 1024).toFixed(1)}MB`,
+                  }),
                 });
                 return;
               }
diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
index 33c2cdb48..0b5093769 100644
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -6,11 +6,9 @@ import {
   Badge,
   Button,
   Card,
-  Center,
   Container,
   Divider,
   Group,
-  Loader,
   Modal,
   NumberInput,
   Paper,
@@ -72,7 +70,7 @@ import { StaffEvidence } from '../components/StaffEvidence';
 export function LicenseApplicationPage() {
   const { typeCode = 'FREIGHT_FORWARDER', applicationId } = useParams();
   const navigate = useNavigate();
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
   const localized = useLocalized();
 
   const { data: config, isLoading: loadingConfig } =
@@ -94,7 +92,7 @@ export function LicenseApplicationPage() {
       .catch((err) =>
         notifications.show({
           color: 'red',
-          title: 'Could not start application',
+          title: t('licenseApplication.notifications.startFailed.title'),
           message: extractErrorMessage(err),
         }),
       );
@@ -212,7 +210,7 @@ export function LicenseApplicationPage() {
   );
 
   if (loadingConfig || !config || !appId || !application) {
-    return <PageLoader label="Loading Application…" height={400} />;
+    return <PageLoader label={t('licenseApplication.loading', 'Loading Application…')} height={400} />;
   }
 
   const readOnly = !['DRAFT', 'RESUBMIT_REQUIRED'].includes(application.status);
@@ -254,7 +252,7 @@ export function LicenseApplicationPage() {
     } catch (err) {
       notifications.show({
         color: 'red',
-        title: 'Could not save',
+        title: t('licenseApplication.notifications.saveFailed.title'),
         message: extractErrorMessage(err),
       });
     }
@@ -268,8 +266,8 @@ export function LicenseApplicationPage() {
       if (Object.keys(errors).length) {
         notifications.show({
           color: 'red',
-          title: 'Incomplete',
-          message: 'Complete the highlighted fields before submitting.',
+          title: t('licenseApplication.notifications.incomplete.title'),
+          message: t('licenseApplication.notifications.incomplete.message'),
         });
         return;
       }
@@ -283,15 +281,15 @@ export function LicenseApplicationPage() {
         await resubmitApplication(appId as string).unwrap();
         notifications.show({
           color: 'teal',
-          title: 'Resubmitted',
-          message: 'Your corrections were sent back to the reviewing officer.',
+          title: t('licenseApplication.notifications.resubmitted.title'),
+          message: t('licenseApplication.notifications.resubmitted.message'),
         });
       } else {
         await submitApplication(appId as string).unwrap();
         notifications.show({
           color: 'teal',
-          title: 'Application submitted',
-          message: 'You will be notified as it progresses.',
+          title: t('licenseApplication.notifications.submitted.title'),
+          message: t('licenseApplication.notifications.submitted.message'),
         });
       }
       navigate('/licensing/applications');
@@ -300,9 +298,9 @@ export function LicenseApplicationPage() {
       setIssues(found);
       notifications.show({
         color: 'red',
-        title: 'Application incomplete',
+        title: t('licenseApplication.notifications.applicationIncomplete.title'),
         message: found.length
-          ? `${found.length} item(s) still need attention.`
+          ? t('licenseApplication.notifications.applicationIncomplete.itemsNeedAttention', { count: found.length })
           : extractErrorMessage(err),
       });
     }
@@ -329,8 +327,8 @@ export function LicenseApplicationPage() {
       if (count > 0) {
         notifications.show({
           color: 'red',
-          title: 'Incomplete',
-          message: `Complete ${count} required field${count > 1 ? 's' : ''} to continue.`,
+          title: t('licenseApplication.notifications.incomplete.title'),
+          message: t('licenseApplication.notifications.incompleteFields', { count }),
         });
         return false;
       }
@@ -344,12 +342,19 @@ export function LicenseApplicationPage() {
             (detail?.staff ?? []).filter((m) => m.roleKey === role.roleKey).length <
             role.minCount,
         )
-        .map((role) => `${localized(role.name)} (${role.minCount} required)`);
+        .map((role) =>
+          t('licenseApplication.notifications.staffIncomplete.roleRequired', {
+            name: localized(role.name),
+            count: role.minCount,
+          }),
+        );
       if (missing.length) {
         notifications.show({
           color: 'red',
-          title: 'Staff incomplete',
-          message: `Still needed: ${missing.join(', ')}.`,
+          title: t('licenseApplication.notifications.staffIncomplete.title'),
+          message: t('licenseApplication.notifications.staffIncomplete.message', {
+            items: missing.join(', '),
+          }),
         });
         return false;
       }
@@ -369,10 +374,19 @@ export function LicenseApplicationPage() {
         .filter((req) => !supplied.has(req.key))
         .map((req) => localized(req.name));
       if (missing.length) {
+        const shown = missing.slice(0, 3).join(', ');
+        const extra =
+          missing.length > 3
+            ? ` ${t('licenseApplication.notifications.documentsMissing.andMore', {
+                count: missing.length - 3,
+              })}`
+            : '';
         notifications.show({
           color: 'red',
-          title: 'Documents missing',
-          message: `Upload: ${missing.slice(0, 3).join(', ')}${missing.length > 3 ? ` and ${missing.length - 3} more` : ''}.`,
+          title: t('licenseApplication.notifications.documentsMissing.title'),
+          message: t('licenseApplication.notifications.documentsMissing.message', {
+            items: shown + extra,
+          }),
         });
         return false;
       }
@@ -419,7 +433,7 @@ export function LicenseApplicationPage() {
           </Text>
         </div>
         <Text size="sm" c="dimmed">
-          Fee: {config.fee ?? '—'} {config.feeCurrency}
+          {t('licenseApplication.fee', { amount: config.fee ?? '—', currency: config.feeCurrency })}
         </Text>
       </Group>
 
@@ -427,7 +441,7 @@ export function LicenseApplicationPage() {
         <Alert
           color="orange"
           icon={<IconAlertTriangle size={16} />}
-          title="Corrections requested"
+          title={t('licenseApplication.correctionsRequested.title')}
           mb="md"
         >
           <Stack gap={4}>
@@ -437,14 +451,14 @@ export function LicenseApplicationPage() {
               </Text>
             ))}
             <Text size="xs" c="dimmed" mt={4}>
-              Only the items listed above can be changed.
+              {t('licenseApplication.correctionsRequested.onlyListed')}
             </Text>
           </Stack>
         </Alert>
       )}
 
       {issues.length > 0 && (
-        <Alert color="red" icon={<IconAlertTriangle size={16} />} title="Still missing" mb="md">
+        <Alert color="red" icon={<IconAlertTriangle size={16} />} title={t('licenseApplication.stillMissing.title')} mb="md">
           <Stack gap={2}>
             {issues.map((issue, i) => (
               <Text size="sm" key={i}>
@@ -474,7 +488,7 @@ export function LicenseApplicationPage() {
                   </Text>
                   {locked && (
                     <Alert color="gray" icon={<IconInfoCircle size={16} />} mb="md">
-                      This section was accepted and is locked for this round.
+                      {t('licenseApplication.sectionLocked')}
                     </Alert>
                   )}
                   <ConfigDrivenSection
@@ -516,18 +530,20 @@ export function LicenseApplicationPage() {
                         {localized(role.name)}
                       </Text>
                       <Text size="xs" c="dimmed">
-                        {members.length} of {role.minCount} required
+                        {t('licenseApplication.staff.requiredCount', { count: members.length, min: role.minCount })}
                         {role.requiredEvidence.length > 0 &&
-                          ` · each needs ${role.requiredEvidence
-                            .filter((e) => e.mandatory)
-                            .map((e) => localized(e.label))
-                            .join(', ')}`}
+                          ` ${t('licenseApplication.staff.eachNeeds', {
+                            items: role.requiredEvidence
+                              .filter((e) => e.mandatory)
+                              .map((e) => localized(e.label))
+                              .join(', '),
+                          })}`}
                       </Text>
                     </div>
                     <Group gap="xs">
                       {members.length >= role.minCount && (
                         <Badge color="teal" size="sm" leftSection={<IconCheck size={10} />}>
-                          complete
+                          {t('licenseApplication.staff.complete')}
                         </Badge>
                       )}
                       {!readOnly && (
@@ -537,7 +553,7 @@ export function LicenseApplicationPage() {
                           leftSection={<IconPlus size={14} />}
                           onClick={() => setStaffModal(role.roleKey)}
                         >
-                          Add
+                          {t('licenseApplication.staff.add')}
                         </Button>
                       )}
                     </Group>
@@ -554,7 +570,7 @@ export function LicenseApplicationPage() {
                             <Text size="xs" c="dimmed">
                               {member.position ?? '—'}
                               {member.yearsOfExperience
-                                ? ` · ${member.yearsOfExperience} yrs`
+                                ? ` ${t('licenseApplication.staff.yearsSuffix', { count: member.yearsOfExperience })}`
                                 : ''}
                             </Text>
                           </div>
@@ -633,7 +649,7 @@ export function LicenseApplicationPage() {
                 <Divider my="lg" />
               </div>
             ))}
-            <Title order={5}>Review</Title>
+            <Title order={5}>{t('licenseApplication.review')}</Title>
             {sections.map((section) => (
               <div key={section.key}>
                 <Text fw={600} size="sm" mb={4}>
@@ -671,10 +687,10 @@ export function LicenseApplicationPage() {
             onClick={() => setActive((s) => Math.max(0, s - 1))}
             disabled={active === 0}
           >
-            Back
+            {t('common.back')}
           </Button>
           {active < steps.length - 1 ? (
-            <Button onClick={handleContinue}>Continue</Button>
+            <Button onClick={handleContinue}>{t('common.continue')}</Button>
           ) : (
             <RequirePermission
               anyOf={
@@ -690,7 +706,9 @@ export function LicenseApplicationPage() {
                 disabled={readOnly}
                 onClick={handleSubmit}
               >
-                {isAdjusting ? 'Resubmit corrections' : 'Submit application'}
+                {isAdjusting
+                  ? t('licenseApplication.resubmitCorrections')
+                  : t('licenseApplication.submitApplication')}
               </Button>
             </RequirePermission>
           )}
@@ -700,22 +718,22 @@ export function LicenseApplicationPage() {
       <Modal
         opened={Boolean(staffModal)}
         onClose={() => setStaffModal(null)}
-        title="Add staff member"
+        title={t('licenseApplication.staff.addStaffMember')}
       >
         <Stack>
           <TextInput
-            label="Full name"
+            label={t('licenseApplication.staff.fullName')}
             withAsterisk
             value={newStaff.fullName}
             onChange={(e) => setNewStaff({ ...newStaff, fullName: e.currentTarget.value })}
           />
           <TextInput
-            label="Position"
+            label={t('licenseApplication.staff.position')}
             value={newStaff.position}
             onChange={(e) => setNewStaff({ ...newStaff, position: e.currentTarget.value })}
           />
           <NumberInput
-            label="Years of experience"
+            label={t('licenseApplication.staff.yearsOfExperience')}
             value={newStaff.yearsOfExperience}
             onChange={(v) => setNewStaff({ ...newStaff, yearsOfExperience: Number(v) || 0 })}
             min={0}
@@ -730,7 +748,7 @@ export function LicenseApplicationPage() {
                 refetch();
               }}
             >
-              Add
+              {t('licenseApplication.staff.add')}
             </Button>
           </ModalFooter>
         </Stack>
diff --git a/apps/portal/src/app/features/medical/pages/MedicalCertificatePage.tsx b/apps/portal/src/app/features/medical/pages/MedicalCertificatePage.tsx
index 073a6d24e..6e769cf89 100644
--- a/apps/portal/src/app/features/medical/pages/MedicalCertificatePage.tsx
+++ b/apps/portal/src/app/features/medical/pages/MedicalCertificatePage.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@mantine/core';
 import { FeatureUnavailable } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Placeholder until this feature has a backend.
@@ -8,11 +9,13 @@ import { FeatureUnavailable } from '@ema-platform/ui';
  * indistinguishable from real ones.
  */
 export function MedicalCertificatePage() {
+  const { t } = useTranslation();
+
   return (
     <Container size="lg" py="xl">
       <FeatureUnavailable
-        title="Medical certificate"
-        description="Medical certificates are not connected to the backend yet."
+        title={t('featureUnavailable.medical.title')}
+        description={t('featureUnavailable.medical.description')}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx b/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
index 5e7340173..8619f8a5a 100644
--- a/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
+++ b/apps/portal/src/app/features/notifications/pages/NotificationsPage.tsx
@@ -4,16 +4,15 @@ import {
   Badge,
   Button,
   Card,
-  Center,
   Container,
   Group,
-  Loader,
   SegmentedControl,
   Stack,
   Text,
   Title,
 } from '@mantine/core';
 import { IconBellOff, IconCheck } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import {
   useLocalized,
   useGetNotificationsQuery,
@@ -25,12 +24,6 @@ import { PageLoader } from '@ema-platform/ui';
 
 type Tab = 'all' | 'unseen' | 'seen';
 
-const EMPTY_COPY: Record<Tab, string> = {
-  all: 'No notifications yet.',
-  unseen: 'Nothing unread.',
-  seen: 'No read notifications.',
-};
-
 /**
  * The applicant's notification inbox.
  *
@@ -38,10 +31,16 @@ const EMPTY_COPY: Record<Tab, string> = {
  * every transition — this previously listed a fixed array of invented alerts.
  */
 export function NotificationsPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [tab, setTab] = useState<Tab>('all');
+  const EMPTY_COPY: Record<Tab, string> = {
+    all: t('notifications.empty.all'),
+    unseen: t('notifications.empty.unseen'),
+    seen: t('notifications.empty.seen'),
+  };
   const all = useGetNotificationsQuery(undefined, { skip: tab === 'unseen' });
   const unseen = useGetUnseenNotificationsQuery(undefined, { skip: tab !== 'unseen' });
   const [markRead] = useMarkNotificationReadMutation();
@@ -58,9 +57,9 @@ export function NotificationsPage() {
 
   return (
     <Container size="md" py="md">
-      <Title order={3}>Notifications</Title>
+      <Title order={3}>{t('notifications.title')}</Title>
       <Text size="sm" c="dimmed" mb="md">
-        {unread > 0 ? `${unread} unread` : 'You are all caught up'}
+        {unread > 0 ? t('notifications.unread', { count: unread }) : t('notifications.allCaughtUp')}
       </Text>
 
       <SegmentedControl
@@ -69,21 +68,21 @@ export function NotificationsPage() {
         value={tab}
         onChange={(v) => setTab(v as Tab)}
         data={[
-          { label: 'All', value: 'all' },
-          { label: 'Unseen', value: 'unseen' },
-          { label: 'Seen', value: 'seen' },
+          { label: t('notifications.tabs.all'), value: 'all' },
+          { label: t('notifications.tabs.unseen'), value: 'unseen' },
+          { label: t('notifications.tabs.seen'), value: 'seen' },
         ]}
       />
 
       {isLoading ? (
-        <PageLoader label="Loading Notifications…" height={350} />
+        <PageLoader label={t('notifications.loading')} height={350} />
       ) : items.length === 0 ? (
         <Card withBorder padding="xl">
           <Stack align="center" gap="xs">
             <IconBellOff size={32} stroke={1.4} color="var(--mantine-color-gray-5)" />
             <Text c="dimmed">{EMPTY_COPY[tab]}</Text>
             <Text size="sm" c="dimmed">
-              You will be notified as your applications progress.
+              {t('notifications.emptyBody')}
             </Text>
           </Stack>
         </Card>
@@ -111,7 +110,7 @@ export function NotificationsPage() {
                       </Text>
                       {!n.isSeen && (
                         <Badge size="xs" variant="light">
-                          new
+                          {t('notifications.new')}
                         </Badge>
                       )}
                     </Group>
@@ -132,7 +131,7 @@ export function NotificationsPage() {
                         markRead(n.id);
                       }}
                     >
-                      Mark read
+                      {t('notifications.markRead')}
                     </Button>
                   )}
                 </Group>
diff --git a/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx b/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
index e4f0f0c8e..b565eb96c 100644
--- a/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
+++ b/apps/portal/src/app/features/onboarding/components/RequireOperations.tsx
@@ -1,4 +1,5 @@
 import { Navigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useGetMyOperatorTypesQuery } from '@ema-platform/api';
 import { PageLoader } from '@ema-platform/ui';
 
@@ -64,6 +65,7 @@ function isModeFreeLicensingRoute(pathname: string): boolean {
 }
 
 export function RequireOperations({ children }: { children: React.ReactNode }) {
+  const { t } = useTranslation();
   const { pathname } = useLocation();
   const { data, isLoading, isFetching, isError } = useGetMyOperatorTypesQuery();
 
@@ -75,7 +77,7 @@ export function RequireOperations({ children }: { children: React.ReactNode }) {
   }
 
   if (isLoading) {
-    return <PageLoader label="Checking operations profile…" height={350} />;
+    return <PageLoader label={t('onboarding.checkingProfile')} height={350} />;
   }
 
   // A failed lookup must not lock anyone out of the portal — the server still
@@ -89,7 +91,7 @@ export function RequireOperations({ children }: { children: React.ReactNode }) {
     // the same tick; deciding on the pre-save cache bounced the applicant
     // straight back to the screen they had just completed.
     if (isFetching) {
-      return <PageLoader label="Checking operations profile…" height={350} />;
+      return <PageLoader label={t('onboarding.checkingProfile')} height={350} />;
     }
     return <Navigate to="/onboarding/operations" replace />;
   }
diff --git a/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx b/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
index bdfe4f524..26b3d4948 100644
--- a/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
+++ b/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { Container, Paper, Stack, Text, Title } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { OperationsFormContent } from '../../profile/components/OperationsFormContent';
 
 /**
@@ -14,17 +15,16 @@ import { OperationsFormContent } from '../../profile/components/OperationsFormCo
  * soon as the profile has at least one mode.
  */
 export function OperationsOnboardingPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   return (
     <Container size="sm" py="xl">
       <Stack gap="lg">
         <div>
-          <Title order={3}>What do you operate as?</Title>
+          <Title order={3}>{t('onboarding.operations.title')}</Title>
           <Text size="sm" c="dimmed" mt={4}>
-            The Authority licenses by mode of operation. Tell us what your
-            company does and we will show you the licences you can apply for —
-            you can change this later from your profile.
+            {t('onboarding.operations.body')}
           </Text>
         </div>
         <Paper p="xl" shadow="sm" radius="lg" withBorder>
diff --git a/apps/portal/src/app/features/payments/pages/PaymentCheckPage.tsx b/apps/portal/src/app/features/payments/pages/PaymentCheckPage.tsx
index d7bc392a4..efd261c09 100644
--- a/apps/portal/src/app/features/payments/pages/PaymentCheckPage.tsx
+++ b/apps/portal/src/app/features/payments/pages/PaymentCheckPage.tsx
@@ -3,7 +3,6 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Button,
   Card,
-  Center,
   Container,
   Group,
   Loader,
@@ -17,6 +16,7 @@ import {
   IconCircleCheck,
   IconClockHour4,
 } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { useGetApplicationPaymentQuery } from '@ema-platform/api';
 
 const POLL_INTERVAL_MS = 3000;
@@ -31,6 +31,7 @@ const MAX_ATTEMPTS = 10;
  * their account is the worst possible outcome here.
  */
 export function PaymentCheckPage() {
+  const { t } = useTranslation();
   const [params] = useSearchParams();
   const navigate = useNavigate();
   const applicationId = params.get('applicationId') ?? '';
@@ -68,12 +69,12 @@ export function PaymentCheckPage() {
             <ThemeIcon size={48} radius="xl" color="orange" variant="light">
               <IconAlertTriangle size={24} />
             </ThemeIcon>
-            <Title order={4}>We could not identify this payment</Title>
+            <Title order={4}>{t('payments.check.notFoundTitle')}</Title>
             <Text size="sm" c="dimmed" ta="center">
-              Open the application from your list to check its payment status.
+              {t('payments.check.notFoundBody')}
             </Text>
             <Button onClick={() => navigate('/licensing/applications')}>
-              My applications
+              {t('payments.myApplications')}
             </Button>
           </Stack>
         </Card>
@@ -92,18 +93,16 @@ export function PaymentCheckPage() {
               <ThemeIcon size={48} radius="xl" color="yellow" variant="light">
                 <IconClockHour4 size={24} />
               </ThemeIcon>
-              <Title order={4}>Still confirming your payment</Title>
+              <Title order={4}>{t('payments.check.stillConfirmingTitle')}</Title>
               <Text size="sm" c="dimmed" ta="center">
-                Telebirr has not confirmed this payment yet. If the money has
-                left your account it will be applied automatically — there is no
-                need to pay again.
+                {t('payments.check.stillConfirmingBody')}
               </Text>
               <Group>
                 <Button variant="default" onClick={() => { setAttempts(0); refetch(); }}>
-                  Check again
+                  {t('payments.check.checkAgain')}
                 </Button>
                 <Button onClick={() => navigate('/licensing/applications')}>
-                  My applications
+                  {t('payments.myApplications')}
                 </Button>
               </Group>
             </>
@@ -114,9 +113,9 @@ export function PaymentCheckPage() {
                   <IconCircleCheck size={24} />
                 </ThemeIcon>
               )}
-              <Title order={4}>Confirming your payment…</Title>
+              <Title order={4}>{t('payments.check.confirmingTitle')}</Title>
               <Text size="sm" c="dimmed" ta="center">
-                This usually takes a few seconds. Please do not close this page.
+                {t('payments.check.confirmingBody')}
               </Text>
             </>
           )}
diff --git a/apps/portal/src/app/features/payments/pages/PaymentFailurePage.tsx b/apps/portal/src/app/features/payments/pages/PaymentFailurePage.tsx
index 7946e985f..31c9c5232 100644
--- a/apps/portal/src/app/features/payments/pages/PaymentFailurePage.tsx
+++ b/apps/portal/src/app/features/payments/pages/PaymentFailurePage.tsx
@@ -10,10 +10,12 @@ import {
   Title,
 } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { useGetApplicationPaymentQuery } from '@ema-platform/api';
 
 /** Shown when Telebirr reported the payment as failed or cancelled. */
 export function PaymentFailurePage() {
+  const { t } = useTranslation();
   const [params] = useSearchParams();
   const navigate = useNavigate();
   const applicationId = params.get('applicationId') ?? '';
@@ -28,18 +30,16 @@ export function PaymentFailurePage() {
           <ThemeIcon size={56} radius="xl" color="red" variant="light">
             <IconAlertTriangle size={30} />
           </ThemeIcon>
-          <Title order={3}>Payment not completed</Title>
+          <Title order={3}>{t('payments.failure.title')}</Title>
           <Text size="sm" c="dimmed" ta="center">
-            {data?.failureReason
-              ? data.failureReason
-              : 'The payment was not completed. Nothing has been charged.'}
+            {data?.failureReason ? data.failureReason : t('payments.failure.defaultReason')}
           </Text>
           <Text size="xs" c="dimmed" ta="center">
-            Your application is unchanged and you can try again at any time.
+            {t('payments.failure.unchanged')}
           </Text>
           <Group mt="md">
             <Button variant="default" onClick={() => navigate('/licensing/applications')}>
-              My applications
+              {t('payments.myApplications')}
             </Button>
           </Group>
         </Stack>
diff --git a/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx b/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx
index 111bc0c73..48d63a71f 100644
--- a/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx
+++ b/apps/portal/src/app/features/payments/pages/PaymentSuccessPage.tsx
@@ -11,11 +11,13 @@ import {
   Title,
 } from '@mantine/core';
 import { IconCircleCheck } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { useGetApplicationPaymentQuery } from '@ema-platform/api';
 import { useDateDisplayer } from '@ema-platform/shared';
 
 /** Confirmation that the licence fee has been received. */
 export function PaymentSuccessPage() {
+  const { t } = useTranslation();
   const [params] = useSearchParams();
   const navigate = useNavigate();
   const showDate = useDateDisplayer();
@@ -31,10 +33,9 @@ export function PaymentSuccessPage() {
           <ThemeIcon size={56} radius="xl" color="teal" variant="light">
             <IconCircleCheck size={30} />
           </ThemeIcon>
-          <Title order={3}>Payment received</Title>
+          <Title order={3}>{t('payments.success.title')}</Title>
           <Text size="sm" c="dimmed" ta="center">
-            Thank you. Your licence fee has been paid and your application is
-            being finalised. You will be notified when your certificate is ready.
+            {t('payments.success.body')}
           </Text>
 
           {data && (
@@ -42,24 +43,24 @@ export function PaymentSuccessPage() {
               <Divider my="xs" w="100%" />
               <Stack gap={4} w="100%">
                 <Group justify="space-between">
-                  <Text size="sm" c="dimmed">Amount</Text>
+                  <Text size="sm" c="dimmed">{t('payments.fields.amount')}</Text>
                   <Text size="sm" fw={600}>
                     {Number(data.amount).toLocaleString()} {data.currency}
                   </Text>
                 </Group>
                 <Group justify="space-between">
-                  <Text size="sm" c="dimmed">Method</Text>
+                  <Text size="sm" c="dimmed">{t('payments.fields.method')}</Text>
                   <Text size="sm">{data.provider}</Text>
                 </Group>
                 {data.providerRef && (
                   <Group justify="space-between">
-                    <Text size="sm" c="dimmed">Reference</Text>
+                    <Text size="sm" c="dimmed">{t('payments.fields.reference')}</Text>
                     <Text size="sm" ff="monospace">{data.providerRef}</Text>
                   </Group>
                 )}
                 {data.paidAt && (
                   <Group justify="space-between">
-                    <Text size="sm" c="dimmed">Paid</Text>
+                    <Text size="sm" c="dimmed">{t('payments.fields.paid')}</Text>
                     <Text size="sm">{showDate(data.paidAt)}</Text>
                   </Group>
                 )}
@@ -68,7 +69,7 @@ export function PaymentSuccessPage() {
           )}
 
           <Button mt="md" onClick={() => navigate('/licensing/applications')}>
-            Back to my applications
+            {t('payments.success.backToApplications')}
           </Button>
         </Stack>
       </Card>
diff --git a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
index 9944796af..318ee1215 100644
--- a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
@@ -2,43 +2,51 @@ import { useCallback, useMemo } from 'react';
 import { Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
 import { z } from 'zod';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { ethiopianPhone, optionalEthiopianPhone, CountrySelect } from '@ema-platform/ui';
 import { LocationPicker } from '../../location/components/LocationPicker';
 import { useGetLocationTypesQuery } from '../../location/api/location-api';
 import type { Location, LocationType } from '../../location/types/location';
 
-export const addressSchema = z.object({
-  idType: z.string().min(1, 'Select ID type'),
-  idNumber: z.string().trim().min(1, 'Enter ID number'),
-  // Alpha-2 country code from CountrySelect; converted to a full name at submit.
-  nationality: z.string().min(1, 'Select nationality'),
-  primaryPhoneNumber: ethiopianPhone,
-  secondaryPhoneNumber: optionalEthiopianPhone,
-  email: z.string().trim().email('Invalid email').optional().or(z.literal('')),
-  regionId: z.string().optional(),
-  cityId: z.string().optional(),
-  subCityId: z.string().optional(),
-  woredaId: z.string().optional(),
-  kebeleId: z.string().optional(),
-  streetAddress: z.string().trim().optional(),
-  postalAddress: z.string().trim().optional(),
-  // Emergency contact is collected but never required — leaving it blank must
-  // not stop an applicant moving on.
-  emergencyContactName: z.string().trim().optional(),
-  emergencyContactPhone: optionalEthiopianPhone,
-  emergencyContactRelation: z.string().trim().optional(),
-});
+// Zod schemas can't call hooks, so the schema is built from `t` by the
+// caller (ProfilePage) rather than defined once at module scope.
+export function addressSchema(t: TFunction) {
+  return z.object({
+    idType: z.string().min(1, t('profileAddress.validation.idTypeRequired')),
+    idNumber: z.string().trim().min(1, t('profileAddress.validation.idNumberRequired')),
+    // Alpha-2 country code from CountrySelect; converted to a full name at submit.
+    nationality: z.string().min(1, t('profileAddress.validation.nationalityRequired')),
+    primaryPhoneNumber: ethiopianPhone,
+    secondaryPhoneNumber: optionalEthiopianPhone,
+    email: z.string().trim().email(t('profileAddress.validation.emailInvalid')).optional().or(z.literal('')),
+    regionId: z.string().optional(),
+    cityId: z.string().optional(),
+    subCityId: z.string().optional(),
+    woredaId: z.string().optional(),
+    kebeleId: z.string().optional(),
+    streetAddress: z.string().trim().optional(),
+    postalAddress: z.string().trim().optional(),
+    // Emergency contact is collected but never required — leaving it blank must
+    // not stop an applicant moving on.
+    emergencyContactName: z.string().trim().optional(),
+    emergencyContactPhone: optionalEthiopianPhone,
+    emergencyContactRelation: z.string().trim().optional(),
+  });
+}
 
-export type AddressValues = z.infer<typeof addressSchema>;
+export type AddressValues = z.infer<ReturnType<typeof addressSchema>>;
 
 // Backend rejects anything outside this set:
 // "idType must be one of the following values: NID, VITAL, PASSPORT, DRIVERS_LICENSE"
-export const ID_TYPES = [
-  { value: 'NID', label: 'National Id' },
-  { value: 'VITAL', label: 'Vital ID' },
-  { value: 'PASSPORT', label: 'Passport' },
-  { value: 'DRIVERS_LICENSE', label: "Driver's License" },
-] as const;
+function idTypeOptions(t: TFunction) {
+  return [
+    { value: 'NID', label: t('profileAddress.idTypeOptions.NID') },
+    { value: 'VITAL', label: t('profileAddress.idTypeOptions.VITAL') },
+    { value: 'PASSPORT', label: t('profileAddress.idTypeOptions.PASSPORT') },
+    { value: 'DRIVERS_LICENSE', label: t('profileAddress.idTypeOptions.DRIVERS_LICENSE') },
+  ] as const;
+}
 
 /**
  * Location types are data-driven rows (no fixed depth), so the chain is
@@ -79,6 +87,7 @@ export function AddressFormContent({
   watch,
   trigger,
 }: AddressFormContentProps) {
+  const { t } = useTranslation();
   const { data: typesRes } = useGetLocationTypesQuery();
   const locationTypes = typesRes?.items;
 
@@ -113,10 +122,10 @@ export function AddressFormContent({
     <>
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
         <Select
-          label="ID Type"
-          placeholder="Select"
+          label={t('profileFields.idType')}
+          placeholder={t('profileAddress.idTypePlaceholder')}
           required
-          data={ID_TYPES}
+          data={idTypeOptions(t)}
           error={errors.idType?.message}
           value={watch('idType')}
           onChange={(val) => setValue('idType', val || '', { shouldValidate: true })}
@@ -124,14 +133,14 @@ export function AddressFormContent({
           name="idType"
         />
         <TextInput
-          label="ID Number"
-          placeholder="Enter ID number"
+          label={t('profileFields.idNumber')}
+          placeholder={t('profileAddress.idNumberPlaceholder')}
           required
           {...register('idNumber')}
           error={errors.idNumber?.message}
         />
         <CountrySelect
-          label="Nationality"
+          label={t('profileFields.nationality')}
           demonym
           required
           value={watch('nationality') || null}
@@ -139,23 +148,23 @@ export function AddressFormContent({
           error={errors.nationality?.message}
         />
         <TextInput
-          label="Primary Phone"
-          description="From your account, edit it in the Personal tab"
+          label={t('profileFields.primaryPhoneNumber')}
+          description={t('profileAddress.accountManagedHint')}
           required
           readOnly
           {...register('primaryPhoneNumber')}
           error={errors.primaryPhoneNumber?.message}
         />
         <TextInput
-          label="Secondary Phone"
-          placeholder="+251 9XX XXX XXX"
+          label={t('profileAddress.secondaryPhoneNumber')}
+          placeholder={t('profileAddress.phonePlaceholder')}
           {...register('secondaryPhoneNumber')}
           error={errors.secondaryPhoneNumber?.message}
         />
         <TextInput
-          label="Email"
+          label={t('profileFields.email')}
           type="email"
-          description="From your account, edit it in the Personal tab"
+          description={t('profileAddress.accountManagedHint')}
           readOnly
           {...register('email')}
           error={errors.email?.message}
@@ -163,44 +172,47 @@ export function AddressFormContent({
       </SimpleGrid>
 
       <Text fw={600} fz="sm" tt="uppercase" c="gray.6" mt="lg" mb="sm">
-        Address
+        {t('profileAddress.addressSection')}
       </Text>
       {/* City / Sub-city / Woreda only — no Kebele level, kebeleId mirrors woredaId. */}
       <LocationPicker value={leafId} onChainChange={handleChainChange} maxDepth={3} />
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="md">
         <TextInput
-          label="Street Address"
-          placeholder="Street name, house number"
+          label={t('profileFields.streetAddress')}
+          placeholder={t('profileAddress.streetAddressPlaceholder')}
           {...register('streetAddress')}
           error={errors.streetAddress?.message}
         />
         <TextInput
-          label="Postal Address"
-          placeholder="P.O. Box"
+          label={t('profileAddress.postalAddress')}
+          placeholder={t('profileAddress.postalAddressPlaceholder')}
           {...register('postalAddress')}
           error={errors.postalAddress?.message}
         />
       </SimpleGrid>
 
       <Text fw={600} fz="sm" tt="uppercase" c="gray.6" mt="lg" mb="sm">
-        Emergency Contact <Text span c="dimmed" fz="xs" tt="none" fw={400}>(optional)</Text>
+        {t('profileAddress.emergencyContactSection')}{' '}
+        <Text span c="dimmed" fz="xs" tt="none" fw={400}>
+          {t('profileAddress.emergencyContactOptional')}
+        </Text>
       </Text>
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
         <TextInput
-          label="Contact Name"
-          placeholder="Full name"
+          label={t('profileAddress.contactName')}
+          placeholder={t('profileAddress.contactNamePlaceholder')}
           {...register('emergencyContactName')}
           error={errors.emergencyContactName?.message}
         />
         <TextInput
-          label="Contact Phone"
-          placeholder="+251 9XX XXX XXX"
+          label={t('profileAddress.contactPhone')}
+          placeholder={t('profileAddress.phonePlaceholder')}
           {...register('emergencyContactPhone')}
           error={errors.emergencyContactPhone?.message}
         />
         <TextInput
-          label="Relationship"
-          placeholder="Spouse, Parent, etc."
+          label={t('profileAddress.relationship')}
+          placeholder={t('profileAddress.relationshipPlaceholder')}
           {...register('emergencyContactRelation')}
           error={errors.emergencyContactRelation?.message}
         />
diff --git a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
index 63247b262..d5183ff0b 100644
--- a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
@@ -12,6 +12,7 @@ import {
   Title,
 } from '@mantine/core';
 import { IconAlertTriangle, IconBuildingWarehouse } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import {
   extractErrorMessage,
   useLocalized,
@@ -38,6 +39,7 @@ export function OperationsFormContent({
   /** Where to go once the set is stored — used by the onboarding step. */
   onSaved?: () => void;
 } = {}) {
+  const { t } = useTranslation();
   const { data: catalogue, isLoading: loadingTypes } = useGetLicenseTypesQuery();
   const { data: mine, isLoading: loadingMine } = useGetMyOperatorTypesQuery();
   const [save, { isLoading: saving }] = useUpdateMyOperatorTypesMutation();
@@ -82,12 +84,12 @@ export function OperationsFormContent({
       await save({ licenseTypeIds: selected }).unwrap();
       setConfirmingRemoval(false);
       notify.success(
-        'The licences you can apply for have been updated to match.',
-        'Operations updated',
+        t('profileOperations.updateSuccessBody'),
+        t('profileOperations.updateSuccessTitle'),
       );
       onSaved?.();
     } catch (err) {
-      notify.error(extractErrorMessage(err), 'Could not save');
+      notify.error(extractErrorMessage(err), t('profileOperations.updateErrorTitle'));
     }
   }
 
@@ -102,10 +104,9 @@ export function OperationsFormContent({
   return (
     <Stack gap="xl">
       <div>
-        <Title order={5}>Mode of operation</Title>
+        <Title order={5}>{t('profileOperations.title')}</Title>
         <Text size="sm" c="dimmed" mb="md">
-          What your company operates as. This decides which licences you are
-          offered — you can change it whenever your business changes.
+          {t('profileOperations.description')}
         </Text>
 
         <Checkbox.Group value={selected} onChange={setSelected}>
@@ -119,7 +120,7 @@ export function OperationsFormContent({
                     <Text size="sm">{localized(type.name)}</Text>
                     {declaredIds.includes(type.id) && (
                       <Badge size="xs" variant="light" color="teal">
-                        Current
+                        {t('profileOperations.current')}
                       </Badge>
                     )}
                   </Group>
@@ -134,8 +135,7 @@ export function OperationsFormContent({
 
         {options.length === 0 && (
           <Text size="sm" c="dimmed">
-            No licence types are configured yet. Contact EMA if you were
-            expecting one.
+            {t('profileOperations.emptyState')}
           </Text>
         )}
       </div>
@@ -145,16 +145,17 @@ export function OperationsFormContent({
           variant="light"
           color="orange"
           icon={<IconAlertTriangle size={18} />}
-          title="No operations selected"
+          title={t('profileOperations.noneSelectedTitle')}
         >
-          With none selected you will not be offered any licence to apply for.
-          Existing applications and issued licences are unaffected.
+          {t('profileOperations.noneSelectedBody')}
         </Alert>
       )}
 
       <Group justify="space-between">
         <Text size="xs" c="dimmed">
-          {lastChanged ? `Last changed ${showDate(lastChanged)}` : 'Not set yet'}
+          {lastChanged
+            ? t('profileOperations.lastChanged', { date: showDate(lastChanged) })
+            : t('profileOperations.notSetYet')}
         </Text>
         <Group gap="sm">
           {dirty && (
@@ -163,7 +164,7 @@ export function OperationsFormContent({
               size="sm"
               onClick={() => setSelected(declaredIds)}
             >
-              Discard changes
+              {t('profileOperations.discardChanges')}
             </Button>
           )}
           <Button
@@ -175,7 +176,7 @@ export function OperationsFormContent({
               removed.length > 0 ? setConfirmingRemoval(true) : persist()
             }
           >
-            Save operations
+            {t('profileOperations.saveOperations')}
           </Button>
         </Group>
       </Group>
@@ -185,31 +186,29 @@ export function OperationsFormContent({
       <Modal
         opened={confirmingRemoval}
         onClose={() => setConfirmingRemoval(false)}
-        title="Remove from your operations?"
+        title={t('profileOperations.removeModalTitle')}
         centered
       >
         <Stack gap="md">
           <Text size="sm">
-            You are removing{' '}
+            {t('profileOperations.removingPrefix')}{' '}
             <Text span fw={600}>
               {removedNames.join(', ')}
             </Text>
             .
           </Text>
           <Text size="sm" c="dimmed">
-            You will no longer be offered a new application of that type.
-            Applications already filed carry on as they are, and licences
-            already issued to you stay valid and can still be renewed.
+            {t('profileOperations.removeConsequence')}
           </Text>
           <ModalFooter gap="sm">
             <Button
               variant="default"
               onClick={() => setConfirmingRemoval(false)}
             >
-              Cancel
+              {t('common.cancel')}
             </Button>
             <Button color="orange" loading={saving} onClick={persist}>
-              Remove and save
+              {t('profileOperations.removeAndSave')}
             </Button>
           </ModalFooter>
         </Stack>
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 1fd9cdd97..71be1b1ae 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -384,7 +384,7 @@ export function ProfilePage() {
     trigger: addressTriggerValidation,
     formState: { errors: addressErrors },
   } = useForm<AddressValues>({
-    resolver: zodResolver(addressSchema),
+    resolver: zodResolver(addressSchema(t)),
     values: loadedAddress ?? undefined,
   });
 
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/actions.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/actions.tsx
index 28a3e4dc2..7112eeeb5 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/actions.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/actions.tsx
@@ -1,26 +1,30 @@
 import { ActionIcon, Group, Tooltip } from '@mantine/core';
 import { IconEdit, IconPaperclip, IconTrash } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { MedicalCertificate, SeaServiceRecord } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS } from '@ema-platform/auth';
 
-export function seaServiceActionsColumn(handlers: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  onEvidence: (record: SeaServiceRecord) => void;
-  onEdit: (record: SeaServiceRecord) => void;
-  onDelete: (record: SeaServiceRecord) => void;
-}): AdvancedColumn<SeaServiceRecord> {
+export function seaServiceActionsColumn(
+  t: TFunction,
+  handlers: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    onEvidence: (record: SeaServiceRecord) => void;
+    onEdit: (record: SeaServiceRecord) => void;
+    onDelete: (record: SeaServiceRecord) => void;
+  },
+): AdvancedColumn<SeaServiceRecord> {
   return {
     header: '',
-    label: 'Actions',
+    label: t('common.actions'),
     align: 'right',
     cell: ({ row }) => {
       const record = row.original;
       const locked = record.status !== 'SUBMITTED';
       return (
         <Group gap="xs" justify="flex-end" wrap="nowrap">
-          <Tooltip label="Evidence">
+          <Tooltip label={t('seaRecords.actions.evidence')}>
             <ActionIcon
               variant="subtle"
               onClick={() => handlers.onEvidence(record)}
@@ -30,7 +34,7 @@ export function seaServiceActionsColumn(handlers: {
           </Tooltip>
           {handlers.can([PORTAL_PERMISSIONS.EDIT_SEA_SERVICE]) && (
             <>
-              <Tooltip label={locked ? 'Verified records are frozen' : 'Edit'}>
+              <Tooltip label={locked ? t('seaRecords.actions.frozen') : t('seaRecords.actions.edit')}>
                 <ActionIcon
                   variant="subtle"
                   disabled={locked}
@@ -39,7 +43,7 @@ export function seaServiceActionsColumn(handlers: {
                   <IconEdit size={16} />
                 </ActionIcon>
               </Tooltip>
-              <Tooltip label={locked ? 'Verified records are frozen' : 'Delete'}>
+              <Tooltip label={locked ? t('seaRecords.actions.frozen') : t('seaRecords.actions.delete')}>
                 <ActionIcon
                   variant="subtle"
                   color="red"
@@ -57,23 +61,26 @@ export function seaServiceActionsColumn(handlers: {
   };
 }
 
-export function medicalActionsColumn(handlers: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  onEvidence: (certificate: MedicalCertificate) => void;
-  onEdit: (certificate: MedicalCertificate) => void;
-  onDelete: (certificate: MedicalCertificate) => void;
-}): AdvancedColumn<MedicalCertificate> {
+export function medicalActionsColumn(
+  t: TFunction,
+  handlers: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    onEvidence: (certificate: MedicalCertificate) => void;
+    onEdit: (certificate: MedicalCertificate) => void;
+    onDelete: (certificate: MedicalCertificate) => void;
+  },
+): AdvancedColumn<MedicalCertificate> {
   return {
     header: '',
-    label: 'Actions',
+    label: t('common.actions'),
     align: 'right',
     cell: ({ row }) => {
       const certificate = row.original;
       const locked = certificate.status !== 'SUBMITTED';
       return (
         <Group gap="xs" justify="flex-end" wrap="nowrap">
-          <Tooltip label="Scan / evidence">
+          <Tooltip label={t('seaRecords.actions.scanEvidence')}>
             <ActionIcon
               variant="subtle"
               onClick={() => handlers.onEvidence(certificate)}
@@ -83,7 +90,9 @@ export function medicalActionsColumn(handlers: {
           </Tooltip>
           {handlers.can([PORTAL_PERMISSIONS.UPLOAD_MEDICAL]) && (
             <>
-              <Tooltip label={locked ? 'Verified certificates are frozen' : 'Edit'}>
+              <Tooltip
+                label={locked ? t('seaRecords.actions.certificatesFrozen') : t('seaRecords.actions.edit')}
+              >
                 <ActionIcon
                   variant="subtle"
                   disabled={locked}
@@ -92,7 +101,9 @@ export function medicalActionsColumn(handlers: {
                   <IconEdit size={16} />
                 </ActionIcon>
               </Tooltip>
-              <Tooltip label={locked ? 'Verified certificates are frozen' : 'Delete'}>
+              <Tooltip
+                label={locked ? t('seaRecords.actions.certificatesFrozen') : t('seaRecords.actions.delete')}
+              >
                 <ActionIcon
                   variant="subtle"
                   color="red"
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/columns.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/columns.tsx
index c51abaeb2..7e5196d85 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/columns.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/columns.tsx
@@ -1,4 +1,5 @@
 import { Badge, Group, Text, Tooltip } from '@mantine/core';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { MedicalCertificate, SeaServiceRecord } from '@ema-platform/api';
 
@@ -8,18 +9,24 @@ const RECORD_STATUS_COLORS: Record<string, string> = {
   REJECTED: 'red',
 };
 
-export const FITNESS_OPTIONS = [
-  { value: 'FIT', label: 'Fit' },
-  { value: 'FIT_WITH_RESTRICTIONS', label: 'Fit with restrictions' },
-  { value: 'UNFIT', label: 'Unfit' },
-];
+export function fitnessOptions(t: TFunction) {
+  return [
+    { value: 'FIT', label: t('seaRecords.columns.fitnessOptions.FIT') },
+    {
+      value: 'FIT_WITH_RESTRICTIONS',
+      label: t('seaRecords.columns.fitnessOptions.FIT_WITH_RESTRICTIONS'),
+    },
+    { value: 'UNFIT', label: t('seaRecords.columns.fitnessOptions.UNFIT') },
+  ];
+}
 
 export function seaServiceColumns(
+  t: TFunction,
   showDate: (date: string) => string,
 ): AdvancedColumn<SeaServiceRecord>[] {
   return [
     {
-      header: 'Vessel',
+      header: t('seaRecords.columns.vessel'),
       cell: ({ row }) => (
         <>
           <Text fw={600} size="sm">
@@ -27,32 +34,34 @@ export function seaServiceColumns(
           </Text>
           {row.original.imoNumber && (
             <Text size="xs" c="dimmed">
-              IMO {row.original.imoNumber}
+              {t('seaRecords.columns.imo', { number: row.original.imoNumber })}
             </Text>
           )}
         </>
       ),
     },
-    { header: 'Rank', accessorKey: 'rank' },
+    { header: t('seaRecords.columns.rank'), accessorKey: 'rank' },
     {
-      header: 'From',
+      header: t('seaRecords.columns.from'),
       accessorKey: 'engagementDate',
       cell: ({ row }) => showDate(row.original.engagementDate),
     },
     {
-      header: 'To',
+      header: t('seaRecords.columns.to'),
       accessorKey: 'dischargeDate',
       cell: ({ row }) => showDate(row.original.dischargeDate),
     },
     {
-      header: 'Status',
+      header: t('common.status'),
       cell: ({ row }) => (
         <Tooltip
           label={row.original.verificationRemark ?? ''}
           disabled={!row.original.verificationRemark}
         >
           <Badge color={RECORD_STATUS_COLORS[row.original.status]}>
-            {row.original.status}
+            {t(`seaRecords.columns.recordStatus.${row.original.status}`, {
+              defaultValue: row.original.status,
+            })}
           </Badge>
         </Tooltip>
       ),
@@ -61,12 +70,14 @@ export function seaServiceColumns(
 }
 
 export function medicalColumns(
+  t: TFunction,
   showDate: (date: string) => string,
 ): AdvancedColumn<MedicalCertificate>[] {
   const today = new Date().toISOString().slice(0, 10);
+  const options = fitnessOptions(t);
   return [
     {
-      header: 'Issuer',
+      header: t('seaRecords.columns.issuer'),
       cell: ({ row }) => (
         <>
           <Text fw={600} size="sm">
@@ -74,41 +85,45 @@ export function medicalColumns(
           </Text>
           {row.original.certificateNumber && (
             <Text size="xs" c="dimmed">
-              № {row.original.certificateNumber}
+              {t('seaRecords.columns.certNumber', { number: row.original.certificateNumber })}
             </Text>
           )}
         </>
       ),
     },
     {
-      header: 'Issued',
+      header: t('seaRecords.columns.issued'),
       accessorKey: 'issueDate',
       cell: ({ row }) => showDate(row.original.issueDate),
     },
     {
-      header: 'Expires',
+      header: t('seaRecords.columns.expires'),
       cell: ({ row }) => (
         <Group gap={6} wrap="nowrap">
           {showDate(row.original.expiryDate)}
-          {row.original.expiryDate < today && <Badge color="red">Expired</Badge>}
+          {row.original.expiryDate < today && (
+            <Badge color="red">{t('seaRecords.columns.expired')}</Badge>
+          )}
         </Group>
       ),
     },
     {
-      header: 'Fitness',
+      header: t('seaRecords.columns.fitness'),
       cell: ({ row }) =>
-        FITNESS_OPTIONS.find((o) => o.value === row.original.fitnessStatus)
-          ?.label ?? row.original.fitnessStatus,
+        options.find((o) => o.value === row.original.fitnessStatus)?.label ??
+        row.original.fitnessStatus,
     },
     {
-      header: 'Status',
+      header: t('common.status'),
       cell: ({ row }) => (
         <Tooltip
           label={row.original.verificationRemark ?? ''}
           disabled={!row.original.verificationRemark}
         >
           <Badge color={RECORD_STATUS_COLORS[row.original.status]}>
-            {row.original.status}
+            {t(`seaRecords.columns.recordStatus.${row.original.status}`, {
+              defaultValue: row.original.status,
+            })}
           </Badge>
         </Tooltip>
       ),
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
index f54551516..deefbab8b 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
@@ -27,6 +27,7 @@ import {
   IconStethoscope,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AdvancedTable, AmharicDatePicker, notify, useServerTable } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import {
@@ -49,7 +50,7 @@ import {
   RequirePermission,
   usePermissions,
 } from '@ema-platform/auth';
-import { seaServiceColumns, medicalColumns, FITNESS_OPTIONS } from './columns';
+import { seaServiceColumns, medicalColumns, fitnessOptions } from './columns';
 import { seaServiceActionsColumn, medicalActionsColumn } from './actions';
 
 /**
@@ -68,6 +69,7 @@ function EvidenceModal({
   ownerId: string | null;
   onClose: () => void;
 }) {
+  const { t } = useTranslation();
   const { data: attachments, refetch, isLoading } = useGetAttachmentsQuery(
     { ownerType, ownerId: ownerId ?? '' },
     { skip: !ownerId },
@@ -85,7 +87,7 @@ function EvidenceModal({
     });
     setUploading(false);
     if (result.ok) {
-      notify.success('Evidence uploaded');
+      notify.success(t('seaRecords.evidence.uploaded'));
       refetch();
     } else {
       notify.error(result.error);
@@ -95,13 +97,13 @@ function EvidenceModal({
   const files = (attachments ?? []).flatMap((a) => a.files);
 
   return (
-    <Modal opened={Boolean(ownerId)} onClose={onClose} title="Evidence" centered>
+    <Modal opened={Boolean(ownerId)} onClose={onClose} title={t('seaRecords.evidence.title')} centered>
       <Stack>
         {isLoading ? (
           <Loader size="sm" type="oval" />
         ) : files.length === 0 ? (
           <Text size="sm" c="dimmed">
-            No evidence uploaded yet.
+            {t('seaRecords.evidence.none')}
           </Text>
         ) : (
           files.map((file) => (
@@ -126,7 +128,7 @@ function EvidenceModal({
                 loading={uploading}
                 leftSection={<IconFileUpload size={16} />}
               >
-                Upload evidence
+                {t('seaRecords.evidence.upload')}
               </Button>
             )}
           </FileButton>
@@ -150,6 +152,7 @@ const EMPTY_SEA_SERVICE = {
 };
 
 function SeaServiceTab() {
+  const { t } = useTranslation();
   const showDate = useDateDisplayer();
   const { can } = usePermissions();
   const { data: records, isLoading, refetch } = useGetMySeaServiceRecordsQuery();
@@ -206,23 +209,23 @@ function SeaServiceTab() {
     try {
       if (editing) {
         await updateRecord({ id: editing.id, body }).unwrap();
-        notify.success('Sea-service record updated');
+        notify.success(t('seaRecords.seaService.updated'));
       } else {
         await createRecord(body).unwrap();
-        notify.success('Sea-service record added');
+        notify.success(t('seaRecords.seaService.added'));
       }
       setModalOpen(false);
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not save the record'));
+      notify.error(extractErrorMessage(error, t('seaRecords.seaService.saveFailed')));
     }
   };
 
   const remove = async (record: SeaServiceRecord) => {
     try {
       await deleteRecord(record.id).unwrap();
-      notify.success('Record withdrawn');
+      notify.success(t('seaRecords.seaService.withdrawn'));
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not delete the record'));
+      notify.error(extractErrorMessage(error, t('seaRecords.seaService.deleteFailed')));
     }
   };
 
@@ -237,8 +240,8 @@ function SeaServiceTab() {
   const page = paginate(records ?? []);
 
   const columns = [
-    ...seaServiceColumns(showDate),
-    seaServiceActionsColumn({
+    ...seaServiceColumns(t, showDate),
+    seaServiceActionsColumn(t, {
       can,
       onEvidence: (record) => setEvidenceFor(record.id),
       onEdit: openEdit,
@@ -251,25 +254,24 @@ function SeaServiceTab() {
       <Group justify="space-between">
         <Group gap="sm">
           <Text size="sm" c="dimmed">
-            Every engagement aboard a vessel, with its evidence. Verified
-            records feed certificate eligibility.
+            {t('seaRecords.seaService.description')}
           </Text>
           {seaTime && seaTime.verifiedRecords > 0 && (
             <Badge variant="light" color="teal">
-              Approved sea time: {seaTime.totalDays} days
+              {t('seaRecords.seaService.approvedSeaTime', { days: seaTime.totalDays })}
             </Badge>
           )}
         </Group>
         <RequirePermission anyOf={[PORTAL_PERMISSIONS.ADD_SEA_SERVICE]} hideOnly>
           <Button leftSection={<IconPlus size={16} />} onClick={openCreate}>
-            Add sea service
+            {t('seaRecords.seaService.add')}
           </Button>
         </RequirePermission>
       </Group>
       {(records ?? []).length === 0 ? (
         <Paper withBorder p="xl" radius="md">
           <Text c="dimmed" ta="center">
-            No sea-service records yet.
+            {t('seaRecords.seaService.empty')}
           </Text>
         </Paper>
       ) : (
@@ -277,7 +279,7 @@ function SeaServiceTab() {
           <AdvancedTable
             columns={columns}
             data={page.rows}
-            tableName="Sea service"
+            tableName={t('seaRecords.seaService.tableName')}
             itemCount={page.itemCount}
             pageIndex={page.pageIndex}
             onPageChange={setPageIndex}
@@ -292,51 +294,51 @@ function SeaServiceTab() {
       <Modal
         opened={modalOpen}
         onClose={() => setModalOpen(false)}
-        title={editing ? 'Edit sea service' : 'Add sea service'}
+        title={editing ? t('seaRecords.seaService.modal.editTitle') : t('seaRecords.seaService.modal.addTitle')}
         centered
         size="lg"
       >
         <Stack>
           <Group grow>
             <TextInput
-              label="Vessel name"
+              label={t('seaRecords.seaService.fields.vesselName')}
               required
               value={form.vesselName}
               onChange={(e) => setForm({ ...form, vesselName: e.target.value })}
             />
             <TextInput
-              label="IMO number"
+              label={t('seaRecords.seaService.fields.imoNumber')}
               value={form.imoNumber}
               onChange={(e) => setForm({ ...form, imoNumber: e.target.value })}
             />
           </Group>
           <Group grow>
             <TextInput
-              label="Vessel type"
+              label={t('seaRecords.seaService.fields.vesselType')}
               value={form.vesselType}
               onChange={(e) => setForm({ ...form, vesselType: e.target.value })}
             />
             <TextInput
-              label="Flag state"
+              label={t('seaRecords.seaService.fields.flagState')}
               value={form.flagState}
               onChange={(e) => setForm({ ...form, flagState: e.target.value })}
             />
             <NumberInput
-              label="Gross tonnage"
+              label={t('seaRecords.seaService.fields.grossTonnage')}
               min={0}
               value={grossTonnage}
               onChange={(v) => setGrossTonnage(typeof v === 'number' ? v : '')}
             />
           </Group>
           <TextInput
-            label="Rank / capacity"
+            label={t('seaRecords.seaService.fields.rank')}
             required
             value={form.rank}
             onChange={(e) => setForm({ ...form, rank: e.target.value })}
           />
           <Group grow>
             <AmharicDatePicker
-              label="Engagement date"
+              label={t('seaRecords.seaService.fields.engagementDate')}
               required
               value={form.engagementDate}
               onChange={(val) =>
@@ -345,7 +347,7 @@ function SeaServiceTab() {
               dateFormat="date"
             />
             <AmharicDatePicker
-              label="Discharge date"
+              label={t('seaRecords.seaService.fields.dischargeDate')}
               required
               value={form.dischargeDate}
               onChange={(val) =>
@@ -355,7 +357,7 @@ function SeaServiceTab() {
             />
           </Group>
           <Textarea
-            label="Duties"
+            label={t('seaRecords.seaService.fields.duties')}
             value={form.dutiesDescription}
             onChange={(e) =>
               setForm({ ...form, dutiesDescription: e.target.value })
@@ -363,14 +365,14 @@ function SeaServiceTab() {
           />
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setModalOpen(false)}>
-              Cancel
+              {t('common.cancel')}
             </Button>
             <Button
               onClick={save}
               disabled={!valid}
               loading={creating || updating}
             >
-              {editing ? 'Save changes' : 'Add record'}
+              {editing ? t('common.save') : t('seaRecords.seaService.addRecord')}
             </Button>
           </Group>
         </Stack>
@@ -397,6 +399,7 @@ const EMPTY_MEDICAL = {
 };
 
 function MedicalTab() {
+  const { t } = useTranslation();
   const showDate = useDateDisplayer();
   const { can } = usePermissions();
   const { data: certificates, isLoading, refetch } = useGetMyMedicalCertificatesQuery();
@@ -444,25 +447,23 @@ function MedicalTab() {
     try {
       if (editing) {
         await updateCertificate({ id: editing.id, body }).unwrap();
-        notify.success('Medical certificate updated');
+        notify.success(t('seaRecords.medical.updated'));
       } else {
         await createCertificate(body).unwrap();
-        notify.success('Medical certificate added');
+        notify.success(t('seaRecords.medical.added'));
       }
       setModalOpen(false);
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not save the certificate'));
+      notify.error(extractErrorMessage(error, t('seaRecords.medical.saveFailed')));
     }
   };
 
   const remove = async (certificate: MedicalCertificate) => {
     try {
       await deleteCertificate(certificate.id).unwrap();
-      notify.success('Certificate withdrawn');
+      notify.success(t('seaRecords.medical.withdrawn'));
     } catch (error) {
-      notify.error(
-        extractErrorMessage(error, 'Could not delete the certificate'),
-      );
+      notify.error(extractErrorMessage(error, t('seaRecords.medical.deleteFailed')));
     }
   };
 
@@ -476,8 +477,8 @@ function MedicalTab() {
   const page = paginate(certificates ?? []);
 
   const columns = [
-    ...medicalColumns(showDate),
-    medicalActionsColumn({
+    ...medicalColumns(t, showDate),
+    medicalActionsColumn(t, {
       can,
       onEvidence: (certificate) => setEvidenceFor(certificate.id),
       onEdit: openEdit,
@@ -489,19 +490,18 @@ function MedicalTab() {
     <Stack>
       <Group justify="space-between">
         <Text size="sm" c="dimmed">
-          STCW medical fitness certificates. An expired certificate blocks new
-          applications that require one.
+          {t('seaRecords.medical.description')}
         </Text>
         <RequirePermission anyOf={[PORTAL_PERMISSIONS.UPLOAD_MEDICAL]} hideOnly>
           <Button leftSection={<IconPlus size={16} />} onClick={openCreate}>
-            Add certificate
+            {t('seaRecords.medical.add')}
           </Button>
         </RequirePermission>
       </Group>
       {(certificates ?? []).length === 0 ? (
         <Paper withBorder p="xl" radius="md">
           <Text c="dimmed" ta="center">
-            No medical certificates yet.
+            {t('seaRecords.medical.empty')}
           </Text>
         </Paper>
       ) : (
@@ -509,7 +509,7 @@ function MedicalTab() {
           <AdvancedTable
             columns={columns}
             data={page.rows}
-            tableName="Medical certificates"
+            tableName={t('seaRecords.medical.tableName')}
             itemCount={page.itemCount}
             pageIndex={page.pageIndex}
             onPageChange={setPageIndex}
@@ -524,20 +524,20 @@ function MedicalTab() {
       <Modal
         opened={modalOpen}
         onClose={() => setModalOpen(false)}
-        title={editing ? 'Edit medical certificate' : 'Add medical certificate'}
+        title={editing ? t('seaRecords.medical.modal.editTitle') : t('seaRecords.medical.modal.addTitle')}
         centered
         size="lg"
       >
         <Stack>
           <Group grow>
             <TextInput
-              label="Issuing clinic / physician"
+              label={t('seaRecords.medical.fields.issuerName')}
               required
               value={form.issuerName}
               onChange={(e) => setForm({ ...form, issuerName: e.target.value })}
             />
             <TextInput
-              label="Certificate number"
+              label={t('seaRecords.medical.fields.certificateNumber')}
               value={form.certificateNumber}
               onChange={(e) =>
                 setForm({ ...form, certificateNumber: e.target.value })
@@ -546,14 +546,14 @@ function MedicalTab() {
           </Group>
           <Group grow>
             <AmharicDatePicker
-              label="Issue date"
+              label={t('seaRecords.medical.fields.issueDate')}
               required
               value={form.issueDate}
               onChange={(val) => setForm({ ...form, issueDate: val })}
               dateFormat="date"
             />
             <AmharicDatePicker
-              label="Expiry date"
+              label={t('seaRecords.medical.fields.expiryDate')}
               required
               value={form.expiryDate}
               onChange={(val) => setForm({ ...form, expiryDate: val })}
@@ -561,14 +561,14 @@ function MedicalTab() {
             />
           </Group>
           <Select
-            label="Fitness outcome"
-            data={FITNESS_OPTIONS}
+            label={t('seaRecords.medical.fields.fitnessOutcome')}
+            data={fitnessOptions(t)}
             value={form.fitnessStatus}
             onChange={(v) => setForm({ ...form, fitnessStatus: v ?? 'FIT' })}
           />
           {form.fitnessStatus === 'FIT_WITH_RESTRICTIONS' && (
             <Textarea
-              label="Restrictions"
+              label={t('seaRecords.medical.fields.restrictions')}
               value={form.restrictions}
               onChange={(e) =>
                 setForm({ ...form, restrictions: e.target.value })
@@ -577,14 +577,14 @@ function MedicalTab() {
           )}
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setModalOpen(false)}>
-              Cancel
+              {t('common.cancel')}
             </Button>
             <Button
               onClick={save}
               disabled={!valid}
               loading={creating || updating}
             >
-              {editing ? 'Save changes' : 'Add certificate'}
+              {editing ? t('common.save') : t('seaRecords.medical.add')}
             </Button>
           </Group>
         </Stack>
@@ -605,24 +605,24 @@ function MedicalTab() {
  * officer verifies them.
  */
 export function MySeaRecordsPage() {
+  const { t } = useTranslation();
   return (
     <Stack>
-      <Title order={2}>My Sea Records</Title>
+      <Title order={2}>{t('seaRecords.title')}</Title>
       <Alert
         variant="light"
         color="blue"
         icon={<IconInfoCircle size={16} />}
       >
-        Records you add here are submitted for EMA verification. Once verified
-        they are frozen and count toward certificate eligibility.
+        {t('seaRecords.pageIntro')}
       </Alert>
       <Tabs defaultValue="sea-service" keepMounted={false}>
         <Tabs.List>
           <Tabs.Tab value="sea-service" leftSection={<IconAnchor size={16} />}>
-            Sea Service
+            {t('seaRecords.tabs.seaService')}
           </Tabs.Tab>
           <Tabs.Tab value="medical" leftSection={<IconStethoscope size={16} />}>
-            Medical Certificates
+            {t('seaRecords.tabs.medical')}
           </Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel value="sea-service" pt="md">
diff --git a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
index ad4bca49c..327077303 100644
--- a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
@@ -21,9 +21,9 @@ import {
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   STATUS_COLORS,
-  STATUS_LABELS,
   STATUS_PROGRESS,
   TERMINAL_STATUSES,
   useGetMyApplicationsQuery,
@@ -36,12 +36,6 @@ import {
 
 const REGISTRATION_TYPE_KEY = 'SEAFARER_REGISTRATION';
 
-const DEPARTMENT_LABELS: Record<string, string> = {
-  DECK: 'Deck',
-  ENGINE: 'Engine',
-  CATERING: 'Catering',
-};
-
 const SEAFARER_STATUS_COLORS: Record<string, string> = {
   ACTIVE: 'green',
   PENDING: 'yellow',
@@ -58,6 +52,7 @@ const SEAFARER_STATUS_COLORS: Record<string, string> = {
  */
 export function SeafarerRegistrationPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const { profile, isLoading: loadingProfile } = useCurrentProfile();
   const { data: applications, isLoading: loadingApplications } =
     useGetMyApplicationsQuery();
@@ -85,7 +80,7 @@ export function SeafarerRegistrationPage() {
     const status = profile.seafarerStatus ?? 'ACTIVE';
     return (
       <Stack maw={720} mx="auto">
-        <Title order={2}>Seafarer Registration</Title>
+        <Title order={2}>{t('seafarer.title')}</Title>
         <Card withBorder radius="md" p="xl">
           <Stack>
             <Group justify="space-between">
@@ -93,22 +88,21 @@ export function SeafarerRegistrationPage() {
                 <IconCircleCheck size={32} color="var(--mantine-color-green-6)" />
                 <div>
                   <Text fw={700} size="lg">
-                    Registered Seafarer
+                    {t('seafarer.registered.badgeTitle')}
                   </Text>
                   <Text c="dimmed" size="sm">
-                    Your official seafarer profile with the Ethiopian Maritime
-                    Authority.
+                    {t('seafarer.registered.badgeSubtitle')}
                   </Text>
                 </div>
               </Group>
               <Badge color={SEAFARER_STATUS_COLORS[status] ?? 'gray'} size="lg">
-                {status}
+                {t(`seafarer.status.${status}`, { defaultValue: status })}
               </Badge>
             </Group>
             <Group gap="xl" mt="sm">
               <div>
                 <Text size="xs" c="dimmed" tt="uppercase">
-                  Seafarer Number
+                  {t('seafarer.registered.seafarerNumber')}
                 </Text>
                 <Text fw={700} ff="monospace" size="lg">
                   {profile.seafarerNumber}
@@ -117,18 +111,21 @@ export function SeafarerRegistrationPage() {
               {profile.seafarerDepartment && (
                 <div>
                   <Text size="xs" c="dimmed" tt="uppercase">
-                    Department
+                    {t('seafarer.registered.department')}
                   </Text>
                   <Text fw={600}>
-                    {DEPARTMENT_LABELS[profile.seafarerDepartment] ??
-                      profile.seafarerDepartment}
+                    {t(`seafarer.departments.${profile.seafarerDepartment}`, {
+                      defaultValue: profile.seafarerDepartment,
+                    })}
                   </Text>
                 </div>
               )}
             </Group>
             {status === 'SUSPENDED' && profile.seafarerStatusReason && (
               <Alert color="orange" icon={<IconInfoCircle size={16} />}>
-                Your profile is suspended: {profile.seafarerStatusReason}
+                {t('seafarer.registered.suspendedAlert', {
+                  reason: profile.seafarerStatusReason,
+                })}
               </Alert>
             )}
           </Stack>
@@ -136,10 +133,9 @@ export function SeafarerRegistrationPage() {
         <Paper withBorder radius="md" p="lg">
           <Group justify="space-between">
             <div>
-              <Text fw={600}>Sea service &amp; medical records</Text>
+              <Text fw={600}>{t('seafarer.registered.recordsTitle')}</Text>
               <Text size="sm" c="dimmed">
-                Keep your sea-service history and medical certificates up to
-                date — certificate and seaman-book applications draw on them.
+                {t('seafarer.registered.recordsSubtitle')}
               </Text>
             </div>
             <Button
@@ -147,7 +143,7 @@ export function SeafarerRegistrationPage() {
               rightSection={<IconArrowRight size={16} />}
               onClick={() => navigate('/seafarer/records')}
             >
-              My records
+              {t('seafarer.registered.myRecords')}
             </Button>
           </Group>
         </Paper>
@@ -161,26 +157,26 @@ export function SeafarerRegistrationPage() {
     const needsAction = registration.status === 'RESUBMIT_REQUIRED';
     return (
       <Stack maw={720} mx="auto">
-        <Title order={2}>Seafarer Registration</Title>
+        <Title order={2}>{t('seafarer.title')}</Title>
         <Card withBorder radius="md" p="xl">
           <Stack>
             <Group justify="space-between">
               <div>
                 <Text fw={700}>{registration.applicationNumber}</Text>
                 <Text size="sm" c="dimmed">
-                  Submitted registrations are reviewed by an EMA registration
-                  officer; you will be notified of every decision.
+                  {t('seafarer.inFlight.subtitle')}
                 </Text>
               </div>
               <Badge color={STATUS_COLORS[registration.status]} size="lg">
-                {STATUS_LABELS[registration.status]}
+                {t(`applications.status.${registration.status}`, {
+                  defaultValue: registration.status,
+                })}
               </Badge>
             </Group>
             <Progress value={STATUS_PROGRESS[registration.status]} />
             {needsAction && (
               <Alert color="orange" icon={<IconInfoCircle size={16} />}>
-                The registration officer asked for corrections. Open the
-                application to see exactly what needs fixing.
+                {t('seafarer.inFlight.needsAction')}
               </Alert>
             )}
             <Group>
@@ -195,10 +191,10 @@ export function SeafarerRegistrationPage() {
                 }
               >
                 {isDraft
-                  ? 'Continue registration'
+                  ? t('seafarer.inFlight.continueRegistration')
                   : needsAction
-                    ? 'Fix and resubmit'
-                    : 'View application'}
+                    ? t('seafarer.inFlight.fixAndResubmit')
+                    : t('seafarer.inFlight.viewApplication')}
               </Button>
             </Group>
           </Stack>
@@ -210,11 +206,10 @@ export function SeafarerRegistrationPage() {
   // ------------------------------------------------------- not yet started
   return (
     <Stack maw={720} mx="auto">
-      <Title order={2}>Seafarer Registration</Title>
+      <Title order={2}>{t('seafarer.title')}</Title>
       {registration?.status === 'REJECTED' && (
-        <Alert color="red" title="Previous registration rejected">
-          {registration.rejectionReason ??
-            'Your previous registration was rejected. You may register again.'}
+        <Alert color="red" title={t('seafarer.notStarted.rejectedTitle')}>
+          {registration.rejectionReason ?? t('seafarer.notStarted.rejectedDefault')}
         </Alert>
       )}
       <Card withBorder radius="md" p="xl">
@@ -223,29 +218,25 @@ export function SeafarerRegistrationPage() {
             <IconAnchor size={32} color="var(--mantine-color-blue-6)" />
             <div>
               <Text fw={700} size="lg">
-                Register as a seafarer
+                {t('seafarer.notStarted.heading')}
               </Text>
               <Text c="dimmed" size="sm">
-                Approval creates your official seafarer profile with a unique
-                seafarer number — the identity every maritime service builds on.
+                {t('seafarer.notStarted.body')}
               </Text>
             </div>
           </Group>
           <Text fw={600} size="sm" mt="sm">
-            You will need:
+            {t('seafarer.notStarted.needsTitle')}
           </Text>
           <List
             size="sm"
             spacing={4}
             icon={<IconClipboardList size={16} color="var(--mantine-color-blue-5)" />}
           >
-            <List.Item>A passport-size photograph</List.Item>
-            <List.Item>Your National ID (Fayda) or Kebele ID</List.Item>
-            <List.Item>Your educational certificate</List.Item>
-            <List.Item>
-              A medical fitness certificate and passport, if you already hold
-              them
-            </List.Item>
+            <List.Item>{t('seafarer.notStarted.checklist.photo')}</List.Item>
+            <List.Item>{t('seafarer.notStarted.checklist.id')}</List.Item>
+            <List.Item>{t('seafarer.notStarted.checklist.certificate')}</List.Item>
+            <List.Item>{t('seafarer.notStarted.checklist.medical')}</List.Item>
           </List>
           <Group mt="md">
             <RequirePermission
@@ -257,7 +248,7 @@ export function SeafarerRegistrationPage() {
                 rightSection={<IconArrowRight size={18} />}
                 onClick={() => navigate(`/licensing/${REGISTRATION_TYPE_KEY}/apply`)}
               >
-                Start registration
+                {t('seafarer.notStarted.start')}
               </Button>
             </RequirePermission>
           </Group>
diff --git a/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx b/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
index ab1898fb2..6383fa5f8 100644
--- a/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
+++ b/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@mantine/core';
 import { FeatureUnavailable } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Placeholder until this feature has a backend.
@@ -8,11 +9,13 @@ import { FeatureUnavailable } from '@ema-platform/ui';
  * indistinguishable from real ones.
  */
 export function SeamanBookApplicationPage() {
+  const { t } = useTranslation();
+
   return (
     <Container size="lg" py="xl">
       <FeatureUnavailable
-        title="Apply for a Seaman Book"
-        description="Seaman Book applications are not connected to the backend yet."
+        title={t('featureUnavailable.seamanBookApplication.title')}
+        description={t('featureUnavailable.seamanBookApplication.description')}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx b/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
index 889bf7f95..df3f81431 100644
--- a/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
+++ b/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@mantine/core';
 import { FeatureUnavailable } from '@ema-platform/ui';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Placeholder until this feature has a backend.
@@ -8,11 +9,13 @@ import { FeatureUnavailable } from '@ema-platform/ui';
  * indistinguishable from real ones.
  */
 export function SeamanBookPage() {
+  const { t } = useTranslation();
+
   return (
     <Container size="lg" py="xl">
       <FeatureUnavailable
-        title="Seaman Book"
-        description="Seaman Book applications are not connected to the backend yet."
+        title={t('featureUnavailable.seamanBook.title')}
+        description={t('featureUnavailable.seamanBook.description')}
       />
     </Container>
   );
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/columns.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/columns.tsx
index b5027ea89..f43cf65d4 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/columns.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/columns.tsx
@@ -4,32 +4,36 @@ import {
   IconCertificate,
   IconRefresh,
 } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import type { IssuedLicense, Vessel } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS } from '@ema-platform/auth';
 
-const CATEGORY_LABELS: Record<string, string> = {
-  INLAND_WATERWAY: 'Inland Waterway',
-  SEA_GOING: 'Sea-going',
-};
-
 const VESSEL_STATUS_COLORS: Record<string, string> = {
   REGISTERED: 'green',
   SUSPENDED: 'orange',
   DEREGISTERED: 'gray',
 };
 
-export function vesselColumns(handlers: {
-  /** Permission check from usePermissions() — hooks can't run in a cell. */
-  can: (required?: string[]) => boolean;
-  licenseById: Map<string, IssuedLicense>;
-  onDownloadCertificate: (vessel: Vessel) => void;
-  onRenew: (vessel: Vessel) => void;
-  onReportIncident: (vessel: Vessel) => void;
-}): AdvancedColumn<Vessel>[] {
+export function vesselColumns(
+  t: TFunction,
+  handlers: {
+    /** Permission check from usePermissions() — hooks can't run in a cell. */
+    can: (required?: string[]) => boolean;
+    licenseById: Map<string, IssuedLicense>;
+    onDownloadCertificate: (vessel: Vessel) => void;
+    onRenew: (vessel: Vessel) => void;
+    onReportIncident: (vessel: Vessel) => void;
+  },
+): AdvancedColumn<Vessel>[] {
+  const categoryLabels: Record<string, string> = {
+    INLAND_WATERWAY: t('vesselRegistration.columns.categories.INLAND_WATERWAY'),
+    SEA_GOING: t('vesselRegistration.columns.categories.SEA_GOING'),
+  };
+
   return [
     {
-      header: 'Registration №',
+      header: t('vesselRegistration.columns.registrationNumber'),
       cell: ({ row }) => (
         <Text ff="monospace" size="sm" fw={600}>
           {row.original.registrationNumber}
@@ -37,7 +41,7 @@ export function vesselColumns(handlers: {
       ),
     },
     {
-      header: 'Vessel',
+      header: t('vesselRegistration.columns.vessel'),
       cell: ({ row }) => (
         <>
           <Text size="sm" fw={500}>
@@ -51,12 +55,12 @@ export function vesselColumns(handlers: {
       ),
     },
     {
-      header: 'Category',
+      header: t('vesselRegistration.columns.category'),
       cell: ({ row }) =>
-        CATEGORY_LABELS[row.original.category] ?? row.original.category,
+        categoryLabels[row.original.category] ?? row.original.category,
     },
     {
-      header: 'Certificate',
+      header: t('vesselRegistration.columns.certificate'),
       cell: ({ row }) => {
         const license = handlers.licenseById.get(row.original.licenseId);
         const expiring =
@@ -76,7 +80,7 @@ export function vesselColumns(handlers: {
               }
             >
               {license.status === 'ACTIVE' && expiring
-                ? `Expires in ${license.daysUntilExpiry}d`
+                ? t('vesselRegistration.columns.expiresIn', { count: license.daysUntilExpiry })
                 : license.status}
             </Badge>
           </Group>
@@ -88,7 +92,7 @@ export function vesselColumns(handlers: {
       },
     },
     {
-      header: 'Status',
+      header: t('common.status'),
       cell: ({ row }) => (
         <Badge size="sm" color={VESSEL_STATUS_COLORS[row.original.status]}>
           {row.original.status}
@@ -97,7 +101,7 @@ export function vesselColumns(handlers: {
     },
     {
       header: '',
-      label: 'Actions',
+      label: t('common.actions'),
       align: 'right',
       cell: ({ row }) => {
         const vessel = row.original;
@@ -106,33 +110,33 @@ export function vesselColumns(handlers: {
         return (
           <Group gap="xs" justify="flex-end" wrap="nowrap">
             {handlers.can([PORTAL_PERMISSIONS.VIEW_OWN_CERTIFICATES]) && (
-              <Tooltip label="Download certificate">
+              <Tooltip label={t('vesselRegistration.columns.certificateTooltip')}>
                 <Button
                   size="compact-xs"
                   variant="subtle"
                   leftSection={<IconCertificate size={14} />}
                   onClick={() => handlers.onDownloadCertificate(vessel)}
                 >
-                  Certificate
+                  {t('vesselRegistration.columns.certificate')}
                 </Button>
               </Tooltip>
             )}
             {renewable &&
               vessel.status === 'REGISTERED' &&
               handlers.can([PORTAL_PERMISSIONS.APPLY_VESSEL_REGISTRATION]) && (
-                <Tooltip label="Renew the registration">
+                <Tooltip label={t('vesselRegistration.columns.renewTooltip')}>
                   <Button
                     size="compact-xs"
                     variant="light"
                     leftSection={<IconRefresh size={14} />}
                     onClick={() => handlers.onRenew(vessel)}
                   >
-                    Renew
+                    {t('vesselRegistration.columns.renew')}
                   </Button>
                 </Tooltip>
               )}
             {handlers.can([PORTAL_PERMISSIONS.REPORT_VESSEL_INCIDENT]) && (
-              <Tooltip label="Report accident / incident">
+              <Tooltip label={t('vesselRegistration.columns.incidentTooltip')}>
                 <Button
                   size="compact-xs"
                   variant="subtle"
@@ -140,7 +144,7 @@ export function vesselColumns(handlers: {
                   leftSection={<IconAlertTriangle size={14} />}
                   onClick={() => handlers.onReportIncident(vessel)}
                 >
-                  Incident
+                  {t('vesselRegistration.columns.incident')}
                 </Button>
               </Tooltip>
             )}
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/index.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/index.tsx
index 6ed619f97..dd53c21b5 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/index.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Alert,
   Badge,
@@ -55,6 +56,7 @@ function IncidentModal({
   vessel: Vessel | null;
   onClose: () => void;
 }) {
+  const { t } = useTranslation();
   const [occurredAt, setOccurredAt] = useState('');
   const [location, setLocation] = useState('');
   const [description, setDescription] = useState('');
@@ -71,13 +73,15 @@ function IncidentModal({
           ...(location ? { location } : {}),
         },
       }).unwrap();
-      notify.success('Incident recorded');
+      notify.success(t('vesselRegistration.incident.recorded'));
       onClose();
       setOccurredAt('');
       setLocation('');
       setDescription('');
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not record the incident'));
+      notify.error(
+        extractErrorMessage(error, t('vesselRegistration.incident.recordFailed')),
+      );
     }
   };
 
@@ -85,24 +89,24 @@ function IncidentModal({
     <Modal
       opened={Boolean(vessel)}
       onClose={onClose}
-      title={`Report incident — ${vessel?.name ?? ''}`}
+      title={t('vesselRegistration.incident.modalTitle', { vesselName: vessel?.name ?? '' })}
       centered
     >
       <Stack>
         <TextInput
           type="date"
-          label="Date of occurrence"
+          label={t('vesselRegistration.incident.dateLabel')}
           required
           value={occurredAt}
           onChange={(e) => setOccurredAt(e.target.value)}
         />
         <TextInput
-          label="Location"
+          label={t('vesselRegistration.incident.locationLabel')}
           value={location}
           onChange={(e) => setLocation(e.target.value)}
         />
         <Textarea
-          label="What happened"
+          label={t('vesselRegistration.incident.descriptionLabel')}
           required
           minRows={3}
           value={description}
@@ -110,14 +114,14 @@ function IncidentModal({
         />
         <Group justify="flex-end">
           <Button variant="default" onClick={onClose}>
-            Cancel
+            {t('common.cancel')}
           </Button>
           <Button
             loading={isLoading}
             disabled={!occurredAt || description.trim().length < 10}
             onClick={submit}
           >
-            Record incident
+            {t('vesselRegistration.incident.submit')}
           </Button>
         </Group>
       </Stack>
@@ -131,6 +135,7 @@ function IncidentModal({
  * entry point into the config-driven registration wizard.
  */
 export function VesselRegistrationPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { data: vessels, isLoading: loadingVessels, refetch } = useGetMyVesselsQuery();
   const { data: applications, isLoading: loadingApplications } =
@@ -159,7 +164,7 @@ export function VesselRegistrationPage() {
       window.open(result.url, '_blank', 'noopener');
     } catch (error) {
       notify.error(
-        extractErrorMessage(error, 'Could not fetch the certificate'),
+        extractErrorMessage(error, t('vesselRegistration.certificate.fetchFailed')),
       );
     }
   }
@@ -176,7 +181,9 @@ export function VesselRegistrationPage() {
         `/licensing/${REGISTRATION_TYPE_KEY}/applications/${application.id}`,
       );
     } catch (error) {
-      notify.error(extractErrorMessage(error, 'Could not start the renewal'));
+      notify.error(
+        extractErrorMessage(error, t('vesselRegistration.renewal.startFailed')),
+      );
     }
   }
 
@@ -191,7 +198,7 @@ export function VesselRegistrationPage() {
   return (
     <Stack>
       <Group justify="space-between">
-        <Title order={2}>Vessel Registration</Title>
+        <Title order={2}>{t('vesselRegistration.title')}</Title>
         <RequirePermission
           anyOf={[PORTAL_PERMISSIONS.APPLY_VESSEL_REGISTRATION]}
           hideOnly
@@ -200,7 +207,7 @@ export function VesselRegistrationPage() {
             leftSection={<IconPlus size={16} />}
             onClick={() => navigate(`/licensing/${REGISTRATION_TYPE_KEY}/apply`)}
           >
-            Register a vessel
+            {t('vesselRegistration.registerButton')}
           </Button>
         </RequirePermission>
       </Group>
@@ -208,7 +215,7 @@ export function VesselRegistrationPage() {
       {/* ----------------------------------------------------- in-flight */}
       {inFlight.length > 0 && (
         <Stack gap="sm">
-          <Title order={4}>Registrations in progress</Title>
+          <Title order={4}>{t('vesselRegistration.inFlight.title')}</Title>
           {inFlight.map((app) => {
             const isDraft = app.status === 'DRAFT';
             const needsAction = app.status === 'RESUBMIT_REQUIRED';
@@ -226,7 +233,7 @@ export function VesselRegistrationPage() {
                         </Text>
                       )}
                       {app.kind === 'RENEWAL' && (
-                        <Badge variant="light">Renewal</Badge>
+                        <Badge variant="light">{t('vesselRegistration.inFlight.renewalBadge')}</Badge>
                       )}
                     </Group>
                     <Progress
@@ -250,7 +257,11 @@ export function VesselRegistrationPage() {
                         )
                       }
                     >
-                      {isDraft ? 'Continue' : needsAction ? 'Fix' : 'View'}
+                      {isDraft
+                        ? t('common.continue')
+                        : needsAction
+                          ? t('vesselRegistration.inFlight.fix')
+                          : t('vesselRegistration.inFlight.view')}
                     </Button>
                   </Group>
                 </Group>
@@ -262,16 +273,14 @@ export function VesselRegistrationPage() {
 
       {/* ------------------------------------------------------- register */}
       <Stack gap="sm">
-        <Title order={4}>My vessels</Title>
+        <Title order={4}>{t('vesselRegistration.myVessels.title')}</Title>
         {(vessels ?? []).length === 0 ? (
           <Paper withBorder radius="md" p="xl">
             <Stack align="center" gap="sm">
               <IconShip size={40} color="var(--mantine-color-blue-5)" />
-              <Text fw={600}>No registered vessels yet</Text>
+              <Text fw={600}>{t('vesselRegistration.myVessels.empty.title')}</Text>
               <Text size="sm" c="dimmed" ta="center" maw={420}>
-                Register an inland-waterway or sea-going vessel. Approval
-                issues the registration certificate and enters the vessel in
-                the national register.
+                {t('vesselRegistration.myVessels.empty.body')}
               </Text>
               <RequirePermission
                 anyOf={[PORTAL_PERMISSIONS.APPLY_VESSEL_REGISTRATION]}
@@ -283,15 +292,15 @@ export function VesselRegistrationPage() {
                     navigate(`/licensing/${REGISTRATION_TYPE_KEY}/apply`)
                   }
                 >
-                  Start registration
+                  {t('vesselRegistration.myVessels.empty.cta')}
                 </Button>
               </RequirePermission>
             </Stack>
           </Paper>
         ) : (
           <AdvancedTable
-            tableName="My vessels"
-            columns={vesselColumns({
+            tableName={t('vesselRegistration.myVessels.title')}
+            columns={vesselColumns(t, {
               can,
               licenseById,
               onDownloadCertificate: downloadCertificate,
@@ -310,8 +319,7 @@ export function VesselRegistrationPage() {
 
       {(vessels ?? []).some((v) => v.status === 'SUSPENDED') && (
         <Alert color="orange" icon={<IconInfoCircle size={16} />}>
-          A suspended vessel may not operate. Contact the Ethiopian Maritime
-          Authority about reinstatement.
+          {t('vesselRegistration.suspendedAlert')}
         </Alert>
       )}
 
@@ -319,8 +327,7 @@ export function VesselRegistrationPage() {
         <Group gap="xs">
           <IconAnchor size={18} color="var(--mantine-color-blue-5)" />
           <Text size="sm" c="dimmed">
-            Amendment and duplicate-certificate services are coming in a
-            later release.
+            {t('vesselRegistration.notify.comingSoon')}
           </Text>
         </Group>
       </Paper>
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx
index 037457bb1..65432c181 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationStatusPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Alert,
   Badge,
@@ -7,7 +8,6 @@ import {
   Divider,
   Group,
   Paper,
-  SimpleGrid,
   Stack,
   Stepper,
   Text,
@@ -38,6 +38,7 @@ function downloadCertificate(filename: string) {
 }
 
 export function VesselRegistrationStatusPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const showDate = useDateDisplayer();
   const { id } = useParams();
@@ -47,26 +48,30 @@ export function VesselRegistrationStatusPage() {
   if (!reg) {
     return (
       <Stack gap="md">
-        <Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>Back</Button>
-        <Alert variant="light" color="red" icon={<IconInfoCircle size={15} />}>Registration not found.</Alert>
+        <Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>{t('common.back')}</Button>
+        <Alert variant="light" color="red" icon={<IconInfoCircle size={15} />}>{t('vesselRegistration.status.notFound')}</Alert>
       </Stack>
     );
   }
 
-  const activeStep = reg.timeline.filter((t) => t.done).length - 1;
+  const activeStep = reg.timeline.filter((step) => step.done).length - 1;
   const needsCorrection = reg.status === 'Correction Required' || reg.status === 'Rejected';
 
   const handleDownload = (certName: string, certNumber: string) => {
     downloadCertificate(`${certName.replace(/\s+/g, '-')}-${certNumber}.pdf`);
     recordDownload(reg.id, certName);
     forceUpdate((n) => n + 1);
-    notify.success(`${certName} downloaded.`);
+    notify.success(t('vesselRegistration.status.downloadedNotify', { certName }));
   };
 
+  const renewalKey = reg.renewal === 'Overdue'
+    ? (reg.expiryDate ? 'vesselRegistration.status.renewalOverdueWithExpiry' : 'vesselRegistration.status.renewalOverdue')
+    : (reg.expiryDate ? 'vesselRegistration.status.renewalDueSoonWithExpiry' : 'vesselRegistration.status.renewalDueSoon');
+
   return (
     <Stack gap="md">
       <Group gap="sm">
-        <Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>Back</Button>
+        <Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>{t('common.back')}</Button>
         <div>
           <Title order={3}>{reg.vesselName}</Title>
           <Text fz="sm" c="dimmed">{reg.id} — {reg.category}</Text>
@@ -78,8 +83,8 @@ export function VesselRegistrationStatusPage() {
           <Group gap="sm">
             <ThemeIcon size={36} radius="md" color="blue" variant="light"><IconShip size={18} /></ThemeIcon>
             <div>
-              <Text fw={700} fz="sm">Registration Status</Text>
-              <Text fz="xs" c="dimmed">Submitted {reg.submitted}</Text>
+              <Text fw={700} fz="sm">{t('vesselRegistration.status.title')}</Text>
+              <Text fz="xs" c="dimmed">{t('vesselRegistration.status.submitted', { date: reg.submitted })}</Text>
             </div>
           </Group>
           <Badge color={STATUS_COLOR[reg.status]} variant="light" size="lg">{reg.status}</Badge>
@@ -94,15 +99,14 @@ export function VesselRegistrationStatusPage() {
             p="sm"
           >
             <Text fz="sm">
-              Registration {reg.renewal === 'Overdue' ? 'is overdue for renewal' : 'is due for renewal soon'}
-              {reg.expiryDate ? ` — expires ${showDate(reg.expiryDate)}` : ''}.
+              {t(renewalKey, { date: reg.expiryDate ? showDate(reg.expiryDate) : undefined })}
             </Text>
           </Alert>
         )}
 
         {reg.remarks && (
           <Alert variant="light" color={needsCorrection ? 'orange' : 'blue'} icon={<IconInfoCircle size={15} />} mb="md" p="sm">
-            <Text fz="sm" fw={600} mb={2}>Officer Remarks</Text>
+            <Text fz="sm" fw={600} mb={2}>{t('vesselRegistration.status.officerRemarks')}</Text>
             <Text fz="sm">{reg.remarks}</Text>
           </Alert>
         )}
@@ -112,7 +116,7 @@ export function VesselRegistrationStatusPage() {
             <Stepper.Step
               key={i}
               label={step.event}
-              description={step.date ?? 'Pending'}
+              description={step.date ?? t('vesselRegistration.status.pending')}
               icon={step.done ? <IconCircleCheck size={16} /> : <IconClock size={16} />}
             />
           ))}
@@ -120,23 +124,23 @@ export function VesselRegistrationStatusPage() {
 
         {needsCorrection && (
           <Group justify="flex-end" mt="md">
-            <Button color="orange" onClick={() => navigate('/vessel-registrations/apply')}>Resubmit Application</Button>
+            <Button color="orange" onClick={() => navigate('/vessel-registrations/apply')}>{t('vesselRegistration.status.resubmit')}</Button>
           </Group>
         )}
       </Paper>
 
       {reg.status === 'Approved' && reg.certificates && (
         <Paper withBorder radius="lg" p="xl">
-          <Text fw={700} mb="md">Certificates</Text>
+          <Text fw={700} mb="md">{t('vesselRegistration.status.certificatesTitle')}</Text>
           <Stack gap="sm">
             {reg.certificates.map((cert) => (
               <div key={cert.name}>
                 <Group justify="space-between" wrap="wrap" gap="sm">
                   <div>
                     <Text fw={600} fz="sm">{cert.name}</Text>
-                    <Text fz="xs" c="dimmed">Certificate No. {cert.number} — Issued {showDate(cert.issueDate)}</Text>
+                    <Text fz="xs" c="dimmed">{t('vesselRegistration.status.certificateNumber', { number: cert.number, date: showDate(cert.issueDate) })}</Text>
                     {cert.downloads > 0 && (
-                      <Text fz="xs" c="dimmed">Downloaded {cert.downloads} time{cert.downloads === 1 ? '' : 's'}</Text>
+                      <Text fz="xs" c="dimmed">{t('vesselRegistration.status.downloadedCount', { count: cert.downloads })}</Text>
                     )}
                   </div>
                   <Button
@@ -144,7 +148,7 @@ export function VesselRegistrationStatusPage() {
                     leftSection={<IconDownload size={14} />}
                     onClick={() => handleDownload(cert.name, cert.number)}
                   >
-                    Download
+                    {t('common.download')}
                   </Button>
                 </Group>
                 <Divider mt="sm" />
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselTransferPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselTransferPage.tsx
index 5f8cbae18..f0274d0e0 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselTransferPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselTransferPage.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Badge,
   Button,
@@ -29,11 +30,6 @@ import {
 
 const TRANSFER_TYPE_KEY = 'VESSEL_OWNERSHIP_TRANSFER';
 
-const CATEGORY_LABELS: Record<string, string> = {
-  INLAND_WATERWAY: 'Inland Waterway',
-  SEA_GOING: 'Sea-going',
-};
-
 const VESSEL_STATUS_COLORS: Record<string, string> = {
   REGISTERED: 'green',
   SUSPENDED: 'orange',
@@ -48,11 +44,17 @@ const VESSEL_STATUS_COLORS: Record<string, string> = {
  * certificate/renewal/incident actions, which don't apply here.
  */
 export function VesselTransferPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { data: vessels, isLoading: loadingVessels } = useGetMyVesselsQuery();
   const { data: applications, isLoading: loadingApplications } =
     useGetMyApplicationsQuery();
 
+  const categoryLabels: Record<string, string> = {
+    INLAND_WATERWAY: t('vesselTransfer.table.categories.INLAND_WATERWAY'),
+    SEA_GOING: t('vesselTransfer.table.categories.SEA_GOING'),
+  };
+
   const inFlight = (applications?.items ?? []).filter(
     (app) =>
       app.licenseType?.key === TRANSFER_TYPE_KEY &&
@@ -76,9 +78,9 @@ export function VesselTransferPage() {
   return (
     <Stack>
       <Group justify="space-between">
-        <Title order={2}>Ownership Transfer</Title>
+        <Title order={2}>{t('vesselTransfer.title')}</Title>
         <Tooltip
-          label="Register a vessel first — there's nothing to transfer yet"
+          label={t('vesselTransfer.startTransferDisabledTooltip')}
           disabled={hasTransferableVessel}
         >
           <Button
@@ -86,7 +88,7 @@ export function VesselTransferPage() {
             disabled={!hasTransferableVessel}
             onClick={() => navigate(`/licensing/${TRANSFER_TYPE_KEY}/apply`)}
           >
-            Start transfer
+            {t('vesselTransfer.startTransfer')}
           </Button>
         </Tooltip>
       </Group>
@@ -94,7 +96,7 @@ export function VesselTransferPage() {
       {/* ----------------------------------------------------- in-flight */}
       {inFlight.length > 0 && (
         <Stack gap="sm">
-          <Title order={4}>Transfers in progress</Title>
+          <Title order={4}>{t('vesselTransfer.inFlight.title')}</Title>
           {inFlight.map((app) => {
             const isDraft = app.status === 'DRAFT';
             const needsAction = app.status === 'RESUBMIT_REQUIRED';
@@ -124,7 +126,11 @@ export function VesselTransferPage() {
                         )
                       }
                     >
-                      {isDraft ? 'Continue' : needsAction ? 'Fix' : 'View'}
+                      {isDraft
+                        ? t('common.continue')
+                        : needsAction
+                          ? t('vesselTransfer.inFlight.fix')
+                          : t('vesselTransfer.inFlight.view')}
                     </Button>
                   </Group>
                 </Group>
@@ -136,22 +142,21 @@ export function VesselTransferPage() {
 
       {/* ------------------------------------------------------- vessels */}
       <Stack gap="sm">
-        <Title order={4}>My vessels</Title>
+        <Title order={4}>{t('vesselTransfer.myVessels.title')}</Title>
         {(vessels ?? []).length === 0 ? (
           <Paper withBorder radius="md" p="xl">
             <Stack align="center" gap="sm">
               <IconShip size={40} color="var(--mantine-color-blue-5)" />
-              <Text fw={600}>No registered vessels yet</Text>
+              <Text fw={600}>{t('vesselTransfer.myVessels.empty.title')}</Text>
               <Text size="sm" c="dimmed" ta="center" maw={420}>
-                Ownership can only be transferred for a vessel already on the
-                register.
+                {t('vesselTransfer.myVessels.empty.body')}
               </Text>
               <Button
                 mt="xs"
                 variant="light"
                 onClick={() => navigate('/vessel-registration')}
               >
-                Go to Vessel Registration
+                {t('vesselTransfer.myVessels.empty.cta')}
               </Button>
             </Stack>
           </Paper>
@@ -160,10 +165,10 @@ export function VesselTransferPage() {
             <Table striped highlightOnHover>
               <Table.Thead>
                 <Table.Tr>
-                  <Table.Th>Registration №</Table.Th>
-                  <Table.Th>Vessel</Table.Th>
-                  <Table.Th>Category</Table.Th>
-                  <Table.Th>Status</Table.Th>
+                  <Table.Th>{t('vesselTransfer.table.registrationNumber')}</Table.Th>
+                  <Table.Th>{t('vesselTransfer.table.vessel')}</Table.Th>
+                  <Table.Th>{t('vesselTransfer.table.category')}</Table.Th>
+                  <Table.Th>{t('common.status')}</Table.Th>
                   <Table.Th />
                 </Table.Tr>
               </Table.Thead>
@@ -186,7 +191,7 @@ export function VesselTransferPage() {
                       </Text>
                     </Table.Td>
                     <Table.Td>
-                      {CATEGORY_LABELS[vessel.category] ?? vessel.category}
+                      {categoryLabels[vessel.category] ?? vessel.category}
                     </Table.Td>
                     <Table.Td>
                       <Badge
@@ -199,7 +204,7 @@ export function VesselTransferPage() {
                     <Table.Td>
                       <Group justify="flex-end">
                         {canTransfer ? (
-                          <Tooltip label="Start an ownership transfer for this vessel">
+                          <Tooltip label={t('vesselTransfer.table.transferTooltip')}>
                             <Button
                               size="compact-xs"
                               variant="light"
@@ -208,12 +213,12 @@ export function VesselTransferPage() {
                                 navigate(`/licensing/${TRANSFER_TYPE_KEY}/apply`)
                               }
                             >
-                              Transfer
+                              {t('vesselTransfer.table.transfer')}
                             </Button>
                           </Tooltip>
                         ) : (
                           <Text size="xs" c="dimmed">
-                            Not transferable
+                            {t('vesselTransfer.table.notTransferable')}
                           </Text>
                         )}
                       </Group>
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 316757c79..ffaf63ef7 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -112,6 +112,56 @@ export const am: Translations = {
   dashboard: {
     title: 'ዳሽቦርድ',
     quickActions: 'ፈጣን ድርጊቶች',
+    loading: 'ዳሽቦርድ በመጫን ላይ…',
+    welcome: 'እንኳን ደህና መጡ',
+    welcomeName: 'እንኳን ደህና መጡ፣ {{name}}',
+    waitingOnYou: 'እርምጃዎን ይጠብቃል',
+    noFee: 'ክፍያ የለም',
+    hero: {
+      summaryEmpty: 'የባህር ወይም የሎጂስቲክስ ፍቃድ ያመልክቱ እና እስከሚሰጥ ድረስ ይከታተሉት።',
+      summary: '{{applications}} እና {{licences}} አለዎት።',
+      applicationsCount_one: '{{count}} ማመልከቻ',
+      applicationsCount_other: '{{count}} ማመልከቻዎች',
+      licencesCount_one: '{{count}} ንቁ ፍቃድ',
+      licencesCount_other: '{{count}} ንቁ ፍቃዶች',
+    },
+    actionRequired: {
+      messages: {
+        resubmit: 'ገምጋሚው ከመቀጠሉ በፊት እርማት እንዲደረግ ጠይቋል።',
+        paymentPending: 'ጸድቋል — ምስክር ወረቀቱ ከመሰጠቱ በፊት {{amount}} መከፈል አለበት።',
+        draft: 'ይህ ማመልከቻ አሁንም ረቂቅ ሲሆን ገና አልገባም።',
+      },
+      cta: {
+        fixNow: 'አሁን አስተካክል',
+        payNow: 'አሁን ክፈል',
+      },
+    },
+    expiringSoon: {
+      detail: '{{certificateNumber}} በ{{days}} ቀናት ውስጥ ያበቃል',
+    },
+    stats: {
+      expiringSoon: 'በቅርቡ የሚያበቃ',
+    },
+    sections: {
+      myLicences: {
+        title: 'ፍቃዶቼ',
+      },
+      myApplications: {
+        title: 'ማመልከቻዎቼ',
+        empty: 'እስካሁን ምንም ማመልከቻ አላስገቡም። ለመጀመር ከታች ፍቃድ ይምረጡ።',
+      },
+      apply: {
+        title: 'ለፍቃድ ያመልክቱ',
+        description: 'ኩባንያዎ ከሚሰጠው አገልግሎት ጋር የሚዛመድ ፍቃድ ይምረጡ።',
+      },
+    },
+    getStarted: {
+      title: 'ይጀምሩ',
+      body: 'እስካሁን ማመልከቻ አላስገቡም። ኩባንያዎ ከሚሰራው ስራ ጋር የሚዛመድ ፍቃድ ይምረጡ — ማመልከቻዎችዎ እና የተሰጡዎት ፍቃዶች እየገፉ ሲሄዱ እዚህ ይታያሉ።',
+    },
+    table: {
+      application: 'ማመልከቻ',
+    },
   },
 
   applications: {
@@ -453,4 +503,637 @@ export const am: Translations = {
       special: "አንድ ልዩ ምልክት",
     },
   },
+
+  errorBoundary: {
+    title: 'የሆነ ችግር ተከስቷል',
+    message: 'ያልተጠበቀ ስህተት ተከስቷል።',
+    reload: 'ገጹን እንደገና ይጫኑ',
+  },
+  featureUnavailable: {
+    documents: {
+      title: 'የእኔ ሰነዶች',
+      description: 'ማዕከላዊ የሰነድ ማከማቻ ገና ከሲስተሙ ጋር አልተገናኘም። ከፈቃድ ማመልከቻ ጋር የሚያስገቧቸው ሰነዶች ከዚያ ማመልከቻ ጋር ተያይዘው ይቀመጣሉ።',
+    },
+    medical: {
+      title: 'የሕክምና ምስክር ወረቀት',
+      description: 'የሕክምና ምስክር ወረቀቶች ገና ከሲስተሙ ጋር አልተገናኙም።',
+    },
+    basicSafetyTraining: {
+      title: 'መሠረታዊ የደህንነት ስልጠና',
+      description: 'የመሠረታዊ የደህንነት ስልጠና (BST) መዝገቦች ገና ከሲስተሙ ጋር አልተገናኙም።',
+    },
+    seamanBook: {
+      title: 'የመርከበኛ መጽሐፍ',
+      description: 'የመርከበኛ መጽሐፍ ማመልከቻዎች ገና ከሲስተሙ ጋር አልተገናኙም።',
+    },
+    seamanBookApplication: {
+      title: 'ለመርከበኛ መጽሐፍ ያመልክቱ',
+      description: 'የመርከበኛ መጽሐፍ ማመልከቻዎች ገና ከሲስተሙ ጋር አልተገናኙም።',
+    },
+  },
+
+  notifications: {
+    title: 'ማሳወቂያዎች',
+    unread_one: '{{count}} ያልተነበበ',
+    unread_other: '{{count}} ያልተነበቡ',
+    allCaughtUp: 'ሁሉንም አይተዋል',
+    tabs: {
+      all: 'ሁሉም',
+      unseen: 'ያልታዩ',
+      seen: 'የታዩ',
+    },
+    empty: {
+      all: 'እስካሁን ምንም ማሳወቂያ የለም።',
+      unseen: 'ያልተነበበ ማሳወቂያ የለም።',
+      seen: 'የተነበበ ማሳወቂያ የለም።',
+    },
+    emptyBody: 'ማመልከቻዎ ሲራመድ ይታወቃሉ።',
+    new: 'አዲስ',
+    markRead: 'እንደተነበበ ምልክት አድርግ',
+    loading: 'ማሳወቂያዎች በመጫን ላይ…',
+  },
+  onboarding: {
+    checkingProfile: 'የስራ ማስፈጸሚያ መገለጫ በመፈተሽ ላይ…',
+    operations: {
+      title: 'እንደ ምን አይነት ኦፕሬተር ነው የሚሰሩት?',
+      body: 'ባለስልጣኑ ፍቃድ የሚሰጠው በስራ አይነት (ኦፕሬሽን ሞድ) መሰረት ነው። ኩባንያዎ የሚሰራውን ይንገሩን፤ ማመልከት የሚችሉባቸውን ፍቃዶች እናሳይዎታለን — ይህንን በኋላ ከመገለጫዎ መቀየር ይችላሉ።',
+    },
+  },
+  payments: {
+    myApplications: 'ማመልከቻዎቼ',
+    fields: {
+      amount: 'መጠን',
+      method: 'የክፍያ ዘዴ',
+      reference: 'ማጣቀሻ',
+      paid: 'የተከፈለበት ቀን',
+    },
+    check: {
+      notFoundTitle: 'ይህን ክፍያ ማወቅ አልቻልንም',
+      notFoundBody: 'የክፍያውን ሁኔታ ለመፈተሽ ማመልከቻውን ከዝርዝርዎ ውስጥ ይክፈቱ።',
+      stillConfirmingTitle: 'ክፍያዎ በማረጋገጥ ላይ ነው',
+      stillConfirmingBody: 'ቴሌብር ይህን ክፍያ እስካሁን አላረጋገጠም። ገንዘቡ ከሂሳብዎ ወጥቶ ከሆነ በራስ-ሰር ይተገበራል — እንደገና መክፈል አያስፈልግም።',
+      checkAgain: 'እንደገና ፈትሽ',
+      confirmingTitle: 'ክፍያዎ በማረጋገጥ ላይ…',
+      confirmingBody: 'ይህ በተለምዶ ጥቂት ሰከንዶች ይወስዳል። እባክዎ ይህን ገጽ አይዝጉ።',
+    },
+    failure: {
+      title: 'ክፍያው አልተጠናቀቀም',
+      defaultReason: 'ክፍያው አልተጠናቀቀም። ምንም ገንዘብ አልተከፈለም።',
+      unchanged: 'ማመልከቻዎ አልተለወጠም እና በማንኛውም ጊዜ እንደገና መሞከር ይችላሉ።',
+    },
+    success: {
+      title: 'ክፍያ ደርሷል',
+      body: 'እናመሰግናለን። የፍቃድ ክፍያዎ ተከፍሏል እናም ማመልከቻዎ በመጠናቀቅ ላይ ነው። የምስክር ወረቀትዎ ሲዘጋጅ ይታወቃሉ።',
+      backToApplications: 'ወደ ማመልከቻዎቼ ተመለስ',
+    },
+  },
+
+  profileAddress: {
+    secondaryPhoneNumber: 'ሁለተኛ ስልክ',
+    postalAddress: 'የፖስታ አድራሻ',
+    addressSection: 'አድራሻ',
+    emergencyContactSection: 'የአደጋ ጊዜ ተጠሪ',
+    emergencyContactOptional: '(አማራጭ)',
+    contactName: 'የተጠሪ ስም',
+    contactPhone: 'የተጠሪ ስልክ',
+    relationship: 'ዝምድና',
+    accountManagedHint: 'ከመለያዎ የተገኘ ነው፣ በግል መረጃ ትር ውስጥ ያስተካክሉት',
+    idTypePlaceholder: 'ይምረጡ',
+    idNumberPlaceholder: 'የመታወቂያ ቁጥር ያስገቡ',
+    phonePlaceholder: '+251 9XX XXX XXX',
+    streetAddressPlaceholder: 'የመንገድ ስም፣ የቤት ቁጥር',
+    postalAddressPlaceholder: 'ፖስታ ሳጥን',
+    contactNamePlaceholder: 'ሙሉ ስም',
+    relationshipPlaceholder: 'የትዳር ጓደኛ፣ ወላጅ፣ ወዘተ.',
+    idTypeOptions: {
+      NID: 'ብሔራዊ መታወቂያ',
+      VITAL: 'የልደት/ወሳኝ ኩነት መታወቂያ',
+      PASSPORT: 'ፓስፖርት',
+      DRIVERS_LICENSE: 'የመንጃ ፍቃድ',
+    },
+    validation: {
+      idTypeRequired: 'የመታወቂያ ዓይነት ይምረጡ',
+      idNumberRequired: 'የመታወቂያ ቁጥር ያስገቡ',
+      nationalityRequired: 'ዜግነት ይምረጡ',
+      emailInvalid: 'ልክ ያልሆነ ኢሜይል',
+    },
+  },
+
+  profileOperations: {
+    title: 'የስራ ዘርፍ',
+    description: 'ድርጅትዎ በምን ዘርፍ እንደሚሰራ። የትኞቹ ፈቃዶች እንደሚቀርቡልዎት የሚወስነው ይህ ነው — ንግድዎ ሲቀየር ማንኛውም ጊዜ መቀየር ይችላሉ።',
+    current: 'የአሁኑ',
+    emptyState: 'እስካሁን የተዋቀሩ የፈቃድ ዓይነቶች የሉም። የሚጠብቁት ካለ EMA ን ያነጋግሩ።',
+    noneSelectedTitle: 'ምንም የስራ ዘርፍ አልተመረጠም',
+    noneSelectedBody: 'ምንም ካልተመረጠ ምንም ፈቃድ ለማመልከት አይቀርብልዎትም። ነባር ማመልከቻዎችና የተሰጡ ፈቃዶች አይነኩም።',
+    lastChanged: 'መጨረሻ የተቀየረው {{date}}',
+    notSetYet: 'እስካሁን አልተዋቀረም',
+    discardChanges: 'ለውጦችን ተወው',
+    saveOperations: 'የስራ ዘርፎችን አስቀምጥ',
+    removeModalTitle: 'ከስራ ዘርፍዎ ውስጥ ማስወገድ ይፈልጋሉ?',
+    removingPrefix: 'እያስወገዱ ያሉት፦',
+    removeConsequence: 'ከዚያ ዓይነት ለአዲስ ማመልከቻ ከእንግዲህ አይቀርብልዎትም። አስቀድመው የቀረቡ ማመልከቻዎች እንደነበሩ ይቀጥላሉ፣ አስቀድመው የተሰጡ ፈቃዶችም ልክ ሆነው ይቆያሉ እንዲሁም ማደስ ይችላሉ።',
+    removeAndSave: 'አስወግድና አስቀምጥ',
+    updateSuccessTitle: 'የስራ ዘርፎች ተዘምነዋል',
+    updateSuccessBody: 'ማመልከት የሚችሉባቸው ፈቃዶች ተዛማጅ እንዲሆኑ ተዘምነዋል።',
+    updateErrorTitle: 'ማስቀመጥ አልተቻለም',
+  },
+
+  licensing: {
+    vesselPicker: {
+      placeholder: 'የተመዘገበ መርከብ ይምረጡ',
+    },
+    msg: {
+      fileTooLarge: 'ፋይሉ ከ5ሜባ ገደብ በላይ ነው ({{size}})።',
+    },
+    documents: {
+      conditional: 'በሁኔታ ላይ የተመሠረተ',
+      uploaded: 'ተሰቅሏል',
+      officerRemark: 'ባለሥልጣን፦ {{name}}',
+      view: 'ይመልከቱ',
+      replace: 'ይተኩ',
+      upload: 'ይስቀሉ',
+    },
+    card: {
+      fallbackName: 'ፍቃድ',
+      expired: 'ጊዜው ያለፈበት',
+      expiredOn: 'ጊዜው ያለፈው በ{{date}}',
+      validUntil: 'እስከ {{date}} ድረስ የፀና',
+      downloadCertificate: 'የምስክር ወረቀት አውርድ',
+      renewExpired: 'አድስ — ይህ ፍቃድ ጊዜው አልፎበታል',
+      renewDays_one: 'አድስ — በ{{count}} ቀን ውስጥ ያበቃል',
+      renewDays_other: 'አድስ — በ{{count}} ቀናት ውስጥ ያበቃል',
+      renewFailed: 'ዕድሳት መጀመር አልተቻለም',
+    },
+    catalogue: {
+      emptyTitle: 'የሚሰሩበትን የስራ ዘርፍ ይንገሩን',
+      emptyBody:
+        'ፍቃዶች የሚቀርቡት እርስዎ በሚሠሩበት የስራ ዘርፍ መሠረት ነው — የጭነት አስተላላፊ፣ የመርከብ ወኪል፣ የተቀናጀ ትራንስፖርት ኦፕሬተር እና የመሳሰሉት። የእርስዎን ይምረጡ፣ ማመልከት የሚችሉባቸው ፍቃዶች እዚህ ይታያሉ።',
+      setOperations: 'የስራ ዘርፎቼን አዘጋጅ',
+      browseAll: 'ሁሉንም ፍቃዶች ያስሱ',
+      showOnlyMine: 'የኔን ብቻ አሳይ',
+      noneAvailable: 'እስካሁን ምንም የፍቃድ ዓይነት አልቀረበም። የሚጠብቁት ነገር ካለ ባለሥልጣኑን ያነጋግሩ።',
+      showingAll: 'ከስራ ዘርፎችዎ ውጪ ያሉትንም ጨምሮ ሁሉንም ፍቃዶች በማሳየት ላይ።',
+      showingMine: 'የተመዘገቡ የስራ ዘርፎችዎን የሚመለከቱ ፍቃዶች ብቻ ታይተዋል።',
+      otherLicences: 'ሌሎች ፍቃዶች',
+      otherLicencesDescription: 'ገና ምድብ ያልተሰጣቸው የፍቃድ ዓይነቶች።',
+      noFee: 'ክፍያ የለም',
+      capitalTooltip: 'በባንክ ደብዳቤ መረጋገጥ ያለበት ዝቅተኛ ካፒታል',
+      capitalBadge: 'ካፒታል {{amount}}',
+      validityBadge: '{{months}} ወራት',
+      evaluationTooltip: 'በምስክር ወረቀት ፈንታ በባለሥልጣኑ ውሳኔ የሚጠናቀቅ',
+      evaluationOnly: 'ግምገማ ብቻ',
+      startApplication: 'ማመልከቻ ጀምር',
+      addToOperations: 'ወደ ስራ ዘርፎቼ ጨምር',
+    },
+  },
+
+  certificates: {
+    title: "የእኔ የምስክር ወረቀቶች",
+    loading: "የምስክር ወረቀቶች በመጫን ላይ…",
+    fetchFailed: "የምስክር ወረቀቱን ማግኘት አልተቻለም",
+    eligibility: {
+      title: "ብቁነት",
+      registered: "የተመዘገበ መርከበኛ ({{number}})",
+      registrationRequired: "ንቁ የመርከበኛ ምዝገባ ያስፈልጋል",
+      medicalCurrent: "የአሁኑ የሕክምና የምስክር ወረቀት በመዝገብ ላይ አለ",
+      medicalRequired: "የአሁኑ የሕክምና የምስክር ወረቀት ያስፈልጋል",
+      seaTime: "የተረጋገጠ የባህር ጊዜ፦ {{days}} ቀናት (CoC 360, CoP 90 ያስፈልገዋል)",
+    },
+    applyCoc: "ለ CoC ያመልክቱ",
+    applyCop: "ለ CoP ያመልክቱ",
+    registrationNotice: {
+      prefix: "መጀመሪያ የ",
+      link: "መርከበኛ ምዝገባዎን",
+      suffix: "ያጠናቅቁ — ያለዚያ የምስክር ወረቀት ማመልከቻዎች ውድቅ ይደረጋሉ።",
+    },
+    inProgress: "በሂደት ላይ ያሉ ማመልከቻዎች",
+    issuedCertificates: "የወጡ የምስክር ወረቀቶች",
+    emptyIssued: "እስካሁን የወጣ የምስክር ወረቀት የለም።",
+    columns: {
+      certificateNumber: "የምስክር ወረቀት ቁጥር",
+      type: "ዓይነት",
+      issued: "የወጣበት ቀን",
+      expires: "የሚያበቃበት ቀን",
+      licenseStatus: {
+        ACTIVE: "ንቁ",
+        EXPIRED: "ጊዜው ያለፈበት",
+        SUSPENDED: "ታግዷል",
+        CANCELLED: "ተሰርዟል",
+        SUPERSEDED: "ተተክቷል",
+      },
+    },
+  },
+
+  licenseApplication: {
+    loading: 'ማመልከቻ በመጫን ላይ…',
+    fee: 'ክፍያ፡ {{amount}} {{currency}}',
+    review: 'ግምገማ',
+    resubmitCorrections: 'ማስተካከያዎችን እንደገና አስገባ',
+    submitApplication: 'ማመልከቻ አስገባ',
+    sectionLocked: 'ይህ ክፍል ተቀባይነት አግኝቶ ለዚህ ዙር ተቆልፏል።',
+    correctionsRequested: {
+      title: 'ማስተካከያ ተጠይቋል',
+      onlyListed: 'ከላይ የተዘረዘሩት ነገሮች ብቻ ሊቀየሩ ይችላሉ።',
+    },
+    stillMissing: {
+      title: 'አሁንም የጎደለ',
+    },
+    staff: {
+      addStaffMember: 'የሰራተኛ አባል ጨምር',
+      fullName: 'ሙሉ ስም',
+      position: 'የስራ መደብ',
+      yearsOfExperience: 'የስራ ልምድ ዓመታት',
+      add: 'ጨምር',
+      complete: 'ተጠናቅቋል',
+      requiredCount: '{{count}} ከ{{min}} የሚያስፈልጉ',
+      eachNeeds: '· እያንዳንዱ የሚያስፈልገው {{items}}',
+      yearsSuffix: '· {{count}} ዓመታት',
+    },
+    notifications: {
+      startFailed: {
+        title: 'ማመልከቻውን መጀመር አልተቻለም',
+      },
+      saveFailed: {
+        title: 'ማስቀመጥ አልተቻለም',
+      },
+      incomplete: {
+        title: 'ያልተሟላ',
+        message: 'ከማስገባትዎ በፊት የተጎሉትን መስኮች ያጠናቅቁ።',
+      },
+      incompleteFields_one: 'ለመቀጠል {{count}} አስፈላጊ መስክ ያጠናቅቁ።',
+      incompleteFields_other: 'ለመቀጠል {{count}} አስፈላጊ መስኮች ያጠናቅቁ።',
+      resubmitted: {
+        title: 'እንደገና ገብቷል',
+        message: 'ማስተካከያዎችዎ ለገምጋሚ ባለስልጣኑ ተልከዋል።',
+      },
+      submitted: {
+        title: 'ማመልከቻ ገብቷል',
+        message: 'እየገፋ ሲሄድ ይነገርዎታል።',
+      },
+      applicationIncomplete: {
+        title: 'ማመልከቻው ያልተሟላ ነው',
+        itemsNeedAttention_one: '{{count}} ንጥል አሁንም ትኩረት ይፈልጋል።',
+        itemsNeedAttention_other: '{{count}} ንጥሎች አሁንም ትኩረት ይፈልጋሉ።',
+      },
+      staffIncomplete: {
+        title: 'ሰራተኛ ያልተሟላ',
+        message: 'የሚያስፈልጉ፡ {{items}}።',
+        roleRequired: '{{name}} ({{count}} የሚያስፈልጉ)',
+      },
+      documentsMissing: {
+        title: 'ሰነዶች ይጎድላሉ',
+        message: 'ስቀል፡ {{items}}።',
+        andMore: 'እና ሌሎች {{count}}',
+      },
+    },
+  },
+
+  exams: {
+    title: 'ፈተናዎች',
+    openSessions: 'ክፍት ፈተናዎች',
+    noOpenSessions: 'ለምዝገባ ክፍት የሆነ መጪ ፈተና የለም።',
+    registered: 'ተመዝግቧል',
+    register: 'ይመዝገቡ',
+    myRegistrations: 'የእኔ ምዝገባዎች',
+    myResults: 'የእኔ ውጤቶች',
+    noRegistrations: 'እስካሁን የፈተና ምዝገባ የለም።',
+    noResults:
+      'እስካሁን የታተመ ውጤት የለም። ባለሥልጣኑ ካጸደቀና ካሳተመ በኋላ ውጤቶች እዚህ ይታያሉ።',
+    loading: 'የፈተና መርሃ ግብር በመጫን ላይ…',
+    notify: {
+      registered: 'ተመዝግበዋል — የመግቢያ ቁጥር {{admissionNumber}}',
+      admissionNumberPending: 'ወጥቷል',
+      registerFailed: 'መመዝገብ አልተቻለም',
+      seafarerRequired: 'ፈተና ለመቀመጥ ንቁ የመርከበኛ ምዝገባ ያስፈልጋል።',
+      alreadyRegistered: 'ለዚህ ፈተና አስቀድመው ተመዝግበዋል።',
+      alreadyPassed: 'ይህን ትምህርት አስቀድመው አልፈዋል — ድጋሚ መፈተን አያስፈልግም።',
+      slipFailed: 'የመግቢያ ወረቀት ማዘጋጀት አልተቻለም',
+      appealSubmitted: 'የይግባኝ {{appealNumber}} ቀርቧል',
+      appealFailed: 'ይግባኝ ማስገባት አልተቻለም',
+      appealWindowClosed:
+        'የይግባኝ ማቅረቢያ ጊዜው (ከታተመበት ቀን ጀምሮ {{days}} ቀናት) አልፏል።',
+      appealAlreadyOpen: 'በዚህ ውጤት ላይ ይግባኝ አስቀድሞ በመታየት ላይ ነው።',
+    },
+    appealModal: {
+      title: 'የዚህን ውጤት ግምገማ ይጠይቁ',
+      body: 'በ{{examTitle}} ውጤት አሰጣጥ ወይም አስተዳደር ላይ ስህተት ነው ብለው የሚያምኑትን ያብራሩ። ይግባኝ ከታተመበት ቀን ጀምሮ በ14 ቀናት ውስጥ መቅረብ አለበት።',
+      defaultExamTitle: 'ይህ ፈተና',
+      reasonLabel: 'የይግባኝ ምክንያት',
+      submit: 'ይግባኝ ያስገቡ',
+    },
+    columns: {
+      admission: 'የመግቢያ ቁጥር',
+      examination: 'ፈተና',
+      date: 'ቀን',
+      venue: 'ቦታ',
+      attempt: 'ሙከራ',
+      attendance: 'መገኘት',
+      slip: 'ወረቀት',
+      published: 'የታተመበት ቀን',
+      score: 'ውጤት',
+      outcome: 'ውጤት',
+      appeal: 'ይግባኝ',
+      retake: 'ድጋሚ · {{n}}',
+      firstSitting: 'የመጀመሪያ ሙከራ',
+      attendanceStatus: {
+        REGISTERED: 'አልተጠራም',
+        PRESENT: 'ተገኝቷል',
+        ABSENT: 'አልተገኘም',
+        LATE: 'ዘግይቷል',
+        WITHDRAWN: 'ወጥቷል',
+        DISQUALIFIED: 'ታግዷል',
+      },
+      outcomeStatus: {
+        PASSED: 'አልፏል',
+        FAILED: 'አልተሳካም',
+      },
+      appealStatus: {
+        SUBMITTED: 'ገብቷል',
+        UNDER_REVIEW: 'በግምገማ ላይ',
+        UPHELD: 'ጸድቋል',
+        REJECTED: 'ውድቅ ተደርጓል',
+      },
+    },
+  },
+
+  endorsement: {
+    title: "የእኔ ማረጋገጫዎች",
+    loading: "ማረጋገጫዎች በመጫን ላይ…",
+    fetchFailed: "ማረጋገጫውን ማግኘት አልተቻለም",
+    eligibility: {
+      title: "ብቁነት",
+      registered: "የተመዘገበ መርከበኛ ({{number}})",
+      registrationRequired: "ንቁ የመርከበኛ ምዝገባ ያስፈልጋል",
+    },
+    endorseCoc: "CoC ያረጋግጡ",
+    endorseGoc: "GOC ያረጋግጡ",
+    registrationNotice: {
+      prefix: "መጀመሪያ የ",
+      link: "መርከበኛ ምዝገባዎን",
+      suffix: "ያጠናቅቁ — ያለዚያ የማረጋገጫ ማመልከቻዎች ውድቅ ይደረጋሉ።",
+    },
+    inProgress: "በሂደት ላይ ያሉ ማመልከቻዎች",
+    issuedEndorsements: "የወጡ ማረጋገጫዎች",
+    emptyIssued: "እስካሁን የወጣ ማረጋገጫ የለም።",
+    columns: {
+      certificateNumber: "የምስክር ወረቀት ቁጥር",
+      type: "ዓይነት",
+      issued: "የወጣበት ቀን",
+      expires: "የሚያበቃበት ቀን",
+      licenseStatus: {
+        ACTIVE: "ንቁ",
+        EXPIRED: "ጊዜው ያለፈበት",
+        SUSPENDED: "ታግዷል",
+        CANCELLED: "ተሰርዟል",
+        SUPERSEDED: "ተተክቷል",
+      },
+    },
+  },
+
+  seafarer: {
+    title: 'የባህረኛ ምዝገባ',
+    status: {
+      ACTIVE: 'ንቁ',
+      PENDING: 'በመጠባበቅ ላይ',
+      SUSPENDED: 'ታግዷል',
+      INACTIVE: 'ንቁ ያልሆነ',
+    },
+    departments: {
+      DECK: 'ዴክ',
+      ENGINE: 'ምህንድስና',
+      CATERING: 'ኬተሪንግ',
+    },
+    registered: {
+      badgeTitle: 'የተመዘገበ ባህረኛ',
+      badgeSubtitle: 'ከኢትዮጵያ ባሕር ጉዳዮች ባለሥልጣን ጋር ያለዎት ይፋዊ የባህረኛ መገለጫ።',
+      seafarerNumber: 'የባህረኛ ቁጥር',
+      department: 'ክፍል',
+      suspendedAlert: 'መገለጫዎ ታግዷል፦ {{reason}}',
+      recordsTitle: 'የባህር አገልግሎትና የሕክምና መዝገቦች',
+      recordsSubtitle: 'የባህር አገልግሎት ታሪክዎንና የሕክምና የምስክር ወረቀቶችዎን ወቅታዊ ያድርጉ — የምስክር ወረቀትና የባህረኛ መጽሐፍ ማመልከቻዎች ከእነሱ ይመዘናሉ።',
+      myRecords: 'መዝገቦቼ',
+    },
+    inFlight: {
+      subtitle: 'የገቡ ምዝገባዎች በ EMA የምዝገባ ባለሙያ ይገመገማሉ፤ ስለ እያንዳንዱ ውሳኔ ይነገርዎታል።',
+      needsAction: 'የምዝገባ ባለሙያው ማስተካከያ ጠይቋል። ምን መስተካከል እንዳለበት በትክክል ለማየት ማመልከቻውን ይክፈቱ።',
+      continueRegistration: 'ምዝገባ ይቀጥሉ',
+      fixAndResubmit: 'አስተካክለው እንደገና ያስገቡ',
+      viewApplication: 'ማመልከቻ ይመልከቱ',
+    },
+    notStarted: {
+      rejectedTitle: 'ቀደም ያለ ምዝገባ ውድቅ ተደርጓል',
+      rejectedDefault: 'ቀደም ያለ ምዝገባዎ ውድቅ ተደርጓል። እንደገና መመዝገብ ይችላሉ።',
+      heading: 'እንደ ባህረኛ ይመዝገቡ',
+      body: 'መጽደቅ ልዩ የባህረኛ ቁጥር ያለው ይፋዊ የባህረኛ መገለጫ ይፈጥርልዎታል — እያንዳንዱ የባሕር አገልግሎት የሚገነባበት ማንነት።',
+      needsTitle: 'የሚያስፈልግዎት፦',
+      checklist: {
+        photo: 'የፓስፖርት መጠን ያለው ፎቶግራፍ',
+        id: 'ብሔራዊ መታወቂያዎ (ፋይዳ) ወይም የቀበሌ መታወቂያ',
+        certificate: 'የትምህርት ማስረጃዎ',
+        medical: 'የሕክምና ብቁነት የምስክር ወረቀትና ፓስፖርት፣ አስቀድመው ካሉዎት',
+      },
+      start: 'ምዝገባ ይጀምሩ',
+    },
+  },
+
+  seaRecords: {
+    title: 'የባህር መዝገቦቼ',
+    pageIntro: 'እዚህ የሚያክሏቸው መዝገቦች ለ EMA ማረጋገጫ ይላካሉ። ከተረጋገጡ በኋላ ይዘጋሉ እንዲሁም ለምስክር ወረቀት ብቁነት ይቆጠራሉ።',
+    tabs: {
+      seaService: 'የባህር አገልግሎት',
+      medical: 'የሕክምና የምስክር ወረቀቶች',
+    },
+    evidence: {
+      title: 'ማስረጃ',
+      none: 'እስካሁን ምንም ማስረጃ አልተሰቀለም።',
+      upload: 'ማስረጃ ስቀል',
+      uploaded: 'ማስረጃ ተሰቅሏል',
+    },
+    seaService: {
+      description: 'በመርከብ ላይ የተደረገ እያንዳንዱ ተሳትፎ፣ ከማስረጃው ጋር። የተረጋገጡ መዝገቦች ለምስክር ወረቀት ብቁነት ይውላሉ።',
+      approvedSeaTime: 'የጸደቀ የባህር ጊዜ፦ {{days}} ቀናት',
+      add: 'የባህር አገልግሎት ጨምር',
+      empty: 'እስካሁን የባህር አገልግሎት መዝገብ የለም።',
+      tableName: 'የባህር አገልግሎት',
+      modal: {
+        editTitle: 'የባህር አገልግሎት አርትዕ',
+        addTitle: 'የባህር አገልግሎት ጨምር',
+      },
+      fields: {
+        vesselName: 'የመርከብ ስም',
+        imoNumber: 'የ IMO ቁጥር',
+        vesselType: 'የመርከብ አይነት',
+        flagState: 'የባንዲራ ሀገር',
+        grossTonnage: 'ጠቅላላ ቶኔጅ',
+        rank: 'ማዕረግ / ኃላፊነት',
+        engagementDate: 'የተቀጠሩበት ቀን',
+        dischargeDate: 'የተሰናበቱበት ቀን',
+        duties: 'ተግባራት',
+      },
+      addRecord: 'መዝገብ ጨምር',
+      updated: 'የባህር አገልግሎት መዝገብ ተዘምኗል',
+      added: 'የባህር አገልግሎት መዝገብ ታክሏል',
+      saveFailed: 'መዝገቡን ማስቀመጥ አልተቻለም',
+      withdrawn: 'መዝገብ ተነስቷል',
+      deleteFailed: 'መዝገቡን መሰረዝ አልተቻለም',
+    },
+    medical: {
+      description: 'የ STCW የሕክምና ብቁነት የምስክር ወረቀቶች። ጊዜው ያለፈበት የምስክር ወረቀት እሱን የሚያስፈልጋቸውን አዳዲስ ማመልከቻዎች ያግዳል።',
+      add: 'የምስክር ወረቀት ጨምር',
+      empty: 'እስካሁን የሕክምና የምስክር ወረቀት የለም።',
+      tableName: 'የሕክምና የምስክር ወረቀቶች',
+      modal: {
+        editTitle: 'የሕክምና የምስክር ወረቀት አርትዕ',
+        addTitle: 'የሕክምና የምስክር ወረቀት ጨምር',
+      },
+      fields: {
+        issuerName: 'የሰጠው ክሊኒክ / ሐኪም',
+        certificateNumber: 'የምስክር ወረቀት ቁጥር',
+        issueDate: 'የተሰጠበት ቀን',
+        expiryDate: 'የሚያበቃበት ቀን',
+        fitnessOutcome: 'የብቁነት ውጤት',
+        restrictions: 'ገደቦች',
+      },
+      updated: 'የሕክምና የምስክር ወረቀት ተዘምኗል',
+      added: 'የሕክምና የምስክር ወረቀት ታክሏል',
+      saveFailed: 'የምስክር ወረቀቱን ማስቀመጥ አልተቻለም',
+      withdrawn: 'የምስክር ወረቀት ተነስቷል',
+      deleteFailed: 'የምስክር ወረቀቱን መሰረዝ አልተቻለም',
+    },
+    columns: {
+      vessel: 'መርከብ',
+      imo: 'IMO {{number}}',
+      rank: 'ማዕረግ',
+      from: 'ከ',
+      to: 'እስከ',
+      issuer: 'ሰጪ',
+      certNumber: '№ {{number}}',
+      issued: 'የተሰጠበት',
+      expires: 'የሚያበቃበት',
+      expired: 'ጊዜው አልፏል',
+      fitness: 'ብቁነት',
+      fitnessOptions: {
+        FIT: 'ብቁ',
+        FIT_WITH_RESTRICTIONS: 'በገደብ ብቁ',
+        UNFIT: 'ብቁ ያልሆነ',
+      },
+      recordStatus: {
+        SUBMITTED: 'ገብቷል',
+        VERIFIED: 'ተረጋግጧል',
+        REJECTED: 'ውድቅ ተደርጓል',
+      },
+    },
+    actions: {
+      evidence: 'ማስረጃ',
+      scanEvidence: 'ስካን / ማስረጃ',
+      edit: 'አርትዕ',
+      delete: 'ሰርዝ',
+      frozen: 'የተረጋገጡ መዝገቦች ተዘግተዋል',
+      certificatesFrozen: 'የተረጋገጡ የምስክር ወረቀቶች ተዘግተዋል',
+    },
+  },
+
+  vesselRegistration: {
+    title: 'የመርከብ ምዝገባ',
+    registerButton: 'መርከብ ይመዝግቡ',
+    suspendedAlert:
+      'የታገደ መርከብ መንቀሳቀስ አይችልም። ስለ ዳግም ማቋቋም የኢትዮጵያ ባሕር ጉዳዮች ባለሥልጣንን ያግኙ።',
+    inFlight: {
+      title: 'በሂደት ላይ ያሉ ምዝገባዎች',
+      renewalBadge: 'እድሳት',
+      fix: 'አስተካክል',
+      view: 'ይመልከቱ',
+    },
+    myVessels: {
+      title: 'የእኔ መርከቦች',
+      empty: {
+        title: 'እስካሁን የተመዘገበ መርከብ የለም',
+        body: 'የውስጥ ውሃ መስመር ወይም የባህር ማዕድ መርከብ ይመዝግቡ። ማጽደቅ የምዝገባ የምስክር ወረቀት ያወጣል እንዲሁም መርከቧን በብሔራዊ መዝገብ ውስጥ ያስገባል።',
+        cta: 'ምዝገባ ጀምር',
+      },
+    },
+    notify: {
+      comingSoon: 'የማሻሻያ እና የምስክር ወረቀት ድግግሞሽ አገልግሎቶች በሚቀጥለው ስሪት ይመጣሉ።',
+    },
+    incident: {
+      modalTitle: 'አደጋ ሪፖርት አድርግ — {{vesselName}}',
+      dateLabel: 'የተከሰተበት ቀን',
+      locationLabel: 'ቦታ',
+      descriptionLabel: 'የተከሰተው ነገር',
+      submit: 'አደጋ መዝግብ',
+      recorded: 'አደጋው ተመዝግቧል',
+      recordFailed: 'አደጋውን መመዝገብ አልተቻለም',
+    },
+    certificate: {
+      fetchFailed: 'የምስክር ወረቀቱን ማግኘት አልተቻለም',
+    },
+    renewal: {
+      startFailed: 'እድሳቱን መጀመር አልተቻለም',
+    },
+    columns: {
+      registrationNumber: 'የምዝገባ ቁጥር',
+      vessel: 'መርከብ',
+      category: 'ምድብ',
+      certificate: 'የምስክር ወረቀት',
+      expiresIn: 'በ{{count}} ቀን ውስጥ ያበቃል',
+      renew: 'አድስ',
+      renewTooltip: 'ምዝገባውን አድስ',
+      certificateTooltip: 'የምስክር ወረቀት አውርድ',
+      incident: 'አደጋ',
+      incidentTooltip: 'አደጋ / ችግር ሪፖርት አድርግ',
+      categories: {
+        INLAND_WATERWAY: 'የውስጥ ውሃ መስመር',
+        SEA_GOING: 'የባህር ማዕድ',
+      },
+    },
+    status: {
+      notFound: 'ምዝገባ አልተገኘም።',
+      title: 'የምዝገባ ሁኔታ',
+      submitted: 'የገባው {{date}}',
+      officerRemarks: 'የመኮንን አስተያየት',
+      pending: 'በመጠባበቅ ላይ',
+      resubmit: 'ማመልከቻ እንደገና አስገባ',
+      certificatesTitle: 'የምስክር ወረቀቶች',
+      certificateNumber: 'የምስክር ወረቀት ቁጥር {{number}} — የወጣበት {{date}}',
+      downloadedCount_one: '{{count}} ጊዜ ወርዷል',
+      downloadedCount_other: '{{count}} ጊዜያት ወርዷል',
+      downloadedNotify: '{{certName}} ወርዷል።',
+      renewalOverdue: 'ምዝገባው እድሳት ጊዜው አልፎበታል።',
+      renewalOverdueWithExpiry: 'ምዝገባው እድሳት ጊዜው አልፎበታል — የሚያበቃው {{date}}።',
+      renewalDueSoon: 'ምዝገባው በቅርቡ እድሳት ይፈልጋል።',
+      renewalDueSoonWithExpiry: 'ምዝገባው በቅርቡ እድሳት ይፈልጋል — የሚያበቃው {{date}}።',
+    },
+  },
+
+  vesselTransfer: {
+    title: 'የባለቤትነት ዝውውር',
+    startTransfer: 'ዝውውር ጀምር',
+    startTransferDisabledTooltip: 'መጀመሪያ መርከብ ይመዝግቡ — እስካሁን የሚዛወር ነገር የለም',
+    inFlight: {
+      title: 'በሂደት ላይ ያሉ ዝውውሮች',
+      fix: 'አስተካክል',
+      view: 'ይመልከቱ',
+    },
+    myVessels: {
+      title: 'የእኔ መርከቦች',
+      empty: {
+        title: 'እስካሁን የተመዘገበ መርከብ የለም',
+        body: 'ባለቤትነት ሊዛወር የሚችለው ቀድሞ በመዝገብ ውስጥ ላለ መርከብ ብቻ ነው።',
+        cta: 'ወደ የመርከብ ምዝገባ ይሂዱ',
+      },
+    },
+    table: {
+      registrationNumber: 'የምዝገባ ቁጥር',
+      vessel: 'መርከብ',
+      category: 'ምድብ',
+      transfer: 'አዛውር',
+      transferTooltip: 'ለዚህ መርከብ የባለቤትነት ዝውውር ጀምር',
+      notTransferable: 'ሊዛወር አይችልም',
+      categories: {
+        INLAND_WATERWAY: 'የውስጥ ውሃ መስመር',
+        SEA_GOING: 'የባህር ማዕድ',
+      },
+    },
+  },
 };
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index c5695efe3..1c336acc3 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -111,6 +111,56 @@ export const en = {
   dashboard: {
     title: 'Dashboard',
     quickActions: 'Quick actions',
+    loading: 'Loading dashboard…',
+    welcome: 'Welcome back',
+    welcomeName: 'Welcome back, {{name}}',
+    waitingOnYou: 'Waiting on you',
+    noFee: 'No fee',
+    hero: {
+      summaryEmpty: 'Apply for a maritime or logistics licence and track it through to issue.',
+      summary: 'You have {{applications}} and {{licences}}.',
+      applicationsCount_one: '{{count}} application',
+      applicationsCount_other: '{{count}} applications',
+      licencesCount_one: '{{count}} active licence',
+      licencesCount_other: '{{count}} active licences',
+    },
+    actionRequired: {
+      messages: {
+        resubmit: 'A reviewer asked for corrections before this can proceed.',
+        paymentPending: 'Approved — {{amount}} due before the certificate is issued.',
+        draft: 'This application is still a draft and has not been filed.',
+      },
+      cta: {
+        fixNow: 'Fix now',
+        payNow: 'Pay now',
+      },
+    },
+    expiringSoon: {
+      detail: '{{certificateNumber}} expires in {{days}} days',
+    },
+    stats: {
+      expiringSoon: 'Expiring soon',
+    },
+    sections: {
+      myLicences: {
+        title: 'My licences',
+      },
+      myApplications: {
+        title: 'My applications',
+        empty: 'You have not filed any applications yet. Pick a licence below to get started.',
+      },
+      apply: {
+        title: 'Apply for a licence',
+        description: 'Choose the licence that matches the service your company provides.',
+      },
+    },
+    getStarted: {
+      title: 'Get started',
+      body: 'You have not filed an application yet. Choose the licence that matches what your company does — your applications and the licences issued to you will appear here as you go.',
+    },
+    table: {
+      application: 'Application',
+    },
   },
 
   applications: {
@@ -453,6 +503,641 @@ export const en = {
       special: 'One special character',
     },
   },
+
+  errorBoundary: {
+    title: 'Something went wrong',
+    message: 'An unexpected error occurred.',
+    reload: 'Reload page',
+  },
+  featureUnavailable: {
+    documents: {
+      title: 'My documents',
+      description: 'A central document vault is not connected to the backend yet. Documents you upload with a licence application are stored with that application.',
+    },
+    medical: {
+      title: 'Medical certificate',
+      description: 'Medical certificates are not connected to the backend yet.',
+    },
+    basicSafetyTraining: {
+      title: 'Basic Safety Training',
+      description: 'BST records are not connected to the backend yet.',
+    },
+    seamanBook: {
+      title: 'Seaman Book',
+      description: 'Seaman Book applications are not connected to the backend yet.',
+    },
+    seamanBookApplication: {
+      title: 'Apply for a Seaman Book',
+      description: 'Seaman Book applications are not connected to the backend yet.',
+    },
+  },
+
+  notifications: {
+    title: 'Notifications',
+    unread_one: '{{count}} unread',
+    unread_other: '{{count}} unread',
+    allCaughtUp: 'You are all caught up',
+    tabs: {
+      all: 'All',
+      unseen: 'Unseen',
+      seen: 'Seen',
+    },
+    empty: {
+      all: 'No notifications yet.',
+      unseen: 'Nothing unread.',
+      seen: 'No read notifications.',
+    },
+    emptyBody: 'You will be notified as your applications progress.',
+    new: 'new',
+    markRead: 'Mark read',
+    loading: 'Loading Notifications…',
+  },
+  onboarding: {
+    checkingProfile: 'Checking operations profile…',
+    operations: {
+      title: 'What do you operate as?',
+      body: 'The Authority licenses by mode of operation. Tell us what your company does and we will show you the licences you can apply for — you can change this later from your profile.',
+    },
+  },
+  payments: {
+    myApplications: 'My applications',
+    fields: {
+      amount: 'Amount',
+      method: 'Method',
+      reference: 'Reference',
+      paid: 'Paid',
+    },
+    check: {
+      notFoundTitle: 'We could not identify this payment',
+      notFoundBody: 'Open the application from your list to check its payment status.',
+      stillConfirmingTitle: 'Still confirming your payment',
+      stillConfirmingBody: 'Telebirr has not confirmed this payment yet. If the money has left your account it will be applied automatically — there is no need to pay again.',
+      checkAgain: 'Check again',
+      confirmingTitle: 'Confirming your payment…',
+      confirmingBody: 'This usually takes a few seconds. Please do not close this page.',
+    },
+    failure: {
+      title: 'Payment not completed',
+      defaultReason: 'The payment was not completed. Nothing has been charged.',
+      unchanged: 'Your application is unchanged and you can try again at any time.',
+    },
+    success: {
+      title: 'Payment received',
+      body: 'Thank you. Your licence fee has been paid and your application is being finalised. You will be notified when your certificate is ready.',
+      backToApplications: 'Back to my applications',
+    },
+  },
+
+  profileAddress: {
+    secondaryPhoneNumber: 'Secondary Phone',
+    postalAddress: 'Postal Address',
+    addressSection: 'Address',
+    emergencyContactSection: 'Emergency Contact',
+    emergencyContactOptional: '(optional)',
+    contactName: 'Contact Name',
+    contactPhone: 'Contact Phone',
+    relationship: 'Relationship',
+    accountManagedHint: 'From your account, edit it in the Personal tab',
+    idTypePlaceholder: 'Select',
+    idNumberPlaceholder: 'Enter ID number',
+    phonePlaceholder: '+251 9XX XXX XXX',
+    streetAddressPlaceholder: 'Street name, house number',
+    postalAddressPlaceholder: 'P.O. Box',
+    contactNamePlaceholder: 'Full name',
+    relationshipPlaceholder: 'Spouse, Parent, etc.',
+    idTypeOptions: {
+      NID: 'National Id',
+      VITAL: 'Vital ID',
+      PASSPORT: 'Passport',
+      DRIVERS_LICENSE: "Driver's License",
+    },
+    validation: {
+      idTypeRequired: 'Select ID type',
+      idNumberRequired: 'Enter ID number',
+      nationalityRequired: 'Select nationality',
+      emailInvalid: 'Invalid email',
+    },
+  },
+
+  profileOperations: {
+    title: 'Mode of operation',
+    description: 'What your company operates as. This decides which licences you are offered — you can change it whenever your business changes.',
+    current: 'Current',
+    emptyState: 'No licence types are configured yet. Contact EMA if you were expecting one.',
+    noneSelectedTitle: 'No operations selected',
+    noneSelectedBody: 'With none selected you will not be offered any licence to apply for. Existing applications and issued licences are unaffected.',
+    lastChanged: 'Last changed {{date}}',
+    notSetYet: 'Not set yet',
+    discardChanges: 'Discard changes',
+    saveOperations: 'Save operations',
+    removeModalTitle: 'Remove from your operations?',
+    removingPrefix: 'You are removing',
+    removeConsequence: 'You will no longer be offered a new application of that type. Applications already filed carry on as they are, and licences already issued to you stay valid and can still be renewed.',
+    removeAndSave: 'Remove and save',
+    updateSuccessTitle: 'Operations updated',
+    updateSuccessBody: 'The licences you can apply for have been updated to match.',
+    updateErrorTitle: 'Could not save',
+  },
+
+  licensing: {
+    vesselPicker: {
+      placeholder: 'Select a registered vessel',
+    },
+    msg: {
+      fileTooLarge: 'File exceeds 5MB limit ({{size}}).',
+    },
+    documents: {
+      conditional: 'conditional',
+      uploaded: 'uploaded',
+      officerRemark: 'Officer: {{name}}',
+      view: 'View',
+      replace: 'Replace',
+      upload: 'Upload',
+    },
+    card: {
+      fallbackName: 'Licence',
+      expired: 'Expired',
+      expiredOn: 'Expired on {{date}}',
+      validUntil: 'Valid until {{date}}',
+      downloadCertificate: 'Download certificate',
+      renewExpired: 'Renew — this licence has expired',
+      renewDays_one: 'Renew — expires in {{count}} day',
+      renewDays_other: 'Renew — expires in {{count}} days',
+      renewFailed: 'Could not start the renewal',
+    },
+    catalogue: {
+      emptyTitle: 'Tell us what you operate as',
+      emptyBody:
+        'Licences are offered against your mode of operation — freight forwarder, shipping agent, multimodal transport operator and so on. Choose yours and the licences you can apply for appear here.',
+      setOperations: 'Set my operations',
+      browseAll: 'Browse all licences',
+      showOnlyMine: 'Show only mine',
+      noneAvailable: 'No licence types are available yet. Contact EMA if you were expecting one.',
+      showingAll: 'Showing every licence, including ones outside your operations.',
+      showingMine: 'Only licences matching your declared operations are shown.',
+      otherLicences: 'Other licences',
+      otherLicencesDescription: 'Licence types that have not been assigned a category.',
+      noFee: 'No fee',
+      capitalTooltip: 'Minimum capital that must be evidenced by a bank letter',
+      capitalBadge: 'Capital {{amount}}',
+      validityBadge: '{{months}} months',
+      evaluationTooltip: 'Concludes with an EMA decision rather than a certificate',
+      evaluationOnly: 'Evaluation only',
+      startApplication: 'Start application',
+      addToOperations: 'Add to my operations',
+    },
+  },
+
+  certificates: {
+    title: 'My Certificates',
+    loading: 'Loading Certificates…',
+    fetchFailed: 'Could not fetch certificate',
+    eligibility: {
+      title: 'Eligibility',
+      registered: 'Registered seafarer ({{number}})',
+      registrationRequired: 'Active seafarer registration required',
+      medicalCurrent: 'Current medical certificate on file',
+      medicalRequired: 'A current medical certificate is required',
+      seaTime: 'Verified sea time: {{days}} days (CoC needs 360, CoP 90)',
+    },
+    applyCoc: 'Apply for CoC',
+    applyCop: 'Apply for CoP',
+    registrationNotice: {
+      prefix: 'Complete your',
+      link: 'seafarer registration',
+      suffix: 'first — certificate applications are refused without it.',
+    },
+    inProgress: 'Applications in progress',
+    issuedCertificates: 'Issued certificates',
+    emptyIssued: 'No certificates issued yet.',
+    columns: {
+      certificateNumber: 'Certificate №',
+      type: 'Type',
+      issued: 'Issued',
+      expires: 'Expires',
+      licenseStatus: {
+        ACTIVE: 'Active',
+        EXPIRED: 'Expired',
+        SUSPENDED: 'Suspended',
+        CANCELLED: 'Cancelled',
+        SUPERSEDED: 'Superseded',
+      },
+    },
+  },
+
+  licenseApplication: {
+    loading: 'Loading Application…',
+    fee: 'Fee: {{amount}} {{currency}}',
+    review: 'Review',
+    resubmitCorrections: 'Resubmit corrections',
+    submitApplication: 'Submit application',
+    sectionLocked: 'This section was accepted and is locked for this round.',
+    correctionsRequested: {
+      title: 'Corrections requested',
+      onlyListed: 'Only the items listed above can be changed.',
+    },
+    stillMissing: {
+      title: 'Still missing',
+    },
+    staff: {
+      addStaffMember: 'Add staff member',
+      fullName: 'Full name',
+      position: 'Position',
+      yearsOfExperience: 'Years of experience',
+      add: 'Add',
+      complete: 'complete',
+      requiredCount: '{{count}} of {{min}} required',
+      eachNeeds: '· each needs {{items}}',
+      yearsSuffix: '· {{count}} yrs',
+    },
+    notifications: {
+      startFailed: {
+        title: 'Could not start application',
+      },
+      saveFailed: {
+        title: 'Could not save',
+      },
+      incomplete: {
+        title: 'Incomplete',
+        message: 'Complete the highlighted fields before submitting.',
+      },
+      incompleteFields_one: 'Complete {{count}} required field to continue.',
+      incompleteFields_other: 'Complete {{count}} required fields to continue.',
+      resubmitted: {
+        title: 'Resubmitted',
+        message: 'Your corrections were sent back to the reviewing officer.',
+      },
+      submitted: {
+        title: 'Application submitted',
+        message: 'You will be notified as it progresses.',
+      },
+      applicationIncomplete: {
+        title: 'Application incomplete',
+        itemsNeedAttention_one: '{{count}} item still needs attention.',
+        itemsNeedAttention_other: '{{count}} items still need attention.',
+      },
+      staffIncomplete: {
+        title: 'Staff incomplete',
+        message: 'Still needed: {{items}}.',
+        roleRequired: '{{name}} ({{count}} required)',
+      },
+      documentsMissing: {
+        title: 'Documents missing',
+        message: 'Upload: {{items}}.',
+        andMore: 'and {{count}} more',
+      },
+    },
+  },
+
+  exams: {
+    title: 'Examinations',
+    openSessions: 'Open sessions',
+    noOpenSessions: 'No upcoming sessions are open for registration.',
+    registered: 'Registered',
+    register: 'Register',
+    myRegistrations: 'My registrations',
+    myResults: 'My results',
+    noRegistrations: 'No exam registrations yet.',
+    noResults:
+      'No results have been published yet. Marks appear here once the authority approves and publishes them.',
+    loading: 'Loading Exam Schedule…',
+    notify: {
+      registered: 'Registered — admission number {{admissionNumber}}',
+      admissionNumberPending: 'issued',
+      registerFailed: 'Could not register',
+      seafarerRequired:
+        'An active seafarer registration is required to sit examinations.',
+      alreadyRegistered: 'You are already registered for this session.',
+      alreadyPassed:
+        'You have already passed this subject — a resit is not needed.',
+      slipFailed: 'Could not generate the admission slip',
+      appealSubmitted: 'Appeal {{appealNumber}} submitted',
+      appealFailed: 'Could not submit the appeal',
+      appealWindowClosed:
+        'The appeal window ({{days}} days from publication) has closed.',
+      appealAlreadyOpen: 'An appeal on this result is already being considered.',
+    },
+    appealModal: {
+      title: 'Request a review of this result',
+      body: 'Explain what you believe went wrong with the marking or the administration of {{examTitle}}. Appeals must be lodged within 14 days of publication.',
+      defaultExamTitle: 'this examination',
+      reasonLabel: 'Grounds for appeal',
+      submit: 'Submit appeal',
+    },
+    columns: {
+      admission: 'Admission №',
+      examination: 'Examination',
+      date: 'Date',
+      venue: 'Venue',
+      attempt: 'Attempt',
+      attendance: 'Attendance',
+      slip: 'Slip',
+      published: 'Published',
+      score: 'Score',
+      outcome: 'Outcome',
+      appeal: 'Appeal',
+      retake: 'Retake · {{n}}',
+      firstSitting: 'First sitting',
+      attendanceStatus: {
+        REGISTERED: 'Not called',
+        PRESENT: 'Present',
+        ABSENT: 'Absent',
+        LATE: 'Late',
+        WITHDRAWN: 'Withdrawn',
+        DISQUALIFIED: 'Disqualified',
+      },
+      outcomeStatus: {
+        PASSED: 'Passed',
+        FAILED: 'Failed',
+      },
+      appealStatus: {
+        SUBMITTED: 'Submitted',
+        UNDER_REVIEW: 'Under review',
+        UPHELD: 'Upheld',
+        REJECTED: 'Rejected',
+      },
+    },
+  },
+
+  endorsement: {
+    title: 'My Endorsements',
+    loading: 'Loading Endorsements…',
+    fetchFailed: 'Could not fetch endorsement',
+    eligibility: {
+      title: 'Eligibility',
+      registered: 'Registered seafarer ({{number}})',
+      registrationRequired: 'Active seafarer registration required',
+    },
+    endorseCoc: 'Endorse a CoC',
+    endorseGoc: 'Endorse a GOC',
+    registrationNotice: {
+      prefix: 'Complete your',
+      link: 'seafarer registration',
+      suffix: 'first — endorsement applications are refused without it.',
+    },
+    inProgress: 'Applications in progress',
+    issuedEndorsements: 'Issued endorsements',
+    emptyIssued: 'No endorsements issued yet.',
+    columns: {
+      certificateNumber: 'Certificate №',
+      type: 'Type',
+      issued: 'Issued',
+      expires: 'Expires',
+      licenseStatus: {
+        ACTIVE: 'Active',
+        EXPIRED: 'Expired',
+        SUSPENDED: 'Suspended',
+        CANCELLED: 'Cancelled',
+        SUPERSEDED: 'Superseded',
+      },
+    },
+  },
+
+  seafarer: {
+    title: 'Seafarer Registration',
+    status: {
+      ACTIVE: 'Active',
+      PENDING: 'Pending',
+      SUSPENDED: 'Suspended',
+      INACTIVE: 'Inactive',
+    },
+    departments: {
+      DECK: 'Deck',
+      ENGINE: 'Engine',
+      CATERING: 'Catering',
+    },
+    registered: {
+      badgeTitle: 'Registered Seafarer',
+      badgeSubtitle: 'Your official seafarer profile with the Ethiopian Maritime Authority.',
+      seafarerNumber: 'Seafarer Number',
+      department: 'Department',
+      suspendedAlert: 'Your profile is suspended: {{reason}}',
+      recordsTitle: 'Sea service & medical records',
+      recordsSubtitle: 'Keep your sea-service history and medical certificates up to date — certificate and seaman-book applications draw on them.',
+      myRecords: 'My records',
+    },
+    inFlight: {
+      subtitle: 'Submitted registrations are reviewed by an EMA registration officer; you will be notified of every decision.',
+      needsAction: 'The registration officer asked for corrections. Open the application to see exactly what needs fixing.',
+      continueRegistration: 'Continue registration',
+      fixAndResubmit: 'Fix and resubmit',
+      viewApplication: 'View application',
+    },
+    notStarted: {
+      rejectedTitle: 'Previous registration rejected',
+      rejectedDefault: 'Your previous registration was rejected. You may register again.',
+      heading: 'Register as a seafarer',
+      body: 'Approval creates your official seafarer profile with a unique seafarer number — the identity every maritime service builds on.',
+      needsTitle: 'You will need:',
+      checklist: {
+        photo: 'A passport-size photograph',
+        id: 'Your National ID (Fayda) or Kebele ID',
+        certificate: 'Your educational certificate',
+        medical: 'A medical fitness certificate and passport, if you already hold them',
+      },
+      start: 'Start registration',
+    },
+  },
+
+  seaRecords: {
+    title: 'My Sea Records',
+    pageIntro: 'Records you add here are submitted for EMA verification. Once verified they are frozen and count toward certificate eligibility.',
+    tabs: {
+      seaService: 'Sea Service',
+      medical: 'Medical Certificates',
+    },
+    evidence: {
+      title: 'Evidence',
+      none: 'No evidence uploaded yet.',
+      upload: 'Upload evidence',
+      uploaded: 'Evidence uploaded',
+    },
+    seaService: {
+      description: 'Every engagement aboard a vessel, with its evidence. Verified records feed certificate eligibility.',
+      approvedSeaTime: 'Approved sea time: {{days}} days',
+      add: 'Add sea service',
+      empty: 'No sea-service records yet.',
+      tableName: 'Sea service',
+      modal: {
+        editTitle: 'Edit sea service',
+        addTitle: 'Add sea service',
+      },
+      fields: {
+        vesselName: 'Vessel name',
+        imoNumber: 'IMO number',
+        vesselType: 'Vessel type',
+        flagState: 'Flag state',
+        grossTonnage: 'Gross tonnage',
+        rank: 'Rank / capacity',
+        engagementDate: 'Engagement date',
+        dischargeDate: 'Discharge date',
+        duties: 'Duties',
+      },
+      addRecord: 'Add record',
+      updated: 'Sea-service record updated',
+      added: 'Sea-service record added',
+      saveFailed: 'Could not save the record',
+      withdrawn: 'Record withdrawn',
+      deleteFailed: 'Could not delete the record',
+    },
+    medical: {
+      description: 'STCW medical fitness certificates. An expired certificate blocks new applications that require one.',
+      add: 'Add certificate',
+      empty: 'No medical certificates yet.',
+      tableName: 'Medical certificates',
+      modal: {
+        editTitle: 'Edit medical certificate',
+        addTitle: 'Add medical certificate',
+      },
+      fields: {
+        issuerName: 'Issuing clinic / physician',
+        certificateNumber: 'Certificate number',
+        issueDate: 'Issue date',
+        expiryDate: 'Expiry date',
+        fitnessOutcome: 'Fitness outcome',
+        restrictions: 'Restrictions',
+      },
+      updated: 'Medical certificate updated',
+      added: 'Medical certificate added',
+      saveFailed: 'Could not save the certificate',
+      withdrawn: 'Certificate withdrawn',
+      deleteFailed: 'Could not delete the certificate',
+    },
+    columns: {
+      vessel: 'Vessel',
+      imo: 'IMO {{number}}',
+      rank: 'Rank',
+      from: 'From',
+      to: 'To',
+      issuer: 'Issuer',
+      certNumber: '№ {{number}}',
+      issued: 'Issued',
+      expires: 'Expires',
+      expired: 'Expired',
+      fitness: 'Fitness',
+      fitnessOptions: {
+        FIT: 'Fit',
+        FIT_WITH_RESTRICTIONS: 'Fit with restrictions',
+        UNFIT: 'Unfit',
+      },
+      recordStatus: {
+        SUBMITTED: 'Submitted',
+        VERIFIED: 'Verified',
+        REJECTED: 'Rejected',
+      },
+    },
+    actions: {
+      evidence: 'Evidence',
+      scanEvidence: 'Scan / evidence',
+      edit: 'Edit',
+      delete: 'Delete',
+      frozen: 'Verified records are frozen',
+      certificatesFrozen: 'Verified certificates are frozen',
+    },
+  },
+
+  vesselRegistration: {
+    title: 'Vessel Registration',
+    registerButton: 'Register a vessel',
+    suspendedAlert:
+      'A suspended vessel may not operate. Contact the Ethiopian Maritime Authority about reinstatement.',
+    inFlight: {
+      title: 'Registrations in progress',
+      renewalBadge: 'Renewal',
+      fix: 'Fix',
+      view: 'View',
+    },
+    myVessels: {
+      title: 'My vessels',
+      empty: {
+        title: 'No registered vessels yet',
+        body: 'Register an inland-waterway or sea-going vessel. Approval issues the registration certificate and enters the vessel in the national register.',
+        cta: 'Start registration',
+      },
+    },
+    notify: {
+      comingSoon: 'Amendment and duplicate-certificate services are coming in a later release.',
+    },
+    incident: {
+      modalTitle: 'Report incident — {{vesselName}}',
+      dateLabel: 'Date of occurrence',
+      locationLabel: 'Location',
+      descriptionLabel: 'What happened',
+      submit: 'Record incident',
+      recorded: 'Incident recorded',
+      recordFailed: 'Could not record the incident',
+    },
+    certificate: {
+      fetchFailed: 'Could not fetch the certificate',
+    },
+    renewal: {
+      startFailed: 'Could not start the renewal',
+    },
+    columns: {
+      registrationNumber: 'Registration №',
+      vessel: 'Vessel',
+      category: 'Category',
+      certificate: 'Certificate',
+      expiresIn: 'Expires in {{count}}d',
+      renew: 'Renew',
+      renewTooltip: 'Renew the registration',
+      certificateTooltip: 'Download certificate',
+      incident: 'Incident',
+      incidentTooltip: 'Report accident / incident',
+      categories: {
+        INLAND_WATERWAY: 'Inland Waterway',
+        SEA_GOING: 'Sea-going',
+      },
+    },
+    status: {
+      notFound: 'Registration not found.',
+      title: 'Registration Status',
+      submitted: 'Submitted {{date}}',
+      officerRemarks: 'Officer Remarks',
+      pending: 'Pending',
+      resubmit: 'Resubmit Application',
+      certificatesTitle: 'Certificates',
+      certificateNumber: 'Certificate No. {{number}} — Issued {{date}}',
+      downloadedCount_one: 'Downloaded {{count}} time',
+      downloadedCount_other: 'Downloaded {{count}} times',
+      downloadedNotify: '{{certName}} downloaded.',
+      renewalOverdue: 'Registration is overdue for renewal.',
+      renewalOverdueWithExpiry: 'Registration is overdue for renewal — expires {{date}}.',
+      renewalDueSoon: 'Registration is due for renewal soon.',
+      renewalDueSoonWithExpiry: 'Registration is due for renewal soon — expires {{date}}.',
+    },
+  },
+
+  vesselTransfer: {
+    title: 'Ownership Transfer',
+    startTransfer: 'Start transfer',
+    startTransferDisabledTooltip: "Register a vessel first — there's nothing to transfer yet",
+    inFlight: {
+      title: 'Transfers in progress',
+      fix: 'Fix',
+      view: 'View',
+    },
+    myVessels: {
+      title: 'My vessels',
+      empty: {
+        title: 'No registered vessels yet',
+        body: 'Ownership can only be transferred for a vessel already on the register.',
+        cta: 'Go to Vessel Registration',
+      },
+    },
+    table: {
+      registrationNumber: 'Registration №',
+      vessel: 'Vessel',
+      category: 'Category',
+      transfer: 'Transfer',
+      transferTooltip: 'Start an ownership transfer for this vessel',
+      notTransferable: 'Not transferable',
+      categories: {
+        INLAND_WATERWAY: 'Inland Waterway',
+        SEA_GOING: 'Sea-going',
+      },
+    },
+  },
 };
 
 export type Translations = typeof en;

From aa3b6e834b1e6621c649d4e8da8f586bc8b36446 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 08:10:53 +0000
Subject: [PATCH 15/58] localization fixes

---
 .../profile/components/ProfileFormContent.tsx | 58 ++++++++++---------
 .../components/ProfileRequirementGate.tsx     |  2 +-
 .../components/RequireSeafarerProfile.tsx     | 13 +++--
 .../features/profile/pages/ProfilePage.tsx    | 32 +++++-----
 apps/portal/src/app/i18n/locales/am.ts        | 51 ++++++++++++++++
 apps/portal/src/app/i18n/locales/en.ts        | 51 ++++++++++++++++
 6 files changed, 157 insertions(+), 50 deletions(-)

diff --git a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
index 4540554a9..421af4c35 100644
--- a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
@@ -1,21 +1,23 @@
 import { Loader, Select, SimpleGrid, TextInput } from '@mantine/core';
 import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
 import { z } from 'zod';
+import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { AmharicDatePicker } from '@ema-platform/ui';
 
-export const profileSchema = z.object({
-  professionId: z.string().min(1, 'Select your profession'),
-  firstName: z.string().min(3, 'First name must be at least 3 characters'),
-  middleName: z.string().min(3, 'Middle name must be at least 3 characters'),
-  lastName: z.string().min(3, 'Last name must be at least 3 characters'),
-  gender: z.string().min(1, 'Select your gender'),
-  dob: z.string().min(1, 'Select your date of birth'),
-  pob: z.string().optional(),
-  maritalStatus: z.string().min(1, 'Select your marital status'),
-});
+export const profileSchema = (t: TFunction) =>
+  z.object({
+    professionId: z.string().min(1, t('profileForm.validation.professionRequired')),
+    firstName: z.string().min(3, t('profileForm.validation.firstNameMin')),
+    middleName: z.string().min(3, t('profileForm.validation.middleNameMin')),
+    lastName: z.string().min(3, t('profileForm.validation.lastNameMin')),
+    gender: z.string().min(1, t('profileForm.validation.genderRequired')),
+    dob: z.string().min(1, t('profileForm.validation.dobRequired')),
+    pob: z.string().optional(),
+    maritalStatus: z.string().min(1, t('profileForm.validation.maritalStatusRequired')),
+  });
 
-export type ProfileValues = z.infer<typeof profileSchema>;
+export type ProfileValues = z.infer<ReturnType<typeof profileSchema>>;
 
 export const GENDERS = ['MALE', 'FEMALE'] as const;
 export const MARITAL_STATUSES = ['SINGLE', 'MARRIED', 'DIVORCED', 'WIDOWED'] as const;
@@ -45,8 +47,8 @@ export function ProfileFormContent({
   return (
     <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
       <Select
-        label="Profession"
-        placeholder={professionsLoading ? t('common.loading', 'Loading…') : 'Select'}
+        label={t('profileFields.professionId')}
+        placeholder={professionsLoading ? t('common.loading') : t('common.select')}
         required
         data={professionOptions}
         error={errors.professionId?.message}
@@ -59,31 +61,31 @@ export function ProfileFormContent({
         rightSection={professionsLoading ? <Loader size="xs" type="oval" /> : undefined}
       />
       <TextInput
-        label="First Name"
-        placeholder="Enter first name"
+        label={t('profileFields.firstName')}
+        placeholder={t('profileForm.placeholders.firstName')}
         required
         {...register('firstName')}
         error={errors.firstName?.message}
       />
       <TextInput
-        label="Middle Name"
-        placeholder="Enter middle name"
+        label={t('profileFields.middleName')}
+        placeholder={t('profileForm.placeholders.middleName')}
         required
         {...register('middleName')}
         error={errors.middleName?.message}
       />
       <TextInput
-        label="Last Name"
-        placeholder="Enter last name"
+        label={t('profileFields.lastName')}
+        placeholder={t('profileForm.placeholders.lastName')}
         required
         {...register('lastName')}
         error={errors.lastName?.message}
       />
       <Select
-        label="Gender"
-        placeholder="Select"
+        label={t('profileFields.gender')}
+        placeholder={t('common.select')}
         required
-        data={[...GENDERS]}
+        data={GENDERS.map((g) => ({ value: g, label: t(`profileForm.genders.${g}`) }))}
         error={errors.gender?.message}
         value={watch('gender')}
         onChange={(val) => setValue('gender', val || '', { shouldValidate: true })}
@@ -91,7 +93,7 @@ export function ProfileFormContent({
         name="gender"
       />
       <AmharicDatePicker
-        label="Date of Birth"
+        label={t('profileFields.dob')}
         required
         value={watch('dob')}
         onChange={(val) => setValue('dob', val, { shouldValidate: true })}
@@ -100,16 +102,16 @@ export function ProfileFormContent({
         error={errors.dob?.message}
       />
       <TextInput
-        label="Place of Birth"
-        placeholder="City, Region"
+        label={t('profileFields.pob')}
+        placeholder={t('profileForm.placeholders.pob')}
         {...register('pob')}
         error={errors.pob?.message}
       />
       <Select
-        label="Marital Status"
-        placeholder="Select"
+        label={t('profileFields.maritalStatus')}
+        placeholder={t('common.select')}
         required
-        data={[...MARITAL_STATUSES]}
+        data={MARITAL_STATUSES.map((m) => ({ value: m, label: t(`profileForm.maritalStatuses.${m}`) }))}
         error={errors.maritalStatus?.message}
         value={watch('maritalStatus')}
         onChange={(val) => setValue('maritalStatus', val || '', { shouldValidate: true })}
diff --git a/apps/portal/src/app/features/profile/components/ProfileRequirementGate.tsx b/apps/portal/src/app/features/profile/components/ProfileRequirementGate.tsx
index b3ded3c0f..3f09c15ec 100644
--- a/apps/portal/src/app/features/profile/components/ProfileRequirementGate.tsx
+++ b/apps/portal/src/app/features/profile/components/ProfileRequirementGate.tsx
@@ -59,7 +59,7 @@ export function ProfileRequirementGate({
         })}
       >
         <Stack gap="xs">
-          <Text size="sm">{requirement.reason}</Text>
+          <Text size="sm">{t(requirement.reason)}</Text>
           <List size="sm" spacing={2}>
             {gaps.map((field) => (
               <List.Item key={field}>
diff --git a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
index b86057a1e..e7c9c47db 100644
--- a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
+++ b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { Center, Loader } from '@mantine/core';
 import { Navigate, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { PageLoader, notify } from '@ema-platform/ui';
@@ -35,8 +34,12 @@ export const SEAFARER_PROFILE_REQUIREMENT: ProfileRequirement = {
     'primaryPhoneNumber',
     'email',
   ],
-  reason:
-    'Seafarer registration is built from your profile — these details fill it in for you.',
+  // Translation key, not literal text — `ProfileRequirementGate` runs it
+  // through `t()` at render time (it can't be translated here: this object
+  // is built at module scope, before any component or `useTranslation` call
+  // exists). Reuses `profileGate.seafarerReason`, the same sentence already
+  // shown by the seafarer-redirect toast below.
+  reason: 'profileGate.seafarerReason',
 };
 
 const REGISTRATION_TYPE_KEY = 'SEAFARER_REGISTRATION';
@@ -75,7 +78,7 @@ export function RequireSeafarerProfile({ children }: { children: React.ReactNode
   if (!gated) return <>{children}</>;
 
   if (isLoading) {
-    return <PageLoader label="Checking seafarer profile…" height={350} />;
+    return <PageLoader label={t('profileGate.checkingProfile')} height={350} />;
   }
 
   // A failed lookup must not lock anyone out — the server still refuses the
@@ -89,7 +92,7 @@ export function RequireSeafarerProfile({ children }: { children: React.ReactNode
   // headed back here in the same tick — deciding on the pre-save cache would
   // bounce them off the screen they just finished.
   if (isFetching) {
-    return <PageLoader label="Checking seafarer profile…" height={350} />;
+    return <PageLoader label={t('profileGate.checkingProfile')} height={350} />;
   }
 
   const target = PROFILE_FIELD_SECTION[gaps[0]];
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 71be1b1ae..8354233cd 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -241,7 +241,7 @@ export function ProfilePage() {
       .string()
       .refine(
         (name) => Object.values(splitProfileName(name)).every(Boolean),
-        { message: 'Enter your first, middle, and last name' },
+        { message: t('profileForm.validation.nameParts') },
       ),
     nameAm: z.string().min(1, { message: t('profile.validation.nameRequired') }),
     username: z.string().min(1, { message: t('profile.validation.usernameRequired') }),
@@ -341,7 +341,7 @@ export function ProfilePage() {
     trigger: profileTriggerValidation,
     formState: { errors: profileErrors },
   } = useForm<ProfileValues>({
-    resolver: zodResolver(profileSchema),
+    resolver: zodResolver(profileSchema(t)),
     values: loadedProfile ?? undefined,
   });
 
@@ -350,7 +350,7 @@ export function ProfilePage() {
 
     const fullName = formatProfileName(values);
     if (user && normalizeName(fullName) !== normalizeName(user.name.en)) {
-      notify.error('Profile name must match the name in the Personal tab.');
+      notify.error(t('profile.nameMismatch'));
       return;
     }
 
@@ -367,7 +367,7 @@ export function ProfilePage() {
       // the address save below) — without this, `missing` stays stale until
       // a reload.
       refetchProfile();
-      notify.success('Profile updated');
+      notify.success(t('profile.profileUpdated'));
     } catch (e) {
       handleError(e);
     } finally {
@@ -395,7 +395,7 @@ export function ProfilePage() {
         profileId,
         body: toAddressPayload(values),
       }).unwrap();
-      notify.success('Address saved');
+      notify.success(t('profile.addressSaved'));
     } catch (e) {
       handleError(e);
     }
@@ -569,19 +569,19 @@ export function ProfilePage() {
       >
         <Tabs.List>
           <Tabs.Tab value="personal" leftSection={<IconUserCircle size={18} />}>
-            Personal
+            {t('profile.tabs.personal')}
           </Tabs.Tab>
           <Tabs.Tab value="profile" leftSection={<IconUser size={18} />}>
-            Profile
+            {t('profile.tabs.profile')}
           </Tabs.Tab>
           <Tabs.Tab value="address" leftSection={<IconMapPin size={18} />}>
-            Address
+            {t('profile.tabs.address')}
           </Tabs.Tab>
           <Tabs.Tab
             value="operations"
             leftSection={<IconBuildingWarehouse size={18} />}
           >
-            Operations
+            {t('profile.tabs.operations')}
           </Tabs.Tab>
           <Tabs.Tab value="security" leftSection={<IconShieldLock size={18} />}>
             {t('profile.tabs.security')}
@@ -676,15 +676,15 @@ export function ProfilePage() {
               <Center py="xl"><Loader /></Center>
             ) : !loadedProfile ? (
               <Text c="dimmed" ta="center" py="xl">
-                No profile found. Complete your profile setup first.
+                {t('profile.maritimeSection.noProfile')}
               </Text>
             ) : (
               <form onSubmit={handleProfileSubmit(onSaveProfile)}>
                 <Stack gap="xl">
                   <div>
-                    <Title order={5}>Maritime Profile</Title>
+                    <Title order={5}>{t('profile.maritimeSection.title')}</Title>
                     <Text size="sm" c="dimmed" mb="md">
-                      Your professional maritime details
+                      {t('profile.maritimeSection.subtitle')}
                     </Text>
                     <ProfileFormContent
                       register={registerProfile}
@@ -703,7 +703,7 @@ export function ProfilePage() {
                       loading={isSavingMaritime}
                       leftSection={<IconDeviceFloppy size={18} />}
                     >
-                      Save Profile
+                      {t('profile.maritimeSection.save')}
                     </Button>
                   </Group>
                 </Stack>
@@ -721,9 +721,9 @@ export function ProfilePage() {
               <form onSubmit={handleAddressSubmit(onSaveAddress)}>
                 <Stack gap="xl">
                   <div>
-                    <Title order={5}>Address & Contact</Title>
+                    <Title order={5}>{t('profile.addressSection.title')}</Title>
                     <Text size="sm" c="dimmed" mb="md">
-                      Your identity documents, contact details and emergency contact
+                      {t('profile.addressSection.subtitle')}
                     </Text>
                     <AddressFormContent
                       register={registerAddress}
@@ -877,7 +877,7 @@ export function ProfilePage() {
                               {t(`language.${lng}`)}
                             </Text>
                             <Text size="xs" c="dimmed">
-                              {lng === 'en' ? 'English (United States)' : 'Amharic'}
+                              {t(`profile.languageFull.${lng}`)}
                             </Text>
                           </div>
                           {active ? (
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index ffaf63ef7..6adf0d5a6 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -71,6 +71,7 @@ export const am: Translations = {
   },
 
   common: {
+    select: 'ይምረጡ',
     back: 'ተመለስ',
     continue: 'ቀጥል',
     submit: 'አስገባ',
@@ -283,6 +284,7 @@ export const am: Translations = {
     viewProfile: 'ሙሉ መገለጫ ይመልከቱ',
     seafarerReason: 'የባህረኞች ምዝገባ የሚዘጋጀው ከመገለጫዎ ነው — እነዚህ መረጃዎች ራሱ ይሞላሉ።',
     seafarerRedirect: 'የባህረኛ ምዝገባ ለማድረግ መገለጫዎን ያጠናቅቁ። የሚያስፈልጉ፡ {{fields}}',
+    checkingProfile: 'የባህረኛ መገለጫ በመፈተሽ ላይ…',
   },
 
   profileSections: {
@@ -311,10 +313,30 @@ export const am: Translations = {
     verified: 'ተረጋግጧል',
     unverified: 'አልተረጋገጠም',
     tabs: {
+      personal: 'የግል መረጃ',
       profile: 'መገለጫ',
+      address: 'አድራሻ',
+      operations: 'የስራ ዘርፍ',
       security: 'ደህንነት',
       preferences: 'ምርጫዎች',
     },
+    maritimeSection: {
+      title: 'የባህር ሙያ መገለጫ',
+      subtitle: 'የባህር ሙያ ዝርዝሮችዎ',
+      noProfile: 'ምንም መገለጫ አልተገኘም። መጀመሪያ መገለጫዎን ያጠናቅቁ።',
+      save: 'መገለጫ አስቀምጥ',
+    },
+    addressSection: {
+      title: 'አድራሻ እና መገናኛ',
+      subtitle: 'የመታወቂያ ሰነዶችዎ፣ የመገናኛ ዝርዝሮችዎ እና የአደጋ ጊዜ ተጠሪ',
+      save: 'አድራሻ አስቀምጥ',
+    },
+    addressSaved: 'አድራሻ ተቀምጧል',
+    nameMismatch: 'የመገለጫ ስም ከግል መረጃ ትር ውስጥ ካለው ስም ጋር መዛመድ አለበት።',
+    languageFull: {
+      en: 'እንግሊዝኛ (አሜሪካ)',
+      am: 'አማርኛ',
+    },
     personalHint: 'ስምዎ በይፋዊ የ EMA ሰነዶች ላይ እንደሚታየው።',
     languageTitle: 'ቋንቋ',
     languageHint: 'በ EMA ፖርታል ላይ የሚጠቀሙበትን ቋንቋ ይምረጡ።',
@@ -369,6 +391,35 @@ export const am: Translations = {
     },
   },
 
+  profileForm: {
+    placeholders: {
+      firstName: 'የመጀመሪያ ስም ያስገቡ',
+      middleName: 'የአባት ስም ያስገቡ',
+      lastName: 'የአያት ስም ያስገቡ',
+      pob: 'ከተማ፣ ክልል',
+    },
+    genders: {
+      MALE: 'ወንድ',
+      FEMALE: 'ሴት',
+    },
+    maritalStatuses: {
+      SINGLE: 'ያላገባ/ች',
+      MARRIED: 'ያገባ/ች',
+      DIVORCED: 'የፈታ/ች',
+      WIDOWED: 'የሞተበት/ባት',
+    },
+    validation: {
+      professionRequired: 'ሙያዎን ይምረጡ',
+      firstNameMin: 'የመጀመሪያ ስም ቢያንስ 3 ቁምፊዎች መሆን አለበት',
+      middleNameMin: 'የአባት ስም ቢያንስ 3 ቁምፊዎች መሆን አለበት',
+      lastNameMin: 'የአያት ስም ቢያንስ 3 ቁምፊዎች መሆን አለበት',
+      genderRequired: 'ጾታዎን ይምረጡ',
+      dobRequired: 'የትውልድ ቀንዎን ይምረጡ',
+      maritalStatusRequired: 'የጋብቻ ሁኔታዎን ይምረጡ',
+      nameParts: 'የመጀመሪያ፣ የአባት እና የአያት ስምዎን ያስገቡ',
+    },
+  },
+
   country: {
     select: 'አገር ይምረጡ',
     notFound: 'ምንም አገር አልተገኘም',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 1c336acc3..28f985e83 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -70,6 +70,7 @@ export const en = {
   },
 
   common: {
+    select: 'Select',
     back: 'Back',
     continue: 'Continue',
     submit: 'Submit',
@@ -283,6 +284,7 @@ export const en = {
     seafarerReason:
       'Seafarer registration is built from your profile — these details fill it in for you.',
     seafarerRedirect: 'Finish your profile to register as a seafarer. Still needed: {{fields}}',
+    checkingProfile: 'Checking seafarer profile…',
   },
 
   profileSections: {
@@ -311,10 +313,30 @@ export const en = {
     verified: 'Verified',
     unverified: 'Unverified',
     tabs: {
+      personal: 'Personal',
       profile: 'Profile',
+      address: 'Address',
+      operations: 'Operations',
       security: 'Security',
       preferences: 'Preferences',
     },
+    maritimeSection: {
+      title: 'Maritime Profile',
+      subtitle: 'Your professional maritime details',
+      noProfile: 'No profile found. Complete your profile setup first.',
+      save: 'Save Profile',
+    },
+    addressSection: {
+      title: 'Address & Contact',
+      subtitle: 'Your identity documents, contact details and emergency contact',
+      save: 'Save Address',
+    },
+    addressSaved: 'Address saved',
+    nameMismatch: 'Profile name must match the name in the Personal tab.',
+    languageFull: {
+      en: 'English (United States)',
+      am: 'Amharic',
+    },
     personalHint: 'Your name as it appears on official EMA documents.',
     languageTitle: 'Language',
     languageHint: 'Choose the language used across the EMA portal.',
@@ -369,6 +391,35 @@ export const en = {
     },
   },
 
+  profileForm: {
+    placeholders: {
+      firstName: 'Enter first name',
+      middleName: 'Enter middle name',
+      lastName: 'Enter last name',
+      pob: 'City, Region',
+    },
+    genders: {
+      MALE: 'Male',
+      FEMALE: 'Female',
+    },
+    maritalStatuses: {
+      SINGLE: 'Single',
+      MARRIED: 'Married',
+      DIVORCED: 'Divorced',
+      WIDOWED: 'Widowed',
+    },
+    validation: {
+      professionRequired: 'Select your profession',
+      firstNameMin: 'First name must be at least 3 characters',
+      middleNameMin: 'Middle name must be at least 3 characters',
+      lastNameMin: 'Last name must be at least 3 characters',
+      genderRequired: 'Select your gender',
+      dobRequired: 'Select your date of birth',
+      maritalStatusRequired: 'Select your marital status',
+      nameParts: 'Enter your first, middle, and last name',
+    },
+  },
+
   country: {
     select: 'Select a country',
     notFound: 'No countries found',

From 023af2dca488ffb9bdd197cbb497f2bc374a9d0d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 10:19:29 +0000
Subject: [PATCH 16/58] fixes

---
 apps/portal/src/app/i18n/locales/am.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index d2e25d057..01ca9d651 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -286,6 +286,7 @@ export const am: Translations = {
     viewProfile: 'ሙሉ መገለጫ ይመልከቱ',
     seafarerReason: 'የባህረኞች ምዝገባ የሚዘጋጀው ከመገለጫዎ ነው — እነዚህ መረጃዎች ራሱ ይሞላሉ።',
     seafarerRedirect: 'የባህረኛ ምዝገባ ለማድረግ መገለጫዎን ያጠናቅቁ። የሚያስፈልጉ፡ {{fields}}',
+    seafarerBanner: 'ለባህረኛ ምዝገባ የመገለጫ መረጃ ያስፈልጋል።',
     checkingProfile: 'የባህረኛ መገለጫ በመፈተሽ ላይ…',
   },
 

From 0ad617510e129611338586d91e719816904f94cc Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 10:22:32 +0000
Subject: [PATCH 17/58] fixes

---
 .../features/vessel-owner/pages/VesselOwnerDashboardPage.tsx    | 2 --
 .../app/features/vessel-owner/pages/VesselOwnerLoginPage.tsx    | 1 -
 .../app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx | 1 -
 .../vessel-registration/pages/VesselRegistrationPage.tsx        | 2 --
 apps/portal/src/app/layouts/PortalLayout.tsx                    | 1 -
 5 files changed, 7 deletions(-)

diff --git a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerDashboardPage.tsx b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerDashboardPage.tsx
index d7514b92f..3b123c73c 100644
--- a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerDashboardPage.tsx
+++ b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerDashboardPage.tsx
@@ -13,8 +13,6 @@ import {
 } from '@mantine/core';
 import {
   IconAnchor,
-  IconCheck,
-  IconClock,
   IconInfoCircle,
   IconShip,
 } from '@tabler/icons-react';
diff --git a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerLoginPage.tsx b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerLoginPage.tsx
index 6d687d2d6..fff4f8094 100644
--- a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerLoginPage.tsx
+++ b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerLoginPage.tsx
@@ -5,7 +5,6 @@ import {
   Anchor,
   Box,
   Button,
-  Center,
   Divider,
   Group,
   Paper,
diff --git a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
index 75d216232..0003a186e 100644
--- a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
+++ b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Alert,
-  Anchor,
   Box,
   Button,
   Divider,
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
index 5fd6e5ecb..b20f20629 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
@@ -13,14 +13,12 @@ import {
   Text,
   ThemeIcon,
   Title,
-  rem,
 } from '@mantine/core';
 import {
   IconAnchor,
   IconCheck,
   IconCircleCheck,
   IconAlertCircle,
-  IconFileDescription,
   IconShieldCheck,
   IconCertificate,
   IconDownload,
diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index 5c8deaf54..82d70ba36 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -9,7 +9,6 @@ import {
   IconHome2,
   IconList,
   IconRubberStamp,
-  IconSend,
   IconShieldCheck,
   IconShieldOff,
   IconShip,

From 903b178527801e533a7c4231d67edce083eafa38 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 10:25:40 +0000
Subject: [PATCH 18/58] UI

---
 apps/portal/src/app/i18n/locales/am.ts | 3 ++-
 apps/portal/src/app/i18n/locales/en.ts | 3 ++-
 libs/auth/src/lib/pages/SignupPage.tsx | 9 +++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 01ca9d651..d249fa8ab 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -523,6 +523,7 @@ export const am: Translations = {
   signup: {
     usernameMinLength: "የተጠቃሚ ስም ቢያንስ 3 ቁምፊዎች ሊኖረው ይገባል",
     nameEnRequired: "ስም (እንግሊዝኛ) ያስፈልጋል",
+    nameEnFullNameRequired: "እባክዎ ሙሉ ስምዎን ያስገቡ (የመጀመሪያ እና የአባት ስም)",
     phoneRequired: "ስልክ ቁጥር ያስፈልጋል",
     confirmPasswordRequired: "የይለፍ ቃልዎን ያረጋግጡ",
     passwordsDontMatch: "የይለፍ ቃላት አይመሳሰሉም",
@@ -530,7 +531,7 @@ export const am: Translations = {
     brandSubtitle: "የ{{appName}} አገልግሎቶችን ለመድረስ መለያዎን ይፍጠሩ።",
     title: "መለያ ይፍጠሩ",
     subtitle: "ለመጀመር አንድ ደቂቃ ብቻ ይወስዳል።",
-    nameEnLabel: "ስም (እንግሊዝኛ)",
+    nameEnLabel: "ሙሉ ስም (እንግሊዝኛ)",
     nameEnPlaceholder: "አበበ በቀለ",
     nameAmLabel: "ስም (አማርኛ)",
     nameAmPlaceholder: "ስም",
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 0eb638cf1..27c11597c 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -523,6 +523,7 @@ export const en = {
   signup: {
     usernameMinLength: 'Username must be at least 3 characters',
     nameEnRequired: 'Name (English) is required',
+    nameEnFullNameRequired: 'Please enter your full name (first and last)',
     phoneRequired: 'Phone number is required',
     confirmPasswordRequired: 'Confirm your password',
     passwordsDontMatch: 'Passwords do not match',
@@ -530,7 +531,7 @@ export const en = {
     brandSubtitle: 'Create your account to access {{appName}} features.',
     title: 'Create account',
     subtitle: 'It only takes a minute to get started.',
-    nameEnLabel: 'Name (English)',
+    nameEnLabel: 'Full name (English)',
     nameEnPlaceholder: 'Abebe Bekele',
     nameAmLabel: 'Name (Amharic)',
     nameAmPlaceholder: 'ስም',
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index 4017ded9d..164b720cd 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/libs/auth/src/lib/pages/SignupPage.tsx
@@ -90,7 +90,12 @@ export function SignupPage() {
       username: z.string().min(3, { message: t('signup.usernameMinLength', 'Username must be at least 3 characters') }),
       phoneNumber: z.string().min(1, { message: t('signup.phoneRequired', 'Phone number is required') }),
       userType: z.literal('individual'),
-      nameEn: z.string().min(1, { message: t('signup.nameEnRequired', 'Name (English) is required') }),
+      nameEn: z
+        .string()
+        .min(1, { message: t('signup.nameEnRequired', 'Name (English) is required') })
+        .refine((v) => v.trim().split(/\s+/).length >= 2, {
+          message: t('signup.nameEnFullNameRequired', 'Please enter your full name (first and last)'),
+        }),
       nameAm: z.string().optional(),
       password: passwordSchema(8, passwordRuleLabels),
       confirmPassword: z.string().min(1, { message: t('signup.confirmPasswordRequired', 'Confirm your password') }),
@@ -210,7 +215,7 @@ export function SignupPage() {
           <Stack gap="md">
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
-                label={t('signup.nameEnLabel', 'Name (English)')}
+                label={t('signup.nameEnLabel', 'Full name (English)')}
                 placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
                 leftSection={<IconUser size={18} />}
                 error={errors.nameEn?.message}

From ecd875adf4db2a93524011823b3f5ddc9334cdb2 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 10:30:03 +0000
Subject: [PATCH 19/58] fixes

---
 apps/portal/src/app/i18n/locales/am.ts | 2 +-
 apps/portal/src/app/i18n/locales/en.ts | 4 ++--
 libs/auth/src/lib/pages/SignupPage.tsx | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index d249fa8ab..6ec7b8348 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -523,7 +523,7 @@ export const am: Translations = {
   signup: {
     usernameMinLength: "የተጠቃሚ ስም ቢያንስ 3 ቁምፊዎች ሊኖረው ይገባል",
     nameEnRequired: "ስም (እንግሊዝኛ) ያስፈልጋል",
-    nameEnFullNameRequired: "እባክዎ ሙሉ ስምዎን ያስገቡ (የመጀመሪያ እና የአባት ስም)",
+    nameEnFullNameRequired: "እባክዎ ሙሉ ስምዎን ያስገቡ (የመጀመሪያ፣ የአባት እና የአያት ስም)",
     phoneRequired: "ስልክ ቁጥር ያስፈልጋል",
     confirmPasswordRequired: "የይለፍ ቃልዎን ያረጋግጡ",
     passwordsDontMatch: "የይለፍ ቃላት አይመሳሰሉም",
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 27c11597c..4304dcb78 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -523,7 +523,7 @@ export const en = {
   signup: {
     usernameMinLength: 'Username must be at least 3 characters',
     nameEnRequired: 'Name (English) is required',
-    nameEnFullNameRequired: 'Please enter your full name (first and last)',
+    nameEnFullNameRequired: 'Please enter your full name (first, middle, and last)',
     phoneRequired: 'Phone number is required',
     confirmPasswordRequired: 'Confirm your password',
     passwordsDontMatch: 'Passwords do not match',
@@ -532,7 +532,7 @@ export const en = {
     title: 'Create account',
     subtitle: 'It only takes a minute to get started.',
     nameEnLabel: 'Full name (English)',
-    nameEnPlaceholder: 'Abebe Bekele',
+    nameEnPlaceholder: 'Forrest Kent Rose',
     nameAmLabel: 'Name (Amharic)',
     nameAmPlaceholder: 'ስም',
     emailLabel: 'Email address',
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index 164b720cd..31609aa34 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/libs/auth/src/lib/pages/SignupPage.tsx
@@ -93,8 +93,8 @@ export function SignupPage() {
       nameEn: z
         .string()
         .min(1, { message: t('signup.nameEnRequired', 'Name (English) is required') })
-        .refine((v) => v.trim().split(/\s+/).length >= 2, {
-          message: t('signup.nameEnFullNameRequired', 'Please enter your full name (first and last)'),
+        .refine((v) => v.trim().split(/\s+/).length >= 3, {
+          message: t('signup.nameEnFullNameRequired', 'Please enter your full name (first, middle, and last)'),
         }),
       nameAm: z.string().optional(),
       password: passwordSchema(8, passwordRuleLabels),
@@ -216,7 +216,7 @@ export function SignupPage() {
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
                 label={t('signup.nameEnLabel', 'Full name (English)')}
-                placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
+                placeholder={t('signup.nameEnPlaceholder', 'Forrest Kent Rose')}
                 leftSection={<IconUser size={18} />}
                 error={errors.nameEn?.message}
                 {...register('nameEn')}

From 366f75a84d66dc094b0d7120a11648e9ef889e11 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Mon, 17 Aug 2026 10:34:00 +0000
Subject: [PATCH 20/58] fixes

---
 apps/portal/src/app/i18n/locales/en.ts | 2 +-
 libs/auth/src/lib/pages/SignupPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 4304dcb78..792604e12 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -532,7 +532,7 @@ export const en = {
     title: 'Create account',
     subtitle: 'It only takes a minute to get started.',
     nameEnLabel: 'Full name (English)',
-    nameEnPlaceholder: 'Forrest Kent Rose',
+    nameEnPlaceholder: 'Abebe Bekele',
     nameAmLabel: 'Name (Amharic)',
     nameAmPlaceholder: 'ስም',
     emailLabel: 'Email address',
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index 31609aa34..90d72b650 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/libs/auth/src/lib/pages/SignupPage.tsx
@@ -216,7 +216,7 @@ export function SignupPage() {
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
                 label={t('signup.nameEnLabel', 'Full name (English)')}
-                placeholder={t('signup.nameEnPlaceholder', 'Forrest Kent Rose')}
+                placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
                 leftSection={<IconUser size={18} />}
                 error={errors.nameEn?.message}
                 {...register('nameEn')}

From c6ecb2dd4855d8b5f9ded74e3259da13d962d1a7 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Tue, 18 Aug 2026 10:22:12 +0300
Subject: [PATCH 21/58] fix

---
 .../src/app/features/licensing/pages/LicenseApplicationPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
index 8df20238d..51804299e 100644
--- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
+++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx
@@ -67,7 +67,7 @@ import {
 } from "../components/ConfigDrivenSection";
 import { DocumentSlots } from "../components/DocumentSlots";
 import { StaffEvidence } from "../components/StaffEvidence";
-
+import { AdvancedTable, useServerTable, PageLoader } from '@ema-platform/ui';
 /** Resolves a dot path (e.g. "profile.address.nationality") against a plain object. */
 function readSourcePath(context: Record<string, unknown>, path: string): unknown {
   return path

From 3d508acc41eeecda2e1f47edd65525754776bd2e Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 07:43:48 +0000
Subject: [PATCH 22/58] feat: implement 18+ age validation, enforce document
 review completion for approvals, and refactor DecisionBar UI

---
 .../license-review/components/DecisionBar.tsx |  19 ++-
 .../features/license-review/config/actions.ts |  14 ++
 .../pages/LicenseReviewPage/index.tsx         |  24 +++-
 apps/backoffice/src/app/i18n/locales/am.ts    |   1 +
 apps/backoffice/src/app/i18n/locales/en.ts    |   1 +
 .../profile/components/ProfileFormContent.tsx |  17 ++-
 .../features/profile/pages/ProfilePage.tsx    |   3 +-
 .../seafarer/pages/MySeaRecordsPage/index.tsx | 132 ++++++++++++------
 apps/portal/src/app/i18n/locales/am.ts        |   1 +
 apps/portal/src/app/i18n/locales/en.ts        |   1 +
 10 files changed, 164 insertions(+), 49 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx b/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
index 0403cfaad..2658e78a8 100644
--- a/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
+++ b/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
@@ -76,9 +76,13 @@ export function DecisionBar({
       role="region"
       aria-label={t('review.decisionBar', 'Decision bar')}
     >
-      <Group justify="space-between" wrap="nowrap" gap="md">
+      {/* Wraps rather than overflows: at narrow widths the nowrap row pushed
+          the workflow buttons past the viewport edge, so Assign, Escalate and
+          Hold were simply not there. Wrapping drops them onto a second line
+          instead of off the screen. */}
+      <Group justify="space-between" wrap="wrap" gap="sm">
         {/* Left: where the application stands, and who has it. */}
-        <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+        <Group gap="sm" wrap="wrap" style={{ minWidth: 0, flex: '1 1 auto' }}>
           <Badge color={STATUS_COLORS[status]} variant="light" size="lg">
             {t(`queue.statusValues.${status}`, STATUS_LABELS[status])}
           </Badge>
@@ -124,7 +128,7 @@ export function DecisionBar({
         </Group>
 
         {/* Right: the decision. */}
-        <Group gap="xs" wrap="nowrap">
+        <Group gap="xs" wrap="wrap" justify="flex-end" style={{ flex: '0 1 auto' }}>
           {primary.map((action) => (
             <ActionButton
               key={action.id}
@@ -194,10 +198,17 @@ function ActionButton({ action, busy, size, onAction }: ActionButtonProps) {
   const button = (
     <Button
       size={size}
-      variant={action.emphasis === 'filled' ? 'filled' : action.emphasis ?? 'light'}
+      variant={
+        action.emphasis === 'filled'
+          ? 'filled'
+          : action.emphasis === 'subtle'
+            ? 'default'
+            : 'light'
+      }
       color={action.color}
       loading={busy}
       disabled={!action.enabled}
+      style={{ flexShrink: 0 }}
       onClick={() => onAction(action)}
     >
       {t(action.labelKey)}
diff --git a/apps/backoffice/src/app/features/license-review/config/actions.ts b/apps/backoffice/src/app/features/license-review/config/actions.ts
index 4c02b4988..8283ca487 100644
--- a/apps/backoffice/src/app/features/license-review/config/actions.ts
+++ b/apps/backoffice/src/app/features/license-review/config/actions.ts
@@ -253,11 +253,18 @@ export interface ResolveContext {
     needsFlags: string;
     needsCapital: string;
     needsInspection: string;
+    needsDocumentReviews: string;
   };
   /** Number of sections/documents the officer has flagged for correction. */
   flaggedCount: number;
   /** True when an inspection is scheduled and awaiting a result. */
   hasPendingInspection: boolean;
+  /**
+   * False while any uploaded document is still unjudged or rejected. Approving
+   * is a statement that every document was checked, so the button stays dead
+   * until the officer has actually judged each one.
+   */
+  allDocumentsAccepted: boolean;
 }
 
 /**
@@ -300,6 +307,13 @@ export function resolveActions(ctx: ResolveContext): ResolvedAction[] {
         return disabled(reasons.notAssigned);
       }
 
+      if (
+        (action.id === 'approve-documents' || action.id === 'final-approve') &&
+        !ctx.allDocumentsAccepted
+      ) {
+        return disabled(reasons.needsDocumentReviews);
+      }
+
       if (action.id === 'request-adjustment' && ctx.flaggedCount === 0) {
         return disabled(reasons.needsFlags);
       }
diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
index 87b62ca14..7ad62f792 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -49,6 +49,7 @@ import {
   useFinalApproveMutation,
   useGetApplicationForReviewQuery,
   useGetAttachmentsQuery,
+  useGetDocumentReviewsQuery,
   useGetInspectionsQuery,
   useGetAssignableOfficersQuery,
   useGetLicenseTypeRequirementsQuery,
@@ -162,6 +163,9 @@ export function LicenseReviewPage() {
   // Real officer list, so Assign and Escalate name a person instead of
   // silently reassigning to whoever already held the application.
   const { data: officers = [] } = useGetAssignableOfficersQuery();
+  // Same cached query the Documents tab reads, so the decision bar reacts the
+  // moment a verdict is saved.
+  const { data: documentReviews = [] } = useGetDocumentReviewsQuery(id, { skip: !id });
 
   const staffTable = useServerTable();
   const [flags, setFlags] = useState<FlagMap>({});
@@ -208,6 +212,19 @@ export function LicenseReviewPage() {
   }, [flags]);
 
   const pendingInspection = inspections.find((i) => i.status === 'SCHEDULED');
+
+  // Approving means every uploaded document was accepted — one unjudged or
+  // rejected file is enough to keep the decision buttons dead.
+  const allDocumentsAccepted = useMemo(() => {
+    const attachments = data?.attachments ?? [];
+    if (attachments.length === 0) return false;
+    const accepted = new Set(
+      documentReviews
+        .filter((review) => review.decision === 'ACCEPTED')
+        .map((review) => review.documentKey),
+    );
+    return attachments.every((a) => accepted.has(a.documentKey));
+  }, [data?.attachments, documentReviews]);
   const flagged = Object.entries(flags);
 
   /**
@@ -247,6 +264,7 @@ export function LicenseReviewPage() {
       can,
       flaggedCount: flagged.length,
       hasPendingInspection: Boolean(pendingInspection),
+      allDocumentsAccepted,
       reasons: {
         wrongStatus: t('review.disabled.wrongStatus', 'Not available at this stage'),
         notAssigned: t('review.disabled.notAssigned', 'Assigned to another officer'),
@@ -254,9 +272,13 @@ export function LicenseReviewPage() {
         needsFlags: t('review.disabled.needsFlags', 'Flag at least one item to request a correction'),
         needsCapital: t('review.disabled.needsCapital', 'Record the verified capital first'),
         needsInspection: t('review.disabled.needsInspection', 'Requires an inspection result'),
+        needsDocumentReviews: t(
+          'review.disabled.needsDocumentReviews',
+          'Accept every document first',
+        ),
       },
     });
-  }, [data, currentUserId, can, flagged.length, pendingInspection, t]);
+  }, [data, currentUserId, can, flagged.length, pendingInspection, allDocumentsAccepted, t]);
 
   if (isLoading) {
     // Skeleton mirrors the real three-zone layout so nothing jumps on load.
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 8a7a03e38..8303efad3 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -949,6 +949,7 @@ export const am: Translations = {
       needsFlags: "ማስተካከያ ለመጠየቅ ቢያንስ አንድ ነገር ምልክት ያድርጉ",
       needsCapital: "መጀመሪያ የተረጋገጠውን ካፒታል ይመዝግቡ",
       needsInspection: "የምርመራ ውጤት ያስፈልጋል",
+      needsDocumentReviews: "መጀመሪያ ሁሉንም ሰነዶች ተቀበል",
     },
     reasons: {
       incompleteDocuments: "ያልተሟሉ ሰነዶች",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 45ffd001d..e93785a67 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -950,6 +950,7 @@ export const en = {
       needsFlags: 'Flag at least one item to request a correction',
       needsCapital: 'Record the verified capital first',
       needsInspection: 'Requires an inspection result',
+      needsDocumentReviews: 'Accept every document first',
     },
     reasons: {
       incompleteDocuments: 'Incomplete documents',
diff --git a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
index 421af4c35..766a8840e 100644
--- a/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
@@ -5,6 +5,16 @@ import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { AmharicDatePicker } from '@ema-platform/ui';
 
+// dob comes in as a plain yyyy-MM-dd string; skip on empty/malformed so
+// dobRequired's own message takes precedence.
+function isAtLeast18(dob: string): boolean {
+  const birth = new Date(dob);
+  if (Number.isNaN(birth.getTime())) return true;
+  const today = new Date();
+  const cutoff = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());
+  return birth <= cutoff;
+}
+
 export const profileSchema = (t: TFunction) =>
   z.object({
     professionId: z.string().min(1, t('profileForm.validation.professionRequired')),
@@ -12,7 +22,12 @@ export const profileSchema = (t: TFunction) =>
     middleName: z.string().min(3, t('profileForm.validation.middleNameMin')),
     lastName: z.string().min(3, t('profileForm.validation.lastNameMin')),
     gender: z.string().min(1, t('profileForm.validation.genderRequired')),
-    dob: z.string().min(1, t('profileForm.validation.dobRequired')),
+    dob: z
+      .string()
+      .min(1, t('profileForm.validation.dobRequired'))
+      .refine((value) => isAtLeast18(value), {
+        message: t('profileForm.validation.dobMinAge'),
+      }),
     pob: z.string().optional(),
     maritalStatus: z.string().min(1, t('profileForm.validation.maritalStatusRequired')),
   });
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 1f08c7682..73d9a0f34 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -224,7 +224,8 @@ export function ProfilePage() {
         idType: currentProfile.address?.idType || '',
         idNumber: currentProfile.address?.idNumber || '',
         // Stored as a country name; the select works in alpha-2 codes.
-        nationality: getCountryCode(currentProfile.address?.nationality) || '',
+        // Default to Ethiopian when no nationality is on record yet.
+        nationality: getCountryCode(currentProfile.address?.nationality) || 'ET',
         primaryPhoneNumber: user?.phoneNumber || '',
         secondaryPhoneNumber: currentProfile.address?.secondaryPhoneNumber || '',
         email: user?.email || '',
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
index deefbab8b..dafc335fa 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
@@ -70,29 +70,10 @@ function EvidenceModal({
   onClose: () => void;
 }) {
   const { t } = useTranslation();
-  const { data: attachments, refetch, isLoading } = useGetAttachmentsQuery(
+  const { data: attachments, isLoading } = useGetAttachmentsQuery(
     { ownerType, ownerId: ownerId ?? '' },
     { skip: !ownerId },
   );
-  const [uploading, setUploading] = useState(false);
-
-  const upload = async (file: File | null) => {
-    if (!file || !ownerId) return;
-    setUploading(true);
-    const result = await uploadDocument({
-      ownerType,
-      ownerId,
-      documentKey: 'evidence',
-      file,
-    });
-    setUploading(false);
-    if (result.ok) {
-      notify.success(t('seaRecords.evidence.uploaded'));
-      refetch();
-    } else {
-      notify.error(result.error);
-    }
-  };
 
   const files = (attachments ?? []).flatMap((a) => a.files);
 
@@ -119,25 +100,46 @@ function EvidenceModal({
             </Group>
           ))
         )}
-        <RequirePermission anyOf={[PORTAL_PERMISSIONS.UPLOAD_DOCUMENTS]} hideOnly>
-          <FileButton onChange={upload} accept="image/*,application/pdf">
-            {(props) => (
-              <Button
-                {...props}
-                variant="light"
-                loading={uploading}
-                leftSection={<IconFileUpload size={16} />}
-              >
-                {t('seaRecords.evidence.upload')}
-              </Button>
-            )}
-          </FileButton>
-        </RequirePermission>
       </Stack>
     </Modal>
   );
 }
 
+/**
+ * Evidence picker that lives inside the add/edit form. The file is held in
+ * component state and uploaded right after the record is saved, because the
+ * attachment needs an owner id that only exists once the record does.
+ */
+function EvidenceField({
+  file,
+  onChange,
+}: {
+  file: File | null;
+  onChange: (file: File | null) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <RequirePermission anyOf={[PORTAL_PERMISSIONS.UPLOAD_DOCUMENTS]} hideOnly>
+      <Group gap="sm" align="center">
+        <FileButton onChange={onChange} accept="image/*,application/pdf">
+          {(props) => (
+            <Button
+              {...props}
+              variant="light"
+              leftSection={<IconFileUpload size={16} />}
+            >
+              {t('seaRecords.evidence.upload')}
+            </Button>
+          )}
+        </FileButton>
+        <Text size="sm" c={file ? undefined : 'dimmed'}>
+          {file ? file.name : t('seaRecords.evidence.none')}
+        </Text>
+      </Group>
+    </RequirePermission>
+  );
+}
+
 // ---------------------------------------------------------------- sea service
 
 const EMPTY_SEA_SERVICE = {
@@ -168,11 +170,14 @@ function SeaServiceTab() {
   const [evidenceFor, setEvidenceFor] = useState<string | null>(null);
   const [form, setForm] = useState(EMPTY_SEA_SERVICE);
   const [grossTonnage, setGrossTonnage] = useState<number | ''>('');
+  const [evidenceFile, setEvidenceFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
 
   const openCreate = () => {
     setEditing(null);
     setForm(EMPTY_SEA_SERVICE);
     setGrossTonnage('');
+    setEvidenceFile(null);
     setModalOpen(true);
   };
 
@@ -189,6 +194,7 @@ function SeaServiceTab() {
       dutiesDescription: record.dutiesDescription ?? '',
     });
     setGrossTonnage(record.grossTonnage ? Number(record.grossTonnage) : '');
+    setEvidenceFile(null);
     setModalOpen(true);
   };
 
@@ -207,13 +213,31 @@ function SeaServiceTab() {
       ...(grossTonnage !== '' ? { grossTonnage: Number(grossTonnage) } : {}),
     };
     try {
+      let recordId = editing?.id;
       if (editing) {
         await updateRecord({ id: editing.id, body }).unwrap();
-        notify.success(t('seaRecords.seaService.updated'));
       } else {
-        await createRecord(body).unwrap();
-        notify.success(t('seaRecords.seaService.added'));
+        recordId = (await createRecord(body).unwrap()).id;
       }
+      if (evidenceFile && recordId) {
+        setUploading(true);
+        const result = await uploadDocument({
+          ownerType: 'SEA_SERVICE_RECORD',
+          ownerId: recordId,
+          documentKey: 'evidence',
+          file: evidenceFile,
+        });
+        setUploading(false);
+        if (!result.ok) {
+          notify.error(result.error);
+          return;
+        }
+      }
+      notify.success(
+        editing
+          ? t('seaRecords.seaService.updated')
+          : t('seaRecords.seaService.added'),
+      );
       setModalOpen(false);
     } catch (error) {
       notify.error(extractErrorMessage(error, t('seaRecords.seaService.saveFailed')));
@@ -363,6 +387,7 @@ function SeaServiceTab() {
               setForm({ ...form, dutiesDescription: e.target.value })
             }
           />
+          <EvidenceField file={evidenceFile} onChange={setEvidenceFile} />
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setModalOpen(false)}>
               {t('common.cancel')}
@@ -370,7 +395,7 @@ function SeaServiceTab() {
             <Button
               onClick={save}
               disabled={!valid}
-              loading={creating || updating}
+              loading={creating || updating || uploading}
             >
               {editing ? t('common.save') : t('seaRecords.seaService.addRecord')}
             </Button>
@@ -413,10 +438,13 @@ function MedicalTab() {
   const [modalOpen, setModalOpen] = useState(false);
   const [evidenceFor, setEvidenceFor] = useState<string | null>(null);
   const [form, setForm] = useState(EMPTY_MEDICAL);
+  const [evidenceFile, setEvidenceFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
 
   const openCreate = () => {
     setEditing(null);
     setForm(EMPTY_MEDICAL);
+    setEvidenceFile(null);
     setModalOpen(true);
   };
 
@@ -430,6 +458,7 @@ function MedicalTab() {
       fitnessStatus: certificate.fitnessStatus,
       restrictions: certificate.restrictions ?? '',
     });
+    setEvidenceFile(null);
     setModalOpen(true);
   };
 
@@ -445,13 +474,31 @@ function MedicalTab() {
       ...(form.restrictions ? { restrictions: form.restrictions } : {}),
     };
     try {
+      let certificateId = editing?.id;
       if (editing) {
         await updateCertificate({ id: editing.id, body }).unwrap();
-        notify.success(t('seaRecords.medical.updated'));
       } else {
-        await createCertificate(body).unwrap();
-        notify.success(t('seaRecords.medical.added'));
+        certificateId = (await createCertificate(body).unwrap()).id;
       }
+      if (evidenceFile && certificateId) {
+        setUploading(true);
+        const result = await uploadDocument({
+          ownerType: 'MEDICAL_CERTIFICATE',
+          ownerId: certificateId,
+          documentKey: 'evidence',
+          file: evidenceFile,
+        });
+        setUploading(false);
+        if (!result.ok) {
+          notify.error(result.error);
+          return;
+        }
+      }
+      notify.success(
+        editing
+          ? t('seaRecords.medical.updated')
+          : t('seaRecords.medical.added'),
+      );
       setModalOpen(false);
     } catch (error) {
       notify.error(extractErrorMessage(error, t('seaRecords.medical.saveFailed')));
@@ -575,6 +622,7 @@ function MedicalTab() {
               }
             />
           )}
+          <EvidenceField file={evidenceFile} onChange={setEvidenceFile} />
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setModalOpen(false)}>
               {t('common.cancel')}
@@ -582,7 +630,7 @@ function MedicalTab() {
             <Button
               onClick={save}
               disabled={!valid}
-              loading={creating || updating}
+              loading={creating || updating || uploading}
             >
               {editing ? t('common.save') : t('seaRecords.medical.add')}
             </Button>
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 6ec7b8348..948de1c30 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -418,6 +418,7 @@ export const am: Translations = {
       lastNameMin: 'የአያት ስም ቢያንስ 3 ቁምፊዎች መሆን አለበት',
       genderRequired: 'ጾታዎን ይምረጡ',
       dobRequired: 'የትውልድ ቀንዎን ይምረጡ',
+      dobMinAge: 'ዕድሜዎ ቢያንስ 18 ዓመት መሆን አለበት',
       maritalStatusRequired: 'የጋብቻ ሁኔታዎን ይምረጡ',
       nameParts: 'የመጀመሪያ፣ የአባት እና የአያት ስምዎን ያስገቡ',
     },
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 792604e12..621209e49 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -418,6 +418,7 @@ export const en = {
       lastNameMin: 'Last name must be at least 3 characters',
       genderRequired: 'Select your gender',
       dobRequired: 'Select your date of birth',
+      dobMinAge: 'You must be at least 18 years old',
       maritalStatusRequired: 'Select your marital status',
       nameParts: 'Enter your first, middle, and last name',
     },

From 1dc82d943a2bb892b8a1276c240140551b07299b Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 07:46:51 +0000
Subject: [PATCH 23/58] feat: update document review progress tooltip with
 detailed counts and formatting

---
 .../license-review/components/DecisionBar.tsx | 16 +++++++-
 .../pages/LicenseReviewPage/index.tsx         | 39 ++++++++++++++-----
 apps/backoffice/src/app/i18n/locales/am.ts    |  4 +-
 apps/backoffice/src/app/i18n/locales/en.ts    |  4 +-
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx b/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
index 2658e78a8..e224fc028 100644
--- a/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
+++ b/apps/backoffice/src/app/features/license-review/components/DecisionBar.tsx
@@ -218,7 +218,13 @@ function ActionButton({ action, busy, size, onAction }: ActionButtonProps) {
   if (action.enabled) return button;
 
   return (
-    <Tooltip label={action.disabledReason} withArrow position="top">
+    <Tooltip
+      label={action.disabledReason}
+      withArrow
+      position="top"
+      multiline
+      w={280}
+    >
       <span style={{ display: 'inline-flex', cursor: 'not-allowed' }}>{button}</span>
     </Tooltip>
   );
@@ -245,7 +251,13 @@ function MenuAction({
   );
   if (action.enabled) return item;
   return (
-    <Tooltip label={action.disabledReason} withArrow position="left">
+    <Tooltip
+      label={action.disabledReason}
+      withArrow
+      position="left"
+      multiline
+      w={280}
+    >
       <div>{item}</div>
     </Tooltip>
   );
diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
index 7ad62f792..cb8bbfa12 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -214,17 +214,21 @@ export function LicenseReviewPage() {
   const pendingInspection = inspections.find((i) => i.status === 'SCHEDULED');
 
   // Approving means every uploaded document was accepted — one unjudged or
-  // rejected file is enough to keep the decision buttons dead.
-  const allDocumentsAccepted = useMemo(() => {
+  // rejected file is enough to keep the decision buttons dead. The counts feed
+  // the hover explanation, so the officer sees how much is left rather than
+  // just that the button is dead.
+  const documentProgress = useMemo(() => {
     const attachments = data?.attachments ?? [];
-    if (attachments.length === 0) return false;
     const accepted = new Set(
       documentReviews
         .filter((review) => review.decision === 'ACCEPTED')
         .map((review) => review.documentKey),
     );
-    return attachments.every((a) => accepted.has(a.documentKey));
+    const acceptedCount = attachments.filter((a) => accepted.has(a.documentKey)).length;
+    return { acceptedCount, total: attachments.length };
   }, [data?.attachments, documentReviews]);
+  const allDocumentsAccepted =
+    documentProgress.total > 0 && documentProgress.acceptedCount === documentProgress.total;
   const flagged = Object.entries(flags);
 
   /**
@@ -272,13 +276,30 @@ export function LicenseReviewPage() {
         needsFlags: t('review.disabled.needsFlags', 'Flag at least one item to request a correction'),
         needsCapital: t('review.disabled.needsCapital', 'Record the verified capital first'),
         needsInspection: t('review.disabled.needsInspection', 'Requires an inspection result'),
-        needsDocumentReviews: t(
-          'review.disabled.needsDocumentReviews',
-          'Accept every document first',
-        ),
+        needsDocumentReviews:
+          documentProgress.total === 0
+            ? t(
+                'review.disabled.needsDocumentsUploaded',
+                'No documents uploaded to review yet',
+              )
+            : t('review.disabled.needsDocumentReviews', {
+                accepted: documentProgress.acceptedCount,
+                total: documentProgress.total,
+                defaultValue:
+                  'Accept all documents first — {{accepted}} of {{total}} accepted. Open the Documents tab and accept the rest.',
+              }),
       },
     });
-  }, [data, currentUserId, can, flagged.length, pendingInspection, allDocumentsAccepted, t]);
+  }, [
+    data,
+    currentUserId,
+    can,
+    flagged.length,
+    pendingInspection,
+    allDocumentsAccepted,
+    documentProgress,
+    t,
+  ]);
 
   if (isLoading) {
     // Skeleton mirrors the real three-zone layout so nothing jumps on load.
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 8303efad3..1c2b6a983 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -949,7 +949,9 @@ export const am: Translations = {
       needsFlags: "ማስተካከያ ለመጠየቅ ቢያንስ አንድ ነገር ምልክት ያድርጉ",
       needsCapital: "መጀመሪያ የተረጋገጠውን ካፒታል ይመዝግቡ",
       needsInspection: "የምርመራ ውጤት ያስፈልጋል",
-      needsDocumentReviews: "መጀመሪያ ሁሉንም ሰነዶች ተቀበል",
+      needsDocumentReviews:
+        "መጀመሪያ ሁሉንም ሰነዶች ይቀበሉ — ከ{{total}} {{accepted}} ተቀብለዋል። የሰነዶች ትር ከፍተው ቀሪዎቹን ይቀበሉ።",
+      needsDocumentsUploaded: "እስካሁን የሚገመገም ሰነድ አልተጫነም",
     },
     reasons: {
       incompleteDocuments: "ያልተሟሉ ሰነዶች",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index e93785a67..dbf47267b 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -950,7 +950,9 @@ export const en = {
       needsFlags: 'Flag at least one item to request a correction',
       needsCapital: 'Record the verified capital first',
       needsInspection: 'Requires an inspection result',
-      needsDocumentReviews: 'Accept every document first',
+      needsDocumentReviews:
+        'Accept all documents first — {{accepted}} of {{total}} accepted. Open the Documents tab and accept the rest.',
+      needsDocumentsUploaded: 'No documents uploaded to review yet',
     },
     reasons: {
       incompleteDocuments: 'Incomplete documents',

From 2b95454b4beceb4d9038516eac8f7e5b2086973b Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 08:57:51 +0000
Subject: [PATCH 24/58] feat: implement interactive vessel registration
 reporting page with filters, charts, and data tables

---
 .../pages/VesselRegistrationReportPage.tsx    |  21 -
 .../VesselRegistrationReportPage/KpiTiles.tsx | 171 +++++++
 .../ReportCharts.tsx                          | 369 ++++++++++++++
 .../ReportFilters.tsx                         | 215 ++++++++
 .../ReportTables.tsx                          | 211 ++++++++
 .../VesselRegistrationReportPage/index.tsx    | 149 ++++++
 .../report-format.spec.ts                     | 187 +++++++
 .../report-format.ts                          | 221 ++++++++
 apps/backoffice/src/app/layouts/nav-config.ts |   2 +-
 apps/backoffice/src/app/router/index.tsx      |   2 +-
 apps/backoffice/vite.config.mts               |  10 +
 docs/vessel-registration-report-frontend.md   | 480 ++++++++++++++++++
 libs/api/src/index.ts                         |   2 +-
 libs/api/src/lib/base-api/download.ts         |  54 ++
 .../api/src/lib/features/vessel/vessel-api.ts |  19 +
 .../src/lib/features/vessel/vessel.types.ts   | 244 +++++++++
 16 files changed, 2333 insertions(+), 24 deletions(-)
 delete mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/KpiTiles.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportCharts.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportFilters.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportTables.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.spec.ts
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.ts
 create mode 100644 docs/vessel-registration-report-frontend.md

diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage.tsx
deleted file mode 100644
index 108412120..000000000
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
-
-/**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered hardcoded sample records, which were
- * indistinguishable from real ones.
- */
-export function VesselRegistrationReportPage() {
-  return (
-    <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title="Vessel registration report"
-        description="Vessel registration is not connected to the backend yet, so there is nothing to report on."
-      />
-    </Container>
-  );
-}
-
-export default VesselRegistrationReportPage;
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/KpiTiles.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/KpiTiles.tsx
new file mode 100644
index 000000000..64b8941f0
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/KpiTiles.tsx
@@ -0,0 +1,171 @@
+import { Badge, Card, Group, SimpleGrid, Text, Tooltip } from '@mantine/core';
+import {
+  IconAlarm,
+  IconAnchor,
+  IconCalendarStats,
+  IconCoin,
+  IconClockHour4,
+  IconScale,
+  IconShip,
+  IconThumbUp,
+  type Icon,
+} from '@tabler/icons-react';
+import type { VesselReport } from '@ema-platform/api';
+import {
+  DASH,
+  deltaColor,
+  formatDelta,
+  formatMoney,
+  formatNumber,
+  formatPercent,
+} from './report-format';
+
+interface TileProps {
+  icon: Icon;
+  label: string;
+  value: string;
+  /** The second line: what the headline figure is made of. */
+  detail?: string;
+  /** Hover text for anything the headline alone would misrepresent. */
+  hint?: string;
+  delta?: { text: string; color: string };
+  color?: string;
+}
+
+function Tile({ icon: TileIcon, label, value, detail, hint, delta, color = 'blue' }: TileProps) {
+  const card = (
+    <Card withBorder radius="md" p="md">
+      <Group justify="space-between" wrap="nowrap" mb={4}>
+        <Text size="xs" c="dimmed" fw={600} tt="uppercase" lh={1.3}>
+          {label}
+        </Text>
+        <TileIcon size={18} stroke={1.6} color={`var(--mantine-color-${color}-6)`} />
+      </Group>
+      <Group gap="xs" align="baseline" wrap="nowrap">
+        <Text fz={26} fw={700} lh={1.1}>
+          {value}
+        </Text>
+        {delta && (
+          <Badge size="sm" variant="light" color={delta.color}>
+            {delta.text}
+          </Badge>
+        )}
+      </Group>
+      {detail && (
+        <Text size="xs" c="dimmed" mt={6} lh={1.4}>
+          {detail}
+        </Text>
+      )}
+    </Card>
+  );
+
+  return hint ? (
+    <Tooltip label={hint} multiline w={260} withArrow>
+      {card}
+    </Tooltip>
+  ) : (
+    card
+  );
+}
+
+/**
+ * The headline figures.
+ *
+ * Two different scopes sit side by side here and the labels have to keep them
+ * apart: the register totals describe the whole book regardless of the date
+ * filter, while "new in period" and the pipeline figures answer to it. A tile
+ * reading "12 vessels" under a one-month filter would be taken for the size of
+ * the national fleet.
+ */
+export function KpiTiles({ report }: { report: VesselReport }) {
+  const { register, fleet, pipeline, certificates, revenue } = report.kpis;
+
+  return (
+    <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
+      <Tile
+        icon={IconShip}
+        label="Vessels on the register"
+        value={formatNumber(register.total)}
+        detail={`${formatNumber(register.registered)} registered · ${formatNumber(register.suspended)} suspended · ${formatNumber(register.deregistered)} deregistered`}
+        hint="The whole register. Not affected by the date filter."
+      />
+      <Tile
+        icon={IconCalendarStats}
+        color="teal"
+        label="New in period"
+        value={formatNumber(register.registeredInPeriod)}
+        detail={`${formatNumber(register.registeredInPreviousPeriod)} in the previous period`}
+        delta={{
+          text: formatDelta(register.changePct),
+          color: deltaColor(register.changePct),
+        }}
+        hint="Vessels entered on the register inside the selected window, against the equally long window before it."
+      />
+      <Tile
+        icon={IconScale}
+        color="indigo"
+        label="Fleet tonnage"
+        value={formatNumber(fleet.totalGrossTonnage)}
+        // The coverage count is not decoration: an average over 2 of 300 hulls
+        // is a different claim from an average over all of them.
+        detail={`avg ${formatNumber(fleet.avgGrossTonnage, { decimals: 1 })} GT across ${formatNumber(fleet.grossTonnageKnownFor)} of ${formatNumber(register.total)} vessels`}
+        hint="Gross tonnage is optional on the register, so the average covers only the vessels that declared one."
+      />
+      <Tile
+        icon={IconAnchor}
+        color="cyan"
+        label="Average age"
+        value={
+          fleet.avgAgeYears === null
+            ? DASH
+            : formatNumber(fleet.avgAgeYears, { decimals: 1, suffix: ' yrs' })
+        }
+        detail={`${formatNumber(fleet.seaGoing)} sea-going · ${formatNumber(fleet.inlandWaterway)} inland · known for ${formatNumber(fleet.ageKnownFor)}`}
+        hint="Derived from the build year, which not every entry carries."
+      />
+      <Tile
+        icon={IconThumbUp}
+        color="green"
+        label="Approval rate"
+        value={formatPercent(pipeline.approvalRatePct)}
+        detail={`${formatNumber(pipeline.approved)} approved · ${formatNumber(pipeline.rejected)} rejected · ${formatNumber(pipeline.inProgress)} in flight`}
+        hint="Approved as a share of decided applications. Drafts and applications still in the queue are excluded."
+      />
+      <Tile
+        icon={IconClockHour4}
+        color="grape"
+        label="Processing time"
+        value={
+          pipeline.medianProcessingDays === null
+            ? DASH
+            : formatNumber(pipeline.medianProcessingDays, {
+                decimals: 1,
+                suffix: ' d',
+              })
+        }
+        detail={`median · mean ${formatNumber(pipeline.avgProcessingDays, { decimals: 1, suffix: ' d' })} · ${formatNumber(pipeline.avgAdjustmentRounds, { decimals: 2 })} adjustment rounds`}
+        hint="Submission to decision. Only applications that have been decided are counted."
+      />
+      <Tile
+        icon={IconAlarm}
+        color="orange"
+        label="Certificates expiring"
+        value={formatNumber(certificates.expiringIn30)}
+        detail={`within 30 days · ${formatNumber(certificates.expiringIn60)} within 60 · ${formatNumber(certificates.expiringIn90)} within 90`}
+        hint="Cumulative: a certificate due in a fortnight is counted in all three figures."
+      />
+      <Tile
+        icon={IconCoin}
+        color="yellow"
+        label="Fees collected"
+        value={formatMoney(revenue.paid, revenue.currency)}
+        detail={`${formatMoney(revenue.pending, revenue.currency)} outstanding · ${formatNumber(revenue.failedCount)} failed`}
+        hint={
+          revenue.mixedCurrency
+            ? 'The register holds payments in more than one currency; this total sums across them.'
+            : undefined
+        }
+      />
+    </SimpleGrid>
+  );
+}
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportCharts.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportCharts.tsx
new file mode 100644
index 000000000..2dd3f5e48
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportCharts.tsx
@@ -0,0 +1,369 @@
+import type { ReactNode } from 'react';
+import { Card, Group, SimpleGrid, Text } from '@mantine/core';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { BreakdownItem, ReportGranularity, VesselReport } from '@ema-platform/api';
+import {
+  expiryBands,
+  formatBucket,
+  formatNumber,
+  officerLabel,
+  sliceColor,
+} from './report-format';
+
+// Recharts is unused elsewhere in this repo, so the shared setup lives here
+// rather than being repeated per chart: one grid style, one tooltip style, one
+// axis style, and a fixed height so the dashboard's rows line up.
+const CHART_HEIGHT = 260;
+const AXIS = { fontSize: 11, stroke: 'var(--mantine-color-dimmed)' } as const;
+const GRID = 'var(--mantine-color-default-border)';
+
+const TOOLTIP_STYLE = {
+  background: 'var(--mantine-color-body)',
+  border: '1px solid var(--mantine-color-default-border)',
+  borderRadius: 8,
+  fontSize: 12,
+} as const;
+
+function ChartCard({
+  title,
+  subtitle,
+  children,
+  empty,
+}: {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  /** True when there is genuinely nothing to draw — say so, don't draw axes. */
+  empty?: boolean;
+}) {
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group justify="space-between" mb="xs" wrap="nowrap">
+        <Text fw={600} size="sm">
+          {title}
+        </Text>
+        {subtitle && (
+          <Text size="xs" c="dimmed">
+            {subtitle}
+          </Text>
+        )}
+      </Group>
+      {empty ? (
+        <Text size="sm" c="dimmed" py="xl" ta="center">
+          Nothing to show for this filter yet.
+        </Text>
+      ) : (
+        <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+          {children as never}
+        </ResponsiveContainer>
+      )}
+    </Card>
+  );
+}
+
+/**
+ * A ranked breakdown as horizontal bars.
+ *
+ * Horizontal because the labels are flag states, ports and vessel types —
+ * words, which a vertical axis can show in full instead of rotating them.
+ */
+function BreakdownBars({
+  title,
+  subtitle,
+  items,
+}: {
+  title: string;
+  subtitle?: string;
+  items: BreakdownItem[];
+  }) {
+  return (
+    <ChartCard title={title} subtitle={subtitle} empty={items.length === 0}>
+      <BarChart data={items} layout="vertical" margin={{ left: 8, right: 16 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID} horizontal={false} />
+        <XAxis type="number" allowDecimals={false} {...AXIS} />
+        <YAxis type="category" dataKey="label" width={130} {...AXIS} />
+        <Tooltip
+          contentStyle={TOOLTIP_STYLE}
+          formatter={(value, _name, entry) => [
+            countWithShare(value, entry),
+            'Vessels',
+          ]}
+        />
+        <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+          {items.map((item, index) => (
+            <Cell key={item.key} fill={sliceColor(item, index)} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ChartCard>
+  );
+}
+
+function BreakdownDonut({
+  title,
+  subtitle,
+  items,
+}: {
+  title: string;
+  subtitle?: string;
+  items: BreakdownItem[];
+}) {
+  return (
+    <ChartCard title={title} subtitle={subtitle} empty={items.length === 0}>
+      <PieChart>
+        <Pie
+          data={items}
+          dataKey="count"
+          nameKey="label"
+          innerRadius="52%"
+          outerRadius="78%"
+          paddingAngle={2}
+        >
+          {items.map((item, index) => (
+            <Cell key={item.key} fill={sliceColor(item, index)} />
+          ))}
+        </Pie>
+        <Tooltip
+          contentStyle={TOOLTIP_STYLE}
+          formatter={(value, name, entry) => [countWithShare(value, entry), name]}
+        />
+        <Legend
+          verticalAlign="bottom"
+          height={36}
+          wrapperStyle={{ fontSize: 11 }}
+        />
+      </PieChart>
+    </ChartCard>
+  );
+}
+
+/**
+ * "12 (7.5%)" for a breakdown tooltip.
+ *
+ * The share comes off the payload rather than being recomputed: the API's
+ * percentage is of the whole, including the slices folded into "Other", and
+ * dividing by what is on screen would quietly disagree with it.
+ */
+function countWithShare(value: unknown, entry: unknown): string {
+  const count = typeof value === 'number' ? value : Number(value ?? 0);
+  const payload = (entry as { payload?: BreakdownItem } | undefined)?.payload;
+  const share = payload?.percentage ?? 0;
+  return `${formatNumber(count)} (${formatNumber(share, { decimals: 1 })}%)`;
+}
+
+/** True when every bucket in a zero-filled series is empty. */
+const allZero = (values: number[]): boolean =>
+  values.every((value) => value === 0);
+
+export function ReportCharts({ report }: { report: VesselReport }) {
+  const { timeSeries, breakdowns, kpis } = report;
+  const granularity: ReportGranularity = report.filters.granularity;
+  const tick = (bucket: string) => formatBucket(bucket, granularity);
+  // Recharts types the tooltip label as a ReactNode; only a string is ever a
+  // bucket key, and anything else is passed through untouched.
+  const tickLabel = (label: unknown) =>
+    typeof label === 'string' ? tick(label) : String(label ?? '');
+
+  // Expiry counts arrive cumulative; drawn side by side they have to be
+  // disjoint or the three bars double-count each other.
+  const expiry = expiryBands(kpis.certificates);
+
+  const officers = breakdowns.byOfficer.map((item) => ({
+    ...item,
+    label: officerLabel(item.key),
+  }));
+
+  return (
+    <>
+      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+        <ChartCard
+          title="Registrations over time"
+          subtitle="count and gross tonnage"
+          empty={allZero(timeSeries.registrations.map((b) => b.count))}
+        >
+          <AreaChart data={timeSeries.registrations}>
+            <CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+            <XAxis dataKey="bucket" tickFormatter={tick} {...AXIS} />
+            <YAxis yAxisId="count" allowDecimals={false} {...AXIS} />
+            <YAxis yAxisId="tonnage" orientation="right" {...AXIS} />
+            <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={tickLabel} />
+            <Legend wrapperStyle={{ fontSize: 11 }} />
+            <Area
+              yAxisId="count"
+              type="monotone"
+              dataKey="count"
+              name="Vessels"
+              stroke="var(--mantine-color-blue-6)"
+              fill="var(--mantine-color-blue-2)"
+            />
+            <Area
+              yAxisId="tonnage"
+              type="monotone"
+              dataKey="grossTonnage"
+              name="Gross tonnage"
+              stroke="var(--mantine-color-teal-6)"
+              fill="transparent"
+            />
+          </AreaChart>
+        </ChartCard>
+
+        <ChartCard
+          title="Application throughput"
+          subtitle="decisions land in the month they were made"
+          empty={allZero(
+            timeSeries.applications.flatMap((b) => [
+              b.submitted,
+              b.approved,
+              b.rejected,
+            ]),
+          )}
+        >
+          <BarChart data={timeSeries.applications}>
+            <CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+            <XAxis dataKey="bucket" tickFormatter={tick} {...AXIS} />
+            <YAxis allowDecimals={false} {...AXIS} />
+            <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={tickLabel} />
+            <Legend wrapperStyle={{ fontSize: 11 }} />
+            <Bar
+              dataKey="submitted"
+              name="Submitted"
+              fill="var(--mantine-color-blue-4)"
+            />
+            {/* Approved and rejected stack: together they are the decisions
+                made in that bucket, which reads against intake beside it. */}
+            <Bar
+              dataKey="approved"
+              name="Approved"
+              stackId="decided"
+              fill="var(--mantine-color-teal-6)"
+            />
+            <Bar
+              dataKey="rejected"
+              name="Rejected"
+              stackId="decided"
+              fill="var(--mantine-color-red-6)"
+            />
+          </BarChart>
+        </ChartCard>
+
+        <ChartCard
+          title="Fees collected"
+          subtitle={kpis.revenue.currency}
+          empty={allZero(timeSeries.revenue.map((b) => b.amount))}
+        >
+          <LineChart data={timeSeries.revenue}>
+            <CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+            <XAxis dataKey="bucket" tickFormatter={tick} {...AXIS} />
+            <YAxis {...AXIS} />
+            <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={tickLabel} />
+            <Line
+              type="monotone"
+              dataKey="amount"
+              name={`Paid (${kpis.revenue.currency})`}
+              stroke="var(--mantine-color-yellow-7)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartCard>
+
+        <ChartCard
+          title="Incidents over time"
+          empty={allZero(timeSeries.incidents.map((b) => b.count))}
+        >
+          <BarChart data={timeSeries.incidents}>
+            <CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+            <XAxis dataKey="bucket" tickFormatter={tick} {...AXIS} />
+            <YAxis allowDecimals={false} {...AXIS} />
+            <Tooltip contentStyle={TOOLTIP_STYLE} labelFormatter={tickLabel} />
+            <Bar
+              dataKey="count"
+              name="Incidents"
+              fill="var(--mantine-color-orange-6)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartCard>
+      </SimpleGrid>
+
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="md">
+        <BreakdownDonut title="Register status" items={breakdowns.byStatus} />
+        <BreakdownDonut title="Category" items={breakdowns.byCategory} />
+        <ChartCard
+          title="Certificate expiry"
+          subtitle="disjoint bands"
+          empty={allZero(expiry.map((band) => band.count))}
+        >
+          <BarChart data={expiry} layout="vertical" margin={{ left: 8, right: 16 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke={GRID} horizontal={false} />
+            <XAxis type="number" allowDecimals={false} {...AXIS} />
+            <YAxis type="category" dataKey="label" width={110} {...AXIS} />
+            <Tooltip contentStyle={TOOLTIP_STYLE} />
+            <Bar
+              dataKey="count"
+              name="Certificates"
+              fill="var(--mantine-color-orange-6)"
+              radius={[0, 4, 4, 0]}
+            />
+          </BarChart>
+        </ChartCard>
+
+        <BreakdownBars title="Tonnage bands" items={breakdowns.byTonnageBand} />
+        <BreakdownBars title="Age bands" items={breakdowns.byAgeBand} />
+        <BreakdownBars title="Length bands" items={breakdowns.byLengthBand} />
+
+        <BreakdownBars
+          title="Flag states"
+          subtitle="top slices, rest grouped"
+          items={breakdowns.byFlagState}
+        />
+        <BreakdownBars
+          title="Ports of registry"
+          subtitle="top slices, rest grouped"
+          items={breakdowns.byPortOfRegistry}
+        />
+        <BreakdownBars title="Vessel types" items={breakdowns.byVesselType} />
+
+        <BreakdownBars title="Hull material" items={breakdowns.byHullMaterial} />
+        <BreakdownBars title="Engine type" items={breakdowns.byEngineType} />
+        <BreakdownBars title="Build decade" items={breakdowns.byBuildDecade} />
+
+        <BreakdownBars
+          title="Application status"
+          items={breakdowns.byApplicationStatus}
+        />
+        <BreakdownDonut
+          title="New vs renewal"
+          items={breakdowns.byApplicationKind}
+        />
+        <BreakdownDonut
+          title="Incident severity"
+          subtitle="free text on the register"
+          items={breakdowns.byIncidentSeverity}
+        />
+
+        <BreakdownBars
+          title="Officer workload"
+          subtitle="user id — names not resolved"
+          items={officers}
+        />
+      </SimpleGrid>
+    </>
+  );
+}
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportFilters.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportFilters.tsx
new file mode 100644
index 000000000..8a9bf24c1
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportFilters.tsx
@@ -0,0 +1,215 @@
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Group,
+  MultiSelect,
+  SegmentedControl,
+  TextInput,
+} from '@mantine/core';
+import { DatePickerInput } from '@mantine/dates';
+import { IconDownload, IconSearch, IconX } from '@tabler/icons-react';
+import type {
+  ReportGranularity,
+  VesselCategory,
+  VesselReport,
+  VesselReportQuery,
+  VesselStatus,
+} from '@ema-platform/api';
+import { optionsFrom } from './report-format';
+
+const CATEGORY_OPTIONS = [
+  { value: 'SEA_GOING', label: 'Sea-going' },
+  { value: 'INLAND_WATERWAY', label: 'Inland waterway' },
+];
+
+const STATUS_OPTIONS = [
+  { value: 'REGISTERED', label: 'Registered' },
+  { value: 'SUSPENDED', label: 'Suspended' },
+  { value: 'DEREGISTERED', label: 'Deregistered' },
+];
+
+const GRANULARITY_OPTIONS = [
+  { value: 'DAY', label: 'Day' },
+  { value: 'WEEK', label: 'Week' },
+  { value: 'MONTH', label: 'Month' },
+];
+
+interface ReportFiltersProps {
+  query: VesselReportQuery;
+  onChange: (next: VesselReportQuery) => void;
+  /**
+   * The last successful response. Flag states, ports and vessel types are free
+   * text on the register with no lookup endpoint behind them, so the only
+   * honest source for the options is what the register actually holds.
+   */
+  report?: VesselReport;
+  onExport: () => void;
+  exporting: boolean;
+}
+
+export function ReportFilters({
+  query,
+  onChange,
+  report,
+  onExport,
+  exporting,
+}: ReportFiltersProps) {
+  // The search box is local so typing does not refetch on every keystroke; it
+  // is pushed up on a debounce.
+  const [search, setSearch] = useState(query.search ?? '');
+
+  useEffect(() => {
+    setSearch(query.search ?? '');
+  }, [query.search]);
+
+  useEffect(() => {
+    const current = query.search ?? '';
+    if (search === current) return;
+    const timer = setTimeout(
+      () => onChange({ ...query, search: search.trim() || undefined }),
+      350,
+    );
+    return () => clearTimeout(timer);
+  }, [search, query, onChange]);
+
+  const set = <K extends keyof VesselReportQuery>(
+    key: K,
+    value: VesselReportQuery[K],
+  ) => onChange({ ...query, [key]: value });
+
+  // Mantine 8 works in `YYYY-MM-DD` strings here, which is exactly what the
+  // API wants — no Date round trip, and no timezone to shift the day.
+  const range: [string | null, string | null] = [
+    query.from ?? null,
+    query.to ?? null,
+  ];
+
+  const filtered =
+    Boolean(query.search) ||
+    Boolean(query.from) ||
+    Boolean(query.to) ||
+    [
+      query.category,
+      query.status,
+      query.flagState,
+      query.portOfRegistry,
+      query.vesselType,
+    ].some((values) => (values ?? []).length > 0);
+
+  return (
+    <Card withBorder radius="md" p="md" mb="md">
+      <Group align="flex-end" gap="sm" wrap="wrap">
+        <DatePickerInput
+          type="range"
+          label="Period"
+          placeholder="Last 12 months"
+          value={range}
+          // Both ends before refetching: a half-set range would send `from`
+          // with no `to` and redraw the charts against a window the user is
+          // still in the middle of choosing.
+          onChange={([from, to]) => {
+            if (from && !to) return;
+            onChange({
+              ...query,
+              from: from ?? undefined,
+              to: to ?? undefined,
+            });
+          }}
+          clearable
+          w={250}
+        />
+
+        <SegmentedControl
+          size="sm"
+          data={GRANULARITY_OPTIONS}
+          value={query.granularity ?? 'MONTH'}
+          onChange={(value) => set('granularity', value as ReportGranularity)}
+        />
+
+        <MultiSelect
+          label="Category"
+          placeholder="All"
+          data={CATEGORY_OPTIONS}
+          value={query.category ?? []}
+          onChange={(value) => set('category', value as VesselCategory[])}
+          clearable
+          w={190}
+        />
+
+        <MultiSelect
+          label="Status"
+          placeholder="All"
+          data={STATUS_OPTIONS}
+          value={query.status ?? []}
+          onChange={(value) => set('status', value as VesselStatus[])}
+          clearable
+          w={190}
+        />
+
+        <MultiSelect
+          label="Flag state"
+          placeholder="All"
+          data={optionsFrom(report?.breakdowns.byFlagState)}
+          value={query.flagState ?? []}
+          onChange={(value) => set('flagState', value)}
+          searchable
+          clearable
+          w={190}
+        />
+
+        <MultiSelect
+          label="Port of registry"
+          placeholder="All"
+          data={optionsFrom(report?.breakdowns.byPortOfRegistry)}
+          value={query.portOfRegistry ?? []}
+          onChange={(value) => set('portOfRegistry', value)}
+          searchable
+          clearable
+          w={190}
+        />
+
+        <MultiSelect
+          label="Vessel type"
+          placeholder="All"
+          data={optionsFrom(report?.breakdowns.byVesselType)}
+          value={query.vesselType ?? []}
+          onChange={(value) => set('vesselType', value)}
+          searchable
+          clearable
+          w={190}
+        />
+
+        <TextInput
+          label="Search"
+          placeholder="Name, register №, IMO or owner"
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          w={250}
+        />
+
+        <Group gap="xs" ml="auto">
+          {filtered && (
+            <Button
+              variant="subtle"
+              color="gray"
+              leftSection={<IconX size={14} />}
+              onClick={() => onChange({})}
+            >
+              Clear
+            </Button>
+          )}
+          <Button
+            variant="light"
+            leftSection={<IconDownload size={16} />}
+            loading={exporting}
+            onClick={onExport}
+          >
+            Export CSV
+          </Button>
+        </Group>
+      </Group>
+    </Card>
+  );
+}
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportTables.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportTables.tsx
new file mode 100644
index 000000000..6a234984f
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/ReportTables.tsx
@@ -0,0 +1,211 @@
+import { Link } from 'react-router-dom';
+import { Badge, Card, Group, SimpleGrid, Table, Text } from '@mantine/core';
+import type { ReactNode } from 'react';
+import type { VesselReport } from '@ema-platform/api';
+import { useDateDisplayer } from '@ema-platform/shared';
+import { expiryUrgency, formatNumber } from './report-format';
+
+/**
+ * The worklists.
+ *
+ * Plain Mantine tables rather than `AdvancedTable`: every one of these is
+ * already capped server-side by `tableLimit`, so the pagination, search and
+ * column-picker that component brings would all be controls over a list that
+ * is only ever ten rows of a much longer one. Each card links out to the screen
+ * that does own the full list.
+ */
+function TableCard({
+  title,
+  subtitle,
+  to,
+  linkLabel,
+  empty,
+  head,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  to?: string;
+  linkLabel?: string;
+  empty: boolean;
+  head: string[];
+  children: ReactNode;
+}) {
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group justify="space-between" mb="xs" wrap="nowrap">
+        <div>
+          <Text fw={600} size="sm">
+            {title}
+          </Text>
+          {subtitle && (
+            <Text size="xs" c="dimmed">
+              {subtitle}
+            </Text>
+          )}
+        </div>
+        {to && (
+          <Text component={Link} to={to} size="xs" c="blue">
+            {linkLabel ?? 'View all'}
+          </Text>
+        )}
+      </Group>
+      {empty ? (
+        <Text size="sm" c="dimmed" py="lg" ta="center">
+          Nothing to show.
+        </Text>
+      ) : (
+        <Table highlightOnHover verticalSpacing="xs" fz="sm">
+          <Table.Thead>
+            <Table.Tr>
+              {head.map((column) => (
+                <Table.Th key={column}>{column}</Table.Th>
+              ))}
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{children}</Table.Tbody>
+        </Table>
+      )}
+    </Card>
+  );
+}
+
+export function ReportTables({ report }: { report: VesselReport }) {
+  const showDate = useDateDisplayer();
+  const { tables, filters } = report;
+
+  return (
+    <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md" mt="md">
+      <TableCard
+        title="Certificates expiring"
+        subtitle={`within ${filters.expiringWithinDays} days`}
+        to="/licence-register"
+        empty={tables.expiringCertificates.length === 0}
+        head={['Vessel', 'Certificate', 'Expires', 'Days']}
+      >
+        {tables.expiringCertificates.map((row) => (
+          <Table.Tr key={row.vesselId}>
+            <Table.Td>
+              <Text size="sm" fw={500}>
+                {row.name}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {row.registrationNumber}
+                {row.ownerName ? ` · ${row.ownerName}` : ''}
+              </Text>
+            </Table.Td>
+            <Table.Td>{row.certificateNumber ?? '—'}</Table.Td>
+            <Table.Td>{showDate(row.expiryDate)}</Table.Td>
+            <Table.Td>
+              <Badge
+                size="sm"
+                variant="light"
+                color={expiryUrgency(row.daysToExpiry)}
+              >
+                {/* 0 is today, and a certificate is valid through its last day. */}
+                {row.daysToExpiry === 0
+                  ? 'Today'
+                  : `${formatNumber(row.daysToExpiry)} d`}
+              </Badge>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </TableCard>
+
+      <TableCard
+        title="Recent registrations"
+        to="/vessel-registration-queue"
+        linkLabel="Open register"
+        empty={tables.recentRegistrations.length === 0}
+        head={['Vessel', 'Category', 'Flag', 'Registered']}
+      >
+        {tables.recentRegistrations.map((row) => (
+          <Table.Tr key={row.vesselId}>
+            <Table.Td>
+              <Text size="sm" fw={500}>
+                {row.name}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {row.registrationNumber}
+                {row.vesselType ? ` · ${row.vesselType}` : ''}
+              </Text>
+            </Table.Td>
+            <Table.Td>
+              {row.category === 'SEA_GOING' ? 'Sea-going' : 'Inland'}
+            </Table.Td>
+            <Table.Td>{row.flagState ?? '—'}</Table.Td>
+            <Table.Td>{showDate(row.registeredAt)}</Table.Td>
+          </Table.Tr>
+        ))}
+      </TableCard>
+
+      <TableCard
+        title="Applications in the queue"
+        subtitle="oldest first"
+        to="/licence-review/type/VESSEL_REGISTRATION"
+        linkLabel="Open queue"
+        empty={tables.pendingApplications.length === 0}
+        head={['Application', 'Status', 'Submitted', 'Open']}
+      >
+        {tables.pendingApplications.map((row) => (
+          <Table.Tr key={row.applicationNumber}>
+            <Table.Td>
+              <Text size="sm" fw={500}>
+                {row.applicationNumber}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {row.kind === 'RENEWAL' ? 'Renewal' : 'New'}
+                {row.adjustmentRound > 0
+                  ? ` · ${row.adjustmentRound} adjustment round${row.adjustmentRound === 1 ? '' : 's'}`
+                  : ''}
+              </Text>
+            </Table.Td>
+            <Table.Td>
+              <Badge size="sm" variant="light">
+                {row.status.replaceAll('_', ' ')}
+              </Badge>
+            </Table.Td>
+            <Table.Td>
+              {row.submittedAt ? showDate(row.submittedAt) : '—'}
+            </Table.Td>
+            <Table.Td>
+              <Badge
+                size="sm"
+                variant="light"
+                color={row.daysOpen > 30 ? 'red' : row.daysOpen > 14 ? 'orange' : 'gray'}
+              >
+                {formatNumber(row.daysOpen)} d
+              </Badge>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </TableCard>
+
+      <TableCard
+        title="Recent incidents"
+        empty={tables.recentIncidents.length === 0}
+        head={['Vessel', 'Occurred', 'Severity', 'Reported by']}
+      >
+        {tables.recentIncidents.map((row) => (
+          <Table.Tr key={row.id}>
+            <Table.Td>
+              <Text size="sm" fw={500}>
+                {row.vesselName}
+              </Text>
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {row.description}
+              </Text>
+            </Table.Td>
+            <Table.Td>{showDate(row.occurredAt)}</Table.Td>
+            <Table.Td>{row.severity ?? '—'}</Table.Td>
+            <Table.Td>
+              <Badge size="sm" variant="light" color={row.reportedByOfficer ? 'blue' : 'gray'}>
+                {row.reportedByOfficer ? 'Officer' : 'Owner'}
+              </Badge>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </TableCard>
+    </SimpleGrid>
+  );
+}
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
new file mode 100644
index 000000000..e41c9b3fd
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
@@ -0,0 +1,149 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Alert, Container, Group, Text, Title } from '@mantine/core';
+import { IconAlertTriangle, IconShip } from '@tabler/icons-react';
+import {
+  ApiErrorAlert,
+  EmptyState,
+  PageLoader,
+  notify,
+} from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
+import {
+  downloadAuthedFile,
+  extractErrorMessage,
+  useGetVesselReportQuery,
+} from '@ema-platform/api';
+import type { VesselReportQuery } from '@ema-platform/api';
+import { KpiTiles } from './KpiTiles';
+import { ReportCharts } from './ReportCharts';
+import { ReportFilters } from './ReportFilters';
+import { ReportTables } from './ReportTables';
+import { queryToSearchParams, searchParamsToQuery } from './report-format';
+
+/**
+ * The vessel registration dashboard (module 11).
+ *
+ * One `GET /vessels/report` call fills the whole screen — KPIs, four time
+ * series, fifteen breakdowns and four worklists — so the filter bar drives a
+ * single refetch rather than a dozen independent ones.
+ *
+ * Filter state lives in the URL. A filtered dashboard is the thing an officer
+ * wants to send someone, and rebuilding six selects from a description is not
+ * how that conversation should go.
+ */
+export function VesselRegistrationReportPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [exporting, setExporting] = useState(false);
+  const showDate = useDateDisplayer();
+
+  const query: VesselReportQuery = useMemo(
+    () => searchParamsToQuery(searchParams),
+    [searchParams],
+  );
+
+  const setQuery = useCallback(
+    (next: VesselReportQuery) => {
+      // `replace` so a session of narrowing filters does not bury the page the
+      // officer arrived from under twenty history entries.
+      setSearchParams(queryToSearchParams(next), { replace: true });
+    },
+    [setSearchParams],
+  );
+
+  const { data: report, isLoading, isFetching, error } = useGetVesselReportQuery(
+    query,
+  );
+
+  const exportCsv = useCallback(async () => {
+    setExporting(true);
+    try {
+      const params = queryToSearchParams(query).toString();
+      const { rowCount, truncated } = await downloadAuthedFile(
+        `/vessels/report/export${params ? `?${params}` : ''}`,
+        'vessel-register.csv',
+      );
+      if (truncated) {
+        notify.error(
+          `Export cut off at ${rowCount ?? 'the row limit'} rows. Narrow the filter and export again.`,
+        );
+      } else {
+        notify.success(
+          `Exported ${rowCount ?? 'the filtered'} vessel${rowCount === 1 ? '' : 's'}.`,
+        );
+      }
+    } catch (err) {
+      notify.error(extractErrorMessage(err, 'Could not export the register'));
+    } finally {
+      setExporting(false);
+    }
+  }, [query]);
+
+  // Only the very first load blanks the page; a filter change keeps the last
+  // report on screen so the dashboard does not flash between every tweak.
+  if (isLoading) return <PageLoader />;
+
+  return (
+    <Container size="xl" py="md">
+      <Group justify="space-between" mb="md" align="flex-start">
+        <div>
+          <Title order={3}>Vessel registration report</Title>
+          <Text size="sm" c="dimmed">
+            {report
+              ? `Register-wide totals with a ${showDate(report.filters.from)} – ${showDate(report.filters.to)} window on the trends.`
+              : 'The national vessel register at a glance.'}
+          </Text>
+        </div>
+      </Group>
+
+      <ReportFilters
+        query={query}
+        onChange={setQuery}
+        report={report}
+        onExport={exportCsv}
+        exporting={exporting}
+      />
+
+      {error && <ApiErrorAlert error={error} title="Could not load the report" />}
+
+      {report && (
+        <>
+          {report.truncated && (
+            <Alert
+              color="yellow"
+              icon={<IconAlertTriangle size={16} />}
+              mb="md"
+              title="Partial figures"
+            >
+              The register is larger than this report can scan in one pass, so
+              every figure below covers only part of it. Narrow the filter for
+              an exact answer.
+            </Alert>
+          )}
+
+          {report.kpis.register.total === 0 ? (
+            <EmptyState
+              icon={IconShip}
+              title="No vessels match this filter"
+              description={
+                Object.keys(query).length > 0
+                  ? 'Nothing on the register matches the current filter. Clear it to see the whole book.'
+                  : 'No vessels have been registered yet. Entries appear here once a registration certificate is issued.'
+              }
+            />
+          ) : (
+            <div style={{ opacity: isFetching ? 0.6 : 1, transition: 'opacity 120ms' }}>
+              <KpiTiles report={report} />
+              <div style={{ marginTop: 'var(--mantine-spacing-md)' }}>
+                <ReportCharts report={report} />
+              </div>
+              <ReportTables report={report} />
+            </div>
+          )}
+        </>
+      )}
+    </Container>
+  );
+}
+
+export default VesselRegistrationReportPage;
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.spec.ts b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.spec.ts
new file mode 100644
index 000000000..52134a22b
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.spec.ts
@@ -0,0 +1,187 @@
+import { describe, expect, it } from 'vitest';
+import type { BreakdownItem, CertificateKpis } from '@ema-platform/api';
+import {
+  DASH,
+  defaultRange,
+  deltaColor,
+  expiryBands,
+  expiryUrgency,
+  formatBucket,
+  formatDelta,
+  formatNumber,
+  formatPercent,
+  officerLabel,
+  optionsFrom,
+  queryToSearchParams,
+  searchParamsToQuery,
+  sliceColor,
+} from './report-format';
+
+const certificates = (partial: Partial<CertificateKpis>): CertificateKpis => ({
+  total: 0,
+  active: 0,
+  expired: 0,
+  suspended: 0,
+  expiringIn30: 0,
+  expiringIn60: 0,
+  expiringIn90: 0,
+  missingCertificate: 0,
+  ...partial,
+});
+
+const item = (key: string, count = 1): BreakdownItem => ({
+  key,
+  label: key,
+  count,
+  percentage: 0,
+});
+
+describe('formatNumber', () => {
+  it('renders a dash for a figure the API had no answer for', () => {
+    expect(formatNumber(null)).toBe(DASH);
+    expect(formatNumber(undefined)).toBe(DASH);
+    expect(formatNumber(Number.NaN)).toBe(DASH);
+  });
+
+  it('keeps a real zero', () => {
+    expect(formatNumber(0)).toBe('0');
+  });
+
+  it('honours decimals and a suffix', () => {
+    expect(formatNumber(12.345, { decimals: 2 })).toBe('12.35');
+    expect(formatNumber(7, { suffix: ' GT' })).toBe('7 GT');
+  });
+});
+
+describe('formatPercent / formatDelta', () => {
+  it('distinguishes no answer from zero', () => {
+    expect(formatPercent(null)).toBe(DASH);
+    expect(formatPercent(0)).toBe('0.0%');
+    expect(formatDelta(null)).toBe(DASH);
+  });
+
+  it('signs a positive change', () => {
+    expect(formatDelta(12.5)).toBe('+12.5%');
+    expect(formatDelta(-4)).toBe('-4.0%');
+  });
+
+  it('colours a flat or absent change neutrally', () => {
+    expect(deltaColor(null)).toBe('gray');
+    expect(deltaColor(0)).toBe('gray');
+    expect(deltaColor(1)).toBe('teal');
+    expect(deltaColor(-1)).toBe('red');
+  });
+});
+
+describe('expiryBands', () => {
+  it('differences the API cumulative counts into disjoint bands', () => {
+    expect(
+      expiryBands(
+        certificates({ expiringIn30: 4, expiringIn60: 9, expiringIn90: 11 }),
+      ),
+    ).toEqual([
+      { label: 'Within 30 days', count: 4 },
+      { label: '31–60 days', count: 5 },
+      { label: '61–90 days', count: 2 },
+    ]);
+  });
+
+  it('never draws a negative bar if the counts are not monotonic', () => {
+    const bands = expiryBands(
+      certificates({ expiringIn30: 9, expiringIn60: 4, expiringIn90: 4 }),
+    );
+    expect(bands.every((band) => band.count >= 0)).toBe(true);
+  });
+});
+
+describe('expiryUrgency', () => {
+  it('escalates on the boundaries', () => {
+    expect(expiryUrgency(0)).toBe('red');
+    expect(expiryUrgency(7)).toBe('red');
+    expect(expiryUrgency(8)).toBe('orange');
+    expect(expiryUrgency(30)).toBe('orange');
+    expect(expiryUrgency(31)).toBe('gray');
+  });
+});
+
+describe('officerLabel', () => {
+  it('spells out the unassigned bucket and shortens a uuid', () => {
+    expect(officerLabel('UNASSIGNED')).toBe('Unassigned');
+    expect(officerLabel('c8d0a151-91e9-433e-b221-db331480b10f')).toBe(
+      'c8d0a151…',
+    );
+    expect(officerLabel('short')).toBe('short');
+  });
+});
+
+describe('sliceColor', () => {
+  it('mutes the bookkeeping slices and cycles the rest', () => {
+    const muted = sliceColor(item('OTHER'), 0);
+    expect(sliceColor(item('Unknown'), 3)).toBe(muted);
+    expect(sliceColor(item('SEA_GOING'), 0)).not.toBe(muted);
+  });
+
+  it('is stable for a given position', () => {
+    expect(sliceColor(item('A'), 2)).toBe(sliceColor(item('B'), 2));
+  });
+});
+
+describe('formatBucket', () => {
+  it('reads a month bucket as a month and a day bucket as a day', () => {
+    expect(formatBucket('2026-03-01', 'MONTH')).toMatch(/2026/);
+    expect(formatBucket('2026-03-04', 'DAY')).not.toMatch(/2026/);
+  });
+
+  it('passes an unparseable bucket through rather than printing NaN', () => {
+    expect(formatBucket('not-a-date', 'MONTH')).toBe('not-a-date');
+  });
+});
+
+describe('defaultRange', () => {
+  it('spans the twelve months the API defaults to', () => {
+    const [from, to] = defaultRange(new Date('2026-08-18T00:00:00Z'));
+    expect(from.toISOString().slice(0, 10)).toBe('2025-08-18');
+    expect(to.toISOString().slice(0, 10)).toBe('2026-08-18');
+  });
+});
+
+describe('url round trip', () => {
+  it('drops empty values so an untouched dashboard has a clean link', () => {
+    const params = queryToSearchParams({
+      search: '',
+      category: [],
+      topN: 15,
+    });
+    expect(params.toString()).toBe('topN=15');
+  });
+
+  it('restores the filter state a shared link carries', () => {
+    const query = {
+      from: '2026-01-01',
+      to: '2026-08-18',
+      granularity: 'WEEK' as const,
+      status: ['REGISTERED' as const, 'SUSPENDED' as const],
+      flagState: ['Ethiopia'],
+      search: 'abay',
+      topN: 20,
+    };
+    expect(searchParamsToQuery(queryToSearchParams(query))).toEqual(query);
+  });
+
+  it('ignores a hand-edited value the API would reject', () => {
+    const query = searchParamsToQuery(
+      new URLSearchParams('topN=abc&granularity=YEAR'),
+    );
+    expect(query.topN).toBeUndefined();
+    expect(query.granularity).toBeUndefined();
+  });
+});
+
+describe('optionsFrom', () => {
+  it('offers the register values but not the bookkeeping slices', () => {
+    expect(
+      optionsFrom([item('Ethiopia'), item('Unknown'), item('OTHER')]),
+    ).toEqual(['Ethiopia']);
+    expect(optionsFrom(undefined)).toEqual([]);
+  });
+});
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.ts b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.ts
new file mode 100644
index 000000000..0ac963995
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/report-format.ts
@@ -0,0 +1,221 @@
+import type {
+  BreakdownItem,
+  CertificateKpis,
+  ReportGranularity,
+  VesselReportQuery,
+} from '@ema-platform/api';
+
+/** Nothing measurable is not zero — an em dash says so without lying. */
+export const DASH = '—';
+
+/**
+ * A figure the API may legitimately have no answer for.
+ *
+ * `avgGrossTonnage` is null on an empty register and `approvalRatePct` is null
+ * until something has been decided; rendering either as 0 would report a fleet
+ * that weighs nothing and a service that approves nobody.
+ */
+export function formatNumber(
+  value: number | null | undefined,
+  options: { decimals?: number; suffix?: string } = {},
+): string {
+  if (value === null || value === undefined || Number.isNaN(value)) return DASH;
+  const text = value.toLocaleString(undefined, {
+    minimumFractionDigits: options.decimals ?? 0,
+    maximumFractionDigits: options.decimals ?? 0,
+  });
+  return options.suffix ? `${text}${options.suffix}` : text;
+}
+
+export function formatPercent(value: number | null | undefined): string {
+  return value === null || value === undefined
+    ? DASH
+    : `${formatNumber(value, { decimals: 1 })}%`;
+}
+
+export function formatMoney(value: number, currency: string): string {
+  return `${formatNumber(value, { decimals: 2 })} ${currency}`;
+}
+
+/** A signed delta for the change-vs-previous chip. */
+export function formatDelta(value: number | null): string {
+  if (value === null) return DASH;
+  const sign = value > 0 ? '+' : '';
+  return `${sign}${formatNumber(value, { decimals: 1 })}%`;
+}
+
+export function deltaColor(value: number | null): string {
+  if (value === null || value === 0) return 'gray';
+  return value > 0 ? 'teal' : 'red';
+}
+
+/**
+ * The API's expiry counts are cumulative — a certificate due in eleven days is
+ * inside the 30-, 60- and 90-day figures, which is how a renewals desk reads
+ * them. Stacked side by side in a chart that reads as three separate groups,
+ * so they are differenced into disjoint bands first.
+ */
+export function expiryBands(
+  certificates: CertificateKpis,
+): Array<{ label: string; count: number }> {
+  const { expiringIn30, expiringIn60, expiringIn90 } = certificates;
+  return [
+    { label: 'Within 30 days', count: expiringIn30 },
+    // Math.max guards against a server that ever answers non-monotonically —
+    // a negative bar is worse than a zero one.
+    { label: '31–60 days', count: Math.max(0, expiringIn60 - expiringIn30) },
+    { label: '61–90 days', count: Math.max(0, expiringIn90 - expiringIn60) },
+  ];
+}
+
+/** Red inside a week, orange inside a month, otherwise unremarkable. */
+export function expiryUrgency(daysToExpiry: number): string {
+  if (daysToExpiry <= 7) return 'red';
+  if (daysToExpiry <= 30) return 'orange';
+  return 'gray';
+}
+
+/**
+ * Officer ids are IAM uuids, which make useless axis labels. Until the
+ * dashboard has a name lookup, shorten them and keep "UNASSIGNED" readable.
+ */
+export function officerLabel(key: string): string {
+  if (key === 'UNASSIGNED') return 'Unassigned';
+  return key.length > 8 ? `${key.slice(0, 8)}…` : key;
+}
+
+/**
+ * Chart colours, assigned by position so a slice keeps its colour between
+ * renders. Mantine's palette rather than invented hex codes, so the charts
+ * follow the theme the rest of the app is built on.
+ */
+const PALETTE = [
+  'var(--mantine-color-blue-6)',
+  'var(--mantine-color-teal-6)',
+  'var(--mantine-color-orange-6)',
+  'var(--mantine-color-grape-6)',
+  'var(--mantine-color-cyan-6)',
+  'var(--mantine-color-lime-7)',
+  'var(--mantine-color-pink-6)',
+  'var(--mantine-color-indigo-6)',
+];
+
+const MUTED = 'var(--mantine-color-gray-5)';
+
+/**
+ * "Unknown" and "Other" are bookkeeping slices rather than findings, so they
+ * always take the muted colour instead of competing with the real categories
+ * for one of the bright ones.
+ */
+export function sliceColor(item: BreakdownItem, index: number): string {
+  if (item.key === 'OTHER' || item.key === 'Unknown') return MUTED;
+  return PALETTE[index % PALETTE.length];
+}
+
+/** Bucket keys are ISO dates; the axis wants something a human reads. */
+export function formatBucket(
+  bucket: string,
+  granularity: ReportGranularity,
+): string {
+  const date = new Date(bucket);
+  if (Number.isNaN(date.getTime())) return bucket;
+  if (granularity === 'MONTH') {
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      year: 'numeric',
+      timeZone: 'UTC',
+    });
+  }
+  return date.toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    timeZone: 'UTC',
+  });
+}
+
+/** The default window the API applies when none is given: the last 12 months. */
+export function defaultRange(now: Date): [Date, Date] {
+  const from = new Date(
+    Date.UTC(now.getUTCFullYear() - 1, now.getUTCMonth(), now.getUTCDate()),
+  );
+  return [from, now];
+}
+
+export const ISO_DAY_LENGTH = 10;
+
+export const toIsoDay = (date: Date): string =>
+  date.toISOString().slice(0, ISO_DAY_LENGTH);
+
+/**
+ * The filter state as URL search params, so a filtered dashboard is a
+ * shareable link rather than something the next person has to rebuild.
+ *
+ * Empty arrays and blank strings are dropped rather than serialised, which
+ * keeps an untouched dashboard's URL clean and lets the API apply its own
+ * defaults instead of being handed an empty filter to honour.
+ */
+export function queryToSearchParams(query: VesselReportQuery): URLSearchParams {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value === undefined || value === null || value === '') continue;
+    if (Array.isArray(value)) {
+      if (value.length === 0) continue;
+      params.set(key, value.join(','));
+    } else {
+      params.set(key, String(value));
+    }
+  }
+  return params;
+}
+
+const ARRAY_KEYS = [
+  'category',
+  'status',
+  'flagState',
+  'portOfRegistry',
+  'vesselType',
+] as const;
+
+const NUMBER_KEYS = ['expiringWithinDays', 'topN', 'tableLimit'] as const;
+
+/** The inverse, for restoring state from a shared link. */
+export function searchParamsToQuery(
+  params: URLSearchParams,
+): VesselReportQuery {
+  const query: Record<string, unknown> = {};
+  for (const key of ARRAY_KEYS) {
+    const raw = params.get(key);
+    if (raw) query[key] = raw.split(',').filter(Boolean);
+  }
+  for (const key of NUMBER_KEYS) {
+    const raw = params.get(key);
+    // An unparseable number in a hand-edited URL is ignored rather than sent
+    // on to fail the API's validation pipe.
+    if (raw !== null && raw !== '' && Number.isFinite(Number(raw))) {
+      query[key] = Number(raw);
+    }
+  }
+  for (const key of ['from', 'to', 'search'] as const) {
+    const raw = params.get(key);
+    if (raw) query[key] = raw;
+  }
+  const granularity = params.get('granularity');
+  if (granularity === 'DAY' || granularity === 'WEEK' || granularity === 'MONTH') {
+    query.granularity = granularity;
+  }
+  return query as VesselReportQuery;
+}
+
+/**
+ * The multi-select options a filter offers, taken from the breakdown the last
+ * response carried — there is no lookup endpoint for flag states or ports, and
+ * the register is the only place that knows which ones are in use.
+ *
+ * "Unknown" is dropped: it stands for a missing value, and there is nothing to
+ * filter the register down to.
+ */
+export function optionsFrom(items: BreakdownItem[] | undefined): string[] {
+  return (items ?? [])
+    .filter((item) => item.key !== 'Unknown' && item.key !== 'OTHER')
+    .map((item) => item.key);
+}
diff --git a/apps/backoffice/src/app/layouts/nav-config.ts b/apps/backoffice/src/app/layouts/nav-config.ts
index b3f9e77b0..45bc03990 100644
--- a/apps/backoffice/src/app/layouts/nav-config.ts
+++ b/apps/backoffice/src/app/layouts/nav-config.ts
@@ -118,7 +118,7 @@ export const NAV_SECTIONS: NavSection[] = [
       { to: '/vessel-registration-queue', label: 'nav.vesselRegistrationQueue', icon: IconAnchor, permissions: [P.VIEW_VESSEL_REGISTRY] },
       { to: '/licence-review/type/VESSEL_OWNERSHIP_TRANSFER', label: 'nav.ownershipTransferQueue', icon: IconArrowsExchange, permissions: APPLICATION_QUEUE },
       { to: '/vessel-registration-queue/new', label: 'nav.vesselFormBuilder', icon: IconFilePlus, soon: true, permissions: [P.VIEW_VESSEL_REGISTRY] },
-      { to: '/vessel-registration-report', label: 'nav.vesselRegistrationReport', icon: IconChartBar, soon: true, permissions: [P.VIEW_VESSEL_REGISTRY] },
+      { to: '/vessel-registration-report', label: 'nav.vesselRegistrationReport', icon: IconChartBar, permissions: [P.VIEW_VESSEL_REGISTRY] },
       { to: '/vessel-registration-head-dashboard', label: 'nav.vesselRegistrationHeadDashboard', icon: IconGauge, soon: true, permissions: [P.VIEW_VESSEL_REGISTRY] },
     ],
   },
diff --git a/apps/backoffice/src/app/router/index.tsx b/apps/backoffice/src/app/router/index.tsx
index e04280c63..5e6ae8894 100644
--- a/apps/backoffice/src/app/router/index.tsx
+++ b/apps/backoffice/src/app/router/index.tsx
@@ -95,7 +95,7 @@ const router = createBrowserRouter([
           { path: 'vessel-registration-queue', element: guard([P.VIEW_VESSEL_REGISTRY], <VesselRegistrationQueuePage />) },
           { path: 'vessel-registration-queue/new', element: guard([P.VIEW_VESSEL_REGISTRY], <VesselRegistrationFormBuilderPage />) },
          // { path: 'vessel-registration-queue/:id', element: <VesselRegistrationReviewPage /> },
-          //{ path: 'vessel-registration-report', element: <VesselRegistrationReportPage /> },
+          { path: 'vessel-registration-report', element: guard([P.VIEW_VESSEL_REGISTRY], <VesselRegistrationReportPage />) },
           { path: 'vessel-ownership-transfer', element: <Navigate to="/licence-review/type/VESSEL_OWNERSHIP_TRANSFER" replace /> },
           { path: 'vessel-ownership-transfer/:id', element: <Navigate to="/licence-review" replace /> },
           // Config-driven review workspace, shared by every licence type.
diff --git a/apps/backoffice/vite.config.mts b/apps/backoffice/vite.config.mts
index 331bc27fd..f6b8e3ace 100644
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -33,4 +33,14 @@ export default defineConfig({
     emptyOutDir: true,
     reportCompressedSize: true,
   },
+  // Unit tests for the pure helpers behind a screen (formatters, URL state).
+  // Component tests are deliberately not set up: nothing here renders React,
+  // so no jsdom environment or setup file is needed.
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.spec.ts'],
+    reporters: ['default'],
+  },
 });
diff --git a/docs/vessel-registration-report-frontend.md b/docs/vessel-registration-report-frontend.md
new file mode 100644
index 000000000..799f1c1f1
--- /dev/null
+++ b/docs/vessel-registration-report-frontend.md
@@ -0,0 +1,480 @@
+# Vessel registration report — frontend integration brief
+
+Paste the **Prompt** section below to Claude Code from the `emaui` repo root.
+Everything after it is reference the prompt points at.
+
+---
+
+## Prompt
+
+> Wire up the vessel registration report dashboard in the backoffice app.
+>
+> The backend endpoint is **new and already deployed** — `GET /api/vessels/report`
+> plus `GET /api/vessels/report/export` (CSV). Nothing about it is mocked; do not
+> invent sample data, and do not add a mock branch to `mock-base-query.ts`.
+>
+> The page it belongs on already exists as a placeholder:
+> `apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage.tsx`
+> currently renders `<FeatureUnavailable />`, and its route is commented out at
+> `apps/backoffice/src/app/router/index.tsx:98`. Replace the placeholder with the
+> real dashboard and re-enable the route, guarded by `P.VIEW_VESSEL_REGISTRY`
+> exactly like the vessel queue route two lines above it.
+>
+> Read `docs/vessel-registration-report-frontend.md` in this repo for the full
+> response contract, the chart plan, and the conventions to follow. Follow the
+> conventions already in the codebase over anything you would do by default:
+> RTK Query in `libs/api`, Mantine 8 for layout, `recharts` for charts (already a
+> dependency, not yet used anywhere — you are establishing the pattern), i18next
+> for every user-visible string.
+>
+> Scope, in order:
+> 1. Types + RTK Query endpoints in `libs/api/src/lib/features/vessel/`.
+> 2. The page: filter bar, KPI tiles, charts, tables.
+> 3. Export button.
+> 4. Route + nav.
+> 5. A vitest test for whatever pure logic you extract.
+>
+> Ask me before adding any new dependency. `recharts`, `@mantine/*`,
+> `@mantine/dates`, `dayjs` and `@tabler/icons-react` are all already installed.
+
+---
+
+## 1. What the endpoint is
+
+| | |
+|---|---|
+| Report | `GET /api/vessels/report` → JSON |
+| Export | `GET /api/vessels/report/export` → `text/csv` |
+| Permission | `can:View:vessel-registry` (`P.VIEW_VESSEL_REGISTRY`, `libs/auth/src/lib/permissions.constants.ts:48`) |
+| Auth | Bearer, same as every other backoffice call |
+
+One call fills the whole dashboard. Both routes take the **same** query
+parameters, so the export button reuses whatever the filter bar holds.
+
+Backend source, if you need to check a figure:
+`emaback/emaapi/apps/server/emaapi/src/module/vessel/services/vessel-report.service.ts`.
+
+### Query parameters
+
+| Param | Type | Default | Notes |
+|---|---|---|---|
+| `from` | ISO date | 12 months before `to` | bounds the **time series and "in period" figures only** |
+| `to` | ISO date | now | a bare `YYYY-MM-DD` covers that whole day |
+| `granularity` | `DAY \| WEEK \| MONTH` | `MONTH` | bucket width; weeks are Monday-anchored |
+| `category` | `SEA_GOING \| INLAND_WATERWAY`, repeatable or CSV | all | |
+| `status` | `REGISTERED \| SUSPENDED \| DEREGISTERED`, repeatable or CSV | all | |
+| `flagState` | string[], repeatable or CSV | all | |
+| `portOfRegistry` | string[], repeatable or CSV | all | |
+| `vesselType` | string[], repeatable or CSV | all | |
+| `search` | string | — | name / register number / IMO / owner name |
+| `expiringWithinDays` | 1–365 | 90 | horizon for the expiring-certificates table |
+| `topN` | 1–50 | 15 | slices kept per high-cardinality chart |
+| `tableLimit` | 1–200 | 10 | rows per table |
+
+Arrays accept both `?status=A&status=B` and `?status=A,B`. RTK Query's `params`
+serialises the array form correctly — pass arrays, not joined strings.
+
+**Important distinction to carry into the UI copy:** the register-wide totals
+(`kpis.register.total`, the status mix, every `breakdowns.*`) are **not**
+windowed. Only `registeredInPeriod`, `submittedInPeriod`, `decidedInPeriod`,
+`incidents.inPeriod` and the whole `timeSeries` block respect `from`/`to`.
+Label the tiles accordingly or the dashboard will be misread.
+
+## 2. Response contract
+
+Add these to `libs/api/src/lib/features/vessel/vessel.types.ts`. Numeric fields
+are real numbers (the backend already casts pg `numeric` strings) — unlike the
+existing `Vessel` type, which still carries `string | number`.
+
+```ts
+export type ReportGranularity = 'DAY' | 'WEEK' | 'MONTH';
+
+/** One slice of a breakdown chart. Percentages are of the whole, and sum to 100. */
+export interface BreakdownItem {
+  key: string;
+  label: string;
+  count: number;
+  percentage: number;
+}
+
+export interface VesselReportQuery {
+  from?: string;
+  to?: string;
+  granularity?: ReportGranularity;
+  category?: VesselCategory[];
+  status?: VesselStatus[];
+  flagState?: string[];
+  portOfRegistry?: string[];
+  vesselType?: string[];
+  search?: string;
+  expiringWithinDays?: number;
+  topN?: number;
+  tableLimit?: number;
+}
+
+export interface VesselReport {
+  generatedAt: string;
+  /** True when the register exceeded the 50k scan cap — figures are partial. */
+  truncated: boolean;
+  filters: Required<Pick<VesselReportQuery, 'granularity'>> & {
+    from: string;
+    to: string;
+    expiringWithinDays: number;
+    topN: number;
+    tableLimit: number;
+    category: VesselCategory[] | null;
+    status: VesselStatus[] | null;
+    flagState: string[] | null;
+    portOfRegistry: string[] | null;
+    vesselType: string[] | null;
+    search: string | null;
+  };
+  kpis: {
+    register: {
+      total: number;
+      registered: number;
+      suspended: number;
+      deregistered: number;
+      registeredInPeriod: number;
+      registeredInPreviousPeriod: number;
+      /** null when there is no previous period to compare against. */
+      changePct: number | null;
+    };
+    fleet: {
+      totalGrossTonnage: number;
+      avgGrossTonnage: number | null;
+      /** How many hulls the tonnage average actually covers. */
+      grossTonnageKnownFor: number;
+      totalPassengerCapacity: number;
+      avgLengthMeters: number | null;
+      avgAgeYears: number | null;
+      ageKnownFor: number;
+      seaGoing: number;
+      inlandWaterway: number;
+    };
+    pipeline: {
+      total: number;
+      draft: number;
+      inProgress: number;
+      approved: number;
+      rejected: number;
+      issued: number;
+      submittedInPeriod: number;
+      decidedInPeriod: number;
+      newCount: number;
+      renewalCount: number;
+      /** Approved ÷ settled. null when nothing has been decided yet. */
+      approvalRatePct: number | null;
+      avgProcessingDays: number | null;
+      medianProcessingDays: number | null;
+      avgAdjustmentRounds: number | null;
+    };
+    certificates: {
+      total: number;
+      active: number;
+      expired: number;
+      suspended: number;
+      /** Cumulative: a cert due in 11 days is in all three. */
+      expiringIn30: number;
+      expiringIn60: number;
+      expiringIn90: number;
+      missingCertificate: number;
+    };
+    incidents: {
+      total: number;
+      inPeriod: number;
+      reportedByOfficer: number;
+      reportedByOwner: number;
+      vesselsWithIncidents: number;
+    };
+    revenue: {
+      currency: string;
+      /** True when the register holds more than one currency — warn, don't sum blindly. */
+      mixedCurrency: boolean;
+      paid: number;
+      pending: number;
+      paidCount: number;
+      pendingCount: number;
+      failedCount: number;
+    };
+  };
+  timeSeries: {
+    /** `bucket` is an ISO date. Zero-filled across the window — no gaps. */
+    registrations: Array<{ bucket: string; count: number; grossTonnage: number }>;
+    applications: Array<{
+      bucket: string;
+      submitted: number;
+      approved: number;
+      rejected: number;
+      issued: number;
+    }>;
+    incidents: Array<{ bucket: string; count: number }>;
+    revenue: Array<{ bucket: string; amount: number; count: number }>;
+  };
+  breakdowns: {
+    byStatus: BreakdownItem[];
+    byCategory: BreakdownItem[];
+    byFlagState: BreakdownItem[];
+    byPortOfRegistry: BreakdownItem[];
+    byVesselType: BreakdownItem[];
+    byHullMaterial: BreakdownItem[];
+    byEngineType: BreakdownItem[];
+    byTonnageBand: BreakdownItem[];
+    byLengthBand: BreakdownItem[];
+    byAgeBand: BreakdownItem[];
+    byBuildDecade: BreakdownItem[];
+    byApplicationStatus: BreakdownItem[];
+    byApplicationKind: BreakdownItem[];
+    /** `key` is an IAM user uuid, or the literal "UNASSIGNED". */
+    byOfficer: BreakdownItem[];
+    byIncidentSeverity: BreakdownItem[];
+  };
+  tables: {
+    expiringCertificates: Array<{
+      vesselId: string;
+      registrationNumber: string;
+      name: string;
+      ownerName: string | null;
+      ownerUserId: string;
+      certificateNumber: string | null;
+      expiryDate: string;
+      certificateStatus: string | null;
+      /** 0 means it expires today, which still counts as live. */
+      daysToExpiry: number;
+    }>;
+    recentRegistrations: Array<{
+      vesselId: string;
+      registrationNumber: string;
+      name: string;
+      category: VesselCategory;
+      vesselType: string | null;
+      flagState: string | null;
+      grossTonnage: number | null;
+      ownerName: string | null;
+      status: VesselStatus;
+      registeredAt: string;
+    }>;
+    recentIncidents: Array<{
+      id: string;
+      vesselId: string;
+      registrationNumber: string;
+      vesselName: string;
+      occurredAt: string;
+      severity: string | null;
+      location: string | null;
+      description: string;
+      reportedByOfficer: boolean;
+    }>;
+    pendingApplications: Array<{
+      applicationNumber: string;
+      status: string;
+      kind: 'NEW' | 'RENEWAL';
+      assignedOfficerId: string | null;
+      submittedAt: string | null;
+      adjustmentRound: number;
+      daysOpen: number;
+    }>;
+  };
+}
+```
+
+### Contract details that will bite if ignored
+
+- **`null` is not `0`.** Averages come back `null` when nothing measurable
+  exists (an empty register, no decided applications). Render an em dash, never
+  `0` or `NaN`. Same for `changePct` and `approvalRatePct`.
+- **`grossTonnageKnownFor` / `ageKnownFor`** say how much of the fleet the
+  average covers. Show it as sub-text on the tile — an average over 2 of 300
+  hulls is misleading on its own.
+- **`Unknown`** is a real breakdown key (missing flag state, no build year). It
+  is deliberate; do not filter it out.
+- **`OTHER`** appears as the last slice of a capped breakdown, labelled
+  `Other (n)`. It exists so slices still sum to the total — do not drop it.
+- **Expiry buckets are cumulative.** If you draw them as a bar chart, either
+  say "within 30 / 60 / 90 days" or difference them yourself into disjoint
+  bands. Do not present cumulative counts as if they were disjoint.
+- **`truncated: true`** means the register passed the 50k scan cap and every
+  figure is partial. Show a persistent warning banner when it is set.
+- **`byOfficer.key` is a uuid**, not a name. Resolve it against whatever user
+  lookup the backoffice already uses, or show a shortened id. Do not print the
+  raw uuid as a chart axis label.
+- **`mixedCurrency: true`** means revenue was summed across currencies. Warn
+  rather than showing one total.
+
+## 3. Where the code goes
+
+### 3.1 API layer — `libs/api/src/lib/features/vessel/`
+
+Extend the existing slice; do not create a new one.
+`vessel-api.ts` already uses `baseApi.enhanceEndpoints({ addTagTypes: TAGS })`
+followed by `injectEndpoints` — add to it:
+
+```ts
+getVesselReport: builder.query<VesselReport, VesselReportQuery | void>({
+  query: (params) => ({ url: '/vessels/report', params: params ?? undefined }),
+  providesTags: () => [listTag('Vessel')],
+}),
+```
+
+Export `useGetVesselReportQuery` from the bottom of the file and re-export the
+new types through `vessel.types.ts` (already barrelled by `index.ts`).
+
+**The CSV export is not an RTK Query endpoint.** `fetchBaseQuery` parses
+responses as JSON and would mangle it. Follow the precedent in
+`libs/api/src/lib/base-api/download.ts`: `openAuthedDocument` fetches with the
+bearer token into a blob. Either reuse it or add a sibling
+`downloadAuthedFile(path, fallbackName)` next to it that forces the anchor
+download path rather than `window.open`. Note the backend sets
+`Content-Disposition`, `X-Total-Rows` and `X-Truncated`, and the API's CORS
+config exposes all three — read the filename from the header and fall back to a
+local default only if it is absent.
+
+### 3.2 The page — `apps/backoffice/src/app/features/vessel-registration/`
+
+Replace `pages/VesselRegistrationReportPage.tsx`. Split it rather than shipping
+one 600-line file; suggested layout, matching how `VesselRegistrationQueuePage`
+is already organised as a directory:
+
+```
+pages/VesselRegistrationReportPage/
+  index.tsx              // page shell: PageHeader, filter bar, layout, states
+  ReportFilters.tsx      // the filter bar
+  KpiTiles.tsx
+  ReportCharts.tsx
+  ReportTables.tsx
+  report-format.ts       // pure: em-dash formatting, cumulative→disjoint, palette
+  report-format.spec.ts  // vitest
+```
+
+Keep the route import path working (`../features/vessel-registration/pages/VesselRegistrationReportPage`
+resolves to the directory's `index.tsx`).
+
+### 3.3 Route + nav
+
+`apps/backoffice/src/app/router/index.tsx:98` — uncomment and guard it, matching
+line 95:
+
+```tsx
+{ path: 'vessel-registration-report', element: guard([P.VIEW_VESSEL_REGISTRY], <VesselRegistrationReportPage />) },
+```
+
+Then add the nav entry wherever `vessel-registration-queue` is listed in the
+sidebar config, gated on the same permission.
+
+## 4. What to render
+
+Use Mantine `Grid`/`SimpleGrid` for layout and `recharts` `<ResponsiveContainer>`
+for every chart. Recharts is installed but unused — you are setting the house
+style, so put shared axis/tooltip/colour setup in one place rather than
+repeating props per chart.
+
+### Filter bar (sticky, top)
+
+Date range (`@mantine/dates` `DatePickerInput type="range"`), granularity
+`SegmentedControl`, multi-selects for category / status / flag state / port /
+vessel type, a debounced search input, and the export button. Seed the
+multi-select options from the first response's `breakdowns` keys — no separate
+lookup endpoint exists. Mirror the filter state into the URL query string so a
+filtered dashboard is shareable, which is how the licence queue already behaves.
+
+### KPI tiles (row 1)
+
+| Tile | Fields |
+|---|---|
+| Registered vessels | `register.total`, with `registered / suspended / deregistered` beneath |
+| New in period | `register.registeredInPeriod`, delta chip from `register.changePct` |
+| Fleet tonnage | `fleet.totalGrossTonnage`, sub-text avg + `grossTonnageKnownFor` |
+| Average age | `fleet.avgAgeYears`, sub-text `ageKnownFor` |
+| Approval rate | `pipeline.approvalRatePct`, sub-text approved/rejected |
+| Processing time | `pipeline.medianProcessingDays` median, avg as sub-text |
+| Expiring soon | `certificates.expiringIn30`, sub-text 60/90 |
+| Fees collected | `revenue.paid` + currency, sub-text pending |
+
+### Charts (row 2+)
+
+| Chart | Data | Type |
+|---|---|---|
+| Registrations over time | `timeSeries.registrations` | area or bar, `count`; tonnage on a second axis |
+| Application throughput | `timeSeries.applications` | stacked bar — submitted vs approved vs rejected |
+| Fees over time | `timeSeries.revenue` | line |
+| Incidents over time | `timeSeries.incidents` | bar |
+| Register status mix | `breakdowns.byStatus` | donut |
+| Category split | `breakdowns.byCategory` | donut |
+| Tonnage bands | `breakdowns.byTonnageBand` | horizontal bar |
+| Age bands | `breakdowns.byAgeBand` | horizontal bar |
+| Top flag states | `breakdowns.byFlagState` | horizontal bar |
+| Top ports of registry | `breakdowns.byPortOfRegistry` | horizontal bar |
+| Vessel types | `breakdowns.byVesselType` | horizontal bar |
+| Application status funnel | `breakdowns.byApplicationStatus` | horizontal bar |
+| Officer workload | `breakdowns.byOfficer` | horizontal bar, ids resolved to names |
+| Incident severity | `breakdowns.byIncidentSeverity` | donut |
+
+`BreakdownItem` is already chart-shaped: `label` on the axis, `count` as the
+value, `percentage` in the tooltip. Do not recompute percentages.
+
+Every breakdown can be empty (`[]`) on a fresh register — render `<EmptyState />`
+from `@ema-platform/ui` inside the card, not an empty axis.
+
+### Tables (bottom)
+
+Use `AdvancedTable` from `@ema-platform/ui` (already exported from
+`libs/ui/src/index.ts`). All four tables are server-limited by `tableLimit`, so
+they are **not** paginated — do not wire pagination controls to them. Each gets
+a "view all" link to the corresponding existing screen where one exists
+(register, incident log, application queue).
+
+- **Expiring certificates** — the renewals worklist. Colour `daysToExpiry`:
+  red ≤ 7, orange ≤ 30, otherwise neutral. `0` means today, still live.
+- **Recent registrations** — link each row to the vessel detail screen.
+- **Recent incidents** — severity is free text and may be `null`.
+- **Pending applications** — sorted by `daysOpen` descending; link to the review
+  screen by `applicationNumber`.
+
+### States
+
+- Loading — `<PageLoader />`.
+- Error — `<ApiErrorAlert />`, and use `useErrorHandler` if that is the pattern
+  in neighbouring pages.
+- Empty register (`register.total === 0`) — `<EmptyState />` for the whole page,
+  explaining that no vessels are registered yet, rather than a grid of zeros.
+- `truncated === true` — a persistent `Alert color="yellow"` above the tiles.
+
+## 5. Rules
+
+1. **No new dependencies** without asking. Everything needed is installed.
+2. **Every user-visible string through i18next**, including chart axis labels,
+   tooltip text and band names. Note that band labels
+   (`"100–499 GT"`, `"30 years and older"`, `"Unknown"`) arrive from the API
+   already rendered — map them to translation keys rather than printing raw
+   English into an Amharic UI.
+3. **No client-side aggregation.** If a figure is not in the response, ask for
+   a backend change rather than deriving it in the browser. The one exception
+   is differencing the cumulative expiry buckets, which is presentational.
+4. **Do not touch `mock-base-query.ts`.** This endpoint is live.
+5. **Extract the pure bits** (formatters, cumulative→disjoint, colour
+   assignment) into `report-format.ts` and cover them with one vitest file. Do
+   not write component tests unless asked.
+6. **Dates** — `dayjs` is installed and used elsewhere. Backoffice dates render
+   in Gregorian; do not pull in the Ethiopic pickers unless neighbouring
+   backoffice pages already do.
+7. Match the file, import and naming conventions of
+   `features/vessel-registration/pages/VesselRegistrationQueuePage/` — it is the
+   nearest sibling and the closest thing to a template.
+
+## 6. Verifying
+
+1. `npx nx run backoffice:build` and the repo's lint task must pass.
+2. `npx nx test api` / the vitest task for whatever project holds
+   `report-format.spec.ts`.
+3. Run the backoffice against a local API, sign in as a user holding
+   `can:View:vessel-registry`, and open `/vessel-registration-report`:
+   - tiles match `GET /api/vessels/report` in the network tab;
+   - changing the date range refetches and redraws only the time series, while
+     `register.total` stays put;
+   - `granularity=DAY` produces one bucket per day, zeros included;
+   - the export button downloads a CSV whose row count equals
+     `kpis.register.total`.
+4. Sign in **without** the permission — the route must not resolve and the nav
+   entry must not appear.
+5. Point at a database with an empty vessel register and confirm the page shows
+   the empty state rather than zeros, `NaN`, or a crash.
diff --git a/libs/api/src/index.ts b/libs/api/src/index.ts
index 5eef5d064..f985f1f0a 100644
--- a/libs/api/src/index.ts
+++ b/libs/api/src/index.ts
@@ -5,4 +5,4 @@ export * from './lib/features/licensing';
 export * from './lib/features/seafarer';
 export * from './lib/features/vessel';
 export { baseQueryWithReauth, configureTokenRefresh } from './lib/base-api/base-query-with-reauth';
-export { openAuthedDocument } from './lib/base-api/download';
+export { openAuthedDocument, downloadAuthedFile } from './lib/base-api/download';
diff --git a/libs/api/src/lib/base-api/download.ts b/libs/api/src/lib/base-api/download.ts
index a910ac3a8..c984c523f 100644
--- a/libs/api/src/lib/base-api/download.ts
+++ b/libs/api/src/lib/base-api/download.ts
@@ -41,3 +41,57 @@ export async function openAuthedDocument(
   // Revoking immediately would race the new tab's load.
   setTimeout(() => URL.revokeObjectURL(url), 60_000);
 }
+
+/**
+ * Downloads an authenticated endpoint straight to a file.
+ *
+ * Same reason as `openAuthedDocument` for bypassing RTK Query — `fetchBaseQuery`
+ * would parse a CSV body as JSON — but a spreadsheet is something you save, not
+ * something the browser can display, so this always takes the anchor path.
+ *
+ * The server names the file via `Content-Disposition`, and the API's CORS
+ * config exposes that header along with `X-Total-Rows` and `X-Truncated`; those
+ * two are returned so a caller can say when an export was cut short instead of
+ * handing over a silently partial file.
+ */
+export async function downloadAuthedFile(
+  path: string,
+  fallbackName: string,
+): Promise<{ rowCount: number | null; truncated: boolean }> {
+  const token = resolveTokenFromStorage();
+  const response = await fetch(`${BASE_API_URL}${path}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  if (!response.ok) {
+    let message = `${response.status}`;
+    try {
+      const body = await response.json();
+      message = body?.message ?? message;
+    } catch {
+      /* non-JSON error body — the status is all we have */
+    }
+    throw new Error(message);
+  }
+
+  const blob = await response.blob();
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filenameFrom(response.headers) ?? fallbackName;
+  anchor.click();
+  setTimeout(() => URL.revokeObjectURL(url), 60_000);
+
+  const rows = response.headers.get('X-Total-Rows');
+  return {
+    rowCount: rows === null ? null : Number(rows),
+    truncated: response.headers.get('X-Truncated') === 'true',
+  };
+}
+
+/** `attachment; filename="vessel-register-2026-08-18.csv"` → the file name. */
+function filenameFrom(headers: Headers): string | null {
+  const disposition = headers.get('Content-Disposition');
+  if (!disposition) return null;
+  const match = /filename="?([^";]+)"?/.exec(disposition);
+  return match?.[1] ?? null;
+}
diff --git a/libs/api/src/lib/features/vessel/vessel-api.ts b/libs/api/src/lib/features/vessel/vessel-api.ts
index 52d3e58a7..d52991131 100644
--- a/libs/api/src/lib/features/vessel/vessel-api.ts
+++ b/libs/api/src/lib/features/vessel/vessel-api.ts
@@ -3,6 +3,8 @@ import type {
   CreateVesselIncident,
   Vessel,
   VesselIncident,
+  VesselReport,
+  VesselReportQuery,
   VesselStatus,
 } from './vessel.types';
 
@@ -35,6 +37,22 @@ export const vesselApi = baseApi
         providesTags: () => [listTag('Vessel')],
       }),
 
+      /**
+       * The whole backoffice dashboard in one call — KPIs, time series,
+       * breakdowns and worklists. Backoffice only (`can:View:vessel-registry`).
+       *
+       * Array filters are passed as arrays, not joined strings: the API accepts
+       * both the repeated and the comma-separated form, and `params` serialises
+       * the repeated one.
+       */
+      getVesselReport: builder.query<VesselReport, VesselReportQuery | void>({
+        query: (params) => ({
+          url: '/vessels/report',
+          params: params ?? undefined,
+        }),
+        providesTags: () => [listTag('Vessel')],
+      }),
+
       getVessel: builder.query<Vessel, string>({
         query: (id) => ({ url: `/vessels/${id}` }),
         providesTags: (_r, _e, id) => [{ type: 'Vessel', id }],
@@ -77,6 +95,7 @@ export const vesselApi = baseApi
 export const {
   useGetMyVesselsQuery,
   useGetVesselsQuery,
+  useGetVesselReportQuery,
   useGetVesselQuery,
   useUpdateVesselStatusMutation,
   useGetVesselIncidentsQuery,
diff --git a/libs/api/src/lib/features/vessel/vessel.types.ts b/libs/api/src/lib/features/vessel/vessel.types.ts
index 437a0acff..355e64b1f 100644
--- a/libs/api/src/lib/features/vessel/vessel.types.ts
+++ b/libs/api/src/lib/features/vessel/vessel.types.ts
@@ -49,3 +49,247 @@ export interface CreateVesselIncident {
   description: string;
   severity?: string;
 }
+
+// ---------------------------------------------------------------------------
+// Vessel registration report (GET /vessels/report)
+//
+// One call fills the whole backoffice dashboard. Unlike `Vessel` above, every
+// numeric field here is already a real number — the API casts the Postgres
+// `numeric` strings before it answers.
+
+export type ReportGranularity = 'DAY' | 'WEEK' | 'MONTH';
+
+/**
+ * One slice of a breakdown chart.
+ *
+ * `percentage` is of the whole, not of the slices that survived the `topN`
+ * cut, so a set of slices always totals 100.
+ */
+export interface BreakdownItem {
+  key: string;
+  label: string;
+  count: number;
+  percentage: number;
+}
+
+export interface VesselReportQuery {
+  /** Bounds the time series and the "in period" figures only. */
+  from?: string;
+  to?: string;
+  granularity?: ReportGranularity;
+  category?: VesselCategory[];
+  status?: VesselStatus[];
+  flagState?: string[];
+  portOfRegistry?: string[];
+  vesselType?: string[];
+  search?: string;
+  expiringWithinDays?: number;
+  /** Slices kept per high-cardinality chart; the tail collapses into "Other". */
+  topN?: number;
+  tableLimit?: number;
+}
+
+export interface RegisterKpis {
+  total: number;
+  registered: number;
+  suspended: number;
+  deregistered: number;
+  registeredInPeriod: number;
+  registeredInPreviousPeriod: number;
+  /** Null when there is no previous period to compare against. */
+  changePct: number | null;
+}
+
+export interface FleetKpis {
+  totalGrossTonnage: number;
+  avgGrossTonnage: number | null;
+  /** How many hulls the tonnage average actually covers. */
+  grossTonnageKnownFor: number;
+  totalPassengerCapacity: number;
+  avgLengthMeters: number | null;
+  avgAgeYears: number | null;
+  ageKnownFor: number;
+  seaGoing: number;
+  inlandWaterway: number;
+}
+
+export interface PipelineKpis {
+  total: number;
+  draft: number;
+  inProgress: number;
+  approved: number;
+  rejected: number;
+  issued: number;
+  submittedInPeriod: number;
+  decidedInPeriod: number;
+  newCount: number;
+  renewalCount: number;
+  /** Approved over settled. Null while nothing has been decided. */
+  approvalRatePct: number | null;
+  avgProcessingDays: number | null;
+  medianProcessingDays: number | null;
+  avgAdjustmentRounds: number | null;
+}
+
+export interface CertificateKpis {
+  total: number;
+  active: number;
+  expired: number;
+  suspended: number;
+  /** Cumulative: a certificate due in 11 days is inside all three. */
+  expiringIn30: number;
+  expiringIn60: number;
+  expiringIn90: number;
+  missingCertificate: number;
+}
+
+export interface IncidentKpis {
+  total: number;
+  inPeriod: number;
+  reportedByOfficer: number;
+  reportedByOwner: number;
+  vesselsWithIncidents: number;
+}
+
+export interface RevenueKpis {
+  currency: string;
+  /** True when more than one currency was summed — warn rather than total. */
+  mixedCurrency: boolean;
+  paid: number;
+  pending: number;
+  paidCount: number;
+  pendingCount: number;
+  failedCount: number;
+}
+
+/** Bucketed series. `bucket` is an ISO date; the window is zero-filled. */
+export interface RegistrationBucket {
+  bucket: string;
+  count: number;
+  grossTonnage: number;
+}
+
+export interface ApplicationBucket {
+  bucket: string;
+  submitted: number;
+  approved: number;
+  rejected: number;
+  issued: number;
+}
+
+export interface IncidentBucket {
+  bucket: string;
+  count: number;
+}
+
+export interface RevenueBucket {
+  bucket: string;
+  amount: number;
+  count: number;
+}
+
+export interface ExpiringCertificateRow {
+  vesselId: string;
+  registrationNumber: string;
+  name: string;
+  ownerName: string | null;
+  ownerUserId: string;
+  certificateNumber: string | null;
+  expiryDate: string;
+  certificateStatus: string | null;
+  /** 0 means it expires today, which still counts as live. */
+  daysToExpiry: number;
+}
+
+export interface RecentRegistrationRow {
+  vesselId: string;
+  registrationNumber: string;
+  name: string;
+  category: VesselCategory;
+  vesselType: string | null;
+  flagState: string | null;
+  grossTonnage: number | null;
+  ownerName: string | null;
+  status: VesselStatus;
+  registeredAt: string;
+}
+
+export interface RecentIncidentRow {
+  id: string;
+  vesselId: string;
+  registrationNumber: string;
+  vesselName: string;
+  occurredAt: string;
+  severity: string | null;
+  location: string | null;
+  description: string;
+  reportedByOfficer: boolean;
+}
+
+export interface PendingApplicationRow {
+  applicationNumber: string;
+  status: string;
+  kind: 'NEW' | 'RENEWAL';
+  assignedOfficerId: string | null;
+  submittedAt: string | null;
+  adjustmentRound: number;
+  daysOpen: number;
+}
+
+export interface VesselReport {
+  generatedAt: string;
+  /** True when the register passed the API's scan cap — figures are partial. */
+  truncated: boolean;
+  filters: {
+    from: string;
+    to: string;
+    granularity: ReportGranularity;
+    expiringWithinDays: number;
+    topN: number;
+    tableLimit: number;
+    category: VesselCategory[] | null;
+    status: VesselStatus[] | null;
+    flagState: string[] | null;
+    portOfRegistry: string[] | null;
+    vesselType: string[] | null;
+    search: string | null;
+  };
+  kpis: {
+    register: RegisterKpis;
+    fleet: FleetKpis;
+    pipeline: PipelineKpis;
+    certificates: CertificateKpis;
+    incidents: IncidentKpis;
+    revenue: RevenueKpis;
+  };
+  timeSeries: {
+    registrations: RegistrationBucket[];
+    applications: ApplicationBucket[];
+    incidents: IncidentBucket[];
+    revenue: RevenueBucket[];
+  };
+  breakdowns: {
+    byStatus: BreakdownItem[];
+    byCategory: BreakdownItem[];
+    byFlagState: BreakdownItem[];
+    byPortOfRegistry: BreakdownItem[];
+    byVesselType: BreakdownItem[];
+    byHullMaterial: BreakdownItem[];
+    byEngineType: BreakdownItem[];
+    byTonnageBand: BreakdownItem[];
+    byLengthBand: BreakdownItem[];
+    byAgeBand: BreakdownItem[];
+    byBuildDecade: BreakdownItem[];
+    byApplicationStatus: BreakdownItem[];
+    byApplicationKind: BreakdownItem[];
+    /** `key` is an IAM user uuid, or the literal "UNASSIGNED". */
+    byOfficer: BreakdownItem[];
+    byIncidentSeverity: BreakdownItem[];
+  };
+  tables: {
+    expiringCertificates: ExpiringCertificateRow[];
+    recentRegistrations: RecentRegistrationRow[];
+    recentIncidents: RecentIncidentRow[];
+    pendingApplications: PendingApplicationRow[];
+  };
+}

From eb0b1b7d8024bb3b9cc609ba675e9b184e1e27dc Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:59:46 +0300
Subject: [PATCH 25/58] fixes

---
 apps/backoffice/vite.config.mts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/backoffice/vite.config.mts b/apps/backoffice/vite.config.mts
index 331bc27fd..e2e307530 100644
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -9,10 +9,19 @@ export default defineConfig({
   // its built-in default.
   envDir: '../../',
   cacheDir: '../../node_modules/.vite/apps/backoffice',
+  // server: {
+  //   port: 4201,
+  //   host: 'localhost',
+  // },
   server: {
-    port: 4201,
-    host: 'localhost',
+  port: 4201,
+  proxy: {
+    '/api': {
+      target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
+      changeOrigin: true,
+    },
   },
+},
   preview: { port: 4201, host: 'localhost' },
   plugins: [react(), nxViteTsPaths()],
   resolve: {

From 02b9c73caf7df29c9af526cf806be226fdb0360d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 09:34:44 +0000
Subject: [PATCH 26/58] mock data for test

---
 .../VesselRegistrationReportPage/index.tsx    |   9 +-
 .../mock-report.ts                            | 257 ++++++++++++++++++
 2 files changed, 263 insertions(+), 3 deletions(-)
 create mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts

diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
index e41c9b3fd..6ff318039 100644
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
@@ -19,6 +19,7 @@ import { KpiTiles } from './KpiTiles';
 import { ReportCharts } from './ReportCharts';
 import { ReportFilters } from './ReportFilters';
 import { ReportTables } from './ReportTables';
+import { MOCK_VESSEL_REPORT } from './mock-report';
 import { queryToSearchParams, searchParamsToQuery } from './report-format';
 
 /**
@@ -51,9 +52,11 @@ export function VesselRegistrationReportPage() {
     [setSearchParams],
   );
 
-  const { data: report, isLoading, isFetching, error } = useGetVesselReportQuery(
-    query,
-  );
+  const { data, isLoading, isFetching, error } = useGetVesselReportQuery(query);
+
+  // Dev-only stand-in so the dashboard can be reviewed before the endpoint is
+  // live. Production still shows the empty state and the error alert.
+  const report = data ?? (import.meta.env.DEV ? MOCK_VESSEL_REPORT : undefined);
 
   const exportCsv = useCallback(async () => {
     setExporting(true);
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts
new file mode 100644
index 000000000..72ebea83d
--- /dev/null
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts
@@ -0,0 +1,257 @@
+import type { BreakdownItem, VesselReport } from '@ema-platform/api';
+
+/**
+ * A stand-in report for previewing the dashboard before `GET /vessels/report`
+ * is live. Only used in dev, and only when the real call gives nothing back.
+ *
+ * ponytail: hand-written fixture, delete once the endpoint answers.
+ */
+
+const MONTHS = [
+  '2025-09-01', '2025-10-01', '2025-11-01', '2025-12-01',
+  '2026-01-01', '2026-02-01', '2026-03-01', '2026-04-01',
+  '2026-05-01', '2026-06-01', '2026-07-01', '2026-08-01',
+];
+
+/** Turns `[label, count]` pairs into slices whose percentages total 100. */
+function breakdown(pairs: [string, number][]): BreakdownItem[] {
+  const total = pairs.reduce((sum, [, count]) => sum + count, 0) || 1;
+  return pairs.map(([label, count]) => ({
+    key: label.toUpperCase().replace(/[^A-Z0-9]+/g, '_'),
+    label,
+    count,
+    percentage: Math.round((count / total) * 1000) / 10,
+  }));
+}
+
+const REGISTRATIONS = [18, 24, 21, 30, 27, 33, 29, 38, 35, 41, 37, 26];
+const SUBMITTED = [26, 31, 28, 39, 34, 42, 37, 47, 44, 51, 46, 33];
+
+export const MOCK_VESSEL_REPORT: VesselReport = {
+  generatedAt: '2026-08-18T09:15:00.000Z',
+  truncated: false,
+  filters: {
+    from: '2025-09-01',
+    to: '2026-08-18',
+    granularity: 'MONTH',
+    expiringWithinDays: 90,
+    topN: 8,
+    tableLimit: 10,
+    category: null,
+    status: null,
+    flagState: null,
+    portOfRegistry: null,
+    vesselType: null,
+    search: null,
+  },
+  kpis: {
+    register: {
+      total: 1284,
+      registered: 1096,
+      suspended: 87,
+      deregistered: 101,
+      registeredInPeriod: 359,
+      registeredInPreviousPeriod: 302,
+      changePct: 18.9,
+    },
+    fleet: {
+      totalGrossTonnage: 486_320,
+      avgGrossTonnage: 412.7,
+      grossTonnageKnownFor: 1178,
+      totalPassengerCapacity: 39_450,
+      avgLengthMeters: 28.4,
+      avgAgeYears: 16.2,
+      ageKnownFor: 1141,
+      seaGoing: 512,
+      inlandWaterway: 772,
+    },
+    pipeline: {
+      total: 642,
+      draft: 48,
+      inProgress: 113,
+      approved: 351,
+      rejected: 62,
+      issued: 337,
+      submittedInPeriod: 458,
+      decidedInPeriod: 396,
+      newCount: 421,
+      renewalCount: 221,
+      approvalRatePct: 85,
+      avgProcessingDays: 11.4,
+      medianProcessingDays: 9,
+      avgAdjustmentRounds: 1.3,
+    },
+    certificates: {
+      total: 1096,
+      active: 934,
+      expired: 118,
+      suspended: 44,
+      expiringIn30: 37,
+      expiringIn60: 71,
+      expiringIn90: 112,
+      missingCertificate: 23,
+    },
+    incidents: {
+      total: 96,
+      inPeriod: 41,
+      reportedByOfficer: 58,
+      reportedByOwner: 38,
+      vesselsWithIncidents: 74,
+    },
+    revenue: {
+      currency: 'ETB',
+      mixedCurrency: false,
+      paid: 4_812_500,
+      pending: 638_000,
+      paidCount: 389,
+      pendingCount: 54,
+      failedCount: 12,
+    },
+  },
+  timeSeries: {
+    registrations: MONTHS.map((bucket, i) => ({
+      bucket,
+      count: REGISTRATIONS[i],
+      grossTonnage: REGISTRATIONS[i] * 380 + i * 260,
+    })),
+    applications: MONTHS.map((bucket, i) => ({
+      bucket,
+      submitted: SUBMITTED[i],
+      approved: Math.round(SUBMITTED[i] * 0.72),
+      rejected: Math.round(SUBMITTED[i] * 0.11),
+      issued: Math.round(SUBMITTED[i] * 0.68),
+    })),
+    incidents: MONTHS.map((bucket, i) => ({
+      bucket,
+      count: [4, 6, 3, 9, 5, 7, 4, 11, 8, 6, 9, 5][i],
+    })),
+    revenue: MONTHS.map((bucket, i) => ({
+      bucket,
+      amount: 280_000 + REGISTRATIONS[i] * 9_400,
+      count: SUBMITTED[i],
+    })),
+  },
+  breakdowns: {
+    byStatus: breakdown([
+      ['Registered', 1096],
+      ['Suspended', 87],
+      ['Deregistered', 101],
+    ]),
+    byCategory: breakdown([
+      ['Inland waterway', 772],
+      ['Sea-going', 512],
+    ]),
+    byFlagState: breakdown([
+      ['Ethiopia', 918], ['Djibouti', 142], ['Panama', 88], ['Liberia', 54],
+      ['Marshall Islands', 37], ['Malta', 21], ['Other', 24],
+    ]),
+    byPortOfRegistry: breakdown([
+      ['Bahir Dar', 286], ['Djibouti', 241], ['Gambella', 198],
+      ['Hawassa', 176], ['Arba Minch', 154], ['Tana Kirkos', 121],
+      ['Other', 108],
+    ]),
+    byVesselType: breakdown([
+      ['Passenger ferry', 341], ['Cargo', 289], ['Fishing', 214],
+      ['Tug', 132], ['Barge', 118], ['Tanker', 76], ['Research', 41],
+      ['Other', 73],
+    ]),
+    byHullMaterial: breakdown([
+      ['Steel', 612], ['Aluminium', 288], ['Fibreglass', 241],
+      ['Wood', 108], ['Composite', 35],
+    ]),
+    byEngineType: breakdown([
+      ['Diesel', 874], ['Outboard petrol', 246], ['Electric', 87],
+      ['Hybrid', 44], ['Sail / none', 33],
+    ]),
+    byTonnageBand: breakdown([
+      ['< 50 GT', 402], ['50-199 GT', 348], ['200-499 GT', 241],
+      ['500-999 GT', 152], ['1000+ GT', 141],
+    ]),
+    byLengthBand: breakdown([
+      ['< 12 m', 318], ['12-24 m', 421], ['24-50 m', 336],
+      ['50-100 m', 148], ['100 m+', 61],
+    ]),
+    byAgeBand: breakdown([
+      ['0-5 yrs', 214], ['6-10 yrs', 287], ['11-20 yrs', 396],
+      ['21-30 yrs', 241], ['30+ yrs', 146],
+    ]),
+    byBuildDecade: breakdown([
+      ['1980s', 96], ['1990s', 187], ['2000s', 341],
+      ['2010s', 452], ['2020s', 208],
+    ]),
+    byApplicationStatus: breakdown([
+      ['Issued', 337], ['Approved', 14], ['Under review', 113],
+      ['Draft', 48], ['Rejected', 62], ['Correction required', 68],
+    ]),
+    byApplicationKind: breakdown([
+      ['New', 421],
+      ['Renewal', 221],
+    ]),
+    byOfficer: [
+      { key: '5f1c1b8e-0001-4a11-9c31-0a1b2c3d4e01', label: 'Selam Bekele', count: 148, percentage: 23.1 },
+      { key: '5f1c1b8e-0002-4a11-9c31-0a1b2c3d4e02', label: 'Dawit Tesfaye', count: 132, percentage: 20.6 },
+      { key: '5f1c1b8e-0003-4a11-9c31-0a1b2c3d4e03', label: 'Hanna Girma', count: 117, percentage: 18.2 },
+      { key: '5f1c1b8e-0004-4a11-9c31-0a1b2c3d4e04', label: 'Yonas Alemu', count: 94, percentage: 14.6 },
+      { key: '5f1c1b8e-0005-4a11-9c31-0a1b2c3d4e05', label: 'Meron Assefa', count: 78, percentage: 12.1 },
+      { key: 'UNASSIGNED', label: 'Unassigned', count: 73, percentage: 11.4 },
+    ],
+    byIncidentSeverity: breakdown([
+      ['Minor', 51], ['Moderate', 28], ['Major', 13], ['Critical', 4],
+    ]),
+  },
+  tables: {
+    expiringCertificates: [
+      { registrationNumber: 'ET-VR-004182', name: 'Abay Star', ownerName: 'Blue Nile Transport PLC', certificateNumber: 'CERT-2023-004182', expiryDate: '2026-08-24', daysToExpiry: 6 },
+      { registrationNumber: 'ET-VR-003907', name: 'Tana Pearl', ownerName: 'Lake Tana Ferries', certificateNumber: 'CERT-2023-003907', expiryDate: '2026-09-02', daysToExpiry: 15 },
+      { registrationNumber: 'ET-VR-004411', name: 'Gambella Express', ownerName: 'Baro River Logistics', certificateNumber: 'CERT-2023-004411', expiryDate: '2026-09-11', daysToExpiry: 24 },
+      { registrationNumber: 'ET-VR-003655', name: 'Awash Carrier', ownerName: 'Awash Marine Services', certificateNumber: 'CERT-2023-003655', expiryDate: '2026-09-19', daysToExpiry: 32 },
+      { registrationNumber: 'ET-VR-004098', name: 'Rift Valley II', ownerName: 'Hawassa Boat Union', certificateNumber: 'CERT-2023-004098', expiryDate: '2026-10-04', daysToExpiry: 47 },
+      { registrationNumber: 'ET-VR-004320', name: 'Omo Trader', ownerName: 'Omo Cargo Co.', certificateNumber: 'CERT-2023-004320', expiryDate: '2026-10-18', daysToExpiry: 61 },
+      { registrationNumber: 'ET-VR-003812', name: 'Zeway Runner', ownerName: 'Zeway Fisheries', certificateNumber: 'CERT-2023-003812', expiryDate: '2026-11-01', daysToExpiry: 75 },
+      { registrationNumber: 'ET-VR-004501', name: 'Djibouti Link', ownerName: 'Horn Shipping Ltd', certificateNumber: 'CERT-2023-004501', expiryDate: '2026-11-13', daysToExpiry: 87 },
+    ].map((row, i) => ({
+      ...row,
+      vesselId: `9a0e0000-0000-4000-8000-0000000${1000 + i}`,
+      ownerUserId: `7b1f0000-0000-4000-8000-0000000${2000 + i}`,
+      certificateStatus: 'ACTIVE',
+    })),
+    recentRegistrations: ([
+      { registrationNumber: 'ET-VR-004612', name: 'Blue Horizon', category: 'SEA_GOING', vesselType: 'Cargo', flagState: 'Ethiopia', grossTonnage: 1840, ownerName: 'Horn Shipping Ltd', status: 'REGISTERED', registeredAt: '2026-08-16T08:20:00.000Z' },
+      { registrationNumber: 'ET-VR-004611', name: 'Tana Breeze', category: 'INLAND_WATERWAY', vesselType: 'Passenger ferry', flagState: 'Ethiopia', grossTonnage: 96, ownerName: 'Lake Tana Ferries', status: 'REGISTERED', registeredAt: '2026-08-15T13:05:00.000Z' },
+      { registrationNumber: 'ET-VR-004610', name: 'Baro Voyager', category: 'INLAND_WATERWAY', vesselType: 'Barge', flagState: 'Ethiopia', grossTonnage: 240, ownerName: 'Baro River Logistics', status: 'REGISTERED', registeredAt: '2026-08-14T10:41:00.000Z' },
+      { registrationNumber: 'ET-VR-004609', name: 'Red Sea Falcon', category: 'SEA_GOING', vesselType: 'Tanker', flagState: 'Djibouti', grossTonnage: 3210, ownerName: 'Horn Shipping Ltd', status: 'SUSPENDED', registeredAt: '2026-08-12T15:32:00.000Z' },
+      { registrationNumber: 'ET-VR-004608', name: 'Hawassa Queen', category: 'INLAND_WATERWAY', vesselType: 'Passenger ferry', flagState: 'Ethiopia', grossTonnage: 74, ownerName: 'Hawassa Boat Union', status: 'REGISTERED', registeredAt: '2026-08-11T09:12:00.000Z' },
+      { registrationNumber: 'ET-VR-004607', name: 'Omo Spirit', category: 'INLAND_WATERWAY', vesselType: 'Fishing', flagState: 'Ethiopia', grossTonnage: 32, ownerName: 'Omo Cargo Co.', status: 'REGISTERED', registeredAt: '2026-08-09T07:55:00.000Z' },
+      { registrationNumber: 'ET-VR-004606', name: 'Awash Pioneer', category: 'SEA_GOING', vesselType: 'Cargo', flagState: 'Panama', grossTonnage: 2105, ownerName: 'Awash Marine Services', status: 'REGISTERED', registeredAt: '2026-08-07T11:26:00.000Z' },
+      { registrationNumber: 'ET-VR-004605', name: 'Gibe Runner', category: 'INLAND_WATERWAY', vesselType: 'Tug', flagState: 'Ethiopia', grossTonnage: 118, ownerName: 'Gibe Marine PLC', status: 'DEREGISTERED', registeredAt: '2026-08-04T14:03:00.000Z' },
+    ] as const).map((row, i) => ({
+      ...row,
+      vesselId: `9a0e0000-0000-4000-8000-0000000${3000 + i}`,
+    })),
+    recentIncidents: [
+      { registrationNumber: 'ET-VR-004182', vesselName: 'Abay Star', occurredAt: '2026-08-15T06:40:00.000Z', severity: 'Moderate', location: 'Lake Tana, near Gorgora', description: 'Engine room flooding after a seal failure; vessel towed to port under escort.', reportedByOfficer: true },
+      { registrationNumber: 'ET-VR-004609', vesselName: 'Red Sea Falcon', occurredAt: '2026-08-10T18:12:00.000Z', severity: 'Major', location: 'Gulf of Tadjoura', description: 'Collision with a moored barge during night manoeuvring. Hull plating breached above the waterline.', reportedByOfficer: true },
+      { registrationNumber: 'ET-VR-003907', vesselName: 'Tana Pearl', occurredAt: '2026-08-06T12:30:00.000Z', severity: 'Minor', location: 'Bahir Dar jetty', description: 'Passenger slipped on a wet gangway; treated on shore, no hospitalisation.', reportedByOfficer: false },
+      { registrationNumber: 'ET-VR-004411', vesselName: 'Gambella Express', occurredAt: '2026-07-29T09:05:00.000Z', severity: 'Moderate', location: 'Baro River, km 42', description: 'Grounded on a sandbar for six hours at low water. No pollution reported.', reportedByOfficer: false },
+      { registrationNumber: 'ET-VR-004098', vesselName: 'Rift Valley II', occurredAt: '2026-07-21T16:48:00.000Z', severity: 'Critical', location: 'Lake Hawassa, south shore', description: 'Fire in the galley spread to the passenger deck; 3 injured, vessel out of service.', reportedByOfficer: true },
+      { registrationNumber: 'ET-VR-004320', vesselName: 'Omo Trader', occurredAt: '2026-07-14T05:15:00.000Z', severity: 'Minor', location: 'Omo River delta', description: 'Steering hydraulics lost pressure; repaired at berth the same day.', reportedByOfficer: false },
+    ].map((row, i) => ({
+      ...row,
+      id: `1c2d0000-0000-4000-8000-0000000${4000 + i}`,
+      vesselId: `9a0e0000-0000-4000-8000-0000000${1000 + i}`,
+    })),
+    pendingApplications: ([
+      { applicationNumber: 'VR-2026-000841', status: 'UNDER_REVIEW', kind: 'NEW', submittedAt: '2026-08-01T08:00:00.000Z', adjustmentRound: 0, daysOpen: 17 },
+      { applicationNumber: 'VR-2026-000836', status: 'CORRECTION_REQUIRED', kind: 'RENEWAL', submittedAt: '2026-07-28T10:22:00.000Z', adjustmentRound: 2, daysOpen: 21 },
+      { applicationNumber: 'VR-2026-000829', status: 'UNDER_REVIEW', kind: 'NEW', submittedAt: '2026-07-24T09:14:00.000Z', adjustmentRound: 1, daysOpen: 25 },
+      { applicationNumber: 'VR-2026-000818', status: 'RESUBMITTED', kind: 'NEW', submittedAt: '2026-07-19T13:40:00.000Z', adjustmentRound: 1, daysOpen: 30 },
+      { applicationNumber: 'VR-2026-000804', status: 'UNDER_REVIEW', kind: 'RENEWAL', submittedAt: '2026-07-11T07:52:00.000Z', adjustmentRound: 0, daysOpen: 38 },
+      { applicationNumber: 'VR-2026-000791', status: 'CORRECTION_REQUIRED', kind: 'NEW', submittedAt: '2026-07-02T15:31:00.000Z', adjustmentRound: 3, daysOpen: 47 },
+      { applicationNumber: 'VR-2026-000783', status: 'SUBMITTED', kind: 'RENEWAL', submittedAt: '2026-06-26T11:09:00.000Z', adjustmentRound: 0, daysOpen: 53 },
+    ] as const).map((row, i) => ({
+      ...row,
+      assignedOfficerId:
+        i % 3 === 2 ? null : `5f1c1b8e-000${(i % 5) + 1}-4a11-9c31-0a1b2c3d4e0${(i % 5) + 1}`,
+    })),
+  },
+};

From 7e19ce9cc91ea80c75c33dc9e42c40ccdbea042d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 09:38:54 +0000
Subject: [PATCH 27/58] Revert "mock data for test"

This reverts commit 02b9c73caf7df29c9af526cf806be226fdb0360d.
---
 .../VesselRegistrationReportPage/index.tsx    |   9 +-
 .../mock-report.ts                            | 257 ------------------
 2 files changed, 3 insertions(+), 263 deletions(-)
 delete mode 100644 apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts

diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
index 6ff318039..e41c9b3fd 100644
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/index.tsx
@@ -19,7 +19,6 @@ import { KpiTiles } from './KpiTiles';
 import { ReportCharts } from './ReportCharts';
 import { ReportFilters } from './ReportFilters';
 import { ReportTables } from './ReportTables';
-import { MOCK_VESSEL_REPORT } from './mock-report';
 import { queryToSearchParams, searchParamsToQuery } from './report-format';
 
 /**
@@ -52,11 +51,9 @@ export function VesselRegistrationReportPage() {
     [setSearchParams],
   );
 
-  const { data, isLoading, isFetching, error } = useGetVesselReportQuery(query);
-
-  // Dev-only stand-in so the dashboard can be reviewed before the endpoint is
-  // live. Production still shows the empty state and the error alert.
-  const report = data ?? (import.meta.env.DEV ? MOCK_VESSEL_REPORT : undefined);
+  const { data: report, isLoading, isFetching, error } = useGetVesselReportQuery(
+    query,
+  );
 
   const exportCsv = useCallback(async () => {
     setExporting(true);
diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts
deleted file mode 100644
index 72ebea83d..000000000
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReportPage/mock-report.ts
+++ /dev/null
@@ -1,257 +0,0 @@
-import type { BreakdownItem, VesselReport } from '@ema-platform/api';
-
-/**
- * A stand-in report for previewing the dashboard before `GET /vessels/report`
- * is live. Only used in dev, and only when the real call gives nothing back.
- *
- * ponytail: hand-written fixture, delete once the endpoint answers.
- */
-
-const MONTHS = [
-  '2025-09-01', '2025-10-01', '2025-11-01', '2025-12-01',
-  '2026-01-01', '2026-02-01', '2026-03-01', '2026-04-01',
-  '2026-05-01', '2026-06-01', '2026-07-01', '2026-08-01',
-];
-
-/** Turns `[label, count]` pairs into slices whose percentages total 100. */
-function breakdown(pairs: [string, number][]): BreakdownItem[] {
-  const total = pairs.reduce((sum, [, count]) => sum + count, 0) || 1;
-  return pairs.map(([label, count]) => ({
-    key: label.toUpperCase().replace(/[^A-Z0-9]+/g, '_'),
-    label,
-    count,
-    percentage: Math.round((count / total) * 1000) / 10,
-  }));
-}
-
-const REGISTRATIONS = [18, 24, 21, 30, 27, 33, 29, 38, 35, 41, 37, 26];
-const SUBMITTED = [26, 31, 28, 39, 34, 42, 37, 47, 44, 51, 46, 33];
-
-export const MOCK_VESSEL_REPORT: VesselReport = {
-  generatedAt: '2026-08-18T09:15:00.000Z',
-  truncated: false,
-  filters: {
-    from: '2025-09-01',
-    to: '2026-08-18',
-    granularity: 'MONTH',
-    expiringWithinDays: 90,
-    topN: 8,
-    tableLimit: 10,
-    category: null,
-    status: null,
-    flagState: null,
-    portOfRegistry: null,
-    vesselType: null,
-    search: null,
-  },
-  kpis: {
-    register: {
-      total: 1284,
-      registered: 1096,
-      suspended: 87,
-      deregistered: 101,
-      registeredInPeriod: 359,
-      registeredInPreviousPeriod: 302,
-      changePct: 18.9,
-    },
-    fleet: {
-      totalGrossTonnage: 486_320,
-      avgGrossTonnage: 412.7,
-      grossTonnageKnownFor: 1178,
-      totalPassengerCapacity: 39_450,
-      avgLengthMeters: 28.4,
-      avgAgeYears: 16.2,
-      ageKnownFor: 1141,
-      seaGoing: 512,
-      inlandWaterway: 772,
-    },
-    pipeline: {
-      total: 642,
-      draft: 48,
-      inProgress: 113,
-      approved: 351,
-      rejected: 62,
-      issued: 337,
-      submittedInPeriod: 458,
-      decidedInPeriod: 396,
-      newCount: 421,
-      renewalCount: 221,
-      approvalRatePct: 85,
-      avgProcessingDays: 11.4,
-      medianProcessingDays: 9,
-      avgAdjustmentRounds: 1.3,
-    },
-    certificates: {
-      total: 1096,
-      active: 934,
-      expired: 118,
-      suspended: 44,
-      expiringIn30: 37,
-      expiringIn60: 71,
-      expiringIn90: 112,
-      missingCertificate: 23,
-    },
-    incidents: {
-      total: 96,
-      inPeriod: 41,
-      reportedByOfficer: 58,
-      reportedByOwner: 38,
-      vesselsWithIncidents: 74,
-    },
-    revenue: {
-      currency: 'ETB',
-      mixedCurrency: false,
-      paid: 4_812_500,
-      pending: 638_000,
-      paidCount: 389,
-      pendingCount: 54,
-      failedCount: 12,
-    },
-  },
-  timeSeries: {
-    registrations: MONTHS.map((bucket, i) => ({
-      bucket,
-      count: REGISTRATIONS[i],
-      grossTonnage: REGISTRATIONS[i] * 380 + i * 260,
-    })),
-    applications: MONTHS.map((bucket, i) => ({
-      bucket,
-      submitted: SUBMITTED[i],
-      approved: Math.round(SUBMITTED[i] * 0.72),
-      rejected: Math.round(SUBMITTED[i] * 0.11),
-      issued: Math.round(SUBMITTED[i] * 0.68),
-    })),
-    incidents: MONTHS.map((bucket, i) => ({
-      bucket,
-      count: [4, 6, 3, 9, 5, 7, 4, 11, 8, 6, 9, 5][i],
-    })),
-    revenue: MONTHS.map((bucket, i) => ({
-      bucket,
-      amount: 280_000 + REGISTRATIONS[i] * 9_400,
-      count: SUBMITTED[i],
-    })),
-  },
-  breakdowns: {
-    byStatus: breakdown([
-      ['Registered', 1096],
-      ['Suspended', 87],
-      ['Deregistered', 101],
-    ]),
-    byCategory: breakdown([
-      ['Inland waterway', 772],
-      ['Sea-going', 512],
-    ]),
-    byFlagState: breakdown([
-      ['Ethiopia', 918], ['Djibouti', 142], ['Panama', 88], ['Liberia', 54],
-      ['Marshall Islands', 37], ['Malta', 21], ['Other', 24],
-    ]),
-    byPortOfRegistry: breakdown([
-      ['Bahir Dar', 286], ['Djibouti', 241], ['Gambella', 198],
-      ['Hawassa', 176], ['Arba Minch', 154], ['Tana Kirkos', 121],
-      ['Other', 108],
-    ]),
-    byVesselType: breakdown([
-      ['Passenger ferry', 341], ['Cargo', 289], ['Fishing', 214],
-      ['Tug', 132], ['Barge', 118], ['Tanker', 76], ['Research', 41],
-      ['Other', 73],
-    ]),
-    byHullMaterial: breakdown([
-      ['Steel', 612], ['Aluminium', 288], ['Fibreglass', 241],
-      ['Wood', 108], ['Composite', 35],
-    ]),
-    byEngineType: breakdown([
-      ['Diesel', 874], ['Outboard petrol', 246], ['Electric', 87],
-      ['Hybrid', 44], ['Sail / none', 33],
-    ]),
-    byTonnageBand: breakdown([
-      ['< 50 GT', 402], ['50-199 GT', 348], ['200-499 GT', 241],
-      ['500-999 GT', 152], ['1000+ GT', 141],
-    ]),
-    byLengthBand: breakdown([
-      ['< 12 m', 318], ['12-24 m', 421], ['24-50 m', 336],
-      ['50-100 m', 148], ['100 m+', 61],
-    ]),
-    byAgeBand: breakdown([
-      ['0-5 yrs', 214], ['6-10 yrs', 287], ['11-20 yrs', 396],
-      ['21-30 yrs', 241], ['30+ yrs', 146],
-    ]),
-    byBuildDecade: breakdown([
-      ['1980s', 96], ['1990s', 187], ['2000s', 341],
-      ['2010s', 452], ['2020s', 208],
-    ]),
-    byApplicationStatus: breakdown([
-      ['Issued', 337], ['Approved', 14], ['Under review', 113],
-      ['Draft', 48], ['Rejected', 62], ['Correction required', 68],
-    ]),
-    byApplicationKind: breakdown([
-      ['New', 421],
-      ['Renewal', 221],
-    ]),
-    byOfficer: [
-      { key: '5f1c1b8e-0001-4a11-9c31-0a1b2c3d4e01', label: 'Selam Bekele', count: 148, percentage: 23.1 },
-      { key: '5f1c1b8e-0002-4a11-9c31-0a1b2c3d4e02', label: 'Dawit Tesfaye', count: 132, percentage: 20.6 },
-      { key: '5f1c1b8e-0003-4a11-9c31-0a1b2c3d4e03', label: 'Hanna Girma', count: 117, percentage: 18.2 },
-      { key: '5f1c1b8e-0004-4a11-9c31-0a1b2c3d4e04', label: 'Yonas Alemu', count: 94, percentage: 14.6 },
-      { key: '5f1c1b8e-0005-4a11-9c31-0a1b2c3d4e05', label: 'Meron Assefa', count: 78, percentage: 12.1 },
-      { key: 'UNASSIGNED', label: 'Unassigned', count: 73, percentage: 11.4 },
-    ],
-    byIncidentSeverity: breakdown([
-      ['Minor', 51], ['Moderate', 28], ['Major', 13], ['Critical', 4],
-    ]),
-  },
-  tables: {
-    expiringCertificates: [
-      { registrationNumber: 'ET-VR-004182', name: 'Abay Star', ownerName: 'Blue Nile Transport PLC', certificateNumber: 'CERT-2023-004182', expiryDate: '2026-08-24', daysToExpiry: 6 },
-      { registrationNumber: 'ET-VR-003907', name: 'Tana Pearl', ownerName: 'Lake Tana Ferries', certificateNumber: 'CERT-2023-003907', expiryDate: '2026-09-02', daysToExpiry: 15 },
-      { registrationNumber: 'ET-VR-004411', name: 'Gambella Express', ownerName: 'Baro River Logistics', certificateNumber: 'CERT-2023-004411', expiryDate: '2026-09-11', daysToExpiry: 24 },
-      { registrationNumber: 'ET-VR-003655', name: 'Awash Carrier', ownerName: 'Awash Marine Services', certificateNumber: 'CERT-2023-003655', expiryDate: '2026-09-19', daysToExpiry: 32 },
-      { registrationNumber: 'ET-VR-004098', name: 'Rift Valley II', ownerName: 'Hawassa Boat Union', certificateNumber: 'CERT-2023-004098', expiryDate: '2026-10-04', daysToExpiry: 47 },
-      { registrationNumber: 'ET-VR-004320', name: 'Omo Trader', ownerName: 'Omo Cargo Co.', certificateNumber: 'CERT-2023-004320', expiryDate: '2026-10-18', daysToExpiry: 61 },
-      { registrationNumber: 'ET-VR-003812', name: 'Zeway Runner', ownerName: 'Zeway Fisheries', certificateNumber: 'CERT-2023-003812', expiryDate: '2026-11-01', daysToExpiry: 75 },
-      { registrationNumber: 'ET-VR-004501', name: 'Djibouti Link', ownerName: 'Horn Shipping Ltd', certificateNumber: 'CERT-2023-004501', expiryDate: '2026-11-13', daysToExpiry: 87 },
-    ].map((row, i) => ({
-      ...row,
-      vesselId: `9a0e0000-0000-4000-8000-0000000${1000 + i}`,
-      ownerUserId: `7b1f0000-0000-4000-8000-0000000${2000 + i}`,
-      certificateStatus: 'ACTIVE',
-    })),
-    recentRegistrations: ([
-      { registrationNumber: 'ET-VR-004612', name: 'Blue Horizon', category: 'SEA_GOING', vesselType: 'Cargo', flagState: 'Ethiopia', grossTonnage: 1840, ownerName: 'Horn Shipping Ltd', status: 'REGISTERED', registeredAt: '2026-08-16T08:20:00.000Z' },
-      { registrationNumber: 'ET-VR-004611', name: 'Tana Breeze', category: 'INLAND_WATERWAY', vesselType: 'Passenger ferry', flagState: 'Ethiopia', grossTonnage: 96, ownerName: 'Lake Tana Ferries', status: 'REGISTERED', registeredAt: '2026-08-15T13:05:00.000Z' },
-      { registrationNumber: 'ET-VR-004610', name: 'Baro Voyager', category: 'INLAND_WATERWAY', vesselType: 'Barge', flagState: 'Ethiopia', grossTonnage: 240, ownerName: 'Baro River Logistics', status: 'REGISTERED', registeredAt: '2026-08-14T10:41:00.000Z' },
-      { registrationNumber: 'ET-VR-004609', name: 'Red Sea Falcon', category: 'SEA_GOING', vesselType: 'Tanker', flagState: 'Djibouti', grossTonnage: 3210, ownerName: 'Horn Shipping Ltd', status: 'SUSPENDED', registeredAt: '2026-08-12T15:32:00.000Z' },
-      { registrationNumber: 'ET-VR-004608', name: 'Hawassa Queen', category: 'INLAND_WATERWAY', vesselType: 'Passenger ferry', flagState: 'Ethiopia', grossTonnage: 74, ownerName: 'Hawassa Boat Union', status: 'REGISTERED', registeredAt: '2026-08-11T09:12:00.000Z' },
-      { registrationNumber: 'ET-VR-004607', name: 'Omo Spirit', category: 'INLAND_WATERWAY', vesselType: 'Fishing', flagState: 'Ethiopia', grossTonnage: 32, ownerName: 'Omo Cargo Co.', status: 'REGISTERED', registeredAt: '2026-08-09T07:55:00.000Z' },
-      { registrationNumber: 'ET-VR-004606', name: 'Awash Pioneer', category: 'SEA_GOING', vesselType: 'Cargo', flagState: 'Panama', grossTonnage: 2105, ownerName: 'Awash Marine Services', status: 'REGISTERED', registeredAt: '2026-08-07T11:26:00.000Z' },
-      { registrationNumber: 'ET-VR-004605', name: 'Gibe Runner', category: 'INLAND_WATERWAY', vesselType: 'Tug', flagState: 'Ethiopia', grossTonnage: 118, ownerName: 'Gibe Marine PLC', status: 'DEREGISTERED', registeredAt: '2026-08-04T14:03:00.000Z' },
-    ] as const).map((row, i) => ({
-      ...row,
-      vesselId: `9a0e0000-0000-4000-8000-0000000${3000 + i}`,
-    })),
-    recentIncidents: [
-      { registrationNumber: 'ET-VR-004182', vesselName: 'Abay Star', occurredAt: '2026-08-15T06:40:00.000Z', severity: 'Moderate', location: 'Lake Tana, near Gorgora', description: 'Engine room flooding after a seal failure; vessel towed to port under escort.', reportedByOfficer: true },
-      { registrationNumber: 'ET-VR-004609', vesselName: 'Red Sea Falcon', occurredAt: '2026-08-10T18:12:00.000Z', severity: 'Major', location: 'Gulf of Tadjoura', description: 'Collision with a moored barge during night manoeuvring. Hull plating breached above the waterline.', reportedByOfficer: true },
-      { registrationNumber: 'ET-VR-003907', vesselName: 'Tana Pearl', occurredAt: '2026-08-06T12:30:00.000Z', severity: 'Minor', location: 'Bahir Dar jetty', description: 'Passenger slipped on a wet gangway; treated on shore, no hospitalisation.', reportedByOfficer: false },
-      { registrationNumber: 'ET-VR-004411', vesselName: 'Gambella Express', occurredAt: '2026-07-29T09:05:00.000Z', severity: 'Moderate', location: 'Baro River, km 42', description: 'Grounded on a sandbar for six hours at low water. No pollution reported.', reportedByOfficer: false },
-      { registrationNumber: 'ET-VR-004098', vesselName: 'Rift Valley II', occurredAt: '2026-07-21T16:48:00.000Z', severity: 'Critical', location: 'Lake Hawassa, south shore', description: 'Fire in the galley spread to the passenger deck; 3 injured, vessel out of service.', reportedByOfficer: true },
-      { registrationNumber: 'ET-VR-004320', vesselName: 'Omo Trader', occurredAt: '2026-07-14T05:15:00.000Z', severity: 'Minor', location: 'Omo River delta', description: 'Steering hydraulics lost pressure; repaired at berth the same day.', reportedByOfficer: false },
-    ].map((row, i) => ({
-      ...row,
-      id: `1c2d0000-0000-4000-8000-0000000${4000 + i}`,
-      vesselId: `9a0e0000-0000-4000-8000-0000000${1000 + i}`,
-    })),
-    pendingApplications: ([
-      { applicationNumber: 'VR-2026-000841', status: 'UNDER_REVIEW', kind: 'NEW', submittedAt: '2026-08-01T08:00:00.000Z', adjustmentRound: 0, daysOpen: 17 },
-      { applicationNumber: 'VR-2026-000836', status: 'CORRECTION_REQUIRED', kind: 'RENEWAL', submittedAt: '2026-07-28T10:22:00.000Z', adjustmentRound: 2, daysOpen: 21 },
-      { applicationNumber: 'VR-2026-000829', status: 'UNDER_REVIEW', kind: 'NEW', submittedAt: '2026-07-24T09:14:00.000Z', adjustmentRound: 1, daysOpen: 25 },
-      { applicationNumber: 'VR-2026-000818', status: 'RESUBMITTED', kind: 'NEW', submittedAt: '2026-07-19T13:40:00.000Z', adjustmentRound: 1, daysOpen: 30 },
-      { applicationNumber: 'VR-2026-000804', status: 'UNDER_REVIEW', kind: 'RENEWAL', submittedAt: '2026-07-11T07:52:00.000Z', adjustmentRound: 0, daysOpen: 38 },
-      { applicationNumber: 'VR-2026-000791', status: 'CORRECTION_REQUIRED', kind: 'NEW', submittedAt: '2026-07-02T15:31:00.000Z', adjustmentRound: 3, daysOpen: 47 },
-      { applicationNumber: 'VR-2026-000783', status: 'SUBMITTED', kind: 'RENEWAL', submittedAt: '2026-06-26T11:09:00.000Z', adjustmentRound: 0, daysOpen: 53 },
-    ] as const).map((row, i) => ({
-      ...row,
-      assignedOfficerId:
-        i % 3 === 2 ? null : `5f1c1b8e-000${(i % 5) + 1}-4a11-9c31-0a1b2c3d4e0${(i % 5) + 1}`,
-    })),
-  },
-};

From 2d91092a6bdaf6c8c9f665779446eb5181f70cd8 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 09:54:13 +0000
Subject: [PATCH 28/58] refactor: remove VesselRegistrationHeadDashboardPage
 and associated navigation links

---
 .../VesselRegistrationHeadDashboardPage.tsx   | 21 -------------------
 apps/backoffice/src/app/i18n/locales/am.ts    |  1 -
 apps/backoffice/src/app/i18n/locales/en.ts    |  1 -
 apps/backoffice/src/app/layouts/nav-config.ts |  5 ++---
 apps/backoffice/src/app/router/index.tsx      |  2 --
 5 files changed, 2 insertions(+), 28 deletions(-)
 delete mode 100644 apps/backoffice/src/app/features/vessel-registration-head/pages/VesselRegistrationHeadDashboardPage.tsx

diff --git a/apps/backoffice/src/app/features/vessel-registration-head/pages/VesselRegistrationHeadDashboardPage.tsx b/apps/backoffice/src/app/features/vessel-registration-head/pages/VesselRegistrationHeadDashboardPage.tsx
deleted file mode 100644
index 262a4f83e..000000000
--- a/apps/backoffice/src/app/features/vessel-registration-head/pages/VesselRegistrationHeadDashboardPage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
-
-/**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered hardcoded sample records, which were
- * indistinguishable from real ones.
- */
-export function VesselRegistrationHeadDashboardPage() {
-  return (
-    <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title="Vessel registration overview"
-        description="Vessel registration is not connected to the backend yet, so there are no figures to report."
-      />
-    </Container>
-  );
-}
-
-export default VesselRegistrationHeadDashboardPage;
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 1c2b6a983..dd548ed09 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -60,7 +60,6 @@ export const am: Translations = {
     soon: "በቅርቡ",
     details: "ዝርዝር",
     licenceReview: "የፈቃድ ማመልከቻዎች",
-    vesselRegistrationHeadDashboard: "የመርከብ ምዝገባ ኃላፊ ዳሽቦርድ",
     vesselRegistrationApplicationQueue: "የመርከብ ምዝገባ ወረፋ",
     vesselRegistrationQueue: "የመርከብ መዝገብ",
     vesselFormBuilder: "የመርከብ ቅጽ መገንቢያ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index dbf47267b..a1d860169 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -64,7 +64,6 @@ export const en = {
     userManagement: 'User Management',
     seamanBookQueue: 'Seaman Book Queue',
     btcQueue: 'BTC Queue',
-    vesselRegistrationHeadDashboard: 'Vessel Registration Head Dashboard',
     vesselRegistrationApplicationQueue: 'Vessel Registration Queue',
     vesselRegistrationQueue: 'Vessel Register',
     vesselFormBuilder: 'Vessel Form Builder',
diff --git a/apps/backoffice/src/app/layouts/nav-config.ts b/apps/backoffice/src/app/layouts/nav-config.ts
index 45bc03990..dde60a2d4 100644
--- a/apps/backoffice/src/app/layouts/nav-config.ts
+++ b/apps/backoffice/src/app/layouts/nav-config.ts
@@ -114,12 +114,11 @@ export const NAV_SECTIONS: NavSection[] = [
   {
     label: 'nav.groupVessels',
     items: [
-      { to: '/licence-review/type/VESSEL_REGISTRATION', label: 'nav.vesselRegistrationApplicationQueue', icon: IconAnchor, permissions: APPLICATION_QUEUE },
+      { to: '/vessel-registration-report', label: 'nav.vesselRegistrationReport', icon: IconChartBar, permissions: [P.VIEW_VESSEL_REGISTRY] },
       { to: '/vessel-registration-queue', label: 'nav.vesselRegistrationQueue', icon: IconAnchor, permissions: [P.VIEW_VESSEL_REGISTRY] },
+      { to: '/licence-review/type/VESSEL_REGISTRATION', label: 'nav.vesselRegistrationApplicationQueue', icon: IconAnchor, permissions: APPLICATION_QUEUE },
       { to: '/licence-review/type/VESSEL_OWNERSHIP_TRANSFER', label: 'nav.ownershipTransferQueue', icon: IconArrowsExchange, permissions: APPLICATION_QUEUE },
       { to: '/vessel-registration-queue/new', label: 'nav.vesselFormBuilder', icon: IconFilePlus, soon: true, permissions: [P.VIEW_VESSEL_REGISTRY] },
-      { to: '/vessel-registration-report', label: 'nav.vesselRegistrationReport', icon: IconChartBar, permissions: [P.VIEW_VESSEL_REGISTRY] },
-      { to: '/vessel-registration-head-dashboard', label: 'nav.vesselRegistrationHeadDashboard', icon: IconGauge, soon: true, permissions: [P.VIEW_VESSEL_REGISTRY] },
     ],
   },
   {
diff --git a/apps/backoffice/src/app/router/index.tsx b/apps/backoffice/src/app/router/index.tsx
index 5e6ae8894..bfc6b926b 100644
--- a/apps/backoffice/src/app/router/index.tsx
+++ b/apps/backoffice/src/app/router/index.tsx
@@ -35,7 +35,6 @@ import { VesselRegistrationQueuePage } from '../features/vessel-registration/pag
 import { VesselRegistrationReviewPage } from '../features/vessel-registration/pages/VesselRegistrationReviewPage';
 import { VesselRegistrationReportPage } from '../features/vessel-registration/pages/VesselRegistrationReportPage';
 import { VesselRegistrationFormBuilderPage } from '../features/vessel-registration/pages/VesselRegistrationFormBuilderPage';
-import { VesselRegistrationHeadDashboardPage } from '../features/vessel-registration-head/pages/VesselRegistrationHeadDashboardPage';
 import { LicenseQueuePage } from '../features/license-review/pages/LicenseQueuePage';
 import { LicenseRegisterPage } from '../features/license-register/pages/LicenseRegisterPage';
 import { LicenseReviewPage } from '../features/license-review/pages/LicenseReviewPage';
@@ -71,7 +70,6 @@ const router = createBrowserRouter([
         element: <BackofficeLayout />,
         children: [
           { path: 'dashboard', element: <DashboardPage /> },
-          { path: 'vessel-registration-head-dashboard', element: guard([P.VIEW_VESSEL_REGISTRY], <VesselRegistrationHeadDashboardPage />) },
           { path: 'logistics-head-dashboard', element: guard(APPLICATION_QUEUE, <LogisticsHeadDashboardPage />) },
           { path: 'profile', element: <ProfilePage /> },
           { path: 'configuration', element: guard([P.VIEW_LICENSE_TYPES, P.VIEW_TEMPLATES], <ConfigurationPage />) },

From de0dcbfbe8996541b9798978ea537070ef0d5232 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 10:07:22 +0000
Subject: [PATCH 29/58] feat: add workflow profiles to restrict status
 filtering and sync queue counts by license type

---
 .../pages/LicenseQueuePage/index.tsx          | 76 ++++++++++++++++++-
 .../lib/features/licensing/licensing-api.ts   |  7 +-
 .../lib/features/licensing/licensing.types.ts |  8 ++
 3 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx
index 3013686e6..6ff6d7a2e 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/index.tsx
@@ -43,6 +43,7 @@ import {
   useLazyExportApplicationsQuery,
   type LicenseApplication,
   type LicenseStatus,
+  type LicenseType,
   type QueueFilter,
 } from "@ema-platform/api";
 import {
@@ -72,6 +73,17 @@ import { licenseQueueActionsColumn } from "./actions";
 const PAGE_SIZE = 10;
 const SEARCH_DEBOUNCE_MS = 300;
 
+/**
+ * Statuses only the STANDARD course can reach. A registration goes straight
+ * review → approval, so offering these in its facet would be offering filters
+ * that can only ever match nothing.
+ */
+const STANDARD_ONLY_STATUSES: LicenseStatus[] = [
+  "UNDER_EVALUATION",
+  "INSPECTION_PENDING",
+  "INSPECTION_COMPLETED",
+];
+
 const ALL_STATUSES: LicenseStatus[] = [
   "SUBMITTED",
   "UNDER_REVIEW",
@@ -89,6 +101,24 @@ const ALL_STATUSES: LicenseStatus[] = [
   "REJECTED",
 ];
 
+/** Statuses an application of this type can actually occupy. */
+function statusesFor(type: LicenseType | undefined): LicenseStatus[] {
+  if (!type) return ALL_STATUSES;
+  return ALL_STATUSES.filter((status) => {
+    if (
+      type.workflowProfile === "REGISTRATION" &&
+      STANDARD_ONLY_STATUSES.includes(status)
+    ) {
+      return false;
+    }
+    if (status === "INSPECTION_PENDING" || status === "INSPECTION_COMPLETED") {
+      return type.inspectionRequired;
+    }
+    if (status === "CERTIFICATE_ISSUED") return type.issuesCertificate;
+    return true;
+  });
+}
+
 /**
  * The officer work pool.
  *
@@ -123,14 +153,37 @@ export function LicenseQueuePage() {
   const activeView = SAVED_VIEWS.find((v) => v.id === view) ?? SAVED_VIEWS[0];
 
   const { data: licenseTypes } = useGetLicenseTypesQuery();
-  const { data: counts } = useGetQueueCountsQuery();
-
   // A `/licence-review/type/:typeCode` deep link pins the type facet.
   const pinnedTypeId = useMemo(() => {
     if (!typeCode) return undefined;
     return licenseTypes?.items?.find((type) => type.key === typeCode)?.id;
   }, [typeCode, licenseTypes]);
 
+  // Counts endpoint keys off `key`, the facet off `id` — resolve whichever the
+  // route or the dropdown set, so the tab badges always count the same rows
+  // the grid is showing rather than system-wide totals.
+  const countsKey = useMemo(
+    () =>
+      typeCode ??
+      licenseTypes?.items?.find((type) => type.id === urlFilter.licenseTypeId)
+        ?.key,
+    [typeCode, urlFilter.licenseTypeId, licenseTypes],
+  );
+  const { data: counts } = useGetQueueCountsQuery(countsKey);
+
+  const selectedType = useMemo(() => {
+    const typeId = pinnedTypeId ?? urlFilter.licenseTypeId;
+    if (!typeId) return undefined;
+    return licenseTypes?.items?.find((type) => type.id === typeId);
+  }, [pinnedTypeId, urlFilter.licenseTypeId, licenseTypes]);
+
+  // The facet offers what the chosen type can actually reach. With no type
+  // chosen the queue spans every course, so the full list is correct.
+  const statusOptions = useMemo(
+    () => statusesFor(selectedType),
+    [selectedType],
+  );
+
   const filter: QueueFilter = useMemo(
     () => ({
       ...activeView.filter,
@@ -234,6 +287,21 @@ export function LicenseQueuePage() {
     updateUrl(next, view, 1);
   };
 
+  /**
+   * Switching type drops any selected status the new type cannot reach —
+   * otherwise the facet keeps an invisible filter that matches nothing and the
+   * grid looks empty for no reason the officer can see.
+   */
+  const changeType = (typeId: string | undefined) => {
+    const allowed = statusesFor(
+      licenseTypes?.items?.find((type) => type.id === typeId),
+    );
+    setFacet({
+      licenseTypeId: typeId,
+      status: urlFilter.status?.filter((s) => allowed.includes(s)),
+    });
+  };
+
   const toggleSort = (field: NonNullable<QueueFilter["sortBy"]>) => {
     const dir =
       urlFilter.sortBy === field && urlFilter.sortDir !== "DESC"
@@ -448,7 +516,7 @@ export function LicenseQueuePage() {
           <MultiSelect
             label={t("queue.status", "Status")}
             placeholder={t("queue.anyStatus", "Any")}
-            data={ALL_STATUSES.map((s) => ({
+            data={statusOptions.map((s) => ({
               value: s,
               label: t(`queue.statusValues.${s}`, STATUS_LABELS[s]),
             }))}
@@ -466,7 +534,7 @@ export function LicenseQueuePage() {
                 label: localized(type.name, i18n.language) || type.key,
               }))}
               value={urlFilter.licenseTypeId ?? null}
-              onChange={(v) => setFacet({ licenseTypeId: v ?? undefined })}
+              onChange={(v) => changeType(v ?? undefined)}
               clearable
               w={220}
             />
diff --git a/libs/api/src/lib/features/licensing/licensing-api.ts b/libs/api/src/lib/features/licensing/licensing-api.ts
index 3a0b2148d..bbe665292 100644
--- a/libs/api/src/lib/features/licensing/licensing-api.ts
+++ b/libs/api/src/lib/features/licensing/licensing-api.ts
@@ -398,8 +398,11 @@ export const licensingApi = baseApi
        * claim or a decision refreshes the badges along with the list and the
        * numbers can never drift from what the grid is showing.
        */
-      getQueueCounts: builder.query<QueueCounts, void>({
-        query: () => ({ url: '/license-application-review/counts' }),
+      getQueueCounts: builder.query<QueueCounts, string | void>({
+        query: (licenseTypeKey) => ({
+          url: '/license-application-review/counts',
+          params: licenseTypeKey ? { licenseTypeKey } : undefined,
+        }),
         providesTags: () => [listTag('ApplicationQueue')],
       }),
 
diff --git a/libs/api/src/lib/features/licensing/licensing.types.ts b/libs/api/src/lib/features/licensing/licensing.types.ts
index 306ba17aa..e15d0a11f 100644
--- a/libs/api/src/lib/features/licensing/licensing.types.ts
+++ b/libs/api/src/lib/features/licensing/licensing.types.ts
@@ -141,6 +141,11 @@ export interface LicenseType {
    */
   requiresOperatorMode: boolean;
   formSchema: { sections: FormSectionConfig[] };
+  /**
+   * Which course an application of this type runs. REGISTRATION skips the
+   * evaluation and inspection stages, so those statuses are unreachable for it.
+   */
+  workflowProfile?: WorkflowProfile;
   isActive: boolean;
   /** Display order set by EMA; lower comes first. */
   sortOrder: number;
@@ -382,6 +387,9 @@ export type QueueSortField =
   | "dueAt"
   | "claimedAt";
 
+/** Review → evaluation → (inspection) → approval, or the short registration course. */
+export type WorkflowProfile = "STANDARD" | "REGISTRATION";
+
 /** Row counts behind the queue's saved-view tabs. */
 export interface QueueCounts {
   unassigned: number;

From 5897e7344213f0ac46cf839a27e411774abf97fd Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 10:37:57 +0000
Subject: [PATCH 30/58] feat: add status filtering and display to medical and
 sea service verification queues

---
 .../pages/MedicalVerificationPage/actions.tsx | 80 ++++++++++---------
 .../pages/MedicalVerificationPage/columns.tsx | 25 ++++++
 .../pages/MedicalVerificationPage/index.tsx   | 48 +++++++++--
 .../src/lib/features/seafarer/seafarer-api.ts | 21 ++++-
 .../lib/features/seafarer/seafarer.types.ts   |  3 +
 5 files changed, 132 insertions(+), 45 deletions(-)

diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/actions.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/actions.tsx
index 6c1ce955a..59f9045a8 100644
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/actions.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/actions.tsx
@@ -33,24 +33,28 @@ export function medicalActionsColumn(
           anyOf={[LICENSE_PERMISSIONS.VERIFY_SEAFARER_RECORDS]}
           hideOnly
         >
-          <Button
-            size="compact-xs"
-            color="teal"
-            leftSection={<IconCheck size={14} />}
-            loading={handlers.ruling}
-            onClick={() => handlers.onVerify(row.original)}
-          >
-            {t('recordVerification.verify', 'Verify')}
-          </Button>
-          <Button
-            size="compact-xs"
-            color="red"
-            variant="light"
-            leftSection={<IconX size={14} />}
-            onClick={() => handlers.onReject(row.original)}
-          >
-            {t('recordVerification.reject', 'Reject')}
-          </Button>
+          {row.original.status === 'SUBMITTED' && (
+            <>
+              <Button
+                size="compact-xs"
+                color="teal"
+                leftSection={<IconCheck size={14} />}
+                loading={handlers.ruling}
+                onClick={() => handlers.onVerify(row.original)}
+              >
+                {t('recordVerification.verify', 'Verify')}
+              </Button>
+              <Button
+                size="compact-xs"
+                color="red"
+                variant="light"
+                leftSection={<IconX size={14} />}
+                onClick={() => handlers.onReject(row.original)}
+              >
+                {t('recordVerification.reject', 'Reject')}
+              </Button>
+            </>
+          )}
         </RequirePermission>
       </Group>
     ),
@@ -85,24 +89,28 @@ export function seaServiceActionsColumn(
           anyOf={[LICENSE_PERMISSIONS.VERIFY_SEAFARER_RECORDS]}
           hideOnly
         >
-          <Button
-            size="compact-xs"
-            color="teal"
-            leftSection={<IconCheck size={14} />}
-            loading={handlers.ruling}
-            onClick={() => handlers.onVerify(row.original)}
-          >
-            {t('recordVerification.verify', 'Verify')}
-          </Button>
-          <Button
-            size="compact-xs"
-            color="red"
-            variant="light"
-            leftSection={<IconX size={14} />}
-            onClick={() => handlers.onReject(row.original)}
-          >
-            {t('recordVerification.reject', 'Reject')}
-          </Button>
+          {row.original.status === 'SUBMITTED' && (
+            <>
+              <Button
+                size="compact-xs"
+                color="teal"
+                leftSection={<IconCheck size={14} />}
+                loading={handlers.ruling}
+                onClick={() => handlers.onVerify(row.original)}
+              >
+                {t('recordVerification.verify', 'Verify')}
+              </Button>
+              <Button
+                size="compact-xs"
+                color="red"
+                variant="light"
+                leftSection={<IconX size={14} />}
+                onClick={() => handlers.onReject(row.original)}
+              >
+                {t('recordVerification.reject', 'Reject')}
+              </Button>
+            </>
+          )}
         </RequirePermission>
       </Group>
     ),
diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/columns.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/columns.tsx
index 9712b6719..d76514579 100644
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/columns.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/columns.tsx
@@ -5,6 +5,7 @@ import type {
   MedicalCertificate,
   SeaServiceRecord,
   SeafarerProfileSummary,
+  SeafarerRecordStatus,
 } from '@ema-platform/api';
 
 export function ownerName(profile?: SeafarerProfileSummary): string {
@@ -16,6 +17,28 @@ export function ownerName(profile?: SeafarerProfileSummary): string {
   );
 }
 
+const STATUS_COLOR: Record<SeafarerRecordStatus, string> = {
+  SUBMITTED: 'yellow',
+  VERIFIED: 'teal',
+  REJECTED: 'red',
+};
+
+/** Only meaningful now the queue can show ruled records too. */
+function statusColumn<T extends { status: SeafarerRecordStatus }>(
+  t: TFunction,
+): AdvancedColumn<T> {
+  return {
+    header: t('recordVerification.columns.status', 'Status'),
+    label: t('recordVerification.columns.status', 'Status'),
+    accessorKey: 'status',
+    cell: ({ row }) => (
+      <Badge size="sm" variant="light" color={STATUS_COLOR[row.original.status]}>
+        {t(`recordVerification.status.${row.original.status}`, row.original.status)}
+      </Badge>
+    ),
+  };
+}
+
 export function medicalColumns(
   t: TFunction,
   showDate: (date: string) => string,
@@ -72,6 +95,7 @@ export function medicalColumns(
         </Badge>
       ),
     },
+    statusColumn<MedicalCertificate>(t),
   ];
 }
 
@@ -127,5 +151,6 @@ export function seaServiceColumns(
         </Text>
       ),
     },
+    statusColumn<SeaServiceRecord>(t),
   ];
 }
diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
index 018208283..28cc3e63d 100644
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
@@ -9,6 +9,7 @@ import {
   Loader,
   Modal,
   Paper,
+  SegmentedControl,
   Stack,
   Tabs,
   Text,
@@ -32,7 +33,11 @@ import {
   useVerifyMedicalCertificateMutation,
   useVerifySeaServiceRecordMutation,
 } from '@ema-platform/api';
-import type { MedicalCertificate, SeaServiceRecord } from '@ema-platform/api';
+import type {
+  MedicalCertificate,
+  RecordQueueFilter,
+  SeaServiceRecord,
+} from '@ema-platform/api';
 import { medicalColumns, seaServiceColumns, ownerName } from './columns';
 import { medicalActionsColumn, seaServiceActionsColumn } from './actions';
 
@@ -180,19 +185,20 @@ function AttachmentsModal({
  */
 export function MedicalVerificationPage() {
   const { t } = useTranslation();
+  const [filter, setFilter] = useState<RecordQueueFilter>('SUBMITTED');
   const {
     data: pendingMedical,
     isLoading: loadingMedical,
     isFetching: fetchingMedical,
     refetch: refetchMedical,
-  } = useGetPendingMedicalQuery();
+  } = useGetPendingMedicalQuery(filter);
 
   const {
     data: pendingSeaService,
     isLoading: loadingSeaService,
     isFetching: fetchingSeaService,
     refetch: refetchSeaService,
-  } = useGetPendingSeaServiceQuery();
+  } = useGetPendingSeaServiceQuery(filter);
 
   const [verifyMedical, { isLoading: rulingMedical }] =
     useVerifyMedicalCertificateMutation();
@@ -251,6 +257,12 @@ export function MedicalVerificationPage() {
     return pendingSeaServiceList.slice(start, start + seaServicePageSize);
   }, [pendingSeaServiceList, seaServicePage, seaServicePageSize]);
 
+  const changeFilter = useCallback((value: string) => {
+    setFilter(value as RecordQueueFilter);
+    setMedicalPage(0);
+    setSeaServicePage(0);
+  }, []);
+
   const handleMedicalPageSizeChange = useCallback((size: number) => {
     setMedicalPageSize(size);
     setMedicalPage(0);
@@ -261,6 +273,11 @@ export function MedicalVerificationPage() {
     setSeaServicePage(0);
   }, []);
 
+  const emptyText =
+    filter === 'SUBMITTED'
+      ? t('recordVerification.emptyText', 'Nothing awaiting verification.')
+      : t('recordVerification.emptyTextFiltered', 'No records match this filter.');
+
   const medicalTableColumns: AdvancedColumn<MedicalCertificate>[] = useMemo(
     () => [
       ...medicalColumns(t, showDate),
@@ -331,6 +348,27 @@ export function MedicalVerificationPage() {
         )}
       </Text>
 
+      <SegmentedControl
+        mb="md"
+        value={filter}
+        onChange={changeFilter}
+        data={[
+          {
+            value: 'SUBMITTED',
+            label: t('recordVerification.filter.pending', 'Pending'),
+          },
+          {
+            value: 'VERIFIED',
+            label: t('recordVerification.filter.verified', 'Accepted'),
+          },
+          {
+            value: 'REJECTED',
+            label: t('recordVerification.filter.rejected', 'Rejected'),
+          },
+          { value: 'ALL', label: t('recordVerification.filter.all', 'All') },
+        ]}
+      />
+
       <Tabs defaultValue="medical" keepMounted={false}>
         <Tabs.List>
           <Tabs.Tab value="medical" leftSection={<IconStethoscope size={16} />}>
@@ -362,7 +400,7 @@ export function MedicalVerificationPage() {
             onPageSizeChange={handleMedicalPageSizeChange}
             refresh={refetchMedical}
             isLoading={loadingMedical || fetchingMedical}
-            emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
+            emptyText={emptyText}
           />
         </Tabs.Panel>
 
@@ -381,7 +419,7 @@ export function MedicalVerificationPage() {
             onPageSizeChange={handleSeaServicePageSizeChange}
             refresh={refetchSeaService}
             isLoading={loadingSeaService || fetchingSeaService}
-            emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
+            emptyText={emptyText}
           />
         </Tabs.Panel>
       </Tabs>
diff --git a/libs/api/src/lib/features/seafarer/seafarer-api.ts b/libs/api/src/lib/features/seafarer/seafarer-api.ts
index 98c2a8bc9..23c1e5f0f 100644
--- a/libs/api/src/lib/features/seafarer/seafarer-api.ts
+++ b/libs/api/src/lib/features/seafarer/seafarer-api.ts
@@ -3,6 +3,7 @@ import type {
   CreateMedicalCertificate,
   CreateSeaServiceRecord,
   MedicalCertificate,
+  RecordQueueFilter,
   SeaServiceRecord,
   SeaTimeSummary,
   SeafarerStatus,
@@ -104,13 +105,25 @@ export const seafarerApi = baseApi
       }),
 
       // -------------------------------------------------------- verification
-      getPendingSeaService: builder.query<SeaServiceRecord[], void>({
-        query: () => ({ url: '/sea-service-records/pending' }),
+      getPendingSeaService: builder.query<
+        SeaServiceRecord[],
+        RecordQueueFilter | void
+      >({
+        query: (status) => ({
+          url: '/sea-service-records/pending',
+          params: { status: status || 'SUBMITTED' },
+        }),
         providesTags: () => [listTag('SeaServiceRecord')],
       }),
 
-      getPendingMedical: builder.query<MedicalCertificate[], void>({
-        query: () => ({ url: '/medical-certificates/pending' }),
+      getPendingMedical: builder.query<
+        MedicalCertificate[],
+        RecordQueueFilter | void
+      >({
+        query: (status) => ({
+          url: '/medical-certificates/pending',
+          params: { status: status || 'SUBMITTED' },
+        }),
         providesTags: () => [listTag('MedicalCertificate')],
       }),
 
diff --git a/libs/api/src/lib/features/seafarer/seafarer.types.ts b/libs/api/src/lib/features/seafarer/seafarer.types.ts
index 140159fab..a53706efe 100644
--- a/libs/api/src/lib/features/seafarer/seafarer.types.ts
+++ b/libs/api/src/lib/features/seafarer/seafarer.types.ts
@@ -1,4 +1,7 @@
 export type SeafarerRecordStatus = 'SUBMITTED' | 'VERIFIED' | 'REJECTED';
+
+/** Verification-queue filter: a record status, or ALL for no filter. */
+export type RecordQueueFilter = SeafarerRecordStatus | 'ALL';
 export type MedicalFitness = 'FIT' | 'FIT_WITH_RESTRICTIONS' | 'UNFIT';
 export type SeafarerDepartment = 'DECK' | 'ENGINE' | 'CATERING';
 export type SeafarerStatus = 'ACTIVE' | 'INACTIVE' | 'PENDING' | 'SUSPENDED';

From cb19928bdec2a9a6d8d1f5029c39e766ce942cfa Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 10:41:44 +0000
Subject: [PATCH 31/58] UI fixes

---
 .../pages/MedicalVerificationPage/index.tsx   | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
index 28cc3e63d..039c7a350 100644
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
@@ -273,6 +273,29 @@ export function MedicalVerificationPage() {
     setSeaServicePage(0);
   }, []);
 
+  const statusFilter = (
+    <SegmentedControl
+      mb="md"
+      value={filter}
+      onChange={changeFilter}
+      data={[
+        {
+          value: 'SUBMITTED',
+          label: t('recordVerification.filter.pending', 'Pending'),
+        },
+        {
+          value: 'VERIFIED',
+          label: t('recordVerification.filter.verified', 'Accepted'),
+        },
+        {
+          value: 'REJECTED',
+          label: t('recordVerification.filter.rejected', 'Rejected'),
+        },
+        { value: 'ALL', label: t('recordVerification.filter.all', 'All') },
+      ]}
+    />
+  );
+
   const emptyText =
     filter === 'SUBMITTED'
       ? t('recordVerification.emptyText', 'Nothing awaiting verification.')
@@ -348,27 +371,6 @@ export function MedicalVerificationPage() {
         )}
       </Text>
 
-      <SegmentedControl
-        mb="md"
-        value={filter}
-        onChange={changeFilter}
-        data={[
-          {
-            value: 'SUBMITTED',
-            label: t('recordVerification.filter.pending', 'Pending'),
-          },
-          {
-            value: 'VERIFIED',
-            label: t('recordVerification.filter.verified', 'Accepted'),
-          },
-          {
-            value: 'REJECTED',
-            label: t('recordVerification.filter.rejected', 'Rejected'),
-          },
-          { value: 'ALL', label: t('recordVerification.filter.all', 'All') },
-        ]}
-      />
-
       <Tabs defaultValue="medical" keepMounted={false}>
         <Tabs.List>
           <Tabs.Tab value="medical" leftSection={<IconStethoscope size={16} />}>
@@ -386,6 +388,7 @@ export function MedicalVerificationPage() {
         </Tabs.List>
 
         <Tabs.Panel value="medical" pt="md">
+          {statusFilter}
           <AdvancedTable
             columns={medicalTableColumns}
             data={pagedMedical}
@@ -405,6 +408,7 @@ export function MedicalVerificationPage() {
         </Tabs.Panel>
 
         <Tabs.Panel value="sea-service" pt="md">
+          {statusFilter}
           <AdvancedTable
             columns={seaServiceTableColumns}
             data={pagedSeaService}

From 007c0e3d7175c46aca116043e2e2b8c3d25c619a Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Tue, 18 Aug 2026 13:47:45 +0300
Subject: [PATCH 32/58] feat: configure vite settings for portal and backoffice
 apps with shared environment directory

---
 apps/backoffice/vite.config.mts | 36 ++++++++++++++++-----------------
 apps/portal/vite.config.mts     |  9 +++++++++
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/backoffice/vite.config.mts b/apps/backoffice/vite.config.mts
index 09f20b367..97ed5cae3 100644
--- a/apps/backoffice/vite.config.mts
+++ b/apps/backoffice/vite.config.mts
@@ -9,19 +9,19 @@ export default defineConfig({
   // its built-in default.
   envDir: '../../',
   cacheDir: '../../node_modules/.vite/apps/backoffice',
-  // server: {
-  //   port: 4201,
-  //   host: 'localhost',
-  // },
   server: {
-  port: 4201,
-  proxy: {
-    '/api': {
-      target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
-      changeOrigin: true,
-    },
+    port: 4201,
+    host: 'localhost',
   },
-},
+//   server: {
+//   port: 4201,
+//   proxy: {
+//     '/api': {
+//       target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
+//       changeOrigin: true,
+//     },
+//   },
+// },
   preview: { port: 4201, host: 'localhost' },
   plugins: [react(), nxViteTsPaths()],
   resolve: {
@@ -45,11 +45,11 @@ export default defineConfig({
   // Unit tests for the pure helpers behind a screen (formatters, URL state).
   // Component tests are deliberately not set up: nothing here renders React,
   // so no jsdom environment or setup file is needed.
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'node',
-    include: ['src/**/*.spec.ts'],
-    reporters: ['default'],
-  },
+  // test: {
+  //   watch: false,
+  //   globals: true,
+  //   environment: 'node',
+  //   include: ['src/**/*.spec.ts'],
+  //   reporters: ['default'],
+  // },
 });
diff --git a/apps/portal/vite.config.mts b/apps/portal/vite.config.mts
index d0e63f422..4e08b10fe 100644
--- a/apps/portal/vite.config.mts
+++ b/apps/portal/vite.config.mts
@@ -10,6 +10,15 @@ export default defineConfig({
   envDir: '../../',
   cacheDir: '../../node_modules/.vite/apps/portal',
   server: { port: 4200, host: 'localhost' },
+//   server: {
+//   port: 4200,
+//   proxy: {
+//     '/api': {
+//       target: 'http://localhost:3000', // change from 'https://ema-api-dev.triaplc.com'
+//       changeOrigin: true,
+//     },
+//   },
+// },
   preview: { port: 4200, host: 'localhost' },
   plugins: [react(), nxViteTsPaths()],
   resolve: {

From 581eac746632e25cd413aa1b68a18557b312f1ab Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 10:57:37 +0000
Subject: [PATCH 33/58] UI changes

---
 .../app/features/endorsement/pages/EndorsementPage.tsx    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
index 40c4e109f..dda909899 100644
--- a/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
+++ b/apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
@@ -66,7 +66,11 @@ export function EndorsementPage() {
   const { profile, isLoading: loadingProfile } = useCurrentProfile();
   const { data: applications, isLoading: loadingApplications } =
     useGetMyApplicationsQuery();
-  const { data: licenses } = useGetMyLicensesQuery();
+  const {
+    data: licenses,
+    isFetching: fetchingLicenses,
+    refetch: refetchLicenses,
+  } = useGetMyLicensesQuery();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
   const [getCertificateUrl] = useGetCertificateUrlMutation();
@@ -209,6 +213,8 @@ export function EndorsementPage() {
           pageIndex={issuedPage.pageIndex}
           onPageChange={issuedTable.setPageIndex}
           pageSize={issuedTable.pageSize}
+          refresh={refetchLicenses}
+          isLoading={fetchingLicenses}
           emptyText={t('endorsement.emptyIssued', 'No endorsements issued yet.')}
         />
       </Stack>

From 22579898215e43e6ecf2e7b56dca50731f8b86e7 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 11:23:30 +0000
Subject: [PATCH 34/58] feat: add account type synchronization to operations
 form based on selected license types

---
 .../components/OperationsFormContent.tsx      | 42 +++++++++++++++++--
 libs/auth/src/index.ts                        |  1 +
 libs/auth/src/lib/hooks/useCurrentProfile.ts  | 17 ++++++++
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
index e643ddd95..4d1babe08 100644
--- a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
@@ -20,6 +20,7 @@ import {
   useGetMyOperatorTypesQuery,
   useUpdateMyOperatorTypesMutation,
 } from '@ema-platform/api';
+import { useUpdateMyAccountTypeMutation } from '@ema-platform/auth';
 import { notify, ModalFooter } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 
@@ -35,6 +36,29 @@ const PERSONAL_REGISTRATION_KEYS = [
   'VESSEL_REGISTRATION',
 ];
 
+/**
+ * Declared modes -> portal account type.
+ *
+ * The account type is what the server computes portal permissions from, and
+ * therefore what decides which services appear in the sidebar at all. Modes
+ * of operation grant nothing on their own: an applicant who declared
+ * "freight forwarder" here was still left on the seafarer default and never
+ * saw the logistics or vessel entries.
+ *
+ * One type per account against a multi-select, so the widest capability wins:
+ * a company representative who also sails still needs the company services,
+ * and the seafarer side stays reachable through their own registration.
+ */
+function accountTypeFor(keys: string[]): string | null {
+  if (keys.some((key) => !PERSONAL_REGISTRATION_KEYS.includes(key))) {
+    // Historical enum value for the logistics company representative.
+    return 'FRIGHTER';
+  }
+  if (keys.includes('VESSEL_REGISTRATION')) return 'VESSEL_OWNER';
+  if (keys.includes('SEAFARER_REGISTRATION')) return 'SEAFARER';
+  return null;
+}
+
 /**
  * The applicant's modes of operation — what they do, and therefore which
  * licences the portal offers them.
@@ -58,6 +82,7 @@ export function OperationsFormContent({
   const { data: catalogue, isLoading: loadingTypes } = useGetLicenseTypesQuery();
   const { data: mine, isLoading: loadingMine } = useGetMyOperatorTypesQuery();
   const [save, { isLoading: saving }] = useUpdateMyOperatorTypesMutation();
+  const [setAccountType] = useUpdateMyAccountTypeMutation();
   const localized = useLocalized();
 
   const declaredIds = useMemo(
@@ -118,14 +143,25 @@ export function OperationsFormContent({
   async function persist() {
     try {
       await save({ licenseTypeIds: selected }).unwrap();
+      const selectedKeys = options
+        .filter((t) => selected.includes(t.id))
+        .map((t) => t.key);
+
+      const type = accountTypeFor(selectedKeys);
+      if (type) {
+        // Refused for a registered seafarer, whose type the authority owns
+        // (`registered_seafarer_type_is_fixed`), and for staff. The modes are
+        // already stored either way, so a refusal here is not the applicant's
+        // problem to see.
+        await setAccountType({ type }).unwrap().catch(() => undefined);
+      }
+
       setConfirmingRemoval(false);
       notify.success(
         t('profileOperations.updateSuccessBody'),
         t('profileOperations.updateSuccessTitle'),
       );
-      onSaved?.(
-        options.filter((t) => selected.includes(t.id)).map((t) => t.key),
-      );
+      onSaved?.(selectedKeys);
     } catch (err) {
       notify.error(extractErrorMessage(err), t('profileOperations.updateErrorTitle'));
     }
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index a0f46f25f..5b1190836 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -37,6 +37,7 @@ export {
   useGetMyProfileQuery,
   useUpdateMyProfileMutation,
   useUpdateMyAddressMutation,
+  useUpdateMyAccountTypeMutation,
   PROFILE_FIELDS,
   PROFILE_FIELD_SECTION,
 } from "./lib/hooks/useCurrentProfile";
diff --git a/libs/auth/src/lib/hooks/useCurrentProfile.ts b/libs/auth/src/lib/hooks/useCurrentProfile.ts
index 6cea8dc9f..985ee61df 100644
--- a/libs/auth/src/lib/hooks/useCurrentProfile.ts
+++ b/libs/auth/src/lib/hooks/useCurrentProfile.ts
@@ -119,6 +119,22 @@ const profileApi = baseApi
         query: ({ id, body }) => ({ url: `/profiles/${id}`, method: 'PUT', body }),
         invalidatesTags: ['CurrentProfile'],
       }),
+      /**
+       * The portal role — seafarer, vessel owner or logistics operator.
+       *
+       * Sidebar and route permissions are computed from this server-side
+       * (`profiles.type`), not from the declared modes of operation, so the
+       * Operations tab writes it here too. Invalidates the profile so the
+       * shell repermissions itself without a reload.
+       */
+      updateMyAccountType: builder.mutation<unknown, { type: string }>({
+        query: (body) => ({
+          url: '/profiles/me/account-type',
+          method: 'PUT',
+          body,
+        }),
+        invalidatesTags: (_result, error) => (error ? [] : ['CurrentProfile']),
+      }),
       updateMyAddress: builder.mutation<
         unknown,
         { id: string; body: Record<string, unknown> }
@@ -134,6 +150,7 @@ export const {
   useGetMyProfileQuery,
   useUpdateMyProfileMutation,
   useUpdateMyAddressMutation,
+  useUpdateMyAccountTypeMutation,
 } = profileApi;
 export const currentProfileApi = profileApi;
 

From 1509f8ca1fef796977102332a3e18e2a1a8a6c22 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 11:36:35 +0000
Subject: [PATCH 35/58] refactor: update vessel registration route and clarify
 navigation logic in OperationsOnboardingPage

---
 .../onboarding/pages/OperationsOnboardingPage.tsx  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx b/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
index 8041bf431..c6cb8070f 100644
--- a/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
+++ b/apps/portal/src/app/features/onboarding/pages/OperationsOnboardingPage.tsx
@@ -5,16 +5,20 @@ import { OperationsFormContent } from '../../profile/components/OperationsFormCo
 
 /**
  * Where a fresh applicant lands after declaring themselves. Someone who says
- * "I own a vessel" came here to register, so they are taken straight to that
- * form instead of a dashboard that only links to it. A seafarer goes to
- * `/profile` instead — registration is built from the profile
+ * "I own a vessel" came here to register, so they are taken to that service's
+ * own page — which lists what they already hold and starts the application —
+ * rather than dropped straight into the wizard with no way back. A seafarer
+ * goes to `/profile` instead — registration is built from the profile
  * (`RequireSeafarerProfile`), and a brand-new signup has none of it yet, so
  * sending them straight to the wizard would only bounce them back here.
- * Seafarer wins when both are ticked; the other form is one nav click away.
+ * Seafarer wins when both are ticked; the other page is one nav click away.
+ *
+ * A licence type with no page of its own falls through to the dashboard,
+ * where the catalogue offers it.
  */
 const NEXT_STEP: Record<string, string> = {
   SEAFARER_REGISTRATION: '/profile',
-  VESSEL_REGISTRATION: '/licensing/VESSEL_REGISTRATION/apply',
+  VESSEL_REGISTRATION: '/vessel-registration',
 };
 
 function nextStepFor(selectedKeys: string[]): string {

From de780524297fcc6475b9330e9bde0acd1b1f585c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 11:43:11 +0000
Subject: [PATCH 36/58] feat: add in-flight registration application tracking
 and status dashboard to vessel registration page

---
 .../pages/VesselRegistrationPage.tsx          | 73 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
index b20f20629..3b752cc68 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Alert,
   Badge,
@@ -8,6 +9,7 @@ import {
   Divider,
   Group,
   Paper,
+  Progress,
   SimpleGrid,
   Stack,
   Text,
@@ -25,13 +27,24 @@ import {
   IconInfoCircle,
   IconClockHour4,
   IconTransferIn,
+  IconArrowRight,
 } from '@tabler/icons-react';
-import { useApiMutation } from '@ema-platform/api';
+import {
+  STATUS_COLORS,
+  STATUS_LABELS,
+  STATUS_PROGRESS,
+  TERMINAL_STATUSES,
+  useApiMutation,
+  useGetMyApplicationsQuery,
+} from '@ema-platform/api';
 import { authStorage } from '@ema-platform/auth';
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
+/** Registration applications run through the config-driven licensing wizard. */
+const REGISTRATION_TYPE_KEY = 'VESSEL_REGISTRATION';
+
 type VesselRegStatus = 'Pending' | 'Under Review' | 'Approved' | 'Rejected' | 'Correction Required';
 type VesselCategory = 'Inland Waterway Vessel' | 'Sea-going Vessel (International)';
 type RenewalStatus = 'Valid' | 'Due Soon' | 'Overdue' | 'Not Applicable';
@@ -118,6 +131,8 @@ function CertificateCard({ label, description }: { label: string; description: s
 // ---------------------------------------------------------------------------
 export function VesselRegistrationPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { data: applications } = useGetMyApplicationsQuery();
   const [registration, setRegistration] = useState<VesselRegistration | null>(null);
   const [fetchTrigger] = useApiMutation<VesselRegistration>();
   const fetched = useRef(false);
@@ -132,6 +147,14 @@ export function VesselRegistrationPage() {
       .catch(() => {/* no registration yet */});
   }, [fetchTrigger]);
 
+  // Drafts and anything still moving through review — the applicant's own
+  // registration applications, straight from the licensing queue.
+  const inFlight = (applications?.items ?? []).filter(
+    (app) =>
+      app.licenseType?.key === REGISTRATION_TYPE_KEY &&
+      !TERMINAL_STATUSES.includes(app.status),
+  );
+
   const certs = registration?.category === 'Sea-going Vessel (International)'
     ? SEAGOING_CERTIFICATES
     : INLAND_CERTIFICATES;
@@ -148,6 +171,54 @@ export function VesselRegistrationPage() {
         </div>
       </Group>
 
+      {/* ── Drafts / submitted applications ───────────────────────────── */}
+      {inFlight.length > 0 && (
+        <Stack gap="sm">
+          <Text fw={700} fz="md">{t('vesselRegistration.inFlight.title')}</Text>
+          {inFlight.map((app) => {
+            const isDraft = app.status === 'DRAFT';
+            const needsAction = app.status === 'RESUBMIT_REQUIRED';
+            return (
+              <Card key={app.id} withBorder radius="md" p="md">
+                <Group justify="space-between" wrap="nowrap">
+                  <div>
+                    <Group gap="xs">
+                      <Text fw={600}>{app.applicationNumber}</Text>
+                      {app.kind === 'RENEWAL' && (
+                        <Badge size="sm" variant="light">
+                          {t('vesselRegistration.inFlight.renewalBadge')}
+                        </Badge>
+                      )}
+                    </Group>
+                    <Progress value={STATUS_PROGRESS[app.status]} mt="xs" w={260} />
+                  </div>
+                  <Group wrap="nowrap">
+                    <Badge color={STATUS_COLORS[app.status]}>
+                      {STATUS_LABELS[app.status]}
+                    </Badge>
+                    <Button
+                      size="compact-sm"
+                      variant={needsAction ? 'filled' : 'light'}
+                      color={needsAction ? 'orange' : undefined}
+                      rightSection={<IconArrowRight size={14} />}
+                      onClick={() =>
+                        navigate(`/licensing/${REGISTRATION_TYPE_KEY}/applications/${app.id}`)
+                      }
+                    >
+                      {isDraft
+                        ? t('common.continue')
+                        : needsAction
+                          ? t('vesselRegistration.inFlight.fix')
+                          : t('vesselRegistration.inFlight.view')}
+                    </Button>
+                  </Group>
+                </Group>
+              </Card>
+            );
+          })}
+        </Stack>
+      )}
+
       {/* ── No registration yet ───────────────────────────────────────── */}
       {!registration && (
         <>

From 98277924a39ec2231bc819212c2d309e7b45588e Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 11:46:52 +0000
Subject: [PATCH 37/58] UI improvements

---
 .../vessel-registration/inFlightColumns.tsx   | 76 +++++++++++++++++++
 .../pages/VesselRegistrationPage.tsx          | 66 +++++-----------
 apps/portal/src/app/i18n/locales/am.ts        |  1 +
 apps/portal/src/app/i18n/locales/en.ts        |  1 +
 4 files changed, 98 insertions(+), 46 deletions(-)
 create mode 100644 apps/portal/src/app/features/vessel-registration/inFlightColumns.tsx

diff --git a/apps/portal/src/app/features/vessel-registration/inFlightColumns.tsx b/apps/portal/src/app/features/vessel-registration/inFlightColumns.tsx
new file mode 100644
index 000000000..43dc3e382
--- /dev/null
+++ b/apps/portal/src/app/features/vessel-registration/inFlightColumns.tsx
@@ -0,0 +1,76 @@
+import { Badge, Button, Group, Progress, Text } from '@mantine/core';
+import { IconArrowRight } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
+import type { AdvancedColumn } from '@ema-platform/ui';
+import {
+  STATUS_COLORS,
+  STATUS_LABELS,
+  STATUS_PROGRESS,
+  type LicenseApplication,
+} from '@ema-platform/api';
+
+/** Columns for the applicant's in-flight vessel registration applications. */
+export function inFlightColumns(
+  t: TFunction,
+  deps: { onOpen: (app: LicenseApplication) => void },
+): AdvancedColumn<LicenseApplication>[] {
+  return [
+    {
+      header: t('applications.table.applicationNumber'),
+      cell: ({ row }) => (
+        <Group gap="xs" wrap="nowrap">
+          <Text fw={600} fz="sm">{row.original.applicationNumber}</Text>
+          {row.original.kind === 'RENEWAL' && (
+            <Badge size="sm" variant="light">
+              {t('vesselRegistration.inFlight.renewalBadge')}
+            </Badge>
+          )}
+        </Group>
+      ),
+    },
+    {
+      header: t('common.status'),
+      cell: ({ row }) => (
+        <Badge color={STATUS_COLORS[row.original.status]} variant="light">
+          {STATUS_LABELS[row.original.status]}
+        </Badge>
+      ),
+    },
+    {
+      header: t('applications.table.progress'),
+      size: 140,
+      cell: ({ row }) => (
+        <Progress
+          value={STATUS_PROGRESS[row.original.status]}
+          color={STATUS_COLORS[row.original.status]}
+          size="sm"
+          radius="xl"
+        />
+      ),
+    },
+    {
+      header: '',
+      label: t('common.actions'),
+      align: 'right',
+      cell: ({ row }) => {
+        const app = row.original;
+        const needsAction = app.status === 'RESUBMIT_REQUIRED';
+        return (
+          <Button
+            size="compact-sm"
+            variant={needsAction ? 'filled' : 'light'}
+            color={needsAction ? 'orange' : undefined}
+            rightSection={<IconArrowRight size={14} />}
+            onClick={() => deps.onOpen(app)}
+          >
+            {app.status === 'DRAFT'
+              ? t('common.continue')
+              : needsAction
+                ? t('vesselRegistration.inFlight.fix')
+                : t('vesselRegistration.inFlight.view')}
+          </Button>
+        );
+      },
+    },
+  ];
+}
diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
index 3b752cc68..145193801 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
@@ -9,7 +9,6 @@ import {
   Divider,
   Group,
   Paper,
-  Progress,
   SimpleGrid,
   Stack,
   Text,
@@ -27,12 +26,10 @@ import {
   IconInfoCircle,
   IconClockHour4,
   IconTransferIn,
-  IconArrowRight,
 } from '@tabler/icons-react';
+import { AdvancedTable } from '@ema-platform/ui';
+import { inFlightColumns } from '../inFlightColumns';
 import {
-  STATUS_COLORS,
-  STATUS_LABELS,
-  STATUS_PROGRESS,
   TERMINAL_STATUSES,
   useApiMutation,
   useGetMyApplicationsQuery,
@@ -45,6 +42,8 @@ import { authStorage } from '@ema-platform/auth';
 /** Registration applications run through the config-driven licensing wizard. */
 const REGISTRATION_TYPE_KEY = 'VESSEL_REGISTRATION';
 
+const PAGE_SIZE = 5;
+
 type VesselRegStatus = 'Pending' | 'Under Review' | 'Approved' | 'Rejected' | 'Correction Required';
 type VesselCategory = 'Inland Waterway Vessel' | 'Sea-going Vessel (International)';
 type RenewalStatus = 'Valid' | 'Due Soon' | 'Overdue' | 'Not Applicable';
@@ -133,6 +132,7 @@ export function VesselRegistrationPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { data: applications } = useGetMyApplicationsQuery();
+  const [page, setPage] = useState(0);
   const [registration, setRegistration] = useState<VesselRegistration | null>(null);
   const [fetchTrigger] = useApiMutation<VesselRegistration>();
   const fetched = useRef(false);
@@ -155,6 +155,11 @@ export function VesselRegistrationPage() {
       !TERMINAL_STATUSES.includes(app.status),
   );
 
+  const columns = inFlightColumns(t, {
+    onOpen: (app) =>
+      navigate(`/licensing/${REGISTRATION_TYPE_KEY}/applications/${app.id}`),
+  });
+
   const certs = registration?.category === 'Sea-going Vessel (International)'
     ? SEAGOING_CERTIFICATES
     : INLAND_CERTIFICATES;
@@ -175,47 +180,16 @@ export function VesselRegistrationPage() {
       {inFlight.length > 0 && (
         <Stack gap="sm">
           <Text fw={700} fz="md">{t('vesselRegistration.inFlight.title')}</Text>
-          {inFlight.map((app) => {
-            const isDraft = app.status === 'DRAFT';
-            const needsAction = app.status === 'RESUBMIT_REQUIRED';
-            return (
-              <Card key={app.id} withBorder radius="md" p="md">
-                <Group justify="space-between" wrap="nowrap">
-                  <div>
-                    <Group gap="xs">
-                      <Text fw={600}>{app.applicationNumber}</Text>
-                      {app.kind === 'RENEWAL' && (
-                        <Badge size="sm" variant="light">
-                          {t('vesselRegistration.inFlight.renewalBadge')}
-                        </Badge>
-                      )}
-                    </Group>
-                    <Progress value={STATUS_PROGRESS[app.status]} mt="xs" w={260} />
-                  </div>
-                  <Group wrap="nowrap">
-                    <Badge color={STATUS_COLORS[app.status]}>
-                      {STATUS_LABELS[app.status]}
-                    </Badge>
-                    <Button
-                      size="compact-sm"
-                      variant={needsAction ? 'filled' : 'light'}
-                      color={needsAction ? 'orange' : undefined}
-                      rightSection={<IconArrowRight size={14} />}
-                      onClick={() =>
-                        navigate(`/licensing/${REGISTRATION_TYPE_KEY}/applications/${app.id}`)
-                      }
-                    >
-                      {isDraft
-                        ? t('common.continue')
-                        : needsAction
-                          ? t('vesselRegistration.inFlight.fix')
-                          : t('vesselRegistration.inFlight.view')}
-                    </Button>
-                  </Group>
-                </Group>
-              </Card>
-            );
-          })}
+          <AdvancedTable
+            tableName="vessel-registration-in-flight"
+            columns={columns}
+            // Client-side paging: getMyApplications returns the whole list.
+            data={inFlight.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)}
+            itemCount={inFlight.length}
+            pageIndex={page}
+            pageSize={PAGE_SIZE}
+            onPageChange={setPage}
+          />
         </Stack>
       )}
 
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 948de1c30..e80d54123 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -208,6 +208,7 @@ export const am: Translations = {
       licence: 'ፍቃድ',
       applicant: 'አመልካች',
       progress: 'ደረጃ',
+      applicationNumber: 'የማመልከቻ ቁጥር',
     },
     actions: {
       continue: 'ቀጥል',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 621209e49..738d7e5a6 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -207,6 +207,7 @@ export const en = {
       licence: 'Licence',
       applicant: 'Applicant',
       progress: 'Progress',
+      applicationNumber: 'Application №',
     },
     actions: {
       continue: 'Continue',

From 10d2a8935a4cf36dfa792a379aceaf2363178c5d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 18 Aug 2026 11:49:08 +0000
Subject: [PATCH 38/58] fixes

---
 .../vessel-registration/pages/VesselRegistrationPage.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
index 145193801..3a0790c61 100644
--- a/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
+++ b/apps/portal/src/app/features/vessel-registration/pages/VesselRegistrationPage.tsx
@@ -131,7 +131,7 @@ function CertificateCard({ label, description }: { label: string; description: s
 export function VesselRegistrationPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const { data: applications } = useGetMyApplicationsQuery();
+  const { data: applications, isFetching, refetch } = useGetMyApplicationsQuery();
   const [page, setPage] = useState(0);
   const [registration, setRegistration] = useState<VesselRegistration | null>(null);
   const [fetchTrigger] = useApiMutation<VesselRegistration>();
@@ -188,6 +188,8 @@ export function VesselRegistrationPage() {
             itemCount={inFlight.length}
             pageIndex={page}
             pageSize={PAGE_SIZE}
+            refresh={refetch}
+            isLoading={isFetching}
             onPageChange={setPage}
           />
         </Stack>

From cb770f023a8e0e4274137c15796925d0bcf5e639 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Wed, 19 Aug 2026 09:44:03 +0300
Subject: [PATCH 39/58] chore: configure pnpm workspace builds and add eslint
 dependency requirements

---
 package.json        |    2 +
 pnpm-lock.yaml      | 1649 +++++++++++++++++++++++++------------------
 pnpm-workspace.yaml |    5 +
 3 files changed, 975 insertions(+), 681 deletions(-)
 create mode 100644 pnpm-workspace.yaml

diff --git a/package.json b/package.json
index e5378f7ee..4e72907bf 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,8 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "3.3.6",
+    "@eslint/js": "^10.0.1",
     "@nx/eslint": "^22.5.4",
     "@nx/eslint-plugin": "^22.5.4",
     "@nx/react": "^22.5.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab22662ac..fae6f3e62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 10.0.1(@types/react@19.2.18)(react@19.2.8)
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@19.2.18)(react@19.2.8)
+        version: 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.9.1(@standard-schema/spec@1.1.0)(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.85.0(react@19.2.8))(zod@4.4.3)
@@ -49,7 +49,7 @@ importers:
         version: 5.101.4(react@19.2.8)
       '@tria-plc/iamui':
         specifier: file:local-packages/tria-plc-iamui-0.1.1.tgz
-        version: file:local-packages/tria-plc-iamui-0.1.1.tgz(99cda88e492750b0ffad5cfcdbb8ec87)
+        version: file:local-packages/tria-plc-iamui-0.1.1.tgz(1492b51f4234d0fc1f578aaa88b4363f)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -103,7 +103,7 @@ importers:
         version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       recharts:
         specifier: ^3.8.0
-        version: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1)
+        version: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1)
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.6.0
@@ -111,21 +111,27 @@ importers:
         specifier: ^4.3.6
         version: 4.4.3
     devDependencies:
+      '@eslint/eslintrc':
+        specifier: 3.3.6
+        version: 3.3.6(supports-color@7.2.0)
+      '@eslint/js':
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))
       '@nx/eslint':
         specifier: ^22.5.4
-        version: 22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)
+        version: 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       '@nx/eslint-plugin':
         specifier: ^22.5.4
-        version: 22.7.8(@babel/traverse@7.29.8)(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)(typescript@5.9.3)
+        version: 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)
       '@nx/react':
         specifier: ^22.5.4
-        version: 22.7.8(@babel/core@7.29.7)(@babel/traverse@7.29.8)(@swc/helpers@0.5.23)(@types/babel__core@7.20.5)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+        version: 22.7.8(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0))(@swc/helpers@0.5.23)(@types/babel__core@7.20.5)(@zkochan/js-yaml@0.0.7)(csso@5.0.5)(debug@4.4.3(supports-color@7.2.0))(esbuild@0.28.2)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
       '@nx/vite':
         specifier: ^22.5.4
-        version: 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+        version: 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
       '@nx/vitest':
         specifier: ^22.5.4
-        version: 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+        version: 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
       '@playwright/test':
         specifier: ^1.62.1
         version: 1.62.1
@@ -143,22 +149,22 @@ importers:
         version: 19.2.4(@types/react@19.2.18)
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.60.0
-        version: 8.67.0(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
+        version: 8.67.0(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       '@typescript-eslint/parser':
         specifier: ^8.60.0
-        version: 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
+        version: 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.7.0(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))
+        version: 4.7.0(supports-color@7.2.0)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.5.4(postcss@8.5.26)
       eslint:
         specifier: ^9.8.0
-        version: 9.39.5(jiti@1.21.7)
+        version: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.39.5(jiti@1.21.7))
+        version: 5.2.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))
       nx:
         specifier: ^22.5.4
         version: 22.7.8
@@ -1060,6 +1066,15 @@ packages:
     resolution: {integrity: sha512-l2Ul9PrHsPCKcEY/ac7VgFj9D80C7S68sOKc618SyHDPK36s1XcFebXY0iTzUVn4Yq+YbwvSnDmCz9yxjX+QrA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/js@10.0.1':
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
   '@eslint/js@9.39.5':
     resolution: {integrity: sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1315,6 +1330,10 @@ packages:
     peerDependencies:
       react: ^18.x || ^19.x
 
+  '@mapbox/node-pre-gyp@1.0.11':
+    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
+    hasBin: true
+
   '@module-federation/bridge-react-webpack-plugin@2.8.2':
     resolution: {integrity: sha512-cEhnpCsWHqUndQC6WKtwat5BGz+IU0UdCjzyXrZtx1UqHX1jRB0+DZxB4DKYKtxTko8fsV0FUCJ/0FjKZY6z8g==}
 
@@ -3376,6 +3395,9 @@ packages:
     resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
     hasBin: true
 
+  abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -3459,6 +3481,14 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  aproba@2.1.0:
+    resolution: {integrity: sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==}
+
+  are-we-there-yet@2.0.0:
+    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -3660,6 +3690,10 @@ packages:
   caniuse-lite@1.0.30001809:
     resolution: {integrity: sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==}
 
+  canvas@2.11.2:
+    resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==}
+    engines: {node: '>=6'}
+
   canvg@3.0.11:
     resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==}
     engines: {node: '>=10.0.0'}
@@ -3680,6 +3714,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -3740,6 +3778,10 @@ packages:
     resolution: {integrity: sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==}
     engines: {node: '>=18'}
 
+  color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
+
   columnify@1.6.0:
     resolution: {integrity: sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==}
     engines: {node: '>=8.0.0'}
@@ -3775,6 +3817,9 @@ packages:
   confusing-browser-globals@1.0.11:
     resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
 
+  console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -3950,6 +3995,10 @@ packages:
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
+  decompress-response@4.2.1:
+    resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==}
+    engines: {node: '>=8'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3980,6 +4029,9 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -4383,6 +4435,10 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
 
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -4399,6 +4455,11 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  gauge@3.0.2:
+    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
   generic-names@4.0.0:
     resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
 
@@ -4434,6 +4495,10 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
@@ -4470,6 +4535,9 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+
   hasown@2.0.4:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
@@ -4996,6 +5064,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-response@2.1.0:
+    resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
+    engines: {node: '>=8'}
+
   mini-svg-data-uri@1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
@@ -5061,6 +5133,23 @@ packages:
       uglify-js:
         optional: true
 
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   motion-dom@12.43.0:
     resolution: {integrity: sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag==}
 
@@ -5088,6 +5177,9 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  nan@2.28.0:
+    resolution: {integrity: sha512-fTsDz99OTq2sVePhGdp4qQhggZFtKr64ZNVyVajRKtMOkJxYekplBh577PiJB12v/D3s2E5cGtOI45LWp6rnLQ==}
+
   nanoid@3.3.18:
     resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5128,6 +5220,11 @@ packages:
     resolution: {integrity: sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==}
     engines: {node: '>=18'}
 
+  nopt@5.0.0:
+    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -5139,6 +5236,10 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  npmlog@5.0.1:
+    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    deprecated: This package is no longer supported.
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -5249,6 +5350,10 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -5263,6 +5368,10 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  path2d-polyfill@2.0.1:
+    resolution: {integrity: sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==}
+    engines: {node: '>=8'}
+
   path@0.12.7:
     resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==}
 
@@ -5272,6 +5381,10 @@ packages:
   pdf-lib@1.17.1:
     resolution: {integrity: sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==}
 
+  pdfjs-dist@3.11.174:
+    resolution: {integrity: sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==}
+    engines: {node: '>=18'}
+
   pdfjs-dist@5.4.296:
     resolution: {integrity: sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==}
     engines: {node: '>=20.16.0 || >=22.3.0'}
@@ -5783,6 +5896,11 @@ packages:
     resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==}
     engines: {node: '>= 0.8.15'}
 
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
   rollup-plugin-typescript2@0.36.0:
     resolution: {integrity: sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==}
     peerDependencies:
@@ -5866,6 +5984,9 @@ packages:
     resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
     engines: {node: '>= 0.8.0'}
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -5908,6 +6029,12 @@ packages:
   signature_pad@2.3.2:
     resolution: {integrity: sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA==}
 
+  simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+
+  simple-get@3.1.1:
+    resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
+
   smol-toml@1.6.1:
     resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
@@ -6094,6 +6221,11 @@ packages:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
   terser@5.50.0:
     resolution: {integrity: sha512-CN9BVxWhgS/hRxtUMjtC2uRWSTcSfQFHMDWma6sKKfIivCD91sM+FOPfvwoaRMqCSrUpe1nv3jDamd9eEQ4y+w==}
     engines: {node: '>=10'}
@@ -6470,6 +6602,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+
   wmf@1.0.2:
     resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
     engines: {node: '>=0.8'}
@@ -6537,6 +6672,9 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
   yaml@1.10.3:
     resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
     engines: {node: '>= 6'}
@@ -6587,20 +6725,20 @@ snapshots:
 
   '@babel/compat-data@7.29.7': {}
 
-  '@babel/core@7.29.7':
+  '@babel/core@7.29.7(supports-color@7.2.0)':
     dependencies:
       '@babel/code-frame': 7.29.7
       '@babel/generator': 7.29.8
       '@babel/helper-compilation-targets': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helpers': 7.29.7
       '@babel/parser': 7.29.8
       '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
       '@babel/types': 7.29.8
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -6627,32 +6765,32 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
-      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@7.2.0)
       '@babel/helper-optimise-call-expression': 7.29.7
-      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.29.7(@babel/core@7.29.7)':
+  '@babel/helper-create-regexp-features-plugin@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7)':
+  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.12
     transitivePeerDependencies:
@@ -6660,16 +6798,9 @@ snapshots:
 
   '@babel/helper-globals@7.29.7': {}
 
-  '@babel/helper-member-expression-to-functions@7.29.7':
+  '@babel/helper-member-expression-to-functions@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/traverse': 7.29.8
-      '@babel/types': 7.29.8
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.29.7':
-    dependencies:
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
       '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
@@ -6681,12 +6812,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+  '@babel/helper-module-imports@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -6696,27 +6834,27 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.29.7': {}
 
-  '@babel/helper-remap-async-to-generator@7.29.7(@babel/core@7.29.7)':
+  '@babel/helper-remap-async-to-generator@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
-      '@babel/helper-wrap-function': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/helper-wrap-function': 7.29.7(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@7.2.0)
       '@babel/helper-optimise-call-expression': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
       '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
@@ -6727,10 +6865,10 @@ snapshots:
 
   '@babel/helper-validator-option@7.29.7': {}
 
-  '@babel/helper-wrap-function@7.29.7':
+  '@babel/helper-wrap-function@7.29.7(supports-color@7.2.0)':
     dependencies:
       '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
       '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
@@ -6744,597 +6882,597 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.8
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
-      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-decorators@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-proposal-decorators@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/plugin-syntax-decorators': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-decorators': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)':
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@babel/plugin-syntax-decorators@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-decorators@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-syntax-import-assertions@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-import-assertions@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-syntax-import-attributes@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-import-attributes@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.7)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-arrow-functions@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-arrow-functions@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-async-generator-functions@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-async-generator-functions@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)
-      '@babel/traverse': 7.29.8
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-async-to-generator@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-block-scoped-functions@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-block-scoping@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-block-scoping@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-class-properties@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-class-properties@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-class-static-block@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-classes@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-globals': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
-      '@babel/traverse': 7.29.8
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-computed-properties@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/template': 7.29.7
 
-  '@babel/plugin-transform-destructuring@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-destructuring@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-dotall-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-dotall-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-duplicate-keys@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-duplicate-keys@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-dynamic-import@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-dynamic-import@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-explicit-resource-management@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-explicit-resource-management@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-exponentiation-operator@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-exponentiation-operator@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-export-namespace-from@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-export-namespace-from@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-for-of@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-for-of@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-function-name@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-json-strings@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-json-strings@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-literals@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-literals@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-logical-assignment-operators@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-logical-assignment-operators@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-member-expression-literals@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-member-expression-literals@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-modules-amd@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-modules-amd@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.29.8(@babel/core@7.29.7)':
+  '@babel/plugin-transform-modules-systemjs@7.29.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-modules-umd@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-new-target@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-new-target@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-numeric-separator@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-numeric-separator@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-object-rest-spread@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-object-rest-spread@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
-      '@babel/traverse': 7.29.8
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-super@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-object-super@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-optional-catch-binding@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-optional-chaining@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-optional-chaining@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-parameters@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-private-methods@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-private-methods@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-private-property-in-object@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-property-literals@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-constant-elements@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-constant-elements@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-display-name@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-display-name@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-jsx-development@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-jsx-development@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-pure-annotations@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-react-pure-annotations@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-regenerator@7.29.8(@babel/core@7.29.7)':
+  '@babel/plugin-transform-regenerator@7.29.8(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-regexp-modifiers@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-regexp-modifiers@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-reserved-words@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-reserved-words@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-runtime@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-runtime@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)
-      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-shorthand-properties@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-spread@7.29.8(@babel/core@7.29.7)':
+  '@babel/plugin-transform-spread@7.29.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-sticky-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-template-literals@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-template-literals@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-typeof-symbol@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-typeof-symbol@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
-      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
-      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-escapes@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-unicode-escapes@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-unicode-property-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-unicode-property-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-unicode-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-unicode-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-unicode-sets-regex@7.29.7(@babel/core@7.29.7)':
+  '@babel/plugin-transform-unicode-sets-regex@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/preset-env@7.29.7(@babel/core@7.29.7)':
+  '@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
       '@babel/compat-data': 7.29.7
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)
-      '@babel/plugin-syntax-import-assertions': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7)
-      '@babel/plugin-transform-arrow-functions': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-async-generator-functions': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-async-to-generator': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-block-scoped-functions': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-block-scoping': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-class-static-block': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-classes': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-computed-properties': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-dotall-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-duplicate-keys': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-dynamic-import': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-explicit-resource-management': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-exponentiation-operator': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-export-namespace-from': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-for-of': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-function-name': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-json-strings': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-literals': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-logical-assignment-operators': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-member-expression-literals': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-modules-amd': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-modules-systemjs': 7.29.8(@babel/core@7.29.7)
-      '@babel/plugin-transform-modules-umd': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-new-target': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-numeric-separator': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-object-rest-spread': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-object-super': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-optional-catch-binding': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-private-methods': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-private-property-in-object': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-property-literals': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-regenerator': 7.29.8(@babel/core@7.29.7)
-      '@babel/plugin-transform-regexp-modifiers': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-reserved-words': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-shorthand-properties': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-spread': 7.29.8(@babel/core@7.29.7)
-      '@babel/plugin-transform-sticky-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-template-literals': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-typeof-symbol': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-unicode-escapes': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-unicode-property-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-unicode-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-unicode-sets-regex': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)
-      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.7)
-      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-syntax-import-assertions': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-arrow-functions': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-async-generator-functions': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-async-to-generator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-block-scoped-functions': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-block-scoping': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-class-static-block': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-classes': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-computed-properties': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-dotall-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-duplicate-keys': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-dynamic-import': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-explicit-resource-management': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-exponentiation-operator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-export-namespace-from': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-for-of': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-function-name': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-json-strings': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-literals': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-logical-assignment-operators': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-member-expression-literals': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-modules-amd': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-systemjs': 7.29.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-umd': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-new-target': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-numeric-separator': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-object-rest-spread': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-object-super': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-private-methods': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-private-property-in-object': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-property-literals': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-regenerator': 7.29.8(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-regexp-modifiers': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-reserved-words': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-shorthand-properties': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-spread': 7.29.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-sticky-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-template-literals': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-typeof-symbol': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-unicode-escapes': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-unicode-property-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-unicode-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-unicode-sets-regex': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7(supports-color@7.2.0))
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       core-js-compat: 3.50.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.7)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/types': 7.29.8
       esutils: 2.0.3
 
-  '@babel/preset-react@7.29.7(@babel/core@7.29.7)':
+  '@babel/preset-react@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      '@babel/plugin-transform-react-display-name': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-react-jsx-development': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-react-pure-annotations': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-display-name': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-react-jsx-development': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-react-pure-annotations': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)':
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -7346,18 +7484,6 @@ snapshots:
       '@babel/parser': 7.29.8
       '@babel/types': 7.29.8
 
-  '@babel/traverse@7.29.8':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.8
-      '@babel/helper-globals': 7.29.7
-      '@babel/parser': 7.29.8
-      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.29.8(supports-color@5.5.0)':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -7370,6 +7496,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.29.8(supports-color@7.2.0)':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+      debug: 4.4.3(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.8':
     dependencies:
       '@babel/helper-string-parser': 7.29.7
@@ -7421,9 +7559,9 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/babel-plugin@11.13.5':
+  '@emotion/babel-plugin@11.13.5(supports-color@7.2.0)':
     dependencies:
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@babel/runtime': 7.29.7
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
@@ -7453,10 +7591,10 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)':
+  '@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)':
     dependencies:
       '@babel/runtime': 7.29.7
-      '@emotion/babel-plugin': 11.13.5
+      '@emotion/babel-plugin': 11.13.5(supports-color@7.2.0)
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.8)
@@ -7479,12 +7617,12 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)':
+  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)':
     dependencies:
       '@babel/runtime': 7.29.7
-      '@emotion/babel-plugin': 11.13.5
+      '@emotion/babel-plugin': 11.13.5(supports-color@7.2.0)
       '@emotion/is-prop-valid': 1.4.0
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.8)
       '@emotion/utils': 1.4.2
@@ -7586,17 +7724,17 @@ snapshots:
   '@esbuild/win32-x64@0.28.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.10.1(eslint@9.39.5(jiti@1.21.7))':
+  '@eslint-community/eslint-utils@4.10.1(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))':
     dependencies:
-      eslint: 9.39.5(jiti@1.21.7)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/config-array@0.21.2':
+  '@eslint/config-array@0.21.2(supports-color@7.2.0)':
     dependencies:
       '@eslint/object-schema': 2.1.7
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       minimatch: 3.1.5
     transitivePeerDependencies:
       - supports-color
@@ -7609,10 +7747,10 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@3.3.6':
+  '@eslint/eslintrc@3.3.6(supports-color@7.2.0)':
     dependencies:
       ajv: 6.15.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -7623,6 +7761,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@eslint/js@10.0.1(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))':
+    optionalDependencies:
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
+
   '@eslint/js@9.39.5': {}
 
   '@eslint/object-schema@2.1.7': {}
@@ -7732,13 +7874,13 @@ snapshots:
       lottie-web: 5.13.0
       react: 19.2.8
 
-  '@mantine/charts@7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1))':
+  '@mantine/charts@7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1))':
     dependencies:
       '@mantine/core': 7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@mantine/hooks': 7.17.8(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      recharts: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1)
+      recharts: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1)
 
   '@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
@@ -7834,6 +7976,22 @@ snapshots:
     dependencies:
       react: 19.2.8
 
+  '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)(supports-color@7.2.0)':
+    dependencies:
+      detect-libc: 2.1.2
+      https-proxy-agent: 5.0.1(supports-color@7.2.0)
+      make-dir: 3.1.0
+      node-fetch: 2.7.0(encoding@0.1.13)
+      nopt: 5.0.0
+      npmlog: 5.0.1
+      rimraf: 3.0.2
+      semver: 7.8.5
+      tar: 6.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
   '@module-federation/bridge-react-webpack-plugin@2.8.2':
     dependencies:
       '@module-federation/sdk': 2.8.2
@@ -7865,7 +8023,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@module-federation/enhanced@2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))':
+  '@module-federation/enhanced@2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))':
     dependencies:
       '@module-federation/bridge-react-webpack-plugin': 2.8.2
       '@module-federation/cli': 2.8.2(typescript@5.9.3)
@@ -7882,7 +8040,7 @@ snapshots:
       tapable: 2.3.0
     optionalDependencies:
       typescript: 5.9.3
-      webpack: 5.109.2(lightningcss@1.32.0)(postcss@8.5.26)
+      webpack: 5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)
     transitivePeerDependencies:
       - '@rspack/core'
       - bufferutil
@@ -7911,16 +8069,16 @@ snapshots:
       - utf-8-validate
       - vue-tsc
 
-  '@module-federation/node@2.7.49(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))':
+  '@module-federation/node@2.7.49(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))':
     dependencies:
-      '@module-federation/enhanced': 2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))
+      '@module-federation/enhanced': 2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))
       '@module-federation/runtime': 2.8.2
       '@module-federation/sdk': 2.8.2
       encoding: 0.1.13
       node-fetch: 2.7.0(encoding@0.1.13)
       tapable: 2.3.0
     optionalDependencies:
-      webpack: 5.109.2(lightningcss@1.32.0)(postcss@8.5.26)
+      webpack: 5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)
     transitivePeerDependencies:
       - '@rspack/core'
       - bufferutil
@@ -8009,19 +8167,19 @@ snapshots:
 
   '@mui/core-downloads-tracker@5.18.0': {}
 
-  '@mui/icons-material@5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)':
+  '@mui/icons-material@5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@mui/core-downloads-tracker': 5.18.0
-      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)
       '@mui/types': 7.2.24(@types/react@19.2.18)
       '@mui/utils': 5.17.1(@types/react@19.2.18)(react@19.2.8)
       '@popperjs/core': 2.11.8
@@ -8034,8 +8192,8 @@ snapshots:
       react-is: 19.2.8
       react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       '@types/react': 19.2.18
 
   '@mui/private-theming@5.17.1(@types/react@19.2.18)(react@19.2.8)':
@@ -8047,7 +8205,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@mui/styled-engine@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(react@19.2.8)':
+  '@mui/styled-engine@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@emotion/cache': 11.14.0
@@ -8056,14 +8214,14 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.8
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
 
-  '@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)':
+  '@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@mui/private-theming': 5.17.1(@types/react@19.2.18)(react@19.2.8)
-      '@mui/styled-engine': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(react@19.2.8)
+      '@mui/styled-engine': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(react@19.2.8)
       '@mui/types': 7.2.24(@types/react@19.2.18)
       '@mui/utils': 5.17.1(@types/react@19.2.18)(react@19.2.8)
       clsx: 2.1.1
@@ -8071,8 +8229,8 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.8
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       '@types/react': 19.2.18
 
   '@mui/types@7.2.24(@types/react@19.2.18)':
@@ -8103,12 +8261,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@mui/x-date-pickers@6.20.2(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(date-fns@4.4.0)(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@mui/x-date-pickers@6.20.2(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(date-fns@4.4.0)(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@mui/base': 5.0.0-beta.70(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)
       '@mui/utils': 5.17.1(@types/react@19.2.18)(react@19.2.8)
       '@types/react-transition-group': 4.4.12(@types/react@19.2.18)
       clsx: 2.1.1
@@ -8117,8 +8275,8 @@ snapshots:
       react-dom: 19.2.8(react@19.2.8)
       react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       date-fns: 4.4.0
       dayjs: 1.11.23
     transitivePeerDependencies:
@@ -8215,14 +8373,14 @@ snapshots:
       tslib: 2.8.1
       yargs-parser: 21.1.1
 
-  '@nx/eslint-plugin@22.7.8(@babel/traverse@7.29.8)(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)(typescript@5.9.3)':
+  '@nx/eslint-plugin@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       '@phenomnomnominal/tsquery': 6.2.0(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/type-utils': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       chalk: 4.1.2
       confusing-browser-globals: 1.0.11
       globals: 17.11.0
@@ -8239,11 +8397,11 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)':
+  '@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
-      eslint: 9.39.5(jiti@1.21.7)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       semver: 7.8.5
       tslib: 2.8.1
       typescript: 5.9.3
@@ -8257,21 +8415,21 @@ snapshots:
       - supports-color
       - verdaccio
 
-  '@nx/js@22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)':
+  '@nx/js@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/plugin-proposal-decorators': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-runtime': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-proposal-decorators': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/plugin-transform-runtime': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       '@babel/runtime': 7.29.7
       '@nx/devkit': 22.7.8(nx@22.7.8)
       '@nx/workspace': 22.7.8
       '@zkochan/js-yaml': 0.0.7
-      babel-plugin-const-enum: 1.2.0(@babel/core@7.29.7)
+      babel-plugin-const-enum: 1.2.0(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       babel-plugin-macros: 3.1.0
-      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.29.7)(@babel/traverse@7.29.8)
+      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0))
       chalk: 4.1.2
       columnify: 1.6.0
       detect-port: 2.1.0
@@ -8292,20 +8450,20 @@ snapshots:
       - nx
       - supports-color
 
-  '@nx/module-federation@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(@swc/helpers@0.5.23)(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(typescript@5.9.3)':
+  '@nx/module-federation@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(@swc/helpers@0.5.23)(csso@5.0.5)(debug@4.4.3(supports-color@7.2.0))(esbuild@0.28.2)(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@module-federation/enhanced': 2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))
-      '@module-federation/node': 2.7.49(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))
+      '@module-federation/enhanced': 2.8.2(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))
+      '@module-federation/node': 2.7.49(@rspack/core@1.6.8(@swc/helpers@0.5.23))(typescript@5.9.3)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))
       '@module-federation/sdk': 2.8.2
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
-      '@nx/web': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(nx@22.7.8)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@nx/web': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(debug@4.4.3(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       '@rspack/core': 1.6.8(@swc/helpers@0.5.23)
-      express: 4.22.2
-      http-proxy-middleware: 3.0.7
+      express: 4.22.2(supports-color@7.2.0)
+      http-proxy-middleware: 3.0.7(supports-color@7.2.0)
       picocolors: 1.1.1
       tslib: 2.8.1
-      webpack: 5.109.2(lightningcss@1.32.0)(postcss@8.5.26)
+      webpack: 5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@minify-html/node'
@@ -8368,24 +8526,24 @@ snapshots:
   '@nx/nx-win32-x64-msvc@22.7.8':
     optional: true
 
-  '@nx/react@22.7.8(@babel/core@7.29.7)(@babel/traverse@7.29.8)(@swc/helpers@0.5.23)(@types/babel__core@7.20.5)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
+  '@nx/react@22.7.8(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0))(@swc/helpers@0.5.23)(@types/babel__core@7.20.5)(@zkochan/js-yaml@0.0.7)(csso@5.0.5)(debug@4.4.3(supports-color@7.2.0))(esbuild@0.28.2)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
-      '@nx/module-federation': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(@swc/helpers@0.5.23)(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(typescript@5.9.3)
-      '@nx/rollup': 22.7.8(@babel/core@7.29.7)(@babel/traverse@7.29.8)(@types/babel__core@7.20.5)(nx@22.7.8)(typescript@5.9.3)
-      '@nx/web': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(nx@22.7.8)
+      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@nx/module-federation': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(@swc/helpers@0.5.23)(csso@5.0.5)(debug@4.4.3(supports-color@7.2.0))(esbuild@0.28.2)(lightningcss@1.32.0)(nx@22.7.8)(postcss@8.5.26)(supports-color@7.2.0)(typescript@5.9.3)
+      '@nx/rollup': 22.7.8(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0))(@types/babel__core@7.20.5)(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)
+      '@nx/web': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(debug@4.4.3(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       '@phenomnomnominal/tsquery': 6.2.0(typescript@5.9.3)
-      '@svgr/webpack': 8.1.0(typescript@5.9.3)
-      express: 4.22.2
-      http-proxy-middleware: 3.0.7
+      '@svgr/webpack': 8.1.0(supports-color@7.2.0)(typescript@5.9.3)
+      express: 4.22.2(supports-color@7.2.0)
+      http-proxy-middleware: 3.0.7(supports-color@7.2.0)
       minimatch: 10.2.5
       picocolors: 1.1.1
       semver: 7.8.5
       tslib: 2.8.1
     optionalDependencies:
-      '@nx/vite': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+      '@nx/vite': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/traverse'
@@ -8422,11 +8580,11 @@ snapshots:
       - vue-tsc
       - webpack-cli
 
-  '@nx/rollup@22.7.8(@babel/core@7.29.7)(@babel/traverse@7.29.8)(@types/babel__core@7.20.5)(nx@22.7.8)(typescript@5.9.3)':
+  '@nx/rollup@22.7.8(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0))(@types/babel__core@7.20.5)(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
-      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.4)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7(supports-color@7.2.0))(@types/babel__core@7.20.5)(rollup@4.62.4)(supports-color@7.2.0)
       '@rollup/plugin-commonjs': 25.0.8(rollup@4.62.4)
       '@rollup/plugin-image': 3.0.3(rollup@4.62.4)
       '@rollup/plugin-json': 6.1.0(rollup@4.62.4)
@@ -8452,11 +8610,11 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
+  '@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
-      '@nx/vitest': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@nx/vitest': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
       '@phenomnomnominal/tsquery': 6.2.0(typescript@5.9.3)
       ajv: 8.20.0
       enquirer: 2.3.6
@@ -8476,15 +8634,15 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/vitest@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
+  '@nx/vitest@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       '@phenomnomnominal/tsquery': 6.2.0(typescript@5.9.3)
       semver: 7.8.5
       tslib: 2.8.1
     optionalDependencies:
-      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)
+      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       vite: 7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)
       vitest: 4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))
     transitivePeerDependencies:
@@ -8496,17 +8654,17 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/web@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(@nx/vite@22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(nx@22.7.8)':
+  '@nx/web@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(@nx/vite@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))))(debug@4.4.3(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)':
     dependencies:
       '@nx/devkit': 22.7.8(nx@22.7.8)
-      '@nx/js': 22.7.8(@babel/traverse@7.29.8)(nx@22.7.8)
+      '@nx/js': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
       detect-port: 2.1.0
-      http-server: 14.1.1
+      http-server: 14.1.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0)
       picocolors: 1.1.1
       tslib: 2.8.1
     optionalDependencies:
-      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8)
-      '@nx/vite': 22.7.8(@babel/traverse@7.29.8)(@nx/eslint@22.7.8(@babel/traverse@7.29.8)(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7))(nx@22.7.8))(nx@22.7.8)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
+      '@nx/eslint': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)
+      '@nx/vite': 22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@nx/eslint@22.7.8(@babel/traverse@7.29.8(supports-color@7.2.0))(@zkochan/js-yaml@0.0.7)(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0))(nx@22.7.8)(supports-color@7.2.0)(typescript@5.9.3)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))(vitest@4.1.10(@types/node@22.20.1)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0)))
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -9145,159 +9303,159 @@ snapshots:
 
   '@radix-ui/rect@1.1.3': {}
 
-  '@react-pdf-viewer/attachment@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/attachment@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/bookmark@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/bookmark@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/core@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/core@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      pdfjs-dist: 5.4.296
+      pdfjs-dist: 3.11.174(encoding@0.1.13)(supports-color@7.2.0)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  '@react-pdf-viewer/default-layout@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/default-layout@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/attachment': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/bookmark': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/thumbnail': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/toolbar': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/attachment': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/bookmark': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/thumbnail': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/toolbar': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/full-screen@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/full-screen@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/get-file@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/get-file@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/open@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/open@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/page-navigation@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/page-navigation@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/print@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/print@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/properties@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/properties@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/rotate@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/rotate@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/scroll-mode@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/scroll-mode@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/search@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/search@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/selection-mode@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/selection-mode@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/theme@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/theme@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/thumbnail@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/thumbnail@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/toolbar@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/toolbar@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/full-screen': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/get-file': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/open': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/page-navigation': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/print': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/properties': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/rotate': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/scroll-mode': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/search': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/selection-mode': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/theme': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/zoom': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/full-screen': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/get-file': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/open': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/page-navigation': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/print': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/properties': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/rotate': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/scroll-mode': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/search': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/selection-mode': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/theme': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/zoom': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/zoom@3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@react-pdf-viewer/zoom@3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
@@ -9420,10 +9578,10 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
-  '@rollup/plugin-babel@6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.4)':
+  '@rollup/plugin-babel@6.1.0(@babel/core@7.29.7(supports-color@7.2.0))(@types/babel__core@7.20.5)(rollup@4.62.4)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
       '@rollup/pluginutils': 5.4.0(rollup@4.62.4)
     optionalDependencies:
       '@types/babel__core': 7.20.5
@@ -9623,54 +9781,54 @@ snapshots:
 
   '@standard-schema/utils@0.3.0': {}
 
-  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.29.7)':
+  '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
 
-  '@svgr/babel-preset@8.1.0(@babel/core@7.29.7)':
+  '@svgr/babel-preset@8.1.0(@babel/core@7.29.7(supports-color@7.2.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.7)
-      '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.7(supports-color@7.2.0))
 
-  '@svgr/core@8.1.0(typescript@5.9.3)':
+  '@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7(supports-color@7.2.0))
       camelcase: 6.3.0
       cosmiconfig: 8.3.6(typescript@5.9.3)
       snake-case: 3.0.4
@@ -9683,35 +9841,35 @@ snapshots:
       '@babel/types': 7.29.8
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
-      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7(supports-color@7.2.0))
+      '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@5.9.3)
       '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
-      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@5.9.3)
       cosmiconfig: 8.3.6(typescript@5.9.3)
       deepmerge: 4.3.1
       svgo: 3.3.4
     transitivePeerDependencies:
       - typescript
 
-  '@svgr/webpack@8.1.0(typescript@5.9.3)':
+  '@svgr/webpack@8.1.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/plugin-transform-react-constant-elements': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-react': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
-      '@svgr/core': 8.1.0(typescript@5.9.3)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-transform-react-constant-elements': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/preset-react': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@5.9.3)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(supports-color@7.2.0)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9848,13 +10006,13 @@ snapshots:
 
   '@tokenizer/token@0.3.0': {}
 
-  '@tria-plc/iamui@file:local-packages/tria-plc-iamui-0.1.1.tgz(99cda88e492750b0ffad5cfcdbb8ec87)':
+  '@tria-plc/iamui@file:local-packages/tria-plc-iamui-0.1.1.tgz(1492b51f4234d0fc1f578aaa88b4363f)':
     dependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
       '@hookform/resolvers': 5.9.1(@standard-schema/spec@1.1.0)(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.85.0(react@19.2.8))(zod@3.25.76)
       '@lottiefiles/react-lottie-player': 3.6.0(react@19.2.8)
-      '@mantine/charts': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1))
+      '@mantine/charts': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1))
       '@mantine/core': 7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@mantine/dates': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@mantine/hooks': 7.17.8(react@19.2.8)
@@ -9881,8 +10039,8 @@ snapshots:
       '@radix-ui/react-tabs': 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-toast': 1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@react-pdf/renderer': 4.6.1(react@19.2.8)
       '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)
       '@tabler/icons-react': 3.46.0(react@19.2.8)
@@ -9894,7 +10052,7 @@ snapshots:
       '@types/dompurify': 3.2.0
       '@types/node': 24.13.3
       '@types/tinymce': 4.6.9
-      axios: 1.19.0
+      axios: 1.19.0(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0)
       class-variance-authority: 0.7.1
       clsx: 2.1.1
       cmdk: 1.1.1(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9914,14 +10072,14 @@ snapshots:
       lodash: 4.18.1
       lucide-react: 0.513.0(react@19.2.8)
       mantine-react-table: 2.0.0-beta.9(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/dates@7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mantine/hooks@7.17.8(react@19.2.8))(@tabler/icons-react@3.46.0(react@19.2.8))(clsx@2.1.1)(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      mui-ethiopian-datepicker: 0.3.2(a59154ff32ab88a25ffac0015506cc13)
+      mui-ethiopian-datepicker: 0.3.2(ab5ed0d6914af7ac776fe8e57a6c95ee)
       next-themes: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       path: 0.12.7
       pdf-lib: 1.17.1
       qs: 6.15.3
       react: 19.2.8
       react-cookie: 8.1.2(@types/react@19.2.18)(react@19.2.8)
-      react-css-nocode-editor: 1.0.13(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)
+      react-css-nocode-editor: 1.0.13(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)
       react-day-picker: 8.10.2(date-fns@3.6.0)(react@19.2.8)
       react-dom: 19.2.8(react@19.2.8)
       react-dropzone: 14.4.1(react@19.2.8)
@@ -9936,9 +10094,9 @@ snapshots:
       react-resizable-panels: 3.0.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react-router-dom: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@19.2.18)(prop-types@15.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      recharts: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1)
+      recharts: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1)
       rollup-plugin-visualizer: 7.1.1(rollup@4.62.4)
-      socket.io-client: 4.8.3
+      socket.io-client: 4.8.3(supports-color@7.2.0)
       sonner: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       tailwind-merge: 3.6.0
       tailwind-scrollbar-hide: 4.0.0(tailwindcss@4.3.3)
@@ -10125,15 +10283,15 @@ snapshots:
 
   '@types/use-sync-external-store@0.0.6': {}
 
-  '@typescript-eslint/eslint-plugin@8.67.0(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.67.0(@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3))(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.67.0
-      '@typescript-eslint/type-utils': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.67.0
-      eslint: 9.39.5(jiti@1.21.7)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       ignore: 7.0.6
       natural-compare: 1.4.0
       ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -10141,23 +10299,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.67.0
       '@typescript-eslint/types': 8.67.0
-      '@typescript-eslint/typescript-estree': 8.67.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.67.0(supports-color@7.2.0)(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.67.0
-      debug: 4.4.3
-      eslint: 9.39.5(jiti@1.21.7)
+      debug: 4.4.3(supports-color@7.2.0)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.67.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.67.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.67.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.67.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -10171,13 +10329,13 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.67.0
-      '@typescript-eslint/typescript-estree': 8.67.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.5(jiti@1.21.7)
+      '@typescript-eslint/typescript-estree': 8.67.0(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+      debug: 4.4.3(supports-color@7.2.0)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -10185,13 +10343,13 @@ snapshots:
 
   '@typescript-eslint/types@8.67.0': {}
 
-  '@typescript-eslint/typescript-estree@8.67.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.67.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.67.0(typescript@5.9.3)
+      '@typescript-eslint/project-service': 8.67.0(supports-color@7.2.0)(typescript@5.9.3)
       '@typescript-eslint/tsconfig-utils': 8.67.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.67.0
       '@typescript-eslint/visitor-keys': 8.67.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       minimatch: 10.2.6
       semver: 7.8.5
       tinyglobby: 0.2.17
@@ -10200,13 +10358,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.67.0(eslint@9.39.5(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.67.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.10.1(eslint@9.39.5(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.10.1(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))
       '@typescript-eslint/scope-manager': 8.67.0
       '@typescript-eslint/types': 8.67.0
-      '@typescript-eslint/typescript-estree': 8.67.0(typescript@5.9.3)
-      eslint: 9.39.5(jiti@1.21.7)
+      '@typescript-eslint/typescript-estree': 8.67.0(supports-color@7.2.0)(typescript@5.9.3)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -10216,11 +10374,11 @@ snapshots:
       '@typescript-eslint/types': 8.67.0
       eslint-visitor-keys: 5.0.1
 
-  '@vitejs/plugin-react@4.7.0(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))':
+  '@vitejs/plugin-react@4.7.0(supports-color@7.2.0)(vite@7.3.6(@types/node@22.20.1)(jiti@1.21.7)(lightningcss@1.32.0)(terser@5.50.0)(yaml@2.9.0))':
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
@@ -10355,6 +10513,9 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  abbrev@1.1.1:
+    optional: true
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -10378,12 +10539,6 @@ snapshots:
 
   adm-zip@0.6.0: {}
 
-  agent-base@6.0.2:
-    dependencies:
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   agent-base@6.0.2(supports-color@7.2.0):
     dependencies:
       debug: 4.4.3(supports-color@7.2.0)
@@ -10432,6 +10587,15 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.2
 
+  aproba@2.1.0:
+    optional: true
+
+  are-we-there-yet@2.0.0:
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+    optional: true
+
   arg@5.0.2: {}
 
   argparse@2.0.1: {}
@@ -10469,22 +10633,22 @@ snapshots:
       - debug
       - supports-color
 
-  axios@1.19.0:
+  axios@1.19.0(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
-      follow-redirects: 1.16.0
+      follow-redirects: 1.16.0(debug@4.4.3(supports-color@7.2.0))
       form-data: 4.0.6
-      https-proxy-agent: 5.0.1
+      https-proxy-agent: 5.0.1(supports-color@7.2.0)
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
       - supports-color
 
-  babel-plugin-const-enum@1.2.0(@babel/core@7.29.7):
+  babel-plugin-const-enum@1.2.0(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
-      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
-      '@babel/traverse': 7.29.8
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10494,55 +10658,55 @@ snapshots:
       cosmiconfig: 7.1.0
       resolve: 1.22.12
 
-  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7):
+  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
       '@babel/compat-data': 7.29.7
-      '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7):
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       core-js-compat: 3.50.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.7):
+  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
       core-js-compat: 3.50.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.7):
+  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-styled-components@2.3.0(@babel/core@7.29.7)(styled-components@5.3.11(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8))(supports-color@5.5.0):
+  babel-plugin-styled-components@2.3.0(@babel/core@7.29.7(supports-color@7.2.0))(styled-components@5.3.11(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8))(supports-color@5.5.0):
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-annotate-as-pure': 7.29.7
       '@babel/helper-module-imports': 7.29.7(supports-color@5.5.0)
-      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
       picomatch: 4.0.5
-      styled-components: 5.3.11(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)
+      styled-components: 5.3.11(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.29.7)(@babel/traverse@7.29.8):
+  babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.29.7(supports-color@7.2.0))(@babel/traverse@7.29.8(supports-color@7.2.0)):
     dependencies:
-      '@babel/core': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
     optionalDependencies:
-      '@babel/traverse': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
 
   balanced-match@1.0.2: {}
 
@@ -10574,11 +10738,11 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  body-parser@1.20.6:
+  body-parser@1.20.6(supports-color@7.2.0):
     dependencies:
       bytes: 3.1.2
       content-type: 1.0.5
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@7.2.0)
       depd: 2.0.0
       destroy: 1.2.0
       http-errors: 2.0.1
@@ -10664,6 +10828,16 @@ snapshots:
 
   caniuse-lite@1.0.30001809: {}
 
+  canvas@2.11.2(encoding@0.1.13)(supports-color@7.2.0):
+    dependencies:
+      '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)(supports-color@7.2.0)
+      nan: 2.28.0
+      simple-get: 3.1.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
   canvg@3.0.11:
     dependencies:
       '@babel/runtime': 7.29.7
@@ -10700,6 +10874,9 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chownr@2.0.0:
+    optional: true
+
   chrome-trace-event@1.0.4: {}
 
   class-variance-authority@0.7.1:
@@ -10756,6 +10933,9 @@ snapshots:
     dependencies:
       color-name: 2.1.1
 
+  color-support@1.1.3:
+    optional: true
+
   columnify@1.6.0:
     dependencies:
       strip-ansi: 6.0.1
@@ -10783,6 +10963,9 @@ snapshots:
 
   confusing-browser-globals@1.0.11: {}
 
+  console-control-strings@1.1.0:
+    optional: true
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -10924,13 +11107,11 @@ snapshots:
 
   dayjs@1.11.23: {}
 
-  debug@2.6.9:
+  debug@2.6.9(supports-color@7.2.0):
     dependencies:
       ms: 2.0.0
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 7.2.0
 
   debug@4.4.3(supports-color@5.5.0):
     dependencies:
@@ -10946,6 +11127,11 @@ snapshots:
 
   decimal.js-light@2.5.1: {}
 
+  decompress-response@4.2.1:
+    dependencies:
+      mimic-response: 2.1.0
+    optional: true
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -10967,6 +11153,9 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
+  delegates@1.0.0:
+    optional: true
+
   depd@2.0.0: {}
 
   dequal@2.0.3: {}
@@ -11055,10 +11244,10 @@ snapshots:
     dependencies:
       once: 1.4.0
 
-  engine.io-client@6.6.6:
+  engine.io-client@6.6.6(supports-color@7.2.0):
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       engine.io-parser: 5.2.3
       ws: 8.21.3
       xmlhttprequest-ssl: 2.1.2
@@ -11140,9 +11329,9 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.5(jiti@1.21.7)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0)):
     dependencies:
-      eslint: 9.39.5(jiti@1.21.7)
+      eslint: 9.39.5(jiti@1.21.7)(supports-color@7.2.0)
 
   eslint-scope@5.1.1:
     dependencies:
@@ -11160,14 +11349,14 @@ snapshots:
 
   eslint-visitor-keys@5.0.1: {}
 
-  eslint@9.39.5(jiti@1.21.7):
+  eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.10.1(eslint@9.39.5(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.10.1(eslint@9.39.5(jiti@1.21.7)(supports-color@7.2.0))
       '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.21.2
+      '@eslint/config-array': 0.21.2(supports-color@7.2.0)
       '@eslint/config-helpers': 0.4.2
       '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.6
+      '@eslint/eslintrc': 3.3.6(supports-color@7.2.0)
       '@eslint/js': 9.39.5
       '@eslint/plugin-kit': 0.4.1
       '@humanfs/node': 0.16.8
@@ -11177,7 +11366,7 @@ snapshots:
       ajv: 6.15.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -11249,21 +11438,21 @@ snapshots:
 
   expect-type@1.4.0: {}
 
-  express@4.22.2:
+  express@4.22.2(supports-color@7.2.0):
     dependencies:
       accepts: 1.3.8
       array-flatten: 1.1.1
-      body-parser: 1.20.6
+      body-parser: 1.20.6(supports-color@7.2.0)
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.0.7
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@7.2.0)
       depd: 2.0.0
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
-      finalhandler: 1.3.2
+      finalhandler: 1.3.2(supports-color@7.2.0)
       fresh: 0.5.2
       http-errors: 2.0.1
       merge-descriptors: 1.0.3
@@ -11275,8 +11464,8 @@ snapshots:
       qs: 6.15.3
       range-parser: 1.2.1
       safe-buffer: 5.2.1
-      send: 0.19.2
-      serve-static: 1.16.3
+      send: 0.19.2(supports-color@7.2.0)
+      serve-static: 1.16.3(supports-color@7.2.0)
       setprototypeof: 1.2.0
       statuses: 2.0.2
       type-is: 1.6.18
@@ -11339,9 +11528,9 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  finalhandler@1.3.2:
+  finalhandler@1.3.2(supports-color@7.2.0):
     dependencies:
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@7.2.0)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       on-finished: 2.4.1
@@ -11378,16 +11567,10 @@ snapshots:
 
   flatted@3.4.4: {}
 
-  follow-redirects@1.16.0: {}
-
   follow-redirects@1.16.0(debug@4.4.3(supports-color@7.2.0)):
     optionalDependencies:
       debug: 4.4.3(supports-color@7.2.0)
 
-  follow-redirects@1.16.0(debug@4.4.3):
-    optionalDependencies:
-      debug: 4.4.3
-
   fontkit@2.0.4:
     dependencies:
       '@swc/helpers': 0.5.23
@@ -11434,6 +11617,11 @@ snapshots:
       jsonfile: 6.2.1
       universalify: 2.0.1
 
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+    optional: true
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.2:
@@ -11444,6 +11632,19 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  gauge@3.0.2:
+    dependencies:
+      aproba: 2.1.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    optional: true
+
   generic-names@4.0.0:
     dependencies:
       loader-utils: 3.3.1
@@ -11482,6 +11683,16 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.5
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    optional: true
+
   glob@8.1.0:
     dependencies:
       fs.realpath: 1.0.0
@@ -11508,6 +11719,9 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  has-unicode@2.0.1:
+    optional: true
+
   hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
@@ -11545,45 +11759,37 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
-  http-proxy-middleware@3.0.7:
+  http-proxy-middleware@3.0.7(supports-color@7.2.0):
     dependencies:
       '@types/http-proxy': 1.17.17
-      debug: 4.4.3
-      http-proxy: 1.18.1(debug@4.4.3)
+      debug: 4.4.3(supports-color@7.2.0)
+      http-proxy: 1.18.1(debug@4.4.3(supports-color@7.2.0))
       is-glob: 4.0.3
       is-plain-object: 5.0.0
       micromatch: 4.0.8
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy@1.18.1:
+  http-proxy@1.18.1(debug@4.4.3(supports-color@7.2.0)):
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.16.0
+      follow-redirects: 1.16.0(debug@4.4.3(supports-color@7.2.0))
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
 
-  http-proxy@1.18.1(debug@4.4.3):
-    dependencies:
-      eventemitter3: 4.0.7
-      follow-redirects: 1.16.0(debug@4.4.3)
-      requires-port: 1.0.0
-    transitivePeerDependencies:
-      - debug
-
-  http-server@14.1.1:
+  http-server@14.1.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0):
     dependencies:
       basic-auth: 2.0.1
       chalk: 4.1.2
       corser: 2.0.1
       he: 1.2.0
       html-encoding-sniffer: 3.0.0
-      http-proxy: 1.18.1
+      http-proxy: 1.18.1(debug@4.4.3(supports-color@7.2.0))
       mime: 1.6.0
       minimist: 1.2.8
       opener: 1.5.2
-      portfinder: 1.0.38
+      portfinder: 1.0.38(supports-color@7.2.0)
       secure-compare: 3.0.1
       union: 0.5.0
       url-join: 4.0.1
@@ -11591,13 +11797,6 @@ snapshots:
       - debug
       - supports-color
 
-  https-proxy-agent@5.0.1:
-    dependencies:
-      agent-base: 6.0.2
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   https-proxy-agent@5.0.1(supports-color@7.2.0):
     dependencies:
       agent-base: 6.0.2(supports-color@7.2.0)
@@ -11975,6 +12174,9 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-response@2.1.0:
+    optional: true
+
   mini-svg-data-uri@1.4.4: {}
 
   minimatch@10.2.5:
@@ -11995,17 +12197,36 @@ snapshots:
 
   minimist@1.2.8: {}
 
-  minimizer-webpack-plugin@5.6.1(lightningcss@1.32.0)(postcss@8.5.26)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26)):
+  minimizer-webpack-plugin@5.6.1(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       terser: 5.50.0
-      webpack: 5.109.2(lightningcss@1.32.0)(postcss@8.5.26)
+      webpack: 5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)
     optionalDependencies:
+      csso: 5.0.5
+      esbuild: 0.28.2
       lightningcss: 1.32.0
       postcss: 8.5.26
 
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+    optional: true
+
+  minipass@5.0.0:
+    optional: true
+
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    optional: true
+
+  mkdirp@1.0.4:
+    optional: true
+
   motion-dom@12.43.0:
     dependencies:
       motion-utils: 12.39.0
@@ -12016,13 +12237,13 @@ snapshots:
 
   ms@2.1.3: {}
 
-  mui-ethiopian-datepicker@0.3.2(a59154ff32ab88a25ffac0015506cc13):
+  mui-ethiopian-datepicker@0.3.2(ab5ed0d6914af7ac776fe8e57a6c95ee):
     dependencies:
-      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
-      '@mui/icons-material': 5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@mui/x-date-pickers': 6.20.2(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(date-fns@4.4.0)(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0)
+      '@mui/icons-material': 5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react@19.2.18)(react@19.2.8)
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@mui/x-date-pickers': 6.20.2(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8)(supports-color@7.2.0))(@types/react@19.2.18)(react@19.2.8))(@types/react@19.2.18)(date-fns@4.4.0)(dayjs@1.11.23)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       date-fns: 3.6.0
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -12033,6 +12254,9 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nan@2.28.0:
+    optional: true
+
   nanoid@3.3.18: {}
 
   natural-compare@1.4.0: {}
@@ -12064,6 +12288,11 @@ snapshots:
 
   node-releases@2.0.53: {}
 
+  nopt@5.0.0:
+    dependencies:
+      abbrev: 1.1.1
+    optional: true
+
   normalize-path@3.0.0: {}
 
   normalize-svg-path@1.1.0:
@@ -12074,6 +12303,14 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  npmlog@5.0.1:
+    dependencies:
+      are-we-there-yet: 2.0.0
+      console-control-strings: 1.1.0
+      gauge: 3.0.2
+      set-blocking: 2.0.0
+    optional: true
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -12304,6 +12541,9 @@ snapshots:
 
   path-exists@4.0.0: {}
 
+  path-is-absolute@1.0.1:
+    optional: true
+
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
@@ -12312,6 +12552,9 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  path2d-polyfill@2.0.1:
+    optional: true
+
   path@0.12.7:
     dependencies:
       process: 0.11.10
@@ -12326,6 +12569,14 @@ snapshots:
       pako: 1.0.11
       tslib: 1.14.1
 
+  pdfjs-dist@3.11.174(encoding@0.1.13)(supports-color@7.2.0):
+    optionalDependencies:
+      canvas: 2.11.2(encoding@0.1.13)(supports-color@7.2.0)
+      path2d-polyfill: 2.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   pdfjs-dist@5.4.296:
     optionalDependencies:
       '@napi-rs/canvas': 0.1.100
@@ -12363,10 +12614,10 @@ snapshots:
     dependencies:
       fflate: 0.8.3
 
-  portfinder@1.0.38:
+  portfinder@1.0.38(supports-color@7.2.0):
     dependencies:
       async: 3.2.6
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -12509,11 +12760,11 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  react-css-nocode-editor@1.0.13(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8):
+  react-css-nocode-editor@1.0.13(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8):
     dependencies:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      styled-components: 5.3.11(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)
+      styled-components: 5.3.11(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)
     transitivePeerDependencies:
       - '@babel/core'
       - react-is
@@ -12724,7 +12975,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.2
 
-  recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8)(redux@5.0.1):
+  recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1):
     dependencies:
       '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)
       clsx: 2.1.1
@@ -12734,7 +12985,7 @@ snapshots:
       immer: 11.1.17
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-is: 16.13.1
+      react-is: 19.2.8
       react-redux: 9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
       reselect: 5.2.0
       tiny-invariant: 1.3.3
@@ -12807,6 +13058,11 @@ snapshots:
   rgbcolor@1.0.1:
     optional: true
 
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+    optional: true
+
   rollup-plugin-typescript2@0.36.0(rollup@4.62.4)(typescript@5.9.3):
     dependencies:
       '@rollup/pluginutils': 4.2.1
@@ -12898,9 +13154,9 @@ snapshots:
 
   semver@7.8.5: {}
 
-  send@0.19.2:
+  send@0.19.2(supports-color@7.2.0):
     dependencies:
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@7.2.0)
       depd: 2.0.0
       destroy: 1.2.0
       encodeurl: 2.0.0
@@ -12916,15 +13172,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serve-static@1.16.3:
+  serve-static@1.16.3(supports-color@7.2.0):
     dependencies:
       encodeurl: 2.0.0
       escape-html: 1.0.3
       parseurl: 1.3.3
-      send: 0.19.2
+      send: 0.19.2(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
+  set-blocking@2.0.0:
+    optional: true
+
   set-cookie-parser@2.7.2: {}
 
   setprototypeof@1.2.0: {}
@@ -12971,6 +13230,16 @@ snapshots:
 
   signature_pad@2.3.2: {}
 
+  simple-concat@1.0.1:
+    optional: true
+
+  simple-get@3.1.1:
+    dependencies:
+      decompress-response: 4.2.1
+      once: 1.4.0
+      simple-concat: 1.0.1
+    optional: true
+
   smol-toml@1.6.1: {}
 
   snake-case@3.0.4:
@@ -12978,21 +13247,21 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
-  socket.io-client@4.8.3:
+  socket.io-client@4.8.3(supports-color@7.2.0):
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.4.3
-      engine.io-client: 6.6.6
-      socket.io-parser: 4.2.7
+      debug: 4.4.3(supports-color@7.2.0)
+      engine.io-client: 6.6.6(supports-color@7.2.0)
+      socket.io-parser: 4.2.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  socket.io-parser@4.2.7:
+  socket.io-parser@4.2.7(supports-color@7.2.0):
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -13074,19 +13343,19 @@ snapshots:
       '@tokenizer/token': 0.3.0
       peek-readable: 5.4.2
 
-  styled-components@5.3.11(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8):
+  styled-components@5.3.11(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8):
     dependencies:
       '@babel/helper-module-imports': 7.29.7(supports-color@5.5.0)
       '@babel/traverse': 7.29.8(supports-color@5.5.0)
       '@emotion/is-prop-valid': 1.4.0
       '@emotion/stylis': 0.8.5
       '@emotion/unitless': 0.7.5
-      babel-plugin-styled-components: 2.3.0(@babel/core@7.29.7)(styled-components@5.3.11(@babel/core@7.29.7)(react-dom@19.2.8(react@19.2.8))(react-is@16.13.1)(react@19.2.8))(supports-color@5.5.0)
+      babel-plugin-styled-components: 2.3.0(@babel/core@7.29.7(supports-color@7.2.0))(styled-components@5.3.11(@babel/core@7.29.7(supports-color@7.2.0))(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8))(supports-color@5.5.0)
       css-to-react-native: 3.2.0
       hoist-non-react-statics: 3.3.2
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-is: 16.13.1
+      react-is: 19.2.8
       shallowequal: 1.1.0
       supports-color: 5.5.0
     transitivePeerDependencies:
@@ -13189,6 +13458,16 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    optional: true
+
   terser@5.50.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
@@ -13474,7 +13753,7 @@ snapshots:
 
   webpack-sources@3.5.1: {}
 
-  webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26):
+  webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26):
     dependencies:
       '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
@@ -13490,7 +13769,7 @@ snapshots:
       events: 3.3.0
       graceful-fs: 4.2.11
       mime-db: 1.54.0
-      minimizer-webpack-plugin: 5.6.1(lightningcss@1.32.0)(postcss@8.5.26)(webpack@5.109.2(lightningcss@1.32.0)(postcss@8.5.26))
+      minimizer-webpack-plugin: 5.6.1(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26)(webpack@5.109.2(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.32.0)(postcss@8.5.26))
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.3
@@ -13528,6 +13807,11 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  wide-align@1.1.5:
+    dependencies:
+      string-width: 4.2.3
+    optional: true
+
   wmf@1.0.2: {}
 
   word-wrap@1.2.5: {}
@@ -13573,6 +13857,9 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yallist@4.0.0:
+    optional: true
+
   yaml@1.10.3: {}
 
   yaml@2.9.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 000000000..cad1e7a06
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+allowBuilds:
+  canvas: true
+  core-js: false
+  esbuild: false
+  nx: false

From 0832e5d3393689310be83cf64a83e413f1cc537d Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Wed, 19 Aug 2026 10:23:57 +0300
Subject: [PATCH 40/58] fixes

---
 .../components/RequireSeafarerProfile.tsx     | 63 ++++++++++---------
 apps/portal/src/app/i18n/locales/am.ts        |  2 +
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
index 8ff0aed26..108daa93a 100644
--- a/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
+++ b/apps/portal/src/app/features/profile/components/RequireSeafarerProfile.tsx
@@ -26,12 +26,8 @@ export const SEAFARER_PROFILE_REQUIREMENT: ProfileRequirement = {
     "primaryPhoneNumber",
     "email",
   ],
-  // Translation key, not literal text — `ProfileRequirementGate` runs it
-  // through `t()` at render time (it can't be translated here: this object
-  // is built at module scope, before any component or `useTranslation` call
-  // exists). Reuses `profileGate.seafarerReason`, the same sentence already
-  // shown by the seafarer-redirect toast below.
-  reason: 'profileGate.seafarerReason',
+  reason:
+    "Seafarer registration is built from your profile — these details fill it in for you.",
 };
 
 const REGISTRATION_TYPE_KEY = "SEAFARER_REGISTRATION";
@@ -70,32 +66,41 @@ export function RequireSeafarerProfile({
   if (!gated) return <>{children}</>;
 
   if (isLoading) {
-    return <PageLoader label={t('profileGate.checkingProfile')} height={350} />;
+    return (
+      <Center h={200}>
+        <Loader />
+      </Center>
+    );
   }
 
-  // Already registered: the number is permanent and the server now refuses a
-  // second registration outright (409 seafarer_already_registered). Sending
-  // them on beats opening a wizard whose first act — creating the draft — is
-  // the call that fails. Checked after the loading guard so an unresolved
-  // profile is never read as "not registered".
-  if (profile?.seafarerNumber) {
-    return <Navigate to="/seaman-book" replace />;
+  // The number is permanent and the server refuses a second registration.
+  // Keep the registration tab useful by opening the completed application in
+  // its read-only summary instead.
+  if (registered) {
+    if (loadingApplications) {
+      return (
+        <Center h={200}>
+          <Loader />
+        </Center>
+      );
+    }
+    const registration = applications?.items.find(
+      (application) => application.licenseType?.key === REGISTRATION_TYPE_KEY,
+    );
+    if (registration) {
+      return (
+        <Navigate
+          to={`/licensing/${REGISTRATION_TYPE_KEY}/applications/${registration.id}`}
+          replace
+        />
+      );
+    }
   }
 
-  // A failed lookup must not lock anyone out — the server still refuses the
-  // application for a profile it can't fill in from.
+  // A failed lookup must not lock anyone out — an unreadable profile says
+  // nothing about whether this applicant is already registered, and the
+  // server refuses a duplicate registration regardless.
   if (error) return <>{children}</>;
 
-  if (gaps.length === 0) return <>{children}</>;
-
-  // Gaps while a save is still landing are not an answer yet. Saving a
-  // profile tab invalidates this query and the applicant may already be
-  // headed back here in the same tick — deciding on the pre-save cache would
-  // bounce them off the screen they just finished.
-  if (isFetching) {
-    return <PageLoader label={t('profileGate.checkingProfile')} height={350} />;
-  }
-
-  const target = PROFILE_FIELD_SECTION[gaps[0]];
-  return <Navigate to={`/profile#${target}`} replace />;
-}
+  return <>{children}</>;
+}
\ No newline at end of file
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index dfb25a26b..42260e70a 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -286,9 +286,11 @@ export const am: Translations = {
     addDetails: 'እነዚህን መረጃዎች ጨምር',
     viewProfile: 'ሙሉ መገለጫ ይመልከቱ',
     seafarerReason: 'የባህረኞች ምዝገባ የሚዘጋጀው ከመገለጫዎ ነው — እነዚህ መረጃዎች ራሱ ይሞላሉ።',
+     checkingProfile: 'የባህረኛ መገለጫ በመፈተሽ ላይ…',
     seafarerBanner:
       'የባህረኛ ምዝገባ እነዚህን መረጃዎች ይጠይቃል፤ ከጸደቀ በኋላም መገለጫዎን ያዘምናል። እዚህ አስቀድመው ቢሞሏቸው እዚያ እንደገና መተየብ አይኖርብዎትም።',
   },
+  
 
   profileSections: {
     personal: 'የግል መረጃ',

From 9185df64b924fe3bc54c4d861aecf76c25912aa5 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Wed, 19 Aug 2026 10:31:13 +0300
Subject: [PATCH 41/58] fixes

---
 .../features/profile/pages/ProfilePage.tsx    | 17 +++++++---
 libs/auth/src/lib/pages/SignupPage.tsx        | 33 +++++--------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 9efa3855e..73d9a0f34 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -49,7 +49,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
-import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, getCountryCode, splitPersonName, joinPersonName } from '@ema-platform/ui';
+import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, getCountryCode } from '@ema-platform/ui';
 import { useApiMutation, useLocalized } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS, setUser, useCurrentProfile, usePermissions } from '@ema-platform/auth';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '../../../i18n/config';
@@ -89,6 +89,15 @@ function getInitials(name: string, fallback: string) {
   return letters.toUpperCase();
 }
 
+function splitProfileName(fullName: string) {
+  const [firstName = '', middleName = '', ...lastName] = fullName.trim().split(/\s+/);
+  return { firstName, middleName, lastName: lastName.join(' ') };
+}
+
+function formatProfileName({ firstName, middleName, lastName }: Pick<ProfileValues, 'firstName' | 'middleName' | 'lastName'>) {
+  return [firstName, middleName, lastName].filter(Boolean).join(' ');
+}
+
 function normalizeName(name: string) {
   return name.trim().replace(/\s+/g, ' ');
 }
@@ -196,7 +205,7 @@ export function ProfilePage() {
     // already holds so the form does not flash empty on a refetch.
     const currentProfile = resolvedProfile ?? storedProfile;
     if (currentProfile) {
-      const accountName = user?.name?.en ? splitPersonName(user.name.en) : null;
+      const accountName = user?.name?.en ? splitProfileName(user.name.en) : null;
       setLoadedProfile({
         professionId: currentProfile.professionId || currentProfile.profession?.id || '',
         firstName: accountName?.firstName || currentProfile.firstName || '',
@@ -277,7 +286,7 @@ export function ProfilePage() {
 
     setIsSavingProfile(true);
     try {
-      const profileName = splitPersonName(values.nameEn);
+      const profileName = splitProfileName(values.nameEn);
       const saves: Promise<unknown>[] = [
         updateTrigger({
           url: '/auth/update-profile',
@@ -354,7 +363,7 @@ export function ProfilePage() {
   const onSaveProfile = async (values: ProfileValues) => {
     if (!profileId) return;
 
-    const fullName = joinPersonName(values);
+    const fullName = formatProfileName(values);
     if (user && normalizeName(fullName) !== normalizeName(user.name.en)) {
       notify.error(t('profile.nameMismatch'));
       return;
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index c8d4133ad..90d72b650 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/libs/auth/src/lib/pages/SignupPage.tsx
@@ -29,7 +29,7 @@ import { useNavigate, Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useApiMutation } from '@ema-platform/api';
-import { useErrorHandler, passwordSchema, PasswordRequirements, joinPersonName } from '@ema-platform/ui';
+import { useErrorHandler, passwordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { AuthShell } from '../components/AuthShell';
 import { loginSuccess, setUser } from '../store/auth.slice';
 import type { AuthUser } from '../types/auth.types';
@@ -124,7 +124,7 @@ export function SignupPage() {
         username: values.username,
         phoneNumber: values.phoneNumber,
         userType: values.userType,
-        name: { en: joinPersonName(values), am: values.nameAm ?? '' },
+        name: { en: values.nameEn, am: values.nameAm ?? '' },
         password: values.password,
         confirmPassword: values.confirmPassword,
       };
@@ -213,38 +213,23 @@ export function SignupPage() {
 
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap="md">
-            <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
-              <TextInput
-                label={t('signup.firstNameLabel', 'First name')}
-                placeholder={t('signup.firstNamePlaceholder', 'Abebe')}
-                leftSection={<IconUser size={18} />}
-                error={errors.firstName?.message}
-                {...register('firstName')}
-              />
+            <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
                 label={t('signup.nameEnLabel', 'Full name (English)')}
                 placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
                 leftSection={<IconUser size={18} />}
-                error={errors.middleName?.message}
-                {...register('middleName')}
+                error={errors.nameEn?.message}
+                {...register('nameEn')}
               />
               <TextInput
-                label={t('signup.lastNameLabel', 'Last name')}
-                placeholder={t('signup.lastNamePlaceholder', 'Bekele')}
+                label={t('signup.nameAmLabel', 'Name (Amharic)')}
+                placeholder={t('signup.nameAmPlaceholder', 'ስም')}
                 leftSection={<IconUser size={18} />}
-                error={errors.lastName?.message}
-                {...register('lastName')}
+                error={errors.nameAm?.message}
+                {...register('nameAm')}
               />
             </SimpleGrid>
 
-            <TextInput
-              label={t('signup.nameAmLabel', 'Name (Amharic)')}
-              placeholder={t('signup.nameAmPlaceholder', 'ስም')}
-              leftSection={<IconUser size={18} />}
-              error={errors.nameAm?.message}
-              {...register('nameAm')}
-            />
-
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
                 label={t('signup.emailLabel', 'Email address')}

From 1624cc16be2a7daa08e774555c8a8ffd34d99e52 Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Wed, 19 Aug 2026 10:31:53 +0300
Subject: [PATCH 42/58] fixes

---
 .../src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
index f5cf2339b..29f4490e8 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
@@ -172,7 +172,6 @@ function SeaServiceTab() {
   const [grossTonnage, setGrossTonnage] = useState<number | ''>('');
   const [evidenceFile, setEvidenceFile] = useState<File | null>(null);
   const [uploadingEvidence, setUploadingEvidence] = useState(false);
-  const [evidenceFile, setEvidenceFile] = useState<File | null>(null);
   const [uploading, setUploading] = useState(false);
 
   const openCreate = () => {

From 0e4db933969e16e9c6f371c531ede5f249ab178a Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:05:21 +0000
Subject: [PATCH 43/58] fixes

---
 libs/ui/src/lib/layout/AppSidebar.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index 4ef9cd12a..81825eee7 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -110,13 +110,18 @@ function SidebarItem({ item, collapsed, activePath, onNavigate, opened, onToggle
   );
 
   // Parent headers always carry a chevron so the expand/collapse state is
-  // never ambiguous, even when a badge is also present.
+  // never ambiguous, even when a badge is also present. One icon rotated
+  // (rather than swapping icons) so the toggle animates instead of jumping.
   const chevron = hasChildren ? (
-    opened ? (
-      <IconChevronDown size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-    ) : (
-      <IconChevronRight size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-    )
+    <IconChevronRight
+      size={14}
+      stroke={1.8}
+      color="var(--mantine-color-gray-5)"
+      style={{
+        transform: opened ? 'rotate(90deg)' : 'rotate(0deg)',
+        transition: 'transform 200ms ease',
+      }}
+    />
   ) : null;
 
   const soonBadge = (

From 290f6dfd9c4eb5cfa2421ef24385b278c38d077c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:10:09 +0000
Subject: [PATCH 44/58] UI fixes

---
 libs/ui/src/lib/layout/AppSidebar.tsx | 43 ++++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index 81825eee7..de1fdfcaf 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import {
   AppShell,
   Badge,
+  Collapse,
   Group,
   NavLink,
   Popover,
@@ -14,7 +15,6 @@ import {
   useMantineColorScheme,
 } from '@mantine/core';
 import {
-  IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
 } from '@tabler/icons-react';
@@ -410,11 +410,15 @@ export function AppSidebar({
                     >
                       {t(section.label)}
                     </Text>
-                    {sectionOpened ? (
-                      <IconChevronDown size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-                    ) : (
-                      <IconChevronRight size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-                    )}
+                    <IconChevronRight
+                      size={14}
+                      stroke={1.8}
+                      color="var(--mantine-color-gray-5)"
+                      style={{
+                        transform: sectionOpened ? 'rotate(90deg)' : 'rotate(0deg)',
+                        transition: 'transform 200ms ease',
+                      }}
+                    />
                   </UnstyledButton>
                 )}
                 {section.label && collapsed && sectionIndex > 0 && (
@@ -426,18 +430,21 @@ export function AppSidebar({
                     }}
                   />
                 )}
-                {(!section.label || sectionOpened || collapsed) &&
-                  section.items.map((item) => (
-                    <SidebarItem
-                      key={item.label}
-                      item={item}
-                      collapsed={collapsed}
-                      activePath={activePath}
-                      onNavigate={onNavigate}
-                      opened={openMap[item.label] ?? isBranchActive(item, activePath)}
-                      onToggle={(next) => setItemOpened(item.label, next)}
-                    />
-                  ))}
+                <Collapse in={!section.label || sectionOpened || collapsed}>
+                  <Stack gap={2}>
+                    {section.items.map((item) => (
+                      <SidebarItem
+                        key={item.label}
+                        item={item}
+                        collapsed={collapsed}
+                        activePath={activePath}
+                        onNavigate={onNavigate}
+                        opened={openMap[item.label] ?? isBranchActive(item, activePath)}
+                        onToggle={(next) => setItemOpened(item.label, next)}
+                      />
+                    ))}
+                  </Stack>
+                </Collapse>
               </Stack>
             );
           })}

From 273a8285707a995058f86dec5e64b4796b32a39a Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:23:04 +0000
Subject: [PATCH 45/58] UI fixes

---
 libs/ui/src/lib/layout/AppSidebar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index de1fdfcaf..5fe8f83f0 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -14,6 +14,7 @@ import {
   rem,
   useMantineColorScheme,
 } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -275,7 +276,7 @@ interface AppSidebarProps {
 
 export function AppSidebar({
   navItems,
-  collapsed,
+  collapsed: collapsedProp,
   activePath,
   onToggleCollapse,
   onNavigate,
@@ -285,6 +286,12 @@ export function AppSidebar({
 }: AppSidebarProps) {
   const { t } = useTranslation();
   const { colorScheme } = useMantineColorScheme();
+  // The icon-rail toggle is a desktop-only affordance (its button is
+  // `visibleFrom="sm"`) — on mobile the sidebar renders in a full-width
+  // drawer, so a `collapsed` state carried over from a prior desktop session
+  // would otherwise show icon-only with no way back. Mobile always expands.
+  const isMobile = useMediaQuery('(max-width: 48em)');
+  const collapsed = collapsedProp && !isMobile;
   const hoverBg = colorScheme === 'dark'
     ? 'var(--mantine-color-dark-6)'
     : 'var(--mantine-color-gray-0)';

From 58f9dd76683b952013df791a4874ec8751401577 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:32:44 +0000
Subject: [PATCH 46/58] UI Fixes

---
 .../src/app/layouts/BackofficeLayout.tsx      | 37 +++++++++++++++++--
 apps/portal/src/app/layouts/PortalLayout.tsx  | 30 ++++++++++++++-
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
index 7e38d5382..a4e467a75 100644
--- a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
+++ b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { AppShell } from '@mantine/core';
+import { AppShell, Drawer } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ export function BackofficeLayout() {
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useAppDispatch();
-  const [opened, { toggle: toggleNav }] = useDisclosure();
+  const [opened, { toggle: toggleNav, close: closeNav }] = useDisclosure();
   const [collapsed, setCollapsed] = useState(false);
   const user = useAppSelector((state) => state.auth.user);
   const layoutMode = useAppSelector((state) => state.preferences.layoutMode);
@@ -141,7 +141,10 @@ export function BackofficeLayout() {
           ? {
               width: collapsed ? 72 : 264,
               breakpoint: "sm",
-              collapsed: { mobile: !opened },
+              // Mobile has its own Drawer below — AppShell's built-in mobile
+              // navbar takes over the full viewport width, which felt like
+              // it swallowed the page. Always collapsed here on mobile.
+              collapsed: { mobile: true },
             }
           : undefined
       }
@@ -222,6 +225,34 @@ export function BackofficeLayout() {
 
       {/* Registered once for the whole backoffice; opens on ⌘K anywhere. */}
       <CommandPalette sections={sections} />
+
+      {/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
+          click) instead of AppShell's full-width mobile navbar. Mirrors the
+          landing page's mobile menu. */}
+      {isSidebar && (
+        <Drawer
+          opened={opened}
+          onClose={closeNav}
+          hiddenFrom="sm"
+          size="75%"
+          padding={0}
+          withCloseButton={false}
+        >
+          <AppSidebar
+            navItems={sections}
+            collapsed={false}
+            activePath={location.pathname}
+            onToggleCollapse={handleToggleCollapse}
+            onNavigate={(item) => {
+              go(item);
+              closeNav();
+            }}
+            brandName={t('app.name')}
+            brandSubtitle={t('app.authority')}
+            brandLogo={<BrandMark size={32} />}
+          />
+        </Drawer>
+      )}
     </AppShell>
   );
 }
diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index 12f0985bc..d38c18ef7 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -1,4 +1,4 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, Drawer } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
   IconArrowsExchange,
@@ -281,7 +281,10 @@ export function PortalLayout() {
       navbar={{
         width: sidebarCollapsed ? 72 : 264,
         breakpoint: "sm",
-        collapsed: { mobile: !navOpened },
+        // Mobile has its own Drawer below — AppShell's built-in mobile
+        // navbar takes over the full viewport width, which felt like it
+        // swallowed the page. Always collapsed here on mobile.
+        collapsed: { mobile: true },
       }}
       padding="lg"
     >
@@ -332,6 +335,29 @@ export function PortalLayout() {
           <Outlet />
         </div>
       </AppShell.Main>
+
+      {/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
+          click) instead of AppShell's full-width mobile navbar. Mirrors the
+          landing page's mobile menu. */}
+      <Drawer
+        opened={navOpened}
+        onClose={closeNav}
+        hiddenFrom="sm"
+        size="75%"
+        padding={0}
+        withCloseButton={false}
+      >
+        <AppSidebar
+          navItems={sections}
+          collapsed={false}
+          activePath={location.pathname}
+          onToggleCollapse={toggleSidebar}
+          onNavigate={go}
+          brandName={t("app.name")}
+          brandSubtitle={t("app.authority")}
+          brandLogo={<BrandMark size={32} />}
+        />
+      </Drawer>
     </AppShell>
   );
 }

From 2978690669f9cbb9c3bf37efe61e456359862334 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:38:37 +0000
Subject: [PATCH 47/58] UI landing

---
 libs/ui/src/lib/landing/LandingPage.tsx | 98 +++++++++++++------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx
index cdafc626d..1d1e01270 100644
--- a/libs/ui/src/lib/landing/LandingPage.tsx
+++ b/libs/ui/src/lib/landing/LandingPage.tsx
@@ -12,6 +12,7 @@ import {
   Container,
   Divider,
   Drawer,
+  Grid,
   Group,
   Paper,
   Select,
@@ -886,60 +887,61 @@ function Faq() {
     <Box id="faq" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
       <Container size="xl">
         <SectionHeading title={t('landing.faq.title')} subtitle={t('landing.faq.eyebrow')} />
-        <SimpleGrid cols={{ base: 1, md: 12 }} spacing="xl">
+        <Grid gutter="xl">
           {/* Left Column: Direct Support Box */}
-          <Paper
-            component={Stack}
-            gap="md"
-            p="xl"
-            radius="lg"
-            withBorder
-            style={{ gridColumn: 'span 4' }}
-            className="ema-landing-hover ema-contact-hq-card"
-          >
-            <ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
-              <IconHelpCircle size={24} />
-            </ThemeIcon>
-
-            <Stack gap={4}>
-              <Text fw={700} fz="lg">
-                {t('landing.faq.eyebrow')}
-              </Text>
-              <Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
-                {t('landing.faq.supportPrompt')}
-              </Text>
-            </Stack>
-
-            <Button
-              component="a"
-              href="#contact"
-              variant="filled"
-              color="emaPrimary"
-              leftSection={<IconMessage size={18} />}
-              radius="md"
+          <Grid.Col span={{ base: 12, md: 4 }}>
+            <Paper
+              component={Stack}
+              gap="md"
+              p="xl"
+              radius="lg"
+              withBorder
+              className="ema-landing-hover ema-contact-hq-card"
             >
-              {t('landing.faq.contactSupport')}
-            </Button>
-
-            <Divider my={4} />
-
-            <Group gap="xs" align="center">
-              <ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
-                <IconPhone size={14} />
+              <ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
+                <IconHelpCircle size={24} />
               </ThemeIcon>
-              <Stack gap={0}>
-                <Text fz="xs" fw={700}>
-                  {t('landing.footer.emergencyLabel')}
+
+              <Stack gap={4}>
+                <Text fw={700} fz="lg">
+                  {t('landing.faq.eyebrow')}
                 </Text>
-                <Text fz="xs" c="dimmed" fw={600}>
-                  {t('landing.footer.emergencyValue')}
+                <Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
+                  {t('landing.faq.supportPrompt')}
                 </Text>
               </Stack>
-            </Group>
-          </Paper>
+
+              <Button
+                component="a"
+                href="#contact"
+                variant="filled"
+                color="emaPrimary"
+                leftSection={<IconMessage size={18} />}
+                radius="md"
+              >
+                {t('landing.faq.contactSupport')}
+              </Button>
+
+              <Divider my={4} />
+
+              <Group gap="xs" align="center">
+                <ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
+                  <IconPhone size={14} />
+                </ThemeIcon>
+                <Stack gap={0}>
+                  <Text fz="xs" fw={700}>
+                    {t('landing.footer.emergencyLabel')}
+                  </Text>
+                  <Text fz="xs" c="dimmed" fw={600}>
+                    {t('landing.footer.emergencyValue')}
+                  </Text>
+                </Stack>
+              </Group>
+            </Paper>
+          </Grid.Col>
 
           {/* Right Column: Accordion Cards */}
-          <Box style={{ gridColumn: 'span 8' }}>
+          <Grid.Col span={{ base: 12, md: 8 }}>
             <Accordion variant="separated" radius="lg" className="ema-faq-accordion">
               {FAQ_KEYS.map((key) => {
                 const Icon = FAQ_ICONS[key];
@@ -965,8 +967,8 @@ function Faq() {
                 );
               })}
             </Accordion>
-          </Box>
-        </SimpleGrid>
+          </Grid.Col>
+        </Grid>
       </Container>
     </Box>
   );

From 4d87d41e55adb46131277b41899a1770ad48cb99 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:48:50 +0000
Subject: [PATCH 48/58] feat: add PdfPreviewModal component and integrate into
 DocumentsTab for centralized PDF viewing

---
 .../components/DocumentsTab.tsx               | 26 +++++++-----
 libs/ui/src/index.ts                          |  1 +
 libs/ui/src/lib/feedback/PdfPreviewModal.tsx  | 40 +++++++++++++++++++
 3 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 libs/ui/src/lib/feedback/PdfPreviewModal.tsx

diff --git a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
index 979ab44a8..7d55d4bce 100644
--- a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
+++ b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
@@ -34,6 +34,7 @@ import {
   type DocumentRequirement,
 } from "@ema-platform/api";
 import { notifications } from "@mantine/notifications";
+import { PdfPreviewModal } from "@ema-platform/ui";
 
 interface DocumentsTabProps {
   applicationId: string;
@@ -441,8 +442,20 @@ export function DocumentsTab({
         );
       })}
 
+      <PdfPreviewModal
+        opened={Boolean(preview) && isPdf}
+        onClose={() => setPreview(null)}
+        url={previewFile?.url ?? ""}
+        title={
+          preview
+            ? localized(requirementByKey.get(preview.documentKey)?.name) ||
+              preview.documentKey
+            : ""
+        }
+      />
+
       <Drawer
-        opened={Boolean(preview)}
+        opened={Boolean(preview) && !isPdf}
         onClose={() => setPreview(null)}
         position="right"
         size="xl"
@@ -458,16 +471,7 @@ export function DocumentsTab({
         returnFocus
       >
         {previewFile?.url ? (
-          isPdf ? (
-            <iframe
-              src={previewFile.url}
-              title={
-                preview?.documentKey ??
-                t("review.documents.previewFallback", "document")
-              }
-              style={{ width: "100%", height: "80vh", border: "none" }}
-            />
-          ) : isImage ? (
+          isImage ? (
             <img
               src={previewFile.url}
               alt={
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 7b0b484c0..422e9d656 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,6 +1,7 @@
 export * from "./lib/input/BilingualInput";
 export * from "./lib/input/AmharicDatePicker";
 export * from "./lib/feedback/ConfirmModal";
+export * from "./lib/feedback/PdfPreviewModal";
 export * from "./lib/feedback/ModalFooter";
 export * from "./lib/feedback/ApiErrorAlert";
 export * from "./lib/feedback/notify";
diff --git a/libs/ui/src/lib/feedback/PdfPreviewModal.tsx b/libs/ui/src/lib/feedback/PdfPreviewModal.tsx
new file mode 100644
index 000000000..91e043c88
--- /dev/null
+++ b/libs/ui/src/lib/feedback/PdfPreviewModal.tsx
@@ -0,0 +1,40 @@
+import { Modal } from '@mantine/core';
+
+interface PdfPreviewModalProps {
+  opened: boolean;
+  onClose: () => void;
+  url: string;
+  title?: string;
+}
+
+/**
+ * The one place a PDF gets opened anywhere in the app. Never `window.open` /
+ * `target="_blank"` a PDF directly — route it through this modal instead, so
+ * the reviewer never loses their place to a new tab.
+ */
+export function PdfPreviewModal({
+  opened,
+  onClose,
+  url,
+  title = 'Document',
+}: PdfPreviewModalProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={title}
+      size="80%"
+      centered
+      trapFocus
+      returnFocus
+    >
+      {url && (
+        <iframe
+          src={url}
+          title={title}
+          style={{ width: '100%', height: '85vh', border: 'none' }}
+        />
+      )}
+    </Modal>
+  );
+}

From b860e5722753297efdbe5793b26f9dfdcb2b992d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:59:08 +0000
Subject: [PATCH 49/58] feat: integrate PdfPreviewModal across apps

---
 .../hooks/useTemplatePreview.ts               | 22 +++++++++----
 .../pages/CertificateDesignerPage.tsx         | 11 +++++--
 .../pages/MedicalVerificationPage/index.tsx   | 23 ++++++++++---
 .../certificates/pages/CertificatesPage.tsx   | 19 +++--------
 .../licensing/components/DocumentSlots.tsx    | 22 ++++++++++---
 .../licensing/components/StaffEvidence.tsx    | 33 ++++++++++++++++---
 .../seafarer/pages/MySeaRecordsPage/index.tsx | 26 +++++++++++++--
 7 files changed, 118 insertions(+), 38 deletions(-)

diff --git a/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplatePreview.ts b/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplatePreview.ts
index 761a89e15..c2714f856 100644
--- a/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplatePreview.ts
+++ b/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplatePreview.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { notifications } from '@mantine/notifications';
 import { useTranslation } from 'react-i18next';
 import { extractErrorMessage } from '@ema-platform/api';
@@ -13,12 +13,14 @@ interface PreviewArgs {
 
 /**
  * Renders the editor's current contents, not the saved row, so unsaved edits
- * are what you see. Opened as a blob so it never leaves a file behind.
+ * are what you see. Opened as a blob into `PdfPreviewModal` rather than a new
+ * tab, so the designer never loses their place.
  */
 export function useTemplatePreview() {
   const { t } = useTranslation();
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  return useCallback(
+  const open = useCallback(
     async ({ hbsSource, licenseTypeId, landscape }: PreviewArgs) => {
       try {
         // The preview returns a PDF stream, not JSON, so it bypasses RTK Query
@@ -38,10 +40,7 @@ export function useTemplatePreview() {
           }),
         });
         if (!response.ok) throw new Error(await response.text());
-        const url = URL.createObjectURL(await response.blob());
-        window.open(url, '_blank', 'noopener');
-        // Give the new tab time to read it before revoking.
-        setTimeout(() => URL.revokeObjectURL(url), 60_000);
+        setPreviewUrl(URL.createObjectURL(await response.blob()));
       } catch (err) {
         notifications.show({
           color: 'red',
@@ -52,4 +51,13 @@ export function useTemplatePreview() {
     },
     [t],
   );
+
+  const close = useCallback(() => {
+    setPreviewUrl((current) => {
+      if (current) URL.revokeObjectURL(current);
+      return null;
+    });
+  }, []);
+
+  return { previewUrl, open, close };
 }
diff --git a/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx b/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
index 7f49af593..d30aa5d2f 100644
--- a/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
+++ b/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
@@ -31,7 +31,7 @@ import {
   useUpdateLicenseValidityMutation,
   useUpdateLicenseTemplateMutation,
 } from '@ema-platform/api';
-import { EmptyState, ErrorState, PageHeader } from '@ema-platform/ui';
+import { EmptyState, ErrorState, PageHeader, PdfPreviewModal } from '@ema-platform/ui';
 import { usePermissions, LICENSE_PERMISSIONS as PERMISSIONS } from '@ema-platform/auth';
 import { BlockPropertiesPanel } from '../components/BlockPropertiesPanel';
 import { DesignerToolbar } from '../components/DesignerToolbar';
@@ -86,7 +86,7 @@ export function CertificateDesignerPage() {
 
   const draft = useTemplateDraft(templates);
   const run = useDesignerActions();
-  const openPreview = useTemplatePreview();
+  const { previewUrl, open: openPreview, close: closePreview } = useTemplatePreview();
 
   const [newOpen, setNewOpen] = useState(false);
   const [newName, setNewName] = useState('');
@@ -377,6 +377,13 @@ export function CertificateDesignerPage() {
           }, t('designer.created', 'Draft created'))
         }
       />
+
+      <PdfPreviewModal
+        opened={Boolean(previewUrl)}
+        onClose={closePreview}
+        url={previewUrl ?? ''}
+        title={t('designer.preview', 'Preview')}
+      />
     </Container>
   );
 }
diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
index 039c7a350..d4bc9e434 100644
--- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
+++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage/index.tsx
@@ -23,7 +23,12 @@ import {
   IconPaperclip,
   IconStethoscope,
 } from '@tabler/icons-react';
-import { AdvancedTable, notify, type AdvancedColumn } from '@ema-platform/ui';
+import {
+  AdvancedTable,
+  notify,
+  PdfPreviewModal,
+  type AdvancedColumn,
+} from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import {
   extractErrorMessage,
@@ -109,6 +114,9 @@ function AttachmentsModal({
     { ownerType, ownerId: ownerId ?? '' },
     { skip: !ownerId },
   );
+  const [preview, setPreview] = useState<{ url: string; title: string } | null>(
+    null,
+  );
 
   const files = useMemo(
     () => (attachments ?? []).flatMap((a) => a.files ?? []),
@@ -156,10 +164,9 @@ function AttachmentsModal({
                     size="compact-xs"
                     variant="light"
                     leftSection={<IconEye size={14} />}
-                    component="a"
-                    href={file.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                    onClick={() =>
+                      setPreview({ url: file.url as string, title: file.originalName })
+                    }
                   >
                     {t('recordVerification.view', 'View')}
                   </Button>
@@ -173,6 +180,12 @@ function AttachmentsModal({
           ))
         )}
       </Stack>
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ''}
+        title={preview?.title}
+      />
     </Modal>
   );
 }
diff --git a/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx b/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
index 8b3eac530..9b7295f94 100644
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
@@ -8,7 +8,6 @@ import {
   Divider,
   Group,
   Loader,
-  Modal,
   Paper,
   SimpleGrid,
   Stack,
@@ -36,6 +35,7 @@ import {
   useGetMySeaServiceRecordsQuery,
   useGetMyMedicalCertificatesQuery,
 } from '@ema-platform/api';
+import { PdfPreviewModal } from '@ema-platform/ui';
 
 // ---------------------------------------------------------------------------
 // Mock data
@@ -353,21 +353,12 @@ export function CertificatesPage() {
         )}
       </Paper>
 
-      {/* Preview modal */}
-      <Modal
+      <PdfPreviewModal
         opened={!!previewUrl}
         onClose={() => setPreviewUrl(null)}
-        title={<Text fw={700} fz="sm">{previewTitle}</Text>}
-        size="95vw"
-        radius="lg"
-        fullScreen
-      >
-        <iframe
-          src={previewUrl ?? ''}
-          style={{ width: '100%', height: '90vh', border: 'none', borderRadius: 8 }}
-          title={previewTitle}
-        />
-      </Modal>
+        url={previewUrl ?? ''}
+        title={previewTitle}
+      />
     </Stack>
   );
 }
diff --git a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
index 25349d681..4ef90cb06 100644
--- a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
+++ b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
@@ -23,6 +23,7 @@ import {
   type DocumentRequirement,
 } from '@ema-platform/api';
 import { useTranslation } from 'react-i18next';
+import { PdfPreviewModal } from '@ema-platform/ui';
 
 const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
 
@@ -61,6 +62,9 @@ export function DocumentSlots({
   const { t } = useTranslation();
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [preview, setPreview] = useState<{ url: string; title: string } | null>(
+    null,
+  );
   const resetRefs = useRef<Record<string, () => void>>({});
 
   const required = requirements.filter(
@@ -100,6 +104,7 @@ export function DocumentSlots({
       {required.map((requirement) => {
         const existing = attachments.find((a) => a.documentKey === requirement.key);
         const uploaded = Boolean(existing?.files?.length);
+        const fileUrl = existing?.files?.[0]?.url;
         const flagRemark = flagged[requirement.key];
         const locked = readOnly || (restrictToFlagged && !flagRemark);
 
@@ -153,13 +158,16 @@ export function DocumentSlots({
               </div>
 
               <Group gap="xs" wrap="nowrap">
-                {existing?.files?.[0]?.url && (
+                {fileUrl && (
                   <Button
                     size="xs"
                     variant="subtle"
-                    component="a"
-                    href={existing.files[0].url}
-                    target="_blank"
+                    onClick={() =>
+                      setPreview({
+                        url: fileUrl,
+                        title: localized(requirement.name),
+                      })
+                    }
                   >
                     {t('licensing.documents.view')}
                   </Button>
@@ -198,6 +206,12 @@ export function DocumentSlots({
           </Card>
         );
       })}
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ''}
+        title={preview?.title}
+      />
     </Stack>
   );
 }
diff --git a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
index c2a91ac43..562131960 100644
--- a/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
+++ b/apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Button, FileButton, Group, Loader } from '@mantine/core';
+import { ActionIcon, Button, FileButton, Group, Loader } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { IconCheck } from '@tabler/icons-react';
+import { IconCheck, IconEye } from '@tabler/icons-react';
 import {
   useLocalized,
   uploadDocument,
@@ -9,6 +9,7 @@ import {
   type StaffEvidenceRequirement,
 } from '@ema-platform/api';
 import { useTranslation } from 'react-i18next';
+import { PdfPreviewModal } from '@ema-platform/ui';
 
 const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
 
@@ -31,6 +32,9 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
     ownerId: staffId,
   });
   const [busy, setBusy] = useState<string | null>(null);
+  const [preview, setPreview] = useState<{ url: string; title: string } | null>(
+    null,
+  );
   const localized = useLocalized();
   const { t } = useTranslation();
 
@@ -39,12 +43,14 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
   return (
     <Group gap="xs">
       {evidence.map((item) => {
-        const uploaded = attachments.some(
+        const attachment = attachments.find(
           (a) => a.documentKey === item.docKey && a.files?.length,
         );
+        const uploaded = Boolean(attachment);
+        const fileUrl = attachment?.files?.[0]?.url;
         return (
+          <Group key={item.docKey} gap={4} wrap="nowrap">
           <FileButton
-            key={item.docKey}
             accept="application/pdf,image/jpeg,image/png"
             onChange={async (file) => {
               if (!file) return;
@@ -89,8 +95,27 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
               </Button>
             )}
           </FileButton>
+          {uploaded && fileUrl && (
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              aria-label={t('licensing.documents.view', 'View')}
+              onClick={() =>
+                setPreview({ url: fileUrl, title: localized(item.label) })
+              }
+            >
+              <IconEye size={14} />
+            </ActionIcon>
+          )}
+          </Group>
         );
       })}
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ''}
+        title={preview?.title}
+      />
     </Group>
   );
 }
diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
index 29f4490e8..25dc0fd11 100644
--- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
@@ -28,7 +28,13 @@ import {
 } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AdvancedTable, AmharicDatePicker, notify, useServerTable } from '@ema-platform/ui';
+import {
+  AdvancedTable,
+  AmharicDatePicker,
+  notify,
+  PdfPreviewModal,
+  useServerTable,
+} from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import {
   extractErrorMessage,
@@ -74,6 +80,9 @@ function EvidenceModal({
     { ownerType, ownerId: ownerId ?? '' },
     { skip: !ownerId },
   );
+  const [preview, setPreview] = useState<{ url: string; title: string } | null>(
+    null,
+  );
 
   const files = (attachments ?? []).flatMap((a) => a.files);
 
@@ -91,7 +100,14 @@ function EvidenceModal({
             <Group key={file.id} gap="xs">
               <IconPaperclip size={16} />
               {file.url ? (
-                <Anchor href={file.url} target="_blank" size="sm">
+                <Anchor
+                  component="button"
+                  type="button"
+                  size="sm"
+                  onClick={() =>
+                    setPreview({ url: file.url as string, title: file.originalName })
+                  }
+                >
                   {file.originalName}
                 </Anchor>
               ) : (
@@ -101,6 +117,12 @@ function EvidenceModal({
           ))
         )}
       </Stack>
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ''}
+        title={preview?.title}
+      />
     </Modal>
   );
 }

From 1eeb4c5cc3d3cc7a417a2499d746819c24b3c5e8 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 09:00:05 +0000
Subject: [PATCH 50/58] feat: implement concurrent-safe token refreshing with
 session-aware error handling

---
 .../lib/base-api/base-query-with-reauth.ts    |  9 +++-
 .../auth/src/lib/components/AuthBootstrap.tsx | 22 +++++++++-
 libs/auth/src/lib/utils/refresh-token.ts      | 43 ++++++++++++++++---
 libs/auth/vite.config.mts                     | 11 +++++
 4 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 libs/auth/vite.config.mts

diff --git a/libs/api/src/lib/base-api/base-query-with-reauth.ts b/libs/api/src/lib/base-api/base-query-with-reauth.ts
index 9047cfb56..052a72fc1 100644
--- a/libs/api/src/lib/base-api/base-query-with-reauth.ts
+++ b/libs/api/src/lib/base-api/base-query-with-reauth.ts
@@ -41,8 +41,13 @@ export const baseQueryWithReauth: BaseQueryFn<
       try {
         await _onTokenExpired();
         result = await baseQuery(args, api, extraOptions);
-      } catch {
-        _onAuthFailure?.();
+      } catch (err) {
+        // Only a rejected refresh token ends the session. A network blip or a
+        // 5xx leaves the original 401 for the screen to report, rather than
+        // throwing the user out of a session that is still valid.
+        if ((err as { sessionExpired?: boolean })?.sessionExpired) {
+          _onAuthFailure?.();
+        }
       }
     } else {
       _onAuthFailure?.();
diff --git a/libs/auth/src/lib/components/AuthBootstrap.tsx b/libs/auth/src/lib/components/AuthBootstrap.tsx
index a44b26471..5d1f1735f 100644
--- a/libs/auth/src/lib/components/AuthBootstrap.tsx
+++ b/libs/auth/src/lib/components/AuthBootstrap.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState, type ReactNode } from 'react';
 import { useDispatch } from 'react-redux';
 import { PageLoader } from '@ema-platform/ui';
 import { authStorage } from '../utils/auth-storage';
-import { hydrateAuth, logout, setUser } from '../store/auth.slice';
+import { hydrateAuth, logout, setToken, setUser } from '../store/auth.slice';
+import { refreshAccessToken } from '../utils/refresh-token';
 import type { AuthUser } from '../types/auth.types';
 
 const BASE_API_URL =
@@ -38,10 +39,27 @@ export function AuthBootstrap({ children }: { children: ReactNode }) {
       }
 
       try {
-        const response = await fetch(`${BASE_API_URL}/auth/me`, {
+        let response = await fetch(`${BASE_API_URL}/auth/me`, {
           headers: { Authorization: `Bearer ${token}` },
         });
 
+        // An expired access token is the normal state after a day away — spend
+        // the refresh token before deciding the session is over. Without this
+        // a lapsed token logs the user out on load even though the credential
+        // to renew it is sitting right next to it in storage.
+        if (response.status === 401 || response.status === 403) {
+          try {
+            const fresh = await refreshAccessToken();
+            dispatch(setToken(fresh));
+            response = await fetch(`${BASE_API_URL}/auth/me`, {
+              headers: { Authorization: `Bearer ${fresh}` },
+            });
+          } catch {
+            // No refresh token, or the server rejected it — fall through to
+            // the logout below.
+          }
+        }
+
         if (response.ok) {
           const user = (await response.json()) as AuthUser;
           // Keep the persisted session as the source of truth when it is
diff --git a/libs/auth/src/lib/utils/refresh-token.ts b/libs/auth/src/lib/utils/refresh-token.ts
index 8187473d4..30ec94e1a 100644
--- a/libs/auth/src/lib/utils/refresh-token.ts
+++ b/libs/auth/src/lib/utils/refresh-token.ts
@@ -10,21 +10,54 @@ interface RefreshResponse {
   refreshToken: string;
 }
 
-export async function refreshAccessToken(): Promise<string> {
+/**
+ * Marks the one failure that actually ends a session: the server rejecting the
+ * refresh token. Read structurally by the API layer's 401 handler — a shared
+ * error class would mean `libs/api` importing `libs/auth`, which already
+ * imports `libs/api`.
+ */
+const sessionExpired = (message: string) =>
+  Object.assign(new Error(message), { sessionExpired: true });
+
+let inFlight: Promise<string> | null = null;
+
+/**
+ * Concurrent 401s must share one refresh. A page fires several requests at
+ * once; without this each one POSTs the same refresh token, the server rotates
+ * on the first and rejects the rest, and the losers tear down the session the
+ * winner just renewed.
+ */
+export function refreshAccessToken(): Promise<string> {
+  inFlight ??= runRefresh().finally(() => {
+    inFlight = null;
+  });
+  return inFlight;
+}
+
+async function runRefresh(): Promise<string> {
   const refreshToken = authStorage.getRefreshToken();
-  if (!refreshToken) throw new Error("No refresh token available");
+  if (!refreshToken) throw sessionExpired("No refresh token available");
 
   // The IAM service exposes this as `refresh-token`; posting to `/auth/refresh`
-  // 404s, which the catch below turns into a silent logout.
+  // 404s, which the caller would turn into a silent logout.
   const response = await fetch(`${BASE_API_URL}/auth/refresh-token`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ refreshToken }),
   });
 
+  if (
+    response.status === 400 ||
+    response.status === 401 ||
+    response.status === 403
+  ) {
+    throw sessionExpired("Refresh token rejected");
+  }
+
+  // Anything else is the API having a bad minute — a 502, a proxy timeout. The
+  // session is still valid, so leave it alone and let the screen report it.
   if (!response.ok) {
-    authStorage.clear();
-    throw new Error("Token refresh failed");
+    throw new Error(`Token refresh failed (${response.status})`);
   }
 
   const data: RefreshResponse = await response.json();
diff --git a/libs/auth/vite.config.mts b/libs/auth/vite.config.mts
new file mode 100644
index 000000000..04bd79f42
--- /dev/null
+++ b/libs/auth/vite.config.mts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.spec.ts'],
+    reporters: ['default'],
+  },
+});

From 439a4963ec1fff63b73b9028d5507ed6891d5bba Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 09:04:28 +0000
Subject: [PATCH 51/58] fixes

---
 .../pages/LicenseReviewPage/index.tsx         | 110 +++++++++++++++---
 1 file changed, 93 insertions(+), 17 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
index 4b0351b90..3cd1b1e9c 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx
@@ -57,12 +57,14 @@ import {
   useResumeApplicationMutation,
   useScheduleInspectionMutation,
   type RemarkTargetType,
+  type StaffEvidenceRequirement,
 } from "@ema-platform/api";
 import {
   AdvancedTable,
   AmharicDatePicker,
   ErrorState,
   ModalFooter,
+  PdfPreviewModal,
   useServerTable,
 } from "@ema-platform/ui";
 import { useDateDisplayer } from "@ema-platform/shared";
@@ -178,6 +180,19 @@ export function LicenseReviewPage() {
       ),
     [requirements],
   );
+  // What each role is *required* to produce (CV, work agreement, ERB
+  // certificate). Without this the tab can only list what was uploaded, so a
+  // missing CV looks identical to a role that never needed one.
+  const evidenceByRole = useMemo(
+    () =>
+      new Map(
+        requirements?.staffRoleRequirements.map((r) => [
+          r.roleKey,
+          r.requiredEvidence ?? [],
+        ]) ?? [],
+      ),
+    [requirements],
+  );
 
   const [completeReview] = useCompleteReviewMutation();
   const [requestAdjustment] = useRequestAdjustmentMutation();
@@ -971,6 +986,7 @@ export function LicenseReviewPage() {
                   renderEvidence: (member) => (
                     <StaffEvidenceCell
                       staffId={member.id}
+                      required={evidenceByRole.get(member.roleKey) ?? []}
                       fallback={member.documents}
                     />
                   ),
@@ -1275,36 +1291,96 @@ export function LicenseReviewPage() {
  */
 function StaffEvidenceCell({
   staffId,
+  required,
   fallback,
 }: {
   staffId: string;
+  /** What this person's role must produce, from the licence-type config. */
+  required: StaffEvidenceRequirement[];
   fallback?: { id: string; documentKey: string; files: { url?: string }[] }[];
 }) {
+  const localized = useLocalized();
+  const { t } = useTranslation();
+  const [preview, setPreview] = useState<{ url: string; title: string } | null>(
+    null,
+  );
   const { data: attachments } = useGetAttachmentsQuery({
     ownerType: "APPLICATION_STAFF",
     ownerId: staffId,
   });
   const docs = attachments?.length ? attachments : (fallback ?? []);
+  const uploadedBy = new Map(docs.map((d) => [d.documentKey, d]));
+
+  // Drive the list off the requirements, not off what happens to have been
+  // uploaded: a mandatory CV that is absent has to be visible as absent, which
+  // is the whole point of the officer looking at this column. Anything
+  // uploaded outside the list still gets shown rather than silently dropped.
+  const extras = docs.filter(
+    (d) => !required.some((r) => r.docKey === d.documentKey),
+  );
+
+  if (!required.length && !extras.length) {
+    return (
+      <Text size="xs" c="dimmed">
+        —
+      </Text>
+    );
+  }
+
+  const badge = (
+    key: string,
+    label: string,
+    url: string | undefined,
+    mandatory: boolean,
+  ) => {
+    const missing = !url;
+    return (
+      <Tooltip
+        key={key}
+        label={
+          missing
+            ? mandatory
+              ? t("review.evidenceMissingRequired", "Required — not uploaded")
+              : t("review.evidenceMissing", "Not uploaded")
+            : t("licensing.documents.view", "View")
+        }
+        withArrow
+      >
+        <Badge
+          size="xs"
+          variant={missing ? "outline" : "light"}
+          color={missing ? (mandatory ? "red" : "gray") : "teal"}
+          style={missing ? undefined : { cursor: "pointer" }}
+          onClick={
+            missing ? undefined : () => setPreview({ url: url, title: label })
+          }
+        >
+          {label}
+          {missing && mandatory ? " *" : ""}
+        </Badge>
+      </Tooltip>
+    );
+  };
 
   return (
     <Group gap={4}>
-      {docs.map((doc) => {
-        const url = doc.files?.[0]?.url;
-        return (
-          <Badge
-            key={doc.id}
-            size="xs"
-            variant="light"
-            component={url ? "a" : undefined}
-            href={url}
-            target={url ? "_blank" : undefined}
-            rel={url ? "noreferrer" : undefined}
-            style={url ? { cursor: "pointer" } : undefined}
-          >
-            {doc.documentKey}
-          </Badge>
-        );
-      })}
+      {required.map((item) =>
+        badge(
+          item.docKey,
+          localized(item.label) || item.docKey,
+          uploadedBy.get(item.docKey)?.files?.[0]?.url,
+          item.mandatory,
+        ),
+      )}
+      {extras.map((doc) =>
+        badge(doc.id, doc.documentKey, doc.files?.[0]?.url, false),
+      )}
+      <PdfPreviewModal
+        opened={Boolean(preview)}
+        onClose={() => setPreview(null)}
+        url={preview?.url ?? ""}
+        title={preview?.title}
+      />
     </Group>
   );
 }

From 4e2f63d4dfe06f098fc60b9d8beafb0a9133c36e Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 09:29:02 +0000
Subject: [PATCH 52/58] feat: implement cross-tab idle session timeout and add
 request collapsing to token refresh logic.

---
 apps/backoffice/src/app/i18n/locales/am.ts    |  2 +
 apps/backoffice/src/app/i18n/locales/en.ts    |  2 +
 .../src/app/layouts/BackofficeLayout.tsx      | 29 ++++---
 libs/auth/src/index.ts                        |  1 +
 .../auth/src/lib/components/AuthBootstrap.tsx | 10 ++-
 libs/auth/src/lib/hooks/useIdleTimer.ts       | 76 +++++++++++++++++++
 libs/auth/src/lib/store/auth.slice.ts         |  4 +
 libs/auth/src/lib/utils/refresh-token.ts      | 37 ++++++++-
 8 files changed, 147 insertions(+), 14 deletions(-)
 create mode 100644 libs/auth/src/lib/hooks/useIdleTimer.ts

diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index dd548ed09..1393f0704 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -105,6 +105,8 @@ export const am: Translations = {
 
   common: {
     logout: "ውጣ",
+    idleLogoutTitle: "ክፍለ ጊዜው አልቋል",
+    idleLogoutMessage: "ለ15 ደቂቃ እንቅስቃሴ ባለማድረግዎ ምክንያት ወጥተዋል።",
     profile: "መገለጫ",
     settings: "ቅንብሮች",
     export: "ላክ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index a1d860169..b628776dc 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -103,6 +103,8 @@ export const en = {
 
   common: {
     logout: 'Log out',
+    idleLogoutTitle: 'Session ended',
+    idleLogoutMessage: 'You were signed out after 15 minutes of inactivity.',
     profile: 'Profile',
     settings: 'Settings',
     export: 'Export',
diff --git a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
index a4e467a75..de599a69a 100644
--- a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
+++ b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
@@ -3,7 +3,7 @@ import { AppShell, Drawer } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { BrandMark, logout } from '@ema-platform/auth';
+import { BrandMark, logout, useIdleTimer } from '@ema-platform/auth';
 import { AppHeader, AppSidebar } from '@ema-platform/ui';
 import type { NavItem, NavSection } from '@ema-platform/ui';
 import { notify } from '@ema-platform/ui';
@@ -26,6 +26,13 @@ const BADGE_POLL_MS = 60_000;
 
 const HEADER_HEIGHT = 116;
 
+/**
+ * A desk left unlocked with a license-review or medical-record screen open is
+ * the actual threat model here, not a slow token. 15 minutes of no mouse,
+ * key, scroll, or touch activity signs the officer out automatically.
+ */
+const IDLE_TIMEOUT_MS = 15 * 60 * 1000;
+
 export function BackofficeLayout() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -37,15 +44,6 @@ export function BackofficeLayout() {
   const layoutMode = useAppSelector((state) => state.preferences.layoutMode);
   const { permissions: granted, known } = usePermissions();
 
-  // TEMPORARY diagnostic — remove once the sidebar is confirmed working.
-  // eslint-disable-next-line no-console
-  console.log(
-    '[NAV] known=', known,
-    'granted=', granted.length,
-    '| cookies:', document.cookie.split('; ').map((c) => c.split('=')[0]).filter((n) => n.includes('token')),
-    '| token tail:', (document.cookie.match(/ema-backoffice-auth-token=([^;]+)/)?.[1] ?? 'NONE').slice(-12),
-  );
-
   // Badges reflect real pending work. One grouped request on a timer, shared
   // by the sidebar and the top bar via the RTK cache.
   const { data: counts } = useGetQueueCountsQuery(undefined, {
@@ -92,6 +90,17 @@ export function BackofficeLayout() {
     navigate("/");
   }, [dispatch, navigate]);
 
+  useIdleTimer(IDLE_TIMEOUT_MS, () => {
+    notify.info(
+      t(
+        'common.idleLogoutMessage',
+        'You were signed out after 15 minutes of inactivity.',
+      ),
+      t('common.idleLogoutTitle', 'Session ended'),
+    );
+    handleLogout();
+  });
+
   const segments = location.pathname.split('/').filter(Boolean);
   // Label each crumb from the nav item it corresponds to, falling back to a
   // readable form of the path segment. Every crumb was previously labelled
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index 5b1190836..b1d90b33a 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -3,6 +3,7 @@ export type { AuthConfigValue } from "./lib/AuthConfig";
 export { AuthShell, BrandMark } from "./lib/components/AuthShell";
 export { ProtectedRoute } from "./lib/components/ProtectedRoute";
 export { AuthBootstrap } from "./lib/components/AuthBootstrap";
+export { useIdleTimer } from "./lib/hooks/useIdleTimer";
 export { LoginPage } from "./lib/pages/LoginPage";
 export { SignupPage } from "./lib/pages/SignupPage";
 export { ForgotPasswordPage } from "./lib/pages/ForgotPasswordPage";
diff --git a/libs/auth/src/lib/components/AuthBootstrap.tsx b/libs/auth/src/lib/components/AuthBootstrap.tsx
index 5d1f1735f..251db18c0 100644
--- a/libs/auth/src/lib/components/AuthBootstrap.tsx
+++ b/libs/auth/src/lib/components/AuthBootstrap.tsx
@@ -54,9 +54,13 @@ export function AuthBootstrap({ children }: { children: ReactNode }) {
             response = await fetch(`${BASE_API_URL}/auth/me`, {
               headers: { Authorization: `Bearer ${fresh}` },
             });
-          } catch {
-            // No refresh token, or the server rejected it — fall through to
-            // the logout below.
+          } catch (err) {
+            // Only the server rejecting the refresh token ends the session —
+            // same rule as the API layer's 401 handler. A 502 or a network
+            // blip during refresh keeps the stored session; the screens
+            // surface their own errors.
+            if (!(err as { sessionExpired?: boolean })?.sessionExpired) return;
+            // Rejected — fall through to the logout below.
           }
         }
 
diff --git a/libs/auth/src/lib/hooks/useIdleTimer.ts b/libs/auth/src/lib/hooks/useIdleTimer.ts
new file mode 100644
index 000000000..ded7cc14d
--- /dev/null
+++ b/libs/auth/src/lib/hooks/useIdleTimer.ts
@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+
+const ACTIVITY_EVENTS = [
+  'mousedown',
+  'mousemove',
+  'keydown',
+  'scroll',
+  'touchstart',
+  'click',
+] as const;
+
+/**
+ * Fires `onIdle` once no activity event has fired for `timeoutMs` — the
+ * "left the desk" auto-logout for a govt app handling sensitive records.
+ *
+ * `onIdle` is read through a ref rather than a `useEffect` dependency: the
+ * caller typically passes a fresh closure every render (it captures
+ * `dispatch`, `navigate`, current user), and depending on it directly would
+ * tear down and re-add six window listeners — and rearm the timer to a full
+ * 15 minutes — on every unrelated re-render, not just real activity.
+ */
+export function useIdleTimer(timeoutMs: number, onIdle: () => void) {
+  const onIdleRef = useRef(onIdle);
+  onIdleRef.current = onIdle;
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    let lastReset = 0;
+
+    // localStorage is origin-scoped, so every tab of this app shares it and
+    // the sibling app (other port/domain) does not.
+    const ACTIVITY_KEY = 'ema-last-activity';
+
+    function fire() {
+      // This tab sat idle, but a sibling tab may have been busy the whole
+      // time — logging out here would clear the shared cookies and kill that
+      // tab mid-work. Trust the newest activity stamp any tab wrote.
+      let last = 0;
+      try {
+        last = Number(localStorage.getItem(ACTIVITY_KEY)) || 0;
+      } catch {
+        /* storage blocked — fall back to this tab's own timer */
+      }
+      const remaining = last + timeoutMs - Date.now();
+      if (remaining > 1000) {
+        timer = setTimeout(fire, remaining);
+      } else {
+        onIdleRef.current();
+      }
+    }
+
+    function reset() {
+      // mousemove fires dozens of times a second; only rearm once a second
+      // so it isn't clearing/setting a timeout on every pixel of movement.
+      const now = Date.now();
+      if (now - lastReset < 1000) return;
+      lastReset = now;
+      try {
+        localStorage.setItem(ACTIVITY_KEY, String(now));
+      } catch {
+        /* ignore */
+      }
+      clearTimeout(timer);
+      timer = setTimeout(fire, timeoutMs);
+    }
+
+    reset();
+    ACTIVITY_EVENTS.forEach((event) => window.addEventListener(event, reset));
+    return () => {
+      ACTIVITY_EVENTS.forEach((event) =>
+        window.removeEventListener(event, reset),
+      );
+      clearTimeout(timer);
+    };
+  }, [timeoutMs]);
+}
diff --git a/libs/auth/src/lib/store/auth.slice.ts b/libs/auth/src/lib/store/auth.slice.ts
index 1fb70a533..0e58b9735 100644
--- a/libs/auth/src/lib/store/auth.slice.ts
+++ b/libs/auth/src/lib/store/auth.slice.ts
@@ -6,6 +6,7 @@ import type {
   LoginPayload,
 } from "../types/auth.types";
 import { authStorage } from "../utils/auth-storage";
+import { setSignedOut } from "../utils/refresh-token";
 
 const initialState: AuthState = {
   user: null,
@@ -19,6 +20,7 @@ const authSlice = createSlice({
   initialState,
   reducers: {
     loginSuccess(state, action: PayloadAction<LoginPayload>) {
+      setSignedOut(false);
       state.token = action.payload.token;
       state.isAuthenticated = true;
       authStorage.setToken(action.payload.token);
@@ -37,6 +39,8 @@ const authSlice = createSlice({
       authStorage.removeProfile();
     },
     logout(state) {
+      // Before clearing storage, so an in-flight refresh can't repopulate it.
+      setSignedOut(true);
       state.user = null;
       state.token = null;
       state.isAuthenticated = false;
diff --git a/libs/auth/src/lib/utils/refresh-token.ts b/libs/auth/src/lib/utils/refresh-token.ts
index 30ec94e1a..43f53e508 100644
--- a/libs/auth/src/lib/utils/refresh-token.ts
+++ b/libs/auth/src/lib/utils/refresh-token.ts
@@ -21,6 +21,17 @@ const sessionExpired = (message: string) =>
 
 let inFlight: Promise<string> | null = null;
 
+let signedOut = false;
+
+/**
+ * Set on logout, cleared on login. A refresh that was already in flight when
+ * the user (or the idle timer) signed out must not write its response back
+ * into storage — that would silently re-authenticate an unattended desk.
+ */
+export function setSignedOut(v: boolean) {
+  signedOut = v;
+}
+
 /**
  * Concurrent 401s must share one refresh. A page fires several requests at
  * once; without this each one POSTs the same refresh token, the server rotates
@@ -28,13 +39,34 @@ let inFlight: Promise<string> | null = null;
  * winner just renewed.
  */
 export function refreshAccessToken(): Promise<string> {
-  inFlight ??= runRefresh().finally(() => {
+  inFlight ??= acquireAndRefresh().finally(() => {
     inFlight = null;
   });
   return inFlight;
 }
 
+/**
+ * Cross-tab guard on top of the in-tab one: cookies are shared per origin, so
+ * two tabs expiring together would both POST the same rotating refresh token
+ * and the loser would tear down the session the winner just renewed. A Web
+ * Lock makes the second tab wait; if the first tab already refreshed while it
+ * waited, the fresh token is sitting in storage and no request is needed.
+ */
+async function acquireAndRefresh(): Promise<string> {
+  if (typeof navigator === "undefined" || !navigator.locks) {
+    // Old Safari / test env — in-tab de-dup still applies.
+    return runRefresh();
+  }
+  const tokenBefore = authStorage.getToken();
+  return navigator.locks.request("ema-token-refresh", async () => {
+    const current = authStorage.getToken();
+    if (current && current !== tokenBefore) return current;
+    return runRefresh();
+  });
+}
+
 async function runRefresh(): Promise<string> {
+  if (signedOut) throw new Error("Signed out");
   const refreshToken = authStorage.getRefreshToken();
   if (!refreshToken) throw sessionExpired("No refresh token available");
 
@@ -61,6 +93,9 @@ async function runRefresh(): Promise<string> {
   }
 
   const data: RefreshResponse = await response.json();
+  // Deliberately NOT sessionExpired: the user already signed out, so there is
+  // no session left to end — just refuse to resurrect it.
+  if (signedOut) throw new Error("Signed out during refresh");
   authStorage.setToken(data.token);
   if (data.refreshToken) authStorage.setRefreshToken(data.refreshToken);
   return data.token;

From 1a3d96375419c4adb4dd44e8de556876e99e1bef Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 10:01:24 +0000
Subject: [PATCH 53/58] UI fixes

---
 libs/ui/src/lib/feedback/PageLoader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/ui/src/lib/feedback/PageLoader.tsx b/libs/ui/src/lib/feedback/PageLoader.tsx
index 120075ef8..4609f44bc 100644
--- a/libs/ui/src/lib/feedback/PageLoader.tsx
+++ b/libs/ui/src/lib/feedback/PageLoader.tsx
@@ -1,4 +1,4 @@
-import { Center, Box, Stack, Text, useMantineColorScheme } from '@mantine/core';
+import { Center, Box, Stack, Text, useComputedColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { MaritimeLoader } from '../components/MaritimeLoader';
 
@@ -21,8 +21,8 @@ export function PageLoader({
   framed = true,
 }: PageLoaderProps) {
   const { t } = useTranslation();
-  const { colorScheme } = useMantineColorScheme();
-  const isDark = colorScheme === 'dark';
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+  const isDark = computedColorScheme === 'dark';
 
   const resolvedLabel = label ?? t('loading', 'Loading Maritime Services…');
 

From 4121e2a8b1a74f49d562f1b9f820d0514257da10 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 10:09:15 +0000
Subject: [PATCH 54/58] UI fixes

---
 .../pages/LicenseQueuePage/columns.tsx        | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx
index ed0bf3e91..1c1212d0a 100644
--- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx
+++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage/columns.tsx
@@ -102,14 +102,19 @@ export function licenseQueueColumns(
     {
       header: sortableHeader(t("queue.statusCol", "Status"), "status"),
       label: t("queue.statusCol", "Status"),
-      cell: ({ row }) => (
-        <Badge color={STATUS_COLORS[row.original.status]} variant="light">
-          {t(
-            `queue.statusValues.${row.original.status}`,
-            STATUS_LABELS[row.original.status],
-          )}
-        </Badge>
-      ),
+      cell: ({ row }) => {
+        const label = t(
+          `queue.statusValues.${row.original.status}`,
+          STATUS_LABELS[row.original.status],
+        );
+        return (
+          <Tooltip label={label} withArrow>
+            <Badge color={STATUS_COLORS[row.original.status]} variant="light">
+              {label}
+            </Badge>
+          </Tooltip>
+        );
+      },
     },
     {
       header: sortableHeader(

From 0fa55664325e5b377acbd1c0edb3efde55d08c97 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 10:22:00 +0000
Subject: [PATCH 55/58] UI fixes

---
 .../src/app/features/location/components/LocationTree.tsx     | 4 ++--
 libs/ui/src/lib/layout/AppSidebar.tsx                         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/location/components/LocationTree.tsx b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
index 00231e39b..17e2ae7cc 100644
--- a/apps/backoffice/src/app/features/location/components/LocationTree.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
@@ -11,7 +11,7 @@ import {
   Box,
   rem,
   Center,
-  useMantineColorScheme,
+  useComputedColorScheme,
 } from '@mantine/core';
 import {
   IconChevronRight,
@@ -58,7 +58,7 @@ function TreeNode({
   const isSelected = selectedId === location.id;
   const hasChildren =
     Array.isArray(location.children) && location.children.length > 0;
-  const { colorScheme } = useMantineColorScheme();
+  const colorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
   const hoverBg = colorScheme === 'dark'
     ? 'var(--mantine-color-dark-6)'
     : 'var(--mantine-color-gray-0)';
diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index 5fe8f83f0..dc67f79f0 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -12,7 +12,7 @@ import {
   Tooltip,
   UnstyledButton,
   rem,
-  useMantineColorScheme,
+  useComputedColorScheme,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import {
@@ -285,7 +285,7 @@ export function AppSidebar({
   brandLogo,
 }: AppSidebarProps) {
   const { t } = useTranslation();
-  const { colorScheme } = useMantineColorScheme();
+  const colorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
   // The icon-rail toggle is a desktop-only affordance (its button is
   // `visibleFrom="sm"`) — on mobile the sidebar renders in a full-width
   // drawer, so a `collapsed` state carried over from a prior desktop session

From 6117f9c8627584e19886457dac62ab0004d00921 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 10:42:08 +0000
Subject: [PATCH 56/58] UI fixes

---
 .../profile/pages/ProfilePage.module.css      | 25 +++++++++++++++++
 .../features/profile/pages/ProfilePage.tsx    | 28 +++++++++++++++----
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/apps/backoffice/src/app/features/profile/pages/ProfilePage.module.css b/apps/backoffice/src/app/features/profile/pages/ProfilePage.module.css
index 3c37f92a1..c0cf21a70 100644
--- a/apps/backoffice/src/app/features/profile/pages/ProfilePage.module.css
+++ b/apps/backoffice/src/app/features/profile/pages/ProfilePage.module.css
@@ -35,6 +35,18 @@
   box-shadow: var(--mantine-shadow-xs);
 }
 
+[data-mantine-color-scheme='dark'] .list {
+  background: var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme='dark'] .tab {
+  color: var(--mantine-color-dark-1);
+}
+
+[data-mantine-color-scheme='dark'] .tab:hover {
+  color: var(--mantine-color-white);
+}
+
 /* Selectable option card (language + appearance). */
 .choice {
   border: 1px solid var(--mantine-color-gray-3);
@@ -49,8 +61,21 @@
   border-color: var(--mantine-color-gray-4);
 }
 
+[data-mantine-color-scheme='dark'] .choice {
+  border-color: var(--mantine-color-dark-4);
+}
+
+[data-mantine-color-scheme='dark'] .choice:hover {
+  border-color: var(--mantine-color-dark-3);
+}
+
 .choiceActive,
 .choiceActive:hover {
   border-color: var(--mantine-color-emaPrimary-6);
   background: var(--mantine-color-emaPrimary-0);
 }
+
+[data-mantine-color-scheme='dark'] .choiceActive,
+[data-mantine-color-scheme='dark'] .choiceActive:hover {
+  background: var(--mantine-color-dark-6);
+}
diff --git a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
index b40a053da..bfbf70610 100644
--- a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
@@ -87,7 +87,16 @@ export function ProfilePage() {
   const [isSavingPassword, setIsSavingPassword] = useState(false);
 
   // UI-only preferences (no backend wiring yet).
+  // Two-step verification is wired but parked for the testing phase: turning it
+  // on makes every sign-in require an OTP. Swap this back for `useTwoFactor()`
+  // to re-enable it (the login/OTP side already handles `mfaRequired`).
   const [twoStepEnabled, setTwoStepEnabled] = useState(false);
+  // const {
+  //   enabled: twoStepEnabled,
+  //   isLoading: twoStepLoading,
+  //   isSaving: twoStepSaving,
+  //   setEnabled: setTwoStepEnabled,
+  // } = useTwoFactor();
   const [emailNotifications, setEmailNotifications] = useState(true);
 
   // Load the latest profile from the server on mount so the form always
@@ -449,7 +458,7 @@ export function ProfilePage() {
                                 backgroundColor:
                                   i <= score
                                     ? `var(--mantine-color-${strengthColors[score]}-6)`
-                                    : 'var(--mantine-color-gray-2)',
+                                    : 'var(--mantine-color-default-border)',
                               }}
                             />
                           ))}
@@ -471,6 +480,15 @@ export function ProfilePage() {
                   <Switch
                     checked={twoStepEnabled}
                     onChange={(e) => setTwoStepEnabled(e.currentTarget.checked)}
+                    // disabled={twoStepLoading || twoStepSaving}
+                    // onChange={async (e) => {
+                    //   try {
+                    //     await setTwoStepEnabled(e.currentTarget.checked);
+                    //     notify.success(t('profile.twoStep.saved'));
+                    //   } catch (err) {
+                    //     handleError(err);
+                    //   }
+                    // }}
                   />
                 </Group>
 
@@ -525,7 +543,7 @@ export function ProfilePage() {
                           ) : (
                             <IconCircle
                               size={20}
-                              color="var(--mantine-color-gray-4)"
+                              color="var(--mantine-color-dimmed)"
                             />
                           )}
                         </Group>
@@ -558,7 +576,7 @@ export function ProfilePage() {
                             color={
                               active
                                 ? 'var(--mantine-color-emaPrimary-6)'
-                                : 'var(--mantine-color-gray-6)'
+                                : 'var(--mantine-color-dimmed)'
                             }
                           />
                           <Text fw={600} size="sm" style={{ flex: 1 }}>
@@ -600,7 +618,7 @@ export function ProfilePage() {
                             color={
                               active
                                 ? 'var(--mantine-color-emaPrimary-6)'
-                                : 'var(--mantine-color-gray-6)'
+                                : 'var(--mantine-color-dimmed)'
                             }
                           />
                           <Text fw={600} size="sm" style={{ flex: 1 }}>
@@ -623,7 +641,7 @@ export function ProfilePage() {
 
               <Group align="flex-start" justify="space-between" wrap="nowrap">
                 <Group gap="sm" wrap="nowrap">
-                  <IconBell size={20} color="var(--mantine-color-gray-6)" />
+                  <IconBell size={20} color="var(--mantine-color-dimmed)" />
                   <div>
                     <Text fw={600}>{t('profile.notifications.title')}</Text>
                     <Text size="sm" c="dimmed">

From ff89b9af5e8912440db6d87ad648b872d34b9316 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 10:42:30 +0000
Subject: [PATCH 57/58] feat: implement two-factor authentication flow during
 sign-in and add utility hooks for configuration management

---
 apps/backoffice/src/app/i18n/locales/am.ts    |   1 +
 apps/backoffice/src/app/i18n/locales/en.ts    |   1 +
 .../features/profile/pages/ProfilePage.tsx    |  18 +++
 apps/portal/src/app/i18n/locales/am.ts        |   1 +
 apps/portal/src/app/i18n/locales/en.ts        |   1 +
 libs/auth/src/index.ts                        |   1 +
 .../src/lib/hooks/two-factor-request.spec.ts  |  22 ++++
 libs/auth/src/lib/hooks/two-factor-request.ts |  26 +++++
 libs/auth/src/lib/hooks/useTwoFactor.ts       |  21 ++++
 libs/auth/src/lib/pages/LoginPage.tsx         |  11 ++
 .../src/lib/pages/OTPVerificationPage.tsx     | 105 +++++++++++-------
 11 files changed, 170 insertions(+), 38 deletions(-)
 create mode 100644 libs/auth/src/lib/hooks/two-factor-request.spec.ts
 create mode 100644 libs/auth/src/lib/hooks/two-factor-request.ts
 create mode 100644 libs/auth/src/lib/hooks/useTwoFactor.ts

diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 1393f0704..0d0f0dc58 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -457,6 +457,7 @@ export const am: Translations = {
     twoStep: {
       title: "ባለሁለት ደረጃ ማረጋገጫ",
       desc: "በየጊዜው ሲገቡ ከስልክዎ የአንድ ጊዜ ኮድ ያስፈልጋል።",
+      saved: "ባለሁለት ደረጃ ማረጋገጫ ተዘምኗል",
     },
     layout: {
       title: "አቀማመጥ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index b628776dc..6b151ea0f 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -455,6 +455,7 @@ export const en = {
     twoStep: {
       title: 'Two-step verification',
       desc: 'Require a one-time code from your phone each time you sign in.',
+      saved: 'Two-step verification updated',
     },
     layout: {
       title: 'Layout',
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 73d9a0f34..054bd5420 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -129,7 +129,16 @@ export function ProfilePage() {
   const [isSavingPassword, setIsSavingPassword] = useState(false);
   const [isSavingMaritime, setIsSavingMaritime] = useState(false);
 
+  // Two-step verification is wired but parked for the testing phase: turning it
+  // on makes every sign-in require an OTP. Swap this back for `useTwoFactor()`
+  // to re-enable it (the login/OTP side already handles `mfaRequired`).
   const [twoStepEnabled, setTwoStepEnabled] = useState(false);
+  // const {
+  //   enabled: twoStepEnabled,
+  //   isLoading: twoStepLoading,
+  //   isSaving: twoStepSaving,
+  //   setEnabled: setTwoStepEnabled,
+  // } = useTwoFactor();
   const [emailNotifications, setEmailNotifications] = useState(true);
 
   // ---- Profession list (for Profile tab) ----
@@ -855,6 +864,15 @@ export function ProfilePage() {
                   <Switch
                     checked={twoStepEnabled}
                     onChange={(e) => setTwoStepEnabled(e.currentTarget.checked)}
+                    // disabled={twoStepLoading || twoStepSaving}
+                    // onChange={async (e) => {
+                    //   try {
+                    //     await setTwoStepEnabled(e.currentTarget.checked);
+                    //     notify.success(t('profile.twoStep.saved'));
+                    //   } catch (err) {
+                    //     handleError(err);
+                    //   }
+                    // }}
                   />
                 </Group>
 
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 42260e70a..4f62650c6 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -355,6 +355,7 @@ export const am: Translations = {
     twoStep: {
       title: 'ባለ ሁለት ደረጃ ማረጋገጫ',
       desc: 'በሚገቡበት ጊዜ ሁሉ ከስልክዎ የአንድ ጊዜ ኮድ እንዲጠየቅ ያድርጉ።',
+      saved: 'ባለ ሁለት ደረጃ ማረጋገጫ ተዘምኗል',
     },
     notifications: {
       title: 'የኢሜይል ማሳወቂያዎች',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 5a94fbd63..6f5dd3f50 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -354,6 +354,7 @@ export const en = {
     twoStep: {
       title: 'Two-step verification',
       desc: 'Require a one-time code from your phone each time you sign in.',
+      saved: 'Two-step verification updated',
     },
     notifications: {
       title: 'Email notifications',
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index b1d90b33a..5e99e4520 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -27,6 +27,7 @@ export {
 } from "./lib/store/signup.slice";
 export { usePermissions } from "./lib/hooks/usePermissions";
 export { useAuthToken } from "./lib/hooks/useAuthToken";
+export { useTwoFactor } from "./lib/hooks/useTwoFactor";
 export type { PermissionSet } from "./lib/hooks/usePermissions";
 export { RequirePermission } from "./lib/components/RequirePermission";
 export {
diff --git a/libs/auth/src/lib/hooks/two-factor-request.spec.ts b/libs/auth/src/lib/hooks/two-factor-request.spec.ts
new file mode 100644
index 000000000..3d5f4e987
--- /dev/null
+++ b/libs/auth/src/lib/hooks/two-factor-request.spec.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { twoFactorRequest } from "./two-factor-request";
+
+describe("twoFactorRequest", () => {
+  it("creates when the user has no account configuration yet", () => {
+    expect(twoFactorRequest(undefined, true)).toEqual({
+      url: "/account-configurations/set-my-config",
+      method: "POST",
+      body: { isMFARequired: true },
+    });
+  });
+
+  it("updates an existing record instead of creating a second one", () => {
+    const config = { id: "c9fc67c6", isMFARequired: true };
+
+    expect(twoFactorRequest(config, false)).toEqual({
+      url: "/account-configurations/my-config/c9fc67c6",
+      method: "PUT",
+      body: { isMFARequired: false },
+    });
+  });
+});
diff --git a/libs/auth/src/lib/hooks/two-factor-request.ts b/libs/auth/src/lib/hooks/two-factor-request.ts
new file mode 100644
index 000000000..a8c6f1106
--- /dev/null
+++ b/libs/auth/src/lib/hooks/two-factor-request.ts
@@ -0,0 +1,26 @@
+type AccountConfig = { id: string; isMFARequired: boolean };
+
+/**
+ * Picks the request that persists the two-step verification setting.
+ *
+ * `set-my-config` only ever creates, and `iam.account_configurations` is unique
+ * per user — so an existing record has to be updated through PUT. Getting this
+ * backwards works exactly once and then fails on the unique constraint, which
+ * is why the choice lives here, apart from the hook, with a test on it.
+ */
+export function twoFactorRequest(
+  config: AccountConfig | undefined,
+  isMFARequired: boolean,
+) {
+  return config
+    ? {
+        url: `/account-configurations/my-config/${config.id}`,
+        method: "PUT" as const,
+        body: { isMFARequired },
+      }
+    : {
+        url: "/account-configurations/set-my-config",
+        method: "POST" as const,
+        body: { isMFARequired },
+      };
+}
diff --git a/libs/auth/src/lib/hooks/useTwoFactor.ts b/libs/auth/src/lib/hooks/useTwoFactor.ts
new file mode 100644
index 000000000..7dfb9d367
--- /dev/null
+++ b/libs/auth/src/lib/hooks/useTwoFactor.ts
@@ -0,0 +1,21 @@
+import { useApiMutation, useApiQuery } from "@ema-platform/api";
+import { twoFactorRequest } from "./two-factor-request";
+
+type AccountConfig = { id: string; isMFARequired: boolean };
+
+/** Reads and writes the signed-in user's IAM two-step verification setting. */
+export function useTwoFactor() {
+  const { data, refetch, isLoading } = useApiQuery<{ items: AccountConfig[] }>({
+    url: "/account-configurations/my-config",
+  });
+  const [save, { isLoading: isSaving }] = useApiMutation();
+
+  const config = data?.items?.[0];
+
+  const setEnabled = async (isMFARequired: boolean) => {
+    await save(twoFactorRequest(config, isMFARequired)).unwrap();
+    await refetch();
+  };
+
+  return { enabled: !!config?.isMFARequired, isLoading, isSaving, setEnabled };
+}
diff --git a/libs/auth/src/lib/pages/LoginPage.tsx b/libs/auth/src/lib/pages/LoginPage.tsx
index 63e4fe803..16072b4e4 100644
--- a/libs/auth/src/lib/pages/LoginPage.tsx
+++ b/libs/auth/src/lib/pages/LoginPage.tsx
@@ -111,6 +111,17 @@ export function LoginPage() {
         method: "POST",
         body: values,
       }).unwrap();
+
+      // Two-step verification on: the server withheld the tokens and mailed a
+      // one-time code instead. Storing this response would write an undefined
+      // token and 401 the very next request.
+      if (data.mfaRequired) {
+        navigate("/otp-verify", {
+          state: { mode: "mfa", email: values.email },
+        });
+        return;
+      }
+
       dispatch(loginSuccess(data));
 
       const me = await meTrigger({
diff --git a/libs/auth/src/lib/pages/OTPVerificationPage.tsx b/libs/auth/src/lib/pages/OTPVerificationPage.tsx
index 9d0f94bb3..17ec4e659 100644
--- a/libs/auth/src/lib/pages/OTPVerificationPage.tsx
+++ b/libs/auth/src/lib/pages/OTPVerificationPage.tsx
@@ -17,10 +17,13 @@ import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { useApiMutation } from '@ema-platform/api';
 import { notify, useErrorHandler } from '@ema-platform/ui';
 import { AuthShell } from '../components/AuthShell';
 import { useAuthConfig } from '../AuthConfig';
+import { loginSuccess, setUser } from '../store/auth.slice';
+import type { AuthUser, LoginPayload } from '../types/auth.types';
 
 const CODE_LENGTH = 6;
 const RESEND_SECONDS = 30;
@@ -37,14 +40,18 @@ export function OTPVerificationPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const { loginRedirectPath } = useAuthConfig();
+  const dispatch = useDispatch();
   const state = location.state as
-    | { email?: string; phoneNumber?: string }
+    | { email?: string; phoneNumber?: string; mode?: 'mfa' }
     | null;
   const email = state?.email ?? '';
   const phoneNumber = state?.phoneNumber ?? '';
+  /** Second factor at sign-in, as opposed to the phone-number verification. */
+  const isMfa = state?.mode === 'mfa';
 
-  const [verifyTrigger, { isLoading: loading }] = useApiMutation();
+  const [verifyTrigger, { isLoading: loading }] = useApiMutation<LoginPayload>();
   const [resendTrigger, { isLoading: resending }] = useApiMutation();
+  const [meTrigger] = useApiMutation<AuthUser>();
   const [secondsLeft, setSecondsLeft] = useState(RESEND_SECONDS);
   const [serverError, setServerError] = useState<string | null>(null);
   const { handleError } = useErrorHandler();
@@ -66,6 +73,21 @@ export function OTPVerificationPage() {
 
   const onSubmit = async (values: FormValues) => {
     try {
+      if (isMfa) {
+        const data = await verifyTrigger({
+          url: '/auth/mfa-verify',
+          method: 'POST',
+          body: { email, otp: values.verificationCode },
+        }).unwrap();
+
+        dispatch(loginSuccess(data));
+        const me = await meTrigger({ url: '/auth/me', method: 'GET' }).unwrap();
+        dispatch(setUser(me));
+
+        navigate(loginRedirectPath);
+        return;
+      }
+
       await verifyTrigger({
         url: '/auth/verify-phone-number',
         method: 'PATCH',
@@ -164,44 +186,51 @@ export function OTPVerificationPage() {
           </Stack>
         </form>
 
-        <Divider
-          label="Having trouble?"
-          labelPosition="center"
-          variant="dashed"
-        />
+        {/* Sign-in has not happened yet under MFA, so there is nothing to skip
+            to — and the resend endpoint below only regenerates phone-verification
+            codes. A fresh MFA code means logging in again. */}
+        {!isMfa && (
+          <>
+            <Divider
+              label="Having trouble?"
+              labelPosition="center"
+              variant="dashed"
+            />
 
-        <Button
-          variant="light"
-          fullWidth
-          size="md"
-          onClick={() => navigate(loginRedirectPath)}
-        >
-          Skip verification for now
-        </Button>
+            <Button
+              variant="light"
+              fullWidth
+              size="md"
+              onClick={() => navigate(loginRedirectPath)}
+            >
+              Skip verification for now
+            </Button>
 
-        <Center>
-          <Group justify="center" gap={6}>
-            <Text size="sm" c="dimmed">
-              Didn&apos;t receive a code?
-            </Text>
-            {secondsLeft > 0 ? (
-              <Text size="sm" c="dimmed" fw={600}>
-                Resend in {secondsLeft}s
-              </Text>
-            ) : (
-              <Anchor
-                size="sm"
-                fw={600}
-                onClick={handleResendOtp}
-                style={
-                  resending ? { pointerEvents: 'none', opacity: 0.6 } : undefined
-                }
-              >
-                Resend code
-              </Anchor>
-            )}
-          </Group>
-        </Center>
+            <Center>
+              <Group justify="center" gap={6}>
+                <Text size="sm" c="dimmed">
+                  Didn&apos;t receive a code?
+                </Text>
+                {secondsLeft > 0 ? (
+                  <Text size="sm" c="dimmed" fw={600}>
+                    Resend in {secondsLeft}s
+                  </Text>
+                ) : (
+                  <Anchor
+                    size="sm"
+                    fw={600}
+                    onClick={handleResendOtp}
+                    style={
+                      resending ? { pointerEvents: 'none', opacity: 0.6 } : undefined
+                    }
+                  >
+                    Resend code
+                  </Anchor>
+                )}
+              </Group>
+            </Center>
+          </>
+        )}
       </Stack>
     </AuthShell>
   );

From ec28f6456ddabc02dba78f4e4a39fc44188d7c93 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 11:00:20 +0000
Subject: [PATCH 58/58] feat: implement ActiveSessions component and JWT
 session tracking to manage user device access

---
 .../features/profile/pages/ProfilePage.tsx    |  14 +-
 apps/backoffice/src/app/i18n/locales/am.ts    |  31 ++++
 apps/backoffice/src/app/i18n/locales/en.ts    |  31 ++++
 .../features/profile/pages/ProfilePage.tsx    |  14 +-
 apps/portal/src/app/i18n/locales/am.ts        |  31 ++++
 apps/portal/src/app/i18n/locales/en.ts        |  31 ++++
 libs/api/src/lib/query-and-mutation/index.ts  |  13 +-
 libs/auth/src/index.ts                        |   4 +
 .../lib/components/ActiveSessions/columns.tsx | 124 ++++++++++++++
 .../lib/components/ActiveSessions/index.tsx   | 153 ++++++++++++++++++
 libs/auth/src/lib/hooks/useSessions.ts        |  65 ++++++++
 libs/auth/src/lib/utils/jwt.ts                |  18 +++
 12 files changed, 518 insertions(+), 11 deletions(-)
 create mode 100644 libs/auth/src/lib/components/ActiveSessions/columns.tsx
 create mode 100644 libs/auth/src/lib/components/ActiveSessions/index.tsx
 create mode 100644 libs/auth/src/lib/hooks/useSessions.ts
 create mode 100644 libs/auth/src/lib/utils/jwt.ts

diff --git a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
index bfbf70610..51f3dd333 100644
--- a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
@@ -44,7 +44,7 @@ import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
 import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { useApiMutation } from '@ema-platform/api';
-import { setUser } from '@ema-platform/auth';
+import { ActiveSessions, setUser } 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';
@@ -404,8 +404,9 @@ export function ProfilePage() {
 
         {/* ---- Security ---- */}
         <Tabs.Panel value="security" pt="md">
-          <Paper p="xl" shadow="sm" radius="lg" withBorder>
-            <form onSubmit={handlePasswordSubmit(onChangePassword)}>
+          <Stack gap="lg">
+            <Paper p="xl" shadow="sm" radius="lg" withBorder>
+              <form onSubmit={handlePasswordSubmit(onChangePassword)}>
               <Stack gap="xl">
                 <div>
                   <Title order={5}>{t('profile.security')}</Title>
@@ -502,8 +503,11 @@ export function ProfilePage() {
                   </Button>
                 </Group>
               </Stack>
-            </form>
-          </Paper>
+              </form>
+            </Paper>
+
+            <ActiveSessions />
+          </Stack>
         </Tabs.Panel>
 
         {/* ---- Preferences ---- */}
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 0d0f0dc58..7d279d800 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -454,6 +454,37 @@ export const am: Translations = {
       dark: "ሌሊት",
       system: "ሲስተም",
     },
+    sessions: {
+      title: 'ንቁ የመግቢያ ክፍለ ጊዜዎች',
+      hint: 'በአሁኑ ሰዓት ወደ መለያዎ የገቡ መሣሪያዎች። የማያውቁትን ይሰርዙ።',
+      columns: {
+        device: 'የአይ ፒ አድራሻ',
+        signedIn: 'የገባበት ጊዜ',
+        expires: 'የሚያበቃበት',
+        status: 'ሁኔታ',
+        actions: 'እርምጃዎች',
+      },
+      select: 'ይምረጡ',
+      selectAll: 'ሁሉንም ክፍለ ጊዜዎች ይምረጡ',
+      selectRow: 'ከ {{device}} የመጣውን ክፍለ ጊዜ ይምረጡ',
+      thisDevice: 'ይህ መሣሪያ',
+      revoke: 'ሰርዝ',
+      cannotRevokeCurrent: 'ይህ አሁን እየተጠቀሙበት ያለው ክፍለ ጊዜ ነው።',
+      revokeSelected_one: 'የተመረጠውን {{count}} ሰርዝ',
+      revokeSelected_other: 'የተመረጡትን {{count}} ሰርዝ',
+      signOutOthers: 'ከሌሎች ቦታዎች ሁሉ ውጣ',
+      empty: 'ንቁ ክፍለ ጊዜ የለም።',
+      confirm: {
+        title: 'ክፍለ ጊዜ ሰርዝ',
+        one: 'ከ {{device}} የመጣው ክፍለ ጊዜ ወዲያውኑ ይወጣል።',
+        selected_one: '{{count}} ክፍለ ጊዜ ወዲያውኑ ይወጣል።',
+        selected_other: '{{count}} ክፍለ ጊዜዎች ወዲያውኑ ይወጣሉ።',
+        others: 'ሌሎቹ ክፍለ ጊዜዎች በሙሉ ወዲያውኑ ይወጣሉ።',
+        unknownDevice: 'ይህ አሁን እየተጠቀሙበት ያለውን መሣሪያ ሊያካትት ይችላል።',
+      },
+      revoked_one: '{{count}} ክፍለ ጊዜ ተሰርዟል',
+      revoked_other: '{{count}} ክፍለ ጊዜዎች ተሰርዘዋል',
+    },
     twoStep: {
       title: "ባለሁለት ደረጃ ማረጋገጫ",
       desc: "በየጊዜው ሲገቡ ከስልክዎ የአንድ ጊዜ ኮድ ያስፈልጋል።",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 6b151ea0f..bf33d0340 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -452,6 +452,37 @@ export const en = {
       dark: 'Dark',
       system: 'System',
     },
+    sessions: {
+      title: 'Active sessions',
+      hint: 'Devices currently signed in to your account. Revoke any you do not recognise.',
+      columns: {
+        device: 'IP address',
+        signedIn: 'Signed in',
+        expires: 'Expires',
+        status: 'Status',
+        actions: 'Actions',
+      },
+      select: 'Select',
+      selectAll: 'Select all sessions',
+      selectRow: 'Select session from {{device}}',
+      thisDevice: 'This device',
+      revoke: 'Revoke',
+      cannotRevokeCurrent: 'This is the session you are using now.',
+      revokeSelected_one: 'Revoke {{count}} selected',
+      revokeSelected_other: 'Revoke {{count}} selected',
+      signOutOthers: 'Sign out everywhere else',
+      empty: 'No active sessions.',
+      confirm: {
+        title: 'Revoke session',
+        one: 'The session from {{device}} will be signed out immediately.',
+        selected_one: '{{count}} session will be signed out immediately.',
+        selected_other: '{{count}} sessions will be signed out immediately.',
+        others: 'Every other session will be signed out immediately.',
+        unknownDevice: 'This may include the device you are using now.',
+      },
+      revoked_one: '{{count}} session revoked',
+      revoked_other: '{{count}} sessions revoked',
+    },
     twoStep: {
       title: 'Two-step verification',
       desc: 'Require a one-time code from your phone each time you sign in.',
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 054bd5420..e0cfad850 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -51,7 +51,7 @@ import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
 import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, getCountryCode } from '@ema-platform/ui';
 import { useApiMutation, useLocalized } from '@ema-platform/api';
-import { PORTAL_PERMISSIONS, setUser, useCurrentProfile, usePermissions } from '@ema-platform/auth';
+import { ActiveSessions, PORTAL_PERMISSIONS, setUser, useCurrentProfile, usePermissions } from '@ema-platform/auth';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '../../../i18n/config';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import type { AuthUser } from '@ema-platform/auth';
@@ -788,8 +788,9 @@ export function ProfilePage() {
 
         {/* ---- Security ---- */}
         <Tabs.Panel value="security" pt="md">
-          <Paper p="xl" shadow="sm" radius="lg" withBorder>
-            <form onSubmit={handlePasswordSubmit(onChangePassword)}>
+          <Stack gap="lg">
+            <Paper p="xl" shadow="sm" radius="lg" withBorder>
+              <form onSubmit={handlePasswordSubmit(onChangePassword)}>
               <Stack gap="xl">
                 <div>
                   <Title order={5}>{t('profile.security')}</Title>
@@ -886,8 +887,11 @@ export function ProfilePage() {
                   </Button>
                 </Group>
               </Stack>
-            </form>
-          </Paper>
+              </form>
+            </Paper>
+
+            <ActiveSessions />
+          </Stack>
         </Tabs.Panel>
 
         {/* ---- Preferences ---- */}
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 4f62650c6..4baf91a77 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -352,6 +352,37 @@ export const am: Translations = {
       dark: 'ጨለማ',
       system: 'ሲስተም',
     },
+    sessions: {
+      title: 'ንቁ የመግቢያ ክፍለ ጊዜዎች',
+      hint: 'በአሁኑ ሰዓት ወደ መለያዎ የገቡ መሣሪያዎች። የማያውቁትን ይሰርዙ።',
+      columns: {
+        device: 'የአይ ፒ አድራሻ',
+        signedIn: 'የገባበት ጊዜ',
+        expires: 'የሚያበቃበት',
+        status: 'ሁኔታ',
+        actions: 'እርምጃዎች',
+      },
+      select: 'ይምረጡ',
+      selectAll: 'ሁሉንም ክፍለ ጊዜዎች ይምረጡ',
+      selectRow: 'ከ {{device}} የመጣውን ክፍለ ጊዜ ይምረጡ',
+      thisDevice: 'ይህ መሣሪያ',
+      revoke: 'ሰርዝ',
+      cannotRevokeCurrent: 'ይህ አሁን እየተጠቀሙበት ያለው ክፍለ ጊዜ ነው።',
+      revokeSelected_one: 'የተመረጠውን {{count}} ሰርዝ',
+      revokeSelected_other: 'የተመረጡትን {{count}} ሰርዝ',
+      signOutOthers: 'ከሌሎች ቦታዎች ሁሉ ውጣ',
+      empty: 'ንቁ ክፍለ ጊዜ የለም።',
+      confirm: {
+        title: 'ክፍለ ጊዜ ሰርዝ',
+        one: 'ከ {{device}} የመጣው ክፍለ ጊዜ ወዲያውኑ ይወጣል።',
+        selected_one: '{{count}} ክፍለ ጊዜ ወዲያውኑ ይወጣል።',
+        selected_other: '{{count}} ክፍለ ጊዜዎች ወዲያውኑ ይወጣሉ።',
+        others: 'ሌሎቹ ክፍለ ጊዜዎች በሙሉ ወዲያውኑ ይወጣሉ።',
+        unknownDevice: 'ይህ አሁን እየተጠቀሙበት ያለውን መሣሪያ ሊያካትት ይችላል።',
+      },
+      revoked_one: '{{count}} ክፍለ ጊዜ ተሰርዟል',
+      revoked_other: '{{count}} ክፍለ ጊዜዎች ተሰርዘዋል',
+    },
     twoStep: {
       title: 'ባለ ሁለት ደረጃ ማረጋገጫ',
       desc: 'በሚገቡበት ጊዜ ሁሉ ከስልክዎ የአንድ ጊዜ ኮድ እንዲጠየቅ ያድርጉ።',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index 6f5dd3f50..a8c3ba128 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -351,6 +351,37 @@ export const en = {
       dark: 'Dark',
       system: 'System',
     },
+    sessions: {
+      title: 'Active sessions',
+      hint: 'Devices currently signed in to your account. Revoke any you do not recognise.',
+      columns: {
+        device: 'IP address',
+        signedIn: 'Signed in',
+        expires: 'Expires',
+        status: 'Status',
+        actions: 'Actions',
+      },
+      select: 'Select',
+      selectAll: 'Select all sessions',
+      selectRow: 'Select session from {{device}}',
+      thisDevice: 'This device',
+      revoke: 'Revoke',
+      cannotRevokeCurrent: 'This is the session you are using now.',
+      revokeSelected_one: 'Revoke {{count}} selected',
+      revokeSelected_other: 'Revoke {{count}} selected',
+      signOutOthers: 'Sign out everywhere else',
+      empty: 'No active sessions.',
+      confirm: {
+        title: 'Revoke session',
+        one: 'The session from {{device}} will be signed out immediately.',
+        selected_one: '{{count}} session will be signed out immediately.',
+        selected_other: '{{count}} sessions will be signed out immediately.',
+        others: 'Every other session will be signed out immediately.',
+        unknownDevice: 'This may include the device you are using now.',
+      },
+      revoked_one: '{{count}} session revoked',
+      revoked_other: '{{count}} sessions revoked',
+    },
     twoStep: {
       title: 'Two-step verification',
       desc: 'Require a one-time code from your phone each time you sign in.',
diff --git a/libs/api/src/lib/query-and-mutation/index.ts b/libs/api/src/lib/query-and-mutation/index.ts
index 10b736e11..924115d6b 100644
--- a/libs/api/src/lib/query-and-mutation/index.ts
+++ b/libs/api/src/lib/query-and-mutation/index.ts
@@ -26,7 +26,7 @@ const queryApi = baseApi.injectEndpoints({
   overrideExisting: false,
 });
 
-export const { useApiQueryQuery, useApiMutationMutation } = queryApi;
+export const { useApiQueryQuery, useLazyApiQueryQuery, useApiMutationMutation } = queryApi;
 
 export function useApiQuery<TData = unknown>(
   args: ApiQueryArgs,
@@ -37,6 +37,17 @@ export function useApiQuery<TData = unknown>(
   };
 }
 
+/**
+ * Same endpoint as `useApiQuery`, fetched on demand instead of on render — for
+ * the case where the arguments are only known at click time.
+ */
+export function useApiLazyQuery<TData = unknown>(): [
+  (args: ApiQueryArgs) => { unwrap: () => Promise<TData> },
+] {
+  const [trigger] = useLazyApiQueryQuery();
+  return [trigger as unknown as (args: ApiQueryArgs) => { unwrap: () => Promise<TData> }];
+}
+
 type UseApiMutationResult<TData> = {
   data: TData | undefined;
   isLoading: boolean;
diff --git a/libs/auth/src/index.ts b/libs/auth/src/index.ts
index 5e99e4520..7d8be994b 100644
--- a/libs/auth/src/index.ts
+++ b/libs/auth/src/index.ts
@@ -28,6 +28,10 @@ export {
 export { usePermissions } from "./lib/hooks/usePermissions";
 export { useAuthToken } from "./lib/hooks/useAuthToken";
 export { useTwoFactor } from "./lib/hooks/useTwoFactor";
+export { useSessions } from "./lib/hooks/useSessions";
+export type { MySession } from "./lib/hooks/useSessions";
+export { ActiveSessions } from "./lib/components/ActiveSessions";
+export { currentSessionId } from "./lib/utils/jwt";
 export type { PermissionSet } from "./lib/hooks/usePermissions";
 export { RequirePermission } from "./lib/components/RequirePermission";
 export {
diff --git a/libs/auth/src/lib/components/ActiveSessions/columns.tsx b/libs/auth/src/lib/components/ActiveSessions/columns.tsx
new file mode 100644
index 000000000..11698b8e5
--- /dev/null
+++ b/libs/auth/src/lib/components/ActiveSessions/columns.tsx
@@ -0,0 +1,124 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { ActionIcon, Badge, Checkbox, Group, Text, Tooltip } from '@mantine/core';
+import { IconLogout } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
+import type { AdvancedColumn } from '@ema-platform/ui';
+import type { MySession } from '../../hooks/useSessions';
+
+interface Opts {
+  t: TFunction;
+  sessions: MySession[];
+  selected: string[];
+  setSelected: Dispatch<SetStateAction<string[]>>;
+  /** Undefined when the token carries no session claim — then no row is "this device". */
+  currentId?: string;
+  showDate: (value: string) => string;
+  onRevoke: (session: MySession) => void;
+}
+
+export function sessionColumns({
+  t,
+  sessions,
+  selected,
+  setSelected,
+  currentId,
+  showDate,
+  onRevoke,
+}: Opts): AdvancedColumn<MySession>[] {
+  // The current session is never selectable, so "all" means "all the others".
+  const selectable = sessions.filter((s) => s.id !== currentId);
+  const allSelected = selectable.length > 0 && selectable.every((s) => selected.includes(s.id));
+
+  return [
+    {
+      header: (
+        <Checkbox
+          aria-label={t('profile.sessions.selectAll')}
+          checked={allSelected}
+          indeterminate={selected.length > 0 && !allSelected}
+          disabled={selectable.length === 0}
+          onChange={() => setSelected(allSelected ? [] : selectable.map((s) => s.id))}
+        />
+      ),
+      label: t('profile.sessions.select'),
+      size: 40,
+      cell: ({ row }) => {
+        const isCurrent = row.original.id === currentId;
+        return (
+          <Checkbox
+            aria-label={t('profile.sessions.selectRow', { device: row.original.device })}
+            checked={selected.includes(row.original.id)}
+            disabled={isCurrent}
+            onChange={(e) => {
+              const checked = e.currentTarget.checked;
+              setSelected((prev) =>
+                checked
+                  ? [...prev, row.original.id]
+                  : prev.filter((id) => id !== row.original.id),
+              );
+            }}
+          />
+        );
+      },
+    },
+    {
+      header: t('profile.sessions.columns.device'),
+      cell: ({ row }) => (
+        <Group gap="xs" wrap="nowrap">
+          <Text size="sm" fw={500}>
+            {row.original.device || '—'}
+          </Text>
+          {row.original.id === currentId && (
+            <Badge variant="light" color="emaTeal" size="sm">
+              {t('profile.sessions.thisDevice')}
+            </Badge>
+          )}
+        </Group>
+      ),
+    },
+    {
+      header: t('profile.sessions.columns.signedIn'),
+      cell: ({ row }) => <Text size="sm">{showDate(row.original.createdAt)}</Text>,
+    },
+    {
+      header: t('profile.sessions.columns.expires'),
+      cell: ({ row }) => <Text size="sm">{showDate(row.original.expiryTime)}</Text>,
+    },
+    {
+      header: t('profile.sessions.columns.status'),
+      cell: ({ row }) => (
+        <Badge variant="light" size="sm" color={row.original.status === 'ACTIVE' ? 'green' : 'gray'}>
+          {row.original.status}
+        </Badge>
+      ),
+    },
+    {
+      header: t('profile.sessions.columns.actions'),
+      size: 70,
+      align: 'center',
+      cell: ({ row }) => {
+        const isCurrent = row.original.id === currentId;
+        return (
+          <Tooltip
+            label={
+              isCurrent ? t('profile.sessions.cannotRevokeCurrent') : t('profile.sessions.revoke')
+            }
+          >
+            <div>
+              <ActionIcon
+                variant="subtle"
+                color="red"
+                size="sm"
+                disabled={isCurrent}
+                aria-label={t('profile.sessions.revoke')}
+                onClick={() => onRevoke(row.original)}
+              >
+                <IconLogout size={14} />
+              </ActionIcon>
+            </div>
+          </Tooltip>
+        );
+      },
+    },
+  ];
+}
diff --git a/libs/auth/src/lib/components/ActiveSessions/index.tsx b/libs/auth/src/lib/components/ActiveSessions/index.tsx
new file mode 100644
index 000000000..701f924b7
--- /dev/null
+++ b/libs/auth/src/lib/components/ActiveSessions/index.tsx
@@ -0,0 +1,153 @@
+import { useMemo, useState } from 'react';
+import { Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { IconLogout } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import { AdvancedTable, ConfirmModal, notify, useErrorHandler, useServerTable } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
+import { useSessions, type MySession } from '../../hooks/useSessions';
+import { useAuthToken } from '../../hooks/useAuthToken';
+import { currentSessionId } from '../../utils/jwt';
+import { sessionColumns } from './columns';
+
+/** What the one confirm dialog is currently asking about. */
+type Pending =
+  | { kind: 'one'; ids: string[]; device: string }
+  | { kind: 'selected'; ids: string[] }
+  | { kind: 'others' };
+
+/**
+ * Where the signed-in user is logged in, and how to end those sessions.
+ *
+ * Renders as its own card so it can sit OUTSIDE the change-password <form> on
+ * the Security tab — a bare <button> inside that form would submit it.
+ */
+export function ActiveSessions() {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler();
+  const showDate = useDateDisplayer();
+  const token = useAuthToken();
+  const currentId = useMemo(() => currentSessionId(token), [token]);
+
+  const { pageIndex, setPageIndex, pageSize, setPageSize, skip, take } = useServerTable({
+    pageSize: 5,
+  });
+  const { sessions, total, isFetching, refetch, revoke, isRevoking, allSessionIds } = useSessions({
+    skip,
+    take,
+  });
+
+  const [selected, setSelected] = useState<string[]>([]);
+  const [pending, setPending] = useState<Pending | null>(null);
+
+  const columns = useMemo(
+    () =>
+      sessionColumns({
+        t,
+        sessions,
+        selected,
+        setSelected,
+        currentId,
+        showDate,
+        onRevoke: (s: MySession) => setPending({ kind: 'one', ids: [s.id], device: s.device }),
+      }),
+    [t, sessions, selected, currentId, showDate],
+  );
+
+  const confirmMessage = () => {
+    if (!pending) return '';
+    const base =
+      pending.kind === 'one'
+        ? t('profile.sessions.confirm.one', { device: pending.device })
+        : pending.kind === 'selected'
+          ? t('profile.sessions.confirm.selected', { count: pending.ids.length })
+          : t('profile.sessions.confirm.others');
+    // Without a session claim on the token there is no way to spare this
+    // device, so say so rather than implying the current login survives.
+    return currentId ? base : `${base} ${t('profile.sessions.confirm.unknownDevice')}`;
+  };
+
+  const onConfirm = async () => {
+    if (!pending) return;
+    try {
+      const ids =
+        pending.kind === 'others'
+          ? (await allSessionIds()).filter((id) => id !== currentId)
+          : pending.ids;
+      await revoke(ids);
+      notify.success(t('profile.sessions.revoked', { count: ids.length }));
+      setSelected([]);
+      setPending(null);
+    } catch (e) {
+      handleError(e);
+    }
+  };
+
+  // "Sign out everywhere else" is only meaningful once a second session exists.
+  const hasOthers = total > (currentId ? 1 : 0);
+
+  return (
+    <Paper p="xl" shadow="sm" radius="lg" withBorder>
+      <Stack gap="md">
+        <Group justify="space-between" align="flex-start" wrap="nowrap">
+          <div>
+            <Title order={5}>{t('profile.sessions.title')}</Title>
+            <Text size="sm" c="dimmed">
+              {t('profile.sessions.hint')}
+            </Text>
+          </div>
+          <Group gap="xs" wrap="nowrap">
+            {selected.length > 0 && (
+              <Button
+                type="button"
+                variant="light"
+                color="red"
+                size="sm"
+                onClick={() => setPending({ kind: 'selected', ids: selected })}
+              >
+                {t('profile.sessions.revokeSelected', { count: selected.length })}
+              </Button>
+            )}
+            {hasOthers && (
+              <Button
+                type="button"
+                variant="light"
+                color="red"
+                size="sm"
+                leftSection={<IconLogout size={16} />}
+                onClick={() => setPending({ kind: 'others' })}
+              >
+                {t('profile.sessions.signOutOthers')}
+              </Button>
+            )}
+          </Group>
+        </Group>
+
+        <AdvancedTable<MySession>
+          tableName="active-sessions"
+          columns={columns}
+          data={sessions}
+          itemCount={total}
+          pageIndex={pageIndex}
+          onPageChange={setPageIndex}
+          pageSize={pageSize}
+          onPageSizeChange={setPageSize}
+          pageSizeOptions={[5, 10, 20]}
+          refresh={refetch}
+          isLoading={isFetching}
+          emptyText={t('profile.sessions.empty')}
+        />
+      </Stack>
+
+      <ConfirmModal
+        opened={pending !== null}
+        onClose={() => setPending(null)}
+        onConfirm={onConfirm}
+        loading={isRevoking}
+        title={t('profile.sessions.confirm.title')}
+        message={confirmMessage()}
+        confirmLabel={t('profile.sessions.revoke')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+      />
+    </Paper>
+  );
+}
diff --git a/libs/auth/src/lib/hooks/useSessions.ts b/libs/auth/src/lib/hooks/useSessions.ts
new file mode 100644
index 000000000..7b7596d0b
--- /dev/null
+++ b/libs/auth/src/lib/hooks/useSessions.ts
@@ -0,0 +1,65 @@
+import { useApiLazyQuery, useApiMutation, useApiQuery } from '@ema-platform/api';
+
+export interface MySession {
+  id: string;
+  createdAt: string;
+  email: string;
+  /** IP address the session was created from — IAM sends no user agent. */
+  device: string;
+  expiryTime: string;
+  refreshCount: number;
+  status: string;
+}
+
+/** `/sessions/my-sessions` answers with a tuple, not the usual `{items, count}`. */
+type SessionsResponse = [MySession[], number];
+
+const SESSIONS_URL = '/sessions/my-sessions';
+const ORDER_BY = 'CreatedAt:DESC';
+
+function unwrapList(data: unknown): SessionsResponse {
+  if (!Array.isArray(data)) return [[], 0];
+  const [items, total] = data as Partial<SessionsResponse>;
+  return [items ?? [], total ?? 0];
+}
+
+/**
+ * The signed-in user's login sessions, and the two ways to end them.
+ *
+ * Uses the generic query/mutation endpoints rather than its own slice, so
+ * freshness comes from `refetch()` rather than cache tags — the same shape as
+ * `useTwoFactor`.
+ */
+export function useSessions({ skip, take }: { skip: number; take: number }) {
+  const { data, isFetching, refetch } = useApiQuery<SessionsResponse>({
+    url: SESSIONS_URL,
+    params: { skip, take, orderBy: ORDER_BY },
+  });
+  const [fetchAll] = useApiLazyQuery<SessionsResponse>();
+  const [send, { isLoading: isRevoking }] = useApiMutation();
+
+  const [sessions, total] = unwrapList(data);
+
+  /** Every session id the user has, not just the ones on the current page. */
+  const allSessionIds = async (): Promise<string[]> => {
+    // `total` is one page stale at worst; ask for a page big enough to cover it
+    // growing between render and click.
+    const result = await fetchAll({
+      url: SESSIONS_URL,
+      params: { skip: 0, take: Math.max(total, sessions.length) + 20, orderBy: ORDER_BY },
+    }).unwrap();
+    return unwrapList(result)[0].map((s) => s.id);
+  };
+
+  const revoke = async (ids: string[]) => {
+    if (ids.length === 0) return;
+    await send(
+      ids.length === 1
+        ? { url: `/sessions/revoke/${ids[0]}`, method: 'DELETE' }
+        : { url: '/sessions/bulk-revoke', method: 'POST', body: { sessionIds: ids } },
+    ).unwrap();
+    await refetch();
+  };
+
+  return { sessions, total, isFetching, refetch, revoke, isRevoking, allSessionIds };
+}
diff --git a/libs/auth/src/lib/utils/jwt.ts b/libs/auth/src/lib/utils/jwt.ts
new file mode 100644
index 000000000..f22842964
--- /dev/null
+++ b/libs/auth/src/lib/utils/jwt.ts
@@ -0,0 +1,18 @@
+/**
+ * Session id from the access token, when it carries one.
+ *
+ * `/sessions/my-sessions` returns no "this is you" flag, so the only way to
+ * stop the user revoking the session they are sitting in is to read the id off
+ * the token. Undefined is a normal answer — an opaque token just means no
+ * "This device" badge and a confirm dialog that warns instead.
+ */
+export function currentSessionId(token?: string): string | undefined {
+  const payload = token?.split('.')[1];
+  if (!payload) return undefined;
+  try {
+    const claims = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
+    return claims.sessionId ?? claims.sid ?? claims.jti;
+  } catch {
+    return undefined;
+  }
+}