| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LegalData Manager - Gestão de Processos Jurídicos</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"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> |
| <script src="https://apis.google.com/js/api.js"></script> |
| <script src="https://accounts.google.com/gsi/client" async defer></script> |
| <style> |
| .sidebar { transition: all 0.3s ease; } |
| .sidebar.collapsed { width: 0; overflow: hidden; } |
| .data-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } |
| .process-detail { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; } |
| .process-detail.active { max-height: 1000px; } |
| .tab-content { display: none; } |
| .tab-content.active { display: block; animation: fadeIn 0.5s; } |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| .evidence-card:hover { transform: scale(1.03); } |
| .lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9); } |
| .lightbox.active { display: flex; } |
| .drop-zone { border: 2px dashed #c7d2fe; transition: all 0.3s; } |
| .drop-zone.dragover { border-color: #6366f1; background: #eef2ff; } |
| .nav-link.active-nav { background: rgba(79,70,229,0.3); border-right: 3px solid #a5b4fc; } |
| .aasp-pulse { animation: pulse 2s infinite; } |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} } |
| .toast { transform: translateX(120%); transition: transform 0.4s ease; } |
| .toast.show { transform: translateX(0); } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div> |
|
|
| |
| <div id="lightbox" class="lightbox items-center justify-center" onclick="closeLightbox()"> |
| <button class="absolute top-4 right-4 text-white text-3xl hover:text-gray-300 z-10" onclick="closeLightbox()"><i class="fas fa-times"></i></button> |
| <button class="absolute left-4 top-1/2 -translate-y-1/2 text-white text-3xl hover:text-gray-300 z-10" onclick="event.stopPropagation();navigateEvidence(-1)"><i class="fas fa-chevron-left"></i></button> |
| <button class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-3xl hover:text-gray-300 z-10" onclick="event.stopPropagation();navigateEvidence(1)"><i class="fas fa-chevron-right"></i></button> |
| <div class="max-w-4xl max-h-screen p-8" onclick="event.stopPropagation()"> |
| <div id="lightbox-content" class="flex items-center justify-center"></div> |
| <p id="lightbox-caption" class="text-white text-center mt-4 text-lg"></p> |
| </div> |
| </div> |
|
|
| <div class="flex h-screen overflow-hidden"> |
| |
| <div id="sidebar" class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0"> |
| <div class="p-4 flex items-center space-x-3 border-b border-indigo-800"> |
| <i class="fas fa-balance-scale text-2xl text-indigo-300"></i> |
| <h1 class="text-xl font-bold">LegalData Manager</h1> |
| </div> |
| <nav class="p-4 overflow-y-auto" style="max-height: calc(100vh - 80px);"> |
| <div class="mb-6"> |
| <h3 class="text-xs uppercase text-indigo-400 font-semibold mb-3">Menu Principal</h3> |
| <ul> |
| <li class="mb-1"><a href="#" class="nav-link active-nav flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('dashboard', this)"><i class="fas fa-tachometer-alt mr-3 w-5 text-center"></i>Dashboard</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('processos', this)"><i class="fas fa-folder-open mr-3 w-5 text-center"></i>Processos</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('clientes', this)"><i class="fas fa-users mr-3 w-5 text-center"></i>Clientes</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('provas', this)"><i class="fas fa-images mr-3 w-5 text-center"></i>Galeria de Provas</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('intimacoes', this)"><i class="fas fa-gavel mr-3 w-5 text-center"></i>Intimações AASP</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('import', this)"><i class="fas fa-file-import mr-3 w-5 text-center"></i>Importar Dados</a></li> |
| </ul> |
| </div> |
| <div class="mb-6"> |
| <h3 class="text-xs uppercase text-indigo-400 font-semibold mb-3">Administração</h3> |
| <ul> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('config', this)"><i class="fas fa-cog mr-3 w-5 text-center"></i>Configurações</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('sanitize', this)"><i class="fas fa-broom mr-3 w-5 text-center"></i>Sanitização</a></li> |
| <li class="mb-1"><a href="#" class="nav-link flex items-center p-2 rounded hover:bg-indigo-800 transition" onclick="showTab('integrations', this)"><i class="fas fa-plug mr-3 w-5 text-center"></i>Integrações</a></li> |
| </ul> |
| </div> |
| <div class="mb-6"> |
| <h3 class="text-xs uppercase text-indigo-400 font-semibold mb-3">Portal</h3> |
| <ul> |
| <li class="mb-1"><a href="cliente.html" class="flex items-center p-2 rounded hover:bg-indigo-800 transition"><i class="fas fa-external-link-alt mr-3 w-5 text-center"></i>Portal do Cliente</a></li> |
| </ul> |
| </div> |
| <div class="mt-4 pt-4 border-t border-indigo-800"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center"><i class="fas fa-user"></i></div> |
| <div> |
| <p class="font-medium">Admin</p> |
| <p class="text-xs text-indigo-300">admin@legaldata.com</p> |
| </div> |
| </div> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-40"> |
| <div class="flex justify-between items-center p-4"> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-500 md:hidden" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button> |
| <h2 class="text-xl font-semibold text-gray-800" id="current-tab-title">Dashboard</h2> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative hidden md:block"> |
| <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 relative"> |
| <i class="fas fa-bell"></i> |
| <span id="notification-badge" class="hidden absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">0</span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="p-6"> |
| |
| <div id="dashboard" class="tab-content active"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> |
| <div class="data-card bg-white p-6 rounded-xl shadow transition"> |
| <div class="flex justify-between items-start"> |
| <div><p class="text-gray-500">Processos Ativos</p><h3 class="text-3xl font-bold mt-2" id="stat-processos">124</h3></div> |
| <div class="p-3 rounded-lg bg-indigo-100 text-indigo-600"><i class="fas fa-folder-open text-xl"></i></div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"><p class="text-sm text-green-500 flex items-center"><i class="fas fa-arrow-up mr-1"></i> 12% desde o último mês</p></div> |
| </div> |
| <div class="data-card bg-white p-6 rounded-xl shadow transition"> |
| <div class="flex justify-between items-start"> |
| <div><p class="text-gray-500">Clientes Ativos</p><h3 class="text-3xl font-bold mt-2" id="stat-clientes">42</h3></div> |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"><i class="fas fa-users text-xl"></i></div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"><p class="text-sm text-green-500 flex items-center"><i class="fas fa-arrow-up mr-1"></i> 5% desde o último mês</p></div> |
| </div> |
| <div class="data-card bg-white p-6 rounded-xl shadow transition"> |
| <div class="flex justify-between items-start"> |
| <div><p class="text-gray-500">Intimações Pendentes</p><h3 class="text-3xl font-bold mt-2" id="stat-intimacoes">0</h3></div> |
| <div class="p-3 rounded-lg bg-red-100 text-red-600"><i class="fas fa-exclamation-triangle text-xl"></i></div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"><p class="text-sm text-red-500 flex items-center"><i class="fas fa-arrow-up mr-1"></i> Verifique as intimações</p></div> |
| </div> |
| <div class="data-card bg-white p-6 rounded-xl shadow transition"> |
| <div class="flex justify-between items-start"> |
| <div><p class="text-gray-500">Provas Anexadas</p><h3 class="text-3xl font-bold mt-2" id="stat-provas">0</h3></div> |
| <div class="p-3 rounded-lg bg-purple-100 text-purple-600"><i class="fas fa-images text-xl"></i></div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"><p class="text-sm text-purple-500 flex items-center"><i class="fas fa-images mr-1"></i> Na galeria de provas</p></div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-lg">Distribuição de Processos</h3> |
| <select class="border border-gray-300 rounded px-3 py-1 text-sm"><option>Últimos 30 dias</option><option>Últimos 90 dias</option><option>Este ano</option></select> |
| </div> |
| <div class="h-64"><canvas id="processChart"></canvas></div> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-lg">Atividades Recentes</h3> |
| <button class="text-indigo-600 text-sm font-medium">Ver todas</button> |
| </div> |
| <div class="space-y-4" id="recent-activities"> |
| <div class="flex items-start"><div class="p-2 bg-indigo-100 rounded-lg mr-3 text-indigo-600"><i class="fas fa-file-alt"></i></div><div><p class="font-medium">Novo processo cadastrado</p><p class="text-sm text-gray-500">Processo #2023-0456 para João Silva</p><p class="text-xs text-gray-400">há 15 minutos</p></div></div> |
| <div class="flex items-start"><div class="p-2 bg-green-100 rounded-lg mr-3 text-green-600"><i class="fas fa-check-circle"></i></div><div><p class="font-medium">Intimação respondida</p><p class="text-sm text-gray-500">Processo #2023-0321 - TRF1</p><p class="text-xs text-gray-400">há 2 horas</p></div></div> |
| <div class="flex items-start"><div class="p-2 bg-blue-100 rounded-lg mr-3 text-blue-600"><i class="fas fa-sync-alt"></i></div><div><p class="font-medium">Dados atualizados via AASP</p><p class="text-sm text-gray-500">5 processos atualizados do TJSP</p><p class="text-xs text-gray-400">hoje às 08:45</p></div></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-lg">Processos com Prazos Próximos</h3> |
| <button class="text-indigo-600 text-sm font-medium">Ver todos</button> |
| </div> |
| <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">Processo</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cliente</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tribunal</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Prazo</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ações</th></tr></thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="deadline-table-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="processos" class="tab-content"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Gestão de Processos</h2> |
| <button onclick="showModal('new-process')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"><i class="fas fa-plus mr-2"></i> Novo Processo</button> |
| </div> |
| <div class="bg-white rounded-xl shadow overflow-hidden mb-6"> |
| <div class="p-4 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3"> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"><input type="text" placeholder="Filtrar processos..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"><i class="fas fa-search absolute left-3 top-3 text-gray-400"></i></div> |
| <select class="border border-gray-300 rounded px-3 py-2 text-sm"><option>Todos os tribunais</option><option>TJSP</option><option>TJMG</option><option>TRF1</option><option>TRF4</option></select> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button class="p-2 rounded-lg border border-gray-300 hover:bg-gray-50"><i class="fas fa-download text-gray-600"></i></button> |
| <button class="p-2 rounded-lg border border-gray-300 hover:bg-gray-50"><i class="fas fa-print text-gray-600"></i></button> |
| </div> |
| </div> |
| <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">Número</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cliente</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tribunal</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Data Abertura</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ações</th></tr></thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="processos-table-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="clientes" class="tab-content"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Gestão de Clientes</h2> |
| <button onclick="showModal('new-client')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"><i class="fas fa-plus mr-2"></i> Novo Cliente</button> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="bg-white p-6 rounded-xl shadow"><div class="flex items-center space-x-4"><div class="p-3 bg-indigo-100 rounded-lg text-indigo-600"><i class="fas fa-user-tie text-2xl"></i></div><div><p class="text-gray-500">Clientes Ativos</p><h3 class="text-2xl font-bold" id="stat-clientes-tab">42</h3></div></div></div> |
| <div class="bg-white p-6 rounded-xl shadow"><div class="flex items-center space-x-4"><div class="p-3 bg-green-100 rounded-lg text-green-600"><i class="fas fa-briefcase text-2xl"></i></div><div><p class="text-gray-500">Pessoa Jurídica</p><h3 class="text-2xl font-bold">18</h3></div></div></div> |
| <div class="bg-white p-6 rounded-xl shadow"><div class="flex items-center space-x-4"><div class="p-3 bg-blue-100 rounded-lg text-blue-600"><i class="fas fa-user text-2xl"></i></div><div><p class="text-gray-500">Pessoa Física</p><h3 class="text-2xl font-bold">24</h3></div></div></div> |
| </div> |
| <div class="bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3"> |
| <div class="relative w-64"><input type="text" placeholder="Buscar cliente..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"><i class="fas fa-search absolute left-3 top-3 text-gray-400"></i></div> |
| <div class="flex items-center space-x-2"><button class="p-2 rounded-lg border border-gray-300 hover:bg-gray-50"><i class="fas fa-filter text-gray-600"></i></button><button class="p-2 rounded-lg border border-gray-300 hover:bg-gray-50"><i class="fas fa-download text-gray-600"></i></button></div> |
| </div> |
| <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">Nome</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">CPF/CNPJ</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">E-mail</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Telefone</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Processos</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ações</th></tr></thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="clientes-table-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="provas" class="tab-content"> |
| <div class="flex flex-wrap justify-between items-center mb-6 gap-3"> |
| <h2 class="text-2xl font-bold text-gray-800">Galeria de Provas</h2> |
| <div class="flex items-center space-x-3"> |
| <select id="evidence-filter-client" class="border border-gray-300 rounded px-3 py-2 text-sm" onchange="filterEvidence()"> |
| <option value="">Todos os Clientes</option> |
| </select> |
| <select id="evidence-filter-type" class="border border-gray-300 rounded px-3 py-2 text-sm" onchange="filterEvidence()"> |
| <option value="">Todos os Tipos</option> |
| <option value="image">Imagens</option> |
| <option value="document">Documentos</option> |
| <option value="video">Vídeos</option> |
| <option value="audio">Áudios</option> |
| </select> |
| <button onclick="showModal('upload-evidence')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"><i class="fas fa-cloud-upload-alt mr-2"></i> Enviar Prova</button> |
| </div> |
| </div> |
|
|
| |
| <div id="drive-status" class="mb-4 bg-white rounded-xl shadow p-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div id="drive-icon" class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400"><i class="fab fa-google-drive text-xl"></i></div> |
| <div> |
| <p class="font-medium" id="drive-status-text">Google Drive desconectado</p> |
| <p class="text-sm text-gray-500" id="drive-status-sub">Conecte para sincronizar provas na nuvem</p> |
| </div> |
| </div> |
| <button onclick="connectGoogleDrive()" id="drive-connect-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"><i class="fab fa-google mr-2"></i> Conectar Google Drive</button> |
| </div> |
|
|
| |
| <div id="evidence-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
| |
| </div> |
|
|
| <div id="no-evidence" class="hidden text-center py-16"> |
| <i class="fas fa-images text-6xl text-gray-300 mb-4"></i> |
| <p class="text-gray-500 text-lg">Nenhuma prova encontrada</p> |
| <p class="text-gray-400 text-sm">Clique em "Enviar Prova" para adicionar</p> |
| </div> |
| </div> |
|
|
| |
| <div id="intimacoes" class="tab-content"> |
| <div class="flex flex-wrap justify-between items-center mb-6 gap-3"> |
| <h2 class="text-2xl font-bold text-gray-800">Intimações AASP</h2> |
| <div class="flex items-center space-x-3"> |
| <button onclick="fetchAASPIntimacoes()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center" id="btn-fetch-aasp"><i class="fas fa-sync-alt mr-2"></i> Buscar Intimações</button> |
| <button onclick="fetchAASPJornais()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center"><i class="fas fa-newspaper mr-2"></i> Jornais com Intimações</button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow p-6 mb-6"> |
| <h3 class="font-semibold text-lg mb-4"><i class="fas fa-key mr-2 text-indigo-600"></i>Configuração da API AASP</h3> |
| <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">Chave de Acesso</label> |
| <div class="relative"> |
| <input type="password" id="aasp-chave" value="92E81C018B69454F8053133023AC438B" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 pr-10"> |
| <button onclick="togglePassword('aasp-chave')" class="absolute right-3 top-3 text-gray-400 hover:text-gray-600"><i class="fas fa-eye"></i></button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Consulta</label> |
| <select id="aasp-tipo" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option value="associado">Associado (Pessoa Física)</option> |
| <option value="empresa">Empresa (Pessoa Jurídica)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data da Intimação</label> |
| <input type="date" id="aasp-data" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Código Associado (Empresa)</label> |
| <input type="number" id="aasp-codigo" placeholder="Código AASP" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center space-x-4"> |
| <label class="flex items-center space-x-2"><input type="checkbox" id="aasp-diferencial" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"><span class="text-sm text-gray-700">Somente não consultadas</span></label> |
| <label class="flex items-center space-x-2"><input type="checkbox" id="aasp-auto-refresh" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"><span class="text-sm text-gray-700">Auto-refresh a cada 30min</span></label> |
| </div> |
| </div> |
|
|
| |
| <div id="intimacoes-results" class="bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="font-semibold text-lg">Intimações Encontradas</h3> |
| <span id="intimacoes-count" class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">0 resultados</span> |
| </div> |
| <div id="intimacoes-list" class="p-4"> |
| <div class="text-center py-8 text-gray-400"> |
| <i class="fas fa-gavel text-4xl mb-3"></i> |
| <p>Clique em "Buscar Intimações" para consultar a API AASP</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="jornais-results" class="bg-white rounded-xl shadow overflow-hidden mt-6 hidden"> |
| <div class="p-4 border-b border-gray-200"><h3 class="font-semibold text-lg">Jornais com Intimações</h3></div> |
| <div id="jornais-list" class="p-4"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="import" class="tab-content"> |
| <div class="mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Importar Dados</h2> |
| <p class="text-gray-600">Conecte-se a planilhas externas ou importe arquivos para atualizar sua base de dados</p> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center justify-between mb-4"><h3 class="font-semibold text-lg">Google Sheets</h3><div class="p-2 bg-blue-100 rounded-lg text-blue-600"><i class="fab fa-google text-xl"></i></div></div> |
| <p class="text-gray-600 mb-4">Conecte-se ao Google Sheets para sincronizar dados</p> |
| <button onclick="connectGoogleSheets()" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition flex items-center justify-center" id="btn-connect-sheets"><i class="fab fa-google mr-2"></i> Conectar ao Google</button> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center justify-between mb-4"><h3 class="font-semibold text-lg">Excel/CSV</h3><div class="p-2 bg-green-100 rounded-lg text-green-600"><i class="fas fa-file-excel text-xl"></i></div></div> |
| <p class="text-gray-600 mb-4">Importe arquivos Excel ou CSV</p> |
| <button onclick="document.getElementById('file-input').click()" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition flex items-center justify-center"><i class="fas fa-upload mr-2"></i> Selecionar Arquivo</button> |
| <input type="file" id="file-input" class="hidden" accept=".xlsx,.xls,.csv" onchange="handleFileImport(event)"> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center justify-between mb-4"><h3 class="font-semibold text-lg">JSON/API</h3><div class="p-2 bg-purple-100 rounded-lg text-purple-600"><i class="fas fa-code text-xl"></i></div></div> |
| <p class="text-gray-600 mb-4">Importe dados em JSON ou conecte APIs</p> |
| <button onclick="showTab('integrations')" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition flex items-center justify-center"><i class="fas fa-plug mr-2"></i> Configurar API</button> |
| </div> |
| </div> |
|
|
| |
| <div id="import-preview" class="bg-white rounded-xl shadow overflow-hidden hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="font-semibold text-lg">Pré-visualização dos Dados Importados</h3> |
| <button onclick="confirmImport()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700"><i class="fas fa-check mr-2"></i> Confirmar Importação</button> |
| </div> |
| <div class="overflow-x-auto"><table class="min-w-full divide-y divide-gray-200" id="import-preview-table"></table></div> |
| </div> |
| </div> |
|
|
| |
| <div id="config" class="tab-content"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Configurações</h2> |
| <div class="bg-white rounded-xl shadow p-6 mb-6"> |
| <h3 class="font-semibold text-lg mb-4">Configurações Gerais</h3> |
| <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 do Escritório</label><input type="text" value="LegalData Manager" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">E-mail Principal</label><input type="email" value="admin@legaldata.com" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Fuso Horário</label><select class="w-full px-4 py-2 rounded-lg border border-gray-300"><option>América/São Paulo (BRT)</option><option>América/Manaus (AMT)</option></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Idioma</label><select class="w-full px-4 py-2 rounded-lg border border-gray-300"><option>Português (BR)</option><option>English</option></select></div> |
| </div> |
| <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"><i class="fas fa-save mr-2"></i> Salvar Configurações</button> |
| </div> |
| </div> |
|
|
| |
| <div id="sanitize" class="tab-content"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Sanitização de Dados</h2> |
| <div class="bg-white rounded-xl shadow p-6 mb-6"> |
| <h3 class="font-semibold text-lg mb-4">Limpeza e Validação</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="p-4 border rounded-lg"><i class="fas fa-user-shield text-indigo-600 text-2xl mb-2"></i><h4 class="font-medium">Validar CPF/CNPJ</h4><p class="text-sm text-gray-500">Verifica e corrige CPFs e CNPJs inválidos</p><button onclick="sanitizeData('cpfcnpj')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded text-sm hover:bg-indigo-700">Executar</button></div> |
| <div class="p-4 border rounded-lg"><i class="fas fa-phone text-green-600 text-2xl mb-2"></i><h4 class="font-medium">Padronizar Telefones</h4><p class="text-sm text-gray-500">Formata números de telefone</p><button onclick="sanitizeData('phone')" class="mt-2 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">Executar</button></div> |
| <div class="p-4 border rounded-lg"><i class="fas fa-envelope text-blue-600 text-2xl mb-2"></i><h4 class="font-medium">Validar E-mails</h4><p class="text-sm text-gray-500">Verifica e-mails inválidos</p><button onclick="sanitizeData('email')" class="mt-2 bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700">Executar</button></div> |
| <div class="p-4 border rounded-lg"><i class="fas fa-duplicate text-yellow-600 text-2xl mb-2"></i><h4 class="font-medium">Remover Duplicatas</h4><p class="text-sm text-gray-500">Identifica e remove registros duplicados</p><button onclick="sanitizeData('duplicates')" class="mt-2 bg-yellow-600 text-white px-3 py-1 rounded text-sm hover:bg-yellow-700">Executar</button></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="integrations" class="tab-content"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Integrações</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex items-center space-x-3 mb-4"> |
| <div class="p-3 bg-indigo-100 rounded-lg text-indigo-600"><i class="fas fa-gavel text-2xl"></i></div> |
| <div><h3 class="font-semibold text-lg">AASP - Intimações</h3><p class="text-sm text-gray-500">Associação dos Advogados de SP</p></div> |
| </div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <span class="w-3 h-3 rounded-full bg-green-500 aasp-pulse"></span> |
| <span class="text-sm text-green-600 font-medium" id="aasp-conn-status">Configurada</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Receba intimações e publicações dos diários oficiais automaticamente.</p> |
| <button onclick="showTab('intimacoes')" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">Configurar AASP</button> |
| </div> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex items-center space-x-3 mb-4"> |
| <div class="p-3 bg-blue-100 rounded-lg text-blue-600"><i class="fab fa-google text-2xl"></i></div> |
| <div><h3 class="font-semibold text-lg">Google Drive</h3><p class="text-sm text-gray-500">Armazenamento em nuvem</p></div> |
| </div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <span class="w-3 h-3 rounded-full" id="drive-conn-dot"></span> |
| <span class="text-sm font-medium" id="drive-conn-label">Desconectado</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Sincronize documentos e provas com o Google Drive.</p> |
| <button onclick="connectGoogleDrive()" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition" id="drive-integration-btn">Conectar Google Drive</button> |
| </div> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex items-center space-x-3 mb-4"> |
| <div class="p-3 bg-green-100 rounded-lg text-green-600"><i class="fas fa-table text-2xl"></i></div> |
| <div><h3 class="font-semibold text-lg">Google Sheets</h3><p class="text-sm text-gray-500">Planilhas do escritório</p></div> |
| </div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <span class="w-3 h-3 rounded-full" id="sheets-conn-dot"></span> |
| <span class="text-sm font-medium" id="sheets-conn-label">Desconectado</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Importe dados da planilha base do escritório.</p> |
| <button onclick="connectGoogleSheets()" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition" id="sheets-integration-btn">Conectar Planilha</button> |
| </div> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex items-center space-x-3 mb-4"> |
| <div class="p-3 bg-purple-100 rounded-lg text-purple-600"><i class="fas fa-external-link-alt text-2xl"></i></div> |
| <div><h3 class="font-semibold text-lg">Portal do Cliente</h3><p class="text-sm text-gray-500">Formulário externo</p></div> |
| </div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> |
| <span class="text-sm text-green-600 font-medium">Ativo</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Página para clientes se cadastrarem e enviarem provas.</p> |
| <a href="cliente.html" target="_blank" class="block w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition text-center">Abrir Portal do Cliente</a> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| |
| <div id="modal-new-process" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"> |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"><h3 class="text-lg font-semibold">Novo Processo</h3><button onclick="hideModal('new-process')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div> |
| <div class="p-6 space-y-4"> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Número do Processo</label><input type="text" id="proc-numero" placeholder="Ex: 2023-0456" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Cliente</label><select id="proc-cliente" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Tribunal</label><select id="proc-tribunal" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"><option>TJSP</option><option>TJMG</option><option>TRF1</option><option>TRF2</option><option>TRF3</option><option>TRF4</option><option>TRF5</option></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Data de Abertura</label><input type="date" id="proc-data" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Status</label><select id="proc-status" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"><option>Ativo</option><option>Pendente</option><option>Concluído</option><option>Arquivado</option></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Descrição</label><textarea id="proc-descricao" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea></div> |
| </div> |
| <div class="p-6 border-t border-gray-200 flex justify-end space-x-3"><button onclick="hideModal('new-process')" class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">Cancelar</button><button onclick="addProcess()" class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">Salvar Processo</button></div> |
| </div> |
| </div> |
|
|
| |
| <div id="modal-new-client" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"> |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"><h3 class="text-lg font-semibold">Novo Cliente</h3><button onclick="hideModal('new-client')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div> |
| <div class="p-6 space-y-4"> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label><input type="text" id="cli-nome" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label><select id="cli-tipo" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"><option value="pf">Pessoa Física</option><option value="pj">Pessoa Jurídica</option></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">CPF/CNPJ</label><input type="text" id="cli-cpfcnpj" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label><input type="email" id="cli-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label><input type="text" id="cli-telefone" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Endereço</label><input type="text" id="cli-endereco" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></div> |
| </div> |
| <div class="p-6 border-t border-gray-200 flex justify-end space-x-3"><button onclick="hideModal('new-client')" class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">Cancelar</button><button onclick="addClient()" class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">Salvar Cliente</button></div> |
| </div> |
| </div> |
|
|
| |
| <div id="modal-upload-evidence" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"> |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"><h3 class="text-lg font-semibold">Enviar Prova</h3><button onclick="hideModal('upload-evidence')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div> |
| <div class="p-6 space-y-4"> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Cliente</label><select id="ev-cliente" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Processo</label><select id="ev-processo" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label><select id="ev-categoria" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"><option value="documento">Documento</option><option value="foto">Foto</option><option value="video">Vídeo</option><option value="audio">Áudio</option><option value="outro">Outro</option></select></div> |
| <div><label class="block text-sm font-medium text-gray-700 mb-1">Descrição</label><textarea id="ev-descricao" rows="2" placeholder="Descreva a prova..." class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea></div> |
| <div id="drop-zone" class="drop-zone rounded-xl p-8 text-center cursor-pointer" onclick="document.getElementById('ev-file').click()" ondragover="event.preventDefault();this.classList.add('dragover')" ondragleave="this.classList.remove('dragover')" ondrop="event.preventDefault();this.classList.remove('dragover');handleEvidenceDrop(event)"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-300 mb-3"></i> |
| <p class="text-gray-500">Arraste arquivos aqui ou clique para selecionar</p> |
| <p class="text-sm text-gray-400 mt-1">Imagens, PDFs, vídeos e áudios</p> |
| <input type="file" id="ev-file" class="hidden" multiple accept="image/*,.pdf,video/*,audio/*" onchange="handleEvidenceSelect(event)"> |
| </div> |
| <div id="ev-preview" class="hidden grid grid-cols-3 gap-2"></div> |
| <div><label class="flex items-center space-x-2"><input type="checkbox" id="ev-upload-drive" class="rounded border-gray-300 text-indigo-600" checked><span class="text-sm text-gray-700">Salvar também no Google Drive</span></label></div> |
| </div> |
| <div class="p-6 border-t border-gray-200 flex justify-end space-x-3"><button onclick="hideModal('upload-evidence')" class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">Cancelar</button><button onclick="uploadEvidence()" class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700"><i class="fas fa-upload mr-2"></i>Enviar</button></div> |
| </div> |
| </div> |
|
|
| |
| <div id="modal-evidence-detail" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"><h3 class="text-lg font-semibold">Detalhes da Prova</h3><button onclick="hideModal('evidence-detail')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div> |
| <div class="p-6" id="evidence-detail-content"></div> |
| </div> |
| </div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
