"use client" import Link from "next/link" import { usePathname } from "next/navigation" import { signOut } from "next-auth/react" import { useState, useEffect } from "react" import { openNewProjectModal } from "@/components/projects/new-project-modal" interface SidebarProps { user?: { name: string; email: string; role: string } } // SVG Icons matching HTML file exactly const HomeIcon = () => ( ) const FolderIcon = () => ( ) const CheckIcon = () => ( ) const TruckIcon = () => ( ) const PlusIcon = () => ( ) const ReceiptIcon = () => ( ) const UsersIcon = () => ( ) const ChartIcon = () => ( ) const ChevronDownIcon = () => ( ) const LogoutIcon = () => ( ) export function Sidebar({ user }: SidebarProps) { const pathname = usePathname() const [userMenuOpen, setUserMenuOpen] = useState(false) const [counts, setCounts] = useState({ totalProjects: 0, pendingApprovals: 0 }) const [countsLoaded, setCountsLoaded] = useState(false) // Fetch real-time counts useEffect(() => { const fetchCounts = async () => { try { const res = await fetch("/api/counts") if (res.ok) { const data = await res.json() setCounts(data) setCountsLoaded(true) } } catch { // Silently fail, keep showing 0 or loading state setCountsLoaded(true) } } fetchCounts() const interval = setInterval(fetchCounts, 30000) return () => clearInterval(interval) }, []) const isAdmin = user?.role === "ADMIN" const isClient = user?.role === "CLIENT" const initials = user?.name?.split(" ").map(n => n[0]).join("").slice(0, 2).toUpperCase() || "??" const isActive = (href: string) => { if (href === "/dashboard") return pathname === href return pathname === href || pathname.startsWith(href + "/") } const handleCreateProject = (e: React.MouseEvent) => { e.preventDefault() openNewProjectModal() } return ( ) }