Hugging Face's logo

Spaces:
JEFFERSON1995
/
sistemadegestao2
Running

App Files Community
JEFFERSON1995 commited on
Commit
3019491
·
verified ·
1 Parent(s): d0d0821

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1234 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sistemadegestao2
3
- emoji: 📚
4
- colorFrom: blue
5
- colorTo: purple
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: sistemadegestao2
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,1234 @@
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>LexFlow - Gestão de Processos Jurídicos</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .sidebar-collapsed {
15
+ width: 70px;
16
+ }
17
+ .sidebar-collapsed .menu-text {
18
+ display: none;
19
+ }
20
+ .sidebar-collapsed .logo-text {
21
+ display: none;
22
+ }
23
+ .sidebar-collapsed .menu-item {
24
+ justify-content: center;
25
+ }
26
+ .content-area {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .content-expanded {
30
+ margin-left: 70px;
31
+ }
32
+ .kanban-column {
33
+ min-height: 500px;
34
+ }
35
+ .process-card:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
38
+ }
39
+ .timeline-item:not(:last-child)::after {
40
+ content: '';
41
+ position: absolute;
42
+ left: 11px;
43
+ top: 24px;
44
+ height: 100%;
45
+ width: 2px;
46
+ background-color: #e2e8f0;
47
+ }
48
+ .scrollbar-hide::-webkit-scrollbar {
49
+ display: none;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans">
54
+ <div class="flex h-screen overflow-hidden">
55
+ <!-- Sidebar -->
56
+ <div class="sidebar bg-blue-900 text-white flex flex-col h-full fixed z-20">
57
+ <div class="p-4 flex items-center border-b border-blue-800 h-16">
58
+ <div class="w-8 h-8 bg-blue-700 rounded-md flex items-center justify-center">
59
+ <i class="fas fa-balance-scale text-white"></i>
60
+ </div>
61
+ <span class="logo-text ml-3 font-bold text-lg">LexFlow</span>
62
+ </div>
63
+
64
+ <div class="flex-1 overflow-y-auto py-4">
65
+ <nav>
66
+ <ul>
67
+ <li class="mb-1">
68
+ <a href="#dashboard" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2 active-nav">
69
+ <i class="fas fa-tachometer-alt"></i>
70
+ <span class="menu-text ml-3">Dashboard</span>
71
+ </a>
72
+ </li>
73
+ <li class="mb-1">
74
+ <a href="#processos" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
75
+ <i class="fas fa-gavel"></i>
76
+ <span class="menu-text ml-3">Processos</span>
77
+ </a>
78
+ </li>
79
+ <li class="mb-1">
80
+ <a href="#clientes" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
81
+ <i class="fas fa-users"></i>
82
+ <span class="menu-text ml-3">Clientes</span>
83
+ </a>
84
+ </li>
85
+ <li class="mb-1">
86
+ <a href="#tarefas" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
87
+ <i class="fas fa-tasks"></i>
88
+ <span class="menu-text ml-3">Tarefas</span>
89
+ </a>
90
+ </li>
91
+ <li class="mb-1">
92
+ <a href="#calendario" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
93
+ <i class="fas fa-calendar-alt"></i>
94
+ <span class="menu-text ml-3">Calendário</span>
95
+ </a>
96
+ </li>
97
+ <li class="mb-1">
98
+ <a href="#crm" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
99
+ <i class="fas fa-chart-line"></i>
100
+ <span class="menu-text ml-3">CRM Jurídico</span>
101
+ </a>
102
+ </li>
103
+ <li class="mb-1">
104
+ <a href="#relatorios" class="menu-item flex items-center px-4 py-3 text-blue-100 hover:bg-blue-800 rounded-md mx-2">
105
+ <i class="fas fa-file-alt"></i>
106
+ <span class="menu-text ml-3">Relatórios</span>
107
+ </a>
108
+ </li>
109
+ </ul>
110
+ </nav>
111
+ </div>
112
+
113
+ <div class="p-4 border-t border-blue-800">
114
+ <div class="flex items-center">
115
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full">
116
+ <div class="ml-3">
117
+ <div class="text-sm font-medium">Dra. Ana Silva</div>
118
+ <div class="text-xs text-blue-300">Sócia</div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Main Content -->
125
+ <div class="content-area flex-1 flex flex-col overflow-hidden ml-64">
126
+ <!-- Top Navigation -->
127
+ <header class="bg-white shadow-sm z-10">
128
+ <div class="flex items-center justify-between px-6 py-3">
129
+ <div class="flex items-center">
130
+ <button id="sidebarToggle" class="text-gray-500 focus:outline-none mr-4 hidden">
131
+ <i class="fas fa-bars"></i>
132
+ </button>
133
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1>
134
+ </div>
135
+
136
+ <div class="flex items-center space-x-4">
137
+ <div class="relative">
138
+ <button class="text-gray-500 focus:outline-none">
139
+ <i class="fas fa-bell"></i>
140
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
141
+ </button>
142
+ </div>
143
+ <div class="relative">
144
+ <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
145
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </header>
150
+
151
+ <!-- Dashboard Content -->
152
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50" id="dashboard">
153
+ <div class="mb-6 flex justify-between items-center">
154
+ <h2 class="text-2xl font-bold text-gray-800">Visão Geral</h2>
155
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
156
+ <i class="fas fa-plus mr-2"></i> Novo Processo
157
+ </button>
158
+ </div>
159
+
160
+ <!-- Stats Cards -->
161
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
162
+ <div class="bg-white rounded-lg shadow p-6">
163
+ <div class="flex items-center">
164
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
165
+ <i class="fas fa-file-alt"></i>
166
+ </div>
167
+ <div>
168
+ <p class="text-gray-500 text-sm">Processos Ativos</p>
169
+ <h3 class="text-2xl font-bold text-gray-800">142</h3>
170
+ </div>
171
+ </div>
172
+ <div class="mt-4">
173
+ <span class="text-green-500 text-sm font-medium">+12% vs mês passado</span>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="bg-white rounded-lg shadow p-6">
178
+ <div class="flex items-center">
179
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
180
+ <i class="fas fa-pause-circle"></i>
181
+ </div>
182
+ <div>
183
+ <p class="text-gray-500 text-sm">Processos Suspensos</p>
184
+ <h3 class="text-2xl font-bold text-gray-800">23</h3>
185
+ </div>
186
+ </div>
187
+ <div class="mt-4">
188
+ <span class="text-red-500 text-sm font-medium">-5% vs mês passado</span>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="bg-white rounded-lg shadow p-6">
193
+ <div class="flex items-center">
194
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
195
+ <i class="fas fa-check-circle"></i>
196
+ </div>
197
+ <div>
198
+ <p class="text-gray-500 text-sm">Processos Encerrados</p>
199
+ <h3 class="text-2xl font-bold text-gray-800">38</h3>
200
+ </div>
201
+ </div>
202
+ <div class="mt-4">
203
+ <span class="text-green-500 text-sm font-medium">+8% vs mês passado</span>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="bg-white rounded-lg shadow p-6">
208
+ <div class="flex items-center">
209
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
210
+ <i class="fas fa-exclamation-triangle"></i>
211
+ </div>
212
+ <div>
213
+ <p class="text-gray-500 text-sm">Prazos Críticos</p>
214
+ <h3 class="text-2xl font-bold text-gray-800">7</h3>
215
+ </div>
216
+ </div>
217
+ <div class="mt-4">
218
+ <span class="text-red-500 text-sm font-medium">+3% vs mês passado</span>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Main Content Grid -->
224
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
225
+ <!-- Left Column -->
226
+ <div class="lg:col-span-2 space-y-6">
227
+ <!-- Productivity Chart -->
228
+ <div class="bg-white rounded-lg shadow p-6">
229
+ <div class="flex justify-between items-center mb-4">
230
+ <h3 class="text-lg font-semibold text-gray-800">Produtividade por Advogado</h3>
231
+ <div class="flex space-x-2">
232
+ <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md">Semanal</button>
233
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Mensal</button>
234
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Anual</button>
235
+ </div>
236
+ </div>
237
+ <div class="h-64">
238
+ <canvas id="productivityChart"></canvas>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Urgent Deadlines -->
243
+ <div class="bg-white rounded-lg shadow p-6">
244
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Alertas de Prazos Urgentes</h3>
245
+ <div class="space-y-4">
246
+ <div class="flex items-start p-3 border border-red-200 bg-red-50 rounded-lg">
247
+ <div class="bg-red-100 p-2 rounded-full mr-3">
248
+ <i class="fas fa-exclamation text-red-600"></i>
249
+ </div>
250
+ <div class="flex-1">
251
+ <div class="flex justify-between">
252
+ <h4 class="font-medium text-gray-800">Petição Inicial - Processo #12345</h4>
253
+ <span class="text-xs bg-red-500 text-white px-2 py-1 rounded-full">Amanhã</span>
254
+ </div>
255
+ <p class="text-sm text-gray-600">Cliente: Empresa XYZ Ltda.</p>
256
+ <p class="text-sm text-gray-600">Responsável: Dr. Carlos Mendes</p>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="flex items-start p-3 border border-orange-200 bg-orange-50 rounded-lg">
261
+ <div class="bg-orange-100 p-2 rounded-full mr-3">
262
+ <i class="fas fa-exclamation text-orange-600"></i>
263
+ </div>
264
+ <div class="flex-1">
265
+ <div class="flex justify-between">
266
+ <h4 class="font-medium text-gray-800">Recurso - Processo #67890</h4>
267
+ <span class="text-xs bg-orange-500 text-white px-2 py-1 rounded-full">2 dias</span>
268
+ </div>
269
+ <p class="text-sm text-gray-600">Cliente: João da Silva</p>
270
+ <p class="text-sm text-gray-600">Responsável: Dra. Ana Silva</p>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="flex items-start p-3 border border-yellow-200 bg-yellow-50 rounded-lg">
275
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
276
+ <i class="fas fa-exclamation text-yellow-600"></i>
277
+ </div>
278
+ <div class="flex-1">
279
+ <div class="flex justify-between">
280
+ <h4 class="font-medium text-gray-800">Contestação - Processo #54321</h4>
281
+ <span class="text-xs bg-yellow-500 text-white px-2 py-1 rounded-full">3 dias</span>
282
+ </div>
283
+ <p class="text-sm text-gray-600">Cliente: Maria Oliveira</p>
284
+ <p class="text-sm text-gray-600">Responsável: Dr. Roberto Alves</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
289
+ Ver todos os prazos <i class="fas fa-chevron-right ml-1"></i>
290
+ </button>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Right Column -->
295
+ <div class="space-y-6">
296
+ <!-- Today's Agenda -->
297
+ <div class="bg-white rounded-lg shadow p-6">
298
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Agenda do Dia</h3>
299
+ <div class="space-y-4">
300
+ <div class="flex items-start">
301
+ <div class="bg-blue-100 text-blue-800 p-2 rounded-lg mr-3 text-center min-w-12">
302
+ <div class="font-bold">09:00</div>
303
+ <div class="text-xs">- 10:00</div>
304
+ </div>
305
+ <div>
306
+ <h4 class="font-medium text-gray-800">Audiência - Processo #12345</h4>
307
+ <p class="text-sm text-gray-600">2ª Vara Cível - Foro Central</p>
308
+ <p class="text-sm text-gray-600">Cliente: Empresa XYZ Ltda.</p>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="flex items-start">
313
+ <div class="bg-purple-100 text-purple-800 p-2 rounded-lg mr-3 text-center min-w-12">
314
+ <div class="font-bold">11:30</div>
315
+ <div class="text-xs">- 12:30</div>
316
+ </div>
317
+ <div>
318
+ <h4 class="font-medium text-gray-800">Reunião com Cliente</h4>
319
+ <p class="text-sm text-gray-600">João da Silva - Contrato</p>
320
+ <p class="text-sm text-gray-600">Escritório - Sala 3</p>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="flex items-start">
325
+ <div class="bg-green-100 text-green-800 p-2 rounded-lg mr-3 text-center min-w-12">
326
+ <div class="font-bold">15:00</div>
327
+ <div class="text-xs">- 16:00</div>
328
+ </div>
329
+ <div>
330
+ <h4 class="font-medium text-gray-800">Conferência Processual</h4>
331
+ <p class="text-sm text-gray-600">Equipe Trabalhista</p>
332
+ <p class="text-sm text-gray-600">Sala de Reuniões</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
337
+ Ver agenda completa <i class="fas fa-chevron-right ml-1"></i>
338
+ </button>
339
+ </div>
340
+
341
+ <!-- Recent Activities -->
342
+ <div class="bg-white rounded-lg shadow p-6">
343
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Atividades Recentes</h3>
344
+ <div class="space-y-4">
345
+ <div class="flex items-start">
346
+ <div class="bg-gray-100 p-2 rounded-full mr-3">
347
+ <i class="fas fa-file-upload text-gray-600"></i>
348
+ </div>
349
+ <div>
350
+ <p class="text-sm text-gray-800">Dr. Carlos adicionou um documento ao processo #12345</p>
351
+ <p class="text-xs text-gray-500 mt-1">Hoje, 08:45</p>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="flex items-start">
356
+ <div class="bg-gray-100 p-2 rounded-full mr-3">
357
+ <i class="fas fa-check-circle text-green-500"></i>
358
+ </div>
359
+ <div>
360
+ <p class="text-sm text-gray-800">Dra. Ana concluiu a petição inicial do processo #67890</p>
361
+ <p class="text-xs text-gray-500 mt-1">Ontem, 17:30</p>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="flex items-start">
366
+ <div class="bg-gray-100 p-2 rounded-full mr-3">
367
+ <i class="fas fa-comment-alt text-blue-500"></i>
368
+ </div>
369
+ <div>
370
+ <p class="text-sm text-gray-800">Dr. Roberto adicionou uma anotação ao cliente Maria Oliveira</p>
371
+ <p class="text-xs text-gray-500 mt-1">Ontem, 14:15</p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
376
+ Ver todas as atividades <i class="fas fa-chevron-right ml-1"></i>
377
+ </button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </main>
382
+
383
+ <!-- Processos Judiciais Content (hidden by default) -->
384
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50 hidden" id="processos">
385
+ <div class="mb-6 flex justify-between items-center">
386
+ <h2 class="text-2xl font-bold text-gray-800">Processos Jurídicos</h2>
387
+ <div class="flex space-x-3">
388
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
389
+ <i class="fas fa-plus mr-2"></i> Novo Processo
390
+ </button>
391
+ <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
392
+ <i class="fas fa-filter mr-2"></i> Filtros
393
+ </button>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Process Tabs -->
398
+ <div class="bg-white rounded-lg shadow mb-6">
399
+ <div class="border-b border-gray-200">
400
+ <nav class="flex -mb-px">
401
+ <a href="#" class="border-b-2 border-blue-500 text-blue-600 px-4 py-3 text-sm font-medium flex items-center">
402
+ <i class="fas fa-gavel mr-2"></i> Judiciais
403
+ </a>
404
+ <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium flex items-center">
405
+ <i class="fas fa-folder mr-2"></i> Administrativos
406
+ </a>
407
+ <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium flex items-center">
408
+ <i class="fas fa-search mr-2"></i> Busca CNJ
409
+ </a>
410
+ </nav>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Process Subgroups -->
415
+ <div class="mb-6">
416
+ <div class="flex items-center justify-between mb-4">
417
+ <h3 class="text-lg font-semibold text-gray-800">Subgrupos</h3>
418
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
419
+ <i class="fas fa-plus mr-1"></i> Criar Subgrupo
420
+ </button>
421
+ </div>
422
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
423
+ <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500 hover:bg-blue-50 cursor-pointer">
424
+ <div class="flex items-center">
425
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
426
+ <i class="fas fa-briefcase text-blue-600"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-medium text-gray-800">Trabalhista</h4>
430
+ <p class="text-sm text-gray-600">12 processos</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="bg-white rounded-lg shadow p-4 border-l-4 border-green-500 hover:bg-green-50 cursor-pointer">
436
+ <div class="flex items-center">
437
+ <div class="bg-green-100 p-2 rounded-full mr-3">
438
+ <i class="fas fa-money-bill-wave text-green-600"></i>
439
+ </div>
440
+ <div>
441
+ <h4 class="font-medium text-gray-800">Tributário</h4>
442
+ <p class="text-sm text-gray-600">8 processos</p>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="bg-white rounded-lg shadow p-4 border-l-4 border-purple-500 hover:bg-purple-50 cursor-pointer">
448
+ <div class="flex items-center">
449
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
450
+ <i class="fas fa-home text-purple-600"></i>
451
+ </div>
452
+ <div>
453
+ <h4 class="font-medium text-gray-800">Cível</h4>
454
+ <p class="text-sm text-gray-600">15 processos</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="bg-white rounded-lg shadow p-4 border-l-4 border-red-500 hover:bg-red-50 cursor-pointer">
460
+ <div class="flex items-center">
461
+ <div class="bg-red-100 p-2 rounded-full mr-3">
462
+ <i class="fas fa-user-shield text-red-600"></i>
463
+ </div>
464
+ <div>
465
+ <h4 class="font-medium text-gray-800">Previdenciário</h4>
466
+ <p class="text-sm text-gray-600">5 processos</p>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Process Table -->
474
+ <div class="bg-white rounded-lg shadow overflow-hidden">
475
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
476
+ <div class="flex items-center">
477
+ <span class="text-gray-700 mr-2">Mostrar:</span>
478
+ <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
479
+ <option>Todos</option>
480
+ <option>Ativos</option>
481
+ <option>Suspensos</option>
482
+ <option>Encerrados</option>
483
+ </select>
484
+ </div>
485
+ <div class="relative">
486
+ <input type="text" placeholder="Buscar processo..." class="pl-8 pr-4 py-1 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
487
+ <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="overflow-x-auto">
492
+ <table class="min-w-full divide-y divide-gray-200">
493
+ <thead class="bg-gray-50">
494
+ <tr>
495
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Número</th>
496
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
497
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
498
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vara/Órgão</th>
499
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsável</th>
500
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
501
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Próximo Prazo</th>
502
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
503
+ </tr>
504
+ </thead>
505
+ <tbody class="bg-white divide-y divide-gray-200">
506
+ <tr class="hover:bg-gray-50">
507
+ <td class="px-6 py-4 whitespace-nowrap">
508
+ <div class="text-sm font-medium text-blue-600">#12345</div>
509
+ </td>
510
+ <td class="px-6 py-4 whitespace-nowrap">
511
+ <div class="text-sm text-gray-900">Empresa XYZ Ltda.</div>
512
+ </td>
513
+ <td class="px-6 py-4 whitespace-nowrap">
514
+ <div class="text-sm text-gray-900">Trabalhista</div>
515
+ </td>
516
+ <td class="px-6 py-4 whitespace-nowrap">
517
+ <div class="text-sm text-gray-900">2ª Vara do Trabalho</div>
518
+ </td>
519
+ <td class="px-6 py-4 whitespace-nowrap">
520
+ <div class="flex items-center">
521
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
522
+ <span class="text-blue-800 text-sm font-medium">CM</span>
523
+ </div>
524
+ <div class="ml-2">
525
+ <div class="text-sm font-medium text-gray-900">Dr. Carlos</div>
526
+ </div>
527
+ </div>
528
+ </td>
529
+ <td class="px-6 py-4 whitespace-nowrap">
530
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Ativo</span>
531
+ </td>
532
+ <td class="px-6 py-4 whitespace-nowrap">
533
+ <div class="text-sm text-gray-900">15/06/2023</div>
534
+ <div class="text-xs text-gray-500">Petição inicial</div>
535
+ </td>
536
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
537
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
538
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
539
+ </td>
540
+ </tr>
541
+
542
+ <tr class="hover:bg-gray-50">
543
+ <td class="px-6 py-4 whitespace-nowrap">
544
+ <div class="text-sm font-medium text-blue-600">#67890</div>
545
+ </td>
546
+ <td class="px-6 py-4 whitespace-nowrap">
547
+ <div class="text-sm text-gray-900">João da Silva</div>
548
+ </td>
549
+ <td class="px-6 py-4 whitespace-nowrap">
550
+ <div class="text-sm text-gray-900">Cível</div>
551
+ </td>
552
+ <td class="px-6 py-4 whitespace-nowrap">
553
+ <div class="text-sm text-gray-900">3ª Vara Cível</div>
554
+ </td>
555
+ <td class="px-6 py-4 whitespace-nowrap">
556
+ <div class="flex items-center">
557
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
558
+ <span class="text-purple-800 text-sm font-medium">AS</span>
559
+ </div>
560
+ <div class="ml-2">
561
+ <div class="text-sm font-medium text-gray-900">Dra. Ana</div>
562
+ </div>
563
+ </div>
564
+ </td>
565
+ <td class="px-6 py-4 whitespace-nowrap">
566
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Suspenso</span>
567
+ </td>
568
+ <td class="px-6 py-4 whitespace-nowrap">
569
+ <div class="text-sm text-gray-900">20/06/2023</div>
570
+ <div class="text-xs text-gray-500">Audiência</div>
571
+ </td>
572
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
573
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
574
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
575
+ </td>
576
+ </tr>
577
+
578
+ <tr class="hover:bg-gray-50">
579
+ <td class="px-6 py-4 whitespace-nowrap">
580
+ <div class="text-sm font-medium text-blue-600">#54321</div>
581
+ </td>
582
+ <td class="px-6 py-4 whitespace-nowrap">
583
+ <div class="text-sm text-gray-900">Maria Oliveira</div>
584
+ </td>
585
+ <td class="px-6 py-4 whitespace-nowrap">
586
+ <div class="text-sm text-gray-900">Previdenciário</div>
587
+ </td>
588
+ <td class="px-6 py-4 whitespace-nowrap">
589
+ <div class="text-sm text-gray-900">INSS</div>
590
+ </td>
591
+ <td class="px-6 py-4 whitespace-nowrap">
592
+ <div class="flex items-center">
593
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
594
+ <span class="text-green-800 text-sm font-medium">RA</span>
595
+ </div>
596
+ <div class="ml-2">
597
+ <div class="text-sm font-medium text-gray-900">Dr. Roberto</div>
598
+ </div>
599
+ </div>
600
+ </td>
601
+ <td class="px-6 py-4 whitespace-nowrap">
602
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Encerrado</span>
603
+ </td>
604
+ <td class="px-6 py-4 whitespace-nowrap">
605
+ <div class="text-sm text-gray-900">-</div>
606
+ </td>
607
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
608
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
609
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
610
+ </td>
611
+ </tr>
612
+ </tbody>
613
+ </table>
614
+ </div>
615
+
616
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
617
+ <div class="text-sm text-gray-500">
618
+ Mostrando <span class="font-medium">1</span> a <span class="font-medium">3</span> de <span class="font-medium">142</span> resultados
619
+ </div>
620
+ <div class="flex space-x-2">
621
+ <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">
622
+ Anterior
623
+ </button>
624
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
625
+ 1
626
+ </button>
627
+ <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">
628
+ 2
629
+ </button>
630
+ <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">
631
+ 3
632
+ </button>
633
+ <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">
634
+ Próximo
635
+ </button>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </main>
640
+
641
+ <!-- Clientes Content (hidden by default) -->
642
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50 hidden" id="clientes">
643
+ <div class="mb-6 flex justify-between items-center">
644
+ <h2 class="text-2xl font-bold text-gray-800">Gestão de Clientes</h2>
645
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
646
+ <i class="fas fa-plus mr-2"></i> Novo Cliente
647
+ </button>
648
+ </div>
649
+
650
+ <!-- Client Search and Filters -->
651
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
652
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
653
+ <div class="relative">
654
+ <input type="text" placeholder="Buscar cliente..." class="pl-10 pr-4 py-2 w-full border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
655
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
656
+ </div>
657
+ <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
658
+ <option>Todos os tipos</option>
659
+ <option>Pessoa Física</option>
660
+ <option>Pessoa Jurídica</option>
661
+ </select>
662
+ <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
663
+ <option>Ordenar por: Mais recentes</option>
664
+ <option>Ordenar por: Nome A-Z</option>
665
+ <option>Ordenar por: Nome Z-A</option>
666
+ </select>
667
+ </div>
668
+ </div>
669
+
670
+ <!-- Client List -->
671
+ <div class="bg-white rounded-lg shadow overflow-hidden">
672
+ <div class="grid grid-cols-1 md:grid-cols-12 border-b border-gray-200 bg-gray-50">
673
+ <div class="md:col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</div>
674
+ <div class="md:col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Documento</div>
675
+ <div class="md:col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contato</div>
676
+ <div class="md:col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Processos</div>
677
+ <div class="md:col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</div>
678
+ </div>
679
+
680
+ <div class="divide-y divide-gray-200">
681
+ <!-- Client 1 -->
682
+ <div class="grid grid-cols-1 md:grid-cols-12 hover:bg-gray-50">
683
+ <div class="md:col-span-4 px-6 py-4 whitespace-nowrap">
684
+ <div class="flex items-center">
685
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
686
+ <span class="text-blue-800 text-lg font-medium">EX</span>
687
+ </div>
688
+ <div class="ml-4">
689
+ <div class="text-sm font-medium text-gray-900">Empresa XYZ Ltda.</div>
690
+ <div class="text-sm text-gray-500">Contrato desde 15/01/2020</div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
695
+ <div class="text-sm text-gray-900">12.345.678/0001-99</div>
696
+ </div>
697
+ <div class="md:col-span-2 px-6 py-4">
698
+ <div class="text-sm text-gray-900">contato@xyz.com</div>
699
+ <div class="text-sm text-gray-500">(11) 99999-9999</div>
700
+ </div>
701
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
702
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">12 ativos</span>
703
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 ml-1">3 encerrados</span>
704
+ </div>
705
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
706
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
707
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
708
+ </div>
709
+ </div>
710
+
711
+ <!-- Client 2 -->
712
+ <div class="grid grid-cols-1 md:grid-cols-12 hover:bg-gray-50">
713
+ <div class="md:col-span-4 px-6 py-4 whitespace-nowrap">
714
+ <div class="flex items-center">
715
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
716
+ <span class="text-purple-800 text-lg font-medium">JS</span>
717
+ </div>
718
+ <div class="ml-4">
719
+ <div class="text-sm font-medium text-gray-900">João da Silva</div>
720
+ <div class="text-sm text-gray-500">Cliente desde 22/05/2021</div>
721
+ </div>
722
+ </div>
723
+ </div>
724
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
725
+ <div class="text-sm text-gray-900">123.456.789-00</div>
726
+ </div>
727
+ <div class="md:col-span-2 px-6 py-4">
728
+ <div class="text-sm text-gray-900">joao.silva@email.com</div>
729
+ <div class="text-sm text-gray-500">(11) 98888-8888</div>
730
+ </div>
731
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
732
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">5 ativos</span>
733
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 ml-1">1 encerrado</span>
734
+ </div>
735
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
736
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
737
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
738
+ </div>
739
+ </div>
740
+
741
+ <!-- Client 3 -->
742
+ <div class="grid grid-cols-1 md:grid-cols-12 hover:bg-gray-50">
743
+ <div class="md:col-span-4 px-6 py-4 whitespace-nowrap">
744
+ <div class="flex items-center">
745
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
746
+ <span class="text-green-800 text-lg font-medium">MO</span>
747
+ </div>
748
+ <div class="ml-4">
749
+ <div class="text-sm font-medium text-gray-900">Maria Oliveira</div>
750
+ <div class="text-sm text-gray-500">Cliente desde 10/11/2022</div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
755
+ <div class="text-sm text-gray-900">987.654.321-00</div>
756
+ </div>
757
+ <div class="md:col-span-2 px-6 py-4">
758
+ <div class="text-sm text-gray-900">maria.oliveira@email.com</div>
759
+ <div class="text-sm text-gray-500">(11) 97777-7777</div>
760
+ </div>
761
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap">
762
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">3 ativos</span>
763
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 ml-1">2 encerrados</span>
764
+ </div>
765
+ <div class="md:col-span-2 px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
766
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Ver</button>
767
+ <button class="text-gray-600 hover:text-gray-900">Editar</button>
768
+ </div>
769
+ </div>
770
+ </div>
771
+
772
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
773
+ <div class="text-sm text-gray-500">
774
+ Mostrando <span class="font-medium">1</span> a <span class="font-medium">3</span> de <span class="font-medium">42</span> resultados
775
+ </div>
776
+ <div class="flex space-x-2">
777
+ <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">
778
+ Anterior
779
+ </button>
780
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
781
+ 1
782
+ </button>
783
+ <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">
784
+ 2
785
+ </button>
786
+ <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">
787
+ 3
788
+ </button>
789
+ <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">
790
+ Próximo
791
+ </button>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </main>
796
+
797
+ <!-- Tarefas Content (hidden by default) -->
798
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50 hidden" id="tarefas">
799
+ <div class="mb-6 flex justify-between items-center">
800
+ <h2 class="text-2xl font-bold text-gray-800">Tarefas e Produtividade</h2>
801
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
802
+ <i class="fas fa-plus mr-2"></i> Nova Tarefa
803
+ </button>
804
+ </div>
805
+
806
+ <!-- Kanban Board -->
807
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
808
+ <!-- Pendente Column -->
809
+ <div class="bg-white rounded-lg shadow">
810
+ <div class="p-4 border-b border-gray-200">
811
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
812
+ <span class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>
813
+ Pendente
814
+ </h3>
815
+ </div>
816
+ <div class="p-4 kanban-column overflow-y-auto scrollbar-hide">
817
+ <!-- Task 1 -->
818
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
819
+ <div class="flex justify-between items-start mb-2">
820
+ <h4 class="font-medium text-gray-800">Elaborar petição inicial</h4>
821
+ <div class="flex space-x-1">
822
+ <button class="text-gray-400 hover:text-gray-600">
823
+ <i class="fas fa-ellipsis-v"></i>
824
+ </button>
825
+ </div>
826
+ </div>
827
+ <p class="text-sm text-gray-600 mb-3">Processo #12345 - Empresa XYZ Ltda.</p>
828
+ <div class="flex items-center justify-between">
829
+ <div class="flex items-center">
830
+ <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
831
+ <span class="text-blue-800 text-xs font-medium">CM</span>
832
+ </div>
833
+ <span class="text-xs text-gray-500">Dr. Carlos</span>
834
+ </div>
835
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Amanhã</span>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- Task 2 -->
840
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
841
+ <div class="flex justify-between items-start mb-2">
842
+ <h4 class="font-medium text-gray-800">Revisar contrato</h4>
843
+ <div class="flex space-x-1">
844
+ <button class="text-gray-400 hover:text-gray-600">
845
+ <i class="fas fa-ellipsis-v"></i>
846
+ </button>
847
+ </div>
848
+ </div>
849
+ <p class="text-sm text-gray-600 mb-3">Cliente: João da Silva</p>
850
+ <div class="flex items-center justify-between">
851
+ <div class="flex items-center">
852
+ <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2">
853
+ <span class="text-purple-800 text-xs font-medium">AS</span>
854
+ </div>
855
+ <span class="text-xs text-gray-500">Dra. Ana</span>
856
+ </div>
857
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">15/06</span>
858
+ </div>
859
+ </div>
860
+
861
+ <!-- Add Task Button -->
862
+ <button class="w-full text-gray-400 hover:text-gray-600 text-sm py-2 rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 flex items-center justify-center">
863
+ <i class="fas fa-plus mr-1"></i> Adicionar tarefa
864
+ </button>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- Em Andamento Column -->
869
+ <div class="bg-white rounded-lg shadow">
870
+ <div class="p-4 border-b border-gray-200">
871
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
872
+ <span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
873
+ Em Andamento
874
+ </h3>
875
+ </div>
876
+ <div class="p-4 kanban-column overflow-y-auto scrollbar-hide">
877
+ <!-- Task 1 -->
878
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
879
+ <div class="flex justify-between items-start mb-2">
880
+ <h4 class="font-medium text-gray-800">Preparar defesa</h4>
881
+ <div class="flex space-x-1">
882
+ <button class="text-gray-400 hover:text-gray-600">
883
+ <i class="fas fa-ellipsis-v"></i>
884
+ </button>
885
+ </div>
886
+ </div>
887
+ <p class="text-sm text-gray-600 mb-3">Processo #67890 - João da Silva</p>
888
+ <div class="flex items-center justify-between">
889
+ <div class="flex items-center">
890
+ <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2">
891
+ <span class="text-purple-800 text-xs font-medium">AS</span>
892
+ </div>
893
+ <span class="text-xs text-gray-500">Dra. Ana</span>
894
+ </div>
895
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">18/06</span>
896
+ </div>
897
+ <div class="mt-3 pt-3 border-t border-blue-100 flex items-center justify-between">
898
+ <div class="text-xs text-gray-500">
899
+ <i class="fas fa-clock mr-1"></i> 2h 30m
900
+ </div>
901
+ <button class="text-xs text-blue-600 hover:text-blue-800">
902
+ <i class="fas fa-stopwatch mr-1"></i> Registrar tempo
903
+ </button>
904
+ </div>
905
+ </div>
906
+
907
+ <!-- Task 2 -->
908
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
909
+ <div class="flex justify-between items-start mb-2">
910
+ <h4 class="font-medium text-gray-800">Analisar documentos</h4>
911
+ <div class="flex space-x-1">
912
+ <button class="text-gray-400 hover:text-gray-600">
913
+ <i class="fas fa-ellipsis-v"></i>
914
+ </button>
915
+ </div>
916
+ </div>
917
+ <p class="text-sm text-gray-600 mb-3">Processo #54321 - Maria Oliveira</p>
918
+ <div class="flex items-center justify-between">
919
+ <div class="flex items-center">
920
+ <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-2">
921
+ <span class="text-green-800 text-xs font-medium">RA</span>
922
+ </div>
923
+ <span class="text-xs text-gray-500">Dr. Roberto</span>
924
+ </div>
925
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">20/06</span>
926
+ </div>
927
+ <div class="mt-3 pt-3 border-t border-blue-100 flex items-center justify-between">
928
+ <div class="text-xs text-gray-500">
929
+ <i class="fas fa-clock mr-1"></i> 45m
930
+ </div>
931
+ <button class="text-xs text-blue-600 hover:text-blue-800">
932
+ <i class="fas fa-stopwatch mr-1"></i> Registrar tempo
933
+ </button>
934
+ </div>
935
+ </div>
936
+
937
+ <!-- Add Task Button -->
938
+ <button class="w-full text-gray-400 hover:text-gray-600 text-sm py-2 rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 flex items-center justify-center">
939
+ <i class="fas fa-plus mr-1"></i> Adicionar tarefa
940
+ </button>
941
+ </div>
942
+ </div>
943
+
944
+ <!-- Concluída Column -->
945
+ <div class="bg-white rounded-lg shadow">
946
+ <div class="p-4 border-b border-gray-200">
947
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
948
+ <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
949
+ Concluída
950
+ </h3>
951
+ </div>
952
+ <div class="p-4 kanban-column overflow-y-auto scrollbar-hide">
953
+ <!-- Task 1 -->
954
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
955
+ <div class="flex justify-between items-start mb-2">
956
+ <h4 class="font-medium text-gray-800">Enviar recurso</h4>
957
+ <div class="flex space-x-1">
958
+ <button class="text-gray-400 hover:text-gray-600">
959
+ <i class="fas fa-ellipsis-v"></i>
960
+ </button>
961
+ </div>
962
+ </div>
963
+ <p class="text-sm text-gray-600 mb-3">Processo #98765 - Cliente ABC</p>
964
+ <div class="flex items-center justify-between">
965
+ <div class="flex items-center">
966
+ <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
967
+ <span class="text-blue-800 text-xs font-medium">CM</span>
968
+ </div>
969
+ <span class="text-xs text-gray-500">Dr. Carlos</span>
970
+ </div>
971
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Concluído</span>
972
+ </div>
973
+ <div class="mt-3 pt-3 border-t border-green-100">
974
+ <div class="text-xs text-gray-500">
975
+ <i class="fas fa-clock mr-1"></i> 3h 15m registrados
976
+ </div>
977
+ </div>
978
+ </div>
979
+
980
+ <!-- Task 2 -->
981
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
982
+ <div class="flex justify-between items-start mb-2">
983
+ <h4 class="font-medium text-gray-800">Reunião com cliente</h4>
984
+ <div class="flex space-x-1">
985
+ <button class="text-gray-400 hover:text-gray-600">
986
+ <i class="fas fa-ellipsis-v"></i>
987
+ </button>
988
+ </div>
989
+ </div>
990
+ <p class="text-sm text-gray-600 mb-3">Empresa XYZ Ltda.</p>
991
+ <div class="flex items-center justify-between">
992
+ <div class="flex items-center">
993
+ <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2">
994
+ <span class="text-purple-800 text-xs font-medium">AS</span>
995
+ </div>
996
+ <span class="text-xs text-gray-500">Dra. Ana</span>
997
+ </div>
998
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Concluído</span>
999
+ </div>
1000
+ <div class="mt-3 pt-3 border-t border-green-100">
1001
+ <div class="text-xs text-gray-500">
1002
+ <i class="fas fa-clock mr-1"></i> 1h 30m registrados
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+
1007
+ <!-- Add Task Button -->
1008
+ <button class="w-full text-gray-400 hover:text-gray-600 text-sm py-2 rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 flex items-center justify-center">
1009
+ <i class="fas fa-plus mr-1"></i> Adicionar tarefa
1010
+ </button>
1011
+ </div>
1012
+ </div>
1013
+ </div>
1014
+
1015
+ <!-- Productivity Report -->
1016
+ <div class="mt-8 bg-white rounded-lg shadow p-6">
1017
+ <div class="flex justify-between items-center mb-4">
1018
+ <h3 class="text-lg font-semibold text-gray-800">Relatório de Produtividade</h3>
1019
+ <div class="flex space-x-2">
1020
+ <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md">Esta semana</button>
1021
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Este mês</button>
1022
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Personalizado</button>
1023
+ </div>
1024
+ </div>
1025
+ <div class="h-64">
1026
+ <canvas id="timeTrackingChart"></canvas>
1027
+ </div>
1028
+ </div>
1029
+ </main>
1030
+
1031
+ <!-- Calendário Content (hidden by default) -->
1032
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50 hidden" id="calendario">
1033
+ <div class="mb-6 flex justify-between items-center">
1034
+ <h2 class="text-2xl font-bold text-gray-800">Calendário e Prazos</h2>
1035
+ <div class="flex space-x-3">
1036
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
1037
+ <i class="fas fa-plus mr-2"></i> Novo Evento
1038
+ </button>
1039
+ <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
1040
+ <i class="fas fa-sync-alt mr-2"></i> Sincronizar
1041
+ </button>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <!-- Calendar Navigation -->
1046
+ <div class="bg-white rounded-lg shadow mb-6">
1047
+ <div class="p-4 border-b border-gray-200 flex items-center justify-between">
1048
+ <div class="flex items-center space-x-4">
1049
+ <button class="p-2 rounded-full hover:bg-gray-100">
1050
+ <i class="fas fa-chevron-left"></i>
1051
+ </button>
1052
+ <h3 class="text-lg font-semibold text-gray-800">Junho 2023</h3>
1053
+ <button class="p-2 rounded-full hover:bg-gray-100">
1054
+ <i class="fas fa-chevron-right"></i>
1055
+ </button>
1056
+ <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md">Hoje</button>
1057
+ </div>
1058
+ <div class="flex space-x-2">
1059
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Dia</button>
1060
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Semana</button>
1061
+ <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md">Mês</button>
1062
+ <button class="px-3 py-1 text-sm text-gray-500 rounded-md hover:bg-gray-100">Ano</button>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <!-- Calendar Grid -->
1067
+ <div class="p-4">
1068
+ <div class="grid grid-cols-7 gap-1 mb-2">
1069
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Dom</div>
1070
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Seg</div>
1071
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Ter</div>
1072
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Qua</div>
1073
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Qui</div>
1074
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Sex</div>
1075
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Sáb</div>
1076
+ </div>
1077
+
1078
+ <div class="grid grid-cols-7 gap-1">
1079
+ <!-- Week 1 -->
1080
+ <div class="bg-gray-50 h-24 p-1 border border-gray-100"></div>
1081
+ <div class="bg-gray-50 h-24 p-1 border border-gray-100"></div>
1082
+ <div class="bg-gray-50 h-24 p-1 border border-gray-100"></div>
1083
+ <div class="bg-gray-50 h-24 p-1 border border-gray-100"></div>
1084
+ <div class="bg-white h-24 p-1 border border-gray-100">
1085
+ <div class="text-right text-sm mb-1">1</div>
1086
+ </div>
1087
+ <div class="bg-white h-24 p-1 border border-gray-100">
1088
+ <div class="text-right text-sm mb-1">2</div>
1089
+ </div>
1090
+ <div class="bg-white h-24 p-1 border border-gray-100">
1091
+ <div class="text-right text-sm mb-1">3</div>
1092
+ </div>
1093
+
1094
+ <!-- Week 2 -->
1095
+ <div class="bg-white h-24 p-1 border border-gray-100">
1096
+ <div class="text-right text-sm mb-1">4</div>
1097
+ </div>
1098
+ <div class="bg-white h-24 p-1 border border-gray-100">
1099
+ <div class="text-right text-sm mb-1">5</div>
1100
+ </div>
1101
+ <div class="bg-white h-24 p-1 border border-gray-100">
1102
+ <div class="text-right text-sm mb-1">6</div>
1103
+ </div>
1104
+ <div class="bg-white h-24 p-1 border border-gray-100">
1105
+ <div class="text-right text-sm mb-1">7</div>
1106
+ </div>
1107
+ <div class="bg-white h-24 p-1 border border-gray-100">
1108
+ <div class="text-right text-sm mb-1">8</div>
1109
+ </div>
1110
+ <div class="bg-white h-24 p-1 border border-gray-100">
1111
+ <div class="text-right text-sm mb-1">9</div>
1112
+ </div>
1113
+ <div class="bg-white h-24 p-1 border border-gray-100">
1114
+ <div class="text-right text-sm mb-1">10</div>
1115
+ </div>
1116
+
1117
+ <!-- Week 3 -->
1118
+ <div class="bg-white h-24 p-1 border border-gray-100">
1119
+ <div class="text-right text-sm mb-1">11</div>
1120
+ </div>
1121
+ <div class="bg-white h-24 p-1 border border-gray-100">
1122
+ <div class="text-right text-sm mb-1">12</div>
1123
+ <div class="text-xs p-1 bg-red-100 text-red-800 rounded mb-1 truncate">Petição inicial #12345</div>
1124
+ </div>
1125
+ <div class="bg-white h-24 p-1 border border-gray-100">
1126
+ <div class="text-right text-sm mb-1">13</div>
1127
+ </div>
1128
+ <div class="bg-white h-24 p-1 border border-gray-100">
1129
+ <div class="text-right text-sm mb-1">14</div>
1130
+ <div class="text-xs p-1 bg-blue-100 text-blue-800 rounded mb-1 truncate">Reunião com cliente</div>
1131
+ </div>
1132
+ <div class="bg-white h-24 p-1 border border-gray-100">
1133
+ <div class="text-right text-sm mb-1">15</div>
1134
+ <div class="text-xs p-1 bg-yellow-100 text-yellow-800 rounded mb-1 truncate">Revisar contrato</div>
1135
+ </div>
1136
+ <div class="bg-white h-24 p-1 border border-gray-100">
1137
+ <div class="text-right text-sm mb-1">16</div>
1138
+ </div>
1139
+ <div class="bg-white h-24 p-1 border border-gray-100">
1140
+ <div class="text-right text-sm mb-1">17</div>
1141
+ </div>
1142
+
1143
+ <!-- Week 4 -->
1144
+ <div class="bg-white h-24 p-1 border border-gray-100">
1145
+ <div class="text-right text-sm mb-1">18</div>
1146
+ <div class="text-xs p-1 bg-blue-100 text-blue-800 rounded mb-1 truncate">Preparar defesa #67890</div>
1147
+ </div>
1148
+ <div class="bg-white h-24 p-1 border border-gray-100">
1149
+ <div class="text-right text-sm mb-1">19</div>
1150
+ </div>
1151
+ <div class="bg-white h-24 p-1 border border-gray-100">
1152
+ <div class="text-right text-sm mb-1">20</div>
1153
+ <div class="text-xs p-1 bg-blue-100 text-blue-800 rounded mb-1 truncate">Analisar documentos</div>
1154
+ </div>
1155
+ <div class="bg-white h-24 p-1 border border-gray-100">
1156
+ <div class="text-right text-sm mb-1">21</div>
1157
+ </div>
1158
+ <div class="bg-white h-24 p-1 border border-gray-100">
1159
+ <div class="text-right text-sm mb-1">22</div>
1160
+ </div>
1161
+ <div class="bg-white h-24 p-1 border border-gray-100">
1162
+ <div class="text-right text-sm mb-1">23</div>
1163
+ </div>
1164
+ <div class="bg-white h-24 p-1 border border-gray-100">
1165
+ <div class="text-right text-sm mb-1">24</div>
1166
+ </div>
1167
+
1168
+ <!-- Week 5 -->
1169
+ <div class="bg-white h-24 p-1 border border-gray-100">
1170
+ <div class="text-right text-sm mb-1">25</div>
1171
+ </div>
1172
+ <div class="bg-white h-24 p-1 border border-gray-100">
1173
+ <div class="text-right text-sm mb-1">26</div>
1174
+ </div>
1175
+ <div class="bg-white h-24 p-1 border border-gray-100">
1176
+ <div class="text-right text-sm mb-1">27</div>
1177
+ </div>
1178
+ <div class="bg-white h-24 p-1 border border-gray-100">
1179
+ <div class="text-right text-sm mb-1">28</div>
1180
+ </div>
1181
+ <div class="bg-white h-24 p-1 border border-gray-100">
1182
+ <div class="text-right text-sm mb-1">29</div>
1183
+ </div>
1184
+ <div class="bg-white h-24 p-1 border border-gray-100">
1185
+ <div class="text-right text-sm mb-1">30</div>
1186
+ </div>
1187
+ <div class="bg-gray-50 h-24 p-1 border border-gray-100"></div>
1188
+ </div>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <!-- Upcoming Deadlines -->
1193
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
1194
+ <!-- Critical Deadlines -->
1195
+ <div class="bg-white rounded-lg shadow">
1196
+ <div class="p-4 border-b border-gray-200">
1197
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
1198
+ <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
1199
+ Prazos Críticos
1200
+ </h3>
1201
+ </div>
1202
+ <div class="p-4">
1203
+ <div class="space-y-4">
1204
+ <div class="flex items-start">
1205
+ <div class="bg-red-100 p-2 rounded-full mr-3">
1206
+ <i class="fas fa-gavel text-red-600"></i>
1207
+ </div>
1208
+ <div>
1209
+ <h4 class="font-medium text-gray-800">Petição Inicial - Processo #12345</h4>
1210
+ <p class="text-sm text-gray-600">Empresa XYZ Ltda.</p>
1211
+ <p class="text-sm text-red-500 font-medium mt-1">Amanhã, 15/06/2023</p>
1212
+ </div>
1213
+ </div>
1214
+
1215
+ <div class="flex items-start">
1216
+ <div class="bg-red-100 p-2 rounded-full mr-3">
1217
+ <i class="fas fa-users text-red-600"></i>
1218
+ </div>
1219
+ <div>
1220
+ <h4 class="font-medium text-gray-800">Audiência - Processo #67890</h4>
1221
+ <p class="text-sm text-gray-600">João da Silva</p>
1222
+ <p class="text-sm text-red-500 font-medium mt-1">20/06/2023 - 09:00</p>
1223
+ </div>
1224
+ </div>
1225
+
1226
+ <div class="flex items-start">
1227
+ <div class="bg-red-100 p-2 rounded-full mr-3">
1228
+ <i class="fas fa-file-contract text-red-600"></i>
1229
+ </div>
1230
+ <div>
1231
+ <h4 class="font-medium text-gray-800">Contrato - Revisão</h4>
1232
+ <p class="text-sm text-gray-600">Cliente ABC</p>
1233
+ <
1234
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Prompt para criação de sistema web (interface) na IA: Crie a interface de um Sistema de Gestão de Processos Jurídicos e Administrativos, moderno, responsivo e com visual profissional. O sistema deve seguir o modelo SaaS, semelhante ao ADVBOX, e atender tanto escritórios de advocacia quanto departamentos jurídicos internos. Use uma paleta sóbria (azul escuro, cinza, branco), layout em dashboard com navegação lateral fixa, e foco na organização, controle de prazos e produtividade jurídica. 🟦 PÁGINA 1 – DASHBOARD (VISÃO GERAL) Componentes principais: Cards com contadores de processos: ativos, suspensos, encerrados Gráfico de produtividade por colaborador ou setor Lista de alertas de prazos urgentes Agenda de compromissos jurídicos do dia Botão: ➕ Novo Processo 🟦 PÁGINA 2 – PROCESSOS (com separação por tipo) Menu com ícones e abas distintas: ⚖️ Processos Judiciais 🗂️ Processos Administrativos Dentro de cada aba: Tabela com filtros por status, tipo, cliente, advogado responsável Botão: ➕ Criar Subgrupo (ex: "Trabalhista", "Tributário", "Contratos", "Licenças", "Fiscalizações") Subgrupos aparecem como categorias ou pastas organizadoras Visualização em lista ou cards Modal detalhado do processo com: dados do caso, documentos, timeline, tarefas, prazos e histórico de movimentações Botão para importar número do processo via CNJ (para judiciais) 🟦 PÁGINA 3 – GESTÃO DE CLIENTES Componentes: Lista de clientes com Nome, CPF/CNPJ, processos vinculados, canal de contato Tela individual com abas: informações, documentos, contratos, histórico de interações Botão: ➕ Novo Cliente 🟦 PÁGINA 4 – TAREFAS E PRODUTIVIDADE Componentes: Painel Kanban com colunas: Pendente / Em andamento / Concluída Registro de tempo por tarefa Atribuição por membro da equipe Relatório de produtividade por período e por tipo de processo 🟦 PÁGINA 5 – CALENDÁRIO E PRAZOS Componentes: Visão mensal e semanal de prazos processuais, audiências e tarefas Notificações de prazos críticos Integração opcional com Google Agenda ou Outlook 🟦 NAVEGAÇÃO LATERAL FIXA (MENU PRINCIPAL) Dashboard ⚖️ Processos Judiciais 🗂️ Processos Administrativos Clientes Tarefas Calendário Relatórios Configurações 🟦 PÁGINA 6 – CRM JURÍDICO (VENDAS E GESTÃO COMERCIAL) Componentes principais: Funil de atendimento (Kanban): Lead / Qualificação / Proposta enviada / Em negociação / Cliente ativo Cadastro de leads com nome, contato, origem e serviço de interesse Anotações e histórico de contato com cada lead Lembretes e tarefas comerciais atribuídas por usuário Integração com WhatsApp e e-mail para contato direto Conversão automática de lead em cliente ativo (integração com módulo de "Clientes") Relatórios de conversão e produtividade de equipe comercial 📌 O sistema deve refletir uma plataforma jurídica robusta, visualmente refinada, organizada por tipo de processo e subgrupos, ideal para controle completo do fluxo jurídico e administrativo.