);
}
// Get badge count based on badge type
const getBadgeCount = () => {
if (item.badge === 'notifications') return unreadNotifications;
return 0;
};
const badgeCount = getBadgeCount();
return (
{item.icon}
{!collapsed && (
<>
{t(item.titleKey)}
{badgeCount > 0 && (
{badgeCount > 99 ? '99+' : badgeCount}
)}
)}
);
}
function AdminLayoutContent({
children,
}: {
children: React.ReactNode;
}) {
const { data: session, status } = useSession();
const pathname = usePathname();
const router = useRouter();
const [sidebarOpen, setSidebarOpen] = useState(false); // Default FALSE untuk mobile
const [mounted, setMounted] = useState(false);
const [pendingRegistrations, setPendingRegistrations] = useState(0);
const [pendingManualPayments, setPendingManualPayments] = useState(0);
const [unreadNotifications, setUnreadNotifications] = useState(0);
const { addToast, confirm } = useToast();
// Persist lastChecked to sessionStorage so navigating between admin pages
// doesn't re-show already-toasted notifications
const adminNotifLastCheckedRef = useRef(
(typeof window !== 'undefined' && sessionStorage.getItem('adminNotifLastChecked'))
? sessionStorage.getItem('adminNotifLastChecked')!
: new Date().toISOString()
);
// Track which notification IDs have already been shown as toasts (per browser session)
// This prevents the same notification from ever re-appearing as a toast
const toastedNotifIdsRef = useRef>(
new Set(
typeof window !== 'undefined' && sessionStorage.getItem('adminToastedNotifIds')
? JSON.parse(sessionStorage.getItem('adminToastedNotifIds')!)
: []
)
);
// Stable ref so pollNotifications useEffect doesn't need addToast as dependency
const addToastRef = useRef(addToast);
useEffect(() => { addToastRef.current = addToast; }, [addToast]);
const [showUserMenu, setShowUserMenu] = useState(false);
const [now, setNow] = useState(null);
// Live clock
useEffect(() => {
setNow(new Date());
const tick = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(tick);
}, []);
// Bridge global showSuccess/showError/showConfirm helpers to CyberToast
useEffect(() => {
registerGlobalToast(addToast);
registerGlobalConfirm(confirm);
}, [addToast, confirm]);
const [userPermissions, setUserPermissions] = useState([]);
const [showIdleWarning, setShowIdleWarning] = useState(false);
const [idleCountdown, setIdleCountdown] = useState(60);
const { company, setCompany } = useAppStore();
const { t } = useTranslation();
const { isDark, toggleTheme } = useTheme();
const isLoginPage = pathname === '/admin/login';
// Set sidebar state based on screen size
useEffect(() => {
const handleResize = () => {
// Open sidebar by default on desktop (lg breakpoint = 1024px)
if (window.innerWidth >= 1024) {
setSidebarOpen(true);
} else {
setSidebarOpen(false);
}
};
// Set initial state
handleResize();
// Listen for resize events
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
// Idle timeout - 30 minutes with 1 minute warning
const handleIdleWarning = useCallback(() => {
setShowIdleWarning(true);
setIdleCountdown(60);
}, []);
const handleIdleTimeout = useCallback(() => {
setShowIdleWarning(false);
}, []);
const { extendSession } = useIdleTimeout({
timeout: 30 * 60 * 1000, // 30 minutes
warningTime: 60 * 1000, // 1 minute warning
enabled: !isLoginPage && status === 'authenticated',
onWarning: handleIdleWarning,
onTimeout: handleIdleTimeout,
});
// Countdown timer for idle warning
useEffect(() => {
if (!showIdleWarning) return;
const interval = setInterval(() => {
setIdleCountdown(prev => {
if (prev <= 1) {
clearInterval(interval);
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(interval);
}, [showIdleWarning]);
// Handle stay logged in
const handleStayLoggedIn = useCallback(() => {
setShowIdleWarning(false);
setIdleCountdown(60);
extendSession();
}, [extendSession]);
// Handle logout - use redirect: false to avoid NEXTAUTH_URL issues
const handleLogout = useCallback(async () => {
// Log logout activity before signing out
if (session?.user) {
try {
await fetch('/api/auth/logout-log', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
userId: (session.user as any).id,
username: (session.user as any).username,
role: (session.user as any).role,
}),
});
} catch (error) {
console.error('Failed to log logout:', error);
}
}
await signOut({ redirect: false });
// Manual redirect to current origin
window.location.href = `${window.location.origin}/admin/login`;
}, [session]);
useEffect(() => {
setMounted(true);
}, []);
// Delayed unauthenticated redirect — avoids spurious full-page reload during
// the brief window after signIn() where the outer SessionProvider hasn't yet
// received the session broadcast and status is momentarily 'unauthenticated'.
const unauthRedirectTimerRef = useRef | null>(null);
useEffect(() => {
if (status === 'unauthenticated' && !isLoginPage) {
unauthRedirectTimerRef.current = setTimeout(() => {
router.push('/admin/login');
}, 600);
} else {
if (unauthRedirectTimerRef.current) {
clearTimeout(unauthRedirectTimerRef.current);
unauthRedirectTimerRef.current = null;
}
}
return () => {
if (unauthRedirectTimerRef.current) {
clearTimeout(unauthRedirectTimerRef.current);
unauthRedirectTimerRef.current = null;
}
};
}, [status, isLoginPage, router]);
// Load user permissions when session is available
useEffect(() => {
if (status !== 'authenticated' || !session?.user) return;
const userId = (session.user as any).id;
if (userId) {
fetch(`/api/admin/users/${userId}/permissions`)
.then((res) => res.json())
.then((data) => {
if (data.success) {
setUserPermissions(data.permissions);
}
})
.catch(console.error);
}
}, [session, status]);
// Load company data
useEffect(() => {
fetch('/api/company')
.then((res) => res.json())
.then((data) => {
if (data.name) {
setCompany({
name: data.name,
email: data.email,
phone: data.phone,
address: data.address,
baseUrl: data.baseUrl || window.location.origin,
adminPhone: data.phone,
logo: data.logo || '',
});
}
})
.catch(console.error);
}, [setCompany]);
// Load pending registrations
useEffect(() => {
if (status !== 'authenticated') return;
const loadPending = () => {
fetch('/api/admin/registrations?status=PENDING')
.then((res) => res.json())
.then((data) => {
if (data.stats) setPendingRegistrations(data.stats.pending || 0);
})
.catch(console.error);
};
loadPending();
const interval = setInterval(loadPending, 30000);
return () => clearInterval(interval);
}, [status]);
// Load pending manual payments
useEffect(() => {
if (status !== 'authenticated') return;
const loadPendingPayments = () => {
fetch('/api/manual-payments?status=PENDING')
.then((res) => res.json())
.then((data) => {
if (data.success) setPendingManualPayments(data.data?.length || 0);
})
.catch(console.error);
};
loadPendingPayments();
const interval = setInterval(loadPendingPayments, 30000);
return () => clearInterval(interval);
}, [status]);
// Load unread notifications + show toasts for new ones
useEffect(() => {
if (status !== 'authenticated') return;
const pollNotifications = async () => {
try {
// Get unread count (badge)
const countRes = await fetch('/api/notifications?limit=1');
const countData = await countRes.json();
if (countData.success) setUnreadNotifications(countData.unreadCount || 0);
// Get new notifications since last check (for toasts)
const since = encodeURIComponent(adminNotifLastCheckedRef.current);
const newRes = await fetch(`/api/notifications?since=${since}&limit=20`);
const newData = await newRes.json();
if (newData.success && Array.isArray(newData.notifications) && newData.notifications.length > 0) {
adminNotifLastCheckedRef.current = new Date().toISOString();
sessionStorage.setItem('adminNotifLastChecked', adminNotifLastCheckedRef.current);
for (const notif of newData.notifications) {
// Skip if this notification was already toasted in this session
if (toastedNotifIdsRef.current.has(notif.id)) continue;
toastedNotifIdsRef.current.add(notif.id);
// Persist toasted IDs (keep last 200 to avoid unbounded growth)
const idsArray = Array.from(toastedNotifIdsRef.current).slice(-200);
sessionStorage.setItem('adminToastedNotifIds', JSON.stringify(idsArray));
const toastType =
notif.type === 'new_ticket' ? 'info' :
notif.type === 'manual_payment_submitted' ? 'info' :
notif.type === 'agent_deposit_request' ? 'info' :
notif.type === 'agent_deposit_approved' ? 'success' :
notif.type === 'agent_deposit_rejected' ? 'warning' :
notif.type === 'payment_received' ? 'success' :
notif.type === 'new_registration' ? 'info' :
notif.type === 'user_expired' ? 'warning' :
notif.type === 'system_alert' ? 'error' : 'info';
addToastRef.current({ type: toastType, title: notif.title, description: notif.message, duration: 8000 });
}
}
} catch {
// silently ignore
}
};
pollNotifications();
const interval = setInterval(pollNotifications, 30000);
return () => clearInterval(interval);
// addToast intentionally excluded — we use addToastRef to prevent re-runs
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [status]);
// Show login page without layout
if (isLoginPage) {
return <>{children};
}
// Show loading while checking session
if (status === 'loading' || !mounted) {
return (
{/* Background effects */}
{t('common.loading')}
);
}
// Redirect to login if not authenticated (actual redirect handled by useEffect above)
if (status === 'unauthenticated' && !isLoginPage) {
return (
{/* Background effects */}
{t('common.redirectingToLogin')}
);
}
return (
{/* Cyberpunk Background Effects */}
{/* Primary glow orbs */}
{/* Scan lines overlay — dark mode only */}
{/* Grid pattern — dark mode only */}
{/* Mobile overlay - tap or swipe to close */}
{sidebarOpen && (
setSidebarOpen(false)}
onTouchStart={(e) => {
const touch = e.touches[0];
(e.currentTarget as any).touchStartX = touch.clientX;
}}
onTouchEnd={(e) => {
const touchStartX = (e.currentTarget as any).touchStartX;
const touchEndX = e.changedTouches[0].clientX;
if (touchStartX - touchEndX > 50) {
setSidebarOpen(false);
}
}}
/>
)}
{/* Sidebar - optimized for mobile */}
{/* Main */}
{/* Header - optimized for mobile */}
{/* Top neon line — dark mode only */}
{/* Mobile title - show on small screens */}
{company.name}
{/* Search - hidden on mobile */}
{/* Bottom focus line */}
{/* Actions - compact on mobile */}
{/* Live datetime - hidden on mobile */}
{now && (