/** * @license * SPDX-License-Identifier: Apache-2.0 */ import { useState, useRef, useEffect, memo } from 'react'; import { Home, LogOut, PlusCircle, Database, LayoutDashboard, User, ShieldAlert, Sparkles, Layout, ClipboardList, Code, ChevronDown, Bell, Mail, MessageCircle, Check, CheckSquare, BellRing, Key, Menu, Cloud } from 'lucide-react'; import { User as UserType, AppNotification } from '../types'; interface NavbarProps { currentUser: UserType | null; activeTab: 'explore' | 'dashboard' | 'schema' | 'my-bookings' | 'users' | 'permissions' | 'profiling' | 'ci3-template' | 'operations' | 'ai-prediction' | 'superadmin' | 'cloud-storage'; setActiveTab: (tab: 'explore' | 'dashboard' | 'schema' | 'my-bookings' | 'users' | 'permissions' | 'profiling' | 'ci3-template' | 'operations' | 'ai-prediction' | 'superadmin' | 'cloud-storage') => void; onOpenAuth: () => void; onOpenAddProperty: () => void; onLogout: () => void; devMode: boolean; setDevMode: (val: boolean) => void; notifications?: AppNotification[]; onRefreshNotifications?: () => void; onToggleSidebar?: () => void; onChangePassword?: () => void; } export default memo(function Navbar({ currentUser, activeTab, setActiveTab, onOpenAuth, onOpenAddProperty, onLogout, devMode, setDevMode, notifications = [], onRefreshNotifications, onToggleSidebar, onChangePassword, }: NavbarProps) { const [isDevMenuOpen, setIsDevMenuOpen] = useState(false); const [isNotifOpen, setIsNotifOpen] = useState(false); const devMenuRef = useRef(null); const notifRef = useRef(null); useEffect(() => { function handleClickOutside(event: MouseEvent) { if (devMenuRef.current && !devMenuRef.current.contains(event.target as Node)) { setIsDevMenuOpen(false); } if (notifRef.current && !notifRef.current.contains(event.target as Node)) { setIsNotifOpen(false); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, []); const handleMarkAsRead = async (id: string) => { try { const res = await fetch(`/api/notifications/${id}/read`, { method: 'POST' }); if (res.ok && onRefreshNotifications) { onRefreshNotifications(); } } catch (e) { console.error("Gagal menandai dibaca:", e); } }; const handleMarkAllAsRead = async () => { if (!currentUser) return; try { const res = await fetch('/api/notifications/read-all', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: currentUser.id }) }); if (res.ok && onRefreshNotifications) { onRefreshNotifications(); } } catch (e) { console.error("Gagal menandai semua dibaca:", e); } }; return ( ); });