Hugging Face's logo

Spaces:
alexandremoraisdarosa
/
jad2
Running

App Files Community
jad2 / index.html
alexandremoraisdarosa's picture
alexandremoraisdarosa
Add 3 files
ac0a783 verified
raw
history blame contribute delete
74.4 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passaporte Digital - Dashboard Jurídico Avançado</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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #f5f7fa;
}
.sidebar {
transition: all 0.3s;
}
.sidebar-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.dropzone {
border: 2px dashed #4b5563;
transition: all 0.3s;
}
.dropzone.active {
border-color: #1e40af;
background-color: rgba(30, 64, 175, 0.05);
}
.crime-scene {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CiAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMTAgTSAwIDAgTCAxMCAxMCIgc3Ryb2tlPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDQzLCA0MywgNDMsIDAuOCkiIC8+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIgLz4KPC9zdmc+');
background-size: cover;
position: relative;
overflow: hidden;
}
.evidence-tag {
position: absolute;
background-color: rgba(220, 38, 38, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
z-index: 10;
}
.evidence-tag:hover {
transform: scale(1.1);
z-index: 20;
}
.evidence-tag.editing {
background-color: rgba(30, 64, 175, 0.9);
z-index: 30;
}
.tooltip {
position: relative;
}
.tooltip-text {
visibility: hidden;
width: 120px;
background-color: #111827;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.honeycomb {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin: 20px 0;
}
.honeycomb-item {
width: 120px;
height: 140px;
background-color: #1e40af;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: all 0.3s;
cursor: pointer;
}
.honeycomb-item:hover {
background-color: #1e3a8a;
transform: scale(1.05);
}
.honeycomb-item i {
font-size: 2rem;
margin-bottom: 10px;
}
/* Kanban styles */
.kanban-board {
display: flex;
overflow-x: auto;
padding: 20px 0;
}
.kanban-column {
min-width: 300px;
background-color: #f3f4f6;
border-radius: 8px;
margin-right: 15px;
padding: 15px;
}
.kanban-column-header {
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #e5e7eb;
}
.kanban-item {
background-color: white;
border-radius: 6px;
padding: 12px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
cursor: move;
}
.kanban-item:hover {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Evidence list styles */
.evidence-list {
max-height: 300px;
overflow-y: auto;
}
.evidence-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #e5e7eb;
}
.evidence-list-item:hover {
background-color: #f9fafb;
}
/* OSINT grid styles */
.osint-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.osint-card {
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.osint-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Chain of custody styles */
.chain-timeline {
position: relative;
padding-left: 30px;
}
.chain-timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background-color: #e5e7eb;
}
.chain-event {
position: relative;
padding-bottom: 20px;
}
.chain-event::before {
content: '';
position: absolute;
left: -30px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #3b82f6;
border: 2px solid white;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
border-radius: 8px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
/* Tab styles */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-button {
padding: 10px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-button.active {
border-bottom-color: #3b82f6;
color: #3b82f6;
font-weight: bold;
}
/* FullCalendar overrides */
.fc-header-toolbar {
margin-bottom: 10px !important;
}
.fc-event {
cursor: pointer;
}
</style>
</head>
<body class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar w-64 bg-gray-900 text-white flex flex-col">
<div class="p-4 border-b border-gray-700">
<h1 class="text-2xl font-bold text-center">
<i class="fas fa-passport mr-2"></i>
Passaporte Digital
</h1>
<p class="text-xs text-gray-400 text-center mt-1">Dashboard Jurídico Avançado</p>
</div>
<div class="flex-1 overflow-y-auto">
<div class="p-4">
<div class="mb-6">
<h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Ferramentas</h3>
<ul>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('dashboard-tab')">
<i class="fas fa-home mr-3"></i>
<span>Dashboard</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('cases-tab')">
<i class="fas fa-gavel mr-3"></i>
<span>Casos</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('tasks-tab')">
<i class="fas fa-tasks mr-3"></i>
<span>Tarefas</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('calendar-tab')">
<i class="fas fa-calendar-alt mr-3"></i>
<span>Calendário</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('evidence-tab')">
<i class="fas fa-fingerprint mr-3"></i>
<span>Cadeia de Custódia</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800" onclick="showTab('osint-tab')">
<i class="fas fa-search mr-3"></i>
<span>OSINT</span>
</a>
</li>
</ul>
</div>
<div class="mb-6">
<h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Administração</h3>
<ul>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800">
<i class="fas fa-user-shield mr-3"></i>
<span>Painel Admin</span>
</a>
</li>
<li class="mb-1">
<a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800">
<i class="fas fa-cog mr-3"></i>
<span>Configurações</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-700 text-center text-xs text-gray-400">
<p>Powered by <span class="font-bold">J.A.D.</span></p>
<p class="mt-1">Sistema Jurídico Inteligente</p>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="flex items-center justify-between px-6 py-3">
<div class="flex items-center">
<h2 class="text-xl font-semibold text-gray-800" id="current-tab-title">Painel Principal</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
<i class="fas fa-bell text-gray-600"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="flex items-center">
<div class="mr-3 text-right">
<p class="text-sm font-medium text-gray-700">Dr. João Silva</p>
<p class="text-xs text-gray-500">OAB/SP 123.456</p>
</div>
<div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold">
JS
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
<!-- Dashboard Tab -->
<div id="dashboard-tab" class="tab-content active">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Document Upload -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Carregar Documentos</h3>
<div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer">
<i class="fas fa-cloud-upload-alt text-4xl text-gray-500 mb-3"></i>
<p class="text-gray-600 mb-2">Arraste e solte arquivos aqui</p>
<p class="text-sm text-gray-500 mb-4">ou</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
Selecione do computador
</button>
<input type="file" id="fileInput" class="hidden" multiple>
<p class="text-xs text-gray-500 mt-4">Formatos suportados: PDF, DOCX, TXT, MP3, MP4</p>
</div>
<div class="mt-4">
<h4 class="text-sm font-medium text-gray-700 mb-2">Documentos recentes</h4>
<div class="space-y-2">
<div class="flex items-center p-2 hover:bg-gray-50 rounded">
<i class="fas fa-file-pdf text-red-500 mr-3"></i>
<span class="text-sm text-gray-700 flex-1">Petição Inicial - Caso 4567.pdf</span>
<span class="text-xs text-gray-500">12/05/2023</span>
</div>
<div class="flex items-center p-2 hover:bg-gray-50 rounded">
<i class="fas fa-file-word text-blue-500 mr-3"></i>
<span class="text-sm text-gray-700 flex-1">Contrato de Locação.docx</span>
<span class="text-xs text-gray-500">10/05/2023</span>
</div>
<div class="flex items-center p-2 hover:bg-gray-50 rounded">
<i class="fas fa-file-audio text-purple-500 mr-3"></i>
<span class="text-sm text-gray-700 flex-1">Depoimento Testemunha.mp3</span>
<span class="text-xs text-gray-500">08/05/2023</span>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Ações Rápidas</h3>
<div class="honeycomb">
<div class="honeycomb-item tooltip" onclick="showTab('cases-tab')">
<i class="fas fa-gavel"></i>
<span>Processos</span>
<span class="tooltip-text">Acessar processos</span>
</div>
<div class="honeycomb-item tooltip" onclick="showTab('calendar-tab')">
<i class="fas fa-calendar-alt"></i>
<span>Agenda</span>
<span class="tooltip-text">Ver agenda</span>
</div>
<div class="honeycomb-item tooltip">
<i class="fas fa-users"></i>
<span>Clientes</span>
<span class="tooltip-text">Gerenciar clientes</span>
</div>
<div class="honeycomb-item tooltip">
<i class="fas fa-book"></i>
<span>Jurisprudência</span>
<span class="tooltip-text">Pesquisar jurisprudência</span>
</div>
<div class="honeycomb-item tooltip">
<i class="fas fa-search"></i>
<span>Pesquisar</span>
<span class="tooltip-text">Pesquisa avançada</span>
</div>
<div class="honeycomb-item tooltip">
<i class="fas fa-chart-bar"></i>
<span>Relatórios</span>
<span class="tooltip-text">Gerar relatórios</span>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<!-- Crime Scene -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-gray-800 text-white px-4 py-3">
<h3 class="font-semibold">Cena do Crime - Caso #7890</h3>
</div>
<div class="crime-scene h-64 relative" id="crime-scene-container">
<!-- Evidence tags will be added here dynamically -->
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-3">
<span class="text-sm font-medium text-gray-700">Progresso da Análise</span>
<span class="text-sm font-bold text-blue-600">65%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="mt-4 flex space-x-2">
<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm" onclick="addNewEvidence()">
<i class="fas fa-plus mr-1"></i> Adicionar Evidência
</button>
<button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded text-sm" onclick="exportEvidence()">
<i class="fas fa-file-export mr-1"></i> Exportar
</button>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Atividade Recente</h3>
<div class="space-y-4">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
<i class="fas fa-file-alt"></i>
</div>
</div>
<div>
<p class="text-sm text-gray-800">
<span class="font-medium">Petição inicial</span> foi enviada para o caso #4567
</p>
<p class="text-xs text-gray-500 mt-1">Hoje, 09:42</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<i class="fas fa-check"></i>
</div>
</div>
<div>
<p class="text-sm text-gray-800">
<span class="font-medium">Transcrição</span> do depoimento foi concluída
</p>
<p class="text-xs text-gray-500 mt-1">Ontem, 16:30</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-comment"></i>
</div>
</div>
<div>
<p class="text-sm text-gray-800">
Novo <span class="font-medium">comentário</span> no caso #7890
</p>
<p class="text-xs text-gray-500 mt-1">Ontem, 14:15</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
<i class="fas fa-bell"></i>
</div>
</div>
<div>
<p class="text-sm text-gray-800">
<span class="font-medium">Lembrete:</span> Audiência marcada para amanhã
</p>
<p class="text-xs text-gray-500 mt-1">12/05/2023, 11:20</p>
</div>
</div>
</div>
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded text-sm">
Ver todas as atividades
</button>
</div>
</div>
</div>
</div>
<!-- Cases Tab -->
<div id="cases-tab" class="tab-content">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">Casos Jurídicos</h2>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-plus mr-2"></i> Novo Caso
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Número</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Última Atualização</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#7890</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Maria Oliveira</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Criminal</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Em Andamento</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
<button class="text-indigo-600 hover:text-indigo-900">Editar</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4567</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carlos Silva</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Civil</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Concluído</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
<button class="text-indigo-600 hover:text-indigo-900">Editar</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#3214</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa XYZ Ltda.</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Trabalhista</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Aguardando</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
<button class="text-indigo-600 hover:text-indigo-900">Editar</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1892</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ana Souza</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Família</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Urgente</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">02/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
<button class="text-indigo-600 hover:text-indigo-900">Editar</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 flex justify-between items-center">
<div class="text-sm text-gray-500">
Mostrando <span class="font-medium">1</span> a <span class="font-medium">4</span> de <span class="font-medium">12</span> resultados
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
Anterior
</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
Próxima
</button>
</div>
</div>
</div>
</div>
<!-- Tasks Tab -->
<div id="tasks-tab" class="tab-content">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">Tarefas</h2>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition" onclick="showTaskModal()">
<i class="fas fa-plus mr-2"></i> Nova Tarefa
</button>
</div>
<!-- Kanban Board -->
<div class="kanban-board">
<div class="kanban-column">
<div class="kanban-column-header">A Fazer</div>
<div class="kanban-item" draggable="true">
<div class="font-medium">Revisar contrato</div>
<div class="text-sm text-gray-500 mt-1">Caso #4567</div>
<div class="flex justify-between items-center mt-2">
<span class="text-xs text-gray-500">Prazo: 18/05</span>
<span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Média</span>
</div>
</div>
<div class="kanban-item" draggable="true">
<div class="font-medium">Preparar petição</div>
<div class="text-sm text-gray-500 mt-1">Caso #7890</div>
<div class="flex justify-between items-center mt-2">
<span class="text-xs text-gray-500">Prazo: 20/05</span>
<span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Alta</span>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">Em Progresso</div>
<div class="kanban-item" draggable="true">
<div class="font-medium">Analisar evidências</div>
<div class="text-sm text-gray-500 mt-1">Caso #7890</div>
<div class="flex justify-between items-center mt-2">
<span class="text-xs text-gray-500">Prazo: 22/05</span>
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Baixa</span>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">Revisão</div>
<div class="kanban-item" draggable="true">
<div class="font-medium">Verificar documentos</div>
<div class="text-sm text-gray-500 mt-1">Caso #3214</div>
<div class="flex justify-between items-center mt-2">
<span class="text-xs text-gray-500">Prazo: 15/05</span>
<span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Média</span>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">Concluído</div>
<div class="kanban-item" draggable="true">
<div class="font-medium">Entrevistar testemunha</div>
<div class="text-sm text-gray-500 mt-1">Caso #7890</div>
<div class="flex justify-between items-center mt-2">
<span class="text-xs text-gray-500">Concluído em: 10/05</span>
<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Concluído</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Calendar Tab -->
<div id="calendar-tab" class="tab-content">
<div class="bg-white rounded-lg shadow p-6">
<div id="calendar"></div>
</div>
</div>
<!-- Evidence Chain of Custody Tab -->
<div id="evidence-tab" class="tab-content">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">Cadeia de Custódia - Caso #7890</h2>
<div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition mr-2" onclick="showEvidenceModal()">
<i class="fas fa-plus mr-2"></i> Adicionar Evidência
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition" onclick="exportChainOfCustody()">
<i class="fas fa-file-export mr-2"></i> Exportar
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-1">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium text-gray-800 mb-3">Lista de Evidências</h3>
<div class="evidence-list">
<!-- Evidence list items will be added here dynamically -->
</div>
</div>
</div>
<div class="lg:col-span-2">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium text-gray-800 mb-3">Linha do Tempo da Cadeia de Custódia</h3>
<div class="chain-timeline">
<!-- Chain of custody events will be added here dynamically -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OSINT Tab -->
<div id="osint-tab" class="tab-content">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">Ferramentas OSINT</h2>
<div class="relative">
<input type="text" placeholder="Pesquisar..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="mb-6">
<div class="flex border-b border-gray-200">
<button class="tab-button active" onclick="changeOsintTab('people')">Pessoas</button>
<button class="tab-button" onclick="changeOsintTab('companies')">Empresas</button>
<button class="tab-button" onclick="changeOsintTab('documents')">Documentos</button>
<button class="tab-button" onclick="changeOsintTab('social')">Redes Sociais</button>
<button class="tab-button" onclick="changeOsintTab('other')">Outras</button>
</div>
</div>
<div id="osint-people" class="osint-tab-content active">
<div class="osint-grid">
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i class="fas fa-user"></i>
</div>
<h3 class="font-medium">Busca de Pessoas</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Encontre informações sobre pessoas usando múltiplas fontes de dados.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<i class="fas fa-id-card"></i>
</div>
<h3 class="font-medium">Verificação de CPF</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Verifique a validade e informações básicas de um CPF.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
<i class="fas fa-graduation-cap"></i>
</div>
<h3 class="font-medium">Verificação Acadêmica</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Confirme diplomas e histórico escolar/universitário.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
<i class="fas fa-car"></i>
</div>
<h3 class="font-medium">Consulta de Veículos</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Obtenha informações sobre veículos e seus proprietários.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
</div>
</div>
<div id="osint-companies" class="osint-tab-content">
<div class="osint-grid">
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i class="fas fa-building"></i>
</div>
<h3 class="font-medium">Consulta CNPJ</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Obtenha informações detalhadas sobre empresas brasileiras.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="font-medium">Análise Financeira</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Acesse dados financeiros e balanços de empresas.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
<i class="fas fa-gavel"></i>
</div>
<h3 class="font-medium">Processos Judiciais</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Localize processos judiciais envolvendo a empresa.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
</div>
</div>
<div id="osint-documents" class="osint-tab-content">
<div class="osint-grid">
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i class="fas fa-file-alt"></i>
</div>
<h3 class="font-medium">Verificação de Documentos</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Analise a autenticidade de documentos diversos.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<i class="fas fa-passport"></i>
</div>
<h3 class="font-medium">Verificação de Passaportes</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Confira a validade e autenticidade de passaportes.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
<div class="osint-card">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
<i class="fas fa-certificate"></i>
</div>
<h3 class="font-medium">Verificação de Certificados</h3>
</div>
<p class="text-sm text-gray-600 mb-3">Valide certificados profissionais e acadêmicos.</p>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
Acessar Ferramenta
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Evidence Modal -->
<div id="evidence-modal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Adicionar/Editar Evidência</h3>
<button class="text-gray-500 hover:text-gray-700" onclick="hideModal('evidence-modal')">
<i class="fas fa-times"></i>
</button>
</div>
<form id="evidence-form">
<input type="hidden" id="evidence-id">
<div class="mb-4">
<label for="evidence-name" class="block text-sm font-medium text-gray-700 mb-1">Nome da Evidência</label>
<input type="text" id="evidence-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label for="evidence-type" class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
<select id="evidence-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="fingerprint">Impressão Digital</option>
<option value="weapon">Arma</option>
<option value="blood">Sangue</option>
<option value="footprint">Pegada</option>
<option value="document">Documento</option>
<option value="other">Outro</option>
</select>
</div>
<div class="mb-4">
<label for="evidence-description" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
<textarea id="evidence-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div class="mb-4">
<label for="evidence-date" class="block text-sm font-medium text-gray-700 mb-1">Data de Coleta</label>
<input type="date" id="evidence-date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label for="evidence-collector" class="block text-sm font-medium text-gray-700 mb-1">Coletado Por</label>
<input type="text" id="evidence-collector" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="hideModal('evidence-modal')">
Cancelar
</button>
<button type="button" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" onclick="saveEvidence()">
Salvar Evidência
</button>
</div>
</form>
</div>
</div>
<!-- Task Modal -->
<div id="task-modal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Adicionar/Editar Tarefa</h3>
<button class="text-gray-500 hover:text-gray-700" onclick="hideModal('task-modal')">
<i class="fas fa-times"></i>
</button>
</div>
<form id="task-form">
<input type="hidden" id="task-id">
<div class="mb-4">
<label for="task-title" class="block text-sm font-medium text-gray-700 mb-1">Título</label>
<input type="text" id="task-title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label for="task-case" class="block text-sm font-medium text-gray-700 mb-1">Caso Relacionado</label>
<select id="task-case" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Selecione um caso</option>
<option value="7890">#7890 - Maria Oliveira</option>
<option value="4567">#4567 - Carlos Silva</option>
<option value="3214">#3214 - Empresa XYZ Ltda.</option>
<option value="1892">#1892 - Ana Souza</option>
</select>
</div>
<div class="mb-4">
<label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
<textarea id="task-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label for="task-due-date" class="block text-sm font-medium text-gray-700 mb-1">Data de Vencimento</label>
<input type="date" id="task-due-date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="task-priority" class="block text-sm font-medium text-gray-700 mb-1">Prioridade</label>
<select id="task-priority" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="low">Baixa</option>
<option value="medium">Média</option>
<option value="high">Alta</option>
</select>
</div>
</div>
<div class="flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="hideModal('task-modal')">
Cancelar
</button>
<button type="button" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" onclick="saveTask()">
Salvar Tarefa
</button>
</div>
</form>
</div>
</div>
<!-- Export Modal -->
<div id="export-modal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Exportar Dados</h3>
<button class="text-gray-500 hover:text-gray-700" onclick="hideModal('export-modal')">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Selecione o formato:</label>
<div class="space-y-2">
<div class="flex items-center">
<input id="export-pdf" name="export-format" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
<label for="export-pdf" class="ml-2 block text-sm text-gray-700">
PDF (Portable Document Format)
</label>
</div>
<div class="flex items-center">
<input id="export-docx" name="export-format" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="export-docx" class="ml-2 block text-sm text-gray-700">
DOCX (Microsoft Word)
</label>
</div>
<div class="flex items-center">
<input id="export-xlsx" name="export-format" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="export-xlsx" class="ml-2 block text-sm text-gray-700">
XLSX (Microsoft Excel)
</label>
</div>
<div class="flex items-center">
<input id="export-csv" name="export-format" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="export-csv" class="ml-2 block text-sm text-gray-700">
CSV (Comma Separated Values)
</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="export-options" class="block text-sm font-medium text-gray-700 mb-2">Opções:</label>
<div class="space-y-2">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="export-include-images" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="export-include-images" class="font-medium text-gray-700">Incluir imagens</label>
<p class="text-gray-500">Adiciona capturas de tela e fotos ao documento</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="export-include-notes" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
</div>
<div class="ml-3 text-sm">
<label for="export-include-notes" class="font-medium text-gray-700">Incluir anotações</label>
<p class="text-gray-500">Adiciona todas as anotações relacionadas</p>
</div>
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="hideModal('export-modal')">
Cancelar
</button>
<button type="button" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" onclick="performExport()">
Exportar Agora
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script>
// Global variables
let evidences = [
{ id: 1, name: "Impressão 1", type: "fingerprint", description: "Impressão digital encontrada na porta", date: "2023-05-10", collector: "Perito Silva", x: 20, y: 30 },
{ id: 2, name: "Arma", type: "weapon", description: "Faca com vestígios de sangue", date: "2023-05-10", collector: "Perito Silva", x: 60, y: 50 },
{ id: 3, name: "Sangue", type: "blood", description: "Mancha de sangue no chão", date: "2023-05-10", collector: "Perito Silva", x: 40, y: 70 },
{ id: 4, name: "Pegadas", type: "footprint", description: "Pegadas com barro", date: "2023-05-10", collector: "Perito Silva", x: 70, y: 20 }
];
let chainOfCustody = [
{ id: 1, evidenceId: 1, action: "Coleta", date: "2023-05-10 09:30", person: "Perito Silva", location: "Cena do Crime", notes: "Coletada da porta de entrada" },
{ id: 2, evidenceId: 1, action: "Transporte", date: "2023-05-10 11:45", person: "Agente Souza", location: "Para o laboratório", notes: "Em embalagem selada" },
{ id: 3, evidenceId: 1, action: "Recebimento", date: "2023-05-10 14:20", person: "Técnico Lima", location: "Laboratório Forense", notes: "Encaminhada para análise" },
{ id: 4, evidenceId: 2, action: "Coleta", date: "2023-05-10 09:45", person: "Perito Silva", location: "Cena do Crime", notes: "Encontrada na cozinha" },
{ id: 5, evidenceId: 3, action: "Coleta", date: "2023-05-10 10:15", person: "Perito Silva", location: "Cena do Crime", notes: "Amostra coletada" }
];
let tasks = [
{ id: 1, title: "Revisar contrato", case: "4567", description: "Revisar cláusulas do contrato de locação", dueDate: "2023-05-18", priority: "medium", status: "todo" },
{ id: 2, title: "Preparar petição", case: "7890", description: "Preparar petição inicial para o caso criminal", dueDate: "2023-05-20", priority: "high", status: "todo" },
{ id: 3, title: "Analisar evidências", case: "7890", description: "Analisar todas as evidências coletadas", dueDate: "2023-05-22", priority: "low", status: "progress" },
{ id: 4, title: "Verificar documentos", case: "3214", description: "Verificar autenticidade dos documentos", dueDate: "2023-05-15", priority: "medium", status: "review" },
{ id: 5, title: "Entrevistar testemunha", case: "7890", description: "Entrevistar testemunha ocular", dueDate: "2023-05-10", priority: "high", status: "done" }
];
let editingEvidenceId = null;
let editingTaskId = null;
// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
// Initialize calendar
initCalendar();
// Render initial evidence
renderEvidence();
renderEvidenceList();
renderChainOfCustody();
// Set up drag and drop for kanban
setupKanbanDragDrop();
// Set up dropzone
setupDropzone();
// Set up tooltips
setupTooltips();
});
// Tab navigation
function showTab(tabId) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Show selected tab
document.getElementById(tabId).classList.add('active');
// Update title
const titles = {
'dashboard-tab': 'Painel Principal',
'cases-tab': 'Casos Jurídicos',
'tasks-tab': 'Tarefas',
'calendar-tab': 'Calendário',
'evidence-tab': 'Cadeia de Custódia',
'osint-tab': 'Ferramentas OSINT'
};
document.getElementById('current-tab-title').textContent = titles[tabId];
// Special handling for calendar tab
if (tabId === 'calendar-tab') {
const calendarEl = document.getElementById('calendar');
calendarEl.style.display = 'block';
calendar.render();
}
}
// OSINT tab navigation
function changeOsintTab(tabName) {
// Set active tab button
document.querySelectorAll('.osint-tab-button').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Show selected tab content
document.querySelectorAll('.osint-tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.getElementById(`osint-${tabName}`).classList.add('active');
}
// Initialize FullCalendar
function initCalendar() {
const calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction' ],
defaultView: 'dayGridMonth',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
events: [
{
title: 'Audiência - Caso #7890',
start: '2023-05-16T10:30:00',
end: '2023-05-16T12:00:00',
color: '#3b82f6'
},
{
title: 'Reunião com cliente - Caso #4567',
start: '2023-05-18T14:00:00',
end: '2023-05-18T15:30:00',
color: '#10b981'
},
{
title: 'Prazo para petição - Caso #3214',
start: '2023-05-20',
color: '#ef4444',
allDay: true
},
{
title: 'Análise de documentos',
start: '2023-05-22T09:00:00',
end: '2023-05-22T11:00:00',
color: '#8b5cf6'
}
],
dateClick: function(info) {
alert('Clicked on: ' + info.dateStr);
// You could add a modal to create a new event here
},
eventClick: function(info) {
alert('Event: ' + info.event.title);
// You could add a modal to edit the event here
}
});
calendar.render();
}
// Evidence functions
function renderEvidence() {
const container = document.getElementById('crime-scene-container');
container.innerHTML = '';
evidences.forEach(evidence => {
const icon = getEvidenceIcon(evidence.type);
const tag = document.createElement('div');
tag.className = 'evidence-tag';
tag.style.left = `${evidence.x}%`;
tag.style.top = `${evidence.y}%`;
tag.innerHTML = `<i class="fas fa-${icon} mr-1"></i> ${evidence.name}`;
tag.dataset.id = evidence.id;
// Add click event to edit evidence
tag.addEventListener('click', function(e) {
e.stopPropagation();
editEvidence(evidence.id);
});
// Make draggable
makeDraggable(tag);
container.appendChild(tag);
});
}
function getEvidenceIcon(type) {
const icons = {
'fingerprint': 'fingerprint',
'weapon': 'knife',
'blood': 'tint',
'footprint': 'shoe-prints',
'document': 'file-alt',
'other': 'tag'
};
return icons[type] || 'tag';
}
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
element.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// Get the mouse cursor position at startup
pos3 = e.clientX;
pos4 = e.clientY;
// Highlight the element being dragged
element.classList.add('editing');
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// Calculate the new cursor position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set the element's new position
const container = document.getElementById('crime-scene-container');
const containerRect = container.getBoundingClientRect();
// Calculate new top and left positions as percentages
let top = (element.offsetTop - pos2) / containerRect.height * 100;
let left = (element.offsetLeft - pos1) / containerRect.width * 100;
// Constrain to container bounds
top = Math.max(0, Math.min(100, top));
left = Math.max(0, Math.min(100, left));
element.style.top = `${top}%`;
element.style.left = `${left}%`;
// Update the evidence position in the data
const evidenceId = parseInt(element.dataset.id);
const evidence = evidences.find(e => e.id === evidenceId);
if (evidence) {
evidence.y = top;
evidence.x =
</html>