Em português, nas cores branca, preta e cinza. Cria e com todas as dependências implementadas. Rodando local. <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gestão de Casos Penais - Juiz</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; } body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .sidebar { background: linear-gradient(180deg, var(--primary-color), #1a2530); color: white; height: 100vh; position: fixed; padding-top: 20px; } .main-content { margin-left: 250px; } .header { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 15px 30px; } .card-custom { border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease; border: none; margin-bottom: 20px; } .card-custom:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85em; font-weight: 500; } .status-em-andamento { background-color: #fff3cd; color: #856404; } .status-concluido { background-color: #d4edda; color: #155724; } .status-arquivado { background-color: #f8d7da; color: #721c24; } .status-aguardando { background-color: #cce7ff; color: #004085; } .priority-high { color: #e74c3c; } .priority-medium { color: #f39c12; } .priority-low { color: #27ae60; } .btn-custom { border-radius: 30px; padding: 8px 20px; font-weight: 500; } .table th { border-top: none; font-weight: 600; } .stat-card { text-align: center; padding: 20px; border-radius: 10px; color: white; } .stat-card i { font-size: 2.5rem; margin-bottom: 15px; } .chart-container { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); height: 300px; } .sidebar .nav-link { color: rgba(255,255,255,0.8); padding: 12px 20px; margin: 5px 15px; border-radius: 5px; transition: all 0.3s; } .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: rgba(255,255,255,0.1); color: white; } .sidebar .nav-link i { margin-right: 10px; width: 20px; text-align: center; } .section-title { border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; margin-bottom: 20px; color: var(--dark-color); } .practice-card { background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid var(--secondary-color); } .practice-card h5 { color: var(--primary-color); } .notification-badge { position: absolute; top: 5px; right: 5px; background-color: var(--accent-color); color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <!-- Sidebar --> <nav class="col-md-3 col-lg-2 d-md-block sidebar collapse"> <div class="position-sticky pt-3"> <div class="text-center mb-4"> <h4><i class="fas fa-gavel me-2"></i>Sistema Penal</h4> <p class="text-muted small">Gestão Judicial</p> </div> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#dashboard"> <i class="fas fa-tachometer-alt"></i> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="#casos"> <i class="fas fa-balance-scale"></i> Casos Penais </a> </li> <li class="nav-item"> <a class="nav-link" href="#audiencias"> <i class="fas fa-calendar-alt"></i> Audiências </a> </li> <li class="nav-item"> <a class="nav-link" href="#praticas"> <i class="fas fa-lightbulb"></i> Melhores Práticas </a> </li> <li class="nav-item"> <a class="nav-link" href="#relatorios"> <i class="fas fa-chart-bar"></i> Relatórios </a> </li> </ul> </div> </nav> <!-- Main Content --> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content"> <!-- Header --> <div class="header d-flex justify-content-between align-items-center"> <h2 class="mb-0">Gestão de Casos Penais</h2> <div class="d-flex align-items-center"> <div class="position-relative me-4"> <i class="fas fa-bell fa-lg"></i> <span class="notification-badge">3</span> </div> <div> <span class="fw-bold">Juiz Carlos Silva</span><br> <small class="text-muted">Tribunal de Justiça</small> </div> </div> </div> <!-- Dashboard --> <section id="dashboard" class="my-4"> <h3 class="section-title">Dashboard</h3> <div class="row mb-4"> <div class="col-md-3"> <div class="stat-card" style="background: linear-gradient(135deg, #3498db, #1a5276);"> <i class="fas fa-balance-scale"></i> <h4 id="total-cases">0</h4> <p>Total de Casos</p> </div> </div> <div class="col-md-3"> <div class="stat-card" style="background: linear-gradient(135deg, #2ecc71, #27ae60);"> <i class="fas fa-check-circle"></i> <h4 id="completed-cases">0</h4> <p>Casos Concluídos</p> </div> </div> <div class="col-md-3"> <div class="stat-card" style="background: linear-gradient(135deg, #f39c12, #d35400);"> <i class="fas fa-clock"></i> <h4 id="pending-cases">0</h4> <p>Em Andamento</p> </div> </div> <div class="col-md-3"> <div class="stat-card" style="background: linear-gradient(135deg, #e74c3c, #c0392b);"> <i class="fas fa-calendar-alt"></i> <h4 id="today-hearings">0</h4> <p>Audiências Hoje</p> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="chart-container"> <h5>Distribuição de Casos por Status</h5> <canvas id="casesChart"></canvas> </div> </div> <div class="col-md-4"> <div class="chart-container"> <h5>Prioridade dos Casos</h5> <canvas id="priorityChart"></canvas> </div> </div> </div> </section> <!-- Casos Penais --> <section id="casos" class="my-4"> <div class="d-flex justify-content-between align-items-center mb-3"> <h3 class="section-title">Casos Penais</h3> <button class="btn btn-primary btn-custom" data-bs-toggle="modal" data-bs-target="#addCaseModal"> <i class="fas fa-plus me-2"></i>Novo Caso </button> </div> <div class="row" id="cases-container"> <!-- Casos serão carregados aqui --> </div> </section> <!-- Audiências --> <section id="audiencias" class="my-4"> <div class="d-flex justify-content-between align-items-center mb-3"> <h3 class="section-title">Audiências</h3> <button class="btn btn-success btn-custom" data-bs-toggle="modal" data-bs-target="#addHearingModal"> <i class="fas fa-plus me-2"></i>Nova Audiência </button> </div> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Data/Hora</th> <th>Processo</th> <th>Partes</th> <th>Tipo</th> <th>Status</th> <th>Ações</th> </tr> </thead> <tbody id="hearings-table"> <!-- Audiências serão carregadas aqui --> </tbody> </table> </div> </section> <!-- Melhores Práticas --> <section id="praticas" class="my-4"> <h3 class="section-title">Melhores Práticas</h3> <div class="row"> <div class="col-md-6"> <div class="practice-card"> <h5><i class="fas fa-file-alt me-2"></i>Documentação Completa</h5> <p>Mantenha toda a documentação do processo organizada e atualizada. Isso facilita a tomada de decisões e evita atrasos.</p> </div> <div class="practice-card"> <h5><i class="fas fa-users me-2"></i>Comunicação Clara</h5> <p>Estabeleça canais de comunicação eficazes com promotores, defensores e demais partes envolvidas no processo.</p> </div> </div> <div class="col-md-6"> <div class="practice-card"> <h5><i class="fas fa-clock me-2"></i>Pontualidade</h5> <p>Cumpra rigorosamente os prazos processuais e horários das audiências para garantir a eficiência do sistema.</p> </div> <div class="practice-card"> <h5><i class="fas fa-search me-2"></i>Análise Detalhada</h5> <p>Analise cuidadosamente todas as provas e depoimentos antes de tomar decisões que impactam a vida das pessoas.</p> </div> </div> </div> </section> </main> </div> </div> <!-- Modal Adicionar Caso --> <div class="modal fade" id="addCaseModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Adicionar Novo Caso</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="case-form"> <div class="mb-3"> <label for="case-number" class="form-label">Número do Processo</label> <input type="text" class="form-control" id="case-number" required> </div> <div class="mb-3"> <label for="case-title" class="form-label">Título do Caso</label> <input type="text" class="form-control" id="case-title" required> </div> <div class="mb-3"> <label for="case-description" class="form-label">Descrição</label> <textarea class="form-control" id="case-description" rows="3"></textarea> </div> <div class="mb-3"> <label for="case-priority" class="form-label">Prioridade</label> <select class="form-select" id="case-priority"> <option value="alta">Alta</option> <option value="media" selected>Média</option> <option value="baixa">Baixa</option> </select> </div> <div class="mb-3"> <label for="case-status" class="form-label">Status</label> <select class="form-select" id="case-status"> <option value="em-andamento" selected>Em Andamento</option> <option value="concluido">Concluído</option> <option value="arquivado">Arquivado</option> <option value="aguardando">Aguardando</option> </select> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-primary" id="save-case-btn">Salvar Caso</button> </div> </div> </div> </div> <!-- Modal Adicionar Audiência --> <div class="modal fade" id="addHearingModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Agendar Nova Audiência</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="hearing-form"> <div class="mb-3"> <label for="hearing-case" class="form-label">Processo</label> <select class="form-select" id="hearing-case" required> <option value="">Selecione um processo</option> <!-- Opções serão carregadas dinamicamente --> </select> </div> <div class="mb-3"> <label for="hearing-date" class="form-label">Data</label> <input type="date" class="form-control" id="hearing-date" required> </div> <div class="mb-3"> <label for="hearing-time" class="form-label">Hora</label> <input type="time" class="form-control" id="hearing-time" required> </div> <div class="mb-3"> <label for="hearing-type" class="form-label">Tipo de Audiência</label> <select class="form-select" id="hearing-type"> <option value="instrucao">Instrução Processual</option> <option value="julgamento">Julgamento</option> <option value="conciliacao">Conciliação</option> <option value="outras">Outras</option> </select> </div> <div class="mb-3"> <label for="hearing-parties" class="form-label">Partes Envolvidas</label> <input type="text" class="form-control" id="hearing-parties" placeholder="Promotor, Defensor, Réu..."> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-success" id="save-hearing-btn">Agendar Audiência</button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Dados iniciais let cases = JSON.parse(localStorage.getItem('cases')) || []; let hearings = JSON.parse(localStorage.getItem('hearings')) || []; // Função para salvar dados no localStorage function saveData() { localStorage.setItem('cases', JSON.stringify(cases)); localStorage.setItem('hearings', JSON.stringify(hearings)); renderData(); } // Função para gerar ID único function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); } // Função para formatar data function formatDate(dateString) { const options = { year: 'numeric', month: '2-digit', day: '2-digit' }; return new Date(dateString).toLocaleDateString('pt-BR', options); } // Função para renderizar casos function renderCases() { const container = document.getElementById('cases-container'); container.innerHTML = ''; cases.forEach(caseItem => { const caseElement = document.createElement('div'); caseElement.className = 'col-md-6 col-lg-4'; caseElement.innerHTML = ` <div class="card card-custom"> <div class="card-body"> <div class="d-flex justify-content-between align-items-start"> <h5 class="card-title">${caseItem.title} <i class="fas fa-circle"></i></span> </div> <p class="card-text text-muted small">${caseItem.number} ${caseItem.description || 'Sem descrição'}</p> <div class="d-flex justify-content-between align-items-center"> <span class="status-badge status-${caseItem.status.replace(' ', '-')}"> ${caseItem.status === 'em-andamento' ? 'Em Andamento' : caseItem.status === 'concluido' ? 'Concluído' : caseItem.status === 'arquivado' ? 'Arquivado' : 'Aguardando'} </span> <div> <button class="btn btn-sm btn-outline-primary me-1" onclick="editCase('${caseItem.id}')"> <i class="fas fa-trash"></i> </button> </div> </div> </div> </div> `; container.appendChild(caseElement); }); } // Função para renderizar audiências function renderHearings() { const tbody = document.getElementById('hearings-table'); tbody.innerHTML = ''; hearings.forEach(hearing => { const caseItem = cases.find(c => c.id === hearing.caseId); const row = document.createElement('tr'); row.innerHTML = ` <td>${formatDate(hearing.date)} ${hearing.time}</td> <td>${caseItem ? caseItem.number : 'Processo não encontrado'} ${hearing.parties || 'Não especificado'}</td> <td>${hearing.type === 'instrucao' ? 'Instrução Processual' : hearing.type === 'julgamento' ? 'Julgamento' : hearing.type === 'conciliacao' ? 'Conciliação' : 'Outras'} Agendada<i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" onclick="deleteHearing('${hearing.id}')"> `; tbody.appendChild(row); }); } // Função para atualizar estatísticas function updateStats() { document.getElementById('total-cases').textContent = cases.length; const completedCases = cases.filter(c => c.status === 'concluido').length; document.getElementById('completed-cases').textContent = completedCases; const pendingCases = cases.filter(c => c.status === 'em-andamento').length; document.getElementById('pending-cases').textContent = pendingCases; const today = new Date().toISOString().split('T')[0]; const todayHearings = hearings.filter(h => h.date === today).length; document.getElementById('today-hearings').textContent = todayHearings; } // Função para renderizar gráficos function renderCharts() { // Gráfico de status dos casos const statusCtx = document.getElementById('casesChart').getContext('2d'); new Chart(statusCtx, { type: 'doughnut', data: { labels: ['Em Andamento', 'Concluídos', 'Arquivados', 'Aguardando'], datasets: [{ data: [ cases.filter(c => c.status === 'em-andamento').length, cases.filter(c => c.status === 'concluido').length, cases.filter(c => c.status === 'arquivado').length, cases.filter(c => c.status === 'aguardando').length ], backgroundColor: ['#3498db', '#2ecc71', '#e74c3c', '#f39c12'] }] }, options: { responsive: true, maintainAspectRatio: false } }); // Gráfico de prioridade const priorityCtx = document.getElementById('priorityChart').getContext('2d'); new Chart(priorityCtx, { type: 'pie', data: { labels: ['Alta', 'Média', 'Baixa'], datasets: [{ data: [ cases.filter(c => c.priority === 'alta').length, cases.filter(c => c.priority === 'media').length, cases.filter(c => c.priority === 'baixa').length ], backgroundColor: ['#e74c3c', '#f39c12', '#27ae60'] }] }, options: { responsive: true, maintainAspectRatio: false } }); } // Função para popular select de casos function populateCaseSelect() { const select = document.getElementById('hearing-case'); select.innerHTML = ' Selecione um processo '; cases.forEach(caseItem => { const option = document.createElement('option'); option.value = caseItem.id; option.textContent = `${caseItem.number} - ${caseItem.title}`; select.appendChild(option); }); } // Função para renderizar todos os dados function renderData() { renderCases(); renderHearings(); updateStats(); renderCharts(); populateCaseSelect(); } // Event Listeners document.getElementById('save-case-btn').addEventListener('click', function() { const number = document.getElementById('case-number').value; const title = document.getElementById('case-title').value; const description = document.getElementById('case-description').value; const priority = document.getElementById('case-priority').value; const status = document.getElementById('case-status').value; if (number && title) { const newCase = { id: generateId(), number: number, title: title, description: description, priority: priority, status: status, createdAt: new Date().toISOString() }; cases.push(newCase); saveData(); // Limpar formulário document.getElementById('case-form').reset(); bootstrap.Modal.getInstance(document.getElementById('addCaseModal')).hide(); } }); document.getElementById('save-hearing-btn').addEventListener('click', function() { const caseId = document.getElementById('hearing-case').value; const date = document.getElementById('hearing-date').value; const time = document.getElementById('hearing-time').value; const type = document.getElementById('hearing-type').value; const parties = document.getElementById('hearing-parties').value; if (caseId && date && time) { const newHearing = { id: generateId(), caseId: caseId, date: date, time: time, type: type, parties: parties }; hearings.push(newHearing); saveData(); // Limpar formulário document.getElementById('hearing-form').reset(); bootstrap.Modal.getInstance(document.getElementById('addHearingModal')).hide(); } }); // Funções para editar e deletar (simplificadas) function editCase(id) { alert('Função de edição em desenvolvimento'); } function deleteCase(id) { if (confirm('Tem certeza que deseja excluir este caso?')) { cases = cases.filter(c => c.id !== id); hearings = hearings.filter(h => h.caseId !== id); saveData(); } } function editHearing(id) { alert('Função de edição em desenvolvimento'); } function deleteHearing(id) { if (confirm('Tem certeza que deseja excluir esta audiência?')) { hearings = hearings.filter(h => h.id !== id); saveData(); } } // Inicialização document.addEventListener('DOMContentLoaded', function() { // Adicionar dados de exemplo se não houver dados if (cases.length === 0) { cases = [ { id: generateId(), number: '0012345-67.2023.8.26.0001', title: 'Homicídio Qualificado', description: 'Crime de homicídio qualificado ocorrido em 15/03/2023', priority: 'alta', status: 'em-andamento', createdAt: new Date().toISOString() }, { id: generateId(), number: '0023456-78.2023.8.26.0002', title: 'Furto Qualificado', description: 'Furto em estabelecimento comercial', priority: 'media', status: 'aguardando', createdAt: new Date().toISOString() }, { id: generateId(), number: '0034567-89.2023.8.26.0003', title: 'Tráfico de Drogas', description: 'Organização criminosa envolvida em tráfico de entorpecentes', priority: 'alta', status: 'em-andamento', createdAt: new Date().toISOString() } ]; } if (hearings.length === 0) { hearings = [ { id: generateId(), caseId: cases[0].id, date: new Date(Date.now() + 86400000).toISOString().split('T')[0], time: '10:00', type: 'instrucao', parties: 'Promotor, Defensor Público' }, { id: generateId(), caseId: cases[2].id, date: new Date(Date.now() + 172800000).toISOString().split('T')[0], time: '14:30', type: 'julgamento', parties: 'Promotor, Defesa Técnica' } ]; } saveData(); }); </script> </body> </html> - Initial Deployment
cbd2955
verified
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gestão de Casos Penais - Juiz</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .status-badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .status-em-andamento { background-color: #e5e7eb; color: #4b5563; } | |
| .status-concluido { background-color: #d1d5db; color: #1f2937; } | |
| .status-arquivado { background-color: #9ca3af; color: #111827; } | |
| .status-aguardando { background-color: #f3f4f6; color: #6b7280; } | |
| .priority-high { color: #ef4444; } | |
| .priority-medium { color: #f59e0b; } | |
| .priority-low { color: #10b981; } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-link { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-link:hover, .sidebar-link.active { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .card-hover { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-card { | |
| transition: transform 0.2s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| } | |
| .section-title { | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 3rem; | |
| height: 2px; | |
| background-color: #6b7280; | |
| } | |
| .practice-card { | |
| border-left: 4px solid #6b7280; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #9ca3af; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-900"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-gray-900 text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-gray-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-gavel text-xl mr-2 text-gray-300"></i> | |
| <span class="text-xl font-semibold">Sistema Penal</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#dashboard" class="sidebar-link flex items-center px-4 py-3 rounded-lg text-gray-300 hover:text-white active"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#casos" class="sidebar-link flex items-center px-4 py-3 rounded-lg text-gray-300 hover:text-white"> | |
| <i class="fas fa-balance-scale mr-3"></i> | |
| Casos Penais | |
| </a> | |
| <a href="#audiencias" class="sidebar-link flex items-center px-4 py-3 rounded-lg text-gray-300 hover:text-white"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Audiências | |
| </a> | |
| <a href="#praticas" class="sidebar-link flex items-center px-4 py-3 rounded-lg text-gray-300 hover:text-white"> | |
| <i class="fas fa-lightbulb mr-3"></i> | |
| Melhores Práticas | |
| </a> | |
| <a href="#relatorios" class="sidebar-link flex items-center px-4 py-3 rounded-lg text-gray-300 hover:text-white"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| Relatórios | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-white">Juiz Carlos Silva</p> | |
| <p class="text-xs text-gray-400">Tribunal de Justiça</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <h1 class="text-2xl font-semibold text-gray-800">Gestão de Casos Penais</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-6"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="mb-8"> | |
| <h2 class="section-title text-xl font-semibold mb-6">Dashboard</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="stat-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-gray-100 mr-4"> | |
| <i class="fas fa-balance-scale text-gray-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total de Casos</p> | |
| <h3 id="total-cases" class="text-2xl font-bold">0</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-gray-100 mr-4"> | |
| <i class="fas fa-check-circle text-gray-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Casos Concluídos</p> | |
| <h3 id="completed-cases" class="text-2xl font-bold">0</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-gray-100 mr-4"> | |
| <i class="fas fa-clock text-gray-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Em Andamento</p> | |
| <h3 id="pending-cases" class="text-2xl font-bold">0</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-gray-100 mr-4"> | |
| <i class="fas fa-calendar-alt text-gray-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Audiências Hoje</p> | |
| <h3 id="today-hearings" class="text-2xl font-bold">0</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold text-gray-800 mb-4">Distribuição de Casos por Status</h3> | |
| <div class="h-64"> | |
| <canvas id="casesChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold text-gray-800 mb-4">Prioridade dos Casos</h3> | |
| <div class="h-64"> | |
| <canvas id="priorityChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Casos Penais Section --> | |
| <section id="casos" class="mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="section-title text-xl font-semibold">Casos Penais</h2> | |
| <button onclick="openAddCaseModal()" class="bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Novo Caso | |
| </button> | |
| </div> | |
| <div id="cases-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Cases will be loaded here --> | |
| </div> | |
| </section> | |
| <!-- Audiências Section --> | |
| <section id="audiencias" class="mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="section-title text-xl font-semibold">Audiências</h2> | |
| <button onclick="openAddHearingModal()" class="bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nova Audiência | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data/Hora</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Processo</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Partes</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="hearings-table" class="bg-white divide-y divide-gray-200"> | |
| <!-- Hearings will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Melhores Práticas Section --> | |
| <section id="praticas" class="mb-8"> | |
| <h2 class="section-title text-xl font-semibold mb-6">Melhores Práticas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="practice-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4"> | |
| <i class="fas fa-file-alt text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Documentação Completa</h3> | |
| <p class="text-gray-600">Mantenha toda a documentação do processo organizada e atualizada. Isso facilita a tomada de decisões e evita atrasos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4"> | |
| <i class="fas fa-users text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Comunicação Clara</h3> | |
| <p class="text-gray-600">Estabeleça canais de comunicação eficazes com promotores, defensores e demais partes envolvidas no processo.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4"> | |
| <i class="fas fa-clock text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Pontualidade</h3> | |
| <p class="text-gray-600">Cumpra rigorosamente os prazos processuais e horários das audiências para garantir a eficiência do sistema.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4"> | |
| <i class="fas fa-search text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Análise Detalhada</h3> | |
| <p class="text-gray-600">Analise cuidadosamente todas as provas e depoimentos antes de tomar decisões que impactam a vida das pessoas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Add Case Modal --> | |
| <div id="addCaseModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-md"> | |
| <div class="flex justify-between items-center border-b border-gray-200 px-6 py-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Adicionar Novo Caso</h3> | |
| <button onclick="closeModal('addCaseModal')" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="case-form"> | |
| <div class="mb-4"> | |
| <label for="case-number" class="block text-gray-700 text-sm font-medium mb-2">Número do Processo</label> | |
| <input type="text" id="case-number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="case-title" class="block text-gray-700 text-sm font-medium mb-2">Título do Caso</label> | |
| <input type="text" id="case-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="case-description" class="block text-gray-700 text-sm font-medium mb-2">Descrição</label> | |
| <textarea id="case-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500"></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="case-priority" class="block text-gray-700 text-sm font-medium mb-2">Prioridade</label> | |
| <select id="case-priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500"> | |
| <option value="alta">Alta</option> | |
| <option value="media" selected>Média</option> | |
| <option value="baixa">Baixa</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="case-status" class="block text-gray-700 text-sm font-medium mb-2">Status</label> | |
| <select id="case-status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500"> | |
| <option value="em-andamento" selected>Em Andamento</option> | |
| <option value="concluido">Concluído</option> | |
| <option value="arquivado">Arquivado</option> | |
| <option value="aguardando">Aguardando</option> | |
| </select> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="flex justify-end border-t border-gray-200 px-6 py-4 space-x-3"> | |
| <button onclick="closeModal('addCaseModal')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">Cancelar</button> | |
| <button onclick="saveCase()" class="px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800">Salvar Caso</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Hearing Modal --> | |
| <div id="addHearingModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-md"> | |
| <div class="flex justify-between items-center border-b border-gray-200 px-6 py-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Agendar Nova Audiência</h3> | |
| <button onclick="closeModal('addHearingModal')" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="hearing-form"> | |
| <div class="mb-4"> | |
| <label for="hearing-case" class="block text-gray-700 text-sm font-medium mb-2">Processo</label> | |
| <select id="hearing-case" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" required> | |
| <option value="">Selecione um processo</option> | |
| <!-- Options will be loaded dynamically --> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="hearing-date" class="block text-gray-700 text-sm font-medium mb-2">Data</label> | |
| <input type="date" id="hearing-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" required> | |
| </div> | |
| <div> | |
| <label for="hearing-time" class="block text-gray-700 text-sm font-medium mb-2">Hora</label> | |
| <input type="time" id="hearing-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" required> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="hearing-type" class="block text-gray-700 text-sm font-medium mb-2">Tipo de Audiência</label> | |
| <select id="hearing-type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500"> | |
| <option value="instrucao">Instrução Processual</option> | |
| <option value="julgamento">Julgamento</option> | |
| <option value="conciliacao">Conciliação</option> | |
| <option value="outras">Outras</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="hearing-parties" class="block text-gray-700 text-sm font-medium mb-2">Partes Envolvidas</label> | |
| <input type="text" id="hearing-parties" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500" placeholder="Promotor, Defensor, Réu..."> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="flex justify-end border-t border-gray-200 px-6 py-4 space-x-3"> | |
| <button onclick="closeModal('addHearingModal')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">Cancelar</button> | |
| <button onclick="saveHearing()" class="px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800">Agendar Audiência</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Dados iniciais | |
| let cases = JSON.parse(localStorage.getItem('cases')) || []; | |
| let hearings = JSON.parse(localStorage.getItem('hearings')) || []; | |
| // Funções para abrir/fechar modais | |
| function openAddCaseModal() { | |
| document.getElementById('addCaseModal').classList.remove('hidden'); | |
| } | |
| function openAddHearingModal() { | |
| populateCaseSelect(); | |
| document.getElementById('addHearingModal').classList.remove('hidden'); | |
| } | |
| function closeModal(modalId) { | |
| document.getElementById(modalId).classList.add('hidden'); | |
| document.getElementById(modalId === 'addCaseModal' ? 'case-form' : 'hearing-form').reset(); | |
| } | |
| // Função para salvar dados no localStorage | |
| function saveData() { | |
| localStorage.setItem('cases', JSON.stringify(cases)); | |
| localStorage.setItem('hearings', JSON.stringify(hearings)); | |
| renderData(); | |
| } | |
| // Função para gerar ID único | |
| function generateId() { | |
| return Date.now().toString(36) + Math.random().toString(36).substr(2); | |
| } | |
| // Função para formatar data | |
| function formatDate(dateString) { | |
| const date = new Date(dateString); | |
| return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }); | |
| } | |
| // Função para formatar hora | |
| function formatTime(timeString) { | |
| return timeString.substring(0, 5); // Remove seconds if present | |
| } | |
| // Função para renderizar casos | |
| function renderCases() { | |
| const container = document.getElementById('cases-container'); | |
| container.innerHTML = ''; | |
| cases.forEach(caseItem => { | |
| const priorityClass = caseItem.priority === 'alta' ? 'priority-high' : | |
| caseItem.priority === 'media' ? 'priority-medium' : 'priority-low'; | |
| const statusText = caseItem.status === 'em-andamento' ? 'Em Andamento' : | |
| caseItem.status === 'concluido' ? 'Concluído' : | |
| caseItem.status === 'arquivado' ? 'Arquivado' : 'Aguardando'; | |
| const caseElement = document.createElement('div'); | |
| caseElement.className = 'card-hover bg-white rounded-lg shadow overflow-hidden flex flex-col'; | |
| caseElement.innerHTML = ` | |
| <div class="p-6 flex-grow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-gray-800">${caseItem.title}</h3> | |
| <div class="flex items-center"> | |
| <span class="${priorityClass} text-xs font-semibold mr-1">${caseItem.priority.toUpperCase()}</span> | |
| <i class="fas fa-circle text-xs ${priorityClass}"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">${caseItem.number}</p> | |
| <p class="text-gray-600 text-sm mb-4">${caseItem.description || 'Sem descrição'}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="status-badge status-${caseItem.status}">${statusText}</span> | |
| <div class="flex space-x-2"> | |
| <button onclick="editCase('${caseItem.id}')" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="deleteCase('${caseItem.id}')" class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(caseElement); | |
| }); | |
| } | |
| // Função para renderizar audiências | |
| function renderHearings() { | |
| const tbody = document.getElementById('hearings-table'); | |
| tbody.innerHTML = ''; | |
| hearings.forEach(hearing => { | |
| const caseItem = cases.find(c => c.id === hearing.caseId); | |
| const hearingType = hearing.type === 'instrucao' ? 'Instrução Processual' : | |
| hearing.type === 'julgamento' ? 'Julgamento' : | |
| hearing.type === 'conciliacao' ? 'Conciliação' : 'Outras'; | |
| const status = 'Agendada'; // You | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alexandremoraisdarosa/testegestor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |