diff --git a/.claude/settings.json b/.claude/settings.json index 9b056b847..848251cf8 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -16,7 +16,16 @@ "Bash(echo \"=== total errors: $\\(node_modules/.bin/tsc --noEmit -p apps/portal/tsconfig.json 2>&1)", "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\(JSON.stringify\\(p.scripts,null,2\\)\\)\")", "Bash(node -e \"let s='';process.stdin.on\\('data',d=>s+=d\\).on\\('end',\\(\\)=>{try{console.log\\(Object.keys\\(JSON.parse\\(s\\).targets||{}\\)\\)}catch\\(e\\){console.log\\('no project.json'\\)}}\\)\")", - "Bash(echo \"EXIT: $?\")" + "Bash(echo \"EXIT: $?\")", + "Bash(cp portal.pen backoffice.pen && ls -la backoffice.pen)", + "Bash(node_modules/.bin/tsc --noEmit -p apps/backoffice/tsconfig.json)", + "Bash(echo \"exit=$?\")", + "Bash(git log *)", + "Bash(grep -rl '_$_1e42\\\\|sfL\\(' --exclude-dir=node_modules --exclude-dir=.git .)", + "Bash(grep -c '_$_1e42')" + ], + "additionalDirectories": [ + "/home/tria/projects/mengisteab/emaui" ] } } diff --git a/apps/backoffice/src/app/features/dashboard/pages/DashboardPage.tsx b/apps/backoffice/src/app/features/dashboard/pages/DashboardPage.tsx index cd3b72ccc..6a713f082 100644 --- a/apps/backoffice/src/app/features/dashboard/pages/DashboardPage.tsx +++ b/apps/backoffice/src/app/features/dashboard/pages/DashboardPage.tsx @@ -1,43 +1,437 @@ -import type { ElementType } from 'react'; -import { Grid, Paper, Text, Title, Stack, Group } from '@mantine/core'; -import { IconBox, IconUsers, IconActivity } from '@tabler/icons-react'; +import { useState, type ElementType, type ReactNode } from 'react'; +import { + Paper, + Text, + Title, + Stack, + Group, + SimpleGrid, + Grid, + ThemeIcon, + Badge, + Avatar, + SegmentedControl, + Button, + Box, + UnstyledButton, + Anchor, +} from '@mantine/core'; +import { + IconUsers, + IconUserCheck, + IconUserPlus, + IconClockHour4, + IconShieldLock, + IconMail, + IconUpload, + IconDownload, + IconClipboardList, + IconArrowUpRight, + IconArrowDownRight, + IconArrowRight, +} from '@tabler/icons-react'; +import { + ResponsiveContainer, + BarChart, + Bar, + XAxis, + CartesianGrid, + Tooltip, + Cell, + PieChart, + Pie, +} from 'recharts'; -interface StatCardProps { - label: string; - value: string; - icon: ElementType; +/* ------------------------------------------------------------------ */ +/* sample data — swap for live API results */ +/* ------------------------------------------------------------------ */ + +const REGISTRATIONS = [ + { month: 'Nov', value: 320 }, + { month: 'Dec', value: 410 }, + { month: 'Jan', value: 380 }, + { month: 'Feb', value: 520 }, + { month: 'Mar', value: 470 }, + { month: 'Apr', value: 610 }, + { month: 'May', value: 560 }, + { month: 'Jun', value: 720 }, +]; + +const ROLES = [ + { name: 'Admin', value: 18, color: '#1d4ed8' }, + { name: 'Staff', value: 42, color: '#3b82f6' }, + { name: 'Viewer', value: 30, color: '#60a5fa' }, + { name: 'Guest', value: 10, color: '#93c5fd' }, +]; + +const KPIS = [ + { label: 'Total Users', value: '9,431', icon: IconUsers, color: 'blue', trend: '+12.5%', up: true }, + { label: 'Active Users', value: '7,218', icon: IconUserCheck, color: 'indigo', trend: '+8.2%', up: true }, + { label: 'New This Month', value: '642', icon: IconUserPlus, color: 'cyan', trend: '+23.1%', up: true }, + { label: 'Pending Approvals', value: '37', icon: IconClockHour4, color: 'orange', trend: '-4.0%', up: false }, +]; + +const QUICK_LINKS = [ + { label: 'Add User', desc: 'Create a new account', icon: IconUserPlus, color: 'blue' }, + { label: 'Roles & Permissions', desc: 'Manage access levels', icon: IconShieldLock, color: 'indigo' }, + { label: 'Invite Members', desc: 'Send email invites', icon: IconMail, color: 'cyan' }, + { label: 'Import Users', desc: 'Bulk CSV import', icon: IconUpload, color: 'violet' }, + { label: 'Export Data', desc: 'Download reports', icon: IconDownload, color: 'blue' }, + { label: 'Audit Log', desc: 'Review activity', icon: IconClipboardList, color: 'grape' }, +]; + +type UserStatus = 'Active' | 'Pending' | 'Invited'; +const STATUS_COLOR: Record = { + Active: 'teal', + Pending: 'orange', + Invited: 'blue', +}; + +const RECENT_USERS: { + name: string; + email: string; + initials: string; color: string; -} + status: UserStatus; +}[] = [ + { name: 'Sara Tesfaye', email: 'sara.t@ema.gov.et', initials: 'ST', color: 'blue', status: 'Active' }, + { name: 'Daniel Bekele', email: 'daniel.b@ema.gov.et', initials: 'DB', color: 'indigo', status: 'Active' }, + { name: 'Hanna Girma', email: 'hanna.g@ema.gov.et', initials: 'HG', color: 'violet', status: 'Pending' }, + { name: 'Yonas Alemu', email: 'yonas.a@ema.gov.et', initials: 'YA', color: 'cyan', status: 'Active' }, + { name: 'Meron Tadesse', email: 'meron.t@ema.gov.et', initials: 'MT', color: 'grape', status: 'Invited' }, +]; -function StatCard({ label, value, icon: Icon, color }: StatCardProps) { +/* ------------------------------------------------------------------ */ +/* small building blocks */ +/* ------------------------------------------------------------------ */ + +function SectionCard({ children }: { children: ReactNode }) { return ( - - - - - {label} - - {value} - - - + + {children} ); } -export function DashboardPage() { +function CardHeading({ title, subtitle }: { title: string; subtitle?: string }) { return ( - - Dashboard - - - + + + {title} + + {subtitle && ( + + {subtitle} + + )} + + ); +} + +function StatCard({ + label, + value, + icon: Icon, + color, + trend, + up, +}: { + label: string; + value: string; + icon: ElementType; + color: string; + trend: string; + up: boolean; +}) { + return ( + + + + + + : } + > + {trend} + + + + {value} + + + {label} + + + ); +} + +function QuickLinkTile({ + label, + desc, + icon: Icon, + color, +}: { + label: string; + desc: string; + icon: ElementType; + color: string; +}) { + return ( + { + e.currentTarget.style.borderColor = 'var(--mantine-color-blue-3)'; + e.currentTarget.style.boxShadow = 'var(--mantine-shadow-sm)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.borderColor = 'var(--mantine-color-gray-2)'; + e.currentTarget.style.boxShadow = 'none'; + }} + > + + + + + {label} + + + {desc} + + + ); +} + +/* ------------------------------------------------------------------ */ +/* page */ +/* ------------------------------------------------------------------ */ + +export function DashboardPage() { + const [range, setRange] = useState('week'); + + return ( + + {/* header */} + + + Overview + + Welcome back — here's what's happening across your platform. + + + + + + + + + {/* KPIs */} + + {KPIS.map((k) => ( + + ))} + + + {/* charts */} + + + + + + + + +18.2% + + + vs previous period + + + + + + + + + + + + + + + + + {REGISTRATIONS.map((entry, i) => ( + + ))} + + + + + - - + + + + + + + + + + {ROLES.map((r) => ( + + ))} + + [`${value}%`, name]} + /> + + + + + 9,431 + + + Total users + + + + + {ROLES.map((r) => ( + + + + + {r.name} + + + + {r.value}% + + + ))} + + + - - + + + {/* quick links + recent users */} + + + + + + {QUICK_LINKS.map((q) => ( + + ))} + + + + + + + + + Recent Users + + + + View all + + + + + + {RECENT_USERS.map((u, i) => ( + + + + {u.initials} + + + + {u.name} + + + {u.email} + + + + + {u.status} + + + ))} + + diff --git a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx index cc1a8e6e5..6da17832b 100644 --- a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx +++ b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx @@ -9,9 +9,10 @@ export function BackofficeLayout() { return ( diff --git a/apps/backoffice/src/app/layouts/components/AppHeader.tsx b/apps/backoffice/src/app/layouts/components/AppHeader.tsx index f9ec47ee3..89ed47a2a 100644 --- a/apps/backoffice/src/app/layouts/components/AppHeader.tsx +++ b/apps/backoffice/src/app/layouts/components/AppHeader.tsx @@ -1,5 +1,22 @@ -import { Group, Text, ActionIcon, Burger } from '@mantine/core'; -import { IconLogout } from '@tabler/icons-react'; +import { + Group, + Text, + ActionIcon, + Burger, + TextInput, + Avatar, + Menu, + Indicator, + UnstyledButton, +} from '@mantine/core'; +import { + IconLogout, + IconBell, + IconSearch, + IconChevronDown, + IconUserCircle, + IconSettings, +} from '@tabler/icons-react'; import { useNavigate } from 'react-router-dom'; import { useAuthUser } from '@tria-plc/iamui-common'; @@ -17,16 +34,54 @@ export function AppHeader({ onToggle }: AppHeaderProps) { }; return ( - - + + - - EMA Backoffice - + } + /> + + + + + + + + + + + + + + + AD + +
+ + Amanuel D. + + + Administrator + +
+ + + + + + }>Profile + }>Settings + + } onClick={handleLogout}> + Logout + + + - - - ); } diff --git a/apps/backoffice/src/app/layouts/components/AppSidebar.tsx b/apps/backoffice/src/app/layouts/components/AppSidebar.tsx index 5798f27f0..b2d4ce8ae 100644 --- a/apps/backoffice/src/app/layouts/components/AppSidebar.tsx +++ b/apps/backoffice/src/app/layouts/components/AppSidebar.tsx @@ -1,17 +1,15 @@ -import { NavLink, Stack } from '@mantine/core'; +import { Stack, Group, Text, NavLink, ThemeIcon, Button, Box } from '@mantine/core'; import { - IconDashboard, - IconBox, + IconLayoutDashboard, IconUsers, - IconClipboardList, + IconShieldCheck, + IconLifebuoy, } from '@tabler/icons-react'; import { useNavigate, useLocation } from 'react-router-dom'; const NAV_ITEMS = [ - { label: 'Dashboard', icon: IconDashboard, path: '/dashboard' }, - { label: 'Items', icon: IconBox, path: '/items' }, + { label: 'Dashboard', icon: IconLayoutDashboard, path: '/dashboard' }, { label: 'User Management', icon: IconUsers, path: '/um' }, - { label: 'Audit Log', icon: IconClipboardList, path: '/audit-log' }, ]; export function AppSidebar() { @@ -19,16 +17,77 @@ export function AppSidebar() { const { pathname } = useLocation(); return ( - - {NAV_ITEMS.map(({ label, icon: Icon, path }) => ( - } - active={pathname.startsWith(path)} - onClick={() => navigate(path)} - /> - ))} + + + {/* brand */} + + + + +
+ + EMA Admin + + + Control Center + +
+ + + {/* menu */} +
+ + MENU + + + {NAV_ITEMS.map(({ label, icon: Icon, path }) => ( + } + active={pathname.startsWith(path)} + onClick={() => navigate(path)} + variant="light" + color="blue" + styles={{ root: { borderRadius: 10 }, label: { fontWeight: 500 } }} + /> + ))} + +
+ + + {/* help card */} + + + + + + Need help? + + + Browse guides or contact support. + + + ); } diff --git a/apps/backoffice/src/app/router/index.tsx b/apps/backoffice/src/app/router/index.tsx index 153f96256..12fb36ba0 100644 --- a/apps/backoffice/src/app/router/index.tsx +++ b/apps/backoffice/src/app/router/index.tsx @@ -1,13 +1,30 @@ -import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom'; +import { + createBrowserRouter, + RouterProvider, + Navigate, + Outlet, +} from 'react-router-dom'; import { LoginPage, ForgotPasswordPage, OTPVerificationPage, } from '@ema-platform/auth'; import { AuthLayout } from '../layouts/AuthLayout'; -import { AuthProviders } from '../iam/IamProviders'; +import { BackofficeLayout } from '../layouts/BackofficeLayout'; +import { ProtectedRoute } from './ProtectedRoute'; +import { IamProviders } from '../iam/IamProviders'; +import { DashboardPage } from '../features/dashboard/pages/DashboardPage'; import UserManagementHostPage from '../features/user-management-host/UserManagementHostPage'; +/** Wraps the authenticated area in the IAM provider stack. */ +function IamShell() { + return ( + + + + ); +} + const router = createBrowserRouter([ { element: , @@ -17,7 +34,25 @@ const router = createBrowserRouter([ { path: '/otp-verify', element: }, ], }, - { path: '/um/*', element: }, + { + element: , + children: [ + { + element: , + children: [ + { + element: , + children: [ + { index: true, element: }, + { path: 'dashboard', element: }, + ], + }, + // User-management module runs full-screen (its own chrome), outside the shell. + { path: 'um/*', element: }, + ], + }, + ], + }, { path: '/404', element:
Page not found
}, { path: '*', element: }, ]); diff --git a/backoffice-v2.pen b/backoffice-v2.pen new file mode 100644 index 000000000..104b7df49 --- /dev/null +++ b/backoffice-v2.pen @@ -0,0 +1,7255 @@ +{ + "version": "2.13", + "children": [ + { + "type": "frame", + "id": "MsYYR", + "x": 1620, + "y": 0, + "name": "Logo", + "reusable": true, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OMTkV", + "name": "MarkBg", + "width": 46, + "height": 46, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 305, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 13, + "layout": "none", + "children": [ + { + "type": "path", + "id": "gyul0", + "x": 9, + "y": 11, + "name": "MarkGlyph", + "geometry": "M6 38l12-24 6 10 6-10 12 24z", + "viewBox": [ + 0, + 0, + 48, + 48 + ], + "fill": "#ffffff", + "width": 28, + "height": 24 + } + ] + }, + { + "type": "frame", + "id": "NSE1K", + "name": "Wordmark", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "w7m6yd", + "name": "WordTitle", + "fill": "$text", + "content": "EMA Portal", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "O0g9q", + "name": "WordSub", + "fill": "$text-3", + "content": "Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "w7vu0", + "x": 1620, + "y": 90, + "name": "PrimaryButton", + "reusable": true, + "fill": "$primary", + "cornerRadius": 10, + "gap": 8, + "padding": [ + 13, + 22 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "HArwB", + "x": 0, + "y": 0, + "name": "BtnIcon", + "enabled": false, + "width": 17, + "height": 17, + "icon": "arrow-right", + "library": "lucide", + "fill": "$on-primary" + }, + { + "type": "text", + "id": "DyFB8", + "name": "BtnLabel", + "fill": "$on-primary", + "content": "Continue", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "mHew6", + "x": 1620, + "y": 170, + "name": "InputField", + "reusable": true, + "width": 320, + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "Afdkp", + "name": "FieldLabel", + "fill": "$text-2", + "content": "Label", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "x5Nj13", + "name": "FieldBox", + "width": "fill_container", + "height": 46, + "fill": "$surface", + "cornerRadius": 10, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "gap": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yUGLe", + "name": "FieldIcon", + "width": 18, + "height": 18, + "icon": "mail", + "library": "lucide", + "fill": "$text-3" + }, + { + "type": "text", + "id": "UEASz", + "name": "FieldValue", + "fill": "$text-3", + "content": "Placeholder", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "YsTIy", + "x": 1620, + "y": 290, + "name": "StatusBadge", + "reusable": true, + "fill": "$success-tint", + "cornerRadius": 999, + "gap": 6, + "padding": [ + 5, + 11 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "ZWgvO", + "name": "BadgeDot", + "fill": "$success", + "width": 7, + "height": 7 + }, + { + "type": "text", + "id": "t5FNn", + "name": "BadgeText", + "fill": "$success", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "dqlby", + "x": 1620, + "y": 360, + "name": "SidebarItem", + "reusable": true, + "width": 214, + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "l3szF", + "name": "NavIcon", + "width": 19, + "height": 19, + "icon": "layout-dashboard", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "E1om4", + "name": "NavLabel", + "fill": "$text-2", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "J7luNv", + "x": 1620, + "y": 440, + "name": "StatCard", + "reusable": true, + "width": 260, + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 14, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "BpEqu", + "name": "StatTop", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "k7Vs7N", + "name": "StatIconBg", + "width": 42, + "height": 42, + "fill": "$primary-tint", + "cornerRadius": 11, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "IwjFB", + "name": "StatIcon", + "width": 21, + "height": 21, + "icon": "file-text", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "R1uym", + "name": "StatTrend", + "fill": "$success", + "content": "+12%", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "q248Hw", + "name": "StatValue", + "fill": "$text", + "content": "0", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "qC7zc", + "name": "StatLabel", + "fill": "$text-3", + "content": "Label", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "VkY5w", + "x": 0, + "y": 160, + "name": "Login Page", + "clip": true, + "width": 1440, + "height": 920, + "fill": "$surface", + "children": [ + { + "type": "frame", + "id": "qBoA8", + "name": "BrandPanel", + "clip": true, + "width": 600, + "height": 920, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "layout": "vertical", + "padding": [ + 60, + 56 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "ellipse", + "id": "nHOkH", + "layoutPosition": "absolute", + "x": 360, + "y": -120, + "name": "Blob1", + "fill": "#ffffff14", + "width": 380, + "height": 380 + }, + { + "type": "ellipse", + "id": "aMY1D", + "layoutPosition": "absolute", + "x": -140, + "y": 640, + "name": "Blob2", + "fill": "#ffffff10", + "width": 340, + "height": 340 + }, + { + "type": "path", + "id": "oRq88", + "layoutPosition": "absolute", + "x": 0, + "y": 740, + "name": "Wave", + "geometry": "M0 60c150-50 300 50 460 0 80-25 120 10 140-5l0 125-600 0z", + "viewBox": [ + 0, + 0, + 600, + 180 + ], + "fill": "#ffffff12", + "width": 600, + "height": 180 + }, + { + "id": "J5kdY", + "type": "ref", + "ref": "MsYYR", + "name": "Logo White", + "descendants": { + "OMTkV": { + "fill": "#ffffff" + }, + "gyul0": { + "fill": "#3160b7" + }, + "w7m6yd": { + "fill": "#ffffff" + }, + "O0g9q": { + "fill": "#dbe6ff" + } + } + }, + { + "type": "frame", + "id": "rztMT", + "name": "Tagline", + "width": "fill_container", + "layout": "vertical", + "gap": 22, + "children": [ + { + "type": "text", + "id": "c98lQ", + "name": "Headline", + "fill": "#ffffff", + "textGrowth": "fixed-width", + "width": 440, + "content": "Maritime licensing, made simple.", + "lineHeight": 1.15, + "fontFamily": "Inter", + "fontSize": 40, + "fontWeight": "700" + }, + { + "type": "text", + "id": "KNmSj", + "name": "Sub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": 430, + "content": "Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "WAfLX", + "name": "Features", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "eYOCj", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lVmjx", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ejRDp", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "p76cyx", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Submit applications online, 24/7", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "K31NGs", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "W0UYZ", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "U5Tyh", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "YiD3i", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Real-time status tracking & alerts", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "YkEjw", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "XgBzD", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "vUe03", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Y94Mp5", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Bilingual: English & አማርኛ", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "lsEDh", + "name": "Footer", + "fill": "#bcd0f5", + "content": "© 2026 Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NGXkK", + "name": "FormPanel", + "width": "fill_container", + "height": 920, + "fill": "$surface", + "layout": "vertical", + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "En8ht", + "name": "Form", + "width": 400, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "h4jVG0", + "name": "FormHead", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "goTn7", + "name": "Title", + "fill": "$text", + "content": "Welcome back", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "xKaAi", + "name": "Caption", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Sign in to access your maritime licensing dashboard.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + } + ] + }, + { + "id": "CbMKc", + "type": "ref", + "ref": "mHew6", + "name": "Email Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Email or phone" + }, + "yUGLe": { + "icon": "mail" + }, + "UEASz": { + "content": "you@example.com" + } + } + }, + { + "id": "eiCHF", + "type": "ref", + "ref": "mHew6", + "name": "Password Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Password" + }, + "yUGLe": { + "icon": "lock" + }, + "UEASz": { + "content": "••••••••••" + } + } + }, + { + "type": "frame", + "id": "z9VF2", + "name": "OptionsRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "fsoL4", + "name": "Remember", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "WQkX8", + "name": "Checkbox", + "width": 18, + "height": 18, + "fill": "$primary", + "cornerRadius": 5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ScHbW", + "name": "CbCheck", + "width": 12, + "height": 12, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "d7Uh8", + "name": "RememberTxt", + "fill": "$text-2", + "content": "Remember me", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "eTzLh", + "name": "Forgot", + "fill": "$primary", + "content": "Forgot password?", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "id": "f4qJF", + "type": "ref", + "ref": "w7vu0", + "name": "Sign In Btn", + "width": "fill_container", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Sign in" + } + } + }, + { + "type": "frame", + "id": "wH8pn", + "name": "Divider", + "width": "fill_container", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "id": "Eh7ea", + "name": "L1", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "text", + "id": "c5f5FV", + "name": "Or", + "fill": "$text-3", + "content": "or", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "rectangle", + "id": "kid0k", + "name": "L2", + "fill": "$border", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "id": "H0bzHf", + "type": "ref", + "ref": "w7vu0", + "name": "Phone Btn", + "width": "fill_container", + "fill": "#ffffff00", + "stroke": "$border-strong", + "strokeWidth": 1.5, + "descendants": { + "HArwB": { + "enabled": true, + "icon": "smartphone", + "fill": "$text-2" + }, + "DyFB8": { + "content": "Sign in with phone number", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "XIerG", + "name": "SignupRow", + "width": "fill_container", + "gap": 5, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "v3hh8z", + "name": "NoAcct", + "fill": "$text-2", + "content": "Don't have an account?", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "bTQPg", + "name": "SignupLink", + "fill": "$primary", + "content": "Create one", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "sHuNk", + "x": 0, + "y": 1200, + "name": "Signup Page", + "clip": true, + "width": 1440, + "height": 920, + "fill": "$surface", + "children": [ + { + "type": "frame", + "id": "mctmG", + "name": "BrandPanel SU", + "clip": true, + "width": 600, + "height": 920, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "layout": "vertical", + "padding": [ + 60, + 56 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "ellipse", + "id": "F7evR", + "layoutPosition": "absolute", + "x": 360, + "y": -120, + "name": "Blob1", + "fill": "#ffffff14", + "width": 380, + "height": 380 + }, + { + "type": "ellipse", + "id": "pZsHR", + "layoutPosition": "absolute", + "x": -140, + "y": 640, + "name": "Blob2", + "fill": "#ffffff10", + "width": 340, + "height": 340 + }, + { + "type": "path", + "id": "DerBU", + "layoutPosition": "absolute", + "x": 0, + "y": 740, + "name": "Wave", + "geometry": "M0 60c150-50 300 50 460 0 80-25 120 10 140-5l0 125-600 0z", + "viewBox": [ + 0, + 0, + 600, + 180 + ], + "fill": "#ffffff12", + "width": 600, + "height": 180 + }, + { + "id": "TfugM", + "type": "ref", + "ref": "MsYYR", + "name": "Logo White", + "descendants": { + "OMTkV": { + "fill": "#ffffff" + }, + "gyul0": { + "fill": "#3160b7" + }, + "w7m6yd": { + "fill": "#ffffff" + }, + "O0g9q": { + "fill": "#dbe6ff" + } + } + }, + { + "type": "frame", + "id": "jjF5O", + "name": "Tagline", + "width": "fill_container", + "layout": "vertical", + "gap": 22, + "children": [ + { + "type": "text", + "id": "Gv1oF", + "name": "Headline", + "fill": "#ffffff", + "textGrowth": "fixed-width", + "width": 440, + "content": "Join Ethiopia's maritime community.", + "lineHeight": 1.15, + "fontFamily": "Inter", + "fontSize": 40, + "fontWeight": "700" + }, + { + "type": "text", + "id": "m8RTkc", + "name": "Sub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": 430, + "content": "Create your account to apply for licenses, manage documents, and track approvals from anywhere.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "v0Kfv", + "name": "Features", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SnxYq", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "t8L9L", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "aI69b", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Yhx8f", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Submit applications online, 24/7", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "nbZah", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SYspu", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "d5dZY", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Q751x", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Real-time status tracking & alerts", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "HTVM0", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HTM2o", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ehPE4", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "aYXZP", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Bilingual: English & አማርኛ", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "pWfuc", + "name": "Footer", + "fill": "#bcd0f5", + "content": "© 2026 Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ji6Rm", + "name": "FormPanel", + "width": "fill_container", + "height": 920, + "fill": "$surface", + "layout": "vertical", + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "JFeBH", + "name": "Form", + "width": 404, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "kwLJs", + "name": "FormHead", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "lr07j", + "name": "Title", + "fill": "$text", + "content": "Create account", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LtWh4", + "name": "Caption", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "It only takes a minute to get started.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "pEE75", + "name": "NameRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "id": "JNKJO", + "type": "ref", + "ref": "mHew6", + "name": "First Name", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "First name" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Abebe" + } + } + }, + { + "id": "k8yXX", + "type": "ref", + "ref": "mHew6", + "name": "Last Name", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Last name" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Bekele" + } + } + } + ] + }, + { + "id": "o7gw53", + "type": "ref", + "ref": "mHew6", + "name": "Email Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Email address" + }, + "yUGLe": { + "icon": "mail" + }, + "UEASz": { + "content": "you@example.com" + } + } + }, + { + "id": "Xxial", + "type": "ref", + "ref": "mHew6", + "name": "Phone Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Phone number" + }, + "yUGLe": { + "icon": "smartphone" + }, + "UEASz": { + "content": "+251 9XX XXX XXX" + } + } + }, + { + "id": "YhrMn", + "type": "ref", + "ref": "mHew6", + "name": "Password Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Password" + }, + "yUGLe": { + "icon": "lock" + }, + "UEASz": { + "content": "At least 8 characters" + } + } + }, + { + "type": "frame", + "id": "AzBDK", + "name": "TermsRow", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OCDT7", + "name": "Checkbox", + "width": 18, + "height": 18, + "fill": "$primary", + "cornerRadius": 5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "sUV3V", + "name": "CbCheck", + "width": 12, + "height": 12, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "frame", + "id": "rtJzT", + "name": "TermsTxtWrap", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mu5VZ", + "name": "T1", + "fill": "$text-2", + "content": "I agree to the", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "cq51O", + "name": "T2", + "fill": "$primary", + "content": "Terms & Privacy Policy", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "id": "Si9Gx", + "type": "ref", + "ref": "w7vu0", + "name": "Create Btn", + "width": "fill_container", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Create account" + } + } + }, + { + "type": "frame", + "id": "rjZ30", + "name": "LoginRow", + "width": "fill_container", + "gap": 5, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "mLKks", + "name": "HaveAcct", + "fill": "$text-2", + "content": "Already have an account?", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "MFGnu", + "name": "LoginLink", + "fill": "$primary", + "content": "Sign in", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Jgomv", + "x": 1620, + "y": 740, + "name": "Sidebar", + "reusable": true, + "clip": true, + "width": 260, + "height": 1024, + "fill": "$surface", + "stroke": "$border", + "strokeWidth": { + "right": 1 + }, + "layout": "vertical", + "gap": 6, + "padding": [ + 24, + 18 + ], + "children": [ + { + "type": "frame", + "id": "jejxM", + "name": "LogoWrap", + "width": "fill_container", + "padding": [ + 6, + 8, + 22, + 8 + ], + "children": [ + { + "id": "L0gv1U", + "type": "ref", + "ref": "MsYYR", + "name": "SbLogo" + } + ] + }, + { + "type": "frame", + "id": "YGnyN", + "name": "Nav Dashboard", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Yvfme", + "name": "Icon Dashboard", + "width": 19, + "height": 19, + "icon": "layout-dashboard", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "IarpQ", + "name": "Label Dashboard", + "fill": "$text-2", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "P4qU0M", + "name": "Nav My Applications", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "FQ3CH", + "name": "Icon My Applications", + "width": 19, + "height": 19, + "icon": "file-text", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "L017Y", + "name": "Label My Applications", + "fill": "$text-2", + "content": "My Applications", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "U6Mh6", + "name": "Nav Apply for License", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "pB4hR", + "name": "Icon Apply for License", + "width": 19, + "height": 19, + "icon": "square-pen", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "j8YLAt", + "name": "Label Apply for License", + "fill": "$text-2", + "content": "Apply for License", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ncpha", + "name": "Nav My Licenses", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "lNQG7", + "name": "Icon My Licenses", + "width": 19, + "height": 19, + "icon": "award", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "auAHt", + "name": "Label My Licenses", + "fill": "$text-2", + "content": "My Licenses", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Peaqt", + "name": "Nav Documents", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rgdld", + "name": "Icon Documents", + "width": 19, + "height": 19, + "icon": "folder-open", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "VYgB8", + "name": "Label Documents", + "fill": "$text-2", + "content": "Documents", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "x0CL0", + "name": "Nav Support", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "cnsxS", + "name": "Icon Support", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "q7CiL9", + "name": "Label Support", + "fill": "$text-2", + "content": "Support", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "esDMJ", + "name": "Spacer", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical" + }, + { + "type": "frame", + "id": "fQOwE", + "name": "UserCard", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 12, + "gap": 11, + "padding": [ + 12, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "K1iI3P", + "name": "Avatar", + "width": 38, + "height": 38, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oH2vQ", + "name": "Initials", + "fill": "#ffffff", + "content": "AB", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "e0QXoV", + "name": "UserMeta", + "width": "fill_container", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "yEelp", + "name": "UserName", + "fill": "$text", + "content": "Abebe Bekele", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ICyWD", + "name": "UserRole", + "fill": "$text-3", + "content": "Applicant", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon", + "id": "G1LYcF", + "name": "Logout", + "width": 17, + "height": 17, + "icon": "log-out", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "p7YlcS", + "x": 1620, + "y": 1800, + "name": "Topbar", + "reusable": true, + "clip": true, + "width": 1180, + "height": 74, + "fill": "$surface", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 0, + 28 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "z9vr5", + "name": "TbLeft", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "iGHyf", + "name": "TbTitle", + "fill": "$text", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "Y6duvq", + "name": "TbSubtitle", + "fill": "$text-3", + "content": "Tuesday, 11 June 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "rgQt9", + "name": "TbRight", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nSJ5U", + "name": "Search", + "width": 240, + "height": 40, + "fill": "$surface-2", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "gap": 9, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "n2ldu", + "name": "SearchIcon", + "width": 16, + "height": 16, + "icon": "search", + "library": "lucide", + "fill": "$text-3" + }, + { + "type": "text", + "id": "LNADw", + "name": "SearchPh", + "fill": "$text-3", + "content": "Search applications...", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "S3zuX", + "name": "Lang", + "fill": "$surface-2", + "cornerRadius": 9, + "stroke": "$border", + "strokeWidth": 1, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "p7EVt", + "name": "LangEn", + "fill": "$primary", + "cornerRadius": 9, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "jSaOD", + "name": "LangEnT", + "fill": "#ffffff", + "content": "EN", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TBZHe", + "name": "LangAm", + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "SNxnP", + "name": "LangAmT", + "fill": "$text-2", + "content": "አማ", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NwdzW", + "name": "Bell", + "width": 40, + "height": 40, + "fill": "$surface-2", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "W85ew", + "name": "BellIcon", + "width": 18, + "height": 18, + "icon": "bell", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "ellipse", + "id": "m0y4nG", + "layoutPosition": "absolute", + "x": 23, + "y": 9, + "name": "BellDot", + "fill": "$danger", + "width": 8, + "height": 8, + "stroke": "$surface", + "strokeWidth": 1.5 + } + ] + }, + { + "type": "frame", + "id": "m7u4P9", + "name": "TbAvatar", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sYkka", + "name": "TbInitials", + "fill": "#ffffff", + "content": "AB", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZGAZr", + "x": 0, + "y": 2240, + "name": "Dashboard Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "LAWiS", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "YGnyN": { + "fill": "$primary-tint" + }, + "Yvfme": { + "fill": "$primary" + }, + "IarpQ": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "cJZmz", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "LV1LJ", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "Dashboard" + }, + "Y6duvq": { + "content": "Tuesday, 11 June 2026" + } + } + }, + { + "type": "frame", + "id": "pC16B", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 22, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "Iqjtu", + "name": "Hero", + "clip": true, + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 295, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "cornerRadius": 18, + "padding": [ + 28, + 30 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "hyMeK", + "name": "HeroL", + "width": 560, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "egOSN", + "name": "HeroTxt", + "width": "fill_container", + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "K9RLlU", + "name": "HeroTitle", + "fill": "#ffffff", + "content": "Welcome back, Abebe 👋", + "fontFamily": "Inter", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "gBMkV", + "name": "HeroSub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "You have 2 applications in review and 1 license expiring soon. Start a new application or check your status below.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "id": "OIUi7", + "type": "ref", + "ref": "w7vu0", + "name": "HeroBtn", + "fill": "#ffffff", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "plus", + "fill": "$primary" + }, + "DyFB8": { + "content": "Apply for a license", + "fill": "$primary" + } + } + } + ] + }, + { + "type": "frame", + "id": "h9hUf", + "name": "HeroDeco", + "width": 120, + "height": 120, + "fill": "#ffffff1f", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "tGu27", + "name": "HeroIcon", + "width": 62, + "height": 62, + "icon": "ship", + "library": "lucide", + "fill": "#ffffff" + } + ] + } + ] + }, + { + "type": "frame", + "id": "sZ985", + "name": "Stats", + "width": "fill_container", + "gap": 18, + "children": [ + { + "id": "bTcaT", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Active Licenses", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$teal-tint" + }, + "IwjFB": { + "icon": "award", + "fill": "$teal-deep" + }, + "R1uym": { + "content": "+1 this year", + "fill": "$success" + }, + "q248Hw": { + "content": "3" + }, + "qC7zc": { + "content": "Active Licenses" + } + } + }, + { + "id": "lsbvt", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Pending Applications", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$warning-tint" + }, + "IwjFB": { + "icon": "clock", + "fill": "$warning" + }, + "R1uym": { + "content": "In review", + "fill": "$text-3" + }, + "q248Hw": { + "content": "2" + }, + "qC7zc": { + "content": "Pending Applications" + } + } + }, + { + "id": "MyZ8N", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Approved", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$success-tint" + }, + "IwjFB": { + "icon": "circle-check", + "fill": "$success" + }, + "R1uym": { + "content": "100% pass", + "fill": "$success" + }, + "q248Hw": { + "content": "5" + }, + "qC7zc": { + "content": "Approved" + } + } + }, + { + "id": "YclzM", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Documents", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$primary-tint" + }, + "IwjFB": { + "icon": "folder", + "fill": "$primary" + }, + "R1uym": { + "content": "Up to date", + "fill": "$text-3" + }, + "q248Hw": { + "content": "12" + }, + "qC7zc": { + "content": "Documents" + } + } + } + ] + }, + { + "type": "frame", + "id": "L0eBZ", + "name": "LowerRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "KQdkC", + "name": "TableCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 4, + "padding": [ + 20, + 22 + ], + "children": [ + { + "type": "frame", + "id": "ZXaIu", + "name": "TblHead", + "width": "fill_container", + "padding": [ + 0, + 0, + 14, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fj2tc", + "name": "TblTitle", + "fill": "$text", + "content": "Recent Applications", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "TQsDE", + "name": "ViewAll", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "T88adp", + "name": "ViewAllT", + "fill": "$primary", + "content": "View all", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "icon", + "id": "u1ctc", + "name": "ViewAllI", + "width": 15, + "height": 15, + "icon": "arrow-right", + "library": "lucide", + "fill": "$primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "gFE0y", + "name": "HeaderRow", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 8, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Jtne8", + "name": "HC Application", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GxwTI", + "name": "HCT Application", + "fill": "$text-3", + "content": "APPLICATION", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "IJlm4", + "name": "HC Type", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RQNox", + "name": "HCT Type", + "fill": "$text-3", + "content": "TYPE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "HX9Z1", + "name": "HC Submitted", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "S0I4o", + "name": "HCT Submitted", + "fill": "$text-3", + "content": "SUBMITTED", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "giKZn", + "name": "HC Status", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "X9uC2N", + "name": "HCT Status", + "fill": "$text-3", + "content": "STATUS", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "owldN", + "name": "HC ", + "width": 44, + "height": 14, + "alignItems": "center" + } + ] + }, + { + "type": "frame", + "id": "xTOzu", + "name": "Row EMA-2026-0142", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "uZGWQ", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VMWYn", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "XZMXA", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FqBHa", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "IAbcy", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "meMYo", + "name": "AppDate", + "fill": "$text-2", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "HhUWs", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "Mm6ZT", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + }, + { + "type": "frame", + "id": "Z6A5NU", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ze1sp", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SGMa6", + "name": "Row EMA-2026-0138", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "aqxLg", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sF4Vj", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0138", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "GPhQB", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pcQCC", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Registration", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CIozI", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kXvc8", + "name": "AppDate", + "fill": "$text-2", + "content": "28 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "IvsK7", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "z4OQP", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "uudks", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "eROQl", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "U4USx", + "name": "Row EMA-2026-0131", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lj9wT", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TAs6Y", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0131", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FvTCq", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pzKuc", + "name": "AppType", + "fill": "$text-2", + "content": "License Renewal", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "EMFIo", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Y5A2z", + "name": "AppDate", + "fill": "$text-2", + "content": "20 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "tI2ZH", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "l2JIfo", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$warning" + }, + "t5FNn": { + "content": "Pending Docs", + "fill": "$warning" + } + } + } + ] + }, + { + "type": "frame", + "id": "J912Y6", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rfivS", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "g75KT", + "name": "Row EMA-2026-0125", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "vUomR", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XSMtH", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0125", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "AaJua", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGF3r", + "name": "AppType", + "fill": "$text-2", + "content": "Port Facility Permit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "r2uER7", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Z65Ig", + "name": "AppDate", + "fill": "$text-2", + "content": "12 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ZpIil", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "M2pKF", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "gNHTZ", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "wncQX", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NtH6M", + "name": "Row EMA-2026-0119", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SYghB", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "j8mlDO", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0119", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "RVl8e", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FTRkX", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Medical Cert.", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "m0shuT", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ZzVet", + "name": "AppDate", + "fill": "$text-2", + "content": "04 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "VSQrT", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "MtOHI", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "qO6Nu", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yOOSc", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "y6IEbH", + "name": "RightCol", + "width": 380, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "NmyFD", + "name": "StatusCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 18, + "padding": 22, + "children": [ + { + "type": "text", + "id": "i6zfE4", + "name": "StatusTitle", + "fill": "$text", + "content": "Application Status", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "a2loR", + "name": "DonutRow", + "width": "fill_container", + "gap": 22, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "qxOzz", + "name": "Donut", + "width": 150, + "height": 150, + "layout": "none", + "children": [ + { + "type": "ellipse", + "id": "b54fR", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": 90, + "sweepAngle": -180, + "fill": "$success", + "width": 150, + "height": 150 + }, + { + "type": "ellipse", + "id": "s6RicT", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": -90, + "sweepAngle": -108, + "fill": "$info", + "width": 150, + "height": 150 + }, + { + "type": "ellipse", + "id": "clxJT", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": -198, + "sweepAngle": -72, + "fill": "$border-strong", + "width": 150, + "height": 150 + }, + { + "type": "frame", + "id": "XtmnS", + "layoutPosition": "absolute", + "x": 0, + "y": 0, + "name": "DonutCenter", + "width": 150, + "height": 150, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XaUwo", + "name": "DonutNum", + "fill": "$text", + "content": "10", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "P5tXkS", + "name": "DonutLbl", + "fill": "$text-3", + "content": "Total", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "L3N7ve", + "name": "Legend", + "width": "fill_container", + "layout": "vertical", + "gap": 13, + "children": [ + { + "type": "frame", + "id": "Niycu", + "name": "Leg Approved", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "uWvrq", + "name": "LegDot", + "fill": "$success", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "zB0wL", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "n67m8", + "name": "LegCt", + "fill": "$text", + "content": "5", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "D2qpT4", + "name": "Leg Under review", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vcLbN", + "name": "LegDot", + "fill": "$info", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "UJs6S", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Under review", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "zvZ4P", + "name": "LegCt", + "fill": "$text", + "content": "3", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TyJFb", + "name": "Leg Draft / pending", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "M1HEI", + "name": "LegDot", + "fill": "$border-strong", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "ggAOH", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Draft / pending", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "JT63H", + "name": "LegCt", + "fill": "$text", + "content": "2", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "E0Yzf", + "name": "QuickCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 12, + "padding": 22, + "children": [ + { + "type": "text", + "id": "dme7N", + "name": "QuickTitle", + "fill": "$text", + "content": "Quick actions", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "dqatz", + "name": "QA Apply for new license", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "d2QC09", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$primary-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "XcRtf", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "square-pen", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "gbAKh", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Apply for new license", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "HhAza", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "ydfQb", + "name": "QA Upload a document", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "l0ZlTL", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$teal-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ad7cR", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "upload", + "library": "lucide", + "fill": "$teal-deep" + } + ] + }, + { + "type": "text", + "id": "kVciN", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Upload a document", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "qQGwr", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "WXlmh", + "name": "QA Contact support", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ii2WB", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$warning-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "gmpgY", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "$warning" + } + ] + }, + { + "type": "text", + "id": "HFpp6", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Contact support", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "ZVGuS", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KAIBB", + "x": 0, + "y": 3400, + "name": "Apply Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "iTj1E", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "U6Mh6": { + "fill": "$primary-tint" + }, + "pB4hR": { + "fill": "$primary" + }, + "j8YLAt": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "rkNjF", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "hFivP", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "Apply for a License" + }, + "Y6duvq": { + "content": "New application" + } + } + }, + { + "type": "frame", + "id": "rOL4h", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 22, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "NCmTp", + "name": "Stepper", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "padding": [ + 20, + 26 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NsKUA", + "name": "Step 1", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "obPd0", + "name": "Circle 1", + "width": 34, + "height": 34, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "N8nMn", + "name": "CircNum 1", + "fill": "#ffffff", + "content": "1", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "umoYQ", + "name": "StepLbl 1", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "fCJqB", + "name": "StepKicker 1", + "fill": "$text-3", + "content": "Step 1", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "MUHMy", + "name": "StepName 1", + "fill": "$text", + "content": "Service & Applicant", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "cQM8M", + "name": "Conn 1", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "Qv4xI", + "name": "Step 2", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATfKy", + "name": "Circle 2", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "W532Md", + "name": "CircNum 2", + "fill": "$text-3", + "content": "2", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SBeVb", + "name": "StepLbl 2", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "pUlEQ", + "name": "StepKicker 2", + "fill": "$text-3", + "content": "Step 2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "pfquL", + "name": "StepName 2", + "fill": "$text-2", + "content": "License Details", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "DxnqS", + "name": "Conn 2", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "keCsR", + "name": "Step 3", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "du8EN", + "name": "Circle 3", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPZwA", + "name": "CircNum 3", + "fill": "$text-3", + "content": "3", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "t2yWY", + "name": "StepLbl 3", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "Szzdr", + "name": "StepKicker 3", + "fill": "$text-3", + "content": "Step 3", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "v2lP5f", + "name": "StepName 3", + "fill": "$text-2", + "content": "Documents", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "kzi6C", + "name": "Conn 3", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "v91r9", + "name": "Step 4", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "N1dXIR", + "name": "Circle 4", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ukVVM", + "name": "CircNum 4", + "fill": "$text-3", + "content": "4", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ouhMt", + "name": "StepLbl 4", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "oO7Pj", + "name": "StepKicker 4", + "fill": "$text-3", + "content": "Step 4", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "boCvL", + "name": "StepName 4", + "fill": "$text-2", + "content": "Review & Submit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "qwbb4", + "name": "ColsRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "X85wP", + "name": "FormCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 20, + "padding": [ + 26, + 28 + ], + "children": [ + { + "type": "frame", + "id": "d7tebX", + "name": "FormCardHead", + "width": "fill_container", + "layout": "vertical", + "gap": 5, + "children": [ + { + "type": "text", + "id": "sauBO", + "name": "SecTitle", + "fill": "$text", + "content": "Service & Applicant Details", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ZBlq6", + "name": "SecSub", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Choose the license you need and tell us who the application is for.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "id": "qiBS0", + "type": "ref", + "ref": "mHew6", + "name": "LicenseType", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "License type" + }, + "yUGLe": { + "icon": "ship" + }, + "UEASz": { + "content": "Seafarer Certificate of Competency", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "Ah3JW", + "name": "Row1", + "width": "fill_container", + "gap": 14, + "children": [ + { + "id": "xaVDi", + "type": "ref", + "ref": "mHew6", + "name": "Category", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Category" + }, + "yUGLe": { + "icon": "layers" + }, + "UEASz": { + "content": "Deck Officer", + "fill": "$text" + } + } + }, + { + "id": "wqOLy", + "type": "ref", + "ref": "mHew6", + "name": "Region", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Region" + }, + "yUGLe": { + "icon": "map-pin" + }, + "UEASz": { + "content": "Addis Ababa", + "fill": "$text" + } + } + } + ] + }, + { + "id": "J87jqV", + "type": "ref", + "ref": "mHew6", + "name": "FullName", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Full name (as on ID)" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Abebe Bekele Tadesse", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "E5jYLA", + "name": "Row2", + "width": "fill_container", + "gap": 14, + "children": [ + { + "id": "DQ7UY", + "type": "ref", + "ref": "mHew6", + "name": "IdNumber", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "National ID / Passport" + }, + "yUGLe": { + "icon": "badge-check" + }, + "UEASz": { + "content": "ET-1234567", + "fill": "$text" + } + } + }, + { + "id": "x4ttyn", + "type": "ref", + "ref": "mHew6", + "name": "Phone", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Phone number" + }, + "yUGLe": { + "icon": "smartphone" + }, + "UEASz": { + "content": "+251 911 234 567", + "fill": "$text" + } + } + } + ] + }, + { + "type": "frame", + "id": "XBsD4", + "name": "DropWrap", + "width": "fill_container", + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "sNDeN", + "name": "DropLabel", + "fill": "$text-2", + "content": "Supporting document", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "f8eCs1", + "name": "Dropzone", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 12, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "layout": "vertical", + "gap": 9, + "padding": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rtMna", + "name": "DzIconBg", + "width": 46, + "height": 46, + "fill": "$primary-tint", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "m5LZm", + "name": "DzIcon", + "width": 23, + "height": 23, + "icon": "cloud-upload", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "ZE5wY", + "name": "DzMain", + "fill": "$text", + "content": "Drag & drop files here, or click to browse", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "EDbP3", + "name": "DzHint", + "fill": "$text-3", + "content": "PDF, JPG or PNG — up to 10 MB", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "X1xWmJ", + "name": "FormFooter", + "width": "fill_container", + "padding": [ + 8, + 0, + 0, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "id": "qcDHD", + "type": "ref", + "ref": "w7vu0", + "name": "BackBtn", + "fill": "#ffffff00", + "stroke": "$border-strong", + "strokeWidth": 1.5, + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-left", + "fill": "$text-2" + }, + "DyFB8": { + "content": "Back", + "fill": "$text-2" + } + } + }, + { + "id": "owlxm", + "type": "ref", + "ref": "w7vu0", + "name": "ContinueBtn", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Continue to documents" + } + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "dS05X", + "name": "ApplyRight", + "width": 340, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "WlWsM", + "name": "SummaryCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 16, + "padding": 22, + "children": [ + { + "type": "text", + "id": "HOH7c", + "name": "SumTitle", + "fill": "$text", + "content": "Application Summary", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "pwOYh", + "name": "SvcRow", + "width": "fill_container", + "fill": "$primary-tint", + "cornerRadius": 12, + "gap": 12, + "padding": 13, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "v7ukh", + "name": "SvcIconBg", + "width": 40, + "height": 40, + "fill": "$primary", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "dQ8m7", + "name": "SvcIcon", + "width": 21, + "height": 21, + "icon": "ship", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "frame", + "id": "Wf10a", + "name": "SvcMeta", + "width": "fill_container", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "p87P1", + "name": "SvcName", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "Et8pR", + "name": "SvcCat", + "fill": "$text-2", + "content": "Deck Officer · New", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "usa0p", + "name": "SumDetails", + "width": "fill_container", + "layout": "vertical", + "gap": 11, + "children": [ + { + "type": "frame", + "id": "qRvIl", + "name": "D Processing time", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "E4HoR", + "name": "DK", + "fill": "$text-2", + "content": "Processing time", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dQfV9", + "name": "DV", + "fill": "$text", + "content": "5–7 working days", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Q6DHI9", + "name": "D License validity", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "q1SiQo", + "name": "DK", + "fill": "$text-2", + "content": "License validity", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "S1S0Aa", + "name": "DV", + "fill": "$text", + "content": "2 years", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FdnTt", + "name": "D Service fee", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "bKoex", + "name": "DK", + "fill": "$text-2", + "content": "Service fee", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "L6aSB", + "name": "DV", + "fill": "$text", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "pFqjA", + "name": "SumDiv", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "OH7Cn", + "name": "TotalRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GcEZm", + "name": "TotK", + "fill": "$text", + "content": "Total payable", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ij6pf", + "name": "TotV", + "fill": "$primary", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ULtkX", + "name": "HelpCard", + "width": "fill_container", + "fill": "$teal-tint", + "cornerRadius": 16, + "layout": "vertical", + "gap": 12, + "padding": 22, + "children": [ + { + "type": "frame", + "id": "xyiFX", + "name": "HelpHead", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NKI6q", + "name": "HelpIconBg", + "width": 36, + "height": 36, + "fill": "$teal-deep", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "p4V7G", + "name": "HelpIcon", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "eXJd6", + "name": "HelpTitle", + "fill": "$teal-deep", + "content": "Need help?", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "h2fpy4", + "name": "HelpTxt", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Our support team can guide you through the documents required for this license.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "Esmx2", + "name": "HelpBtn", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 9, + "stroke": "$teal", + "strokeWidth": 1.5, + "gap": 7, + "padding": [ + 10, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "PWrnt", + "name": "HelpBtnI", + "width": 16, + "height": 16, + "icon": "message-circle", + "library": "lucide", + "fill": "$teal-deep" + }, + { + "type": "text", + "id": "nzneE", + "name": "HelpBtnT", + "fill": "$teal-deep", + "content": "Contact support", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KSAqp", + "x": 0, + "y": 4560, + "name": "Track Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "V2XNIa", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "P4qU0M": { + "fill": "$primary-tint" + }, + "FQ3CH": { + "fill": "$primary" + }, + "L017Y": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "E7D6Ia", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "IPXj0", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "My Applications" + }, + "Y6duvq": { + "content": "Track the status of every application" + } + } + }, + { + "type": "frame", + "id": "eWfYU", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 20, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "KCyI8", + "name": "TabsBar", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "fmZ0Q", + "name": "Tabs", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "vq12i", + "name": "Tab All", + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Pg9Nk", + "name": "TabT", + "fill": "#ffffff", + "content": "All", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "af30T", + "name": "TabCt", + "fill": "#ffffff33", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "u9ClAs", + "name": "TabCtT", + "fill": "#ffffff", + "content": "12", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "lRP8s", + "name": "Tab In Review", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Pzsdn", + "name": "TabT", + "fill": "$text-2", + "content": "In Review", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "q2sRbd", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "XN5TI", + "name": "TabCtT", + "fill": "$text-3", + "content": "2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ogtou", + "name": "Tab Approved", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CrHRl", + "name": "TabT", + "fill": "$text-2", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Qh8Fn", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "idDN8", + "name": "TabCtT", + "fill": "$text-3", + "content": "5", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "sZwvB", + "name": "Tab Pending", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "X6CkYq", + "name": "TabT", + "fill": "$text-2", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "R4mFm", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "RG742", + "name": "TabCtT", + "fill": "$text-3", + "content": "1", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "XiIKe", + "name": "FilterBtn", + "fill": "$surface", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 9, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "T08tk2", + "name": "FilterI", + "width": 16, + "height": 16, + "icon": "sliders-horizontal", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "qXage", + "name": "FilterT", + "fill": "$text-2", + "content": "Filter & sort", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "i6IMYT", + "name": "ColsRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "g54tjQ", + "name": "ListCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "padding": [ + 8, + 10 + ], + "children": [ + { + "type": "frame", + "id": "rp6r7", + "name": "HeaderRow", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "YtkV3", + "name": "HC Application", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fKsnZ", + "name": "HCT", + "fill": "$text-3", + "content": "APPLICATION", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "c0MAy", + "name": "HC Type", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "wO0Ud", + "name": "HCT", + "fill": "$text-3", + "content": "TYPE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "B36NE", + "name": "HC Submitted", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Gh7Vc", + "name": "HCT", + "fill": "$text-3", + "content": "SUBMITTED", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "DTtXQ", + "name": "HC Fee", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mpBV4", + "name": "HCT", + "fill": "$text-3", + "content": "FEE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "h9tasp", + "name": "HC Status", + "width": 140, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PnxVy", + "name": "HCT", + "fill": "$text-3", + "content": "STATUS", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "MAEjx", + "name": "HC ", + "width": 36, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KsqzB", + "name": "sp", + "width": 10, + "height": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "D958I", + "name": "Row EMA-2026-0142", + "width": "fill_container", + "fill": "$primary-tint", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "R4aCEk", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "aYGc5", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "tExGQ", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "gDvna", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "v9ocBU", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Dfetn", + "name": "AppDate", + "fill": "$text-2", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "x7FH8f", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "P4A7v7", + "name": "AppFee", + "fill": "$text", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "zM5ig", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "iJuyO", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + }, + { + "type": "frame", + "id": "S6wRHz", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "eGgUw", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "gZA7p", + "name": "Row EMA-2026-0138", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "iL2pW", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EOfMJ", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0138", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OpoHa", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "frITZ", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Registration", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "dBB7Y", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "jRAT1", + "name": "AppDate", + "fill": "$text-2", + "content": "28 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "VXE9w", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "J9nou", + "name": "AppFee", + "fill": "$text", + "content": "ETB 3,500", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "gZ2f1", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "nQUN7", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "xEQKY", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "TxKjt", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "bZ7Wd", + "name": "Row EMA-2026-0131", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lPfbH", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "f2mGC", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0131", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "kw3fH", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XLg9V", + "name": "AppType", + "fill": "$text-2", + "content": "License Renewal", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "pSTek", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "z5ASw", + "name": "AppDate", + "fill": "$text-2", + "content": "20 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SzTdR", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "psSLu", + "name": "AppFee", + "fill": "$text", + "content": "ETB 900", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AjS3c", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "OOO7D", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$warning" + }, + "t5FNn": { + "content": "Pending Docs", + "fill": "$warning" + } + } + } + ] + }, + { + "type": "frame", + "id": "y7mrg", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "IQeS2", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "t2Pc9", + "name": "Row EMA-2026-0125", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DOJVf", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "f6xrcp", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0125", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "mVbmg", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "YiEx1", + "name": "AppType", + "fill": "$text-2", + "content": "Port Facility Permit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "MlEFs", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Bg9WT", + "name": "AppDate", + "fill": "$text-2", + "content": "12 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "tImPS", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rwldn", + "name": "AppFee", + "fill": "$text", + "content": "ETB 5,000", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "HD3Pq", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "rWwV2", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "GqjkP", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "q0BSx", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "J6dn9Y", + "name": "Row EMA-2026-0119", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "imKo0", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "JbulD", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0119", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "n4k2E", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rgSAi", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Medical Cert.", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "h18HMo", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CtO1F", + "name": "AppDate", + "fill": "$text-2", + "content": "04 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PYiSD", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oHszA", + "name": "AppFee", + "fill": "$text", + "content": "ETB 600", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "svHLS", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "JnMdC", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "B2nZ8", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ugRU5", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "nirG9", + "name": "Row EMA-2026-0102", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CitOO", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "x0Sg6G", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0102", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CHmNf", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "x4umV", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Inspection", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "C1NKlz", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "eYAqU", + "name": "AppDate", + "fill": "$text-2", + "content": "21 Apr 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "UaKCA", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "D2uqF", + "name": "AppFee", + "fill": "$text", + "content": "ETB 2,400", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FcMa4", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "QBrHw", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$danger" + }, + "t5FNn": { + "content": "Rejected", + "fill": "$danger" + } + } + } + ] + }, + { + "type": "frame", + "id": "fTNK5", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ihc5I", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "I4KoWF", + "name": "TrackRight", + "width": 380, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "e9Ps5r", + "name": "TimelineCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 16, + "padding": 22, + "children": [ + { + "type": "frame", + "id": "paaBC", + "name": "TlHead", + "width": "fill_container", + "layout": "vertical", + "gap": 9, + "children": [ + { + "type": "frame", + "id": "w3NNmf", + "name": "TlHeadTop", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "v64DH", + "name": "TlHL", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "pHJ3t", + "name": "TlId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "pjhb9", + "name": "TlType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + }, + { + "id": "JQTTG", + "type": "ref", + "ref": "YsTIy", + "name": "TlBadge", + "fill": "$info-tint", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "qWmFS", + "name": "TlDiv", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "GRzoK", + "name": "Steps", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "zM4NH", + "name": "TS Application submitted", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "PsajH", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "d2AhbI", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "uZpSB", + "name": "Ck", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "b2apV", + "name": "Line", + "fill": "$primary", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "dZskF", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "BuX6p", + "name": "StepLb", + "fill": "$text", + "content": "Application submitted", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "mSB4j", + "name": "StepDt", + "fill": "$text-3", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "veEo0", + "name": "TS Document verification", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "hSMGY", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BHNZ8", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "n8DTR", + "name": "Ck", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "PoeZP", + "name": "Line", + "fill": "$primary", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "K2vAA", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "d0IFrZ", + "name": "StepLb", + "fill": "$text", + "content": "Document verification", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "cnsXE", + "name": "StepDt", + "fill": "$text-3", + "content": "03 Jun 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "mRfpA", + "name": "TS Under assessment", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Ru2oQ", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "gc2Yb", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary-tint", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 2.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "Go8ZU", + "name": "Dot", + "fill": "$primary", + "width": 9, + "height": 9 + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "zZxB4", + "name": "Line", + "fill": "$border", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "mcEC0", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "LyM4a", + "name": "StepLb", + "fill": "$text", + "content": "Under assessment", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "McQpw", + "name": "StepDt", + "fill": "$primary", + "content": "In progress · est. 2 days", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "E4eQl", + "name": "TS Approval decision", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "pmOwe", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ZZANT", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "WeN6t", + "name": "Dot", + "fill": "$border-strong", + "width": 8, + "height": 8 + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "KOIwT", + "name": "Line", + "fill": "$border", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "KiUl3", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "g0g8R", + "name": "StepLb", + "fill": "$text-2", + "content": "Approval decision", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Wt1rI", + "name": "StepDt", + "fill": "$text-3", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "XNjCg", + "name": "TS License issued", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "WCa8z", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "oPITP", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "Qlccv", + "name": "Dot", + "fill": "$border-strong", + "width": 8, + "height": 8 + } + ] + } + ] + }, + { + "type": "frame", + "id": "sFiRH", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0 + ], + "children": [ + { + "type": "text", + "id": "k3YWh", + "name": "StepLb", + "fill": "$text-2", + "content": "License issued", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "jTWU5", + "name": "StepDt", + "fill": "$text-3", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RzGgr", + "name": "EtaNote", + "width": "fill_container", + "fill": "$info-tint", + "cornerRadius": 11, + "gap": 9, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "a8eJk5", + "name": "EtaIcon", + "width": 17, + "height": 17, + "icon": "calendar-check", + "library": "lucide", + "fill": "$info" + }, + { + "type": "text", + "id": "j9Pmq", + "name": "EtaTxt", + "fill": "$info", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Estimated decision by 09 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "GQgPa", + "name": "TrackActions", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 10, + "padding": 18, + "children": [ + { + "type": "frame", + "id": "kRrST", + "name": "TA Download submission receipt", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "f7ySc9", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "download", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "MwNxt", + "name": "TAL", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Download submission receipt", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "QsBqB", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "y9b5Ak", + "name": "TA Message case officer", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yb7o2", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "message-circle", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "VTxt1", + "name": "TAL", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Message case officer", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "WXdQD", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "WUGtd", + "name": "TA Withdraw application", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "H521Zl", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "circle-x", + "library": "lucide", + "fill": "$danger" + }, + { + "type": "text", + "id": "FYw8Z", + "name": "TAL", + "fill": "$danger", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Withdraw application", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "QdPjx", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "themes": { + "Mode": [ + "Light", + "Dark" + ] + }, + "variables": { + "--sidebar": { + "type": "color", + "value": [ + { + "value": "#E7E8E5" + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-foreground": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary-foreground": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-border": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#ffffff1a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2a2a30", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent-foreground": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-ring": { + "type": "color", + "value": [ + { + "value": "#71717a" + }, + { + "value": "#71717a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--background": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--card": { + "type": "color", + "value": [ + { + "value": "#FFFFFF" + }, + { + "value": "#1A1A1A", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--card-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--popover": { + "type": "color", + "value": [ + { + "value": "#FFFFFF" + }, + { + "value": "#1A1A1A", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--popover-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--primary": { + "type": "color", + "value": [ + { + "value": "#FF8400" + }, + { + "value": "#FF8400", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--primary-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--secondary": { + "type": "color", + "value": [ + { + "value": "#E7E8E5" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--secondary-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--muted": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--muted-foreground": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#B8B9B6", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--accent": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--accent-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#F2F3F0", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--destructive": { + "type": "color", + "value": [ + { + "value": "#D93C15" + }, + { + "value": "#FF5C33", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--border": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--input": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--ring": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#666666", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--white": { + "type": "color", + "value": "#FFFFFF" + }, + "--black": { + "type": "color", + "value": "#000000" + }, + "--font-primary": { + "type": "string", + "value": "JetBrains Mono" + }, + "--font-secondary": { + "type": "string", + "value": "Geist" + }, + "--radius-none": { + "type": "number", + "value": 0 + }, + "--radius-pill": { + "type": "number", + "value": 999 + }, + "--color-success": { + "type": "color", + "value": [ + { + "value": "#DFE6E1" + }, + { + "value": "#222924", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-success-foreground": { + "type": "color", + "value": [ + { + "value": "#004D1A" + }, + { + "value": "#B6FFCE", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-warning": { + "type": "color", + "value": [ + { + "value": "#E9E3D8" + }, + { + "value": "#291C0F", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-warning-foreground": { + "type": "color", + "value": [ + { + "value": "#804200" + }, + { + "value": "#FF8400", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-error": { + "type": "color", + "value": [ + { + "value": "#E5DCDA" + }, + { + "value": "#24100B", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-error-foreground": { + "type": "color", + "value": [ + { + "value": "#8C1C00" + }, + { + "value": "#FF5C33", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-info": { + "type": "color", + "value": [ + { + "value": "#DFDFE6" + }, + { + "value": "#222229", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-info-foreground": { + "type": "color", + "value": [ + { + "value": "#000066" + }, + { + "value": "#B2B2FF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--radius-m": { + "type": "number", + "value": 16 + }, + "bg": { + "type": "color", + "value": "#f4f7fc" + }, + "border": { + "type": "color", + "value": "#e4e9f2" + }, + "border-strong": { + "type": "color", + "value": "#cdd6e3" + }, + "danger": { + "type": "color", + "value": "#e23d4d" + }, + "danger-tint": { + "type": "color", + "value": "#fdeaec" + }, + "info": { + "type": "color", + "value": "#4b7fe5" + }, + "info-tint": { + "type": "color", + "value": "#eef4ff" + }, + "on-primary": { + "type": "color", + "value": "#ffffff" + }, + "primary": { + "type": "color", + "value": "#3160b7" + }, + "primary-deep": { + "type": "color", + "value": "#2453a2" + }, + "primary-soft": { + "type": "color", + "value": "#dce7fb" + }, + "primary-tint": { + "type": "color", + "value": "#eef4ff" + }, + "success": { + "type": "color", + "value": "#0aab89" + }, + "success-tint": { + "type": "color", + "value": "#e1fbf6" + }, + "surface": { + "type": "color", + "value": "#ffffff" + }, + "surface-2": { + "type": "color", + "value": "#f6f8fb" + }, + "teal": { + "type": "color", + "value": "#1fc29d" + }, + "teal-deep": { + "type": "color", + "value": "#009879" + }, + "teal-tint": { + "type": "color", + "value": "#e1fbf6" + }, + "text": { + "type": "color", + "value": "#1e293b" + }, + "text-2": { + "type": "color", + "value": "#51607a" + }, + "text-3": { + "type": "color", + "value": "#8d9bb3" + }, + "warning": { + "type": "color", + "value": "#e08a0b" + }, + "warning-tint": { + "type": "color", + "value": "#fdf3e2" + } + } +} \ No newline at end of file diff --git a/backoffice.pen b/backoffice.pen new file mode 100644 index 000000000..104b7df49 --- /dev/null +++ b/backoffice.pen @@ -0,0 +1,7255 @@ +{ + "version": "2.13", + "children": [ + { + "type": "frame", + "id": "MsYYR", + "x": 1620, + "y": 0, + "name": "Logo", + "reusable": true, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OMTkV", + "name": "MarkBg", + "width": 46, + "height": 46, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 305, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 13, + "layout": "none", + "children": [ + { + "type": "path", + "id": "gyul0", + "x": 9, + "y": 11, + "name": "MarkGlyph", + "geometry": "M6 38l12-24 6 10 6-10 12 24z", + "viewBox": [ + 0, + 0, + 48, + 48 + ], + "fill": "#ffffff", + "width": 28, + "height": 24 + } + ] + }, + { + "type": "frame", + "id": "NSE1K", + "name": "Wordmark", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "w7m6yd", + "name": "WordTitle", + "fill": "$text", + "content": "EMA Portal", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "O0g9q", + "name": "WordSub", + "fill": "$text-3", + "content": "Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "w7vu0", + "x": 1620, + "y": 90, + "name": "PrimaryButton", + "reusable": true, + "fill": "$primary", + "cornerRadius": 10, + "gap": 8, + "padding": [ + 13, + 22 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "HArwB", + "x": 0, + "y": 0, + "name": "BtnIcon", + "enabled": false, + "width": 17, + "height": 17, + "icon": "arrow-right", + "library": "lucide", + "fill": "$on-primary" + }, + { + "type": "text", + "id": "DyFB8", + "name": "BtnLabel", + "fill": "$on-primary", + "content": "Continue", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "mHew6", + "x": 1620, + "y": 170, + "name": "InputField", + "reusable": true, + "width": 320, + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "Afdkp", + "name": "FieldLabel", + "fill": "$text-2", + "content": "Label", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "x5Nj13", + "name": "FieldBox", + "width": "fill_container", + "height": 46, + "fill": "$surface", + "cornerRadius": 10, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "gap": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yUGLe", + "name": "FieldIcon", + "width": 18, + "height": 18, + "icon": "mail", + "library": "lucide", + "fill": "$text-3" + }, + { + "type": "text", + "id": "UEASz", + "name": "FieldValue", + "fill": "$text-3", + "content": "Placeholder", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "YsTIy", + "x": 1620, + "y": 290, + "name": "StatusBadge", + "reusable": true, + "fill": "$success-tint", + "cornerRadius": 999, + "gap": 6, + "padding": [ + 5, + 11 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "ZWgvO", + "name": "BadgeDot", + "fill": "$success", + "width": 7, + "height": 7 + }, + { + "type": "text", + "id": "t5FNn", + "name": "BadgeText", + "fill": "$success", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "dqlby", + "x": 1620, + "y": 360, + "name": "SidebarItem", + "reusable": true, + "width": 214, + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "l3szF", + "name": "NavIcon", + "width": 19, + "height": 19, + "icon": "layout-dashboard", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "E1om4", + "name": "NavLabel", + "fill": "$text-2", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "J7luNv", + "x": 1620, + "y": 440, + "name": "StatCard", + "reusable": true, + "width": 260, + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 14, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "BpEqu", + "name": "StatTop", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "k7Vs7N", + "name": "StatIconBg", + "width": 42, + "height": 42, + "fill": "$primary-tint", + "cornerRadius": 11, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "IwjFB", + "name": "StatIcon", + "width": 21, + "height": 21, + "icon": "file-text", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "R1uym", + "name": "StatTrend", + "fill": "$success", + "content": "+12%", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "q248Hw", + "name": "StatValue", + "fill": "$text", + "content": "0", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "qC7zc", + "name": "StatLabel", + "fill": "$text-3", + "content": "Label", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "VkY5w", + "x": 0, + "y": 160, + "name": "Login Page", + "clip": true, + "width": 1440, + "height": 920, + "fill": "$surface", + "children": [ + { + "type": "frame", + "id": "qBoA8", + "name": "BrandPanel", + "clip": true, + "width": 600, + "height": 920, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "layout": "vertical", + "padding": [ + 60, + 56 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "ellipse", + "id": "nHOkH", + "layoutPosition": "absolute", + "x": 360, + "y": -120, + "name": "Blob1", + "fill": "#ffffff14", + "width": 380, + "height": 380 + }, + { + "type": "ellipse", + "id": "aMY1D", + "layoutPosition": "absolute", + "x": -140, + "y": 640, + "name": "Blob2", + "fill": "#ffffff10", + "width": 340, + "height": 340 + }, + { + "type": "path", + "id": "oRq88", + "layoutPosition": "absolute", + "x": 0, + "y": 740, + "name": "Wave", + "geometry": "M0 60c150-50 300 50 460 0 80-25 120 10 140-5l0 125-600 0z", + "viewBox": [ + 0, + 0, + 600, + 180 + ], + "fill": "#ffffff12", + "width": 600, + "height": 180 + }, + { + "id": "J5kdY", + "type": "ref", + "ref": "MsYYR", + "name": "Logo White", + "descendants": { + "OMTkV": { + "fill": "#ffffff" + }, + "gyul0": { + "fill": "#3160b7" + }, + "w7m6yd": { + "fill": "#ffffff" + }, + "O0g9q": { + "fill": "#dbe6ff" + } + } + }, + { + "type": "frame", + "id": "rztMT", + "name": "Tagline", + "width": "fill_container", + "layout": "vertical", + "gap": 22, + "children": [ + { + "type": "text", + "id": "c98lQ", + "name": "Headline", + "fill": "#ffffff", + "textGrowth": "fixed-width", + "width": 440, + "content": "Maritime licensing, made simple.", + "lineHeight": 1.15, + "fontFamily": "Inter", + "fontSize": 40, + "fontWeight": "700" + }, + { + "type": "text", + "id": "KNmSj", + "name": "Sub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": 430, + "content": "Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "WAfLX", + "name": "Features", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "eYOCj", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lVmjx", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ejRDp", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "p76cyx", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Submit applications online, 24/7", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "K31NGs", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "W0UYZ", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "U5Tyh", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "YiD3i", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Real-time status tracking & alerts", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "YkEjw", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "XgBzD", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "vUe03", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Y94Mp5", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Bilingual: English & አማርኛ", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "lsEDh", + "name": "Footer", + "fill": "#bcd0f5", + "content": "© 2026 Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NGXkK", + "name": "FormPanel", + "width": "fill_container", + "height": 920, + "fill": "$surface", + "layout": "vertical", + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "En8ht", + "name": "Form", + "width": 400, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "h4jVG0", + "name": "FormHead", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "goTn7", + "name": "Title", + "fill": "$text", + "content": "Welcome back", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "xKaAi", + "name": "Caption", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Sign in to access your maritime licensing dashboard.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + } + ] + }, + { + "id": "CbMKc", + "type": "ref", + "ref": "mHew6", + "name": "Email Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Email or phone" + }, + "yUGLe": { + "icon": "mail" + }, + "UEASz": { + "content": "you@example.com" + } + } + }, + { + "id": "eiCHF", + "type": "ref", + "ref": "mHew6", + "name": "Password Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Password" + }, + "yUGLe": { + "icon": "lock" + }, + "UEASz": { + "content": "••••••••••" + } + } + }, + { + "type": "frame", + "id": "z9VF2", + "name": "OptionsRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "fsoL4", + "name": "Remember", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "WQkX8", + "name": "Checkbox", + "width": 18, + "height": 18, + "fill": "$primary", + "cornerRadius": 5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ScHbW", + "name": "CbCheck", + "width": 12, + "height": 12, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "d7Uh8", + "name": "RememberTxt", + "fill": "$text-2", + "content": "Remember me", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "eTzLh", + "name": "Forgot", + "fill": "$primary", + "content": "Forgot password?", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "id": "f4qJF", + "type": "ref", + "ref": "w7vu0", + "name": "Sign In Btn", + "width": "fill_container", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Sign in" + } + } + }, + { + "type": "frame", + "id": "wH8pn", + "name": "Divider", + "width": "fill_container", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "id": "Eh7ea", + "name": "L1", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "text", + "id": "c5f5FV", + "name": "Or", + "fill": "$text-3", + "content": "or", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "rectangle", + "id": "kid0k", + "name": "L2", + "fill": "$border", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "id": "H0bzHf", + "type": "ref", + "ref": "w7vu0", + "name": "Phone Btn", + "width": "fill_container", + "fill": "#ffffff00", + "stroke": "$border-strong", + "strokeWidth": 1.5, + "descendants": { + "HArwB": { + "enabled": true, + "icon": "smartphone", + "fill": "$text-2" + }, + "DyFB8": { + "content": "Sign in with phone number", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "XIerG", + "name": "SignupRow", + "width": "fill_container", + "gap": 5, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "v3hh8z", + "name": "NoAcct", + "fill": "$text-2", + "content": "Don't have an account?", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "bTQPg", + "name": "SignupLink", + "fill": "$primary", + "content": "Create one", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "sHuNk", + "x": 0, + "y": 1200, + "name": "Signup Page", + "clip": true, + "width": 1440, + "height": 920, + "fill": "$surface", + "children": [ + { + "type": "frame", + "id": "mctmG", + "name": "BrandPanel SU", + "clip": true, + "width": 600, + "height": 920, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "layout": "vertical", + "padding": [ + 60, + 56 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "ellipse", + "id": "F7evR", + "layoutPosition": "absolute", + "x": 360, + "y": -120, + "name": "Blob1", + "fill": "#ffffff14", + "width": 380, + "height": 380 + }, + { + "type": "ellipse", + "id": "pZsHR", + "layoutPosition": "absolute", + "x": -140, + "y": 640, + "name": "Blob2", + "fill": "#ffffff10", + "width": 340, + "height": 340 + }, + { + "type": "path", + "id": "DerBU", + "layoutPosition": "absolute", + "x": 0, + "y": 740, + "name": "Wave", + "geometry": "M0 60c150-50 300 50 460 0 80-25 120 10 140-5l0 125-600 0z", + "viewBox": [ + 0, + 0, + 600, + 180 + ], + "fill": "#ffffff12", + "width": 600, + "height": 180 + }, + { + "id": "TfugM", + "type": "ref", + "ref": "MsYYR", + "name": "Logo White", + "descendants": { + "OMTkV": { + "fill": "#ffffff" + }, + "gyul0": { + "fill": "#3160b7" + }, + "w7m6yd": { + "fill": "#ffffff" + }, + "O0g9q": { + "fill": "#dbe6ff" + } + } + }, + { + "type": "frame", + "id": "jjF5O", + "name": "Tagline", + "width": "fill_container", + "layout": "vertical", + "gap": 22, + "children": [ + { + "type": "text", + "id": "Gv1oF", + "name": "Headline", + "fill": "#ffffff", + "textGrowth": "fixed-width", + "width": 440, + "content": "Join Ethiopia's maritime community.", + "lineHeight": 1.15, + "fontFamily": "Inter", + "fontSize": 40, + "fontWeight": "700" + }, + { + "type": "text", + "id": "m8RTkc", + "name": "Sub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": 430, + "content": "Create your account to apply for licenses, manage documents, and track approvals from anywhere.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "v0Kfv", + "name": "Features", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SnxYq", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "t8L9L", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "aI69b", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Yhx8f", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Submit applications online, 24/7", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "nbZah", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SYspu", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "d5dZY", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "Q751x", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Real-time status tracking & alerts", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "HTVM0", + "name": "Feat", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HTM2o", + "name": "Tick", + "width": 24, + "height": 24, + "fill": "#ffffff26", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ehPE4", + "name": "Check", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "aYXZP", + "name": "FeatTxt", + "fill": "#eef4ff", + "content": "Bilingual: English & አማርኛ", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "pWfuc", + "name": "Footer", + "fill": "#bcd0f5", + "content": "© 2026 Ethiopian Maritime Authority", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ji6Rm", + "name": "FormPanel", + "width": "fill_container", + "height": 920, + "fill": "$surface", + "layout": "vertical", + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "JFeBH", + "name": "Form", + "width": 404, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "kwLJs", + "name": "FormHead", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "lr07j", + "name": "Title", + "fill": "$text", + "content": "Create account", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LtWh4", + "name": "Caption", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "It only takes a minute to get started.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "pEE75", + "name": "NameRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "id": "JNKJO", + "type": "ref", + "ref": "mHew6", + "name": "First Name", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "First name" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Abebe" + } + } + }, + { + "id": "k8yXX", + "type": "ref", + "ref": "mHew6", + "name": "Last Name", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Last name" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Bekele" + } + } + } + ] + }, + { + "id": "o7gw53", + "type": "ref", + "ref": "mHew6", + "name": "Email Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Email address" + }, + "yUGLe": { + "icon": "mail" + }, + "UEASz": { + "content": "you@example.com" + } + } + }, + { + "id": "Xxial", + "type": "ref", + "ref": "mHew6", + "name": "Phone Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Phone number" + }, + "yUGLe": { + "icon": "smartphone" + }, + "UEASz": { + "content": "+251 9XX XXX XXX" + } + } + }, + { + "id": "YhrMn", + "type": "ref", + "ref": "mHew6", + "name": "Password Field", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Password" + }, + "yUGLe": { + "icon": "lock" + }, + "UEASz": { + "content": "At least 8 characters" + } + } + }, + { + "type": "frame", + "id": "AzBDK", + "name": "TermsRow", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OCDT7", + "name": "Checkbox", + "width": 18, + "height": 18, + "fill": "$primary", + "cornerRadius": 5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "sUV3V", + "name": "CbCheck", + "width": 12, + "height": 12, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "frame", + "id": "rtJzT", + "name": "TermsTxtWrap", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mu5VZ", + "name": "T1", + "fill": "$text-2", + "content": "I agree to the", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "cq51O", + "name": "T2", + "fill": "$primary", + "content": "Terms & Privacy Policy", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "id": "Si9Gx", + "type": "ref", + "ref": "w7vu0", + "name": "Create Btn", + "width": "fill_container", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Create account" + } + } + }, + { + "type": "frame", + "id": "rjZ30", + "name": "LoginRow", + "width": "fill_container", + "gap": 5, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "mLKks", + "name": "HaveAcct", + "fill": "$text-2", + "content": "Already have an account?", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "MFGnu", + "name": "LoginLink", + "fill": "$primary", + "content": "Sign in", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Jgomv", + "x": 1620, + "y": 740, + "name": "Sidebar", + "reusable": true, + "clip": true, + "width": 260, + "height": 1024, + "fill": "$surface", + "stroke": "$border", + "strokeWidth": { + "right": 1 + }, + "layout": "vertical", + "gap": 6, + "padding": [ + 24, + 18 + ], + "children": [ + { + "type": "frame", + "id": "jejxM", + "name": "LogoWrap", + "width": "fill_container", + "padding": [ + 6, + 8, + 22, + 8 + ], + "children": [ + { + "id": "L0gv1U", + "type": "ref", + "ref": "MsYYR", + "name": "SbLogo" + } + ] + }, + { + "type": "frame", + "id": "YGnyN", + "name": "Nav Dashboard", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Yvfme", + "name": "Icon Dashboard", + "width": 19, + "height": 19, + "icon": "layout-dashboard", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "IarpQ", + "name": "Label Dashboard", + "fill": "$text-2", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "P4qU0M", + "name": "Nav My Applications", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "FQ3CH", + "name": "Icon My Applications", + "width": 19, + "height": 19, + "icon": "file-text", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "L017Y", + "name": "Label My Applications", + "fill": "$text-2", + "content": "My Applications", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "U6Mh6", + "name": "Nav Apply for License", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "pB4hR", + "name": "Icon Apply for License", + "width": 19, + "height": 19, + "icon": "square-pen", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "j8YLAt", + "name": "Label Apply for License", + "fill": "$text-2", + "content": "Apply for License", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ncpha", + "name": "Nav My Licenses", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "lNQG7", + "name": "Icon My Licenses", + "width": 19, + "height": 19, + "icon": "award", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "auAHt", + "name": "Label My Licenses", + "fill": "$text-2", + "content": "My Licenses", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Peaqt", + "name": "Nav Documents", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rgdld", + "name": "Icon Documents", + "width": 19, + "height": 19, + "icon": "folder-open", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "VYgB8", + "name": "Label Documents", + "fill": "$text-2", + "content": "Documents", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "x0CL0", + "name": "Nav Support", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 11, + 13 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "cnsxS", + "name": "Icon Support", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "q7CiL9", + "name": "Label Support", + "fill": "$text-2", + "content": "Support", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "esDMJ", + "name": "Spacer", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical" + }, + { + "type": "frame", + "id": "fQOwE", + "name": "UserCard", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 12, + "gap": 11, + "padding": [ + 12, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "K1iI3P", + "name": "Avatar", + "width": 38, + "height": 38, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oH2vQ", + "name": "Initials", + "fill": "#ffffff", + "content": "AB", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "e0QXoV", + "name": "UserMeta", + "width": "fill_container", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "yEelp", + "name": "UserName", + "fill": "$text", + "content": "Abebe Bekele", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ICyWD", + "name": "UserRole", + "fill": "$text-3", + "content": "Applicant", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon", + "id": "G1LYcF", + "name": "Logout", + "width": 17, + "height": 17, + "icon": "log-out", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "p7YlcS", + "x": 1620, + "y": 1800, + "name": "Topbar", + "reusable": true, + "clip": true, + "width": 1180, + "height": 74, + "fill": "$surface", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 0, + 28 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "z9vr5", + "name": "TbLeft", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "iGHyf", + "name": "TbTitle", + "fill": "$text", + "content": "Dashboard", + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "Y6duvq", + "name": "TbSubtitle", + "fill": "$text-3", + "content": "Tuesday, 11 June 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "rgQt9", + "name": "TbRight", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nSJ5U", + "name": "Search", + "width": 240, + "height": 40, + "fill": "$surface-2", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "gap": 9, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "n2ldu", + "name": "SearchIcon", + "width": 16, + "height": 16, + "icon": "search", + "library": "lucide", + "fill": "$text-3" + }, + { + "type": "text", + "id": "LNADw", + "name": "SearchPh", + "fill": "$text-3", + "content": "Search applications...", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "S3zuX", + "name": "Lang", + "fill": "$surface-2", + "cornerRadius": 9, + "stroke": "$border", + "strokeWidth": 1, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "p7EVt", + "name": "LangEn", + "fill": "$primary", + "cornerRadius": 9, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "jSaOD", + "name": "LangEnT", + "fill": "#ffffff", + "content": "EN", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TBZHe", + "name": "LangAm", + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "SNxnP", + "name": "LangAmT", + "fill": "$text-2", + "content": "አማ", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NwdzW", + "name": "Bell", + "width": 40, + "height": 40, + "fill": "$surface-2", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "W85ew", + "name": "BellIcon", + "width": 18, + "height": 18, + "icon": "bell", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "ellipse", + "id": "m0y4nG", + "layoutPosition": "absolute", + "x": 23, + "y": 9, + "name": "BellDot", + "fill": "$danger", + "width": 8, + "height": 8, + "stroke": "$surface", + "strokeWidth": 1.5 + } + ] + }, + { + "type": "frame", + "id": "m7u4P9", + "name": "TbAvatar", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 300, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#3160b7", + "position": 0 + }, + { + "color": "#1fc29d", + "position": 1 + } + ] + }, + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sYkka", + "name": "TbInitials", + "fill": "#ffffff", + "content": "AB", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZGAZr", + "x": 0, + "y": 2240, + "name": "Dashboard Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "LAWiS", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "YGnyN": { + "fill": "$primary-tint" + }, + "Yvfme": { + "fill": "$primary" + }, + "IarpQ": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "cJZmz", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "LV1LJ", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "Dashboard" + }, + "Y6duvq": { + "content": "Tuesday, 11 June 2026" + } + } + }, + { + "type": "frame", + "id": "pC16B", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 22, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "Iqjtu", + "name": "Hero", + "clip": true, + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 295, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#2a59ac", + "position": 0 + }, + { + "color": "#3160b7", + "position": 0.5 + }, + { + "color": "#1bb497", + "position": 1 + } + ] + }, + "cornerRadius": 18, + "padding": [ + 28, + 30 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "hyMeK", + "name": "HeroL", + "width": 560, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "egOSN", + "name": "HeroTxt", + "width": "fill_container", + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "K9RLlU", + "name": "HeroTitle", + "fill": "#ffffff", + "content": "Welcome back, Abebe 👋", + "fontFamily": "Inter", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "gBMkV", + "name": "HeroSub", + "fill": "#dbe6ff", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "You have 2 applications in review and 1 license expiring soon. Start a new application or check your status below.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "id": "OIUi7", + "type": "ref", + "ref": "w7vu0", + "name": "HeroBtn", + "fill": "#ffffff", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "plus", + "fill": "$primary" + }, + "DyFB8": { + "content": "Apply for a license", + "fill": "$primary" + } + } + } + ] + }, + { + "type": "frame", + "id": "h9hUf", + "name": "HeroDeco", + "width": 120, + "height": 120, + "fill": "#ffffff1f", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "tGu27", + "name": "HeroIcon", + "width": 62, + "height": 62, + "icon": "ship", + "library": "lucide", + "fill": "#ffffff" + } + ] + } + ] + }, + { + "type": "frame", + "id": "sZ985", + "name": "Stats", + "width": "fill_container", + "gap": 18, + "children": [ + { + "id": "bTcaT", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Active Licenses", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$teal-tint" + }, + "IwjFB": { + "icon": "award", + "fill": "$teal-deep" + }, + "R1uym": { + "content": "+1 this year", + "fill": "$success" + }, + "q248Hw": { + "content": "3" + }, + "qC7zc": { + "content": "Active Licenses" + } + } + }, + { + "id": "lsbvt", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Pending Applications", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$warning-tint" + }, + "IwjFB": { + "icon": "clock", + "fill": "$warning" + }, + "R1uym": { + "content": "In review", + "fill": "$text-3" + }, + "q248Hw": { + "content": "2" + }, + "qC7zc": { + "content": "Pending Applications" + } + } + }, + { + "id": "MyZ8N", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Approved", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$success-tint" + }, + "IwjFB": { + "icon": "circle-check", + "fill": "$success" + }, + "R1uym": { + "content": "100% pass", + "fill": "$success" + }, + "q248Hw": { + "content": "5" + }, + "qC7zc": { + "content": "Approved" + } + } + }, + { + "id": "YclzM", + "type": "ref", + "ref": "J7luNv", + "name": "Stat Documents", + "width": "fill_container", + "descendants": { + "k7Vs7N": { + "fill": "$primary-tint" + }, + "IwjFB": { + "icon": "folder", + "fill": "$primary" + }, + "R1uym": { + "content": "Up to date", + "fill": "$text-3" + }, + "q248Hw": { + "content": "12" + }, + "qC7zc": { + "content": "Documents" + } + } + } + ] + }, + { + "type": "frame", + "id": "L0eBZ", + "name": "LowerRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "KQdkC", + "name": "TableCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 4, + "padding": [ + 20, + 22 + ], + "children": [ + { + "type": "frame", + "id": "ZXaIu", + "name": "TblHead", + "width": "fill_container", + "padding": [ + 0, + 0, + 14, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fj2tc", + "name": "TblTitle", + "fill": "$text", + "content": "Recent Applications", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "TQsDE", + "name": "ViewAll", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "T88adp", + "name": "ViewAllT", + "fill": "$primary", + "content": "View all", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "icon", + "id": "u1ctc", + "name": "ViewAllI", + "width": 15, + "height": 15, + "icon": "arrow-right", + "library": "lucide", + "fill": "$primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "gFE0y", + "name": "HeaderRow", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 8, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Jtne8", + "name": "HC Application", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GxwTI", + "name": "HCT Application", + "fill": "$text-3", + "content": "APPLICATION", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "IJlm4", + "name": "HC Type", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RQNox", + "name": "HCT Type", + "fill": "$text-3", + "content": "TYPE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "HX9Z1", + "name": "HC Submitted", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "S0I4o", + "name": "HCT Submitted", + "fill": "$text-3", + "content": "SUBMITTED", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "giKZn", + "name": "HC Status", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "X9uC2N", + "name": "HCT Status", + "fill": "$text-3", + "content": "STATUS", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "owldN", + "name": "HC ", + "width": 44, + "height": 14, + "alignItems": "center" + } + ] + }, + { + "type": "frame", + "id": "xTOzu", + "name": "Row EMA-2026-0142", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "uZGWQ", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VMWYn", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "XZMXA", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FqBHa", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "IAbcy", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "meMYo", + "name": "AppDate", + "fill": "$text-2", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "HhUWs", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "Mm6ZT", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + }, + { + "type": "frame", + "id": "Z6A5NU", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ze1sp", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SGMa6", + "name": "Row EMA-2026-0138", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "aqxLg", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sF4Vj", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0138", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "GPhQB", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pcQCC", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Registration", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CIozI", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kXvc8", + "name": "AppDate", + "fill": "$text-2", + "content": "28 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "IvsK7", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "z4OQP", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "uudks", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "eROQl", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "U4USx", + "name": "Row EMA-2026-0131", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lj9wT", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TAs6Y", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0131", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FvTCq", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pzKuc", + "name": "AppType", + "fill": "$text-2", + "content": "License Renewal", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "EMFIo", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Y5A2z", + "name": "AppDate", + "fill": "$text-2", + "content": "20 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "tI2ZH", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "l2JIfo", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$warning" + }, + "t5FNn": { + "content": "Pending Docs", + "fill": "$warning" + } + } + } + ] + }, + { + "type": "frame", + "id": "J912Y6", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rfivS", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "g75KT", + "name": "Row EMA-2026-0125", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "vUomR", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XSMtH", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0125", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "AaJua", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGF3r", + "name": "AppType", + "fill": "$text-2", + "content": "Port Facility Permit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "r2uER7", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Z65Ig", + "name": "AppDate", + "fill": "$text-2", + "content": "12 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ZpIil", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "M2pKF", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "gNHTZ", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "wncQX", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NtH6M", + "name": "Row EMA-2026-0119", + "width": "fill_container", + "stroke": "$border", + "strokeWidth": { + "bottom": 1 + }, + "padding": [ + 13, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SYghB", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "j8mlDO", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0119", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "RVl8e", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FTRkX", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Medical Cert.", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "m0shuT", + "name": "C3", + "width": 150, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ZzVet", + "name": "AppDate", + "fill": "$text-2", + "content": "04 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "VSQrT", + "name": "C4", + "width": 150, + "alignItems": "center", + "children": [ + { + "id": "MtOHI", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "qO6Nu", + "name": "C5", + "width": 44, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yOOSc", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "y6IEbH", + "name": "RightCol", + "width": 380, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "NmyFD", + "name": "StatusCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 18, + "padding": 22, + "children": [ + { + "type": "text", + "id": "i6zfE4", + "name": "StatusTitle", + "fill": "$text", + "content": "Application Status", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "a2loR", + "name": "DonutRow", + "width": "fill_container", + "gap": 22, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "qxOzz", + "name": "Donut", + "width": 150, + "height": 150, + "layout": "none", + "children": [ + { + "type": "ellipse", + "id": "b54fR", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": 90, + "sweepAngle": -180, + "fill": "$success", + "width": 150, + "height": 150 + }, + { + "type": "ellipse", + "id": "s6RicT", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": -90, + "sweepAngle": -108, + "fill": "$info", + "width": 150, + "height": 150 + }, + { + "type": "ellipse", + "id": "clxJT", + "x": 0, + "y": 0, + "name": "Seg", + "innerRadius": 0.66, + "startAngle": -198, + "sweepAngle": -72, + "fill": "$border-strong", + "width": 150, + "height": 150 + }, + { + "type": "frame", + "id": "XtmnS", + "layoutPosition": "absolute", + "x": 0, + "y": 0, + "name": "DonutCenter", + "width": 150, + "height": 150, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XaUwo", + "name": "DonutNum", + "fill": "$text", + "content": "10", + "fontFamily": "Inter", + "fontSize": 30, + "fontWeight": "700" + }, + { + "type": "text", + "id": "P5tXkS", + "name": "DonutLbl", + "fill": "$text-3", + "content": "Total", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "L3N7ve", + "name": "Legend", + "width": "fill_container", + "layout": "vertical", + "gap": 13, + "children": [ + { + "type": "frame", + "id": "Niycu", + "name": "Leg Approved", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "uWvrq", + "name": "LegDot", + "fill": "$success", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "zB0wL", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "n67m8", + "name": "LegCt", + "fill": "$text", + "content": "5", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "D2qpT4", + "name": "Leg Under review", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vcLbN", + "name": "LegDot", + "fill": "$info", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "UJs6S", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Under review", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "zvZ4P", + "name": "LegCt", + "fill": "$text", + "content": "3", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TyJFb", + "name": "Leg Draft / pending", + "width": "fill_container", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "M1HEI", + "name": "LegDot", + "fill": "$border-strong", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "ggAOH", + "name": "LegLbl", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Draft / pending", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "JT63H", + "name": "LegCt", + "fill": "$text", + "content": "2", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "700" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "E0Yzf", + "name": "QuickCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 12, + "padding": 22, + "children": [ + { + "type": "text", + "id": "dme7N", + "name": "QuickTitle", + "fill": "$text", + "content": "Quick actions", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "dqatz", + "name": "QA Apply for new license", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "d2QC09", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$primary-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "XcRtf", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "square-pen", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "gbAKh", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Apply for new license", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "HhAza", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "ydfQb", + "name": "QA Upload a document", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "l0ZlTL", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$teal-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ad7cR", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "upload", + "library": "lucide", + "fill": "$teal-deep" + } + ] + }, + { + "type": "text", + "id": "kVciN", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Upload a document", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "qQGwr", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "WXlmh", + "name": "QA Contact support", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 11, + "gap": 13, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ii2WB", + "name": "QAIcon", + "width": 38, + "height": 38, + "fill": "$warning-tint", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "gmpgY", + "name": "QAI", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "$warning" + } + ] + }, + { + "type": "text", + "id": "HFpp6", + "name": "QALbl", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Contact support", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "ZVGuS", + "name": "QAChev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KAIBB", + "x": 0, + "y": 3400, + "name": "Apply Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "iTj1E", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "U6Mh6": { + "fill": "$primary-tint" + }, + "pB4hR": { + "fill": "$primary" + }, + "j8YLAt": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "rkNjF", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "hFivP", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "Apply for a License" + }, + "Y6duvq": { + "content": "New application" + } + } + }, + { + "type": "frame", + "id": "rOL4h", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 22, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "NCmTp", + "name": "Stepper", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "padding": [ + 20, + 26 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NsKUA", + "name": "Step 1", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "obPd0", + "name": "Circle 1", + "width": 34, + "height": 34, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "N8nMn", + "name": "CircNum 1", + "fill": "#ffffff", + "content": "1", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "umoYQ", + "name": "StepLbl 1", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "fCJqB", + "name": "StepKicker 1", + "fill": "$text-3", + "content": "Step 1", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "MUHMy", + "name": "StepName 1", + "fill": "$text", + "content": "Service & Applicant", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "cQM8M", + "name": "Conn 1", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "Qv4xI", + "name": "Step 2", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATfKy", + "name": "Circle 2", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "W532Md", + "name": "CircNum 2", + "fill": "$text-3", + "content": "2", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SBeVb", + "name": "StepLbl 2", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "pUlEQ", + "name": "StepKicker 2", + "fill": "$text-3", + "content": "Step 2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "pfquL", + "name": "StepName 2", + "fill": "$text-2", + "content": "License Details", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "DxnqS", + "name": "Conn 2", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "keCsR", + "name": "Step 3", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "du8EN", + "name": "Circle 3", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPZwA", + "name": "CircNum 3", + "fill": "$text-3", + "content": "3", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "t2yWY", + "name": "StepLbl 3", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "Szzdr", + "name": "StepKicker 3", + "fill": "$text-3", + "content": "Step 3", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "v2lP5f", + "name": "StepName 3", + "fill": "$text-2", + "content": "Documents", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "kzi6C", + "name": "Conn 3", + "fill": "$border", + "width": "fill_container", + "height": 2 + }, + { + "type": "frame", + "id": "v91r9", + "name": "Step 4", + "gap": 11, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "N1dXIR", + "name": "Circle 4", + "width": 34, + "height": 34, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ukVVM", + "name": "CircNum 4", + "fill": "$text-3", + "content": "4", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ouhMt", + "name": "StepLbl 4", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "oO7Pj", + "name": "StepKicker 4", + "fill": "$text-3", + "content": "Step 4", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "boCvL", + "name": "StepName 4", + "fill": "$text-2", + "content": "Review & Submit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "qwbb4", + "name": "ColsRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "X85wP", + "name": "FormCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 20, + "padding": [ + 26, + 28 + ], + "children": [ + { + "type": "frame", + "id": "d7tebX", + "name": "FormCardHead", + "width": "fill_container", + "layout": "vertical", + "gap": 5, + "children": [ + { + "type": "text", + "id": "sauBO", + "name": "SecTitle", + "fill": "$text", + "content": "Service & Applicant Details", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ZBlq6", + "name": "SecSub", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Choose the license you need and tell us who the application is for.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "id": "qiBS0", + "type": "ref", + "ref": "mHew6", + "name": "LicenseType", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "License type" + }, + "yUGLe": { + "icon": "ship" + }, + "UEASz": { + "content": "Seafarer Certificate of Competency", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "Ah3JW", + "name": "Row1", + "width": "fill_container", + "gap": 14, + "children": [ + { + "id": "xaVDi", + "type": "ref", + "ref": "mHew6", + "name": "Category", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Category" + }, + "yUGLe": { + "icon": "layers" + }, + "UEASz": { + "content": "Deck Officer", + "fill": "$text" + } + } + }, + { + "id": "wqOLy", + "type": "ref", + "ref": "mHew6", + "name": "Region", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Region" + }, + "yUGLe": { + "icon": "map-pin" + }, + "UEASz": { + "content": "Addis Ababa", + "fill": "$text" + } + } + } + ] + }, + { + "id": "J87jqV", + "type": "ref", + "ref": "mHew6", + "name": "FullName", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Full name (as on ID)" + }, + "yUGLe": { + "icon": "user" + }, + "UEASz": { + "content": "Abebe Bekele Tadesse", + "fill": "$text" + } + } + }, + { + "type": "frame", + "id": "E5jYLA", + "name": "Row2", + "width": "fill_container", + "gap": 14, + "children": [ + { + "id": "DQ7UY", + "type": "ref", + "ref": "mHew6", + "name": "IdNumber", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "National ID / Passport" + }, + "yUGLe": { + "icon": "badge-check" + }, + "UEASz": { + "content": "ET-1234567", + "fill": "$text" + } + } + }, + { + "id": "x4ttyn", + "type": "ref", + "ref": "mHew6", + "name": "Phone", + "width": "fill_container", + "descendants": { + "Afdkp": { + "content": "Phone number" + }, + "yUGLe": { + "icon": "smartphone" + }, + "UEASz": { + "content": "+251 911 234 567", + "fill": "$text" + } + } + } + ] + }, + { + "type": "frame", + "id": "XBsD4", + "name": "DropWrap", + "width": "fill_container", + "layout": "vertical", + "gap": 7, + "children": [ + { + "type": "text", + "id": "sNDeN", + "name": "DropLabel", + "fill": "$text-2", + "content": "Supporting document", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "f8eCs1", + "name": "Dropzone", + "width": "fill_container", + "fill": "$surface-2", + "cornerRadius": 12, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "layout": "vertical", + "gap": 9, + "padding": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rtMna", + "name": "DzIconBg", + "width": 46, + "height": 46, + "fill": "$primary-tint", + "cornerRadius": 999, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "m5LZm", + "name": "DzIcon", + "width": 23, + "height": 23, + "icon": "cloud-upload", + "library": "lucide", + "fill": "$primary" + } + ] + }, + { + "type": "text", + "id": "ZE5wY", + "name": "DzMain", + "fill": "$text", + "content": "Drag & drop files here, or click to browse", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "EDbP3", + "name": "DzHint", + "fill": "$text-3", + "content": "PDF, JPG or PNG — up to 10 MB", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "X1xWmJ", + "name": "FormFooter", + "width": "fill_container", + "padding": [ + 8, + 0, + 0, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "id": "qcDHD", + "type": "ref", + "ref": "w7vu0", + "name": "BackBtn", + "fill": "#ffffff00", + "stroke": "$border-strong", + "strokeWidth": 1.5, + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-left", + "fill": "$text-2" + }, + "DyFB8": { + "content": "Back", + "fill": "$text-2" + } + } + }, + { + "id": "owlxm", + "type": "ref", + "ref": "w7vu0", + "name": "ContinueBtn", + "descendants": { + "HArwB": { + "enabled": true, + "icon": "arrow-right" + }, + "DyFB8": { + "content": "Continue to documents" + } + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "dS05X", + "name": "ApplyRight", + "width": 340, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "WlWsM", + "name": "SummaryCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 16, + "padding": 22, + "children": [ + { + "type": "text", + "id": "HOH7c", + "name": "SumTitle", + "fill": "$text", + "content": "Application Summary", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "pwOYh", + "name": "SvcRow", + "width": "fill_container", + "fill": "$primary-tint", + "cornerRadius": 12, + "gap": 12, + "padding": 13, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "v7ukh", + "name": "SvcIconBg", + "width": 40, + "height": 40, + "fill": "$primary", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "dQ8m7", + "name": "SvcIcon", + "width": 21, + "height": 21, + "icon": "ship", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "frame", + "id": "Wf10a", + "name": "SvcMeta", + "width": "fill_container", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "p87P1", + "name": "SvcName", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "Et8pR", + "name": "SvcCat", + "fill": "$text-2", + "content": "Deck Officer · New", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "usa0p", + "name": "SumDetails", + "width": "fill_container", + "layout": "vertical", + "gap": 11, + "children": [ + { + "type": "frame", + "id": "qRvIl", + "name": "D Processing time", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "E4HoR", + "name": "DK", + "fill": "$text-2", + "content": "Processing time", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dQfV9", + "name": "DV", + "fill": "$text", + "content": "5–7 working days", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Q6DHI9", + "name": "D License validity", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "q1SiQo", + "name": "DK", + "fill": "$text-2", + "content": "License validity", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "S1S0Aa", + "name": "DV", + "fill": "$text", + "content": "2 years", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FdnTt", + "name": "D Service fee", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "bKoex", + "name": "DK", + "fill": "$text-2", + "content": "Service fee", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "L6aSB", + "name": "DV", + "fill": "$text", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "pFqjA", + "name": "SumDiv", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "OH7Cn", + "name": "TotalRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GcEZm", + "name": "TotK", + "fill": "$text", + "content": "Total payable", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ij6pf", + "name": "TotV", + "fill": "$primary", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ULtkX", + "name": "HelpCard", + "width": "fill_container", + "fill": "$teal-tint", + "cornerRadius": 16, + "layout": "vertical", + "gap": 12, + "padding": 22, + "children": [ + { + "type": "frame", + "id": "xyiFX", + "name": "HelpHead", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NKI6q", + "name": "HelpIconBg", + "width": 36, + "height": 36, + "fill": "$teal-deep", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "p4V7G", + "name": "HelpIcon", + "width": 19, + "height": 19, + "icon": "life-buoy", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "text", + "id": "eXJd6", + "name": "HelpTitle", + "fill": "$teal-deep", + "content": "Need help?", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "h2fpy4", + "name": "HelpTxt", + "fill": "$text-2", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Our support team can guide you through the documents required for this license.", + "lineHeight": 1.55, + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "Esmx2", + "name": "HelpBtn", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 9, + "stroke": "$teal", + "strokeWidth": 1.5, + "gap": 7, + "padding": [ + 10, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "PWrnt", + "name": "HelpBtnI", + "width": 16, + "height": 16, + "icon": "message-circle", + "library": "lucide", + "fill": "$teal-deep" + }, + { + "type": "text", + "id": "nzneE", + "name": "HelpBtnT", + "fill": "$teal-deep", + "content": "Contact support", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KSAqp", + "x": 0, + "y": 4560, + "name": "Track Page", + "clip": true, + "width": 1440, + "height": 1024, + "fill": "$bg", + "children": [ + { + "id": "V2XNIa", + "type": "ref", + "ref": "Jgomv", + "name": "Sidebar", + "descendants": { + "P4qU0M": { + "fill": "$primary-tint" + }, + "FQ3CH": { + "fill": "$primary" + }, + "L017Y": { + "fill": "$primary", + "fontWeight": "600" + } + } + }, + { + "type": "frame", + "id": "E7D6Ia", + "name": "Main", + "width": "fill_container", + "height": 1024, + "fill": "$bg", + "layout": "vertical", + "children": [ + { + "id": "IPXj0", + "type": "ref", + "ref": "p7YlcS", + "name": "Topbar", + "width": "fill_container", + "descendants": { + "iGHyf": { + "content": "My Applications" + }, + "Y6duvq": { + "content": "Track the status of every application" + } + } + }, + { + "type": "frame", + "id": "eWfYU", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg", + "layout": "vertical", + "gap": 20, + "padding": 28, + "children": [ + { + "type": "frame", + "id": "KCyI8", + "name": "TabsBar", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "fmZ0Q", + "name": "Tabs", + "gap": 9, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "vq12i", + "name": "Tab All", + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Pg9Nk", + "name": "TabT", + "fill": "#ffffff", + "content": "All", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "af30T", + "name": "TabCt", + "fill": "#ffffff33", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "u9ClAs", + "name": "TabCtT", + "fill": "#ffffff", + "content": "12", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "lRP8s", + "name": "Tab In Review", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Pzsdn", + "name": "TabT", + "fill": "$text-2", + "content": "In Review", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "q2sRbd", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "XN5TI", + "name": "TabCtT", + "fill": "$text-3", + "content": "2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ogtou", + "name": "Tab Approved", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CrHRl", + "name": "TabT", + "fill": "$text-2", + "content": "Approved", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Qh8Fn", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "idDN8", + "name": "TabCtT", + "fill": "$text-3", + "content": "5", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "sZwvB", + "name": "Tab Pending", + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 8, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "X6CkYq", + "name": "TabT", + "fill": "$text-2", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "R4mFm", + "name": "TabCt", + "fill": "$surface-2", + "cornerRadius": 999, + "padding": [ + 1, + 7 + ], + "children": [ + { + "type": "text", + "id": "RG742", + "name": "TabCtT", + "fill": "$text-3", + "content": "1", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "XiIKe", + "name": "FilterBtn", + "fill": "$surface", + "cornerRadius": 10, + "stroke": "$border", + "strokeWidth": 1, + "gap": 7, + "padding": [ + 9, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "T08tk2", + "name": "FilterI", + "width": 16, + "height": 16, + "icon": "sliders-horizontal", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "qXage", + "name": "FilterT", + "fill": "$text-2", + "content": "Filter & sort", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "i6IMYT", + "name": "ColsRow", + "width": "fill_container", + "height": "fill_container", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "g54tjQ", + "name": "ListCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "padding": [ + 8, + 10 + ], + "children": [ + { + "type": "frame", + "id": "rp6r7", + "name": "HeaderRow", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "YtkV3", + "name": "HC Application", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fKsnZ", + "name": "HCT", + "fill": "$text-3", + "content": "APPLICATION", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "c0MAy", + "name": "HC Type", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "wO0Ud", + "name": "HCT", + "fill": "$text-3", + "content": "TYPE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "B36NE", + "name": "HC Submitted", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Gh7Vc", + "name": "HCT", + "fill": "$text-3", + "content": "SUBMITTED", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "DTtXQ", + "name": "HC Fee", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mpBV4", + "name": "HCT", + "fill": "$text-3", + "content": "FEE", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "h9tasp", + "name": "HC Status", + "width": 140, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PnxVy", + "name": "HCT", + "fill": "$text-3", + "content": "STATUS", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "MAEjx", + "name": "HC ", + "width": 36, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KsqzB", + "name": "sp", + "width": 10, + "height": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "D958I", + "name": "Row EMA-2026-0142", + "width": "fill_container", + "fill": "$primary-tint", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "R4aCEk", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "aYGc5", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "tExGQ", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "gDvna", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "v9ocBU", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Dfetn", + "name": "AppDate", + "fill": "$text-2", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "x7FH8f", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "P4A7v7", + "name": "AppFee", + "fill": "$text", + "content": "ETB 1,200", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "zM5ig", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "iJuyO", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + }, + { + "type": "frame", + "id": "S6wRHz", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "eGgUw", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "gZA7p", + "name": "Row EMA-2026-0138", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "iL2pW", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EOfMJ", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0138", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OpoHa", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "frITZ", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Registration", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "dBB7Y", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "jRAT1", + "name": "AppDate", + "fill": "$text-2", + "content": "28 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "VXE9w", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "J9nou", + "name": "AppFee", + "fill": "$text", + "content": "ETB 3,500", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "gZ2f1", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "nQUN7", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "xEQKY", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "TxKjt", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "bZ7Wd", + "name": "Row EMA-2026-0131", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lPfbH", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "f2mGC", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0131", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "kw3fH", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XLg9V", + "name": "AppType", + "fill": "$text-2", + "content": "License Renewal", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "pSTek", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "z5ASw", + "name": "AppDate", + "fill": "$text-2", + "content": "20 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SzTdR", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "psSLu", + "name": "AppFee", + "fill": "$text", + "content": "ETB 900", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AjS3c", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "OOO7D", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$warning" + }, + "t5FNn": { + "content": "Pending Docs", + "fill": "$warning" + } + } + } + ] + }, + { + "type": "frame", + "id": "y7mrg", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "IQeS2", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "t2Pc9", + "name": "Row EMA-2026-0125", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DOJVf", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "f6xrcp", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0125", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "mVbmg", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "YiEx1", + "name": "AppType", + "fill": "$text-2", + "content": "Port Facility Permit", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "MlEFs", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Bg9WT", + "name": "AppDate", + "fill": "$text-2", + "content": "12 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "tImPS", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rwldn", + "name": "AppFee", + "fill": "$text", + "content": "ETB 5,000", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "HD3Pq", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "rWwV2", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "GqjkP", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "q0BSx", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "J6dn9Y", + "name": "Row EMA-2026-0119", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "imKo0", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "JbulD", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0119", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "n4k2E", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rgSAi", + "name": "AppType", + "fill": "$text-2", + "content": "Seafarer Medical Cert.", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "h18HMo", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CtO1F", + "name": "AppDate", + "fill": "$text-2", + "content": "04 May 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PYiSD", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oHszA", + "name": "AppFee", + "fill": "$text", + "content": "ETB 600", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "svHLS", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "JnMdC", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$success" + }, + "t5FNn": { + "content": "Approved", + "fill": "$success" + } + } + } + ] + }, + { + "type": "frame", + "id": "B2nZ8", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ugRU5", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "nirG9", + "name": "Row EMA-2026-0102", + "width": "fill_container", + "fill": "#ffffff00", + "cornerRadius": 10, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CitOO", + "name": "C1", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "x0Sg6G", + "name": "AppId", + "fill": "$text", + "content": "EMA-2026-0102", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CHmNf", + "name": "C2", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "x4umV", + "name": "AppType", + "fill": "$text-2", + "content": "Vessel Inspection", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "C1NKlz", + "name": "C3", + "width": 120, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "eYAqU", + "name": "AppDate", + "fill": "$text-2", + "content": "21 Apr 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "UaKCA", + "name": "C4", + "width": 100, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "D2uqF", + "name": "AppFee", + "fill": "$text", + "content": "ETB 2,400", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FcMa4", + "name": "C5", + "width": 140, + "alignItems": "center", + "children": [ + { + "id": "QBrHw", + "type": "ref", + "ref": "YsTIy", + "name": "Badge", + "descendants": { + "ZWgvO": { + "fill": "$danger" + }, + "t5FNn": { + "content": "Rejected", + "fill": "$danger" + } + } + } + ] + }, + { + "type": "frame", + "id": "fTNK5", + "name": "C6", + "width": 36, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ihc5I", + "name": "Chev", + "width": 18, + "height": 18, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "I4KoWF", + "name": "TrackRight", + "width": 380, + "layout": "vertical", + "gap": 18, + "children": [ + { + "type": "frame", + "id": "e9Ps5r", + "name": "TimelineCard", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 16, + "padding": 22, + "children": [ + { + "type": "frame", + "id": "paaBC", + "name": "TlHead", + "width": "fill_container", + "layout": "vertical", + "gap": 9, + "children": [ + { + "type": "frame", + "id": "w3NNmf", + "name": "TlHeadTop", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "v64DH", + "name": "TlHL", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "pHJ3t", + "name": "TlId", + "fill": "$text", + "content": "EMA-2026-0142", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "pjhb9", + "name": "TlType", + "fill": "$text-2", + "content": "Seafarer Certificate", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + }, + { + "id": "JQTTG", + "type": "ref", + "ref": "YsTIy", + "name": "TlBadge", + "fill": "$info-tint", + "descendants": { + "ZWgvO": { + "fill": "$info" + }, + "t5FNn": { + "content": "Under Review", + "fill": "$info" + } + } + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "qWmFS", + "name": "TlDiv", + "fill": "$border", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "GRzoK", + "name": "Steps", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "zM4NH", + "name": "TS Application submitted", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "PsajH", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "d2AhbI", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "uZpSB", + "name": "Ck", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "b2apV", + "name": "Line", + "fill": "$primary", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "dZskF", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "BuX6p", + "name": "StepLb", + "fill": "$text", + "content": "Application submitted", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "mSB4j", + "name": "StepDt", + "fill": "$text-3", + "content": "02 Jun 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "veEo0", + "name": "TS Document verification", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "hSMGY", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BHNZ8", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "n8DTR", + "name": "Ck", + "width": 14, + "height": 14, + "icon": "check", + "library": "lucide", + "fill": "#ffffff" + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "PoeZP", + "name": "Line", + "fill": "$primary", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "K2vAA", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "d0IFrZ", + "name": "StepLb", + "fill": "$text", + "content": "Document verification", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "cnsXE", + "name": "StepDt", + "fill": "$text-3", + "content": "03 Jun 2026", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "mRfpA", + "name": "TS Under assessment", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Ru2oQ", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "gc2Yb", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$primary-tint", + "cornerRadius": 999, + "stroke": "$primary", + "strokeWidth": 2.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "Go8ZU", + "name": "Dot", + "fill": "$primary", + "width": 9, + "height": 9 + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "zZxB4", + "name": "Line", + "fill": "$border", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "mcEC0", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "LyM4a", + "name": "StepLb", + "fill": "$text", + "content": "Under assessment", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "McQpw", + "name": "StepDt", + "fill": "$primary", + "content": "In progress · est. 2 days", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "E4eQl", + "name": "TS Approval decision", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "pmOwe", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ZZANT", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "WeN6t", + "name": "Dot", + "fill": "$border-strong", + "width": 8, + "height": 8 + } + ] + }, + { + "type": "rectangle", + "cornerRadius": 2, + "id": "KOIwT", + "name": "Line", + "fill": "$border", + "width": 2.5, + "height": 40 + } + ] + }, + { + "type": "frame", + "id": "KiUl3", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0, + 20, + 0 + ], + "children": [ + { + "type": "text", + "id": "g0g8R", + "name": "StepLb", + "fill": "$text-2", + "content": "Approval decision", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Wt1rI", + "name": "StepDt", + "fill": "$text-3", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "XNjCg", + "name": "TS License issued", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "WCa8z", + "name": "Marker", + "width": 26, + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "oPITP", + "name": "Circ", + "width": 26, + "height": 26, + "fill": "$surface", + "cornerRadius": 999, + "stroke": "$border-strong", + "strokeWidth": 1.5, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "Qlccv", + "name": "Dot", + "fill": "$border-strong", + "width": 8, + "height": 8 + } + ] + } + ] + }, + { + "type": "frame", + "id": "sFiRH", + "name": "StepC", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 2, + 0 + ], + "children": [ + { + "type": "text", + "id": "k3YWh", + "name": "StepLb", + "fill": "$text-2", + "content": "License issued", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "jTWU5", + "name": "StepDt", + "fill": "$text-3", + "content": "Pending", + "fontFamily": "Inter", + "fontSize": 12.5, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RzGgr", + "name": "EtaNote", + "width": "fill_container", + "fill": "$info-tint", + "cornerRadius": 11, + "gap": 9, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "a8eJk5", + "name": "EtaIcon", + "width": 17, + "height": 17, + "icon": "calendar-check", + "library": "lucide", + "fill": "$info" + }, + { + "type": "text", + "id": "j9Pmq", + "name": "EtaTxt", + "fill": "$info", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Estimated decision by 09 Jun 2026", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "GQgPa", + "name": "TrackActions", + "width": "fill_container", + "fill": "$surface", + "cornerRadius": 16, + "stroke": "$border", + "strokeWidth": 1, + "layout": "vertical", + "gap": 10, + "padding": 18, + "children": [ + { + "type": "frame", + "id": "kRrST", + "name": "TA Download submission receipt", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "f7ySc9", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "download", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "MwNxt", + "name": "TAL", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Download submission receipt", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "QsBqB", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "y9b5Ak", + "name": "TA Message case officer", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "yb7o2", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "message-circle", + "library": "lucide", + "fill": "$text-2" + }, + { + "type": "text", + "id": "VTxt1", + "name": "TAL", + "fill": "$text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Message case officer", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "WXdQD", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + }, + { + "type": "frame", + "id": "WUGtd", + "name": "TA Withdraw application", + "width": "fill_container", + "cornerRadius": 9, + "gap": 11, + "padding": [ + 9, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "H521Zl", + "name": "TAI", + "width": 18, + "height": 18, + "icon": "circle-x", + "library": "lucide", + "fill": "$danger" + }, + { + "type": "text", + "id": "FYw8Z", + "name": "TAL", + "fill": "$danger", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Withdraw application", + "fontFamily": "Inter", + "fontSize": 13.5, + "fontWeight": "500" + }, + { + "type": "icon", + "id": "QdPjx", + "name": "TAC", + "width": 16, + "height": 16, + "icon": "chevron-right", + "library": "lucide", + "fill": "$text-3" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "themes": { + "Mode": [ + "Light", + "Dark" + ] + }, + "variables": { + "--sidebar": { + "type": "color", + "value": [ + { + "value": "#E7E8E5" + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-foreground": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary-foreground": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-border": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#ffffff1a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2a2a30", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent-foreground": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-ring": { + "type": "color", + "value": [ + { + "value": "#71717a" + }, + { + "value": "#71717a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--background": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--card": { + "type": "color", + "value": [ + { + "value": "#FFFFFF" + }, + { + "value": "#1A1A1A", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--card-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--popover": { + "type": "color", + "value": [ + { + "value": "#FFFFFF" + }, + { + "value": "#1A1A1A", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--popover-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--primary": { + "type": "color", + "value": [ + { + "value": "#FF8400" + }, + { + "value": "#FF8400", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--primary-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--secondary": { + "type": "color", + "value": [ + { + "value": "#E7E8E5" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--secondary-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#FFFFFF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--muted": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--muted-foreground": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#B8B9B6", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--accent": { + "type": "color", + "value": [ + { + "value": "#F2F3F0" + }, + { + "value": "#111111", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--accent-foreground": { + "type": "color", + "value": [ + { + "value": "#111111" + }, + { + "value": "#F2F3F0", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--destructive": { + "type": "color", + "value": [ + { + "value": "#D93C15" + }, + { + "value": "#FF5C33", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--border": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--input": { + "type": "color", + "value": [ + { + "value": "#CBCCC9" + }, + { + "value": "#2E2E2E", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--ring": { + "type": "color", + "value": [ + { + "value": "#666666" + }, + { + "value": "#666666", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--white": { + "type": "color", + "value": "#FFFFFF" + }, + "--black": { + "type": "color", + "value": "#000000" + }, + "--font-primary": { + "type": "string", + "value": "JetBrains Mono" + }, + "--font-secondary": { + "type": "string", + "value": "Geist" + }, + "--radius-none": { + "type": "number", + "value": 0 + }, + "--radius-pill": { + "type": "number", + "value": 999 + }, + "--color-success": { + "type": "color", + "value": [ + { + "value": "#DFE6E1" + }, + { + "value": "#222924", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-success-foreground": { + "type": "color", + "value": [ + { + "value": "#004D1A" + }, + { + "value": "#B6FFCE", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-warning": { + "type": "color", + "value": [ + { + "value": "#E9E3D8" + }, + { + "value": "#291C0F", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-warning-foreground": { + "type": "color", + "value": [ + { + "value": "#804200" + }, + { + "value": "#FF8400", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-error": { + "type": "color", + "value": [ + { + "value": "#E5DCDA" + }, + { + "value": "#24100B", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-error-foreground": { + "type": "color", + "value": [ + { + "value": "#8C1C00" + }, + { + "value": "#FF5C33", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-info": { + "type": "color", + "value": [ + { + "value": "#DFDFE6" + }, + { + "value": "#222229", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--color-info-foreground": { + "type": "color", + "value": [ + { + "value": "#000066" + }, + { + "value": "#B2B2FF", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--radius-m": { + "type": "number", + "value": 16 + }, + "bg": { + "type": "color", + "value": "#f4f7fc" + }, + "border": { + "type": "color", + "value": "#e4e9f2" + }, + "border-strong": { + "type": "color", + "value": "#cdd6e3" + }, + "danger": { + "type": "color", + "value": "#e23d4d" + }, + "danger-tint": { + "type": "color", + "value": "#fdeaec" + }, + "info": { + "type": "color", + "value": "#4b7fe5" + }, + "info-tint": { + "type": "color", + "value": "#eef4ff" + }, + "on-primary": { + "type": "color", + "value": "#ffffff" + }, + "primary": { + "type": "color", + "value": "#3160b7" + }, + "primary-deep": { + "type": "color", + "value": "#2453a2" + }, + "primary-soft": { + "type": "color", + "value": "#dce7fb" + }, + "primary-tint": { + "type": "color", + "value": "#eef4ff" + }, + "success": { + "type": "color", + "value": "#0aab89" + }, + "success-tint": { + "type": "color", + "value": "#e1fbf6" + }, + "surface": { + "type": "color", + "value": "#ffffff" + }, + "surface-2": { + "type": "color", + "value": "#f6f8fb" + }, + "teal": { + "type": "color", + "value": "#1fc29d" + }, + "teal-deep": { + "type": "color", + "value": "#009879" + }, + "teal-tint": { + "type": "color", + "value": "#e1fbf6" + }, + "text": { + "type": "color", + "value": "#1e293b" + }, + "text-2": { + "type": "color", + "value": "#51607a" + }, + "text-3": { + "type": "color", + "value": "#8d9bb3" + }, + "warning": { + "type": "color", + "value": "#e08a0b" + }, + "warning-tint": { + "type": "color", + "value": "#fdf3e2" + } + } +} \ No newline at end of file