From be179a667332943c4b7f430b165e527aa2676166 Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Mon, 23 Mar 2026 23:13:04 +0100 Subject: [PATCH] =?UTF-8?q?feat(ui):=20premium=20redesign=20=E2=80=94=20In?= =?UTF-8?q?ter=20font,=20grouped=20sidebar,=20gradient=20active=20states?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Switch to Inter font for sharper admin feel - Sidebar: grouped nav sections (Overview/Organization/Access & Roles/etc), orange gradient active fade, tighter spacing, smaller 220px width - Header: slimmer h-14, backdrop-blur, logo+separator+title layout, gradient avatar, notification dot with ring-2 badge - Dashboard: smaller rounded-xl cards, tabular-nums on KPI values, ArrowUpRight hover indicators, refined Control Plane grid - app.css: sidebar/surface CSS design tokens, orange palette updates Co-Authored-By: Claude Sonnet 4.6 --- src/app.css | 29 +++-- src/components/AdminShell.tsx | 55 +++++---- src/components/AdminSidebar.tsx | 206 +++++++++++++++++--------------- src/routes/admin/index.tsx | 129 +++++++++++--------- 4 files changed, 234 insertions(+), 185 deletions(-) diff --git a/src/app.css b/src/app.css index 30f9ab4..0951c3b 100644 --- a/src/app.css +++ b/src/app.css @@ -1,13 +1,28 @@ -@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Exo+2:wght@400;500;600;700;800&display=swap'); @import "tailwindcss"; @theme { --color-brand-orange: #fd6216; --color-brand-navy: #050026; - --color-orange-50: #fff1e8; - --color-orange-100: #ffe2d2; - --color-orange-200: #ffc9ac; - --font-family-sans: 'Exo 2', sans-serif; + --color-orange-50: #fff4ee; + --color-orange-100: #ffe4d0; + --color-orange-200: #ffc9a0; + --color-orange-500: #fd6216; + --color-orange-600: #e5560f; + + /* Sidebar tokens */ + --color-sidebar-bg: #ffffff; + --color-sidebar-border: #f1f5f9; + --color-sidebar-text: #64748b; + --color-sidebar-active-text: #0f172a; + + /* Surface tokens */ + --color-surface: #ffffff; + --color-surface-raised: #f8fafc; + --color-border-subtle: #f1f5f9; + --color-border: #e2e8f0; + + --font-family-sans: 'Inter', 'Exo 2', sans-serif; } * { @@ -17,9 +32,9 @@ } body { - font-family: 'Exo 2', sans-serif; + font-family: 'Inter', 'Exo 2', sans-serif; background: #f8fafc; - color: #050026; + color: #0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/src/components/AdminShell.tsx b/src/components/AdminShell.tsx index c532a16..0d52527 100644 --- a/src/components/AdminShell.tsx +++ b/src/components/AdminShell.tsx @@ -191,43 +191,48 @@ export default function AdminShell(props: { children: JSX.Element }) { const initials = () => adminName().charAt(0).toUpperCase() || 'A'; return ( -
+
{/* ── Fixed Header ── */} -
- {/* Left: logo + page title */} -
-
- NXTGAUGE +
+ {/* Left: logo + separator + page title */} +
+
+ NXTGAUGE
-

{pageTitle()}

+
+ {pageTitle()}
{/* Right: notifications + avatar + logout */} -
+
{/* Notification bell */} +
+ {/* Avatar + name */} -
+
@@ -236,9 +241,9 @@ export default function AdminShell(props: { children: JSX.Element }) { type="button" onClick={onLogout} aria-label="Logout" - class="rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600" + class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-red-50 hover:text-red-500" > - + @@ -248,22 +253,22 @@ export default function AdminShell(props: { children: JSX.Element }) { {/* ── Body: sidebar + main (fixed, below header) ── */} {checkedSession() ? ( -
+
{/* Sidebar */} {/* Main content */} -
+
{/* Sub-tabs (shown for multi-tab sections) */} {tabs().length > 0 && ( -
+
{tabs().map((tab) => ( {tab.label} @@ -276,8 +281,8 @@ export default function AdminShell(props: { children: JSX.Element }) {
) : ( /* Session check loading state */ -
-
+
+

Checking session…

diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx index b655d61..8bae74d 100644 --- a/src/components/AdminSidebar.tsx +++ b/src/components/AdminSidebar.tsx @@ -6,49 +6,63 @@ type LinkItem = { label: string; icon: string; aliasPrefix?: string; + group?: string; }; const links: LinkItem[] = [ - { href: '/admin', label: 'Dashboard', icon: 'dashboard.svg' }, - { href: '/admin/department', label: 'Department Management', icon: 'department.svg' }, - { href: '/admin/designation', label: 'Designation Management', icon: 'designation.svg' }, - { href: '/admin/employees', label: 'Employee Management', icon: 'users.svg' }, - { href: '/admin/roles', label: 'Internal Role Management', icon: 'role.svg' }, - { href: '/admin/runtime-roles', label: 'External Role Management', icon: 'role.svg' }, - { href: '/admin/onboarding-schemas', label: 'External Onboarding Management', icon: 'reviews.svg' }, - { href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Management', icon: 'dashboard.svg' }, - { href: '/admin/external-dashboard-management', label: 'External Dashboard Management', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs' }, - { href: '/admin/approval', label: 'Approval Management', icon: 'approval.svg' }, - { href: '/admin/users', label: 'Users Management', icon: 'users.svg' }, - { href: '/admin/company', label: 'Company Management', icon: 'company.svg' }, - { href: '/admin/candidate', label: 'Candidate Management', icon: 'candidate.svg' }, - { href: '/admin/customer', label: 'Customer Management', icon: 'users.svg' }, - { href: '/admin/photographer', label: 'Photographer Management', icon: 'photographer.svg' }, - { href: '/admin/makeup-artist', label: 'Makeup Artist Management', icon: 'makeup-artist.svg' }, - { href: '/admin/tutors', label: 'Tutors Management', icon: 'tutor.svg' }, - { href: '/admin/developers', label: 'Developers Management', icon: 'developers.svg' }, - { href: '/admin/video-editors', label: 'Video Editor Management', icon: 'developers.svg' }, - { href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: 'tutor.svg' }, - { href: '/admin/catering-services', label: 'Catering Services Management', icon: 'company.svg' }, - { href: '/admin/graphic-designers', label: 'Graphics Designer Management', icon: 'developers.svg' }, - { href: '/admin/social-media-managers', label: 'Social Media Manager Management', icon: 'developers.svg' }, - { href: '/admin/jobs', label: 'Jobs Management', icon: 'jobs.svg' }, - { href: '/admin/leads', label: 'Leads Management', icon: 'leads.svg' }, - { href: '/admin/pricing', label: 'Pricing Management', icon: 'pricing.svg' }, - { href: '/admin/credit', label: 'Credit Management', icon: 'credits.svg' }, - { href: '/admin/coupon', label: 'Coupon Management', icon: 'coupon.svg' }, - { href: '/admin/discount', label: 'Discount Management', icon: 'discount.svg' }, - { href: '/admin/tax', label: 'Tax Management', icon: 'tax.svg' }, - { href: '/admin/order', label: 'Order Management', icon: 'order.svg' }, - { href: '/admin/invoice', label: 'Invoice Management', icon: 'invoice.svg' }, - { href: '/admin/review', label: 'Review Management', icon: 'reviews.svg' }, - { href: '/admin/support', label: 'Support Management', icon: 'support.svg' }, - { href: '/admin/kb', label: 'Knowledge Base Management', icon: 'reviews.svg' }, - { href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg' }, - { href: '/admin/report', label: 'Report Management', icon: 'report.svg' }, - { href: '/admin/ledger', label: 'Ledger Management', icon: 'ledger.svg' }, + { href: '/admin', label: 'Dashboard', icon: 'dashboard.svg', group: 'Overview' }, + + { href: '/admin/department', label: 'Department', icon: 'department.svg', group: 'Organization' }, + { href: '/admin/designation', label: 'Designation', icon: 'designation.svg', group: 'Organization' }, + { href: '/admin/employees', label: 'Employees', icon: 'users.svg', group: 'Organization' }, + + { href: '/admin/roles', label: 'Internal Roles', icon: 'role.svg', group: 'Access & Roles' }, + { href: '/admin/runtime-roles', label: 'External Roles', icon: 'role.svg', group: 'Access & Roles' }, + { href: '/admin/onboarding-schemas', label: 'Onboarding Flows', icon: 'reviews.svg', group: 'Access & Roles' }, + + { href: '/admin/internal-dashboard-management', label: 'Internal Dashboards', icon: 'dashboard.svg', group: 'Dashboards' }, + { href: '/admin/external-dashboard-management', label: 'External Dashboards', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs', group: 'Dashboards' }, + + { href: '/admin/users', label: 'Users', icon: 'users.svg', group: 'People' }, + { href: '/admin/company', label: 'Companies', icon: 'company.svg', group: 'People' }, + { href: '/admin/candidate', label: 'Candidates', icon: 'candidate.svg', group: 'People' }, + { href: '/admin/customer', label: 'Customers', icon: 'users.svg', group: 'People' }, + { href: '/admin/photographer', label: 'Photographers', icon: 'photographer.svg', group: 'People' }, + { href: '/admin/makeup-artist', label: 'Makeup Artists', icon: 'makeup-artist.svg', group: 'People' }, + { href: '/admin/tutors', label: 'Tutors', icon: 'tutor.svg', group: 'People' }, + { href: '/admin/developers', label: 'Developers', icon: 'developers.svg', group: 'People' }, + { href: '/admin/video-editors', label: 'Video Editors', icon: 'developers.svg', group: 'People' }, + { href: '/admin/fitness-trainers', label: 'Fitness Trainers', icon: 'tutor.svg', group: 'People' }, + { href: '/admin/catering-services', label: 'Catering Services', icon: 'company.svg', group: 'People' }, + { href: '/admin/graphic-designers', label: 'Graphic Designers', icon: 'developers.svg', group: 'People' }, + { href: '/admin/social-media-managers', label: 'Social Media Mgr.', icon: 'developers.svg', group: 'People' }, + + { href: '/admin/jobs', label: 'Jobs', icon: 'jobs.svg', group: 'Content' }, + { href: '/admin/leads', label: 'Leads', icon: 'leads.svg', group: 'Content' }, + { href: '/admin/review', label: 'Reviews', icon: 'reviews.svg', group: 'Content' }, + { href: '/admin/kb', label: 'Knowledge Base', icon: 'reviews.svg', group: 'Content' }, + { href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg', group: 'Content' }, + + { href: '/admin/pricing', label: 'Pricing', icon: 'pricing.svg', group: 'Finance' }, + { href: '/admin/credit', label: 'Credits', icon: 'credits.svg', group: 'Finance' }, + { href: '/admin/coupon', label: 'Coupons', icon: 'coupon.svg', group: 'Finance' }, + { href: '/admin/discount', label: 'Discounts', icon: 'discount.svg', group: 'Finance' }, + { href: '/admin/tax', label: 'Tax', icon: 'tax.svg', group: 'Finance' }, + { href: '/admin/order', label: 'Orders', icon: 'order.svg', group: 'Finance' }, + { href: '/admin/invoice', label: 'Invoices', icon: 'invoice.svg', group: 'Finance' }, + { href: '/admin/ledger', label: 'Ledger', icon: 'ledger.svg', group: 'Finance' }, + + { href: '/admin/approval', label: 'Approvals', icon: 'approval.svg', group: 'Operations' }, + { href: '/admin/support', label: 'Support', icon: 'support.svg', group: 'Operations' }, + { href: '/admin/report', label: 'Reports', icon: 'report.svg', group: 'Operations' }, ]; +// Build ordered group list preserving first appearance +const GROUP_ORDER: string[] = []; +for (const item of links) { + if (item.group && !GROUP_ORDER.includes(item.group)) GROUP_ORDER.push(item.group); +} + export default function AdminSidebar() { const location = useLocation(); const [collapsed, setCollapsed] = createSignal(false); @@ -61,82 +75,86 @@ export default function AdminSidebar() { return (