Hugging Face's logo

Spaces:
stadv
/
25gut5w1
Running

App Files Community
alexandremoraisdarosa commited on
Commit
f6faad4
·
verified ·
1 Parent(s): b146896

Gere um aplicativo de 5w2H para uso na gestão de um caso Penal em uma aba. Gere um aplicativo de Tarefas com valores GUT (escala 0-5). Gere um calendário editável dos Eventos. Gere Dados de Capa do caso penal. Gere um Inventário de Documentos. Gere instruções. Implemente as operações Crud. Gere botões de exportação. Use as cores branca, preta e cinza - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1080 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
  title: 25gut5w1
3
- emoji: 📚
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
  title: 25gut5w1
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1080 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gestão de Casos Penais</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hidden {
11
+ display: none;
12
+ }
13
+ #calendar .day:hover {
14
+ background-color: #e5e7eb;
15
+ cursor: pointer;
16
+ }
17
+ #calendar .event {
18
+ background-color: #f3f4f6;
19
+ border-left: 4px solid #4b5563;
20
+ padding: 2px;
21
+ margin: 2px 0;
22
+ font-size: 0.8rem;
23
+ }
24
+ #taskModal, #eventModal, #documentModal, #caseModal {
25
+ background-color: rgba(0,0,0,0.5);
26
+ }
27
+ .priority-1 { border-left-color: #ef4444 !important; }
28
+ .priority-2 { border-left-color: #f59e0b !important; }
29
+ .priority-3 { border-left-color: #10b981 !important; }
30
+ .priority-4 { border-left-color: #3b82f6 !important; }
31
+ .priority-5 { border-left-color: #8b5cf6 !important; }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-100 font-sans">
35
+ <div class="container mx-auto p-4 max-w-6xl">
36
+ <!-- Header -->
37
+ <header class="bg-white shadow-md rounded-lg p-4 mb-6 flex justify-between items-center">
38
+ <h1 class="text-2xl font-bold text-gray-800">Gestão de Casos Penais</h1>
39
+ <div class="flex space-x-2">
40
+ <button onclick="exportData()" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
41
+ <i class="fas fa-file-export mr-2"></i>Exportar
42
+ </button>
43
+ </div>
44
+ </header>
45
+
46
+ <!-- Navigation Tabs -->
47
+ <div class="bg-white rounded-lg shadow-md mb-6">
48
+ <div class="flex border-b">
49
+ <button onclick="showTab('case-tab')" class="px-6 py-3 font-medium text-gray-800 border-b-2 border-gray-800">Dados do Caso</button>
50
+ <button onclick="showTab('5w2h-tab')" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800">5W2H</button>
51
+ <button onclick="showTab('tasks-tab')" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800">Tarefas GUT</button>
52
+ <button onclick="showTab('calendar-tab')" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800">Calendário</button>
53
+ <button onclick="showTab('documents-tab')" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800">Documentos</button>
54
+ <button onclick="showTab('instructions-tab')" class="px-6 py-3 font-medium text-gray-600 hover:text-gray-800">Instruções</button>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Case Data Tab -->
59
+ <div id="case-tab" class="tab-content bg-white rounded-lg shadow-md p-6 mb-6">
60
+ <div class="flex justify-between items-center mb-6">
61
+ <h2 class="text-xl font-bold text-gray-800">Dados do Caso Penal</h2>
62
+ <button onclick="openModal('caseModal')" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
63
+ <i class="fas fa-edit mr-2"></i>Editar
64
+ </button>
65
+ </div>
66
+
67
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
68
+ <div>
69
+ <h3 class="text-lg font-semibold text-gray-700 mb-2 pb-2 border-b">Informações Básicas</h3>
70
+ <div class="space-y-4">
71
+ <div>
72
+ <p class="text-gray-500">Número do Processo</p>
73
+ <p class="font-medium" id="case-number">0001234-56.7891.0000</p>
74
+ </div>
75
+ <div>
76
+ <p class="text-gray-500">Cliente</p>
77
+ <p class="font-medium" id="client-name">João da Silva</p>
78
+ </div>
79
+ <div>
80
+ <p class="text-gray-500">Advogado Responsável</p>
81
+ <p class="font-medium" id="lawyer-name">Dra. Maria Oliveira</p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <div>
87
+ <h3 class="text-lg font-semibold text-gray-700 mb-2 pb-2 border-b">Detalhes do Caso</h3>
88
+ <div class="space-y-4">
89
+ <div>
90
+ <p class="text-gray-500">Tipo de Ação</p>
91
+ <p class="font-medium" id="case-type">Ação Penal</p>
92
+ </div>
93
+ <div>
94
+ <p class="text-gray-500">Comarca</p>
95
+ <p class="font-medium" id="jurisdiction">São Paulo - SP</p>
96
+ </div>
97
+ <div>
98
+ <p class="text-gray-500">Status</p>
99
+ <p class="font-medium" id="case-status">Em Andamento</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="mt-6">
106
+ <h3 class="text-lg font-semibold text-gray-700 mb-2 pb-2 border-b">Descrição do Caso</h3>
107
+ <p id="case-description" class="text-gray-800">
108
+ O cliente é acusado de crime contra o patrimônio. Segundo a denúncia, em 15/03/2023 teria subtraído bem móvel de valor considerável. A defesa alega inexistência de provas suficientes para condenação e que o cliente tem alibi comprovado.
109
+ </p>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- 5W2H Tab -->
114
+ <div id="5w2h-tab" class="tab-content hidden bg-white rounded-lg shadow-md p-6 mb-6">
115
+ <div class="flex justify-between items-center mb-6">
116
+ <h2 class="text-xl font-bold text-gray-800">Análise 5W2H</h2>
117
+ <button class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
118
+ <i class="fas fa-plus mr-2"></i>Nova Análise
119
+ </button>
120
+ </div>
121
+
122
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
123
+ <div class="bg-gray-50 p-4 rounded-lg">
124
+ <h3 class="font-semibold text-gray-700 mb-3">O que (What)?</h3>
125
+ <textarea class="w-full h-32 p-2 border border-gray-300 rounded" placeholder="Descreva o que precisa ser feito...">Ação penal por crime contra o patrimônio (art. 155, CP)</textarea>
126
+ </div>
127
+
128
+ <div class="bg-gray-50 p-4 rounded-lg">
129
+ <h3 class="font-semibold text-gray-700 mb-3">Por que (Why)?</h3>
130
+ <textarea class="w-full h-32 p-2 border border-gray-300 rounded" placeholder="Descreva o motivo...">Defender os interesses do cliente acusado injustamente e garantir seus direitos fundamentais</textarea>
131
+ </div>
132
+
133
+ <div class="bg-gray-50 p-4 rounded-lg">
134
+ <h3 class="font-semibold text-gray-700 mb-3">Onde (Where)?</h3>
135
+ <textarea class="w-full h-32 p-2 border border-gray-300 rounded" placeholder="Descreva o local...">Comarca da Capital - Fórum Criminal Central - Sala 204</textarea>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
140
+ <div class="bg-gray-50 p-4 rounded-lg">
141
+ <h3 class="font-semibold text-gray-700 mb-3">Quando (When)?</h3>
142
+ <textarea class="w-full h-28 p-2 border border-gray-300 rounded" placeholder="Descreva o prazo...">Audiência em 15/09/2023. Prazo para alegações finais em 30/10/2023</textarea>
143
+ </div>
144
+
145
+ <div class="bg-gray-50 p-4 rounded-lg">
146
+ <h3 class="font-semibold text-gray-700 mb-3">Quem (Who)?</h3>
147
+ <textarea class="w-full h-28 p-2 border border-gray-300 rounded" placeholder="Descreva os envolvidos...">Cliente: João Silva. Advogado: Dra. Maria Oliveira. Juiz: Dr. Carlos Mendes. MP: Dr. Paulo Costa</textarea>
148
+ </div>
149
+
150
+ <div class="bg-gray-50 p-4 rounded-lg">
151
+ <h3 class="font-semibold text-gray-700 mb-3">Como (How)?</h3>
152
+ <textarea class="w-full h-28 p-2 border border-gray-300 rounded" placeholder="Descreva o método...">Apresentação de defesa técnica, provas documentais, produção de prova testemunhal</textarea>
153
+ </div>
154
+
155
+ <div class="bg-gray-50 p-4 rounded-lg">
156
+ <h3 class="font-semibold text-gray-700 mb-3">Quanto (How much)?</h3>
157
+ <textarea class="w-full h-28 p-2 border border-gray-300 rounded" placeholder="Descreva os custos...">Honorários: R$ 12.000,00 (parcelados). Custas processuais: R$ 1.200,00</textarea>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="mt-6 flex justify-end">
162
+ <button class="bg-gray-800 text-white px-6 py-2 rounded hover:bg-gray-700 transition">
163
+ <i class="fas fa-save mr-2"></i>Salvar Análise
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Tasks Tab -->
169
+ <div id="tasks-tab" class="tab-content hidden bg-white rounded-lg shadow-md p-6 mb-6">
170
+ <div class="flex justify-between items-center mb-6">
171
+ <h2 class="text-xl font-bold text-gray-800">Tarefas com Priorização GUT</h2>
172
+ <button onclick="openModal('taskModal')" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
173
+ <i class="fas fa-plus mr-2"></i>Nova Tarefa
174
+ </button>
175
+ </div>
176
+
177
+ <div class="overflow-x-auto">
178
+ <table class="min-w-full divide-y divide-gray-200">
179
+ <thead class="bg-gray-50">
180
+ <tr>
181
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tarefa</th>
182
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gravidade</th>
183
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Urgência</th>
184
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tendência</th>
185
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prioridade</th>
186
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
187
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
188
+ </tr>
189
+ </thead>
190
+ <tbody class="bg-white divide-y divide-gray-200" id="tasks-list">
191
+ <!-- Tasks will be added here dynamically -->
192
+ </tbody>
193
+ </table>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Calendar Tab -->
198
+ <div id="calendar-tab" class="tab-content hidden bg-white rounded-lg shadow-md p-6 mb-6">
199
+ <div class="flex justify-between items-center mb-6">
200
+ <h2 class="text-xl font-bold text-gray-800">Calendário de Eventos</h2>
201
+ <button onclick="openModal('eventModal')" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
202
+ <i class="fas fa-plus mr-2"></i>Novo Evento
203
+ </button>
204
+ </div>
205
+
206
+ <div class="mb-4 flex justify-between">
207
+ <button onclick="prevMonth()" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">
208
+ <i class="fas fa-chevron-left"></i>
209
+ </button>
210
+ <h3 id="month-year" class="text-lg font-semibold">Julho 2023</h3>
211
+ <button onclick="nextMonth()" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">
212
+ <i class="fas fa-chevron-right"></i>
213
+ </button>
214
+ </div>
215
+
216
+ <div id="calendar" class="grid grid-cols-7 gap-1">
217
+ <div class="text-center font-semibold py-2 bg-gray-200">Dom</div>
218
+ <div class="text-center font-semibold py-2 bg-gray-200">Seg</div>
219
+ <div class="text-center font-semibold py-2 bg-gray-200">Ter</div>
220
+ <div class="text-center font-semibold py-2 bg-gray-200">Qua</div>
221
+ <div class="text-center font-semibold py-2 bg-gray-200">Qui</div>
222
+ <div class="text-center font-semibold py-2 bg-gray-200">Sex</div>
223
+ <div class="text-center font-semibold py-2 bg-gray-200">Sáb</div>
224
+
225
+ <!-- Calendar days will be generated here dynamically -->
226
+ </div>
227
+
228
+ <div class="mt-6">
229
+ <h3 class="text-lg font-semibold text-gray-700 mb-2 pb-2 border-b">Eventos deste Mês</h3>
230
+ <div id="events-list" class="space-y-2">
231
+ <!-- Events will be listed here -->
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Documents Tab -->
237
+ <div id="documents-tab" class="tab-content hidden bg-white rounded-lg shadow-md p-6 mb-6">
238
+ <div class="flex justify-between items-center mb-6">
239
+ <h2 class="text-xl font-bold text-gray-800">Inventário de Documentos</h2>
240
+ <button onclick="openModal('documentModal')" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
241
+ <i class="fas fa-plus mr-2"></i>Adicionar Documento
242
+ </button>
243
+ </div>
244
+
245
+ <div class="overflow-x-auto">
246
+ <table class="min-w-full divide-y divide-gray-200">
247
+ <thead class="bg-gray-50">
248
+ <tr>
249
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
250
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
251
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
252
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
253
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
254
+ </tr>
255
+ </thead>
256
+ <tbody class="bg-white divide-y divide-gray-200" id="documents-list">
257
+ <!-- Documents will be added here dynamically -->
258
+ </tbody>
259
+ </table>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Instructions Tab -->
264
+ <div id="instructions-tab" class="tab-content hidden bg-white rounded-lg shadow-md p-6 mb-6">
265
+ <div class="flex justify-between items-center mb-6">
266
+ <h2 class="text-xl font-bold text-gray-800">Instruções</h2>
267
+ <button onclick="addInstruction()" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition">
268
+ <i class="fas fa-plus mr-2"></i>Nova Instrução
269
+ </button>
270
+ </div>
271
+
272
+ <div id="instructions-container" class="space-y-4">
273
+ <div class="instruction-item bg-gray-50 p-4 rounded-lg">
274
+ <div class="flex justify-between items-start">
275
+ <div>
276
+ <h3 class="font-semibold text-gray-700">Apresentação de Alegações Finais</h3>
277
+ <p class="text-gray-600 mt-1">Preparar memoriais conforme jurisprudência consolidada em casos semelhantes. Valorizar os elementos de defesa já apresentados.</p>
278
+ </div>
279
+ <div class="flex space-x-2">
280
+ <button onclick="editInstruction(this)" class="text-gray1-600 hover:text-gray-800">
281
+ <i class="fas fa-edit"></i>
282
+ </button>
283
+ <button onclick="deleteInstruction(this)" class="text-red-500 hover:text-red-700">
284
+ <i class="fas fa-trash"></i>
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="instruction-item bg-gray-50 p-4 rounded-lg">
291
+ <div class="flex justify-between items-start">
292
+ <div>
293
+ <h3 class="font-semibold text-gray-700">Produção de Prova</h3>
294
+ <p class="text-gray-600 mt-1">Marcar entrevista com testemunhas indicadas pelo cliente. Coletar documentos comprobatórios do alibi.</p>
295
+ </div>
296
+ <div class="flex space-x-2">
297
+ <button onclick="editInstruction(this)" class="text-gray1-600 hover:text-gray-800">
298
+ <i class="fas fa-edit"></i>
299
+ </button>
300
+ <button onclick="deleteInstruction(this)" class="text-red-500 hover:text-red-700">
301
+ <i class="fas fa-trash"></i>
302
+ </button>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Modals -->
311
+ <!-- Task Modal -->
312
+ <div id="taskModal" class="fixed inset-0 z-50 hidden">
313
+ <div class="flex items-center justify-center min-h-screen">
314
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
315
+ <div class="px-6 py-4 border-b">
316
+ <h3 class="text-lg font-semibold text-gray-800">Nova Tarefa</h3>
317
+ </div>
318
+ <div class="p-6">
319
+ <div class="mb-4">
320
+ <label class="block text-gray-700 mb-2">Tarefa</label>
321
+ <input type="text" id="task-title" class="w-full p-2 border border-gray-300 rounded">
322
+ </div>
323
+ <div class="mb-4">
324
+ <label class="block text-gray-700 mb-2">Descrição</label>
325
+ <textarea id="task-description" class="w-full p-2 border border-gray-300 rounded h-24"></textarea>
326
+ </div>
327
+ <div class="grid grid-cols-3 gap-4 mb-4">
328
+ <div>
329
+ <label class="block text-gray-700 mb-2">Gravidade (0-5)</label>
330
+ <input type="number" min="0" max="5" id="task-gravity" class="w-full p-2 border border-gray-300 rounded">
331
+ </div>
332
+ <div>
333
+ <label class="block text-gray-700 mb-2">Urgência (0-5)</label>
334
+ <input type="number" min="0" max="5" id="task-urgency" class="w-full p-2 border border-gray-300 rounded">
335
+ </div>
336
+ <div>
337
+ <label class="block text-gray-700 mb-2">Tendência (0-5)</label>
338
+ <input type="number" min="0" max="5" id="task-tendency" class="w-full p-2 border border-gray-300 rounded">
339
+ </div>
340
+ </div>
341
+ <div class="mb-4">
342
+ <label class="block text-gray-700 mb-2">Prazo</label>
343
+ <input type="date" id="task-deadline" class="w-full p-2 border border-gray-300 rounded">
344
+ </div>
345
+ <div class="mb-4">
346
+ <label class="block text-gray-700 mb-2">Responsável</label>
347
+ <input type="text" id="task-responsible" class="w-full p-2 border border-gray-300 rounded">
348
+ </div>
349
+ </div>
350
+ <div class="px-6 py-4 border-t flex justify-end space-x-3">
351
+ <button onclick="closeModal('taskModal')" class="px-4 py-2 text-gray-700 border border-gray-300 rounded hover:bg-gray-100">Cancelar</button>
352
+ <button onclick="saveTask()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Salvar</button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Event Modal -->
359
+ <div id="eventModal" class="fixed inset-0 z-50 hidden">
360
+ <div class="flex items-center justify-center min-h-screen">
361
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
362
+ <div class="px-6 py-4 border-b">
363
+ <h3 class="text-lg font-semibold text-gray-800">Novo Evento</h3>
364
+ </div>
365
+ <div class="p-6">
366
+ <div class="mb-4">
367
+ <label class="block text-gray-700 mb-2">Título</label>
368
+ <input type="text" id="event-title" class="w-full p-2 border border-gray-300 rounded">
369
+ </div>
370
+ <div class="mb-4">
371
+ <label class="block text-gray-700 mb-2">Descrição</label>
372
+ <textarea id="event-description" class="w-full p-2 border border-gray-300 rounded h-24"></textarea>
373
+ </div>
374
+ <div class="grid grid-cols-2 gap-4 mb-4">
375
+ <div>
376
+ <label class="block text-gray-700 mb-2">Data Início</label>
377
+ <input type="date" id="event-start" class="w-full p-2 border border-gray-300 rounded">
378
+ </div>
379
+ <div>
380
+ <label class="block text-gray-700 mb-2">Data Fim</label>
381
+ <input type="date" id="event-end" class="w-full p-2 border border-gray-300 rounded">
382
+ </div>
383
+ </div>
384
+ <div class="mb-4">
385
+ <label class="block text-gray-700 mb-2">Local</label>
386
+ <input type="text" id="event-location" class="w-full p-2 border border-gray-300 rounded">
387
+ </div>
388
+ </div>
389
+ <div class="px-6 py-4 border-t flex justify-end space-x-3">
390
+ <button onclick="closeModal('eventModal')" class="px-4 py-2 text-gray-700 border border-gray-300 rounded hover:bg-gray-100">Cancelar</button>
391
+ <button onclick="saveEvent()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Salvar</button>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Document Modal -->
398
+ <div id="documentModal" class="fixed inset-0 z-50 hidden">
399
+ <div class="flex items-center justify-center min-h-screen">
400
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
401
+ <div class="px-6 py-4 border-b">
402
+ <h3 class="text-lg font-semibold text-gray-800">Adicionar Documento</h3>
403
+ </div>
404
+ <div class="p-6">
405
+ <div class="mb-4">
406
+ <label class="block text-gray-700 mb-2">Tipo</label>
407
+ <select id="document-type" class="w-full p-2 border border-gray-300 rounded">
408
+ <option value="">Selecione...</option>
409
+ <option value="Petição">Petição</option>
410
+ <option value="Contrato">Contrato</option>
411
+ <option value="Notificação">Notificação</option>
412
+ <option value="Citação">Citação</option>
413
+ <option value="Prova">Prova</option>
414
+ <option value="Sentença">Sentença</option>
415
+ <option value="Outros">Outros</option>
416
+ </select>
417
+ </div>
418
+ <div class="mb-4">
419
+ <label class="block text-gray-700 mb-2">Descrição</label>
420
+ <input type="text" id="document-description" class="w-full p-2 border border-gray-300 rounded">
421
+ </div>
422
+ <div class="mb-4">
423
+ <label class="block text-gray-700 mb-2">Data</label>
424
+ <input type="date" id="document-date" class="w-full p-2 border border-gray-300 rounded">
425
+ </div>
426
+ <div class="mb-4">
427
+ <label class="block text-gray-700 mb-2">Status</label>
428
+ <select id="document-status" class="w-full p-2 border border-gray-300 rounded">
429
+ <option value="Pendente">Pendente</option>
430
+ <option value="Em análise">Em análise</option>
431
+ <option value="Assinado">Assinado</option>
432
+ <option value="Protocolado">Protocolado</option>
433
+ <option value="Arquivado">Arquivado</option>
434
+ </select>
435
+ </div>
436
+ <div class="mb-4">
437
+ <label class="block text-gray-700 mb-2">Arquivo</label>
438
+ <input type="file" id="document-file" class="w-full p-2 border border-gray-300 rounded">
439
+ </div>
440
+ </div>
441
+ <div class="px-6 py-4 border-t flex justify-end space-x-3">
442
+ <button onclick="closeModal('documentModal')" class="px-4 py-2 text-gray-700 border border-gray-300 rounded hover:bg-gray-100">Cancelar</button>
443
+ <button onclick="saveDocument()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Salvar</button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Case Modal -->
450
+ <div id="caseModal" class="fixed inset-0 z-50 hidden">
451
+ <div class="flex items-center justify-center min-h-screen">
452
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
453
+ <div class="px-6 py-4 border-b">
454
+ <h3 class="text-lg font-semibold text-gray-800">Editar Dados do Caso</h3>
455
+ </div>
456
+ <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
457
+ <div>
458
+ <div class="mb-4">
459
+ <label class="block text-gray-700 mb-2">Número do Processo</label>
460
+ <input type="text" id="edit-case-number" class="w-full p-2 border border-gray-300 rounded" value="0001234-56.7891.0000">
461
+ </div>
462
+ <div class="mb-4">
463
+ <label class="block text-gray-700 mb-2">Cliente</label>
464
+ <input type="text" id="edit-client-name" class="w-full p-2 border border-gray-300 rounded" value="João da Silva">
465
+ </div>
466
+ <div class="mb-4">
467
+ <label class="block text-gray-700 mb-2">Advogado Responsável</label>
468
+ <input type="text" id="edit-lawyer-name" class="w-full p-2 border border-gray-300 rounded" value="Dra. Maria Oliveira">
469
+ </div>
470
+ </div>
471
+
472
+ <div>
473
+ <div class="mb-4">
474
+ <label class="block text-gray-700 mb-2">Tipo de Ação</label>
475
+ <input type="text" id="edit-case-type" class="w-full p-2 border border-gray-300 rounded" value="Ação Penal">
476
+ </div>
477
+ <div class="mb-4">
478
+ <label class="block text-gray-700 mb-2">Comarca</label>
479
+ <input type="text" id="edit-jurisdiction" class="w-full p-2 border border-gray-300 rounded" value="São Paulo - SP">
480
+ </div>
481
+ <div class="mb-4">
482
+ <label class="block text-gray-700 mb-2">Status</label>
483
+ <select id="edit-case-status" class="w-full p-2 border border-gray-300 rounded">
484
+ <option value="Em Andamento">Em Andamento</option>
485
+ <option value="Aguardando Audiência">Aguardando Audiência</option>
486
+ <option value="Em Apelação">Em Apelação</option>
487
+ <option value="Arquivado">Arquivado</option>
488
+ <option value="Concluído">Concluído</option>
489
+ </select>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="md:col-span-2">
494
+ <label class="block text-gray-700 mb-2">Descrição do Caso</label>
495
+ <textarea id="edit-case-description" class="w-full p-2 border border-gray-300 rounded h-32">O cliente é acusado de crime contra o patrimônio. Segundo a denúncia, em 15/03/2023 teria subtraído bem móvel de valor considerável. A defesa alega inexistência de provas suficientes para condenação e que o cliente tem alibi comprovado.</textarea>
496
+ </div>
497
+ </div>
498
+ <div class="px-6 py-4 border-t flex justify-end space-x-3">
499
+ <button onclick="closeModal('caseModal')" class="px-4 py-2 text-gray-700 border border-gray-300 rounded hover:bg-gray-100">Cancelar</button>
500
+ <button onclick="saveCaseData()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Salvar</button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Instruction Modal -->
507
+ <div id="instructionModal" class="fixed inset-0 z-50 hidden">
508
+ <div class="flex items-center justify-center min-h-screen">
509
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
510
+ <div class="px-6 py-4 border-b">
511
+ <h3 class="text-lg font-semibold text-gray-800">Nova Instrução</h3>
512
+ </div>
513
+ <div class="p-6">
514
+ <div class="mb-4">
515
+ <label class="block text-gray-700 mb-2">Título</label>
516
+ <input type="text" id="instruction-title" class="w-full p-2 border border-gray-300 rounded">
517
+ </div>
518
+ <div class="mb-4">
519
+ <label class="block text-gray-700 mb-2">Descrição</label>
520
+ <textarea id="instruction-description" class="w-full p-2 border border-gray-300 rounded h-32"></textarea>
521
+ </div>
522
+ </div>
523
+ <div class="px-6 py-4 border-t flex justify-end space-x-3">
524
+ <button onclick="closeModal('instructionModal')" class="px-4 py-2 text-gray-700 border border-gray-300 rounded hover:bg-gray-100">Cancelar</button>
525
+ <button onclick="saveInstruction()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Salvar</button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <script>
532
+ // Show active tab and hide others
533
+ function showTab(tabId) {
534
+ document.querySelectorAll('.tab-content').forEach(tab => {
535
+ tab.classList.add('hidden');
536
+ });
537
+ document.getElementById(tabId).classList.remove('hidden');
538
+ }
539
+
540
+ // Initialize with Case tab visible
541
+ showTab('case-tab');
542
+
543
+ // Modal functions
544
+ function openModal(modalId) {
545
+ document.getElementById(modalId).classList.remove('hidden');
546
+ }
547
+
548
+ function closeModal(modalId) {
549
+ document.getElementById(modalId).classList.add('hidden');
550
+ }
551
+
552
+ // Save functions
553
+ function saveTask() {
554
+ const title = document.getElementById('task-title').value;
555
+ const description = document.getElementById('task-description').value;
556
+ const gravity = document.getElementById('task-gravity').value;
557
+ const urgency = document.getElementById('task-urgency').value;
558
+ const tendency = document.getElementById('task-tendency').value;
559
+ const deadline = document.getElementById('task-deadline').value;
560
+ const responsible = document.getElementById('task-responsible').value;
561
+
562
+ const priority = Math.round((parseInt(gravity) + parseInt(urgency) + parseInt(tendency)) / 3);
563
+
564
+ if(!title || !description || !gravity || !urgency || !tendency || !deadline || !responsible) {
565
+ alert('Preencha todos os campos!');
566
+ return;
567
+ }
568
+
569
+ const tasksList = document.getElementById('tasks-list');
570
+ const newRow = document.createElement('tr');
571
+ newRow.className = 'hover:bg-gray-50';
572
+
573
+ newRow.innerHTML = `
574
+ <td class="px-6 py-4 whitespace-nowrap">${title}</td>
575
+ <td class="px-6 py-4 whitespace-nowrap">${gravity}</td>
576
+ <td class="px-6 py-4 whitespace-nowrap">${urgency}</td>
577
+ <td class="px-6 py-4 whitespace-nowrap">${tendency}</td>
578
+ <td class="px-6 py-4 whitespace-nowrap">
579
+ <span class="px-2 py-1 rounded-full text-xs font-semibold priority-${priority}">
580
+ ${priority} - ${priority === 5 ? 'Crítico' : priority === 4 ? 'Alta' : priority === 3 ? 'Média' : priority === 2 ? 'Baixa' : 'Muito Baixa'}
581
+ </span>
582
+ </td>
583
+ <td class="px-6 py-4 whitespace-nowrap">
584
+ <span class="px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Pendente</span>
585
+ </td>
586
+ <td class="px-6 py-4 whitespace-nowrap">
587
+ <button onclick="editTask(this)" class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button>
588
+ <button onclick="deleteTask(this)" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
589
+ </td>
590
+ `;
591
+
592
+ tasksList.appendChild(newRow);
593
+ closeModal('taskModal');
594
+ clearTaskForm();
595
+ }
596
+
597
+ function clearTaskForm() {
598
+ document.getElementById('task-title').value = '';
599
+ document.getElementById('task-description').value = '';
600
+ document.getElementById('task-gravity').value = '';
601
+ document.getElementById('task-urgency').value = '';
602
+ document.getElementById('task-tendency').value = '';
603
+ document.getElementById('task-deadline').value = '';
604
+ document.getElementById('task-responsible').value = '';
605
+ }
606
+
607
+ function editTask(button) {
608
+ const row = button.closest('tr');
609
+ const cells = row.cells;
610
+
611
+ document.getElementById('task-title').value = cells[0].textContent;
612
+ document.getElementById('task-gravity').value = cells[1].textContent;
613
+ document.getElementById('task-urgency').value = cells[2].textContent;
614
+ document.getElementById('task-tendency').value = cells[3].textContent;
615
+
616
+ // For demo purposes, we'll just open the modal with the existing values
617
+ openModal('taskModal');
618
+
619
+ // In a real app, you would track which task is being edited
620
+ // and update it when saving instead of creating a new one
621
+ }
622
+
623
+ function deleteTask(button) {
624
+ if(confirm('Tem certeza que deseja excluir esta tarefa?')) {
625
+ button.closest('tr').remove();
626
+ }
627
+ }
628
+
629
+ function saveEvent() {
630
+ const title = document.getElementById('event-title').value;
631
+ const description = document.getElementById('event-description').value;
632
+ const start = document.getElementById('event-start').value;
633
+ const end = document.getElementById('event-end').value;
634
+ const location = document.getElementById('event-location').value;
635
+
636
+ if(!title || !start || !end) {
637
+ alert('Preencha os campos obrigatórios!');
638
+ return;
639
+ }
640
+
641
+ // Add to calendar UI
642
+ generateCalendar(); // Refresh calendar to show new event
643
+
644
+ // Add to events list
645
+ const eventsList = document.getElementById('events-list');
646
+ const eventItem = document.createElement('div');
647
+ eventItem.className = 'bg-gray-50 p-3 rounded';
648
+ eventItem.innerHTML = `
649
+ <h4 class="font-semibold">${title}</h4>
650
+ <p class="text-sm text-gray-600">${formatDate(start)} ${start !== end ? 'a ' + formatDate(end) : ''} • ${location}</p>
651
+ <p class="text-sm mt-1">${description}</p>
652
+ `;
653
+
654
+ eventsList.appendChild(eventItem);
655
+ closeModal('eventModal');
656
+ clearEventForm();
657
+ }
658
+
659
+ function clearEventForm() {
660
+ document.getElementById('event-title').value = '';
661
+ document.getElementById('event-description').value = '';
662
+ document.getElementById('event-start').value = '';
663
+ document.getElementById('event-end').value = '';
664
+ document.getElementById('event-location').value = '';
665
+ }
666
+
667
+ function saveDocument() {
668
+ const type = document.getElementById('document-type').value;
669
+ const description = document.getElementById('document-description').value;
670
+ const date = document.getElementById('document-date').value;
671
+ const status = document.getElementById('document-status').value;
672
+ const file = document.getElementById('document-file').value;
673
+
674
+ if(!type || !description || !date || !status) {
675
+ alert('Preencha os campos obrigatórios!');
676
+ return;
677
+ }
678
+
679
+ const documentsList = document.getElementById('documents-list');
680
+ const newRow = document.createElement('tr');
681
+ newRow.className = 'hover:bg-gray-50';
682
+
683
+ newRow.innerHTML = `
684
+ <td class="px-6 py-4 whitespace-nowrap">${type}</td>
685
+ <td class="px-6 py-4">${description}</td>
686
+ <td class="px-6 py-4 whitespace-nowrap">${formatDate(date)}</td>
687
+ <td class="px-6 py-4 whitespace-nowrap">
688
+ <span class="px-2 py-1 rounded-full text-xs font-semibold ${getStatusColor(status)}">
689
+ ${status}
690
+ </span>
691
+ </td>
692
+ <td class="px-6 py-4 whitespace-nowrap">
693
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
694
+ <button onclick="editDocument(this)" class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button>
695
+ <button onclick="deleteDocument(this)" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
696
+ </td>
697
+ `;
698
+
699
+ documentsList.appendChild(newRow);
700
+ closeModal('documentModal');
701
+ clearDocumentForm();
702
+ }
703
+
704
+ function getStatusColor(status) {
705
+ switch(status) {
706
+ case 'Pendente': return 'bg-yellow-100 text-yellow-800';
707
+ case 'Em análise': return 'bg-blue-100 text-blue-800';
708
+ case 'Assinado': return 'bg-purple-100 text-purple-800';
709
+ case 'Protocolado': return 'bg-green-100 text-green-800';
710
+ case 'Arquivado': return 'bg-gray-100 text-gray-800';
711
+ default: return 'bg-gray-100 text-gray-800';
712
+ }
713
+ }
714
+
715
+ function clearDocumentForm() {
716
+ document.getElementById('document-type').value = '';
717
+ document.getElementById('document-description').value = '';
718
+ document.getElementById('document-date').value = '';
719
+ document.getElementById('document-status').value = 'Pendente';
720
+ document.getElementById('document-file').value = '';
721
+ }
722
+
723
+ function editDocument(button) {
724
+ const row = button.closest('tr');
725
+ const cells = row.cells;
726
+
727
+ document.getElementById('document-type').value = cells[0].textContent;
728
+ document.getElementById('document-description').value = cells[1].textContent;
729
+ document.getElementById('document-date').value = cells[2].textContent;
730
+
731
+ // For demo purposes, we'll just open the modal with the existing values
732
+ openModal('documentModal');
733
+ }
734
+
735
+ function deleteDocument(button) {
736
+ if(confirm('Tem certeza que deseja excluir este documento?')) {
737
+ button.closest('tr').remove();
738
+ }
739
+ }
740
+
741
+ function saveCaseData() {
742
+ document.getElementById('case-number').textContent = document.getElementById('edit-case-number').value;
743
+ document.getElementById('client-name').textContent = document.getElementById('edit-client-name').value;
744
+ document.getElementById('lawyer-name').textContent = document.getElementById('edit-lawyer-name').value;
745
+ document.getElementById('case-type').textContent = document.getElementById('edit-case-type').value;
746
+ document.getElementById('jurisdiction').textContent = document.getElementById('edit-jurisdiction').value;
747
+ document.getElementById('case-status').textContent = document.getElementById('edit-case-status').value;
748
+ document.getElementById('case-description').textContent = document.getElementById('edit-case-description').value;
749
+
750
+ closeModal('caseModal');
751
+ }
752
+
753
+ function addInstruction() {
754
+ const modal = document.getElementById('instructionModal');
755
+ modal.querySelector('h3').textContent = 'Nova Instrução';
756
+ document.getElementById('instruction-title').value = '';
757
+ document.getElementById('instruction-description').value = '';
758
+ openModal('instructionModal');
759
+ }
760
+
761
+ function saveInstruction() {
762
+ const title = document.getElementById('instruction-title').value;
763
+ const description = document.getElementById('instruction-description').value;
764
+
765
+ if(!title || !description) {
766
+ alert('Preencha todos os campos!');
767
+ return;
768
+ }
769
+
770
+ const container = document.getElementById('instructions-container');
771
+ const newInstruction = document.createElement('div');
772
+ newInstruction.className = 'instruction-item bg-gray-50 p-4 rounded-lg';
773
+ newInstruction.innerHTML = `
774
+ <div class="flex justify-between items-start">
775
+ <div>
776
+ <h3 class="font-semibold text-gray-700">${title}</h3>
777
+ <p class="text-gray-600 mt-1">${description}</p>
778
+ </div>
779
+ <div class="flex space-x-2">
780
+ <button onclick="editInstruction(this)" class="text-gray1-600 hover:text-gray-800">
781
+ <i class="fas fa-edit"></i>
782
+ </button>
783
+ <button onclick="deleteInstruction(this)" class="text-red-500 hover:text-red-700">
784
+ <i class="fas fa-trash"></i>
785
+ </button>
786
+ </div>
787
+ </div>
788
+ `;
789
+
790
+ container.appendChild(newInstruction);
791
+ closeModal('instructionModal');
792
+ }
793
+
794
+ function editInstruction(button) {
795
+ const instruction = button.closest('.instruction-item');
796
+ const title = instruction.querySelector('h3').textContent;
797
+ const description = instruction.querySelector('p').textContent;
798
+
799
+ const modal = document.getElementById('instructionModal');
800
+ modal.querySelector('h3').textContent = 'Editar Instrução';
801
+ document.getElementById('instruction-title').value = title;
802
+ document.getElementById('instruction-description').value = description;
803
+
804
+ // Store reference to the instruction being edited
805
+ modal.dataset.editingElement = instruction;
806
+ openModal('instructionModal');
807
+
808
+ // Override save function for this edit
809
+ const oldSave = window.saveInstruction;
810
+ window.saveInstruction = function() {
811
+ const title = document.getElementById('instruction-title').value;
812
+ const description = document.getElementById('instruction-description').value;
813
+
814
+ if(!title || !description) {
815
+ alert('Preencha todos os campos!');
816
+ return;
817
+ }
818
+
819
+ instruction.querySelector('h3').textContent = title;
820
+ instruction.querySelector('p').textContent = description;
821
+
822
+ closeModal('instructionModal');
823
+ window.saveInstruction = oldSave; // Restore original function
824
+ };
825
+ }
826
+
827
+ function deleteInstruction(button) {
828
+ if(confirm('Tem certeza que deseja excluir esta instrução?')) {
829
+ button.closest('.instruction-item').remove();
830
+ }
831
+ }
832
+
833
+ // Calendar functions
834
+ let currentDate = new Date();
835
+ let currentMonth = currentDate.getMonth();
836
+ let currentYear = currentDate.getFullYear();
837
+
838
+ function generateCalendar() {
839
+ const calendarEl = document.getElementById('calendar');
840
+ const monthYearEl = document.getElementById('month-year');
841
+
842
+ // Clear existing calendar days (keep headers)
843
+ while(calendarEl.children.length > 7) {
844
+ calendarEl.removeChild(calendarEl.lastChild);
845
+ }
846
+
847
+ // Set month/year display
848
+ const monthNames = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho",
849
+ "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
850
+ monthYearEl.textContent = `${monthNames[currentMonth]} ${currentYear}`;
851
+
852
+ // Get first day of month and total days in month
853
+ const firstDay = new Date(currentYear, currentMonth, 1).getDay();
854
+ const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
855
+
856
+ // Add empty cells for days before the first day of the month
857
+ for(let i = 0; i < firstDay; i++) {
858
+ const emptyCell = document.createElement('div');
859
+ emptyCell.className = 'h-24 p-1 border border-gray-200 bg-gray-100';
860
+ calendarEl.appendChild(emptyCell);
861
+ }
862
+
863
+ // Add cells for each day of the month
864
+ for(let day = 1; day <= daysInMonth; day++) {
865
+ const dayCell = document.createElement('div');
866
+ dayCell.className = 'h-24 p-1 border border-gray-200 overflow-auto day';
867
+
868
+ const dayNumber = document.createElement('div');
869
+ dayNumber.className = 'text-right font-semibold';
870
+ dayNumber.textContent = day;
871
+ dayCell.appendChild(dayNumber);
872
+
873
+ // Add sample events (in a real app, these would come from a database)
874
+ if(day === 15 && currentMonth === new Date().getMonth()) {
875
+ const event = document.createElement('div');
876
+ event.className = 'event';
877
+ event.textContent = 'Audiência';
878
+ dayCell.appendChild(event);
879
+ }
880
+
881
+ if(day === 20 && currentMonth === new Date().getMonth()) {
882
+ const event = document.createElement('div');
883
+ event.className = 'event';
884
+ event.textContent = 'Prazo para recursos';
885
+ dayCell.appendChild(event);
886
+ }
887
+
888
+ dayCell.onclick = function() {
889
+ // Set clicked date in event modal
890
+ const clickedDate = new Date(currentYear, currentMonth, day);
891
+ document.getElementById('event-start').valueAsDate = clickedDate;
892
+ document.getElementById('event-end').valueAsDate = clickedDate;
893
+ openModal('eventModal');
894
+ };
895
+
896
+ calendarEl.appendChild(dayCell);
897
+ }
898
+
899
+ // Update events list for the month
900
+ updateEventsList();
901
+ }
902
+
903
+ function updateEventsList() {
904
+ const eventsList = document.getElementById('events-list');
905
+ eventsList.innerHTML = '';
906
+
907
+ // Sample events (would come from database in real app)
908
+ const sampleEvents = [
909
+ {
910
+ title: 'Audiência',
911
+ start: formatDate(new Date(currentYear, currentMonth, 15)),
912
+ end: formatDate(new Date(currentYear, currentMonth, 15)),
913
+ location: 'Fórum Criminal Central - Sala 204',
914
+ description: 'Audiência de instrução e julgamento com oitiva de testemunhas'
915
+ },
916
+ {
917
+ title: 'Prazo para recursos',
918
+ start: formatDate(new Date(currentYear, currentMonth, 20)),
919
+ end: formatDate(new Date(currentYear, currentMonth, 20)),
920
+ location: 'Online',
921
+ description: 'Término do prazo para interposição de recursos'
922
+ }
923
+ ];
924
+
925
+ sampleEvents.forEach(event => {
926
+ const eventItem = document.createElement('div');
927
+ eventItem.className = 'bg-gray-50 p-3 rounded';
928
+ eventItem.innerHTML = `
929
+ <h4 class="font-semibold">${event.title}</h4>
930
+ <p class="text-sm text-gray-600">${event.start} • ${event.location}</p>
931
+ <p class="text-sm mt-1">${event.description}</p>
932
+ `;
933
+ eventsList.appendChild(eventItem);
934
+ });
935
+ }
936
+
937
+ function prevMonth() {
938
+ currentMonth--;
939
+ if(currentMonth < 0) {
940
+ currentMonth = 11;
941
+ currentYear--;
942
+ }
943
+ generateCalendar();
944
+ }
945
+
946
+ function nextMonth() {
947
+ currentMonth++;
948
+ if(currentMonth > 11) {
949
+ currentMonth = 0;
950
+ currentYear++;
951
+ }
952
+ generateCalendar();
953
+ }
954
+
955
+ // Helper function to format dates
956
+ function formatDate(dateString) {
957
+ if(!dateString) return '';
958
+
959
+ const date = new Date(dateString);
960
+ if(isNaN(date.getTime())) return dateString; // if invalid date, return as is
961
+
962
+ const day = date.getDate().toString().padStart(2, '0');
963
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
964
+ const year = date.getFullYear();
965
+
966
+ return `${day}/${month}/${year}`;
967
+ }
968
+
969
+ // Export function (would integrate with export libraries in real app)
970
+ function exportData() {
971
+ alert('Dados exportados com sucesso! (Demonstração)');
972
+
973
+ // In a real app, this would:
974
+ // 1. Collect all relevant data
975
+ // 2. Generate a PDF/Excel file
976
+ // 3. Trigger download
977
+ }
978
+
979
+ // Initialize the app
980
+ function init() {
981
+ generateCalendar();
982
+
983
+ // Add sample tasks
984
+ const sampleTasks = [
985
+ {
986
+ title: 'Preparar alegações finais',
987
+ gravity: '4',
988
+ urgency: '5',
989
+ tendency: '4',
990
+ description: 'Elaborar memorial com jurisprudência pertinente',
991
+ deadline: new Date(new Date().setDate(new Date().getDate() + 7)),
992
+ responsible: 'Dra. Maria'
993
+ },
994
+ {
995
+ title: 'Entrevistar testemunha',
996
+ gravity: '3',
997
+ urgency: '3',
998
+ tendency: '2',
999
+ description: 'Marcar reunião com testemunha chave',
1000
+ deadline: new Date(new Date().setDate(new Date().getDate() + 3)),
1001
+ responsible: 'Dr. Carlos'
1002
+ }
1003
+ ];
1004
+
1005
+ sampleTasks.forEach(task => {
1006
+ // Create cells needed for the task
1007
+ const priority = Math.round((parseInt(task.gravity) + parseInt(task.urgency) + parseInt(task.tendency)) / 3);
1008
+
1009
+ const tasksList = document.getElementById('tasks-list');
1010
+ const newRow = document.createElement('tr');
1011
+ newRow.className = 'hover:bg-gray-50';
1012
+
1013
+ newRow.innerHTML = `
1014
+ <td class="px-6 py-4 whitespace-nowrap">${task.title}</td>
1015
+ <td class="px-6 py-4 whitespace-nowrap">${task.gravity}</td>
1016
+ <td class="px-6 py-4 whitespace-nowrap">${task.urgency}</td>
1017
+ <td class="px-6 py-4 whitespace-nowrap">${task.tendency}</td>
1018
+ <td class="px-6 py-4 whitespace-nowrap">
1019
+ <span class="px-2 py-1 rounded-full text-xs font-semibold priority-${priority}">
1020
+ ${priority} - ${priority === 5 ? 'Crítico' : priority === 4 ? 'Alta' : priority === 3 ? 'Média' : priority === 2 ? 'Baixa' : 'Muito Baixa'}
1021
+ </span>
1022
+ </td>
1023
+ <td class="px-6 py-4 whitespace-nowrap">
1024
+ <span class="px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Pendente</span>
1025
+ </td>
1026
+ <td class="px-6 py-4 whitespace-nowrap">
1027
+ <button onclick="editTask(this)" class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button>
1028
+ <button onclick="deleteTask(this)" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
1029
+ </td>
1030
+ `;
1031
+
1032
+ tasksList.appendChild(newRow);
1033
+ });
1034
+
1035
+ // Add sample documents
1036
+ const sampleDocs = [
1037
+ {
1038
+ type: 'Petição',
1039
+ description: 'Petição inicial com pedido de absolvição',
1040
+ date: '2023-06-10',
1041
+ status: 'Protocolado'
1042
+ },
1043
+ {
1044
+ type: 'Prova',
1045
+ description: 'Documentos comprobatórios do alibi',
1046
+ date: '2023-06-15',
1047
+ status: 'Assinado'
1048
+ }
1049
+ ];
1050
+
1051
+ sampleDocs.forEach(doc => {
1052
+ const docsList = document.getElementById('documents-list');
1053
+ const newRow = document.createElement('tr');
1054
+ newRow.className = 'hover:bg-gray-50';
1055
+
1056
+ newRow.innerHTML = `
1057
+ <td class="px-6 py-4 whitespace-nowrap">${doc.type}</td>
1058
+ <td class="px-6 py-4">${doc.description}</td>
1059
+ <td class="px-6 py-4 whitespace-nowrap">${formatDate(doc.date)}</td>
1060
+ <td class="px-6 py-4 whitespace-nowrap">
1061
+ <span class="px-2 py-1 rounded-full text-xs font-semibold ${getStatusColor(doc.status)}">
1062
+ ${doc.status}
1063
+ </span>
1064
+ </td>
1065
+ <td class="px-6 py-4 whitespace-nowrap">
1066
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
1067
+ <button onclick="editDocument(this)" class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button>
1068
+ <button onclick="deleteDocument(this)" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
1069
+ </td>
1070
+ `;
1071
+
1072
+ docsList.appendChild(newRow);
1073
+ });
1074
+ }
1075
+
1076
+ // Initialize when page loads
1077
+ window.onload = init;
1078
+ </script>
1079
+ <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/25gut5w1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1080
+ </html>