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',           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' },
  { 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',       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 NavItem = (item: LinkItem) => {
    const active = isActive(item.href, item.aliasPrefix);
    return (
      <A
        href={item.href}
        activeClass=""
        inactiveClass=""
        title={item.label}
        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-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]'
        }`}
      >
        <img
          src={`/sidebar-icons/${item.icon}`}
          alt=""
          class="h-4 w-4 shrink-0"
          style={active ? 'opacity:0.85' : 'opacity:0.35'}
        />
        <span class="truncate">{item.label}</span>
      </A>
    );
  };

  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 (
    <aside class="flex h-full w-60 flex-col border-r border-slate-100 bg-white">

      {/* Top: Dashboard link */}
      <div class="px-3 pt-4 pb-2">
        {topLinks.map(NavItem)}
      </div>

      {/* Scrollable groups */}
      <div class="scrollbar flex-1 overflow-y-auto px-3 pb-3" style="min-height:0">

        {/* Management */}
        <p class="mt-3 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
          Management
        </p>
        <div class="space-y-0.5">
          {mgmtLinks.map(NavItem)}
        </div>

        {/* Finance */}
        <p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
          Finance
        </p>
        <div class="space-y-0.5">
          {finLinks.map(NavItem)}
        </div>

        {/* Platform */}
        <p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
          Platform
        </p>
        <div class="space-y-0.5">
          {platLinks.map(NavItem)}
        </div>

      </div>

      {/* User card */}
      <div class="border-t border-slate-100 px-3 py-3">
        <div class="flex items-center gap-2.5 rounded-lg bg-slate-50 px-3 py-2.5">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#0a1d37] text-xs font-black text-white">
            A
          </div>
          <div class="min-w-0 flex-1">
            <p class="truncate text-[12px] font-bold text-[#0a1d37]">Admin User</p>
            <p class="truncate text-[10px] text-slate-400">master_admin@nxtgauge.io</p>
          </div>
        </div>
      </div>
    </aside>
  );
}