1033 lines
45 KiB
TypeScript
1033 lines
45 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||
import { useRouter, usePathname } from 'next/navigation'
|
||
import Image from 'next/image'
|
||
import {
|
||
Dialog,
|
||
DialogPanel,
|
||
Disclosure,
|
||
DisclosureButton,
|
||
DisclosurePanel,
|
||
Popover,
|
||
PopoverButton,
|
||
PopoverGroup,
|
||
PopoverPanel,
|
||
Transition,
|
||
} from '@headlessui/react'
|
||
import {
|
||
Bars3Icon,
|
||
UserCircleIcon,
|
||
XMarkIcon,
|
||
ArrowRightOnRectangleIcon,
|
||
} from '@heroicons/react/24/outline'
|
||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||
import useAuthStore from '../../store/authStore'
|
||
import { Avatar } from '../avatar'
|
||
|
||
// ENV-BASED FEATURE FLAGS (string envs: treat "false" as off, everything else as on)
|
||
const DISPLAY_NEWS = process.env.NEXT_PUBLIC_DISPLAY_NEWS !== 'false'
|
||
const DISPLAY_MEMBERSHIP = process.env.NEXT_PUBLIC_DISPLAY_MEMBERSHIP !== 'false'
|
||
const DISPLAY_ABOUT_US = process.env.NEXT_PUBLIC_DISPLAY_ABOUT_US !== 'false'
|
||
const DISPLAY_MATRIX = process.env.NEXT_PUBLIC_DISPLAY_MATRIX !== 'false'
|
||
const DISPLAY_ABONEMENTS = process.env.NEXT_PUBLIC_DISPLAY_ABONEMENTS !== 'false'
|
||
const DISPLAY_POOLS = process.env.NEXT_PUBLIC_DISPLAY_POOLS !== 'false'
|
||
|
||
|
||
// Information dropdown, controlled by env flags
|
||
const informationItems = [
|
||
{ name: 'Affiliate-Links', href: '/affiliate-links', description: 'Browse our partner links' },
|
||
...(DISPLAY_MEMBERSHIP
|
||
? [{ name: 'Memberships', href: '/memberships', description: 'Explore membership options' }]
|
||
: []),
|
||
...(DISPLAY_ABOUT_US
|
||
? [{ name: 'About us', href: '/about-us', description: 'Learn more about us' }]
|
||
: []),
|
||
]
|
||
|
||
// Top-level navigation links, controlled by env flags
|
||
const navLinks = [
|
||
...(DISPLAY_NEWS ? [{ name: 'News', href: '/news' }] : []),
|
||
]
|
||
|
||
// Toggle visibility of Shop navigation across header (desktop + mobile)
|
||
const showShop = false
|
||
|
||
interface HeaderProps {
|
||
setGlobalLoggingOut?: (value: boolean) => void; // NEW
|
||
}
|
||
|
||
export default function Header({ setGlobalLoggingOut }: HeaderProps) {
|
||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||
const [mounted, setMounted] = useState(false)
|
||
const [animateIn, setAnimateIn] = useState(false)
|
||
const [scrollY, setScrollY] = useState(0)
|
||
const [isMobile, setIsMobile] = useState(false)
|
||
const user = useAuthStore(s => s.user)
|
||
const logout = useAuthStore(s => s.logout)
|
||
const accessToken = useAuthStore(s => s.accessToken)
|
||
const refreshAuthToken = useAuthStore(s => s.refreshAuthToken)
|
||
const router = useRouter()
|
||
const pathname = usePathname()
|
||
const isParallaxPage =
|
||
pathname === '/' ||
|
||
pathname === '/login' ||
|
||
pathname === '/password-reset' ||
|
||
pathname === '/register'
|
||
|
||
const parallaxEnabled = isParallaxPage && !isMobile
|
||
const headerIsFixedOverlay = isParallaxPage && !isMobile
|
||
|
||
const headerPositionClass = isParallaxPage
|
||
? (isMobile ? 'sticky top-0 w-full' : 'fixed top-0 left-0 w-full')
|
||
: 'relative'
|
||
|
||
const [hasReferralPerm, setHasReferralPerm] = useState(false)
|
||
const [adminMgmtOpen, setAdminMgmtOpen] = useState(false)
|
||
const managementRef = useRef<HTMLDivElement | null>(null)
|
||
const [canSeeDashboard, setCanSeeDashboard] = useState(false)
|
||
const headerElRef = useRef<HTMLElement | null>(null)
|
||
|
||
const handleLogout = async () => {
|
||
try {
|
||
// start global logout transition
|
||
setGlobalLoggingOut?.(true)
|
||
await logout()
|
||
setMobileMenuOpen(false)
|
||
router.push('/login')
|
||
} catch (err) {
|
||
console.error('Logout failed:', err)
|
||
setGlobalLoggingOut?.(false)
|
||
}
|
||
};
|
||
|
||
// Helper to get user initials for profile icon
|
||
const getUserInitials = () => {
|
||
if (!user) return 'U';
|
||
if (user.firstName || user.lastName) {
|
||
return (
|
||
(user.firstName?.[0] || '') +
|
||
(user.lastName?.[0] || '')
|
||
).toUpperCase();
|
||
}
|
||
if (user.email) {
|
||
return user.email[0].toUpperCase();
|
||
}
|
||
return 'U';
|
||
};
|
||
|
||
// Initial theme (dark/light) + mark mounted + start header animation
|
||
useEffect(() => {
|
||
const stored = localStorage.getItem('theme')
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
const useDark = stored === 'dark' || (!stored && prefersDark)
|
||
|
||
if (useDark) {
|
||
document.documentElement.classList.add('dark')
|
||
} else {
|
||
document.documentElement.classList.remove('dark')
|
||
}
|
||
|
||
setMounted(true)
|
||
setAnimateIn(true)
|
||
}, [])
|
||
|
||
// Detect mobile devices (for disabling parallax)
|
||
useEffect(() => {
|
||
const mq = window.matchMedia('(max-width: 768px)')
|
||
const apply = () => setIsMobile(mq.matches)
|
||
apply()
|
||
mq.addEventListener?.('change', apply)
|
||
window.addEventListener('resize', apply, { passive: true })
|
||
return () => {
|
||
mq.removeEventListener?.('change', apply)
|
||
window.removeEventListener('resize', apply)
|
||
}
|
||
}, [])
|
||
|
||
// Home + login scroll listener: reveal header after first scroll with slight parallax
|
||
useEffect(() => {
|
||
if (!mounted) return
|
||
|
||
if (!parallaxEnabled) {
|
||
// non-parallax (and mobile): header always visible, no scroll listeners
|
||
setScrollY(100)
|
||
return
|
||
}
|
||
|
||
const handleScroll = () => {
|
||
const y = window.scrollY || window.pageYOffset || 0
|
||
setScrollY(y)
|
||
}
|
||
|
||
const handleWheel = (e: WheelEvent) => {
|
||
// virtual scroll so header can reveal even if page cannot scroll
|
||
setScrollY(prev => {
|
||
const next = prev + e.deltaY
|
||
return Math.max(0, Math.min(next, 200))
|
||
})
|
||
}
|
||
|
||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||
window.addEventListener('wheel', handleWheel, { passive: true })
|
||
|
||
return () => {
|
||
window.removeEventListener('scroll', handleScroll)
|
||
window.removeEventListener('wheel', handleWheel)
|
||
}
|
||
}, [mounted, parallaxEnabled])
|
||
|
||
// Fetch user permissions and set hasReferralPerm
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
|
||
const fetchPermissions = async () => {
|
||
if (!mounted) {
|
||
console.log('⏸️ Header: not mounted yet, skipping permissions fetch')
|
||
return
|
||
}
|
||
if (!user) {
|
||
console.log('ℹ️ Header: no user, clearing permission flag')
|
||
if (!cancelled) setHasReferralPerm(false)
|
||
return
|
||
}
|
||
|
||
const uid = (user as any)?.id ?? (user as any)?._id ?? (user as any)?.userId
|
||
if (!uid) {
|
||
console.warn('⚠️ Header: user id missing, cannot fetch permissions', user)
|
||
if (!cancelled) setHasReferralPerm(false)
|
||
return
|
||
}
|
||
|
||
const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
|
||
const url = `${base}/api/users/${uid}/permissions`
|
||
console.log('🌐 Header: fetching permissions:', { url, uid })
|
||
|
||
// Ensure we have a token (try refresh if needed)
|
||
let tokenToUse = accessToken
|
||
try {
|
||
if (!tokenToUse && refreshAuthToken) {
|
||
const ok = await refreshAuthToken()
|
||
if (ok) tokenToUse = useAuthStore.getState().accessToken
|
||
}
|
||
} catch (e) {
|
||
console.error('❌ Header: refreshAuthToken error:', e)
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(url, {
|
||
method: 'GET',
|
||
credentials: 'include',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
...(tokenToUse ? { Authorization: `Bearer ${tokenToUse}` } : {})
|
||
}
|
||
})
|
||
console.log('📡 Header: permissions status:', res.status)
|
||
const body = await res.json().catch(() => null)
|
||
console.log('📦 Header: permissions body:', body)
|
||
|
||
// Try common shapes
|
||
const permsSrc =
|
||
body?.data?.permissions ??
|
||
body?.permissions ??
|
||
body
|
||
|
||
let can = false
|
||
if (Array.isArray(permsSrc)) {
|
||
// Could be array of strings or objects
|
||
can =
|
||
permsSrc.includes?.('can_create_referrals') ||
|
||
permsSrc.some?.((p: any) => p?.name === 'can_create_referrals' || p?.key === 'can_create_referrals')
|
||
} else if (permsSrc && typeof permsSrc === 'object') {
|
||
can = !!permsSrc.can_create_referrals
|
||
}
|
||
|
||
console.log('✅ Header: can_create_referrals =', can)
|
||
if (!cancelled) setHasReferralPerm(!!can)
|
||
} catch (e) {
|
||
console.error('❌ Header: fetch permissions error:', e)
|
||
if (!cancelled) setHasReferralPerm(false)
|
||
}
|
||
}
|
||
|
||
fetchPermissions()
|
||
return () => { cancelled = true }
|
||
}, [mounted, user, accessToken, refreshAuthToken])
|
||
|
||
// NEW: fetch onboarding status to decide if dashboard should be visible
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
|
||
const fetchOnboardingStatus = async () => {
|
||
if (!mounted || !user) {
|
||
if (!cancelled) setCanSeeDashboard(false)
|
||
return
|
||
}
|
||
|
||
let tokenToUse = accessToken
|
||
try {
|
||
if (!tokenToUse && refreshAuthToken) {
|
||
const ok = await refreshAuthToken()
|
||
if (ok) tokenToUse = useAuthStore.getState().accessToken
|
||
}
|
||
} catch (e) {
|
||
console.error('❌ Header: refreshAuthToken (status-progress) error:', e)
|
||
}
|
||
|
||
if (!tokenToUse) {
|
||
if (!cancelled) setCanSeeDashboard(false)
|
||
return
|
||
}
|
||
|
||
try {
|
||
const statusUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/user/status-progress`
|
||
console.log('🌐 Header: fetching status-progress:', statusUrl)
|
||
|
||
const res = await fetch(statusUrl, {
|
||
method: 'GET',
|
||
headers: {
|
||
Authorization: `Bearer ${tokenToUse}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
credentials: 'include',
|
||
})
|
||
|
||
if (!res.ok) {
|
||
console.warn('⚠️ Header: status-progress failed with', res.status)
|
||
if (!cancelled) setCanSeeDashboard(false)
|
||
return
|
||
}
|
||
|
||
const statusData = await res.json().catch(() => null)
|
||
const progressData = statusData?.progress || statusData || {}
|
||
const steps = progressData.steps || []
|
||
const allStepsCompleted =
|
||
steps.length === 4 && steps.every((step: any) => step?.completed === true)
|
||
const isActive = progressData.status === 'active'
|
||
|
||
if (!cancelled) {
|
||
setCanSeeDashboard(allStepsCompleted && isActive)
|
||
}
|
||
} catch (e) {
|
||
console.error('❌ Header: status-progress fetch error:', e)
|
||
if (!cancelled) setCanSeeDashboard(false)
|
||
}
|
||
}
|
||
|
||
fetchOnboardingStatus()
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [mounted, user, accessToken, refreshAuthToken])
|
||
|
||
const isLoggedIn = !!user
|
||
const userPresent = mounted && isLoggedIn
|
||
|
||
// NEW: detect admin role across common shapes (guarded by mount to avoid SSR/CSR mismatch)
|
||
const rawIsAdmin =
|
||
!!user &&
|
||
(
|
||
(user as any)?.role === 'admin' ||
|
||
(user as any)?.userType === 'admin' ||
|
||
(user as any)?.isAdmin === true ||
|
||
((user as any)?.roles?.includes?.('admin'))
|
||
)
|
||
const isAdmin = mounted && rawIsAdmin
|
||
|
||
// Only gate visibility by scroll on parallax-enabled pages
|
||
const headerVisible = parallaxEnabled ? animateIn && scrollY > 24 : animateIn
|
||
const parallaxOffset = parallaxEnabled ? Math.max(-16, -scrollY * 0.15) : 0
|
||
|
||
// When the fixed header becomes visible, expose its height as a CSS variable so
|
||
// pages (e.g. /register) can pad their content and avoid being overlapped.
|
||
useEffect(() => {
|
||
if (!mounted) return
|
||
|
||
let raf1 = 0
|
||
let raf2 = 0
|
||
|
||
const applySpacer = () => {
|
||
// Only reserve space when header is fixed/overlaying content.
|
||
if (!headerIsFixedOverlay) {
|
||
document.documentElement.style.setProperty('--pp-header-spacer', '0px')
|
||
return
|
||
}
|
||
|
||
const h = headerElRef.current?.getBoundingClientRect().height ?? 0
|
||
const spacer = headerVisible ? `${Math.ceil(h)}px` : '0px'
|
||
document.documentElement.style.setProperty('--pp-header-spacer', spacer)
|
||
}
|
||
|
||
const applyShiftFade = () => {
|
||
if (!headerVisible) {
|
||
document.documentElement.style.setProperty('--pp-page-shift-opacity', '1')
|
||
return
|
||
}
|
||
|
||
// Less noticeable dip to avoid "too translucent" look during the shift.
|
||
document.documentElement.style.setProperty('--pp-page-shift-opacity', '0.99')
|
||
raf1 = window.requestAnimationFrame(() => {
|
||
raf2 = window.requestAnimationFrame(() => {
|
||
document.documentElement.style.setProperty('--pp-page-shift-opacity', '1')
|
||
})
|
||
})
|
||
}
|
||
|
||
applySpacer()
|
||
applyShiftFade()
|
||
|
||
const onResize = () => applySpacer()
|
||
window.addEventListener('resize', onResize, { passive: true })
|
||
|
||
return () => {
|
||
window.removeEventListener('resize', onResize)
|
||
if (raf1) cancelAnimationFrame(raf1)
|
||
if (raf2) cancelAnimationFrame(raf2)
|
||
}
|
||
}, [mounted, headerVisible, headerIsFixedOverlay])
|
||
|
||
// Hard cleanup: if any scroll-lock left padding/overflow on <body>/<html>, remove it when the drawer is closed.
|
||
useEffect(() => {
|
||
if (mobileMenuOpen) return
|
||
const html = document.documentElement
|
||
const body = document.body
|
||
|
||
body.style.paddingRight = ''
|
||
html.style.paddingRight = ''
|
||
|
||
if (body.style.overflow === 'hidden') body.style.overflow = ''
|
||
if (html.style.overflow === 'hidden') html.style.overflow = ''
|
||
}, [mobileMenuOpen])
|
||
|
||
return (
|
||
<header
|
||
ref={headerElRef}
|
||
className={`${headerPositionClass} isolate z-30 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)] ${
|
||
isAdmin ? '' : 'border-b border-white/10'
|
||
} ${
|
||
headerVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-6 pointer-events-none'
|
||
} transition-all duration-500 ease-out`}
|
||
style={{
|
||
background: 'linear-gradient(135deg, #0F1D37 0%, #0A162A 50%, #081224 100%)',
|
||
...(parallaxEnabled ? { transform: `translateY(${parallaxOffset}px)` } : {}),
|
||
}}
|
||
>
|
||
<nav
|
||
aria-label="Global"
|
||
className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
|
||
>
|
||
<div className="flex lg:flex-1">
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="p-2 flex items-center gap-3 max-w-full lg:-m-1.5 lg:gap-0"
|
||
>
|
||
<span className="sr-only">ProfitPlanet</span>
|
||
<Image
|
||
src="/images/logos/pp_logo_gold_transparent.png"
|
||
alt="ProfitPlanet Logo"
|
||
width={280}
|
||
height={84}
|
||
className="h-14 w-auto flex-shrink-0 sm:h-16 lg:h-[4.5rem]"
|
||
/>
|
||
{/* Removed flickering mobile heading (now only shown inside the sliding panel) */}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mobile hamburger (only on small screens) */}
|
||
<div className="flex lg:hidden">
|
||
<button
|
||
type="button"
|
||
onClick={() => setMobileMenuOpen(open => !open)}
|
||
aria-expanded={mobileMenuOpen}
|
||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400 transition-transform duration-300 ease-out data-[open=true]:rotate-90"
|
||
data-open={mobileMenuOpen ? 'true' : 'false'}
|
||
>
|
||
<span className="sr-only">
|
||
{mobileMenuOpen ? 'Close main menu' : 'Open main menu'}
|
||
</span>
|
||
<span className="relative flex h-6 w-6 items-center justify-center">
|
||
<Bars3Icon
|
||
aria-hidden="true"
|
||
className={`size-6 transition-all duration-300 ease-out ${
|
||
mobileMenuOpen
|
||
? 'opacity-0 -rotate-90 scale-75'
|
||
: 'opacity-100 rotate-0 scale-100'
|
||
}`}
|
||
/>
|
||
<XMarkIcon
|
||
aria-hidden="true"
|
||
className={`pointer-events-none absolute size-6 transition-all duration-300 ease-out ${
|
||
mobileMenuOpen
|
||
? 'opacity-100 rotate-0 scale-100'
|
||
: 'opacity-0 rotate-90 scale-75'
|
||
}`}
|
||
/>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<PopoverGroup className="hidden lg:flex lg:gap-x-12">
|
||
|
||
{/* Navigation Links */}
|
||
{navLinks.map((link) => (
|
||
<button
|
||
key={link.href}
|
||
onClick={() => router.push(link.href)}
|
||
className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||
>
|
||
{link.name}
|
||
</button>
|
||
))}
|
||
|
||
{/* Conditional user-specific links (top navbar) */}
|
||
{userPresent && hasReferralPerm && (
|
||
<>
|
||
{/* Referral Management REMOVED from top nav */}
|
||
{DISPLAY_MATRIX && (
|
||
<button
|
||
onClick={() => router.push('/personal-matrix')}
|
||
className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||
>
|
||
Personal Matrix
|
||
</button>
|
||
)}
|
||
|
||
{DISPLAY_ABONEMENTS && (
|
||
<button
|
||
onClick={() => router.push('/coffee-abonnements')}
|
||
className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||
>
|
||
Coffee Abonnements
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Information dropdown already removed here */}
|
||
</PopoverGroup>
|
||
|
||
<div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
|
||
{/* Auth slot */}
|
||
<div className="flex items-center">
|
||
{userPresent ? (
|
||
<Popover className="relative">
|
||
<PopoverButton className="flex items-center gap-x-1 text-sm font-semibold text-gray-900 dark:text-white">
|
||
<Avatar
|
||
src=""
|
||
initials={(() => {
|
||
if (!user) return 'U'
|
||
if (user.firstName || user.lastName) {
|
||
return ((user.firstName?.[0] || '') + (user.lastName?.[0] || '')).toUpperCase()
|
||
}
|
||
return user.email ? user.email[0].toUpperCase() : 'U'
|
||
})()}
|
||
className="size-8 bg-gradient-to-br from-indigo-500/40 to-indigo-600/60 text-white"
|
||
/>
|
||
<ChevronDownIcon aria-hidden="true" className="size-5 flex-none text-gray-500" />
|
||
</PopoverButton>
|
||
<PopoverPanel
|
||
transition
|
||
className="absolute left-0 top-full mt-2 w-64 rounded-md bg-white dark:bg-gray-900 ring-1 ring-black/10 dark:ring-white/10 shadow-lg data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-leave:duration-150"
|
||
>
|
||
<div className="p-4">
|
||
<div className="flex flex-col border-b border-gray-200 dark:border-white/10 pb-4 mb-4">
|
||
<div className="font-medium text-gray-900 dark:text-white">
|
||
{user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
|
||
</div>
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
{user?.email || 'user@example.com'}
|
||
</div>
|
||
</div>
|
||
{canSeeDashboard && (
|
||
<button
|
||
onClick={() => router.push('/dashboard')}
|
||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
|
||
>
|
||
<Bars3Icon className="size-5 text-gray-400" />
|
||
Dashboard
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => router.push('/profile')}
|
||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
|
||
>
|
||
<UserCircleIcon className="size-5 text-gray-400" />
|
||
Profile
|
||
</button>
|
||
{/* Logout removed from profile dropdown; still available in hamburger menu bottom */}
|
||
</div>
|
||
</PopoverPanel>
|
||
</Popover>
|
||
) : mounted ? (
|
||
<button
|
||
onClick={() => router.push('/login')}
|
||
className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||
>
|
||
Log in <span aria-hidden="true">→</span>
|
||
</button>
|
||
) : (
|
||
<div aria-hidden="true" className="w-20 h-8 rounded-md bg-gray-200 dark:bg-gray-700/70 animate-pulse" />
|
||
)}
|
||
</div>
|
||
|
||
{/* Desktop hamburger (right side, next to login/profile) */}
|
||
<button
|
||
type="button"
|
||
onClick={() => setMobileMenuOpen(open => !open)}
|
||
aria-expanded={mobileMenuOpen}
|
||
className="inline-flex items-center justify-center rounded-md p-2.5 text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
|
||
>
|
||
<span className="sr-only">
|
||
{mobileMenuOpen ? 'Close main menu' : 'Open main menu'}
|
||
</span>
|
||
<span className="relative flex h-6 w-6 items-center justify-center">
|
||
<Bars3Icon
|
||
aria-hidden="true"
|
||
className={`size-6 transition-all duration-300 ease-out ${
|
||
mobileMenuOpen
|
||
? 'opacity-0 -rotate-90 scale-75'
|
||
: 'opacity-100 rotate-0 scale-100'
|
||
}`}
|
||
/>
|
||
<XMarkIcon
|
||
aria-hidden="true"
|
||
className={`pointer-events-none absolute size-6 transition-all duration-300 ease-out ${
|
||
mobileMenuOpen
|
||
? 'opacity-100 rotate-0 scale-100'
|
||
: 'opacity-0 rotate-90 scale-75'
|
||
}`}
|
||
/>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Admin subheader (gold) - centered */}
|
||
{userPresent && isAdmin && (
|
||
<div
|
||
className="w-full border-t border-amber-700/40"
|
||
style={{ background: 'linear-gradient(90deg, #D4AF37 0%, #C99A2E 100%)' }}
|
||
>
|
||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div className="flex flex-wrap items-center justify-center gap-5 py-2">
|
||
<span className="text-xs font-semibold uppercase tracking-wide text-[#3B2C04]/80">
|
||
Admin Navigation
|
||
</span>
|
||
<button
|
||
onClick={() => { router.push('/admin') }}
|
||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||
>
|
||
Dashboard
|
||
</button>
|
||
<button
|
||
onClick={() => { router.push('/admin/user-verify') }}
|
||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||
>
|
||
User Verify
|
||
</button>
|
||
{/* Updated Management dropdown */}
|
||
<div ref={managementRef} className="relative">
|
||
<button
|
||
onClick={() => setAdminMgmtOpen(o => !o)}
|
||
aria-haspopup="true"
|
||
aria-expanded={adminMgmtOpen}
|
||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A] flex items-center gap-1"
|
||
>
|
||
Management
|
||
<ChevronDownIcon
|
||
className={`h-4 w-4 transition-transform ${adminMgmtOpen ? 'rotate-180' : ''}`}
|
||
/>
|
||
</button>
|
||
{adminMgmtOpen && (
|
||
<div
|
||
className="absolute left-1/2 -translate-x-1/2 mt-2 min-w-[15rem] rounded-md bg-white shadow-lg ring-1 ring-black/10 z-50"
|
||
role="menu"
|
||
>
|
||
<div className="py-2">
|
||
<button
|
||
onClick={() => { router.push('/admin/user-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
User Management
|
||
</button>
|
||
|
||
{DISPLAY_MATRIX && (
|
||
<button
|
||
onClick={() => { router.push('/admin/matrix-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Matrix Management
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => { router.push('/admin/contract-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Contract Management
|
||
</button>
|
||
|
||
{DISPLAY_ABONEMENTS && (
|
||
<>
|
||
<button
|
||
onClick={() => { router.push('/admin/subscriptions'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Coffee Management
|
||
</button>
|
||
<button
|
||
onClick={() => { router.push('/admin/finance-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Finance Management
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{DISPLAY_POOLS && (
|
||
<button
|
||
onClick={() => { router.push('/admin/pool-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Pool Management
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => { router.push('/admin/affiliate-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
Affiliate Management
|
||
</button>
|
||
|
||
{DISPLAY_NEWS && (
|
||
<button
|
||
onClick={() => { router.push('/admin/news-management'); setAdminMgmtOpen(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||
role="menuitem"
|
||
>
|
||
News Management
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Side drawer menu: mobile + desktop */}
|
||
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen}>
|
||
<Transition appear show={mobileMenuOpen}>
|
||
{/* Overlay: smoother, longer fade-out */}
|
||
<Transition.Child
|
||
enter="transition-opacity duration-400 ease-out"
|
||
enterFrom="opacity-0"
|
||
enterTo="opacity-100"
|
||
leave="transition-opacity duration-800 ease-out"
|
||
leaveFrom="opacity-100"
|
||
leaveTo="opacity-0"
|
||
>
|
||
<div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm" />
|
||
</Transition.Child>
|
||
|
||
{/* Sliding panel: smoother, longer close animation */}
|
||
<Transition.Child
|
||
enter="transform transition-all duration-500 ease-out"
|
||
enterFrom="translate-x-full opacity-0 scale-95"
|
||
enterTo="translate-x-0 opacity-100 scale-100"
|
||
leave="transform transition-all duration-800 ease-in-out"
|
||
leaveFrom="translate-x-0 opacity-100 scale-100"
|
||
leaveTo="translate-x-full opacity-0 scale-95"
|
||
>
|
||
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full sm:max-w-sm h-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl sm:ring-1 sm:ring-black/10 dark:sm:ring-gray-100/10 shadow-[0_0_40px_rgba(0,0,0,0.55)] flex flex-col">
|
||
{/* Header row */}
|
||
<div className="flex items-center justify-between px-1.5 pt-1.5 pb-2">
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="p-1.5 flex items-center gap-3"
|
||
>
|
||
<span className="sr-only">ProfitPlanet</span>
|
||
<Image
|
||
src="/images/logos/pp_logo_gold_transparent.png"
|
||
alt="ProfitPlanet Logo"
|
||
width={190}
|
||
height={60}
|
||
className="h-12 w-auto flex-shrink-0"
|
||
/>
|
||
<span className="text-xl font-bold tracking-tight text-[#D4AF37]">
|
||
Profit Planet
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setMobileMenuOpen(false)}
|
||
className="rounded-md p-2.5 text-gray-400 hover:text-gray-100 hover:bg-white/10 transition-transform duration-300 hover:scale-110"
|
||
>
|
||
<span className="sr-only">Close menu</span>
|
||
<XMarkIcon aria-hidden="true" className="size-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Scrollable content */}
|
||
<div className="mt-4 flex-1 overflow-y-auto overflow-x-hidden">
|
||
<div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
|
||
{!mounted ? (
|
||
// ...existing skeleton...
|
||
<div className="py-6 px-3">
|
||
<div className="h-28 w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse" />
|
||
</div>
|
||
) : user ? (
|
||
<>
|
||
{/* User info + basic nav */}
|
||
<div className="pt-6 space-y-2">
|
||
<div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
|
||
<div className="font-medium text-white">
|
||
{user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
|
||
</div>
|
||
<div className="text-sm text-gray-400">
|
||
{user?.email || 'user@example.com'}
|
||
</div>
|
||
</div>
|
||
{canSeeDashboard && (
|
||
<button
|
||
onClick={() => {
|
||
router.push('/dashboard')
|
||
setMobileMenuOpen(false)
|
||
}}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Dashboard
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => {
|
||
router.push('/profile')
|
||
setMobileMenuOpen(false)
|
||
}}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Profile
|
||
</button>
|
||
</div>
|
||
|
||
{/* Main navigation (info + links + referral + ADMIN LAST) */}
|
||
<div className="space-y-4 py-6 px-1">
|
||
{/* Information disclosure */}
|
||
<Disclosure as="div">
|
||
<DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
|
||
Information
|
||
<ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
|
||
</DisclosureButton>
|
||
<DisclosurePanel className="mt-2 space-y-1">
|
||
{informationItems.map(item => (
|
||
<DisclosureButton
|
||
key={item.name}
|
||
as="button"
|
||
onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg py-2 pl-6 pr-3 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
{item.name}
|
||
</DisclosureButton>
|
||
))}
|
||
</DisclosurePanel>
|
||
</Disclosure>
|
||
|
||
{/* Navigation Links */}
|
||
{navLinks.map((link) => (
|
||
<button
|
||
key={link.href}
|
||
onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
{link.name}
|
||
</button>
|
||
))}
|
||
|
||
{/* Referral / matrix / abonnements */}
|
||
{hasReferralPerm && (
|
||
<>
|
||
<button
|
||
onClick={() => { console.log('🧭 Header Mobile: navigate to /referral-management'); router.push('/referral-management'); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Referral Management
|
||
</button>
|
||
{DISPLAY_MATRIX && (
|
||
<button
|
||
onClick={() => { router.push('/personal-matrix'); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Personal Matrix
|
||
</button>
|
||
)}
|
||
{DISPLAY_ABONEMENTS && (
|
||
<button
|
||
onClick={() => { router.push('/coffee-abonnements'); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Coffee Abonnements
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Admin navigation – LAST, neutral glassy with pulsating hover */}
|
||
{isAdmin && (
|
||
<div className="group mt-2 rounded-2xl border border-white/15 bg-gradient-to-br from-white/5 via-white/10 to-white/5 bg-clip-padding backdrop-blur-md shadow-[0_18px_45px_rgba(0,0,0,0.45)] ring-1 ring-white/15 transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_22px_55px_rgba(0,0,0,0.6)]">
|
||
<div className="px-3 py-2.5 group-hover:animate-pulse">
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-200 mb-1.5">
|
||
Admin Navigation
|
||
</p>
|
||
<div className="h-px w-full bg-gradient-to-r from-transparent via-white/70 to-transparent opacity-80 mb-2 transition-opacity group-hover:opacity-100" />
|
||
<div className="grid grid-cols-1 gap-1.5 text-sm">
|
||
<button
|
||
onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Dashboard
|
||
</button>
|
||
<button
|
||
onClick={() => { router.push('/admin/user-verify'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
User Verify
|
||
</button>
|
||
<button
|
||
onClick={() => { router.push('/admin/user-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
User Management
|
||
</button>
|
||
{DISPLAY_MATRIX && (
|
||
<button
|
||
onClick={() => { router.push('/admin/matrix-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Matrix Management
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => { router.push('/admin/contract-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Contract Management
|
||
</button>
|
||
{DISPLAY_ABONEMENTS && (
|
||
<>
|
||
<button
|
||
onClick={() => { router.push('/admin/subscriptions'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Coffee Management
|
||
</button>
|
||
<button
|
||
onClick={() => { router.push('/admin/finance-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Finance Management
|
||
</button>
|
||
</>
|
||
)}
|
||
{DISPLAY_POOLS && (
|
||
<button
|
||
onClick={() => { router.push('/admin/pool-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Pool Management
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => { router.push('/admin/affiliate-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
Affiliate Management
|
||
</button>
|
||
{DISPLAY_NEWS && (
|
||
<button
|
||
onClick={() => { router.push('/admin/news-management'); setMobileMenuOpen(false); }}
|
||
className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
|
||
>
|
||
News Management
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
// logged-out drawer
|
||
<div className="py-6 space-y-4 px-1">
|
||
{/* Information disclosure */}
|
||
<Disclosure as="div">
|
||
<DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 textbase/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
|
||
Information
|
||
<ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
|
||
</DisclosureButton>
|
||
<DisclosurePanel className="mt-2 space-y-1">
|
||
{informationItems.map(item => (
|
||
<DisclosureButton
|
||
key={item.name}
|
||
as="button"
|
||
onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg py-2 pl-6 pr-3 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
{item.name}
|
||
</DisclosureButton>
|
||
))}
|
||
</DisclosurePanel>
|
||
</Disclosure>
|
||
{/* Navigation Links */}
|
||
{navLinks.map((link) => (
|
||
<button
|
||
key={link.href}
|
||
onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2 textbase/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
{link.name}
|
||
</button>
|
||
))}
|
||
<div className="px-3">
|
||
<button
|
||
onClick={() => { router.push('/login'); setMobileMenuOpen(false); }}
|
||
className="block rounded-lg px-3 py-2.5 textbase/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
|
||
>
|
||
Log in
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sticky bottom logout button with pulsating hover */}
|
||
{user && (
|
||
<div className="border-t border-gray-200/60 dark:border-white/10 px-4 py-3">
|
||
<button
|
||
onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
|
||
className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-500/90 hover:bg-red-600 text-white py-2.5 text-sm font-semibold shadow-md shadow-red-900/30 transition-transform transition-colors duration-200 hover:animate-pulse"
|
||
>
|
||
<ArrowRightOnRectangleIcon className="h-5 w-5" />
|
||
<span>Logout</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</DialogPanel>
|
||
</Transition.Child>
|
||
</Transition>
|
||
</Dialog>
|
||
</header>
|
||
)
|
||
} |