170 lines
8.3 KiB
TypeScript
170 lines
8.3 KiB
TypeScript
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/internal-role-management', label: 'Internal Role Management', icon: ShieldCheck, aliasPrefix: '/admin/roles' },
|
|
{ href: '/admin/employees', label: 'Employee Management', icon: Users },
|
|
],
|
|
[
|
|
{ href: '/admin/runtime-roles', label: 'External Role Management', icon: ShieldCheck, aliasPrefix: '/admin/external-role-management' },
|
|
{ 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 },
|
|
],
|
|
];
|
|
|
|
export default function AdminSidebar(props: {
|
|
collapsed: boolean;
|
|
onToggle: () => void;
|
|
onNavigate?: () => void;
|
|
adminName: string;
|
|
adminInitials: string;
|
|
}) {
|
|
const location = useLocation();
|
|
|
|
const isActive = (item: NavItem) => {
|
|
if (location.pathname === '/admin') return item.href === '/admin/department';
|
|
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 h-[36px] w-[54px] items-center justify-center" onClick={props.onNavigate}>
|
|
<img src="/nxtgauge-icon.png" alt="Nxtgauge" class="h-[36px] 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 px-4 py-6">
|
|
<For each={GROUPS}>
|
|
{(group, gi) => (
|
|
<>
|
|
<Show when={gi() > 0}>
|
|
<div class="my-4 h-px bg-[#e5e7eb]" />
|
|
</Show>
|
|
<div class="space-y-0.5">
|
|
<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-[14px] px-4 text-[14px] font-medium leading-5 transition-colors ${
|
|
active()
|
|
? 'bg-[rgba(250,80,20,0.1)] text-[#fa5014]'
|
|
: 'text-[#000032] hover:bg-[#f9fafb]'
|
|
}`}
|
|
aria-current={active() ? 'page' : undefined}
|
|
>
|
|
<Show when={active()}>
|
|
<span class="absolute left-0 top-2 h-8 w-1 rounded-r-full bg-[#fa5014]" />
|
|
</Show>
|
|
<Icon size={20} class={`${active() ? 'text-[#fa5014]' : 'text-[#71759a]'} shrink-0`} />
|
|
<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>
|
|
);
|
|
}
|