feat: navbar menu order, notifications, user profile, help view and module activities
Build and Deploy (Gitea) / build-and-deploy (push) Failing after 30s Details

This commit is contained in:
Sidney Gomes 2026-07-20 20:45:44 -03:00
parent fddc06db4d
commit 2ef1416d8d
9 changed files with 485 additions and 28 deletions

View File

@ -1212,6 +1212,65 @@ app.get('/api/certificates', authenticateToken, (req: AuthenticatedRequest, res:
res.json(myCerts);
});
// --- NOTIFICATIONS ---
app.get('/api/notifications', authenticateToken, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
const myNotifications = db.notifications.filter(n => n.userId === req.user!.id || n.userId === 'ALL');
res.json(myNotifications.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()));
});
app.put('/api/notifications/:id/read', authenticateToken, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
const notification = db.notifications.find(n => n.id === req.params.id);
if (notification && (notification.userId === req.user!.id || notification.userId === 'ALL')) {
notification.read = true;
saveDb(db);
}
res.json({ success: true });
});
// --- HELP DESK ---
app.get('/api/help', authenticateToken, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
res.json({ helpText: db.settings?.helpText || '' });
});
app.put('/api/admin/help', authenticateToken, requireAdmin, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
if (!db.settings) db.settings = {};
db.settings.helpText = req.body.helpText;
saveDb(db);
res.json({ success: true });
});
// --- MODULE ACTIVITIES (ADMIN) ---
app.get('/api/admin/modules/:moduleId/activity', authenticateToken, requireAdmin, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
const activity = db.activities.find(a => a.moduleId === req.params.moduleId);
res.json(activity || { moduleId: req.params.moduleId, questions: [] });
});
app.put('/api/admin/modules/:moduleId/activity', authenticateToken, requireAdmin, (req: AuthenticatedRequest, res: Response) => {
const db = loadDb();
const { moduleId } = req.params;
const { questions } = req.body;
let activity = db.activities.find(a => a.moduleId === moduleId);
if (!activity) {
activity = {
id: `act_${Math.random().toString(36).substring(2, 9)}`,
moduleId,
questions: [],
createdAt: new Date().toISOString()
};
db.activities.push(activity);
}
activity.questions = questions;
saveDb(db);
res.json(activity);
});
// --- VITE MIDDLEWARE / SPA FALLBACK ---
async function startServer() {
if (process.env.NODE_ENV !== 'production') {

View File

@ -10,6 +10,8 @@ import CourseView from './components/CourseView';
import SubscriptionView from './components/SubscriptionView';
import CourseUnlockModal from './components/CourseUnlockModal';
import CertificatesTab from './components/CertificatesTab';
import ProfileView from './components/ProfileView';
import HelpView from './components/HelpView';
import { User as UserType, Course as CourseType, SubscriptionStatus } from './types';
export default function App() {
@ -261,6 +263,22 @@ export default function App() {
/>
)}
{/* RENDER VIEW: PROFILE */}
{activeView === 'profile' && (
<ProfileView
user={user as any}
onBack={() => setView('home')}
/>
)}
{/* RENDER VIEW: HELP */}
{activeView === 'help' && (
<HelpView
token={token}
onBack={() => setView('home')}
/>
)}
</main>
{/* Unlock Modal */}

View File

@ -62,6 +62,8 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
title: '', videoUrl: '', videoType: 'youtube' as 'youtube' | 'direct', order: 1, content: ''
});
const [managingActivityForModule, setManagingActivityForModule] = useState<string | null>(null);
const [showActivityModal, setShowActivityModal] = useState(false);
const [activeModuleForActivity, setActiveModuleForActivity] = useState<string | null>(null);
const [activityQuestions, setActivityQuestions] = useState<{question: string, options: string[], correctIndex: number}[]>([]);
@ -297,6 +299,49 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
document.getElementById('admin-content-top')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 50);
};
const handleManageActivity = async (moduleId: string) => {
setActiveModuleForActivity(moduleId);
setActivityQuestions([]);
try {
const res = await fetch(`/api/admin/modules/${moduleId}/activity`, {
headers: { 'Authorization': `Bearer ${token}` }
});
if (res.ok) {
const data = await res.json();
setActivityQuestions(data.questions || []);
}
} catch (err) {
console.error('Error fetching activity:', err);
}
setShowActivityModal(true);
};
const handleSaveActivity = async () => {
if (!activeModuleForActivity) return;
try {
const res = await fetch(`/api/admin/modules/${activeModuleForActivity}/activity`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ questions: activityQuestions })
});
if (res.ok) {
alert('Atividade salva com sucesso!');
setShowActivityModal(false);
} else {
alert('Erro ao salvar atividade.');
}
} catch (err) {
console.error('Error saving activity:', err);
alert('Erro ao salvar atividade.');
}
};
const handleDeleteLesson = async (lessonId: string) => {
if (!window.confirm('Excluir esta aula?')) return;

View File

@ -764,6 +764,17 @@ export default function AdminDashboard({ token }: AdminDashboardProps) {
/>
<p className="text-[10px] text-zinc-500">Dias grátis que um novo aluno ganha ao se cadastrar.</p>
</div>
<div className="space-y-1">
<label className="text-xs text-zinc-400 font-bold">Texto de Ajuda (Página de Ajuda)</label>
<textarea
value={settings.helpText || ''}
onChange={(e) => setSettings({...settings, helpText: e.target.value})}
className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-sm text-white focus:outline-none focus:border-primary transition-colors min-h-[120px]"
placeholder="Escreva aqui as instruções de ajuda para os alunos..."
/>
<p className="text-[10px] text-zinc-500">O texto que aparece para o aluno em Meus Dados -> Ajuda.</p>
</div>
</div>
{/* Integração Asaas */}

View File

@ -0,0 +1,62 @@
import React, { useState, useEffect } from 'react';
import { ArrowLeft, HelpCircle } from 'lucide-react';
interface HelpViewProps {
token: string | null;
onBack: () => void;
}
export default function HelpView({ token, onBack }: HelpViewProps) {
const [helpText, setHelpText] = useState<string>('');
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchHelpText();
}, []);
const fetchHelpText = async () => {
setIsLoading(true);
try {
const res = await fetch('/api/help', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (res.ok) {
const data = await res.json();
setHelpText(data.helpText);
}
} catch (err) {
console.error('Error fetching help text:', err);
} finally {
setIsLoading(false);
}
};
return (
<div className="space-y-6 max-w-4xl mx-auto">
<button
onClick={onBack}
className="flex items-center space-x-2 text-zinc-400 hover:text-white transition-colors text-sm font-bold"
>
<ArrowLeft className="w-4 h-4" />
<span>Voltar</span>
</button>
<div className="glass-card rounded-2xl overflow-hidden shadow-2xl border border-white/10 p-8 min-h-[50vh]">
<div className="flex items-center space-x-3 mb-8 border-b border-white/10 pb-4">
<HelpCircle className="w-8 h-8 text-[#E50914]" />
<h2 className="text-2xl font-bold text-white">Central de Ajuda</h2>
</div>
{isLoading ? (
<div className="flex justify-center items-center py-12">
<div className="w-8 h-8 border-4 border-[#E50914] border-t-transparent rounded-full animate-spin" />
</div>
) : (
<div className="text-zinc-300 space-y-4 whitespace-pre-wrap leading-relaxed text-sm md:text-base">
{helpText || 'Nenhuma informação de ajuda disponível no momento.'}
</div>
)}
</div>
</div>
);
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import { Play, LogOut, Shield, User, GraduationCap, DollarSign } from 'lucide-react';
import React, { useState, useEffect, useRef } from 'react';
import { Play, LogOut, Shield, User, GraduationCap, DollarSign, Bell, ChevronDown, Check, HelpCircle } from 'lucide-react';
import { SubscriptionStatus } from '../types';
interface NavbarProps {
@ -15,6 +15,67 @@ interface NavbarProps {
}
export default function Navbar({ user, activeView, setView, onLogout }: NavbarProps) {
const [showNotifications, setShowNotifications] = useState(false);
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [notifications, setNotifications] = useState<any[]>([]);
const notifRef = useRef<HTMLDivElement>(null);
const profileRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Close menus on outside click
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)) {
setShowProfileMenu(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
useEffect(() => {
if (user) {
fetchNotifications();
}
}, [user]);
const fetchNotifications = async () => {
try {
// In a real app we would pass the token or it would be in cookies
// Assuming server uses some auth, for demo we might just fetch
const token = localStorage.getItem('token');
if (!token) return;
const res = await fetch('/api/notifications', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (res.ok) {
const data = await res.json();
setNotifications(data);
}
} catch (err) {
console.error(err);
}
};
const markAsRead = async (id: string) => {
try {
const token = localStorage.getItem('token');
if (!token) return;
await fetch(`/api/notifications/${id}/read`, {
method: 'PUT',
headers: { 'Authorization': `Bearer ${token}` }
});
setNotifications(notifications.map(n => n.id === id ? { ...n, read: true } : n));
} catch (err) {
console.error(err);
}
};
const unreadCount = notifications.filter(n => !n.read).length;
if (!user) return null;
const getStatusColor = (status: SubscriptionStatus) => {
@ -61,20 +122,20 @@ export default function Navbar({ user, activeView, setView, onLogout }: NavbarPr
>
Cursos
</button>
<button
onClick={() => setView('certificates')}
className={`font-medium transition-colors hover:text-[#E50914] flex items-center space-x-1 ${activeView === 'certificates' ? 'text-white' : 'text-zinc-400'}`}
>
<GraduationCap className="w-4 h-4" />
<span>Meu Certificado</span>
</button>
<button
onClick={() => setView('subscription')}
className={`font-medium transition-colors hover:text-[#E50914] flex items-center space-x-1 ${activeView === 'subscription' ? 'text-white' : 'text-zinc-400'}`}
className={`font-medium transition-colors hover:text-[#E50914] flex items-center space-x-1 whitespace-nowrap ${activeView === 'subscription' ? 'text-white' : 'text-zinc-400'}`}
>
<DollarSign className="w-4 h-4" />
<span>Minha Assinatura</span>
</button>
<button
onClick={() => setView('certificates')}
className={`font-medium transition-colors hover:text-[#E50914] flex items-center space-x-1 whitespace-nowrap ${activeView === 'certificates' ? 'text-white' : 'text-zinc-400'}`}
>
<GraduationCap className="w-4 h-4" />
<span>Meu Certificado</span>
</button>
</div>
</div>
@ -88,28 +149,95 @@ export default function Navbar({ user, activeView, setView, onLogout }: NavbarPr
{getStatusLabel(user.subscriptionStatus)}
</span>
{/* User Info & Logout */}
{/* User Info & Actions */}
<div className="flex items-center space-x-3 border-l border-zinc-800 pl-4">
{/* Notifications */}
<div className="relative" ref={notifRef}>
<button
onClick={() => setShowNotifications(!showNotifications)}
className="relative w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-300 hover:bg-zinc-700 transition-colors"
>
<Bell className="w-4 h-4" />
{unreadCount > 0 && (
<span className="absolute -top-1 -right-1 w-3.5 h-3.5 bg-[#E50914] text-white text-[8px] font-bold flex items-center justify-center rounded-full border-2 border-black">
{unreadCount}
</span>
)}
</button>
{showNotifications && (
<div className="absolute right-0 mt-2 w-72 bg-zinc-900 border border-white/10 rounded-xl shadow-2xl overflow-hidden flex flex-col z-50">
<div className="p-3 border-b border-white/10 bg-black/40">
<h4 className="text-xs font-bold text-white uppercase tracking-wider">Notificações</h4>
</div>
<div className="max-h-64 overflow-y-auto">
{notifications.length === 0 ? (
<div className="p-4 text-center text-zinc-500 text-xs">Nenhuma notificação no momento.</div>
) : (
notifications.map(n => (
<div
key={n.id}
className={`p-3 border-b border-white/5 text-xs transition-colors ${n.read ? 'bg-transparent text-zinc-400' : 'bg-white/5 text-white'}`}
>
<p>{n.message}</p>
<div className="flex items-center justify-between mt-2">
<span className="text-[10px] text-zinc-500">{new Date(n.createdAt).toLocaleDateString('pt-BR')}</span>
{!n.read && (
<button onClick={() => markAsRead(n.id)} className="text-[10px] text-[#E50914] hover:text-white flex items-center gap-1">
<Check className="w-3 h-3" /> Lida
</button>
)}
</div>
</div>
))
)}
</div>
</div>
)}
</div>
<div className="text-right hidden lg:block">
<p className="text-xs font-medium text-white max-w-[120px] truncate">{user.name}</p>
<p className="text-[10px] text-zinc-500 uppercase font-semibold">{user.role === 'admin' ? 'Administrador' : 'Aluno'}</p>
</div>
<button
onClick={() => setView('subscription')}
title="Minha Conta"
className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-300 hover:bg-zinc-700 transition-colors"
>
<User className="w-4 h-4" />
</button>
{/* Profile Dropdown */}
<div className="relative" ref={profileRef}>
<button
onClick={() => setShowProfileMenu(!showProfileMenu)}
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-300 hover:bg-zinc-700 transition-colors border border-white/10"
>
<User className="w-5 h-5" />
</button>
<button
onClick={onLogout}
title="Sair da Conta"
className="w-8 h-8 rounded-full bg-zinc-800/50 flex items-center justify-center text-zinc-400 hover:bg-red-950 hover:text-red-400 transition-all"
>
<LogOut className="w-4 h-4" />
</button>
{showProfileMenu && (
<div className="absolute right-0 mt-2 w-48 bg-zinc-900 border border-white/10 rounded-xl shadow-2xl overflow-hidden py-1 z-50">
<button
onClick={() => { setView('profile'); setShowProfileMenu(false); }}
className="w-full px-4 py-2 text-left flex items-center space-x-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors"
>
<User className="w-4 h-4" />
<span>Meus dados</span>
</button>
<button
onClick={() => { setView('help'); setShowProfileMenu(false); }}
className="w-full px-4 py-2 text-left flex items-center space-x-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors"
>
<HelpCircle className="w-4 h-4" />
<span>Ajuda</span>
</button>
<div className="border-t border-white/10 my-1"></div>
<button
onClick={() => { onLogout(); setShowProfileMenu(false); }}
className="w-full px-4 py-2 text-left flex items-center space-x-2 text-sm text-red-400 hover:bg-red-500/10 transition-colors"
>
<LogOut className="w-4 h-4" />
<span>Sair</span>
</button>
</div>
)}
</div>
</div>
</div>
</nav>

View File

@ -0,0 +1,113 @@
import React from 'react';
import { User as UserIcon, Shield, CreditCard, Mail, Phone, Calendar, ArrowLeft } from 'lucide-react';
import { User } from '../types';
interface ProfileViewProps {
user: User;
onBack: () => void;
}
export default function ProfileView({ user, onBack }: ProfileViewProps) {
const getStatusColor = (status: string) => {
switch (status) {
case 'ACTIVE': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/50';
case 'TRIAL': return 'bg-amber-500/20 text-amber-400 border-amber-500/50';
case 'OVERDUE': return 'bg-red-500/20 text-red-400 border-red-500/50';
case 'CANCELED': return 'bg-zinc-800 text-zinc-400 border-zinc-700';
default: return 'bg-zinc-800 text-white border-zinc-700';
}
};
const getStatusLabel = (status: string) => {
switch (status) {
case 'ACTIVE': return 'Assinatura Ativa';
case 'TRIAL': return 'Período de Teste';
case 'OVERDUE': return 'Pagamento Pendente';
case 'CANCELED': return 'Assinatura Cancelada';
default: return status;
}
};
return (
<div className="space-y-6 max-w-4xl mx-auto">
<button
onClick={onBack}
className="flex items-center space-x-2 text-zinc-400 hover:text-white transition-colors text-sm font-bold"
>
<ArrowLeft className="w-4 h-4" />
<span>Voltar</span>
</button>
<div className="glass-card rounded-2xl overflow-hidden shadow-2xl border border-white/10 p-8">
<div className="flex flex-col md:flex-row items-start gap-8">
{/* Avatar Area */}
<div className="flex flex-col items-center space-y-4">
<div className="w-32 h-32 bg-zinc-800 rounded-full flex items-center justify-center border-4 border-[#E50914]/20">
<UserIcon className="w-16 h-16 text-zinc-400" />
</div>
<div className={`px-3 py-1 rounded-full text-xs font-bold border uppercase tracking-wider ${getStatusColor(user.subscriptionStatus)}`}>
{getStatusLabel(user.subscriptionStatus)}
</div>
</div>
{/* User Info */}
<div className="flex-1 space-y-6 w-full">
<div>
<h2 className="text-2xl font-bold text-white">{user.name}</h2>
<p className="text-zinc-400 text-sm">{user.role === 'admin' ? 'Administrador do Sistema' : 'Aluno'}</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
<Mail className="w-5 h-5 text-zinc-500" />
<div>
<p className="text-[10px] uppercase font-bold text-zinc-500">Email</p>
<p className="text-sm font-medium text-white">{user.email}</p>
</div>
</div>
<div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
<Phone className="w-5 h-5 text-zinc-500" />
<div>
<p className="text-[10px] uppercase font-bold text-zinc-500">WhatsApp</p>
<p className="text-sm font-medium text-white">{user.whatsapp || 'Não informado'}</p>
</div>
</div>
<div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
<Calendar className="w-5 h-5 text-zinc-500" />
<div>
<p className="text-[10px] uppercase font-bold text-zinc-500">Data de Nascimento</p>
<p className="text-sm font-medium text-white">
{user.birthDate ? new Date(user.birthDate).toLocaleDateString('pt-BR') : 'Não informado'}
</p>
</div>
</div>
<div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
<CreditCard className="w-5 h-5 text-zinc-500" />
<div>
<p className="text-[10px] uppercase font-bold text-zinc-500">Membro desde</p>
<p className="text-sm font-medium text-white">
{new Date(user.createdAt).toLocaleDateString('pt-BR')}
</p>
</div>
</div>
</div>
{user.role === 'admin' && (
<div className="mt-4 p-4 bg-[#E50914]/10 border border-[#E50914]/30 rounded-xl flex items-start space-x-3">
<Shield className="w-5 h-5 text-[#E50914] mt-0.5" />
<div>
<p className="text-sm font-bold text-[#E50914]">Acesso Administrativo</p>
<p className="text-xs text-zinc-300 mt-1">Você tem permissão total para gerenciar cursos, alunos e assinaturas.</p>
</div>
</div>
)}
</div>
</div>
</div>
</div>
);
}

View File

@ -17,6 +17,7 @@ export interface DatabaseSchema {
activities: any[];
moduleGrades: any[];
certificates: any[];
notifications: any[];
settings: any; // SystemSettings
}
@ -32,12 +33,14 @@ const DEFAULT_DB: DatabaseSchema = {
activities: [],
moduleGrades: [],
certificates: [],
notifications: [],
settings: {
trialDurationDays: 7,
asaasEnvironment: 'sandbox',
asaasApiKey: '',
asaasWebhookUrl: '',
asaasWebhookSecret: ''
asaasWebhookSecret: '',
helpText: '# Central de Ajuda\n\nAqui você encontra todas as informações sobre os cursos e funcionamento da plataforma.'
}
};
@ -413,12 +416,14 @@ function createInitialDb(): DatabaseSchema {
activities: [],
moduleGrades: [],
certificates: [],
notifications: [],
settings: {
trialDurationDays: 7,
asaasEnvironment: 'sandbox',
asaasApiKey: '',
asaasWebhookUrl: '',
asaasWebhookSecret: ''
asaasWebhookSecret: '',
helpText: '# Central de Ajuda\n\nAqui você encontra todas as informações sobre os cursos e funcionamento da plataforma.'
}
};
}

View File

@ -22,6 +22,7 @@ export interface SystemSettings {
asaasApiKey: string;
asaasWebhookUrl: string;
asaasWebhookSecret: string;
helpText: string;
}
export interface Course {
@ -98,10 +99,25 @@ export interface AdminDashboardStats {
canceledSubscribers: number;
}
export interface Question {
id: string;
text: string;
options: string[];
correctOptionIndex: number;
}
export interface ModuleActivity {
id: string;
moduleId: string;
questions: any[];
questions: Question[];
createdAt: string;
}
export interface Notification {
id: string;
userId: string;
message: string;
read: boolean;
createdAt: string;
}