Spaces:

alexandremoraisdarosa
/

testegestor

Running

App Files Files Community

alexandremoraisdarosa commited on 6 days ago

Commit

cbd2955

verified ·

1 Parent(s): e42df1e

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

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +542 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Testegestor
-emoji: 🏃
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+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

index.html CHANGED Viewed

@@ -1,19 +1,542 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <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>