299 lines
13 KiB
TypeScript
299 lines
13 KiB
TypeScript
'use client';
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { LayoutDashboard, Users, CreditCard, Package, Settings, Shield, TrendingUp, Bell, LogOut, User, CheckCircle, AlertCircle } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import AdminDashboard from '@/components/AdminDashboard';
|
|
import Tenants from '@/components/Tenants';
|
|
import Plans from '@/components/Plans';
|
|
import Payments from '@/components/Payments';
|
|
import AdminSettings from '@/components/AdminSettings';
|
|
import ToastContainer from '@/components/Toast';
|
|
|
|
const navItems = [
|
|
{ section: 'Visão Geral' },
|
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ section: 'Gestão' },
|
|
{ id: 'tenants', label: 'Assinantes', icon: Users },
|
|
{ id: 'plans', label: 'Planos', icon: Package },
|
|
{ id: 'payments', label: 'Pagamentos', icon: CreditCard },
|
|
{ section: 'Sistema' },
|
|
{ id: 'settings', label: 'Configurações', icon: Settings },
|
|
];
|
|
|
|
const pages: Record<string, { title: string; subtitle: string }> = {
|
|
dashboard: { title: 'Dashboard', subtitle: 'Visão geral das assinaturas' },
|
|
tenants: { title: 'Assinantes', subtitle: 'Gerenciar estabelecimentos' },
|
|
plans: { title: 'Planos', subtitle: 'Gerenciar planos de assinatura' },
|
|
payments: { title: 'Pagamentos', subtitle: 'Histórico de cobranças' },
|
|
settings: { title: 'Configurações', subtitle: 'Configurações do sistema' },
|
|
};
|
|
|
|
export default function AdminPage() {
|
|
const router = useRouter();
|
|
const [currentPage, setCurrentPage] = useState('dashboard');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [showNotifications, setShowNotifications] = useState(false);
|
|
const [showProfile, setShowProfile] = useState(false);
|
|
const [notifications, setNotifications] = useState<any[]>([]);
|
|
|
|
const [adminName, setAdminName] = useState('Super Admin');
|
|
const [adminEmail, setAdminEmail] = useState('admin@agendapro.com');
|
|
|
|
const notifRef = useRef<HTMLDivElement>(null);
|
|
const profileRef = useRef<HTMLDivElement>(null);
|
|
|
|
const fetchNotifications = async () => {
|
|
try {
|
|
const res = await fetch('/api/notifications');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setNotifications(data);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching admin notifications:', err);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Auth Check
|
|
const token = localStorage.getItem('agendapro_admin_token');
|
|
if (!token) {
|
|
router.push('/login');
|
|
} else {
|
|
setAdminName(localStorage.getItem('agendapro_admin_name') || 'Super Admin');
|
|
setAdminEmail(localStorage.getItem('agendapro_admin_email') || 'admin@agendapro.com');
|
|
setIsLoading(false);
|
|
}
|
|
|
|
fetchNotifications();
|
|
|
|
const interval = setInterval(fetchNotifications, 15000); // Auto-refresh every 15s
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (notifRef.current && !notifRef.current.contains(e.target as Node)) setShowNotifications(false);
|
|
if (profileRef.current && !profileRef.current.contains(e.target as Node)) setShowProfile(false);
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
clearInterval(interval);
|
|
};
|
|
}, [router]);
|
|
|
|
const playNotificationSound = () => {
|
|
try {
|
|
const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
|
|
const oscillator = audioCtx.createOscillator();
|
|
const gainNode = audioCtx.createGain();
|
|
|
|
oscillator.type = 'sine';
|
|
oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); // A5
|
|
oscillator.frequency.exponentialRampToValueAtTime(1760, audioCtx.currentTime + 0.1); // A6
|
|
|
|
gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
|
|
|
|
oscillator.connect(gainNode);
|
|
gainNode.connect(audioCtx.destination);
|
|
|
|
oscillator.start();
|
|
oscillator.stop(audioCtx.currentTime + 0.3);
|
|
} catch (e) {
|
|
console.log('Audio not supported or blocked');
|
|
}
|
|
};
|
|
|
|
const handleNotificationClick = () => {
|
|
if (!showNotifications) {
|
|
const unreadCount = notifications.filter(n => !n.read).length;
|
|
if (unreadCount > 0) {
|
|
playNotificationSound();
|
|
}
|
|
}
|
|
setShowNotifications(!showNotifications);
|
|
setShowProfile(false);
|
|
};
|
|
|
|
const handleProfileClick = () => {
|
|
setShowProfile(!showProfile);
|
|
setShowNotifications(false);
|
|
};
|
|
|
|
const markAllAsRead = async () => {
|
|
setNotifications(notifications.map(n => ({ ...n, read: true })));
|
|
try {
|
|
await fetch('/api/notifications', { method: 'PUT' });
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
const clearAllNotifications = async () => {
|
|
setNotifications([]);
|
|
try {
|
|
await fetch('/api/notifications', { method: 'DELETE' });
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
const logout = () => {
|
|
localStorage.removeItem('agendapro_admin_token');
|
|
localStorage.removeItem('agendapro_admin_email');
|
|
localStorage.removeItem('agendapro_admin_name');
|
|
router.push('/login');
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Carregando painel...</div>;
|
|
}
|
|
|
|
const unreadCount = notifications.filter(n => !n.read).length;
|
|
const adminInitials = adminName.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
|
|
|
const renderPage = () => {
|
|
switch (currentPage) {
|
|
case 'dashboard': return <AdminDashboard onNavigate={setCurrentPage} />;
|
|
case 'tenants': return <Tenants />;
|
|
case 'plans': return <Plans />;
|
|
case 'payments': return <Payments />;
|
|
case 'settings': return <AdminSettings />;
|
|
default: return <AdminDashboard onNavigate={setCurrentPage} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="app-layout">
|
|
<aside className="sidebar">
|
|
<div className="sidebar-header">
|
|
<div className="sidebar-logo">
|
|
<div className="logo-icon"><Shield size={20} /></div>
|
|
<div>
|
|
<div className="logo-text">AgendaPRO</div>
|
|
<div className="logo-sub">ADMIN PANEL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav className="sidebar-nav">
|
|
{navItems.map((item, i) => {
|
|
if ('section' in item && item.section) return <div key={`s-${i}`} className="nav-section-title">{item.section}</div>;
|
|
if ('id' in item && item.id) {
|
|
const Icon = item.icon!;
|
|
return (
|
|
<button key={item.id} className={`nav-item ${currentPage === item.id ? 'active' : ''}`}
|
|
onClick={() => setCurrentPage(item.id!)}>
|
|
<Icon size={20} /> {item.label}
|
|
</button>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</nav>
|
|
<div style={{ padding: '16px', borderTop: '1px solid var(--border-color)' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px', borderRadius: 'var(--radius-sm)', background: 'var(--bg-card)' }}>
|
|
<div className="avatar" style={{ width: 32, height: 32, fontSize: 12 }}>{adminInitials}</div>
|
|
<div style={{ flex: 1, overflow: 'hidden' }}>
|
|
<div style={{ fontSize: '13px', fontWeight: 600, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{adminName}</div>
|
|
<div style={{ fontSize: '11px', color: 'var(--text-muted)', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{adminEmail}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="main-content">
|
|
<header className="topbar">
|
|
<div>
|
|
<h1>{pages[currentPage]?.title}</h1>
|
|
<p>{pages[currentPage]?.subtitle}</p>
|
|
</div>
|
|
<div className="flex-gap">
|
|
<div style={{ position: 'relative' }} ref={notifRef}>
|
|
<button className="btn-ghost btn-icon" style={{ position: 'relative' }} onClick={handleNotificationClick}>
|
|
<Bell size={20} />
|
|
{unreadCount > 0 && (
|
|
<span style={{ position: 'absolute', top: 4, right: 4, width: 10, height: 10, borderRadius: '50%', background: 'var(--danger)', border: '2px solid var(--bg-card)' }} />
|
|
)}
|
|
</button>
|
|
|
|
{showNotifications && (
|
|
<div className="card" style={{
|
|
position: 'absolute', top: '100%', right: 0, marginTop: '8px', width: '320px',
|
|
padding: 0, zIndex: 100, boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-color)',
|
|
animation: 'slideUp 0.2s ease-out forwards'
|
|
}}>
|
|
<div className="flex-between" style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-color)' }}>
|
|
<h3 style={{ fontSize: '14px', fontWeight: 600 }}>Notificações</h3>
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
{unreadCount > 0 && (
|
|
<button className="btn-ghost" style={{ fontSize: '12px', padding: '4px 8px' }} onClick={markAllAsRead}>
|
|
Marcar lidas
|
|
</button>
|
|
)}
|
|
{notifications.length > 0 && (
|
|
<button className="btn-ghost" style={{ fontSize: '12px', padding: '4px 8px', color: 'var(--danger)' }} onClick={clearAllNotifications}>
|
|
Limpar
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
|
{notifications.map(n => (
|
|
<div key={n.id} style={{
|
|
padding: '12px 16px', borderBottom: '1px solid var(--border-color)',
|
|
background: n.read ? 'transparent' : 'rgba(59, 130, 246, 0.05)',
|
|
display: 'flex', gap: '12px', alignItems: 'flex-start'
|
|
}}>
|
|
<div style={{
|
|
width: '32px', height: '32px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
|
|
background: n.type === 'success' ? 'rgba(34, 197, 94, 0.1)' : n.type === 'warning' ? 'rgba(245, 158, 11, 0.1)' : 'rgba(59, 130, 246, 0.1)',
|
|
color: n.type === 'success' ? 'var(--success)' : n.type === 'warning' ? 'var(--warning)' : 'var(--primary)'
|
|
}}>
|
|
{n.type === 'success' ? <CheckCircle size={16} /> : n.type === 'warning' ? <AlertCircle size={16} /> : <Bell size={16} />}
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: '13px', fontWeight: n.read ? 500 : 600, color: 'var(--text-primary)' }}>{n.title}</div>
|
|
<div style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px', lineHeight: 1.4 }}>{n.message}</div>
|
|
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '4px' }}>{n.time}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ position: 'relative' }} ref={profileRef}>
|
|
<div className="avatar" style={{ width: 36, height: 36, fontSize: 13, cursor: 'pointer', transition: 'transform 0.2s' }} onClick={handleProfileClick}>{adminInitials}</div>
|
|
|
|
{showProfile && (
|
|
<div className="card" style={{
|
|
position: 'absolute', top: '100%', right: 0, marginTop: '8px', width: '240px',
|
|
padding: '8px', zIndex: 100, boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-color)',
|
|
animation: 'slideUp 0.2s ease-out forwards'
|
|
}}>
|
|
<div style={{ padding: '12px', borderBottom: '1px solid var(--border-color)', marginBottom: '8px' }}>
|
|
<div style={{ fontWeight: 600, fontSize: '14px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{adminName}</div>
|
|
<div style={{ color: 'var(--text-muted)', fontSize: '12px', marginTop: '2px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{adminEmail}</div>
|
|
</div>
|
|
|
|
<button className="btn-ghost" style={{ width: '100%', justifyContent: 'flex-start', padding: '10px 12px', fontSize: '13px' }}>
|
|
<User size={16} style={{ marginRight: '8px' }} /> Meu Perfil
|
|
</button>
|
|
<button className="btn-ghost" onClick={logout} style={{ width: '100%', justifyContent: 'flex-start', padding: '10px 12px', fontSize: '13px', color: 'var(--danger)' }}>
|
|
<LogOut size={16} style={{ marginRight: '8px' }} /> Sair do Painel
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div className="page-content fade-in" key={currentPage}>
|
|
{renderPage()}
|
|
</div>
|
|
</main>
|
|
<ToastContainer />
|
|
</div>
|
|
);
|
|
}
|