From 1f59fbbc4c8efa95b28d3eb82aac83750d680088 Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Mon, 23 Mar 2026 23:55:31 +0100 Subject: [PATCH] fix(ui): sidebar spacing/scrolling, navy accent bars, reduced border radius - Sidebar: proper min-h-0 + overflow-y-auto scrolling, px-3 spacing, text-[13px] items with truncate, tighter py-2 rows, user card with navy avatar chip, w-60 width - KPI cards: navy #0a1d37 left accent bar instead of orange, navy icon chips, rounded-xl (was rounded-2xl), reduced shadow intensity - All cards/panels: rounded-xl (down from rounded-2xl/3xl) - Activity chart: navy bars instead of orange, rounded-t-md (less rounded) - Intelligence Hub actions: rounded-lg (was rounded-2xl) - Control Plane cards: rounded-xl with hover:border-[#0a1d37]/10 Co-Authored-By: Claude Sonnet 4.6 --- src/components/AdminSidebar.tsx | 144 ++++++++++++++++-------------- src/routes/admin/index.tsx | 153 ++++++++++++++------------------ 2 files changed, 145 insertions(+), 152 deletions(-) diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx index b8e7c19..5ce209b 100644 --- a/src/components/AdminSidebar.tsx +++ b/src/components/AdminSidebar.tsx @@ -11,30 +11,30 @@ type LinkItem = { const links: LinkItem[] = [ { href: '/admin', label: 'Dashboard', icon: 'dashboard.svg', group: '__top__' }, - { href: '/admin/roles', label: 'Internal Role Management', icon: 'role.svg', group: 'Management' }, - { href: '/admin/runtime-roles', label: 'External Role Management', icon: 'role.svg', group: 'Management' }, - { href: '/admin/onboarding-schemas', label: 'External Onboarding', icon: 'reviews.svg', group: 'Management' }, - { href: '/admin/internal-dashboard-management',label: 'Internal Dashboard Mgmt.', icon: 'dashboard.svg', group: 'Management' }, - { href: '/admin/external-dashboard-management',label: 'External Dashboard Mgmt.', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs', group: 'Management' }, - { href: '/admin/approval', label: 'Approval Management', icon: 'approval.svg', group: 'Management' }, - { href: '/admin/department', label: 'Department Management', icon: 'department.svg', group: 'Management' }, - { href: '/admin/designation', label: 'Designation Management', icon: 'designation.svg',group: 'Management' }, - { href: '/admin/employees', label: 'Employee Management', icon: 'users.svg', group: 'Management' }, - { href: '/admin/users', label: 'Users Management', icon: 'users.svg', group: 'Management' }, - { href: '/admin/company', label: 'Company Management', icon: 'company.svg', group: 'Management' }, - { href: '/admin/candidate', label: 'Candidate Management', icon: 'candidate.svg', group: 'Management' }, - { href: '/admin/customer', label: 'Customer Management', icon: 'users.svg', group: 'Management' }, - { href: '/admin/photographer', label: 'Photographer Management', icon: 'photographer.svg',group: 'Management' }, - { href: '/admin/makeup-artist', label: 'Makeup Artist Management', icon: 'makeup-artist.svg',group: 'Management'}, - { href: '/admin/tutors', label: 'Tutors Management', icon: 'tutor.svg', group: 'Management' }, - { href: '/admin/developers', label: 'Developers Management', icon: 'developers.svg', group: 'Management' }, - { href: '/admin/video-editors', label: 'Video Editor Management', icon: 'developers.svg', group: 'Management' }, - { href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: 'tutor.svg', group: 'Management' }, - { href: '/admin/catering-services', label: 'Catering Services Mgmt.', icon: 'company.svg', group: 'Management' }, - { href: '/admin/graphic-designers', label: 'Graphics Designer Mgmt.', icon: 'developers.svg', group: 'Management' }, - { href: '/admin/social-media-managers', label: 'Social Media Mgr. Mgmt.', icon: 'developers.svg', group: 'Management' }, - { href: '/admin/jobs', label: 'Jobs Management', icon: 'jobs.svg', group: 'Management' }, - { href: '/admin/leads', label: 'Leads Management', icon: 'leads.svg', group: 'Management' }, + { href: '/admin/roles', label: 'Internal Role Management', icon: 'role.svg', group: 'Management' }, + { href: '/admin/runtime-roles', label: 'External Role Management', icon: 'role.svg', group: 'Management' }, + { href: '/admin/onboarding-schemas', label: 'External Onboarding', icon: 'reviews.svg', group: 'Management' }, + { href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Mgmt.', icon: 'dashboard.svg', group: 'Management' }, + { href: '/admin/external-dashboard-management', label: 'External Dashboard Mgmt.', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs', group: 'Management' }, + { href: '/admin/approval', label: 'Approval Management', icon: 'approval.svg', group: 'Management' }, + { href: '/admin/department', label: 'Department Management', icon: 'department.svg', group: 'Management' }, + { href: '/admin/designation', label: 'Designation Management', icon: 'designation.svg', group: 'Management' }, + { href: '/admin/employees', label: 'Employee Management', icon: 'users.svg', group: 'Management' }, + { href: '/admin/users', label: 'Users Management', icon: 'users.svg', group: 'Management' }, + { href: '/admin/company', label: 'Company Management', icon: 'company.svg', group: 'Management' }, + { href: '/admin/candidate', label: 'Candidate Management', icon: 'candidate.svg', group: 'Management' }, + { href: '/admin/customer', label: 'Customer Management', icon: 'users.svg', group: 'Management' }, + { href: '/admin/photographer', label: 'Photographer Management', icon: 'photographer.svg', group: 'Management' }, + { href: '/admin/makeup-artist', label: 'Makeup Artist Management', icon: 'makeup-artist.svg',group: 'Management' }, + { href: '/admin/tutors', label: 'Tutors Management', icon: 'tutor.svg', group: 'Management' }, + { href: '/admin/developers', label: 'Developers Management', icon: 'developers.svg', group: 'Management' }, + { href: '/admin/video-editors', label: 'Video Editor Management', icon: 'developers.svg', group: 'Management' }, + { href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: 'tutor.svg', group: 'Management' }, + { href: '/admin/catering-services', label: 'Catering Services', icon: 'company.svg', group: 'Management' }, + { href: '/admin/graphic-designers', label: 'Graphics Designer Mgmt.', icon: 'developers.svg', group: 'Management' }, + { href: '/admin/social-media-managers', label: 'Social Media Mgr.', icon: 'developers.svg', group: 'Management' }, + { href: '/admin/jobs', label: 'Jobs Management', icon: 'jobs.svg', group: 'Management' }, + { href: '/admin/leads', label: 'Leads Management', icon: 'leads.svg', group: 'Management' }, { href: '/admin/pricing', label: 'Pricing Management', icon: 'pricing.svg', group: 'Finance' }, { href: '/admin/credit', label: 'Credit Management', icon: 'credits.svg', group: 'Finance' }, @@ -45,11 +45,11 @@ const links: LinkItem[] = [ { href: '/admin/invoice', label: 'Invoice Management', icon: 'invoice.svg', group: 'Finance' }, { href: '/admin/ledger', label: 'Ledger Management', icon: 'ledger.svg', group: 'Finance' }, - { href: '/admin/review', label: 'Review Management', icon: 'reviews.svg', group: 'Platform' }, - { href: '/admin/support', label: 'Support Management', icon: 'support.svg', group: 'Platform' }, - { href: '/admin/kb', label: 'Knowledge Base Mgmt.', icon: 'reviews.svg', group: 'Platform' }, - { href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg', group: 'Platform' }, - { href: '/admin/report', label: 'Report Management', icon: 'report.svg', group: 'Platform' }, + { href: '/admin/review', label: 'Review Management', icon: 'reviews.svg', group: 'Platform' }, + { href: '/admin/support', label: 'Support Management', icon: 'support.svg', group: 'Platform' }, + { href: '/admin/kb', label: 'Knowledge Base', icon: 'reviews.svg', group: 'Platform' }, + { href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg', group: 'Platform' }, + { href: '/admin/report', label: 'Report Management', icon: 'report.svg', group: 'Platform' }, ]; export default function AdminSidebar() { @@ -61,11 +61,6 @@ export default function AdminSidebar() { return location.pathname === href || location.pathname.startsWith(`${href}/`); }; - const topLinks = links.filter(l => l.group === '__top__'); - const mgmtLinks = links.filter(l => l.group === 'Management'); - const finLinks = links.filter(l => l.group === 'Finance'); - const platLinks = links.filter(l => l.group === 'Platform'); - const NavItem = (item: LinkItem) => { const active = isActive(item.href, item.aliasPrefix); return ( @@ -74,57 +69,74 @@ export default function AdminSidebar() { activeClass="" inactiveClass="" title={item.label} - class={`relative flex items-center gap-3 rounded-xl py-2.5 pl-4 pr-3 text-sm font-semibold tracking-wide transition-all duration-150 ${ + class={`relative flex min-w-0 items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-semibold transition-colors duration-150 ${ active - ? 'bg-slate-50 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-6 before:-translate-y-1/2 before:w-1 before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']' - : 'text-[#0a1d37]/60 hover:bg-slate-50 hover:text-[#0a1d37]' + ? 'bg-slate-100 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-5 before:-translate-y-1/2 before:w-[3px] before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']' + : 'text-[#0a1d37]/55 hover:bg-slate-50 hover:text-[#0a1d37]' }`} > {item.label} ); }; - const GroupLabel = (label: string) => ( -
-

{label}

-
- ); + const topLinks = links.filter(l => l.group === '__top__'); + const mgmtLinks = links.filter(l => l.group === 'Management'); + const finLinks = links.filter(l => l.group === 'Finance'); + const platLinks = links.filter(l => l.group === 'Platform'); return ( -