// src/components/layout/header.tsx "use client"; import { useState } from "react"; import { useRouter, usePathname } from "next/navigation"; import { useAdminStore } from "@/store/adminStore"; import Link from "next/link"; import { useSkinStore } from "@/store/skinStore"; import { useAdminMobileNav } from "@/store/adminMobileNavStore"; import { Menu } from "lucide-react"; // ─── Theme Toggle ───────────────────────────────────────────────────────────── function ThemeToggle() { const { currentMode, toggleMode } = useSkinStore(); const isDarkMode = currentMode === "dark"; return ( ); } // ─── User Menu ──────────────────────────────────────────────────────────────── function UserMenu() { const router = useRouter(); const { user, clearUser } = useAdminStore(); const [open, setOpen] = useState(false); async function handleLogout() { try { await fetch("/api/auth/logout", { method: "POST", credentials: "include" }); } catch (err) { console.error("Logout error:", err); } finally { // Clear user store clearUser(); router.push("/admin/login"); } } const firstName = user?.firstName || ""; const lastName = user?.lastName || ""; const email = user?.email || ""; const initials = firstName && lastName ? `${firstName[0]}${lastName[0]}`.toUpperCase() : firstName ? firstName[0].toUpperCase() : "U"; const displayName = firstName && lastName ? `${firstName} ${lastName}` : firstName || email?.split("@")[0] || "User"; // Don't show menu if no user if (!user) { return null; } return (
{open && ( <>
setOpen(false)} />
)}
); } // ─── Breadcrumb (Left Side) ─────────────────────────────────────────────────── function Breadcrumb() { const pathname = usePathname(); // Base path - jahan se breadcrumb start ho ga const BASE_PATH = '/admin/dashboard'; const getBreadcrumbName = (segment: string): string => { // Remove query parameters if any const cleanSegment = segment.split('?')[0]; // Check if it's a UUID const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(cleanSegment); if (isUUID) { return 'Details'; } // Check if it's a number (ID) if (/^\d+$/.test(cleanSegment)) { return `#${cleanSegment}`; } // Special cases const specialCases: Record = { 'admin': 'Admin', 'dashboard': 'Dashboard', 'employees': 'Employees', 'new': 'Add New', 'edit': 'Edit', 'view': 'View', 'settings': 'Settings', 'profile': 'Profile', 'reports': 'Reports', 'departments': 'Departments', 'designations': 'Designations', 'locations': 'Locations', 'roles': 'Roles', 'permissions': 'Permissions', 'audit': 'Audit Logs', 'documents': 'Documents', 'leave': 'Leave Management', 'payroll': 'Payroll', 'recruitment': 'Recruitment', 'performance': 'Performance', 'training': 'Training', 'assets': 'Assets', 'tasks': 'Tasks', 'projects': 'Projects', 'clients': 'Clients', 'vendors': 'Vendors', 'contracts': 'Contracts', 'invoices': 'Invoices', 'overrides': 'Overrides', 'change-password': 'Change Password', 'bulk': 'Bulk Actions', 'import': 'Import', 'export': 'Export', 'trash': 'Trash', }; if (specialCases[cleanSegment]) { return specialCases[cleanSegment]; } // Convert kebab-case to Title Case return cleanSegment .split('-') .map(word => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); }; // Get pathname without base path const getRelativePath = (path: string): string => { if (path === BASE_PATH) return ''; if (path.startsWith(BASE_PATH)) { return path.substring(BASE_PATH.length); } return path; }; // Get all segments after base path const relativePath = getRelativePath(pathname); const segments = relativePath.split('/').filter(Boolean); // If on dashboard or empty path if (pathname === BASE_PATH || pathname === '/admin/dashboard' || segments.length === 0) { return (

Dashboard

); } // Build breadcrumb items const breadcrumbItems = segments.map((segment, index) => { const fullPath = BASE_PATH + '/' + segments.slice(0, index + 1).join('/'); const isLast = index === segments.length - 1; const label = getBreadcrumbName(segment); return { label, path: fullPath, isLast, }; }); return (
{/* Dashboard Link - Always points to /admin/dashboard */} Dashboard {/* Breadcrumb Separator */} {/* Breadcrumb Items */} {breadcrumbItems.map((item) => (
{item.isLast ? ( {item.label} ) : ( <> {item.label} )}
))}
); } // Separator component function ChevronRight() { return ( ); } // ─── Main Header ────────────────────────────────────────────────────────────── export default function Header() { const toggleMobileNav = useAdminMobileNav((s) => s.toggle); return (
{/* Left Side - menu button (below lg) + Breadcrumb */}
{/* Right Side - Actions (Theme Toggle + User Menu) */}
); }