'use client'; import { useEffect, useState } from 'react'; interface Config { logo: string; warna_utama: string; nama_website: string; favicon: string; } interface User { userName: string; userBalance: number; } interface SidebarItem { id: number; nama: string; href: string; icon: string; session: number; kelompok: string; } interface HeaderData { config: Config; isLogin: boolean; user: User; sidebar: SidebarItem[]; icon_path: string; path_sidebar_icon: string; } export default function Header() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false); const [loginMessage, setLoginMessage] = useState(''); const [loginLoading, setLoginLoading] = useState(false); // Pastikan sidebar tertutup saat mount useEffect(() => { setSidebarOpen(false); }, []); useEffect(() => { fetch('/api/info/header') .then((res) => res.json()) .then((result) => { if (result.success) setData(result.data); setLoading(false); }) .catch(() => setLoading(false)); }, []); const toggleSidebar = () => setSidebarOpen(!sidebarOpen); const toggleModal = () => setModalOpen(!modalOpen); const toggleDropdown = () => setDropdownOpen(!dropdownOpen); const handleSidebarLinkClick = () => { setSidebarOpen(false); }; const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setLoginLoading(true); setLoginMessage(''); const formData = new FormData(e.currentTarget); const username = formData.get('username') as string; const password = formData.get('password') as string; try { const res = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }), }); const result = await res.json(); if (result.success) { window.location.href = result.redirect || '/'; } else { setLoginMessage(result.message || 'Login gagal'); } } catch { setLoginMessage('Terjadi kesalahan'); } setLoginLoading(false); }; if (loading) { return (

); } if (!data) { return

Gagal memuat header

; } const { config, isLogin, user, sidebar, icon_path, path_sidebar_icon } = data; const { logo, warna_utama, nama_website, favicon } = config; const userName = user.userName; const userBalance = user.userBalance.toLocaleString('id-ID'); const filtered = sidebar.filter( (item) => item.session === 0 || (item.session === 2 && isLogin) ); const groups: Record = {}; filtered.forEach((item) => { if (!groups[item.kelompok]) groups[item.kelompok] = []; groups[item.kelompok].push(item); }); return ( <> {/* ===== SIDEBAR ===== */}

{logo ? (