Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/WorkflowChange' into feature/exam-attempt-domain

Browse Source 
# Conflicts:
#	apps/portal/src/app/features/exams/pages/ExamsPage/columns.tsx
#	apps/portal/src/app/features/exams/pages/ExamsPage/index.tsx
#	libs/api/src/lib/features/licensing/licensing.helpers.ts
#	libs/auth/src/lib/components/AuthBootstrap.tsx
This commit is contained in:
mihretue
2026-08-20 11:41:06 +00:00
parent 59bb8cefb9 558cfe20a1
commit c0b5871dc3
189 changed files with 36273 additions and 4832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
libs/ui/src/index.ts
View File

@@ -1,12 +1,16 @@
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";
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";
@@ -23,3 +27,4 @@ export * from "./lib/feedback/use-error-handler";
export * from "./lib/data/useServerTable";
export * from "./lib/landing/LandingPage";
export * from "./lib/landing/landing-copy";
export * from "./lib/utils/person-name";

581
libs/ui/src/lib/components/MaritimeLoader.tsx
View File

@@ -1,246 +1,141 @@
import type { CSSProperties, ComponentPropsWithoutRef } from "react";
import type { CSSProperties, ComponentPropsWithoutRef, Ref } from "react";
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. */
/** 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;
}
}
.ema-loader__label {
display: block;
text-align: center;
font-size: 12px;
line-height: 1.2;
margin-top: 4px;
color: 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;
@@ -249,9 +144,11 @@ 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,
...props
}: MaritimeLoaderProps) {
const cssVariables = {
@@ -263,174 +160,152 @@ export function MaritimeLoader({
return (
<span
{...props}
className={["ema-loader", className].filter(Boolean).join(" ")}
ref={ref}
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>{styles}</style>
<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>
{label && <span className="ema-loader__label">{label}</span>}
{/* 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;
// how to use this component.
// <Center style={{ width: "90vw", height: "90vh" }}>
// <MaritimeLoader
// size={120}
// color="#075985"
// label="Loading Maritime Services..."
// />
// </Center>

129
libs/ui/src/lib/feedback/PageLoader.tsx Normal file
View File

@@ -0,0 +1,129 @@
import { Center, Box, Stack, Text, useComputedColorScheme } 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. */
export function PageLoader({
label,
subtitle,
height = '60vh',
framed = true,
}: PageLoaderProps) {
const { t } = useTranslation();
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
const isDark = computedColorScheme === 'dark';
const resolvedLabel = label ?? t('loading', 'Loading Maritime Services…');
return (
<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>
);
}

40
libs/ui/src/lib/feedback/PdfPreviewModal.tsx Normal file
View File

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

822
libs/ui/src/lib/landing/LandingPage.tsx
View File

File diff suppressed because it is too large Load Diff

382
libs/ui/src/lib/landing/landing-copy.ts
View File

@@ -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:
@@ -52,6 +54,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: {
@@ -68,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?',
@@ -180,16 +261,39 @@ 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: {
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',
},
};
@@ -215,6 +319,7 @@ export const landingAm: LandingCopy = {
},
hero: {
livePill: 'ይፋዊ ዲጂታል ፖርታል — ኢፌዴሪ',
eyebrow: 'የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ',
title: 'የኢትዮጵያ ማሪታይም ባለስልጣን',
subtitle: 'ለመርከበኞች፣ ለመርከብ ባለቤቶች እና ለሎጂስቲክስ ኦፕሬተሮች የተዘጋጁ ዲጂታል የባህር አገልግሎቶች',
@@ -228,6 +333,7 @@ export const landingAm: LandingCopy = {
},
about: {
eyebrow: 'የተቋማዊ ማዕቀፍ',
title: 'ስለ ባለስልጣኑ',
visionLabel: 'ራዕይ',
vision:
@@ -239,6 +345,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: {
@@ -255,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 ፖርታል ምንድን ነው?',
@@ -363,15 +550,38 @@ 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: {
rights: 'ሁሉም መብቶች የተጠበቁ ናቸው።',
tagline: 'የኢትዮጵያን የባህር እና የሎጂስቲክስ መሠረተ ልማት ማሳደግ።',
quickLinks: 'ፈጣን ማያያዣዎች',
servicesHeading: 'ዋና አገልግሎቶች',
contactHeading: 'ግንኙነትና ድጋፍ',
hoursLabel: 'የስራ ሰዓት',
hoursValue: 'ሰኞ – አርብ፡ ከጠዋቱ 2:30 – ከሰዓት 11:30 (የምስራቅ አፍሪካ ሰዓት)',
emergencyLabel: 'የአደጋ ጊዜ የባህር መስመር',
emergencyValue: '+251 11 551 0000',
},
};

182
libs/ui/src/lib/landing/landing.css
View File

@@ -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 {
@@ -33,12 +31,168 @@ 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);
}
/* 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;
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 +206,9 @@ 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,
.ema-landing .ema-live-dot {
animation: none;
transition: none;
}

73
libs/ui/src/lib/layout/AppSidebar.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
import {
AppShell,
Badge,
Collapse,
Group,
NavLink,
Popover,
@@ -11,10 +12,10 @@ import {
Tooltip,
UnstyledButton,
rem,
useMantineColorScheme,
useComputedColorScheme,
} from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import {
IconChevronDown,
IconChevronLeft,
IconChevronRight,
} from '@tabler/icons-react';
@@ -110,13 +111,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 = (
@@ -270,7 +276,7 @@ interface AppSidebarProps {
export function AppSidebar({
navItems,
collapsed,
collapsed: collapsedProp,
activePath,
onToggleCollapse,
onNavigate,
@@ -279,7 +285,13 @@ 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
// 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)';
@@ -405,11 +417,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 && (
@@ -421,18 +437,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>
);
})}

143
libs/ui/src/lib/layout/ColorSchemeToggle.tsx
View File

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

172
libs/ui/src/lib/layout/LanguageSwitcher.tsx
View File

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

47
libs/ui/src/lib/theme/maritime-loader-theme.ts Normal file
View File

@@ -0,0 +1,47 @@
import {
ActionIcon,
Button,
createTheme,
Input,
Loader,
Select,
TextInput,
type MantineLoaderComponent,
} from '@mantine/core';
import { MaritimeLoader } from '../components/MaritimeLoader';
/**
* 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: {
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' } },
}),
},
});

19
libs/ui/src/lib/utils/person-name.ts Normal file
View File

@@ -0,0 +1,19 @@
/**
* Splits and joins a person's name between the account's single `name.en`
* string and the profile's separate `firstName`/`middleName`/`lastName`
* fields.
*
* The account has no first/middle/last columns of its own (that model lives
* only on the profile), so this is the one place that heuristic lives —
* reused everywhere a name crosses that boundary: the signup form joins into
* it, the Identity Details wizard step and the Profile page's Personal tab
* both split out of it.
*/
export function splitPersonName(fullName: string) {
const [firstName = '', middleName = '', ...rest] = fullName.trim().split(/\s+/);
return { firstName, middleName, lastName: rest.join(' ') };
}
export function joinPersonName(parts: { firstName: string; middleName?: string; lastName: string }) {
return [parts.firstName, parts.middleName, parts.lastName].filter(Boolean).join(' ');
}