Spaces:
Running
Running
Melhore com as seguintes funcionalidades: <!-- Painel de campos personalizados --> <div id="custom-fields-admin"> <h2>Gerenciar Campos Personalizados</h2> <input type="text" id="novoCampoNome" placeholder="Nome do campo"> <select id="novoCampoTipo"> <option value="text">Texto</option> <option value="date">Data</option> <option value="number">Número</option> <!-- Adicione outros tipos --> </select> <button onclick="adicionarCampoPersonalizado()">Adicionar Campo</button> <ul id="listaCamposPersonalizados"></ul> </div> - Follow Up Deployment
109c5b6 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 Legais</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> | |
| .percent-bar { | |
| height: 17px; | |
| background: #eee; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .percent-fill { | |
| background: #4caf50; | |
| height: 100%; | |
| border-radius: 5px; | |
| transition: width 0.3s ease; | |
| } | |
| .completed-row { | |
| background-color: rgba(200, 255, 200, 0.3); | |
| } | |
| .input-date-empty[type="text"] { | |
| color: #6b7280; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen p-4 md:p-6 font-sans text-gray-800"> | |
| <div class="max-w-7xl mx-auto flex gap-6"> | |
| <!-- Sidebar Navigation --> | |
| <div class="w-64 hidden lg:block space-y-4"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-gradient-to-r from-purple-600 to-purple-800 px-4 py-3"> | |
| <h2 class="text-lg font-semibold text-white"> | |
| <i class="fas fa-bars mr-2"></i>Menu | |
| </h2> | |
| </div> | |
| <div class="p-4 space-y-2"> | |
| <button onclick="document.getElementById('dashboard').scrollIntoView()" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-tachometer-alt w-5"></i> | |
| <span>Dashboard</span> | |
| </button> | |
| <button onclick="document.getElementById('casesTable').scrollIntoView()" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-gavel w-5"></i> | |
| <span>Casos Legais</span> | |
| </button> | |
| <button onclick="abrirModalFields()" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-tasks w-5"></i> | |
| <span>Tarefas</span> | |
| </button> | |
| <button onclick="showTab('Entidades')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>Administração</span> | |
| </button> | |
| <button onclick="exportarDados()" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-file-export w-5"></i> | |
| <span>Exportar Dados</span> | |
| </button> | |
| <button onclick="document.getElementById('systemConfigForm').scrollIntoView()" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-user-cog w-5"></i> | |
| <span>Configurações</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h1 class="text-2xl md:text-3xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-balance-scale mr-3 text-blue-600"></i> | |
| Gestão de Casos Legais | |
| </h1> | |
| <div class="flex items-center space-x-2"> | |
| <span id="current-date" class="text-sm text-gray-500"></span> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 text-blue-700 rounded"> | |
| <p class="flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| Sistema de gestão para acompanhamento de casos jurídicos, tarefas e prazos. | |
| </p> | |
| </div> | |
| </header> | |
| <!-- Dashboard --> | |
| <section id="dashboard" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"></section> | |
| <!-- Admin Panel --> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden mb-6 fade-in"> | |
| <div class="bg-gradient-to-r from-purple-600 to-purple-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-user-shield mr-2"></i> | |
| Painel do Administrador | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Tab Buttons --> | |
| <div class="flex border-b border-gray-200 mb-4"> | |
| <button id="tabEntidades" onclick="showTab('Entidades')" class="px-4 py-2 font-medium text-sm border-b-2 border-purple-600 text-purple-600"> | |
| <i class="fas fa-database mr-2"></i>Entidades | |
| </button> | |
| <button id="tabCampos" onclick="showTab('Campos')" class="px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-list-check mr-2"></i>Campos | |
| </button> | |
| <button id="tabExportar" onclick="showTab('Exportar')" class="px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-file-export mr-2"></i>Exportar Dados | |
| </button> | |
| <button id="tabConfig" onclick="showTab('Config')" class="px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-cog mr-2"></i>Configurações | |
| </button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div id="tabContentEntidades" class="tab-content active"> | |
| <div class="bg-gray-50 p-4 rounded-lg border"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-lg"><i class="fas fa-database mr-2"></i>Entidades</h3> | |
| <button onclick="adicionarNovaEntidade()" class="bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700"> | |
| <i class="fas fa-plus mr-1"></i> Nova Entidade | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tabela</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 class="bg-white divide-y divide-gray-200" id="entidadesList"> | |
| <!-- Entidades serão carregadas aqui --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tabContentCampos" class="tab-content hidden"> | |
| <div class="bg-gray-50 p-4 rounded-lg border"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-lg"><i class="fas fa-list-check mr-2"></i>Campos</h3> | |
| <button onclick="adicionarNovoCampo()" class="bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700"> | |
| <i class="fas fa-plus mr-1"></i> Novo Campo | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entidade</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</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">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="camposList"> | |
| <!-- Campos serão carregados aqui --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tabContentExportar" class="tab-content hidden"> | |
| <div class="bg-gray-50 p-4 rounded-lg border"> | |
| <h3 class="font-medium text-lg mb-4"><i class="fas fa-file-export mr-2"></i>Exportação de Dados</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-4 rounded-lg border shadow-sm"> | |
| <h4 class="font-medium mb-3"><i class="fas fa-file-excel mr-2 text-green-600"></i>Excel</h4> | |
| <p class="text-sm text-gray-600 mb-3">Exportar todos os casos para planilha Excel.</p> | |
| <button onclick="exportarParaExcel()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-download mr-1"></i> Exportar Excel | |
| </button> | |
| <script> | |
| function exportarParaExcel() { | |
| const data = JSON.parse(localStorage.getItem(LS_KEY) || "[]"); | |
| let csv = 'Número,Título,Cliente,Status,Data Abertura\n'; | |
| data.forEach(caso => { | |
| csv += `"${caso.numero}","${caso.titulo}","${caso.cliente}","${caso.status}","${caso.data_abertura}"\n`; | |
| }); | |
| const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); | |
| const url = URL.createObjectURL(blob); | |
| const link = document.createElement('a'); | |
| link.href = url; | |
| link.setAttribute('download', 'casos_legais.csv'); | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| </script> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border shadow-sm"> | |
| <h4 class="font-medium mb-3"><i class="fas fa-file-pdf mr-2 text-red-600"></i>PDF</h4> | |
| <p class="text-sm text-gray-600 mb-3">Gerar relatório em PDF com todos os casos.</p> | |
| <button onclick="exportarParaPDF()" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-download mr-1"></i> Exportar PDF | |
| </button> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border shadow-sm"> | |
| <h4 class="font-medium mb-3"><i class="fas fa-file-code mr-2 text-blue-600"></i>JSON</h4> | |
| <p class="text-sm text-gray-600 mb-3">Exportar dados em formato JSON completo.</p> | |
| <button onclick="exportarParaJSON()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-download mr-1"></i> Exportar JSON | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tabContentConfig" class="tab-content hidden"> | |
| <!-- Custom Fields Panel --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6"> | |
| <div class="bg-gradient-to-r from-purple-600 to-purple-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white"> | |
| <i class="fas fa-list-check mr-2"></i>Campos Personalizados | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row gap-4 mb-6"> | |
| <input type="text" id="novoCampoNome" placeholder="Nome do campo" | |
| class="flex-1 px-3 py-2 border border-gray-300 rounded-md"> | |
| <select id="novoCampoTipo" class="px-3 py-2 border border-gray-300 rounded-md"> | |
| <option value="text">Texto</option> | |
| <option value="date">Data</option> | |
| <option value="number">Número</option> | |
| <option value="select">Seleção</option> | |
| <option value="checkbox">Checkbox</option> | |
| </select> | |
| <button onclick="adicionarCampoPersonalizado()" | |
| class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md"> | |
| <i class="fas fa-plus mr-2"></i> Adicionar | |
| </button> | |
| </div> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <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">Nome</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">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="listaCamposPersonalizados" class="bg-white divide-y divide-gray-200"> | |
| <!-- Campos serão listados aqui --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 border border-gray-200"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="defaultStatus" class="block text-sm font-medium text-gray-700 mb-1">Status Padrão</label> | |
| <select id="defaultStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option value="Andamento">Em Andamento</option> | |
| <option value="Concluído">Concluído</option> | |
| <option value="Suspenso">Suspenso</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="backupInterval" class="block text-sm font-medium text-gray-700 mb-1">Intervalo Backup (dias)</label> | |
| <input type="number" id="backupInterval" min="1" value="7" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button type="submit" | |
| class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md"> | |
| <i class="fas fa-save mr-2"></i> Salvar Configurações | |
| </button> | |
| </div> | |
| </div> | |
| <form id="systemConfigForm" class="hidden"> | |
| <!-- Config form content here --> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modal Entidades --> | |
| <div id="modalEntidades" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[80vh] overflow-hidden flex flex-col"> | |
| <div class="bg-purple-700 px-6 py-4 flex justify-between items-center"> | |
| <h3 class="text-xl font-semibold text-white"> | |
| <i class="fas fa-database mr-2"></i>Gerenciar Entidades | |
| </h3> | |
| <button onclick="fecharModalEntidades()" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-6 overflow-y-auto flex-grow"> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2">Entidades Disponíveis</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> | |
| <div class="entity-card bg-gray-50 p-3 rounded border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">Casos</span> | |
| <div class="flex space-x-1"> | |
| <button class="text-blue-600 hover:text-blue-800" onclick="editarEntidade('Casos')"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-800" onclick="excluirEntidade('Casos')"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Campos: 8</div> | |
| </div> | |
| <div class="entity-card bg-gray-50 p-3 rounded border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">Tarefas</span> | |
| <div class="flex space-x-1"> | |
| <button class="text-blue-600 hover:text-blue-800" onclick="editarEntidade('Tarefas')"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-800" onclick="excluirEntidade('Tarefas')"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Campos: 10</div> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="font-medium mb-2 mt-6">Adicionar Nova Entidade</h4> | |
| <form id="entityForm"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome da Entidade</label> | |
| <input type="text" id="entityName" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tabela no Banco</label> | |
| <input type="text" id="entityTable" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4 space-x-2"> | |
| <button type="button" onclick="fecharModalEntidades()" | |
| class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md"> | |
| Cancelar | |
| </button> | |
| <button type="submit" | |
| class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md"> | |
| <i class="fas fa-save mr-2"></i> Salvar Entidade | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Left Column --> | |
| <div class="flex-1"> | |
| <!-- Add Case Form --> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden mb-6 fade-in"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> | |
| Adicionar Novo Caso | |
| </h2> | |
| </div> | |
| <form id="caseForm" class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="numero" class="block text-sm font-medium text-gray-700 mb-1">Nº do Caso/Processo</label> | |
| <input type="text" id="numero" placeholder="Ex: 0001234-56.2023.4.02.0000" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="titulo" class="block text-sm font-medium text-gray-700 mb-1">Título/Assunto</label> | |
| <input type="text" id="titulo" placeholder="Ex: Ação de Indenização" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="cliente" class="block text-sm font-medium text-gray-700 mb-1">Cliente</label> | |
| <input type="text" id="cliente" placeholder="Nome completo do cliente" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contato" class="block text-sm font-medium text-gray-700 mb-1">Contato</label> | |
| <input type="text" id="contato" placeholder="Telefone/Email" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="partes" class="block text-sm font-medium text-gray-700 mb-1">Partes Envolvidas</label> | |
| <input type="text" id="partes" placeholder="Ex: Autor vs. Réu" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="data_abertura" class="block text-sm font-medium text-gray-700 mb-1">Data de Abertura</label> | |
| <input type="date" id="data_abertura" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select id="status" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="" disabled selected>Selecione...</option> | |
| <option value="Andamento">Em Andamento</option> | |
| <option value="Concluído">Concluído</option> | |
| <option value="Suspenso">Suspenso</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2 flex justify-end"> | |
| <button type="submit" | |
| class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md shadow-md flex items-center transition duration-200"> | |
| <i class="fas fa-save mr-2"></i> Cadastrar Caso | |
| </button> | |
| </div> | |
| </form> | |
| </section> | |
| <!-- Cases Table --> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden fade-in"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-gavel mr-2"></i> | |
| Casos Legais Cadastrados | |
| </h2> | |
| </div> | |
| <div class="p-4 overflow-x-auto"> | |
| <table id="casesTable" class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-blue-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Nº Caso</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Título</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Cliente</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Tasks Section (hidden by default) --> | |
| <div id="tasksSection" class="hidden flex-1"> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden fade-in"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-tasks mr-2"></i> | |
| Atividades do Caso: <span id="caseTitle" class="ml-2"></span> | |
| </h2> | |
| </div> | |
| <!-- Alerts --> | |
| <div id="alertas" class="p-4 space-y-2"></div> | |
| <!-- Add Task Form --> | |
| <form id="taskForm" class="p-6 grid grid-cols-1 gap-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="fase" class="block text-sm font-medium text-gray-700 mb-1">Fase do Processo</label> | |
| <input type="text" id="fase" placeholder="Ex: Inicial, Contestação, Sentença" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="tarefa" class="block text-sm font-medium text-gray-700 mb-1">Descrição da Tarefa</label> | |
| <input type="text" id="tarefa" placeholder="Ex: Elaborar petição inicial" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="responsavel" class="block text-sm font-medium text-gray-700 mb-1">Responsável</label> | |
| <input type="text" id="responsavel" placeholder="Nome do advogado" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="inicio" class="block text-sm font-medium text-gray-700 mb-1">Data Início</label> | |
| <input type="date" id="inicio" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="prazo" class="block text-sm font-medium text-gray-700 mb-1">Data Prazo</label> | |
| <input type="date" id="prazo" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="audiencia" class="block text-sm font-medium text-gray-700 mb-1">Data de Audiência</label> | |
| <input type="text" id="audiencia" placeholder="Clique para selecionar" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md input-date-empty focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| onfocus="this.type='date'" | |
| onblur="if(!this.value) {this.type='text'; this.classList.add('input-date-empty');} else {this.classList.remove('input-date-empty');}"> | |
| </div> | |
| <div> | |
| <label for="horas" class="block text-sm font-medium text-gray-700 mb-1">Horas Estimadas</label> | |
| <input type="number" id="horas" min="0" step="0.2" placeholder="Ex: 5.5" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="percentual" class="block text-sm font-medium text-gray-700 mb-1">% Concluído</label> | |
| <input type="number" id="percentual" min="0" max="100" placeholder="0 a 100" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="documento" class="block text-sm font-medium text-gray-700 mb-1">Documento/Arquivo</label> | |
| <div class="flex"> | |
| <input type="text" id="documento" placeholder="Nome do documento (simulado)" | |
| class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button type="button" | |
| class="bg-gray-200 hover:bg-gray-300 px-4 rounded-r-md border border-l-0 border-gray-300" | |
| onclick="document.getElementById('documento').value = 'documento_' + Math.floor(Math.random()*1000) + '.pdf'"> | |
| <i class="fas fa-file-import"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="submit" | |
| class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md shadow-md flex items-center transition duration-200"> | |
| <i class="fas fa-plus-circle mr-2"></i> Adicionar Tarefa | |
| </button> | |
| <button type="button" onclick="fecharCaso()" | |
| class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-md shadow-md flex items-center transition duration-200"> | |
| <i class="fas fa-arrow-left mr-2"></i> Voltar | |
| </button> | |
| </div> | |
| </form> | |
| </section> | |
| <!-- Tasks Table --> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden mt-6 fade-in"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-white flex items-center"> | |
| <i class="fas fa-list-check mr-2"></i> | |
| Lista de Atividades | |
| </h2> | |
| </div> | |
| <div class="p-4 overflow-x-auto"> | |
| <table id="tasksTable" class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-blue-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Fase</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Tarefa</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Resp.</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Prazo</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Progresso</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> <!-- Close flex-1 --> | |
| </div> <!-- Close flex container --> | |
| <!-- Mobile Menu Button --> | |
| <div class="lg:hidden fixed bottom-4 right-4 z-40"> | |
| <button onclick="document.querySelector('.mobile-menu').classList.toggle('hidden')" | |
| class="bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div class="mobile-menu hidden fixed inset-0 z-50 bg-black bg-opacity-50"> | |
| <div class="absolute top-0 left-0 w-64 h-full bg-white shadow-lg transform transition-transform"> | |
| <div class="flex justify-between items-center bg-purple-700 px-4 py-3"> | |
| <h2 class="text-lg font-semibold text-white">Menu</h2> | |
| <button onclick="document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 space-y-2"> | |
| <button onclick="document.getElementById('dashboard').scrollIntoView(); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-tachometer-alt w-5"></i> | |
| <span>Dashboard</span> | |
| </button> | |
| <button onclick="document.getElementById('casesTable').scrollIntoView(); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-gavel w-5"></i> | |
| <span>Casos Legais</span> | |
| </button> | |
| <button onclick="abrirModalFields(); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-tasks w-5"></i> | |
| <span>Tarefas</span> | |
| </button> | |
| <button onclick="showTab('Entidades'); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>Administração</span> | |
| </button> | |
| <button onclick="exportarDados(); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-file-export w-5"></i> | |
| <span>Exportar Dados</span> | |
| </button> | |
| <button onclick="document.getElementById('systemConfigForm').scrollIntoView(); document.querySelector('.mobile-menu').classList.add('hidden')" | |
| class="w-full flex items-center space-x-2 px-3 py-2 text-left rounded-md hover:bg-purple-50 text-gray-700 hover:text-purple-700 transition"> | |
| <i class="fas fa-user-cog w-5"></i> | |
| <span>Configurações</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const LS_KEY = 'legal_cases_full'; | |
| let casos = []; | |
| let casoIdxSelecionado = null; | |
| // Initialize basic functions | |
| function abrirModalFields() { | |
| alert("Modal de tarefas será aberto aqui"); | |
| } | |
| function exportarDados() { | |
| alert("Exportação de dados será implementada aqui"); | |
| } | |
| function fecharModalEntidades() { | |
| document.getElementById('modalEntidades').classList.add('hidden'); | |
| } | |
| function adicionarNovaEntidade() { | |
| alert("Adicionar nova entidade será implementado aqui"); | |
| } | |
| function editarEntidade(nome) { | |
| alert(`Editar entidade ${nome} será implementado aqui`); | |
| } | |
| function excluirEntidade(nome) { | |
| if(confirm(`Tem certeza que deseja excluir a entidade ${nome}?`)) { | |
| alert(`Entidade ${nome} será excluída`); | |
| } | |
| } | |
| function fecharCaso() { | |
| document.getElementById('tasksSection').classList.add('hidden'); | |
| } | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showTab('Entidades'); | |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('pt-BR', { | |
| weekday: 'long', | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric' | |
| }); | |
| // Load any saved data | |
| carregarLocalStorage(); | |
| }); | |
| function carregarLocalStorage() { | |
| casos = JSON.parse(localStorage.getItem(LS_KEY) || "[]"); | |
| carregarCamposPersonalizados(); | |
| } | |
| // Custom Fields Management | |
| let camposPersonalizados = JSON.parse(localStorage.getItem('custom_fields') || "[]"); | |
| function carregarCamposPersonalizados() { | |
| const lista = document.getElementById('listaCamposPersonalizados'); | |
| lista.innerHTML = ''; | |
| camposPersonalizados.forEach((campo, index) => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campo.nome}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campo.tipo}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button onclick="editarCampoPersonalizado(${index})" class="text-blue-600 hover:text-blue-900 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="removerCampoPersonalizado(${index})" class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| `; | |
| lista.appendChild(row); | |
| }); | |
| } | |
| function adicionarCampoPersonalizado() { | |
| const nome = document.getElementById('novoCampoNome').value.trim(); | |
| const tipo = document.getElementById('novoCampoTipo').value; | |
| if (!nome) { | |
| alert('Por favor, insira um nome para o campo'); | |
| return; | |
| } | |
| camposPersonalizados.push({ nome, tipo }); | |
| localStorage.setItem('custom_fields', JSON.stringify(camposPersonalizados)); | |
| document.getElementById('novoCampoNome').value = ''; | |
| carregarCamposPersonalizados(); | |
| } | |
| function editarCampoPersonalizado(index) { | |
| const campo = camposPersonalizados[index]; | |
| const novoNome = prompt('Editar nome do campo:', campo.nome); | |
| if (novoNome !== null) { | |
| campo.nome = novoNome.trim(); | |
| localStorage.setItem('custom_fields', JSON.stringify(camposPersonalizados)); | |
| carregarCamposPersonalizados(); | |
| } | |
| } | |
| function removerCampoPersonalizado(index) { | |
| if (confirm('Tem certeza que deseja remover este campo?')) { | |
| camposPersonalizados.splice(index, 1); | |
| localStorage.setItem('custom_fields', JSON.stringify(camposPersonalizados)); | |
| carregarCamposPersonalizados(); | |
| } | |
| } | |
| function salvarLocalStorage() { | |
| localStorage.setItem(LS_KEY, JSON.stringify(casos)); | |
| } | |
| // Tab switching function | |
| function showTab(tabName) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.add('hidden'); | |
| tab.classList.remove('active'); | |
| }); | |
| // Remove active state from all tab buttons | |
| document.querySelectorAll('[id^="tab"]').forEach(btn => { | |
| btn.classList.remove('border-b-2', 'border-purple-600', 'text-purple-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| // Show selected tab | |
| const tabContent = document.getElementById(`tabContent${tabName}`); | |
| if (tabContent) { | |
| tabContent.classList.remove('hidden'); | |
| tabContent.classList.add('active'); | |
| // Highlight active tab button | |
| const tabButton = document.getElementById(`tab${tabName}`); | |
| if (tabButton) { | |
| tabButton.classList.remove('text-gray-500'); | |
| tabButton.classList.add('border-b-2', 'border-purple-600', 'text-purple-600'); | |
| } | |
| } | |
| } | |
| // Initialize with first tab active | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showTab('Entidades'); | |
| }); | |
| // Set current date | |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('pt-BR', { | |
| weekday: 'long', | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric' | |
| }); | |
| // Functions | |
| 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(); | |
| idxTarefaEdicao = null; | |
| document.querySelector('#taskForm button[type="submit"] i').className = 'fas fa-plus-circle mr-2'; | |
| } | |
| <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/rmcr-gestor-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |