/** * Admin Panel Component * Management interface for Telegram users and broadcasts. */ function Admin() { const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [password, setPassword] = React.useState(''); const [activeTab, setActiveTab] = React.useState('users'); const [users, setUsers] = React.useState([]); const [stats, setStats] = React.useState(null); const [loading, setLoading] = React.useState(false); const [broadcastMessage, setBroadcastMessage] = React.useState(''); const [broadcastResult, setBroadcastResult] = React.useState(null); const [testNotification, setTestNotification] = React.useState(''); const [testResult, setTestResult] = React.useState(null); const [lastUpdate, setLastUpdate] = React.useState(null); const API_BASE = '/api'; // Check if already authenticated React.useEffect(() => { const savedPassword = sessionStorage.getItem('admin_password'); if (savedPassword) { setPassword(savedPassword); setIsAuthenticated(true); fetchData(savedPassword); } }, []); // Auto-refresh when tab becomes visible React.useEffect(() => { const handleVisibilityChange = () => { if (!document.hidden && password) { fetchData(password, false); } }; document.addEventListener('visibilitychange', handleVisibilityChange); return () => document.removeEventListener('visibilitychange', handleVisibilityChange); }, [password]); const fetchData = async (pwd, showLoading = true) => { if (showLoading) setLoading(true); try { const [statsRes, usersRes] = await Promise.all([ fetch(`${API_BASE}/admin/stats`, { headers: { 'X-Admin-Password': pwd } }), fetch(`${API_BASE}/admin/users`, { headers: { 'X-Admin-Password': pwd } }) ]); const statsData = await statsRes.json(); const usersData = await usersRes.json(); if (statsData.status === 'ok') { setStats(statsData.stats); } if (usersData.status === 'ok') { setUsers(usersData.users); } setLastUpdate(new Date()); } catch (err) { console.error('Failed to fetch admin data:', err); } finally { if (showLoading) setLoading(false); } }; const refreshData = () => { if (password) { fetchData(password, true); } }; const handleLogin = (pwd) => { setPassword(pwd); setIsAuthenticated(true); fetchData(pwd); }; const handleLogout = () => { sessionStorage.removeItem('admin_password'); setIsAuthenticated(false); setPassword(''); setUsers([]); setStats(null); }; const toggleUserStatus = async (telegramId) => { try { const res = await fetch(`${API_BASE}/admin/users/${telegramId}/toggle`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-Admin-Password': password }, body: JSON.stringify({ password }) }); const data = await res.json(); if (data.status === 'ok') { // Update local state setUsers(users.map(u => u.telegram_id === telegramId ? { ...u, is_active: data.user.is_active } : u )); } } catch (err) { console.error('Failed to toggle user:', err); } }; const sendBroadcast = async () => { if (!broadcastMessage.trim()) return; setBroadcastResult(null); try { const res = await fetch(`${API_BASE}/admin/broadcast`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Admin-Password': password }, body: JSON.stringify({ message: broadcastMessage, password }) }); const data = await res.json(); setBroadcastResult(data); if (data.status === 'ok') { setBroadcastMessage(''); } } catch (err) { setBroadcastResult({ status: 'error', message: 'Network error' }); } }; const sendTestNotification = async () => { if (!testNotification.trim()) return; setTestResult(null); try { const res = await fetch(`${API_BASE}/admin/test-notify`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Admin-Password': password }, body: JSON.stringify({ message: testNotification, password }) }); const data = await res.json(); setTestResult(data); if (data.status === 'ok') { setTestNotification(''); } } catch (err) { setTestResult({ status: 'error', message: 'Network error' }); } }; const formatNumber = (num) => { if (num == null) return '-'; return new Intl.NumberFormat('en-US').format(num); }; const formatDate = (dateStr) => { if (!dateStr) return '-'; const date = new Date(dateStr); return date.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); }; if (!isAuthenticated) { return window.location.href = '/'} />; } return (
{/* Header */}

Admin Panel - SectorPulse

Management Console

{/* Last update time */} {lastUpdate && (
Last updated: {lastUpdate.toLocaleTimeString()}
)} {/* Stats Cards */} {stats && (
Total Users
{formatNumber(stats.totalUsers)}
With Capital
{formatNumber(stats.usersWithCapital)}
Active
{formatNumber(stats.activeUsers)}
24h Notifications
{formatNumber(stats.recentNotifications)}
)} {/* Tabs */}
{/* Content */} {loading ? (
Loading...
) : ( <> {/* Users List Tab */} {activeTab === 'users' && (
{users.map(user => ( ))}
ID Telegram TG Name Email Name Capital Status Last Notified Bound Created Action
{user.id} {user.telegram_id} {user.telegram_name || '-'} {user.user_email ? ( {user.user_email} ) : ( - )} {user.user_name || '-'} {user.base_capital ? `$${formatNumber(user.base_capital)}` : '-'} {user.is_active ? ( Active ) : ( Disabled )} {formatDate(user.last_notified)} {user.user_id ? ( Bound ) : ( Unbound )} {formatDate(user.created_at)}
{users.length === 0 && (
No users found
)}
)} {/* Broadcast Tab */} {activeTab === 'broadcast' && (

Send Broadcast Message

Send a message to all users who have notifications enabled and capital configured.