Spaces:

alexandremoraisdarosa
/

testegestor

Running

testegestor / README.md

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">  <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 class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">  <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>  <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>  <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">  </div> </section>  <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">  </tbody> </table> </div> </section>  <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>  <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>  <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>  </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 6 days ago

preview code

raw

history blame contribute delete

214 Bytes

metadata

title: testegestor
emoji: 🐳
colorFrom: green
colorTo: yellow
sdk: static
pinned: false
tags:
  - deepsite

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference