import React, { useState } from 'react';
import { UserPlus, FileText, Calculator, List, BarChart3, Download, X, Check,
AlertCircle } from 'lucide-react';
export default function SistemaAlunos() {
const [alunos, setAlunos] = useState({});
const [telaAtiva, setTelaAtiva] = useState('menu');
const [relatorioVisualizado, setRelatorioVisualizado] = useState(null);
const [nomeInput, setNomeInput] = useState('');
const [serieInput, setSerieInput] = useState('');
const [turmaInput, setTurmaInput] = useState('');
const [notasTemp, setNotasTemp] = useState({ T1: ['', '', ''], T2: ['', '', ''],
T3: ['', '', ''] });
const [alunoSelecionado, setAlunoSelecionado] = useState('');
const [mensagem, setMensagem] = useState({ texto: '', tipo: '' });
const mostrarMensagem = (texto, tipo = 'info') => {
setMensagem({ texto, tipo });
setTimeout(() => setMensagem({ texto: '', tipo: '' }), 3000);
};
const cadastrarAluno = () => {
const nome = [Link]();
const serie = [Link]();
const turma = [Link]();
if (!nome) {
mostrarMensagem('Erro: Nome não pode ser vazio!', 'error');
return;
}
if (!serie) {
mostrarMensagem('Erro: Série não pode ser vazia!', 'error');
return;
}
if (!turma) {
mostrarMensagem('Erro: Turma não pode ser vazia!', 'error');
return;
}
if (alunos[nome]) {
mostrarMensagem('Erro: Aluno já cadastrado!', 'error');
return;
}
setAlunos({
...alunos,
[nome]: {
serie,
turma,
T1: [], T2: [], T3: [],
media_T1: 0, media_T2: 0, media_T3: 0,
media_final: 0, status: 'Pendente'
}
});
mostrarMensagem(`Aluno ${nome} cadastrado com sucesso!`, 'success');
setNomeInput('');
setSerieInput('');
setTurmaInput('');
};
const validarNota = (valor) => {
const num = parseFloat(valor);
return !isNaN(num) && num >= 0 && num <= 10;
};
const limitarNota = (valor) => {
if (valor === '') return '';
let num = parseFloat(valor);
if (isNaN(num) || num < 0) return '0';
if (num > 10) return '10';
return valor;
};
const inserirNotas = () => {
if (!alunoSelecionado) {
mostrarMensagem('Selecione um aluno!', 'error');
return;
}
const todasValidas = ['T1', 'T2', 'T3'].every(etapa =>
notasTemp[etapa].every(n => n !== '' && validarNota(n))
);
if (!todasValidas) {
mostrarMensagem('Preencha todas as notas entre 0 e 10!', 'error');
return;
}
const novasNotas = {
T1: [Link](n => parseFloat(n)),
T2: [Link](n => parseFloat(n)),
T3: [Link](n => parseFloat(n))
};
const alunoAtualizado = { ...alunos[alunoSelecionado], ...novasNotas };
calcularMediaAluno(alunoAtualizado);
setAlunos({ ...alunos, [alunoSelecionado]: alunoAtualizado });
mostrarMensagem('Notas cadastradas e médias calculadas automaticamente!',
'success');
setNotasTemp({ T1: ['', '', ''], T2: ['', '', ''], T3: ['', '', ''] });
setAlunoSelecionado('');
setTelaAtiva('menu');
};
const calcularMediaAluno = (dados) => {
dados.media_T1 = [Link]((a, b) => a + b, 0) / 3;
dados.media_T2 = [Link]((a, b) => a + b, 0) / 3;
dados.media_T3 = [Link]((a, b) => a + b, 0) / 3;
dados.media_final = (dados.media_T1 + dados.media_T2 + dados.media_T3) / 3;
if (dados.media_final >= 7) {
[Link] = 'Aprovado';
} else if (dados.media_final >= 1.7 && dados.media_final <= 6.9) {
[Link] = 'Prova Final';
} else {
[Link] = 'Reprovado';
}
};
const calcularTodasMedias = () => {
let calculados = 0;
const alunosAtualizados = { ...alunos };
[Link](alunosAtualizados).forEach(nome => {
const aluno = alunosAtualizados[nome];
if ([Link] && [Link] && [Link]) {
calcularMediaAluno(aluno);
calculados++;
}
});
if (calculados === 0) {
mostrarMensagem('Nenhum aluno com notas completas!', 'error');
return;
}
setAlunos(alunosAtualizados);
mostrarMensagem(`Médias calculadas para ${calculados} aluno(s)!`, 'success');
};
const gerarHTMLRelatorio = (nome, dados) => {
const corStatus = [Link] === 'Aprovado' ? '#f97316' :
[Link] === 'Prova Final' ? '#3b82f6' :
[Link] === 'Reprovado' ? '#ef4444' : '#6b7280';
return `<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relatório - ${nome}</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f97316 0%, #3b82f6 100%);
padding: 40px 20px;
margin: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #f97316 0%, #3b82f6 100%);
padding: 40px;
text-align: center;
color: white;
}
.header h1 {
margin: 0;
font-size: 32px;
font-weight: bold;
}
.header p {
margin: 10px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
.content {
padding: 40px;
}
.student-info {
background: linear-gradient(135deg, #fed7aa 0%, #bfdbfe 100%);
padding: 25px;
border-radius: 15px;
margin-bottom: 30px;
border: 3px solid #f97316;
}
.student-info h2 {
margin: 0 0 15px 0;
color: #1f2937;
font-size: 24px;
}
.info-row {
display: flex;
justify-content: space-between;
margin: 8px 0;
color: #4b5563;
}
.info-label {
font-weight: 600;
}
.grades-section {
margin: 30px 0;
}
.grade-card {
background: linear-gradient(135deg, #fff7ed 0%, #eff6ff 100%);
border-left: 6px solid #f97316;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.grade-card h3 {
margin: 0 0 10px 0;
color: #f97316;
font-size: 18px;
font-weight: bold;
}
.grade-detail {
display: flex;
justify-content: space-between;
margin: 5px 0;
color: #6b7280;
}
.final-result {
background: linear-gradient(135deg, ${corStatus}15 0%, ${corStatus}25
100%);
border: 4px solid ${corStatus};
padding: 30px;
border-radius: 15px;
text-align: center;
margin-top: 30px;
}
.final-result h3 {
margin: 0 0 10px 0;
color: #1f2937;
font-size: 20px;
}
.final-grade {
font-size: 48px;
font-weight: bold;
color: ${corStatus};
margin: 10px 0;
}
.status-badge {
display: inline-block;
background: ${corStatus};
color: white;
padding: 12px 30px;
border-radius: 50px;
font-weight: bold;
font-size: 18px;
margin-top: 10px;
}
.footer {
background: linear-gradient(135deg, #fed7aa 0%, #bfdbfe 100%);
padding: 25px;
text-align: center;
color: #1f2937;
font-size: 14px;
border-top: 3px solid #3b82f6;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 Relatório Acadêmico</h1>
<p>Colégio Evolução - Sistema de Gerenciamento</p>
</div>
<div class="content">
<div class="student-info">
<h2>${nome}</h2>
<div class="info-row">
<span class="info-label">📚 Série:</span>
<span>${[Link]}</span>
</div>
<div class="info-row">
<span class="info-label">🎓 Turma:</span>
<span>${[Link]}</span>
</div>
</div>
<div class="grades-section">
<div class="grade-card">
<h3>T1 - Primeira Avaliação</h3>
<div class="grade-detail">
<span>Notas:</span>
<span>${[Link] ? [Link](', ') : 'Não
cadastradas'}</span>
</div>
<div class="grade-detail">
<span><strong>Média:</strong></span>
<span><strong>${dados.media_T1.toFixed(2)}</strong></span>
</div>
</div>
<div class="grade-card">
<h3>T2 - Segunda Avaliação</h3>
<div class="grade-detail">
<span>Notas:</span>
<span>${[Link] ? [Link](', ') : 'Não
cadastradas'}</span>
</div>
<div class="grade-detail">
<span><strong>Média:</strong></span>
<span><strong>${dados.media_T2.toFixed(2)}</strong></span>
</div>
</div>
<div class="grade-card">
<h3>T3 - Terceira Avaliação</h3>
<div class="grade-detail">
<span>Notas:</span>
<span>${[Link] ? [Link](', ') : 'Não
cadastradas'}</span>
</div>
<div class="grade-detail">
<span><strong>Média:</strong></span>
<span><strong>${dados.media_T3.toFixed(2)}</strong></span>
</div>
</div>
</div>
<div class="final-result">
<h3>Resultado Final</h3>
<div class="final-grade">${dados.media_final.toFixed(2)}</div>
<div class="status-badge">${[Link]}</div>
</div>
</div>
<div class="footer">
<p><strong>Relatório gerado automaticamente pelo Colégio
Evolução</strong></p>
<p>Data: ${new Date().toLocaleDateString('pt-BR')}</p>
</div>
</div>
</body>
</html>`;
};
const salvarRelatorio = () => {
if ([Link](alunos).length === 0) {
mostrarMensagem('Nenhum aluno cadastrado!', 'error');
return;
}
let salvos = 0;
const novosRelatorios = [];
[Link](alunos).forEach(([nome, dados]) => {
const htmlContent = gerarHTMLRelatorio(nome, dados);
// Salvar no banco de dados
[Link]({
id: [Link]() + salvos,
nome,
serie: [Link],
turma: [Link],
status: [Link],
media: dados.media_final,
htmlContent,
dataGeracao: new Date().toLocaleDateString('pt-BR'),
horaGeracao: new Date().toLocaleTimeString('pt-BR')
});
// Download do arquivo
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = `trabalho_gxb_${[Link](/\s+/g, '_')}.html`;
[Link]();
[Link](url);
salvos++;
});
setRelatoriosSalvos([...relatoriosSalvos, ...novosRelatorios]);
mostrarMensagem(`${salvos} relatório(s) baixado(s) e salvos no banco!`,
'success');
};
const enviarRelatorios = () => {
let enviados = 0;
const novosRelatorios = [];
[Link](alunos).forEach(([nome, dados]) => {
const htmlContent = gerarHTMLRelatorio(nome, dados);
// Salvar no banco de dados
[Link]({
id: [Link]() + enviados,
nome,
serie: [Link],
turma: [Link],
status: [Link],
media: dados.media_final,
htmlContent,
dataGeracao: new Date().toLocaleDateString('pt-BR'),
horaGeracao: new Date().toLocaleTimeString('pt-BR')
});
// Download do arquivo
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = `trabalho_gxb_${[Link](/\s+/g, '_')}.html`;
[Link]();
[Link](url);
enviados++;
});
setRelatoriosSalvos([...relatoriosSalvos, ...novosRelatorios]);
mostrarMensagem(`${enviados} relatório(s) baixado(s) e salvos no banco!`,
'success');
setTelaAtiva('menu');
};
const getEstatisticas = () => {
const aprovados = [Link](alunos).filter(a => [Link] ===
'Aprovado').length;
const provaFinal = [Link](alunos).filter(a => [Link] === 'Prova
Final').length;
const reprovados = [Link](alunos).filter(a => [Link] ===
'Reprovado').length;
const pendentes = [Link](alunos).filter(a => [Link] ===
'Pendente').length;
return { aprovados, provaFinal, reprovados, pendentes };
};
const getCorStatus = (status) => {
switch(status) {
case 'Aprovado': return 'bg-orange-100 text-orange-700 border-orange-300';
case 'Prova Final': return 'bg-blue-100 text-blue-700 border-blue-300';
case 'Reprovado': return 'bg-red-100 text-red-700 border-red-300';
default: return 'bg-gray-100 text-gray-700 border-gray-300';
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-orange-500 via-orange-400
to-blue-500 p-4 md:p-8 relative overflow-hidden">
<div className="absolute top-0 left-0 w-96 h-96 bg-orange-300 rounded-full
mix-blend-multiply filter blur-3xl opacity-40 animate-pulse"></div>
<div className="absolute top-0 right-0 w-96 h-96 bg-blue-300 rounded-full
mix-blend-multiply filter blur-3xl opacity-40 animate-pulse"
style={{animationDelay: '1s'}}></div>
<div className="absolute bottom-0 left-1/2 w-96 h-96 bg-orange-400 rounded-
full mix-blend-multiply filter blur-3xl opacity-40 animate-pulse"
style={{animationDelay: '2s'}}></div>
<div className="max-w-6xl mx-auto relative z-10">
<div className="text-center mb-12">
<div className="flex items-center justify-center gap-4 mb-4">
<div className="w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-
600 rounded-2xl flex items-center justify-center shadow-2xl transform hover:rotate-
12 transition-transform duration-300 border-4 border-white">
<span className="text-white font-black text-4xl">E</span>
</div>
<h1 className="text-6xl md:text-7xl font-black text-white drop-shadow-
2xl">
Colégio Evolução
</h1>
<div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600
rounded-2xl flex items-center justify-center shadow-2xl transform hover:-rotate-12
transition-transform duration-300 border-4 border-white">
<span className="text-white font-black text-4xl">🎓</span>
</div>
</div>
<div className="bg-white/90 backdrop-blur-md rounded-full px-8 py-3
inline-block border-4 border-white shadow-2xl">
<p className="text-transparent bg-clip-text bg-gradient-to-r from-
orange-600 to-blue-600 text-xl font-black">
✨ Sistema de Gerenciamento de Alunos ✨
</p>
</div>
</div>
{[Link] && (
<div className={`fixed top-6 right-6 z-50 px-8 py-5 rounded-2xl shadow-
2xl backdrop-blur-md flex items-center gap-4 border-4 ${
[Link] === 'error' ? 'bg-red-500 text-white border-red-300' :
[Link] === 'success' ? 'bg-green-500 text-white border-green-
300' :
'bg-blue-500 text-white border-blue-300'
}`}>
{[Link] === 'error' && <X className="w-7 h-7" />}
{[Link] === 'success' && <Check className="w-7 h-7" />}
{[Link] === 'info' && <AlertCircle className="w-7 h-7" />}
<span className="font-black text-lg">{[Link]}</span>
</div>
)}
{telaAtiva === 'menu' && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{ icon: UserPlus, label: 'Cadastrar Aluno', tela: 'cadastrar', color:
'from-orange-500 to-orange-600', emoji: '👤' },
{ icon: FileText, label: 'Inserir Notas', tela: 'notas', color:
'from-blue-500 to-blue-600', emoji: '📝' },
{ icon: List, label: 'Listar Alunos', tela: 'listar', color: 'from-
blue-600 to-orange-500', emoji: '📋' },
{ icon: BarChart3, label: 'Estatísticas', tela: 'estatisticas',
color: 'from-orange-500 to-blue-600', emoji: '📊' },
{ icon: FileText, label: 'Gerar Relatório', tela: 'selecionar-
relatorio', color: 'from-purple-500 to-pink-600', emoji: '📄' }
].map((item, idx) => (
<button
key={idx}
onClick={[Link] || (() => setTelaAtiva([Link]))}
className="group relative bg-white p-10 rounded-3xl shadow-2xl
hover:shadow-orange-500/50 transition-all duration-300 transform hover:scale-105
border-4 border-white overflow-hidden"
>
<div className={`absolute inset-0 bg-gradient-to-br ${[Link]}
opacity-10 group-hover:opacity-20 transition-opacity duration-300`}></div>
<div className="absolute top-2 right-2 text-6xl opacity-10 group-
hover:opacity-20 transition-opacity">{[Link]}</div>
<div className="relative flex flex-col items-center gap-6">
<div className={`p-6 rounded-2xl bg-gradient-to-br ${[Link]}
shadow-2xl transition-transform duration-300`}>
<[Link] className="w-12 h-12 text-white" />
</div>
<span className="font-black text-2xl text-gray-
800">{[Link]}</span>
<span className="text-4xl">{[Link]}</span>
</div>
</button>
))}
</div>
)}
{telaAtiva === 'cadastrar' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-orange-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-orange-
600 to-blue-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">👤</span> Cadastrar Novo Aluno
</h2>
<div className="space-y-5">
<div>
<label className="block text-sm font-black text-orange-700 mb-2
flex items-center gap-2">
<span className="text-xl">📝</span> Nome Completo
</label>
<input
type="text"
value={nomeInput}
onChange={(e) => setNomeInput([Link])}
placeholder="Digite o nome do aluno"
className="w-full p-4 border-4 border-orange-300 rounded-2xl
focus:border-orange-500 focus:ring-4 focus:ring-orange-200 transition-all outline-
none font-bold shadow-lg"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-black text-orange-700 mb-2
flex items-center gap-2">
<span className="text-xl">📚</span> Série
</label>
<input
type="text"
value={serieInput}
onChange={(e) => setSerieInput([Link])}
placeholder="Ex: 9º ano, 1º EM"
className="w-full p-4 border-4 border-orange-300 rounded-2xl
focus:border-orange-500 focus:ring-4 focus:ring-orange-200 transition-all outline-
none font-bold shadow-lg"
/>
</div>
<div>
<label className="block text-sm font-black text-blue-700 mb-2
flex items-center gap-2">
<span className="text-xl">🎓</span> Turma
</label>
<input
type="text"
value={turmaInput}
onChange={(e) => setTurmaInput([Link])}
placeholder="Ex: A, B, 101"
className="w-full p-4 border-4 border-blue-300 rounded-2xl
focus:border-blue-500 focus:ring-4 focus:ring-blue-200 transition-all outline-none
font-bold shadow-lg"
onKeyPress={(e) => [Link] === 'Enter' && cadastrarAluno()}
/>
</div>
</div>
</div>
<div className="flex gap-4 mt-8">
<button
onClick={cadastrarAluno}
className="flex-1 bg-gradient-to-r from-orange-500 to-blue-500
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl hover:shadow-
orange-500/50 transition-all transform hover:scale-105 border-4 border-white"
>
✨ Cadastrar Aluno
</button>
<button
onClick={() => setTelaAtiva('menu')}
className="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-
white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all transform
hover:scale-105 border-4 border-white"
>
← Voltar
</button>
</div>
</div>
)}
{telaAtiva === 'notas' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-blue-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-blue-600
to-orange-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">📝</span> Inserir Notas
</h2>
<select
value={alunoSelecionado}
onChange={(e) => setAlunoSelecionado([Link])}
className="w-full p-5 border-4 border-blue-300 rounded-2xl mb-8
focus:border-blue-500 focus:ring-4 focus:ring-blue-200 transition-all outline-none
font-black text-lg shadow-lg bg-white"
>
<option value="">🎯 Selecione um aluno</option>
{[Link](alunos).map(([nome, dados]) => (
<option key={nome} value={nome}>👤 {nome} - {[Link]}
({[Link]})</option>
))}
</select>
{alunoSelecionado && (
<>
<div className="space-y-6">
{['T1', 'T2', 'T3'].map((etapa) => (
<div key={etapa} className="p-6 bg-gradient-to-r from-orange-50
to-blue-50 rounded-2xl border-4 border-orange-300 shadow-lg">
<h3 className="font-black text-2xl mb-4 text-orange-700 flex
items-center gap-2">
<span className="text-3xl">📊</span> {etapa}
</h3>
<div className="grid grid-cols-3 gap-4">
{[0, 1, 2].map(i => (
<div key={i}>
<label className="block text-xs font-black text-blue-
700 mb-2">⭐ Nota {i + 1}</label>
<input
type="number"
step="0.1"
min="0"
max="10"
value={notasTemp[etapa][i]}
onChange={(e) => {
const novas = { ...notasTemp };
novas[etapa][i] = limitarNota([Link]);
setNotasTemp(novas);
}}
onBlur={(e) => {
const novas = { ...notasTemp };
if ([Link] !== '') {
let num = parseFloat([Link]);
if (num < 0) num = 0;
if (num > 10) num = 10;
novas[etapa][i] = [Link]();
setNotasTemp(novas);
}
}}
placeholder="0.0"
className="w-full p-4 border-4 border-blue-300
rounded-xl focus:border-orange-500 focus:ring-4 focus:ring-orange-200 transition-
all outline-none text-center font-black text-xl shadow-lg"
/>
</div>
))}
</div>
</div>
))}
</div>
<div className="flex gap-4 mt-8">
<button
onClick={inserirNotas}
className="flex-1 bg-gradient-to-r from-blue-500 to-orange-500
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl hover:shadow-blue-
500/50 transition-all transform hover:scale-105 border-4 border-white"
>
💾 Salvar Notas
</button>
<button
onClick={() => setTelaAtiva('menu')}
className="flex-1 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar
</button>
</div>
</>
)}
<button
onClick={() => setTelaAtiva('menu')}
className="w-full mt-8 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar ao Menu
</button>
</div>
)}
{telaAtiva === 'listar' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-orange-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-orange-
600 to-blue-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">📋</span> Lista de Alunos
</h2>
{[Link](alunos).length === 0 ? (
<div className="text-center py-16">
<div className="w-32 h-32 bg-gradient-to-br from-orange-300 to-
blue-300 rounded-full flex items-center justify-center mx-auto mb-6 border-4
border-white shadow-2xl">
<List className="w-16 h-16 text-white" />
</div>
<p className="text-gray-600 text-2xl font-black">Nenhum aluno
cadastrado ainda</p>
</div>
) : (
<div className="space-y-6">
{[Link](alunos).map(([nome, dados]) => (
<div key={nome} className="bg-gradient-to-r from-orange-50 to-
blue-50 border-4 border-orange-300 rounded-3xl p-8 hover:shadow-2xl transition-all
transform hover:scale-105">
<div className="flex justify-between items-start mb-6">
<div>
<h3 className="text-3xl font-black text-gray-800 mb-
2">{nome}</h3>
<p className="font-bold mt-2">
<span className="bg-orange-500 text-white px-4 py-2
rounded-full text-sm mr-2 border-2 border-white shadow-lg">{[Link]}</span>
<span className="bg-blue-500 text-white px-4 py-2
rounded-full text-sm border-2 border-white shadow-lg">Turma {[Link]}</span>
</p>
<p className="text-slate-600 text-lg mt-3 font-bold">📚
{[Link]} | 🎓 Turma {[Link]}</p>
</div>
<span className={`px-6 py-3 rounded-2xl text-lg font-black
border-4 shadow-lg ${getCorStatus([Link])}`}>
{[Link]}
</span>
</div>
<div className="grid grid-cols-3 gap-4 mb-6">
{['T1', 'T2', 'T3'].map((etapa) => (
<div key={etapa} className="bg-white p-6 rounded-2xl
border-4 border-blue-300 shadow-lg">
<p className="font-black text-orange-600 text-lg mb-
2">{etapa}</p>
<p className="text-3xl font-black text-gray-800">
{dados[etapa].length ? dados[`media_$
{etapa}`].toFixed(2) : '---'}
</p>
</div>
))}
</div>
<div className="bg-gradient-to-r from-orange-100 to-blue-100 p-
6 rounded-2xl border-4 border-orange-400">
<p className="text-lg font-black text-gray-700 mb-2">🏆 Média
Final</p>
<p className="text-5xl font-black bg-gradient-to-r from-
orange-600 to-blue-600 bg-clip-text text-transparent">
{dados.media_final.toFixed(2)}
</p>
</div>
</div>
))}
</div>
)}
<button
onClick={() => setTelaAtiva('menu')}
className="w-full mt-8 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar ao Menu
</button>
</div>
)}
{telaAtiva === 'enviar-relatorio' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-blue-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-blue-600
to-orange-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">💾</span> Gerar Relatórios
</h2>
<div className="bg-gradient-to-r from-orange-100 to-blue-100 p-8
rounded-2xl border-4 border-orange-300 mb-8">
<div className="flex items-start gap-4">
<AlertCircle className="w-8 h-8 text-orange-600 flex-shrink-0 mt-1"
/>
<div>
<h3 className="font-black text-2xl text-gray-800 mb-4">Como
funciona:</h3>
<ul className="text-gray-700 space-y-3 text-lg font-bold">
<li>📄 Serão gerados relatórios em HTML elegantes para cada
aluno</li>
<li>📥 Os arquivos serão baixados automaticamente</li>
<li>💾 Salve os arquivos para entregar aos alunos</li>
<li>🎨 Cada relatório é personalizado com as notas e status do
aluno</li>
</ul>
</div>
</div>
</div>
<div className="space-y-4 mb-8">
<h3 className="font-black text-2xl text-gray-800 mb-6">Alunos que
terão relatórios gerados:</h3>
{[Link](alunos).map(([nome, dados]) => (
<div key={nome} className="flex items-center justify-between bg-
gradient-to-r from-orange-50 to-blue-50 p-6 rounded-2xl border-4 border-blue-300
shadow-lg">
<div>
<p className="font-black text-xl text-gray-800">{nome}</p>
<p className="text-lg text-gray-600 font-bold mt-1">📚
{[Link]} | 🎓 Turma {[Link]}</p>
</div>
<span className={`px-4 py-2 rounded-full text-sm font-black
border-2 ${getCorStatus([Link])}`}>
{[Link]}
</span>
</div>
))}
</div>
<div className="flex gap-4">
<button
onClick={enviarRelatorios}
className="flex-1 bg-gradient-to-r from-orange-500 to-blue-500
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl hover:shadow-
orange-500/50 transition-all transform hover:scale-105 flex items-center justify-
center gap-3 border-4 border-white"
>
<Download className="w-7 h-7" />
Gerar e Baixar Relatórios
</button>
<button
onClick={() => setTelaAtiva('menu')}
className="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-
white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all transform
hover:scale-105 border-4 border-white"
>
Cancelar
</button>
</div>
</div>
)}
{telaAtiva === 'selecionar-relatorio' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-purple-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-purple-
600 to-pink-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">📄</span> Selecionar Aluno para Relatório
</h2>
{[Link](alunos).length === 0 ? (
<div className="text-center py-16">
<div className="w-32 h-32 bg-gradient-to-br from-purple-300 to-
pink-300 rounded-full flex items-center justify-center mx-auto mb-6 border-4
border-white shadow-2xl">
<FileText className="w-16 h-16 text-white" />
</div>
<p className="text-gray-600 text-2xl font-black mb-4">Nenhum aluno
cadastrado</p>
<p className="text-gray-500 text-lg font-bold">Cadastre alunos para
gerar relatórios!</p>
</div>
) : (
<div className="space-y-4 max-h-[600px] overflow-y-auto pr-2">
{[Link](alunos).map(([nome, dados]) => (
<button
key={nome}
onClick={() => {
setRelatorioVisualizado({ nome, dados });
setTelaAtiva('visualizar-relatorio');
}}
className="w-full bg-gradient-to-r from-purple-50 to-pink-50
border-4 border-purple-300 rounded-2xl p-6 hover:shadow-2xl transition-all
transform hover:scale-105 text-left"
>
<div className="flex justify-between items-start">
<div className="flex-1">
<h3 className="text-2xl font-black text-gray-800 mb-
2">{nome}</h3>
<div className="flex flex-wrap gap-2">
<span className="bg-purple-500 text-white px-4 py-2
rounded-full text-sm font-bold border-2 border-white shadow-lg">
📚 {[Link]}
</span>
<span className="bg-pink-500 text-white px-4 py-2
rounded-full text-sm font-bold border-2 border-white shadow-lg">
🎓 Turma {[Link]}
</span>
<span className={`px-4 py-2 rounded-full text-sm font-
black border-2 shadow-lg ${getCorStatus([Link])}`}>
{[Link]}
</span>
</div>
</div>
<div className="text-right ml-4">
<p className="text-sm font-bold text-gray-600 mb-
1">Média</p>
<p className="text-4xl font-black bg-gradient-to-r from-
purple-600 to-pink-600 bg-clip-text text-transparent">
{dados.media_final.toFixed(2)}
</p>
</div>
</div>
</button>
))}
</div>
)}
<button
onClick={() => setTelaAtiva('menu')}
className="w-full mt-8 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar ao Menu
</button>
</div>
)}
{telaAtiva === 'visualizar-relatorio' && relatorioVisualizado && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-purple-400">
<div className="flex justify-between items-center mb-8">
<h2 className="text-4xl font-black bg-gradient-to-r from-purple-600
to-pink-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">📄</span> Relatório -
{[Link]}
</h2>
<button
onClick={() => {
setRelatorioVisualizado(null);
setTelaAtiva('selecionar-relatorio');
}}
className="bg-gradient-to-r from-gray-500 to-gray-600 text-white p-
3 rounded-xl font-black hover:shadow-xl transition-all transform hover:scale-105
border-2 border-white"
>
<X className="w-6 h-6" />
</button>
</div>
<div className="bg-gradient-to-br from-orange-50 via-blue-50 to-purple-
50 rounded-3xl p-8 border-4 border-purple-300 shadow-2xl">
{/* Informações do Aluno */}
<div className="bg-gradient-to-r from-orange-100 to-blue-100 p-6
rounded-2xl border-4 border-orange-400 mb-6">
<h3 className="text-3xl font-black text-gray-800 mb-
4">{[Link]}</h3>
<div className="grid grid-cols-2 gap-4">
<div className="bg-white p-4 rounded-xl border-2 border-orange-
300">
<p className="text-sm font-bold text-gray-600">📚 Série</p>
<p className="text-2xl font-black text-orange-
600">{[Link]}</p>
</div>
<div className="bg-white p-4 rounded-xl border-2 border-blue-
300">
<p className="text-sm font-bold text-gray-600">🎓 Turma</p>
<p className="text-2xl font-black text-blue-
600">{[Link]}</p>
</div>
</div>
</div>
{/* Notas por Etapa */}
<div className="space-y-4 mb-6">
{['T1', 'T2', 'T3'].map((etapa, idx) => (
<div key={etapa} className="bg-white p-6 rounded-2xl border-4
border-blue-300 shadow-lg">
<h4 className="text-xl font-black text-orange-600 mb-3 flex
items-center gap-2">
<span className="text-2xl">📊</span>
{etapa} - {idx === 0 ? 'Primeira' : idx === 1 ? 'Segunda' :
'Terceira'} Avaliação
</h4>
<div className="flex justify-between items-center">
<div>
<p className="text-sm font-bold text-gray-600 mb-
2">Notas:</p>
<div className="flex gap-2">
{[Link][etapa].length > 0 ? (
[Link][etapa].map((nota, i) => (
<span key={i} className="bg-blue-100 text-blue-700
px-4 py-2 rounded-lg font-black text-lg border-2 border-blue-300">
{[Link](1)}
</span>
))
) : (
<span className="text-gray-500 font-bold">Não
cadastradas</span>
)}
</div>
</div>
<div className="text-right">
<p className="text-sm font-bold text-gray-600 mb-1">Média
{etapa}</p>
<p className="text-4xl font-black text-orange-600">
{[Link][`media_${etapa}`].toFixed(2)}
</p>
</div>
</div>
</div>
))}
</div>
{/* Resultado Final */}
<div className={`p-8 rounded-2xl border-4 text-center ${
[Link] === 'Aprovado' ? 'bg-orange-100
border-orange-400' :
[Link] === 'Prova Final' ? 'bg-blue-100
border-blue-400' :
'bg-red-100 border-red-400'
}`}>
<h4 className="text-2xl font-black text-gray-800 mb-3">🏆 Resultado
Final</h4>
<p className="text-7xl font-black mb-4 bg-gradient-to-r from-
orange-600 to-blue-600 bg-clip-text text-transparent">
{[Link].media_final.toFixed(2)}
</p>
<span className={`inline-block px-8 py-4 rounded-full text-2xl
font-black border-4 shadow-2xl $
{getCorStatus([Link])}`}>
{[Link]}
</span>
</div>
{/* Rodapé */}
<div className="mt-6 text-center">
<p className="text-gray-600 font-bold">
📅 Relatório gerado em {new Date().toLocaleDateString('pt-BR')}
</p>
<p className="text-gray-500 font-bold mt-1">
Colégio Evolução - Sistema de Gerenciamento
</p>
</div>
</div>
<div className="flex gap-4 mt-8">
<button
onClick={() => {
setRelatorioVisualizado(null);
setTelaAtiva('selecionar-relatorio');
}}
className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl hover:shadow-
purple-500/50 transition-all transform hover:scale-105 border-4 border-white"
>
← Ver Outro Relatório
</button>
<button
onClick={() => setTelaAtiva('menu')}
className="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-
white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all transform
hover:scale-105 border-4 border-white"
>
🏠 Voltar ao Menu
</button>
</div>
</div>
)}
{telaAtiva === 'estatisticas' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-orange-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-orange-
600 to-blue-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl">📊</span> Estatísticas Gerais
</h2>
{[Link](alunos).length === 0 ? (
<div className="text-center py-16">
<div className="w-32 h-32 bg-gradient-to-br from-orange-300 to-
blue-300 rounded-full flex items-center justify-center mx-auto mb-6 border-4
border-white shadow-2xl">
<BarChart3 className="w-16 h-16 text-white" />
</div>
<p className="text-gray-600 text-2xl font-black">Nenhum aluno
cadastrado ainda</p>
</div>
) : (
<div className="space-y-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{[
{ label: 'Total', value: [Link](alunos).length, color:
'from-orange-500 to-blue-500', icon: '👥' },
{ label: 'Aprovados', value: getEstatisticas().aprovados,
color: 'from-orange-500 to-orange-600', icon: '✅' },
{ label: 'Prova Final', value: getEstatisticas().provaFinal,
color: 'from-blue-500 to-blue-600', icon: '📝' },
{ label: 'Reprovados', value: getEstatisticas().reprovados,
color: 'from-red-500 to-red-600', icon: '❌' }
].map((stat, idx) => (
<div key={idx} className={`bg-gradient-to-br ${[Link]} p-8
rounded-3xl shadow-2xl text-white border-4 border-white transform hover:scale-105
transition-all`}>
<p className="text-6xl font-black mb-3">{[Link]}</p>
<p className="text-lg font-black opacity-90 flex items-center
gap-2">
<span className="text-2xl">{[Link]}</span>
{[Link]}
</p>
</div>
))}
</div>
{getEstatisticas().pendentes > 0 && (
<div className="bg-gradient-to-r from-orange-100 to-blue-100 p-8
rounded-2xl border-4 border-orange-300">
<div className="flex items-center gap-4">
<AlertCircle className="w-10 h-10 text-orange-600" />
<p className="text-gray-800 font-black text-xl">
<span className="font-black text-orange-600 text-
2xl">{getEstatisticas().pendentes}</span> aluno(s) ainda sem todas as notas
cadastradas
</p>
</div>
</div>
)}
</div>
)}
<button
onClick={() => setTelaAtiva('menu')}
className="w-full mt-8 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar ao Menu
</button>
</div>
)}
{telaAtiva === 'banco-relatorios' && (
<div className="bg-white/95 backdrop-blur-sm p-10 rounded-3xl shadow-2xl
border-4 border-purple-400">
<h2 className="text-4xl font-black mb-8 bg-gradient-to-r from-purple-
600 to-pink-600 bg-clip-text text-transparent flex items-center gap-3">
<span className="text-5xl"></span> Banco de Relatórios
</h2>
{[Link] === 0 ? (
<div className="text-center py-16">
<div className="w-32 h-32 bg-gradient-to-br from-purple-300 to-
pink-300 rounded-full flex items-center justify-center mx-auto mb-6 border-4
border-white shadow-2xl">
<FileText className="w-16 h-16 text-white" />
</div>
<p className="text-gray-600 text-2xl font-black mb-4">Nenhum
relatório salvo ainda</p>
<p className="text-gray-500 text-lg font-bold mb-6">Salve
relatórios para vê-los aqui!</p>
{[Link](alunos).length > 0 && (
<button
onClick={() => {
salvarRelatorio();
}}
className="bg-gradient-to-r from-purple-500 to-pink-500 text-
white py-4 px-8 rounded-2xl font-black text-lg hover:shadow-2xl hover:shadow-
purple-500/50 transition-all transform hover:scale-105 border-4 border-white
inline-flex items-center gap-3"
>
<Download className="w-6 h-6" />
Salvar Relatórios dos Alunos
</button>
)}
</div>
) : (
<div>
<div className="bg-gradient-to-r from-purple-100 to-pink-100 p-6
rounded-2xl border-4 border-purple-300 mb-6 flex items-center justify-between">
<p className="font-black text-xl text-gray-800">
📊 Total de relatórios salvos: <span className="text-purple-600
text-3xl">{[Link]}</span>
</p>
{[Link](alunos).length > 0 && (
<button
onClick={() => {
salvarRelatorio();
}}
className="bg-gradient-to-r from-purple-500 to-pink-500 text-
white py-3 px-6 rounded-xl font-black hover:shadow-xl transition-all transform
hover:scale-105 border-2 border-white flex items-center gap-2"
>
<Download className="w-5 h-5" />
Salvar Novos
</button>
)}
</div>
<div className="space-y-4 max-h-[600px] overflow-y-auto pr-2">
{[Link]((relatorio) => (
<div key={[Link]} className="bg-gradient-to-r from-
purple-50 to-pink-50 border-4 border-purple-300 rounded-2xl p-6 hover:shadow-2xl
transition-all">
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="text-2xl font-black text-gray-
800">{[Link]}</h3>
<p className="text-gray-600 font-bold mt-2">
<span className="text-purple-600">📚
{[Link]}</span> |
<span className="text-pink-600 ml-2">🎓 Turma
{[Link]}</span>
</p>
<p className="text-gray-500 font-bold mt-2 text-sm">
Gerado em: {[Link]} às
{[Link]}
</p>
</div>
<div className="flex flex-col gap-2 items-end">
<span className={`px-4 py-2 rounded-full text-sm font-
black border-2 ${getCorStatus([Link])}`}>
{[Link]}
</span>
<span className="text-2xl font-black text-purple-600">
Média: {[Link](2)}
</span>
</div>
</div>
<div className="flex gap-3 mt-4">
<button
onClick={() => {
const blob = new Blob([[Link]], { type:
'text/html' });
const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = `trabalho_gxb_${[Link](/\
s+/g, '_')}.html`;
[Link]();
[Link](url);
mostrarMensagem('Relatório baixado com sucesso!',
'success');
}}
className="flex-1 bg-gradient-to-r from-purple-500 to-
pink-500 text-white py-3 rounded-xl font-black hover:shadow-xl transition-all
transform hover:scale-105 border-2 border-white flex items-center justify-center
gap-2"
>
<Download className="w-5 h-5" />
Baixar Novamente
</button>
<button
onClick={() => {
const confirmar = [Link](`Deseja realmente
excluir o relatório de ${[Link]}?`);
if (confirmar) {
setRelatoriosSalvos([Link](r => [Link]
!== [Link]));
mostrarMensagem('Relatório excluído!', 'success');
}
}}
className="bg-gradient-to-r from-red-500 to-red-600 text-
white py-3 px-6 rounded-xl font-black hover:shadow-xl transition-all transform
hover:scale-105 border-2 border-white flex items-center justify-center gap-2"
>
<X className="w-5 h-5" />
Excluir
</button>
</div>
</div>
))}
</div>
<button
onClick={() => {
const confirmar = [Link]('Deseja realmente limpar TODOS
os relatórios salvos?');
if (confirmar) {
setRelatoriosSalvos([]);
mostrarMensagem('Banco de relatórios limpo!', 'success');
}
}}
className="w-full mt-6 bg-gradient-to-r from-red-500 to-red-600
text-white py-4 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
Limpar Banco de Relatórios
</button>
</div>
)}
<button
onClick={() => setTelaAtiva('menu')}
className="w-full mt-6 bg-gradient-to-r from-gray-500 to-gray-600
text-white py-5 rounded-2xl font-black text-lg hover:shadow-2xl transition-all
transform hover:scale-105 border-4 border-white"
>
← Voltar ao Menu
</button>
</div>
)}
</div>
</div>
);
}