"use client"; import Link from "next/link"; import { useDashboard } from "@/features/dashboard/hooks/use-dashboard"; import { usePathname } from "next/navigation"; import { useState, useEffect, useMemo } from "react"; import { useLogout } from "@/features/auth/hooks/use-logout"; import { useCartContext } from "@/features/cart/components/cart-context"; import { LayoutDashboard, Building2, Package, ShoppingCart, Truck, LogOut, Bell, Menu, X, Shield, UserCog, ChevronDown, ChevronRight, Settings, Users, Boxes, BarChart3, CreditCard, } from "lucide-react"; import type { SystemRole, SidebarPermission } from "@/features/manage-users/dtos/manage-users.dto"; // ============================================ // Role → Permission Mapping // ============================================ const ROLE_PERMISSIONS: Record = { super_admin: [ "/dashboard", "/companies", "/products", "/stock-management", "/orders", "/orders/new", "/delivery-management", "/mis-reporting", "/notifications", "/manage-profile", "/manage-roles", "/manage-users", ], it_team: [ "/dashboard", "/companies", "/notifications", "/manage-profile", ], delivery_management: [ "/dashboard", "/stock-management", "/delivery-management", "/mis-reporting", "/notifications", "/manage-profile", ], department_user: [ "/dashboard", "/orders", "/orders/new", "/notifications", "/manage-profile", ], }; // ============================================ // Navigation Config (full list — filtered by role) // ============================================ interface NavItem { name: string; href: SidebarPermission; icon: React.ComponentType<{ className?: string }>; group?: string; } const allNavigation: NavItem[] = [ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Companies", href: "/companies", icon: Building2 }, { name: "Configure Products", href: "/products", icon: Package }, { name: "Business Cards", href: "/business-card", icon: CreditCard }, { name: "Stock Management", href: "/stock-management", icon: Boxes }, { name: "Orders", href: "/orders", icon: ShoppingCart }, { name: "New Order", href: "/orders/new", icon: Package }, { name: "Delivery Management", href: "/delivery-management", icon: Truck }, { name: "MIS Reporting", href: "/mis-reporting", icon: BarChart3 }, { name: "Notifications", href: "/notifications", icon: Bell }, ]; const permissionNavItems: NavItem[] = [ { name: "Manage Roles", href: "/manage-roles", icon: Shield, group: "Permissions" }, { name: "Manage Users", href: "/manage-users", icon: Users, group: "Permissions" }, ]; // ============================================ // Get current user role from localStorage // ============================================ function getCurrentUserRole(): SystemRole | null { if (typeof window === "undefined") return null; const role = localStorage.getItem("current_user_role"); if (role && ROLE_PERMISSIONS[role as SystemRole]) { return role as SystemRole; } return null; } function getCurrentUserName(): string { if (typeof window === "undefined") return "User"; return localStorage.getItem("current_user_name") || "User"; } function getUserInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } // ============================================ // Admin Layout Component // ============================================ interface AdminLayoutProps { children: React.ReactNode; } export function AdminLayout({ children }: AdminLayoutProps) { const { data: navigationData } = useDashboard(); const [sidebarOpen, setSidebarOpen] = useState(false); const [permissionsOpen, setPermissionsOpen] = useState(false); const [currentRole, setCurrentRole] = useState(null); const [userName, setUserName] = useState("User"); const pathname = usePathname(); const { logout, loading: logoutLoading } = useLogout(); const { itemCount: cartItemCount } = useCartContext(); // Read role from localStorage on mount useEffect(() => { setCurrentRole(getCurrentUserRole()); setUserName(getCurrentUserName()); // Listen for storage changes (e.g., after login in another tab) const handleStorageChange = (): void => { setCurrentRole(getCurrentUserRole()); setUserName(getCurrentUserName()); }; window.addEventListener("storage", handleStorageChange); return () => window.removeEventListener("storage", handleStorageChange); }, []); // Compute allowed navigation items based on role const allowedNavigation = useMemo(() => { if (!currentRole) return allNavigation; // Fallback: show all if no role set const permissions = ROLE_PERMISSIONS[currentRole]; return allNavigation.filter((item) => item.href === "/business-card" ? navigationData?.quickLinks.includes(item.href) === true : permissions.includes(item.href)); }, [currentRole, navigationData]); // Check if user has any permission nav items const hasPermissionItems = useMemo(() => { if (!currentRole) return false; const permissions = ROLE_PERMISSIONS[currentRole]; return permissionNavItems.some((item) => permissions.includes(item.href)); }, [currentRole]); // Check if user has manage-roles or manage-users access const allowedPermissionItems = useMemo(() => { if (!currentRole) return permissionNavItems; const permissions = ROLE_PERMISSIONS[currentRole]; return permissionNavItems.filter((item) => permissions.includes(item.href)); }, [currentRole]); // Check if any sub-item under Permissions is active const isPermissionsActive = useMemo(() => { return pathname === "/manage-roles" || pathname === "/manage-users"; }, [pathname]); return (
{/* Mobile sidebar overlay */} {sidebarOpen && (
setSidebarOpen(false)} /> )} {/* ============================================ */} {/* Sidebar — Dark Navy Gradient */} {/* ============================================ */} {/* ============================================ */} {/* Main Content Area */} {/* ============================================ */}
{/* Top Header */}
{/* Welcome text */}

Welcome Back, {userName}!

{/* Cart Icon — only for super_admin and department_user */} {(currentRole === "super_admin" || currentRole === "department_user") && ( Cart {cartItemCount > 0 && ( {cartItemCount > 99 ? "99+" : cartItemCount} )} )} {/* View Profile */} View Profile
{/* Page Content */}
{children}
); }