nxtgauge-admin-solid/src/components/AdminSidebar.tsx

import { A, useLocation } from '@solidjs/router';

type LinkItem = {
  href: string;
  label: string;
  icon: string;
  aliasPrefix?: string;
  group: string;
};

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/pricing',   label: 'Pricing Management',  icon: 'pricing.svg',  group: 'Finance' },
  { href: '/admin/credit',    label: 'Credit Management',   icon: 'credits.svg',  group: 'Finance' },
  { href: '/admin/coupon',    label: 'Coupon Management',   icon: 'coupon.svg',   group: 'Finance' },
  { href: '/admin/discount',  label: 'Discount Management', icon: 'discount.svg', group: 'Finance' },
  { href: '/admin/tax',       label: 'Tax Management',      icon: 'tax.svg',      group: 'Finance' },
  { href: '/admin/order',     label: 'Order Management',    icon: 'order.svg',    group: 'Finance' },
  { 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' },
];

export default function AdminSidebar() {
  const location = useLocation();

  const isActive = (href: string, aliasPrefix?: string) => {
    if (href === '/admin') return location.pathname === '/admin';
    if (aliasPrefix && location.pathname.startsWith(aliasPrefix)) return true;
    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 (
      <A
        href={item.href}
        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 ${
          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]'
        }`}
      >
        <img
          src={`/sidebar-icons/${item.icon}`}
          alt=""
          class="h-[18px] w-[18px] shrink-0"
          style={active ? 'opacity:0.9' : 'opacity:0.4'}
        />
        <span class="truncate">{item.label}</span>
      </A>
    );
  };

  const GroupLabel = (label: string) => (
    <div class="px-4 pb-2 pt-4">
      <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</p>
    </div>
  );

  return (
    <aside class="flex h-full w-64 flex-col border-r border-slate-100 bg-white py-5">
      {/* Top (Dashboard) */}
      <nav class="px-3">
        {topLinks.map(NavItem)}
      </nav>

      {/* Scrollable nav groups */}
      <div class="scrollbar mt-1 min-h-0 flex-1 overflow-y-auto px-3">
        {GroupLabel('Management')}
        {mgmtLinks.map(NavItem)}

        {GroupLabel('Finance')}
        {finLinks.map(NavItem)}

        {GroupLabel('Platform')}
        {platLinks.map(NavItem)}
      </div>

      {/* User card at bottom */}
      <div class="mt-2 border-t border-slate-100 px-4 pt-4">
        <div class="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#fd6216] text-sm font-black text-white">
            A
          </div>
          <div class="min-w-0 flex-1 overflow-hidden">
            <p class="truncate text-xs font-bold text-[#0a1d37]">Admin User</p>
            <p class="truncate text-[10px] text-slate-500">master_admin@nxtgauge.io</p>
          </div>
        </div>
      </div>
    </aside>
  );
}