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

import { A, useLocation } from '@solidjs/router';
import { For, Show } from 'solid-js';
import {
  LayoutGrid, Building2, Briefcase, Users, ShieldCheck, FileText,
  LayoutDashboard, ClipboardList, UserRoundSearch, UserCircle,
  Camera, Palette, BookOpen, Code2, BriefcaseBusiness, HandHelping,
  WalletCards, CreditCard, Tag, Percent, Receipt, ShoppingCart,
  FileCheck, Star, HeadphonesIcon, BarChart3, BookMarked, Bell,
  ChevronLeft, BadgeCheck, Activity, Film, Utensils, PenTool,
  MessageSquare, Megaphone,
} from 'lucide-solid';

type NavItem = {
  href: string;
  label: string;
  icon: any;
  aliasPrefix?: string;
};

const GROUPS: NavItem[][] = [
  [
    { href: '/admin', label: 'Dashboard', icon: LayoutGrid },
    { href: '/admin/department', label: 'Department Management', icon: Building2 },
    { href: '/admin/designation', label: 'Designation Management', icon: Briefcase },
    { href: '/admin/roles', label: 'Internal Role Management', icon: ShieldCheck },
    { href: '/admin/employees', label: 'Employee Management', icon: Users },
  ],
  [
    { href: '/admin/runtime-roles', label: 'External Role Management', icon: ShieldCheck },
    { href: '/admin/onboarding-management', label: 'External Onboarding Management', icon: FileText, aliasPrefix: '/admin/onboarding-schemas' },
    { href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Management', icon: LayoutDashboard },
    { href: '/admin/external-dashboard-management', label: 'External Dashboard Management', icon: LayoutDashboard, aliasPrefix: '/admin/role-ui-configs' },
  ],
  [
    { href: '/admin/verification-status', label: 'Verification Management', icon: BadgeCheck },
    { href: '/admin/approval', label: 'Approval Management', icon: ClipboardList },
  ],
  [
    { href: '/admin/users', label: 'Users Management', icon: UserRoundSearch },
    { href: '/admin/company', label: 'Company Management', icon: Building2 },
    { href: '/admin/candidate', label: 'Candidate Management', icon: UserCircle },
    { href: '/admin/customer', label: 'Customer Management', icon: UserCircle },
    { href: '/admin/photographer', label: 'Photographer Management', icon: Camera },
    { href: '/admin/makeup-artist', label: 'Makeup Artist Management', icon: Palette },
    { href: '/admin/tutors', label: 'Tutor Management', icon: BookOpen },
    { href: '/admin/developers', label: 'Developer Management', icon: Code2 },
    { href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: Activity },
    { href: '/admin/graphic-designers', label: 'Graphic Designer Management', icon: PenTool },
    { href: '/admin/social-media-managers', label: 'Social Media Management', icon: Megaphone },
    { href: '/admin/video-editors', label: 'Video Editor Management', icon: Film },
    { href: '/admin/catering-services', label: 'Catering Services Management', icon: Utensils },
  ],
  [
    { href: '/admin/jobs', label: 'Jobs Management', icon: BriefcaseBusiness },
    { href: '/admin/leads', label: 'Leads Management', icon: HandHelping },
    { href: '/admin/applications', label: 'Applications Management', icon: ClipboardList },
    { href: '/admin/responses', label: 'Responses Management', icon: MessageSquare },
    { href: '/admin/review', label: 'Review Management', icon: Star },
  ],
  [
    { href: '/admin/pricing', label: 'Pricing Management', icon: WalletCards },
    { href: '/admin/credit', label: 'Credit Management', icon: CreditCard },
    { href: '/admin/coupon', label: 'Coupon Management', icon: Tag },
    { href: '/admin/discount', label: 'Discount Management', icon: Percent },
    { href: '/admin/tax', label: 'Tax Management', icon: Receipt },
    { href: '/admin/order', label: 'Order Management', icon: ShoppingCart },
    { href: '/admin/invoice', label: 'Invoice Management', icon: FileCheck },
    { href: '/admin/ledger', label: 'Ledger Management', icon: Receipt },
  ],
  [
    { href: '/admin/kb', label: 'Knowledge Base Management', icon: BookMarked },
    { href: '/admin/notifications', label: 'Notifications', icon: Bell },
    { href: '/admin/support', label: 'Support Management', icon: HeadphonesIcon },
    { href: '/admin/report', label: 'Report Management', icon: BarChart3 },
  ],
];

const FIGMA_GROUPS: NavItem[][] = [
  GROUPS[0],
  GROUPS[1],
];

export default function AdminSidebar(props: {
  collapsed: boolean;
  onToggle: () => void;
  onNavigate?: () => void;
  adminName: string;
  adminInitials: string;
  variant?: 'default' | 'figma';
}) {
  const location = useLocation();
  const groups = () => (props.variant === 'figma' ? FIGMA_GROUPS : GROUPS);

  const isActive = (item: NavItem) => {
    if (location.pathname === '/admin') return item.href === '/admin';
    if (item.href === '/admin') return false;
    if (item.aliasPrefix && location.pathname.startsWith(item.aliasPrefix)) return true;
    return location.pathname === item.href || location.pathname.startsWith(`${item.href}/`);
  };

  return (
    <aside
      class={`flex h-full flex-col border-r border-[#e5e7eb] bg-white shadow-[0px_20px_25px_0px_rgba(0,0,0,0.1),0px_8px_10px_0px_rgba(0,0,0,0.1)] transition-all duration-300 ${
        props.collapsed ? 'w-[92px]' : 'w-[288px]'
      }`}
    >
      <div class="relative h-[101px] shrink-0 border-b border-[#e5e7eb] px-8 pt-8">
        <A href="/admin" class={`inline-flex items-center justify-center ${props.collapsed ? 'h-[36px] w-[54px]' : 'h-[20px] w-[84px]'}`} onClick={props.onNavigate}>
          <img src={props.collapsed ? '/nxtgauge-icon.png' : '/nxtgauge-logo.png'} alt="Nxtgauge" class={`${props.collapsed ? 'h-[36px]' : 'h-[20px]'} w-auto object-contain`} />
        </A>
        <button
          type="button"
          onClick={props.onToggle}
          class="absolute right-6 top-8 inline-flex h-5 w-5 items-center justify-center text-[#9195ad] hover:text-[#000032]"
          aria-label="Toggle sidebar"
        >
          <ChevronLeft size={20} class={`${props.collapsed ? 'rotate-180' : ''} transition-transform`} />
        </button>
      </div>

      <nav class="scrollbar min-h-0 flex-1 overflow-y-auto py-6">
        <For each={groups()}>
          {(group, gi) => (
            <>
              <Show when={gi() > 0}>
                <div class="my-4 mx-6 h-px bg-[#e5e7eb]" />
              </Show>
              <div class="space-y-[2px] pl-4 pr-4">
                <For each={group}>
                  {(item) => {
                    const active = () => isActive(item);
                    const Icon = item.icon;
                    return (
                      <A
                        href={item.href}
                        onClick={props.onNavigate}
                        title={props.collapsed ? item.label : undefined}
                        class={`relative flex h-12 items-center rounded-[12px] pl-4 pr-3 text-[15px] font-semibold leading-5 transition-colors ${
                          active()
                            ? 'bg-[#FFF1EA] text-[#FA5A1F]'
                            : 'text-[#232B4D] hover:bg-[#F8FAFC]'
                        }`}
                        aria-current={active() ? 'page' : undefined}
                      >
                        <Show when={active()}>
                          <span class="absolute left-[-4px] top-2 h-8 w-1 rounded-full bg-[#FA5A1F]" />
                        </Show>
                        <Icon size={20} class={`${active() ? 'text-[#FA5A1F]' : 'text-[#5f6683]'} shrink-0`} strokeWidth={2.4} />
                        <Show when={!props.collapsed}>
                          <span class="ml-4 truncate">{item.label}</span>
                        </Show>
                      </A>
                    );
                  }}
                </For>
              </div>
            </>
          )}
        </For>
      </nav>

      <div class="h-[99px] shrink-0 border-t border-[#e5e7eb] bg-[#f9fafb] px-4 pt-[17px]">
        <div class={`flex h-[66px] items-center rounded-[14px] border border-[#e5e7eb] bg-white px-[17px] ${props.collapsed ? 'justify-center' : 'gap-3'}`}>
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-[#fa5014] to-[#ff6b3d] text-[14px] font-bold text-white shadow-[0px_4px_6px_0px_rgba(0,0,0,0.1),0px_2px_4px_0px_rgba(0,0,0,0.1)]">
            {props.adminInitials}
          </div>
          <Show when={!props.collapsed}>
            <div class="min-w-0">
              <p class="truncate text-[14px] font-semibold leading-5 text-[#000032]">{props.adminName}</p>
              <p class="text-[12px] leading-4 text-[rgba(0,0,50,0.5)]">Super Admin</p>
            </div>
          </Show>
        </div>
      </div>
    </aside>
  );
}