Crie e implemente a partir do seguinte código: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Gestão de Casos Legais</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f4f4f4;} h1, h2 { color: #2b3e50; } section { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 22px;} table { border-collapse: collapse; width: 100%; margin-bottom: 20px;} th, td { border: 1px solid #ccc; padding: 7px; text-align: left;} th { background-color: #e0e9f4; } tr.completed { background-color: #c0ffc0;} .percent-bar { height: 17px; background: #eee; border-radius: 6px; overflow: hidden;} .percent-fill { background: #4caf50; height: 100%; border-radius: 5px;} .alert { background: #ffe1bb; border: 1px solid #e38b2f; color: #a05f08; padding: 8px 12px; margin-bottom:10px; border-radius: 5px;} .btn { padding: 2px 7px; border: none; border-radius: 3px; cursor: pointer; } .btn-edit { background: #ffc107; } .btn-del { background: #e53935; color: #fff;} .btn-doc { background: #2196f3; color: #fff;} .dashboard { display: flex; gap: 14px; } .dbox { background:#e3ecfb; border-radius:7px; padding:12px 18px; text-align:center; flex:1; } </style> </head> <body> <h1>Gestão de Casos Legais - Local</h1> <section class="dashboard" id="dashboard"></section> <section> <h2>Adicionar Novo Caso</h2> <form id="caseForm"> <input type="text" id="numero" placeholder="Nº do Caso/Processo" required> <input type="text" id="titulo" placeholder="Título/Assunto do Caso" required> <input type="text" id="cliente" placeholder="Nome do Cliente" required> <input type="text" id="contato" placeholder="Contato/Telefone" required> <input type="text" id="partes" placeholder="Partes Envolvidas" required> <input type="date" id="data_abertura" required> <select id="status" required> <option value="" disabled selected>Status</option> <option value="Andamento">Em Andamento</option> <option value="Concluído">Concluído</option> <option value="Suspenso">Suspenso</option> </select> <button type="submit">Adicionar Caso</button> </form> </section> <section> <h2>Casos Legais Cadastrados</h2> <table id="casesTable"> <thead> <tr> <th>Nº Caso</th> <th>Título</th> <th>Cliente</th> <th>Partes</th> <th>Contato</th> <th>Abertura</th> <th>Status</th> <th>Ações</th> </tr> </thead> <tbody></tbody> </table> </section> <section id="tasksSection" style="display:none;"> <h2>Atividades do Caso: <span id="caseTitle"></span></h2> <form id="taskForm"> <input type="text" id="fase" placeholder="Fase (ex: Inicial)" required> <input type="text" id="tarefa" placeholder="Descrição da Tarefa" required> <input type="text" id="responsavel" placeholder="Responsável" required> <input type="date" id="inicio" required> <input type="date" id="prazo" required> <input type="text" id="audiencia" placeholder="Data de Audiência (opcional)" onfocus="(this.type='date')" onblur="(this.type='text')"> <input type="number" id="horas" min="0" step="0.2" placeholder="Horas Estimadas" required> <input type="number" id="percentual" min="0" max="100" placeholder="% Concluído" required> <input type="text" id="documento" placeholder="Documento/Arquivo (simulado)"> <button type="submit">Adicionar Tarefa</button> </form> <div id="alertas"></div> <table id="tasksTable"> <thead> <tr> <th>Fase</th> <th>Tarefa</th> <th>Responsável</th> <th>Início</th> <th>Prazo</th> <th>Data Audiência</th> <th>Horas</th> <th>%</th> <th>Documento</th> <th>Ações</th> </tr> </thead> <tbody></tbody> </table> <button onclick="fecharCaso()">Voltar à lista de casos</button> </section> <script> const LS_KEY = 'legal_cases_full'; let casos = []; let casoIdxSelecionado = null; function salvarLocalStorage() { localStorage.setItem(LS_KEY, JSON.stringify(casos)); } function carregarLocalStorage() { casos = JSON.parse(localStorage.getItem(LS_KEY) || "[]"); } function limparFormCaso() { document.getElementById('caseForm').reset(); } function limparFormTarefa() { document.getElementById('taskForm').reset(); } function renderDashboard() { let totalCasos = casos.length; let totalTarefas = casos.reduce((a,c) => a + (c.tarefas.length), 0); let concluidas = casos.reduce((a,c) => a + c.tarefas.filter(t=>Number(t.percentual)===100).length, 0); let allPercent = []; casos.forEach(c=>c.tarefas.forEach(t => allPercent.push(Number(t.percentual) || 0))); let mediaPercent = allPercent.length ? (allPercent.reduce((a,b)=>a+b,0)/allPercent.length).toFixed(1) : 0; document.getElementById('dashboard').innerHTML = ` <div class="dbox"><b>Total de Casos:</b><br>${totalCasos}</div> <div class="dbox"><b>Total de Tarefas:</b><br>${totalTarefas}</div> <div class="dbox"><b>Tarefas Concluídas:</b><br>${concluidas}</div> <div class="dbox"><b>Média % Concluído:</b><br>${mediaPercent}%</div> `; } function renderCases() { const tbody = document.getElementById('casesTable').querySelector('tbody'); tbody.innerHTML = ''; casos.forEach((c, i) => { let tr = document.createElement('tr'); tr.innerHTML = ` <td>${c.numero}</td> <td>${c.titulo}</td> <td>${c.cliente}</td> <td>${c.partes}</td> <td>${c.contato}</td> <td>${c.data_abertura}</td> <td>${c.status}</td> <td> <button class="btn btn-edit" onclick="abrirTarefas(${i})">Detalhar</button> <button class="btn btn-del" onclick="removerCaso(${i})">Excluir</button> </td> `; tbody.appendChild(tr); }); renderDashboard(); } window.removerCaso = function(idx) { if(confirm("Excluir esse caso e todas suas tarefas?")) { casos.splice(idx,1); salvarLocalStorage(); renderCases(); } }; document.getElementById("caseForm").onsubmit = function(ev) { ev.preventDefault(); let c = {}; ["numero","titulo","cliente","contato","partes","data_abertura","status"].forEach(id=>c[id]=document.getElementById(id).value); c.tarefas = []; casos.push(c); salvarLocalStorage(); limparFormCaso(); renderCases(); }; window.abrirTarefas = function(idx) { casoIdxSelecionado = idx; document.getElementById('tasksSection').style.display='block'; document.getElementById('caseTitle').innerText = casos[idx].titulo; fecharAlertas(); renderTasks(); window.scrollTo({ top: 0, behavior: 'smooth' }); }; window.fecharCaso = function() { casoIdxSelecionado = null; document.getElementById('tasksSection').style.display = 'none'; fecharAlertas(); }; function renderTasks() { if(casoIdxSelecionado==null) return; const tbody = document.getElementById('tasksTable').querySelector('tbody'); tbody.innerHTML = ''; let tarefas = (casos[casoIdxSelecionado]||{}).tarefas || []; tarefas.forEach((t, i) => { let tr = document.createElement('tr'); if(Number(t.percentual)===100) tr.classList.add('completed'); tr.innerHTML = ` <td>${t.fase}</td> <td>${t.tarefa}</td> <td>${t.responsavel}</td> <td>${t.inicio}</td> <td>${t.prazo}</td> <td>${t.audiencia || '-'}</td> <td>${t.horas}</td> <td> <div class="percent-bar"><div class="percent-fill" style="width:${t.percentual}%"></div></div> ${t.percentual}% </td> <td> ${t.documento ? `<button class="btn btn-doc" title="Ver documento">${t.documento}</button>`:'-'} </td> <td> <button class="btn btn-edit" onclick="editarTarefa(${i})">Editar</button> <button class="btn btn-del" onclick="removerTarefa(${i})">Excluir</button> </td> `; tbody.appendChild(tr); }); exibirAlertas(); } document.getElementById("taskForm").onsubmit = function(ev) { ev.preventDefault(); let t = {}; ["fase","tarefa","responsavel","inicio","prazo","audiencia","horas","percentual","documento"] .forEach(id => t[id]=document.getElementById(id).value); casos[casoIdxSelecionado].tarefas.push(t); salvarLocalStorage(); limparFormTarefa(); renderTasks(); }; window.removerTarefa = function(idx) { if(confirm("Remover esta atividade?")) { casos[casoIdxSelecionado].tarefas.splice(idx,1); salvarLocalStorage(); renderTasks(); } }; let idxTarefaEdicao = null; window.editarTarefa = function(idx){ let t = casos[casoIdxSelecionado].tarefas[idx]; ["fase","tarefa","responsavel","inicio","prazo","audiencia","horas","percentual","documento"] .forEach(id => document.getElementById(id).value = t[id]); idxTarefaEdicao = idx; document.getElementById("taskForm").onsubmit = function(ev){ ev.preventDefault(); let tt = {}; ["fase","tarefa","responsavel","inicio","prazo","audiencia","horas","percentual","documento"] .forEach(id => tt[id] = document.getElementById(id).value); casos[casoIdxSelecionado].tarefas[idxTarefaEdicao] = tt; salvarLocalStorage(); limparFormTarefa(); renderTasks(); document.getElementById("taskForm").onsubmit = formPadraoTarefa; idxTarefaEdicao = null; } }; const formPadraoTarefa = document.getElementById("taskForm").onsubmit; function exibirAlertas() { let alertas = []; let hoje = new Date().toISOString().slice(0,10); casos[casoIdxSelecionado].tarefas.forEach((t,i)=>{ if(Number(t.percentual)<100 && t.prazo <= hoje) { alertas.push(`Tarefa '${t.tarefa}' (prazo ${t.prazo}) está vencida!`); } else if(Number(t.percentual)<100) { let diff = (new Date(t.prazo) - new Date(hoje))/(1000*3600*24); if(diff >=0 && diff <=3) alertas.push(`Tarefa '${t.tarefa}' (prazo ${t.prazo}) vence em ${Math.round(diff)} dia(s)!`); } if(t.audiencia && t.audiencia >= hoje) { let adiff = (new Date(t.audiencia) - new Date(hoje))/(1000*3600*24); if(adiff >=0 && adiff<=3) alertas.push(`Audiência de '${t.tarefa}' marcada para ${t.audiencia} em ${Math.round(adiff)} dia(s)!`); } }); let alertaDiv = document.getElementById('alertas'); alertaDiv.innerHTML = ''; alertas.forEach(a => { let d = document.createElement('div'); d.className = 'alert'; d.innerText = a; alertaDiv.appendChild(d); }); } function fecharAlertas() { document.getElementById('alertas').innerHTML = ''; } window.onload = function(){ carregarLocalStorage(); renderCases(); fecharCaso(); }; </script> </body> </html> - Initial Deployment
verified 
