FM / components

/opt/canhelp/apps/web/src/components

Name	Size	Mode	Actions
AdminRolePreview.tsx	4928	0644	edit dl rm
BecomeSpecialistButton.tsx	702	0644	edit dl rm
CategoryIcon.tsx	1576	0644	edit dl rm
FaqAccordion.tsx	1500	0644	edit dl rm
FavoriteSpecialistButton.tsx	1464	0644	edit dl rm
Footer.tsx	3019	0644	edit dl rm
Header.tsx	30479	0644	edit dl rm
HeroFloatingIcons.tsx	4378	0644	edit dl rm
HeroSearch.tsx	1611	0644	edit dl rm
HomeCategoryGrid.tsx	4625	0644	edit dl rm
HomeCityCloud.tsx	1790	0644	edit dl rm
HomeCityPicker.tsx	5490	0644	edit dl rm
HomeSectionArt.tsx	5912	0644	edit dl rm
LanguageSwitcher.tsx	2438	0644	edit dl rm
PlanBadge.tsx	3100	0644	edit dl rm
PromoCountdown.tsx	3483	0644	edit dl rm
ScrollToTopButton.tsx	818	0644	edit dl rm
Section.tsx	252	0644	edit dl rm
ShareButton.tsx	1041	0644	edit dl rm
SocialIcons.tsx	6871	0644	edit dl rm
SpecialistsFiltersClient.tsx	6461	0644	edit dl rm
SpecialistTaskCard.tsx	2837	0644	edit dl rm
SupportModal.tsx	6195	0644	edit dl rm
TaskCategoryPicker.tsx	11117	0644	edit dl rm
TaskLocationPicker.tsx	11038	0644	edit dl rm
Turnstile.tsx	651	0644	edit dl rm
UpgradePrompt.tsx	3427	0644	edit dl rm
UsageMeter.tsx	1602	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/components/Header.tsx (30479B)

'use client'

import Link from 'next/link'
import { useRouter, usePathname } from 'next/navigation'
import { useSession, signOut } from '@/lib/auth'
import { useLocale } from '@/context/locale'
import { formatShortName } from '@/lib/formatName'
import { LanguageSwitcher } from './LanguageSwitcher'
import { useState, useRef, useEffect } from 'react'
import { getUnreadCount, getMyDashboard, getPublicSettings } from '@/lib/api'
import type { PlanTier } from '@/lib/api'
import { io } from 'socket.io-client'
import { useEffectiveRole } from '@/hooks/useEffectiveRole'
import dynamic from 'next/dynamic'

const SupportModal = dynamic(() => import('./SupportModal'), { ssr: false })

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'

export function Header() {
  const router = useRouter()
  const pathname = usePathname()
  const { data: session } = useSession()
  const { t, locale } = useLocale()
  const [menuOpen, setMenuOpen] = useState(false)
  const [profileOpen, setProfileOpen] = useState(false)
  const [supportOpen, setSupportOpen] = useState(false)
  const [unreadNotif, setUnreadNotif] = useState(0)
  const [unreadChat, setUnreadChat] = useState(0)
  const [msgToast, setMsgToast] = useState<{ roomId: string; body: string } | null>(null)
  const [planTier, setPlanTier] = useState<PlanTier | null>(null)
  const [showPricing, setShowPricing] = useState(true)
  const profileRef = useRef<HTMLDivElement>(null)
  const headerRef = useRef<HTMLDivElement>(null)
  const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const pathnameRef = useRef(pathname)
  useEffect(() => { pathnameRef.current = pathname }, [pathname])

useEffect(() => {
    getPublicSettings().then((settings) => setShowPricing(settings.showPricing)).catch(() => {})
  }, [])

// Close dropdowns on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (profileRef.current && !profileRef.current.contains(e.target as Node)) {
        setProfileOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

const isAdmin = (session?.user as any)?.role === 'admin'
  const effectiveRole = useEffectiveRole()
  const isSpecialist = effectiveRole === 'specialist'

const isActive = (href: string, exact = false) =>
    exact ? pathname === href : pathname === href || pathname.startsWith(href + '/')

const navCls = (href: string, exact = false) =>
    `font-medium text-sm transition ${isActive(href, exact) ? 'text-green-600' : 'text-gray-600 hover:text-green-600'}`

const mobileNavCls = (href: string, exact = false) =>
    `flex items-center gap-2 font-medium py-1 ${isActive(href, exact) ? 'text-green-600' : 'text-gray-700'}`

// Reset chat badge when entering chat
  useEffect(() => {
    if (pathname === '/chat') setUnreadChat(0)
  }, [pathname])

useEffect(() => {
    if (!session) return
    const socket = io(API_URL, { withCredentials: true, transports: ['websocket', 'polling'] })
    socket.on('new_message', (msg: { roomId: string; body: string }) => {
      if (pathnameRef.current === '/chat') return
      setUnreadChat((c) => c + 1)
      if (toastTimer.current) clearTimeout(toastTimer.current)
      setMsgToast(msg)
      toastTimer.current = setTimeout(() => setMsgToast(null), 5000)
    })
    return () => {
      socket.disconnect()
      if (toastTimer.current) clearTimeout(toastTimer.current)
    }
  }, [session])

useEffect(() => {
    if (!session) { setUnreadNotif(0); return }
    const fetch = () => getUnreadCount().then((r) => setUnreadNotif(r.count)).catch(() => {})
    fetch()
    const timer = setInterval(fetch, 30_000)
    return () => clearInterval(timer)
  }, [session])

useEffect(() => {
    if (!session) { setPlanTier(null); return }
    getMyDashboard().then((d) => setPlanTier((d.plan?.tier ?? null) as PlanTier | null)).catch(() => {})
  }, [session])

useEffect(() => {
    const onScroll = () => {
      if (!headerRef.current) return
      if (window.scrollY > 40) {
        headerRef.current.classList.add('header-shrink')
      } else {
        headerRef.current.classList.remove('header-shrink')
      }
    }
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

return (
    <>
    <header ref={headerRef} className="header-base bg-white border-b border-gray-200 sticky top-0 z-50 transition-all duration-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 header-content transition-all duration-300">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 shrink-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/logo.png" alt="CanHelp" className="w-8 h-8 object-contain" />
            <span className="logo-text text-2xl font-bold text-green-600 transition-all duration-300">CanHelp</span>
          </Link>

{/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-5 ml-auto">
            {isSpecialist ? (
              <>
                <Link href="/tasks" className={navCls('/tasks')}>
                  {t('nav.find_tasks')}
                </Link>
                <Link href="/dashboard" className={navCls('/dashboard')}>
                  {t('nav.dashboard')}
                </Link>
              </>
            ) : (
              <>
                <Link href="/tasks/new" className={navCls('/tasks/new', true)}>
                  {t('dashboard.new_task')}
                </Link>                <Link href="/tasks" className={navCls('/tasks')}>
                  {t('nav.tasks')}
                </Link>                <Link href="/specialists" className={navCls('/specialists')}>
                  {t('nav.specialists')}
                </Link>
              </>
            )}
            {showPricing && (
              <Link href="/pricing" className={navCls('/pricing', true)}>
                {t('nav.pricing', 'Pricing')}
              </Link>
            )}
            {session ? (
              <>
                <Link href="/notifications" className="relative text-gray-600 hover:text-gray-900 flex items-center">
                  <svg className={`w-5 h-5 ${unreadNotif > 0 ? 'text-green-600' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                  </svg>
                  {unreadNotif > 0 && (
                    <span className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none">
                      {unreadNotif > 99 ? '99+' : unreadNotif}
                    </span>
                  )}
                </Link>
                <Link href="/chat" className="relative text-gray-600 hover:text-gray-900 flex items-center">
                  <svg className={`w-5 h-5 ${unreadChat > 0 ? 'text-green-500' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                  {unreadChat > 0 && (
                    <span className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-0.5 bg-green-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none">
                      {unreadChat > 99 ? '99+' : unreadChat}
                    </span>
                  )}
                </Link>

{/* Profile dropdown */}
                <div className="relative" ref={profileRef}>
                  <button
                    onClick={() => setProfileOpen(!profileOpen)}
                    className="flex items-center gap-1.5 text-sm font-medium text-gray-600 hover:text-green-600"
                  >
                    <span className="truncate max-w-[100px]">{formatShortName((session.user as any).firstName, (session.user as any).lastName, session.user.name)}</span>
                    {planTier === 'pro' && (
                      <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700 leading-none">Pro</span>
                    )}
                    {planTier === 'ultimate' && (
                      <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-gradient-to-r from-amber-400 via-yellow-400 to-amber-400 text-gray-900 shadow-sm shadow-amber-300/50 leading-none">★</span>
                    )}
                    <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>

{profileOpen && (
                    <div className="absolute right-0 mt-2 w-52 bg-white border border-gray-200 rounded-xl shadow-lg py-1 z-50">
                      {isSpecialist ? (
                        <>
                          <Link href="/tasks/new" className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" onClick={() => setProfileOpen(false)}>
                            <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /></svg>
                            {t('nav.new_task')}
                          </Link>
                          <Link href="/specialists" className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" onClick={() => setProfileOpen(false)}>
                            <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                            {t('nav.specialists')}
                          </Link>
                        </>
                      ) : (
                        <>
                          <Link href="/notifications" className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" onClick={() => setProfileOpen(false)}>
                            <svg className={`w-4 h-4 shrink-0 ${unreadNotif > 0 ? 'text-green-600' : 'text-gray-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
                            <span className="flex items-center gap-1.5">
                              {t('nav.notifications')}
                              {unreadNotif > 0 && <span className="px-1.5 py-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full leading-none">{unreadNotif > 99 ? '99+' : unreadNotif}</span>}
                            </span>
                          </Link>
                          <Link href="/chat" className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" onClick={() => setProfileOpen(false)}>
                            <svg className={`w-4 h-4 shrink-0 ${unreadChat > 0 ? 'text-green-500' : 'text-gray-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                            <span className="flex items-center gap-1.5">
                              {t('nav.chat')}
                              {unreadChat > 0 && <span className="px-1.5 py-0.5 bg-green-500 text-white text-[10px] font-bold rounded-full leading-none">{unreadChat > 99 ? '99+' : unreadChat}</span>}
                            </span>
                          </Link>
                          <Link href="/dashboard" className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" onClick={() => setProfileOpen(false)}>
                            <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                            {t('nav.dashboard')}
                          </Link>
                        </>
                      )}
                      {(isSpecialist || isAdmin) && (
                        <Link
                          href="/schedule"
                          className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                          onClick={() => setProfileOpen(false)}
                        >
                          <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                          {t('nav.schedule')}
                        </Link>
                      )}
                      {isAdmin && (
                        <Link
                          href="/admin"
                          className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                          onClick={() => setProfileOpen(false)}
                        >
                          <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                          {t('nav.admin')}
                        </Link>
                      )}
                      <Link
                        href="/profile"
                        className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                        onClick={() => setProfileOpen(false)}
                      >
                        <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        {t('nav.profile')}
                      </Link>
                      <Link
                        href="/favorites"
                        className="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                        onClick={() => setProfileOpen(false)}
                      >
                        <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                        {t('nav.favorites')}
                      </Link>
                      <hr className="my-1 border-gray-100" />
                      <button
                        className="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-green-50"
                        onClick={() => { setProfileOpen(false); setSupportOpen(true) }}
                      >
                        <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        {t('support.title')}
                      </button>
                      <hr className="my-1 border-gray-100" />
                      <button
                        className="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-red-500 hover:bg-red-50"
                        onClick={() => { setProfileOpen(false); signOut().then(() => { window.location.href = '/' }) }}
                      >
                        <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                        </svg>
                        {t('nav.logout')}
                      </button>
                    </div>
                  )}
                </div>
              </>
            ) : (
              <>
                <Link href="/login" className="text-gray-600 hover:text-green-600 font-medium text-sm">
                  {t('nav.login')}
                </Link>
                <Link
                  href="/register"
                  className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 font-medium text-sm"
                >
                  {t('nav.register')}
                </Link>
              </>
            )}

{/* Mobile: language + burger */}
          <div className="md:hidden flex items-center gap-2">
            <LanguageSwitcher />
            <button
              className="p-2"
              onClick={() => setMenuOpen(!menuOpen)}
              aria-label="Toggle menu"
            >
              <svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                {menuOpen
                  ? <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  : <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                }
              </svg>
            </button>
          </div>
        </div>

{/* Mobile menu */}
        {menuOpen && (
          <div className="md:hidden py-4 border-t border-gray-100 flex flex-col gap-3">
            {isSpecialist ? (
              <>
                <Link href="/tasks" className={mobileNavCls('/tasks')} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                  {t('nav.find_tasks')}
                </Link>
                <Link href="/dashboard" className={mobileNavCls('/dashboard')} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                  {t('nav.dashboard')}
                </Link>
              </>
            ) : (
              <>
                <Link href="/tasks/new" className={mobileNavCls('/tasks/new', true)} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /></svg>
                  {t('nav.new_task')}
                </Link>
                <Link href="/tasks" className={mobileNavCls('/tasks')} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
                  {t('nav.tasks')}
                </Link>
                <Link href="/specialists" className={mobileNavCls('/specialists')} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                  {t('nav.specialists')}
                </Link>
              </>
            )}
            {session ? (
              <>
                <Link href="/chat" className={mobileNavCls('/chat', true)} onClick={() => setMenuOpen(false)}>
                  <svg className={`w-4 h-4 shrink-0 ${unreadChat > 0 ? 'text-green-500' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                  {t('nav.chat')}{unreadChat > 0 && <span className="ml-1 px-1.5 py-0.5 bg-green-500 text-white text-[10px] font-bold rounded-full">{unreadChat}</span>}
                </Link>
                {isSpecialist ? (
                  <>
                    <Link href="/tasks/new" className={mobileNavCls('/tasks/new', true)} onClick={() => setMenuOpen(false)}>
                      <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /></svg>
                      {t('nav.new_task')}
                    </Link>
                    <Link href="/specialists" className={mobileNavCls('/specialists')} onClick={() => setMenuOpen(false)}>
                      <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                      {t('nav.specialists')}
                    </Link>
                  </>
                ) : (
                  <>
                    <Link href="/notifications" className={mobileNavCls('/notifications', true)} onClick={() => setMenuOpen(false)}>
                      <svg className={`w-4 h-4 shrink-0 ${unreadNotif > 0 ? 'text-green-600' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
                      <span className="flex items-center gap-1.5">{t('nav.notifications')}{unreadNotif > 0 && <span className="px-1.5 py-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full">{unreadNotif > 99 ? '99+' : unreadNotif}</span>}</span>
                    </Link>
                    <Link href="/dashboard" className={mobileNavCls('/dashboard')} onClick={() => setMenuOpen(false)}>
                      <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                      {t('nav.dashboard')}
                    </Link>
                  </>
                )}
                <Link href="/favorites" className={mobileNavCls('/favorites', true)} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                  {t('nav.favorites')}
                </Link>
                {(isSpecialist || isAdmin) && (
                  <Link href="/schedule" className={mobileNavCls('/schedule', true)} onClick={() => setMenuOpen(false)}>
                    <svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                    {t('nav.schedule')}
                  </Link>
                )}
                {isAdmin && (
                  <Link href="/admin" className={mobileNavCls('/admin')} onClick={() => setMenuOpen(false)}>
                    <svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    {t('nav.admin')}
                  </Link>
                )}
                <Link href="/profile" className={mobileNavCls('/profile', true)} onClick={() => setMenuOpen(false)}>
                  <svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                  {t('nav.profile')}
                </Link>
                <button onClick={() => { setMenuOpen(false); signOut().then(() => { window.location.href = '/' }) }} className="flex items-center gap-2 text-left text-red-500 py-1 font-medium">
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                  {t('nav.logout')}
                </button>
              </>
            ) : (
              <>
                <Link href="/login" className="text-gray-700 font-medium py-1" onClick={() => setMenuOpen(false)}>{t('nav.login')}</Link>
                <Link href="/register" className="text-green-600 font-medium py-1" onClick={() => setMenuOpen(false)}>{t('nav.register')}</Link>
              </>
            )}
          </div>
        )}
      </div>
    </header>

{/* New message toast */}
    {msgToast && (
      <div className="fixed bottom-5 right-5 z-[200] max-w-sm w-full">
        <div className="bg-white border border-gray-200 rounded-xl shadow-xl p-4 flex items-start gap-3 animate-fade-in">
          <span className="text-2xl shrink-0">💬</span>
          <div className="flex-1 min-w-0">
            <p className="font-semibold text-gray-900 text-sm">{t('chat.toast_title')}</p>
            <p className="text-xs text-gray-500 truncate mt-0.5">{msgToast.body}</p>
          </div>
          <div className="flex flex-col items-end gap-2 shrink-0">
            <button
              onClick={() => setMsgToast(null)}
              className="text-gray-400 hover:text-gray-600 text-lg leading-none"
              aria-label="close"
            >×</button>
            <Link
              href={`/chat?room=${msgToast.roomId}`}
              onClick={() => setMsgToast(null)}
              className="text-xs text-green-600 hover:underline font-medium"
            >{t('chat.toast_open')}</Link>
          </div>
        </div>
      </div>
    )}
    {supportOpen && <SupportModal onClose={() => setSupportOpen(false)} />}
    </>
  )
}

'use client' import Link from 'next/link' import { useRouter, usePathname } from 'next/navigation' import { useSession, signOut } from '@/lib/auth' import { useLocale } from '@/context/locale' import { formatShortName } from '@/lib/formatName' import { LanguageSwitcher } from './LanguageSwitcher' import { useState, useRef, useEffect } from 'react' import { getUnreadCount, getMyDashboard, getPublicSettings } from '@/lib/api' import type { PlanTier } from '@/lib/api' import { io } from 'socket.io-client' import { useEffectiveRole } from '@/hooks/useEffectiveRole' import dynamic from 'next/dynamic' const SupportModal = dynamic(() => import('./SupportModal'), { ssr: false }) const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000' export function Header() { const router = useRouter() const pathname = usePathname() const { data: session } = useSession() const { t, locale } = useLocale() const [menuOpen, setMenuOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) const [supportOpen, setSupportOpen] = useState(false) const [unreadNotif, setUnreadNotif] = useState(0) const [unreadChat, setUnreadChat] = useState(0) const [msgToast, setMsgToast] = useState<{ roomId: string; body: string } | null>(null) const [planTier, setPlanTier] = useState(null) const [showPricing, setShowPricing] = useState(true) const profileRef = useRef(null) const headerRef = useRef(null) const toastTimer = useRef | null>(null) const pathnameRef = useRef(pathname) useEffect(() => { pathnameRef.current = pathname }, [pathname]) useEffect(() => { getPublicSettings().then((settings) => setShowPricing(settings.showPricing)).catch(() => {}) }, []) // Close dropdowns on outside click useEffect(() => { function handleClick(e: MouseEvent) { if (profileRef.current && !profileRef.current.contains(e.target as Node)) { setProfileOpen(false) } } document.addEventListener('mousedown', handleClick) return () => document.removeEventListener('mousedown', handleClick) }, []) const isAdmin = (session?.user as any)?.role === 'admin' const effectiveRole = useEffectiveRole() const isSpecialist = effectiveRole === 'specialist' const isActive = (href: string, exact = false) => exact ? pathname === href : pathname === href || pathname.startsWith(href + '/') const navCls = (href: string, exact = false) => `font-medium text-sm transition ${isActive(href, exact) ? 'text-green-600' : 'text-gray-600 hover:text-green-600'}` const mobileNavCls = (href: string, exact = false) => `flex items-center gap-2 font-medium py-1 ${isActive(href, exact) ? 'text-green-600' : 'text-gray-700'}` // Reset chat badge when entering chat useEffect(() => { if (pathname === '/chat') setUnreadChat(0) }, [pathname]) useEffect(() => { if (!session) return const socket = io(API_URL, { withCredentials: true, transports: ['websocket', 'polling'] }) socket.on('new_message', (msg: { roomId: string; body: string }) => { if (pathnameRef.current === '/chat') return setUnreadChat((c) => c + 1) if (toastTimer.current) clearTimeout(toastTimer.current) setMsgToast(msg) toastTimer.current = setTimeout(() => setMsgToast(null), 5000) }) return () => { socket.disconnect() if (toastTimer.current) clearTimeout(toastTimer.current) } }, [session]) useEffect(() => { if (!session) { setUnreadNotif(0); return } const fetch = () => getUnreadCount().then((r) => setUnreadNotif(r.count)).catch(() => {}) fetch() const timer = setInterval(fetch, 30_000) return () => clearInterval(timer) }, [session]) useEffect(() => { if (!session) { setPlanTier(null); return } getMyDashboard().then((d) => setPlanTier((d.plan?.tier ?? null) as PlanTier | null)).catch(() => {}) }, [session]) useEffect(() => { const onScroll = () => { if (!headerRef.current) return if (window.scrollY > 40) { headerRef.current.classList.add('header-shrink') } else { headerRef.current.classList.remove('header-shrink') } } window.addEventListener('scroll', onScroll) return () => window.removeEventListener('scroll', onScroll) }, []) return ( <>

{/* Logo */} {/* eslint-disable-next-line @next/next/no-img-element */}

CanHelp {/* Desktop nav */}

{isSpecialist ? ( <> {t('nav.find_tasks')} {t('nav.dashboard')} ) : ( <> {t('dashboard.new_task')} {t('nav.tasks')} {t('nav.specialists')} )} {showPricing && ( {t('nav.pricing', 'Pricing')} )} {session ? ( <> {unreadNotif > 0 && ( {unreadNotif > 99 ? '99+' : unreadNotif} )} {unreadChat > 0 && ( {unreadChat > 99 ? '99+' : unreadChat} )} {/* Profile dropdown */}

{profileOpen && (

{isSpecialist ? ( <> setProfileOpen(false)}> {t('nav.new_task')} setProfileOpen(false)}> {t('nav.specialists')} ) : ( <> setProfileOpen(false)}> {t('nav.notifications')} {unreadNotif > 0 && {unreadNotif > 99 ? '99+' : unreadNotif}} setProfileOpen(false)}> {t('nav.chat')} {unreadChat > 0 && {unreadChat > 99 ? '99+' : unreadChat}} setProfileOpen(false)}> {t('nav.dashboard')} )} {(isSpecialist || isAdmin) && ( setProfileOpen(false)} > {t('nav.schedule')} )} {isAdmin && ( setProfileOpen(false)} > {t('nav.admin')} )} setProfileOpen(false)} > {t('nav.profile')} setProfileOpen(false)} > {t('nav.favorites')}

)}

) : ( <> {t('nav.login')} {t('nav.register')} )}

{/* Mobile: language + burger */}

{/* Mobile menu */} {menuOpen && (

{isSpecialist ? ( <> setMenuOpen(false)}> {t('nav.find_tasks')} setMenuOpen(false)}> {t('nav.dashboard')} ) : ( <> setMenuOpen(false)}> {t('nav.new_task')} setMenuOpen(false)}> {t('nav.tasks')} setMenuOpen(false)}> {t('nav.specialists')} )} {session ? ( <> setMenuOpen(false)}> {t('nav.chat')}{unreadChat > 0 && {unreadChat}} {isSpecialist ? ( <> setMenuOpen(false)}> {t('nav.new_task')} setMenuOpen(false)}> {t('nav.specialists')} ) : ( <> setMenuOpen(false)}> {t('nav.notifications')}{unreadNotif > 0 && {unreadNotif > 99 ? '99+' : unreadNotif}} setMenuOpen(false)}> {t('nav.dashboard')} )} setMenuOpen(false)}> {t('nav.favorites')} {(isSpecialist || isAdmin) && ( setMenuOpen(false)}> {t('nav.schedule')} )} {isAdmin && ( setMenuOpen(false)}> {t('nav.admin')} )} setMenuOpen(false)}> {t('nav.profile')} ) : ( <> setMenuOpen(false)}>{t('nav.login')} setMenuOpen(false)}>{t('nav.register')} )}

)}

{/* New message toast */} {msgToast && (

💬

{t('chat.toast_title')}

{msgToast.body}

setMsgToast(null)} className="text-xs text-green-600 hover:underline font-medium" >{t('chat.toast_open')}

)} {supportOpen && setSupportOpen(false)} />} ) }