// ============================================================ // ROTA — SISTEMA OPERACIONAL // VERSÃO: ULTRA | PLATAFORMA: GTA 5 ROLEPLAY // ============================================================ // DISCIPLINA • HONRA • CORAGEM • LEALDADE // ============================================================ 'use client'; import React, { useState, useEffect, useCallback, createContext, useContext } from 'react'; import { Home, Users, FileText, Calendar, MessageSquare, Shield, BookOpen, Music, Image, Award, Settings, Bell, LogOut, ChevronRight, ChevronDown, Eye, EyeOff, CheckCircle, XCircle, Clock, MapPin, Play, Pause, SkipBack, SkipForward, Volume2, Send, Copy, ExternalLink, Menu, X, Search, Filter, Plus, Edit, Trash2, Download, Upload, BarChart3, PieChart, Activity, UserCheck, UserX, CalendarDays, Video, Mic, Monitor, File, FileDown, AlertCircle, Check, ChevronLeft, Star, Heart, Share2, MoreVertical, LogIn, User, Lock, Unlock, Globe, Link2, Hash, TrendingUp, List, ClipboardList, Target, Zap, Radio, Smartphone, Monitor as MonitorIcon, Tablet, Database, Code, Server, Wifi, WifiOff, RefreshCw, Save, ArrowUpRight, ArrowDownRight, ChevronUp, Sun, Moon, HelpCircle, Info, CreditCard, Bookmark, Flag, Megaphone, Mail, Phone, Map, Layers, Box, LayoutGrid, LayoutList, PanelLeftClose, PanelLeftOpen } from 'lucide-react'; // ============================================================ // TIPOS E CONTEXTOS // ============================================================ type UserRole = 'guest' | 'candidate' | 'student' | 'commander' | 'admin'; interface AuthUser { id: string; name: string; username: string; role: UserRole; rank?: string; avatar?: string; status: 'active' | 'pending' | 'inactive'; } interface NavItem { id: string; label: string; icon: React.ReactNode; path: string; roles?: UserRole[]; } const AuthContext = createContext<{ user: AuthUser | null; login: (u: AuthUser) => void; logout: () => void; isAuthenticated: boolean; hasPermission: (roles: UserRole[]) => boolean; }>({ user: null, login: () => {}, logout: () => {}, isAuthenticated: false, hasPermission: () => false, }); const ThemeContext = createContext<{ theme: 'dark'; }>({ theme: 'dark' }); // ============================================================ // COMPONENTES BASE // ============================================================ const Button: React.FC<{ children: React.ReactNode; variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'success'; size?: 'sm' | 'md' | 'lg' | 'icon'; className?: string; disabled?: boolean; onClick?: () => void; }> = ({ children, variant = 'primary', size = 'md', className = '', disabled, onClick }) => { const base = 'font-medium rounded-lg transition-all duration-200 flex items-center justify-center gap-2 active:scale-95'; const variants = { primary: 'bg-red-700 hover:bg-red-600 text-white shadow-lg shadow-red-900/20', secondary: 'bg-gray-800/80 hover:bg-gray-700/80 text-gray-200 border border-gray-700/50', danger: 'bg-red-900/80 hover:bg-red-800/80 text-white border border-red-700/50', ghost: 'bg-transparent hover:bg-gray-800/50 text-gray-300', success: 'bg-emerald-700/80 hover:bg-emerald-600/80 text-white border border-emerald-500/30', }; const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg', icon: 'p-2', }; return ( ); }; const Card: React.FC<{ children: React.ReactNode; className?: string; glow?: 'red' | 'gold' | 'none'; }> = ({ children, className = '', glow = 'none' }) => { const glowClass = glow === 'red' ? 'shadow-xl shadow-red-900/10' : glow === 'gold' ? 'shadow-xl shadow-amber-900/10' : ''; return (
{children}
); }; const Badge: React.FC<{ children: React.ReactNode; variant?: 'red' | 'green' | 'yellow' | 'gray' | 'blue' }> = ({ children, variant = 'gray' }) => { const colors = { red: 'bg-red-900/40 text-red-300 border border-red-700/40', green: 'bg-emerald-900/40 text-emerald-300 border border-emerald-700/40', yellow: 'bg-amber-900/40 text-amber-300 border border-amber-700/40', gray: 'bg-gray-800/60 text-gray-300 border border-gray-700/40', blue: 'bg-blue-900/40 text-blue-300 border border-blue-700/40', }; return {children}; }; const Input: React.FC<{ placeholder?: string; type?: string; value?: string; onChange?: (e: React.ChangeEvent) => void; className?: string; icon?: React.ReactNode; }> = ({ placeholder, type = 'text', value, onChange, className = '', icon }) => (
{icon &&
{icon}
}
); const Modal: React.FC<{ open: boolean; onClose: () => void; title: string; children: React.ReactNode }> = ({ open, onClose, title, children }) => { if (!open) return null; return (
e.stopPropagation()}>

{title}

{children}
); }; const Tabs: React.FC<{ tabs: { id: string; label: string; icon?: React.ReactNode }[]; active: string; onChange: (id: string) => void }> = ({ tabs, active, onChange }) => (
{tabs.map(tab => ( ))}
); const ProgressBar: React.FC<{ value: number; max?: number; label?: string }> = ({ value, max = 100, label }) => { const percent = Math.min(100, Math.max(0, (value / max) * 100)); return (
{label &&
{label}{value}/{max}
}
); }; // ============================================================ // DADOS SIMULADOS // ============================================================ const mockRecruitments = [ { id: '1', title: 'RECRUTAMENTO GERAL — TURMA 042', date: '2026-10-04', status: 'active', candidates: 127, vacancies: 50, description: 'Formação completa para ingresso na instituição' }, { id: '2', title: 'FORMAÇÃO AVANÇADA — TURMA ESPECIAL', date: '2026-10-18', status: 'scheduled', candidates: 42, vacancies: 20, description: 'Para integrantes com experiência prévia' }, { id: '3', title: 'SELEÇÃO FECHADA — CONVOCAÇÃO INTERNA', date: '2026-09-30', status: 'closed', candidates: 15, vacancies: 15, description: 'Apenas convidados' }, ]; const mockCandidates = [ { id: '1', name: 'Carlos Henrique Mendes', idRp: 'RP-88291', discord: 'carlos_mendes#9921', status: 'approved', date: '2026-08-18' }, { id: '2', name: 'Roberto Silva Costa', idRp: 'RP-76145', discord: 'roberto_costa#4478', status: 'interview', date: '2026-08-22' }, { id: '3', name: 'Ana Carolina Souza', idRp: 'RP-91033', discord: 'ana_souza#2256', status: 'pending', date: '2026-08-25' }, { id: '4', name: 'Marcos Vinícius Pereira', idRp: 'RP-55082', discord: 'marcos_pereira#1134', status: 'reproved', date: '2026-08-15' }, ]; const mockEvents = [ { id: '1', title: 'Entrevista — Carlos Henrique', date: '2026-08-22', time: '19:30', type: 'interview' }, { id: '2', title: 'Prova Etapa 1 — Turma 042', date: '2026-08-28', time: '20:00', type: 'exam' }, { id: '3', title: 'Reunião de Comando', date: '2026-08-24', time: '18:00', type: 'meeting' }, ]; const mockNotifications = [ { id: '1', title: 'Resultado da Análise', message: 'Sua inscrição foi aprovada! Aguarde convocação.', date: '10 min atrás', read: false, priority: 'high' }, { id: '2', title: 'Nova Data de Entrevista', message: 'Entrevista agendada para 22/08 às 19h30.', date: '2h atrás', read: false, priority: 'medium' }, { id: '3', title: 'Material de Estudos Disponível', message: 'Nova apostila publicada na área de estudos.', date: '1 dia atrás', read: true, priority: 'low' }, ]; const mockPosts = [ { id: '1', author: 'Comando Geral', avatar: '', time: '2h atrás', content: 'A disciplina é a base de tudo o que construímos. Continuem firmes! 🇧🇷', likes: 87, comments: 23, image: null }, { id: '2', author: 'Departamento de Formação', avatar: '', time: '5h atrás', content: 'Turma 041 concluída com 100% de aproveitamento! Parabéns a todos os formados! 🎓', likes: 156, comments: 45, image: 'https://picsum.photos/id/1015/800/400' }, ]; // ============================================================ // PÁGINAS // ============================================================ const PublicHome = () => { const { login } = useContext(AuthContext); const [showLogin, setShowLogin] = useState(false); const [loginForm, setLoginForm] = useState({ user: '', pass: '' }); return (
{/* Cabeçalho */}
R

ROTA

SISTEMA OPERACIONAL

{/* Hero */}

ROTA
SISTEMA OPERACIONAL

CENTRAL DIGITAL DE RECRUTAMENTO • FORMAÇÃO • COMANDO • COMUNICAÇÃO • GESTÃO

{[ { num: '42', label: 'TURMAS FORMADAS' }, { num: '1.287', label: 'CANDIDATOS INSCRITOS' }, { num: '512', label: 'ALUNOS ATIVOS' }, { num: '98%', label: 'TAXA DE APROVAÇÃO' }, ].map(s => (

{s.num}

{s.label}

))}
{/* Recrutamento */}

RECRUTAMENTOS ABERTOS

{mockRecruitments.map(r => (
{r.status === 'active' ? '🔴 ATIVO' : r.status === 'scheduled' ? '🟡 AGENDADO' : '⚫ ENCERRADO'} {r.date}

{r.title}

{r.description}

Candidatos{r.candidates}
Vagas{r.vacancies}
 ))}
{/* Rodapé */}

⚠️ SISTEMA FICTÍCIO — CRIADO EXCLUSIVAMENTE PARA O UNIVERSO DE GTA 5 ROLEPLAY

Não representa nenhuma instituição, órgão ou sistema oficial real.

DISCIPLINA • HONRA • CORAGEM • LEALDADE

{/* Modal de Login */} setShowLogin(false)} title="ACESSAR SISTEMA">
} value={loginForm.user} onChange={e => setLoginForm(p => ({ ...p, user: e.target.value }))} /> } value={loginForm.pass} onChange={e => setLoginForm(p => ({ ...p, pass: e.target.value }))} />
Esqueceu a senha?
Não tem conta? Inscreva-se aqui

Acesso rápido para demonstração:

{[ { role: 'Candidato', roleType: 'candidate' as UserRole, color: 'gray' }, { role: 'Aluno', roleType: 'student' as UserRole, color: 'blue' }, { role: 'Comando', roleType: 'admin' as UserRole, color: 'red' }, ].map(u => ( ))}
); }; const DashboardCommander = () => { const [activeTab, setActiveTab] = useState('overview'); const tabs = [ { id: 'overview', label: 'VISÃO GERAL', icon: }, { id: 'recruitment', label: 'RECRUTAMENTO', icon: }, { id: 'candidates', label: 'CANDIDATOS', icon: }, { id: 'interviews', label: 'ENTREVISTAS', icon: