Shell (AdminShell + AdminSidebar):
- Logo moved to header-left section, width syncs with sidebar collapse state
- Global search bar with debounced multi-module API calls and grouped dropdown
- Bell notification icon with badge, gear → /admin/settings, user dropdown with logout
- Sidebar: 7 grouped nav sections with dividers, orange left-border active state,
removed "Active" badge pill, user info (avatar + name + role) pinned to bottom
- Fixed all sidebar labels to match Figma (Employee Management, External Onboarding
Management, Users Management, Verification Management)
- Added missing sidebar items: Verification, Fitness Trainers, Graphic Designers,
Social Media, Video Editors, Catering Services, Applications, Responses
Dashboard (admin/index):
- Rebuilt to match Figma: "Dashboard Overview" title, Export Report button
- 4 stat cards (Total Users, Active Companies, Open Leads, Credits Purchased)
with real API fetch, orange icons, delta badges, graceful — fallback
- ApexCharts: Leads Trend (orange gradient line) + Revenue Overview (navy bars)
- Drag-and-drop widget system via @thisbeyond/solid-dnd — sortable stat cards
and chart cards with handles and remove buttons in Customise mode
- Add Widget panel shows all available widgets not on dashboard
- 8 stat widgets + 3 chart widgets available; layout persists in localStorage
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- AdminSidebar: group labels (Management/Organisation/Service Providers/Operations),
navy active state (bg-[#e8edf5] + [#0a1d37] left bar + navy icon), width 268px,
13.5px font, 40px item height, lucide-solid icons only (no img fallback), min-w-0
truncation fix, tighter py spacing
- AdminShell: header height 64px (was 86px), compact search bar 40px/rounded-lg,
navy avatar square (was orange gradient), tab indicator navy (was orange), sidebar
width 268px, main bg #f3f4f8
- Dashboard: rounded-xl→rounded-lg cards, rounded-2xl→rounded-xl sections, navy
accent bars on KPI cards, tabular-nums on values, navy pipeline progress bars
- app.css: table thead now navy (#0a1d37) with white text matching reference screenshot,
focus rings navy, admin-segment/admin-link-tabs active state navy, reduced border
radii on segmented controls and list items
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- app.css: Exo 2 font, #0a1d37 navy + #fd6216 orange tokens, #f9f9fd background
- AdminShell: backdrop-blur-xl glassmorphism header, centered search bar, settings icon,
name + bordered avatar, ambient shadow-[0_4px_24px_rgba(10,29,55,0.04)]
- AdminSidebar: white bg, left orange 4px pill accent on active (before: pseudo),
bg-slate-50 active state, MANAGEMENT/FINANCE/PLATFORM group labels, user card at bottom
- Dashboard: KPI cards with absolute left-0 accent bar + ambient shadows, big font-black numbers,
System Activity bar chart, Intelligence Hub dark navy panel with quick-action buttons,
Pipeline Status cards with progress bars, Control Plane 3-col grid
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
