Hugging Face's logo

Spaces:
menezes-nathan
/
testebb3
Running

App Files Community
menezes-nathan commited on
Commit
a723000
·
verified ·
1 Parent(s): d09c773

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +989 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testebb3
3
- emoji: 📉
4
- colorFrom: pink
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: testebb3
3
+ emoji: 🐳
4
+ colorFrom: red
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,989 @@
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>BB3 - Plataforma de Gestão de IA Empresarial</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
+ .sidebar-collapsed {
11
+ width: 80px;
12
+ }
13
+ .sidebar-collapsed .sidebar-text {
14
+ display: none;
15
+ }
16
+ .sidebar-collapsed .logo-text {
17
+ display: none;
18
+ }
19
+ .sidebar-collapsed .menu-item {
20
+ justify-content: center;
21
+ }
22
+ .chat-message {
23
+ max-width: 80%;
24
+ }
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
27
+ }
28
+ .card-hover:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+ .transition-all {
33
+ transition: all 0.3s ease;
34
+ }
35
+ .wizard-step {
36
+ display: none;
37
+ }
38
+ .wizard-step.active {
39
+ display: block;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 font-sans">
44
+ <!-- Main Container -->
45
+ <div class="flex h-screen overflow-hidden">
46
+ <!-- Sidebar -->
47
+ <div id="sidebar" class="flex flex-col w-64 bg-white border-r border-gray-200 transition-all duration-300 ease-in-out">
48
+ <!-- Logo -->
49
+ <div class="flex items-center justify-between p-4 border-b border-gray-200">
50
+ <div class="flex items-center space-x-2">
51
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">BB3</div>
52
+ <span class="logo-text text-xl font-semibold text-gray-800">BB3 Platform</span>
53
+ </div>
54
+ <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700">
55
+ <i class="fas fa-bars"></i>
56
+ </button>
57
+ </div>
58
+
59
+ <!-- Menu -->
60
+ <div class="flex-1 overflow-y-auto">
61
+ <div class="p-4">
62
+ <div class="mb-6">
63
+ <h3 class="sidebar-text text-xs font-semibold text-gray-500 uppercase tracking-wider">Geral</h3>
64
+ <ul class="mt-2 space-y-1">
65
+ <li>
66
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-blue-700 bg-blue-50">
67
+ <i class="fas fa-home mr-3 text-blue-600"></i>
68
+ <span class="sidebar-text">Home</span>
69
+ </a>
70
+ </li>
71
+ <li>
72
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100">
73
+ <i class="fas fa-newspaper mr-3 text-gray-500"></i>
74
+ <span class="sidebar-text">Notícias</span>
75
+ </a>
76
+ </li>
77
+ <li>
78
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100">
79
+ <i class="fas fa-cog mr-3 text-gray-500"></i>
80
+ <span class="sidebar-text">Configurações</span>
81
+ </a>
82
+ </li>
83
+ </ul>
84
+ </div>
85
+
86
+ <div class="mb-6">
87
+ <h3 class="sidebar-text text-xs font-semibold text-gray-500 uppercase tracking-wider">Áreas</h3>
88
+ <ul class="mt-2 space-y-1">
89
+ <li>
90
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100">
91
+ <i class="fas fa-users mr-3 text-gray-500"></i>
92
+ <span class="sidebar-text">Recursos Humanos</span>
93
+ </a>
94
+ </li>
95
+ <li>
96
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100">
97
+ <i class="fas fa-shopping-cart mr-3 text-gray-500"></i>
98
+ <span class="sidebar-text">Vendas</span>
99
+ </a>
100
+ </li>
101
+ <li>
102
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100">
103
+ <i class="fas fa-headset mr-3 text-gray-500"></i>
104
+ <span class="sidebar-text">Atendimento</span>
105
+ </a>
106
+ </li>
107
+ </ul>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- User Profile -->
113
+ <div class="p-4 border-t border-gray-200">
114
+ <div class="flex items-center">
115
+ <div class="flex-shrink-0">
116
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
117
+ </div>
118
+ <div class="ml-3 sidebar-text">
119
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
120
+ <p class="text-xs font-medium text-gray-500">Administrador</p>
121
+ </div>
122
+ <button class="ml-auto text-gray-500 hover:text-gray-700">
123
+ <i class="fas fa-ellipsis-v"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Main Content -->
130
+ <div class="flex-1 flex flex-col overflow-hidden">
131
+ <!-- Top Navigation -->
132
+ <header class="bg-white shadow-sm z-10">
133
+ <div class="px-4 sm:px-6 lg:px-8">
134
+ <div class="flex justify-between h-16">
135
+ <!-- Search Bar -->
136
+ <div class="flex-1 flex items-center">
137
+ <div class="w-full max-w-md">
138
+ <label for="search" class="sr-only">Pesquisar</label>
139
+ <div class="relative">
140
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
141
+ <i class="fas fa-search text-gray-400"></i>
142
+ </div>
143
+ <input id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Pesquisar" type="search">
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Right Menu -->
149
+ <div class="flex items-center">
150
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
151
+ <span class="sr-only">Notificações</span>
152
+ <i class="fas fa-bell"></i>
153
+ </button>
154
+ <button class="ml-4 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
155
+ <span class="sr-only">Ajuda</span>
156
+ <i class="fas fa-question-circle"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </header>
162
+
163
+ <!-- Page Content -->
164
+ <main class="flex-1 overflow-y-auto p-4 bg-gray-50">
165
+ <!-- Dashboard Content -->
166
+ <div id="home-content">
167
+ <div class="mb-6">
168
+ <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
169
+ <p class="mt-1 text-sm text-gray-500">Visão geral e insights da sua plataforma BB3</p>
170
+ </div>
171
+
172
+ <!-- Stats Cards -->
173
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
174
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
175
+ <div class="p-5">
176
+ <div class="flex items-center">
177
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
178
+ <i class="fas fa-robot text-white"></i>
179
+ </div>
180
+ <div class="ml-5 w-0 flex-1">
181
+ <dl>
182
+ <dt class="text-sm font-medium text-gray-500 truncate">Agentes Ativos</dt>
183
+ <dd>
184
+ <div class="text-lg font-medium text-gray-900">12</div>
185
+ </dd>
186
+ </dl>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <div class="bg-gray-50 px-5 py-3">
191
+ <div class="text-sm">
192
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver todos</a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
198
+ <div class="p-5">
199
+ <div class="flex items-center">
200
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
201
+ <i class="fas fa-tasks text-white"></i>
202
+ </div>
203
+ <div class="ml-5 w-0 flex-1">
204
+ <dl>
205
+ <dt class="text-sm font-medium text-gray-500 truncate">Tarefas Hoje</dt>
206
+ <dd>
207
+ <div class="text-lg font-medium text-gray-900">8</div>
208
+ </dd>
209
+ </dl>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="bg-gray-50 px-5 py-3">
214
+ <div class="text-sm">
215
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver agenda</a>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
221
+ <div class="p-5">
222
+ <div class="flex items-center">
223
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
224
+ <i class="fas fa-chart-line text-white"></i>
225
+ </div>
226
+ <div class="ml-5 w-0 flex-1">
227
+ <dl>
228
+ <dt class="text-sm font-medium text-gray-500 truncate">Desempenho</dt>
229
+ <dd>
230
+ <div class="text-lg font-medium text-gray-900">92%</div>
231
+ </dd>
232
+ </dl>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="bg-gray-50 px-5 py-3">
237
+ <div class="text-sm">
238
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver métricas</a>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
244
+ <div class="p-5">
245
+ <div class="flex items-center">
246
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
247
+ <i class="fas fa-users text-white"></i>
248
+ </div>
249
+ <div class="ml-5 w-0 flex-1">
250
+ <dl>
251
+ <dt class="text-sm font-medium text-gray-500 truncate">Novos Candidatos</dt>
252
+ <dd>
253
+ <div class="text-lg font-medium text-gray-900">5</div>
254
+ </dd>
255
+ </dl>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ <div class="bg-gray-50 px-5 py-3">
260
+ <div class="text-sm">
261
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver RH</a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Charts and Insights -->
268
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
269
+ <!-- Performance Chart -->
270
+ <div class="bg-white shadow rounded-lg p-6 col-span-2 card-hover transition-all">
271
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Desempenho dos Agentes</h2>
272
+ <div class="h-64">
273
+ <canvas id="performanceChart"></canvas>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Quick Insights -->
278
+ <div class="bg-white shadow rounded-lg p-6 card-hover transition-all">
279
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Insights Rápidos</h2>
280
+ <div class="space-y-4">
281
+ <div class="flex items-start">
282
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
283
+ <i class="fas fa-lightbulb"></i>
284
+ </div>
285
+ <div class="ml-3">
286
+ <p class="text-sm text-gray-700">O agente de RH completou 85% das entrevistas agendadas esta semana.</p>
287
+ </div>
288
+ </div>
289
+ <div class="flex items-start">
290
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
291
+ <i class="fas fa-chart-pie"></i>
292
+ </div>
293
+ <div class="ml-3">
294
+ <p class="text-sm text-gray-700">Avaliação de candidatos aumentou 20% em relação ao mês passado.</p>
295
+ </div>
296
+ </div>
297
+ <div class="flex items-start">
298
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
299
+ <i class="fas fa-exclamation-triangle"></i>
300
+ </div>
301
+ <div class="ml-3">
302
+ <p class="text-sm text-gray-700">3 vagas urgentes precisam de atenção no departamento de TI.</p>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- AI Chat -->
310
+ <div class="bg-white shadow rounded-lg overflow-hidden card-hover transition-all">
311
+ <div class="px-6 py-4 border-b border-gray-200">
312
+ <h2 class="text-lg font-medium text-gray-900">Assistente BB3</h2>
313
+ <p class="mt-1 text-sm text-gray-500">Converse com nosso assistente de IA para tirar dúvidas e realizar ações</p>
314
+ </div>
315
+ <div class="p-4 h-96 overflow-y-auto bg-gray-50" id="chat-messages">
316
+ <div class="flex mb-4">
317
+ <div class="flex-shrink-0 mr-3">
318
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
319
+ <i class="fas fa-robot"></i>
320
+ </div>
321
+ </div>
322
+ <div class="bg-white p-3 rounded-lg shadow-sm chat-message">
323
+ <p class="text-sm text-gray-800">Olá! Sou o assistente da plataforma BB3. Como posso te ajudar hoje?</p>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="p-4 border-t border-gray-200">
328
+ <div class="flex">
329
+ <input type="text" id="chat-input" placeholder="Digite sua mensagem..." class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
330
+ <button id="send-message" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
331
+ <i class="fas fa-paper-plane"></i>
332
+ </button>
333
+ </div>
334
+ <div class="mt-2 flex space-x-2">
335
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded">
336
+ <i class="fas fa-calendar-alt mr-1"></i> Agendar entrevista
337
+ </button>
338
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded">
339
+ <i class="fas fa-file-alt mr-1"></i> Ver currículos
340
+ </button>
341
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded">
342
+ <i class="fas fa-chart-bar mr-1"></i> Relatório de desempenho
343
+ </button>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- HR Content (Hidden by default) -->
350
+ <div id="hr-content" class="hidden">
351
+ <div class="mb-6">
352
+ <h1 class="text-2xl font-bold text-gray-900">Recursos Humanos</h1>
353
+ <p class="mt-1 text-sm text-gray-500">Gerenciamento de candidatos, entrevistas e processos seletivos</p>
354
+ </div>
355
+
356
+ <!-- Wizard for first time setup -->
357
+ <div id="hr-wizard" class="bg-white shadow rounded-lg overflow-hidden mb-6">
358
+ <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
359
+ <h2 class="text-lg font-medium text-gray-900">Configuração Inicial do Módulo RH</h2>
360
+ <p class="mt-1 text-sm text-gray-600">Vamos configurar seu módulo de Recursos Humanos para começar a usar</p>
361
+ </div>
362
+
363
+ <div class="p-6">
364
+ <!-- Wizard Steps -->
365
+ <div class="wizard-step active" id="step1">
366
+ <h3 class="text-lg font-medium text-gray-900 mb-4">1. Perfil da Empresa</h3>
367
+ <div class="space-y-4">
368
+ <div>
369
+ <label for="company-name" class="block text-sm font-medium text-gray-700">Nome da Empresa</label>
370
+ <input type="text" id="company-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
371
+ </div>
372
+ <div>
373
+ <label for="company-description" class="block text-sm font-medium text-gray-700">Descrição</label>
374
+ <textarea id="company-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
375
+ </div>
376
+ <div>
377
+ <label for="company-industry" class="block text-sm font-medium text-gray-700">Setor de Atuação</label>
378
+ <select id="company-industry" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
379
+ <option>Selecione...</option>
380
+ <option>Tecnologia</option>
381
+ <option>Saúde</option>
382
+ <option>Educação</option>
383
+ <option>Finanças</option>
384
+ <option>Varejo</option>
385
+ <option>Outro</option>
386
+ </select>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="wizard-step" id="step2">
392
+ <h3 class="text-lg font-medium text-gray-900 mb-4">2. Cargos e Posições</h3>
393
+ <div class="space-y-4">
394
+ <div>
395
+ <label class="block text-sm font-medium text-gray-700">Adicionar Cargos</label>
396
+ <div class="mt-1 flex">
397
+ <input type="text" id="position-name" placeholder="Nome do cargo" class="flex-1 border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
398
+ <button id="add-position" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
399
+ <i class="fas fa-plus"></i>
400
+ </button>
401
+ </div>
402
+ </div>
403
+ <div>
404
+ <div class="bg-gray-50 p-4 rounded-md">
405
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Cargos Adicionados</h4>
406
+ <ul id="positions-list" class="space-y-2">
407
+ <!-- Positions will be added here -->
408
+ </ul>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="wizard-step" id="step3">
415
+ <h3 class="text-lg font-medium text-gray-900 mb-4">3. Critérios de Avaliação</h3>
416
+ <div class="space-y-4">
417
+ <div>
418
+ <p class="text-sm text-gray-600">Selecione os critérios que serão usados para avaliar candidatos:</p>
419
+ </div>
420
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
421
+ <div class="flex items-start">
422
+ <div class="flex items-center h-5">
423
+ <input id="criteria-communication" name="criteria-communication" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
424
+ </div>
425
+ <div class="ml-3 text-sm">
426
+ <label for="criteria-communication" class="font-medium text-gray-700">Comunicação</label>
427
+ <p class="text-gray-500">Habilidade de se expressar claramente</p>
428
+ </div>
429
+ </div>
430
+ <div class="flex items-start">
431
+ <div class="flex items-center h-5">
432
+ <input id="criteria-technical" name="criteria-technical" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
433
+ </div>
434
+ <div class="ml-3 text-sm">
435
+ <label for="criteria-technical" class="font-medium text-gray-700">Conhecimento Técnico</label>
436
+ <p class="text-gray-500">Domínio das habilidades necessárias</p>
437
+ </div>
438
+ </div>
439
+ <div class="flex items-start">
440
+ <div class="flex items-center h-5">
441
+ <input id="criteria-teamwork" name="criteria-teamwork" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
442
+ </div>
443
+ <div class="ml-3 text-sm">
444
+ <label for="criteria-teamwork" class="font-medium text-gray-700">Trabalho em Equipe</label>
445
+ <p class="text-gray-500">Capacidade de colaboração</p>
446
+ </div>
447
+ </div>
448
+ <div class="flex items-start">
449
+ <div class="flex items-center h-5">
450
+ <input id="criteria-problem-solving" name="criteria-problem-solving" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
451
+ </div>
452
+ <div class="ml-3 text-sm">
453
+ <label for="criteria-problem-solving" class="font-medium text-gray-700">Resolução de Problemas</label>
454
+ <p class="text-gray-500">Habilidade analítica e criatividade</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ <div>
459
+ <label for="custom-criteria" class="block text-sm font-medium text-gray-700">Critérios Personalizados</label>
460
+ <textarea id="custom-criteria" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Adicione critérios específicos para sua empresa (separados por vírgula)"></textarea>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="wizard-step" id="step4">
466
+ <h3 class="text-lg font-medium text-gray-900 mb-4">4. Configuração do Entrevistador</h3>
467
+ <div class="space-y-4">
468
+ <div>
469
+ <label for="interviewer-name" class="block text-sm font-medium text-gray-700">Nome do Entrevistador Virtual</label>
470
+ <input type="text" id="interviewer-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" value="Entrevistador BB3">
471
+ </div>
472
+ <div>
473
+ <label for="interviewer-style" class="block text-sm font-medium text-gray-700">Estilo de Entrevista</label>
474
+ <select id="interviewer-style" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
475
+ <option>Formal</option>
476
+ <option>Descontraído</option>
477
+ <option>Técnico</option>
478
+ <option>Comportamental</option>
479
+ <option>Misto</option>
480
+ </select>
481
+ </div>
482
+ <div>
483
+ <label class="block text-sm font-medium text-gray-700">Tipo de Perguntas</label>
484
+ <div class="mt-2 space-y-2">
485
+ <div class="flex items-center">
486
+ <input id="questions-technical" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
487
+ <label for="questions-technical" class="ml-2 block text-sm text-gray-700">Técnicas</label>
488
+ </div>
489
+ <div class="flex items-center">
490
+ <input id="questions-behavioral" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
491
+ <label for="questions-behavioral" class="ml-2 block text-sm text-gray-700">Comportamentais</label>
492
+ </div>
493
+ <div class="flex items-center">
494
+ <input id="questions-case" name="questions-type" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
495
+ <label for="questions-case" class="ml-2 block text-sm text-gray-700">Estudos de Caso</label>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
504
+ <button id="wizard-prev" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 hidden">
505
+ <i class="fas fa-arrow-left mr-2"></i> Voltar
506
+ </button>
507
+ <button id="wizard-next" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
508
+ Próximo <i class="fas fa-arrow-right ml-2"></i>
509
+ </button>
510
+ <button id="wizard-finish" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 hidden">
511
+ Finalizar Configuração <i class="fas fa-check ml-2"></i>
512
+ </button>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- HR Dashboard -->
517
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
518
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
519
+ <div class="p-5">
520
+ <div class="flex items-center">
521
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
522
+ <i class="fas fa-user-tie text-white"></i>
523
+ </div>
524
+ <div class="ml-5 w-0 flex-1">
525
+ <dl>
526
+ <dt class="text-sm font-medium text-gray-500 truncate">Candidatos</dt>
527
+ <dd>
528
+ <div class="text-lg font-medium text-gray-900">24</div>
529
+ </dd>
530
+ </dl>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ <div class="bg-gray-50 px-5 py-3">
535
+ <div class="text-sm">
536
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver todos</a>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
542
+ <div class="p-5">
543
+ <div class="flex items-center">
544
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
545
+ <i class="fas fa-calendar-check text-white"></i>
546
+ </div>
547
+ <div class="ml-5 w-0 flex-1">
548
+ <dl>
549
+ <dt class="text-sm font-medium text-gray-500 truncate">Entrevistas Hoje</dt>
550
+ <dd>
551
+ <div class="text-lg font-medium text-gray-900">5</div>
552
+ </dd>
553
+ </dl>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <div class="bg-gray-50 px-5 py-3">
558
+ <div class="text-sm">
559
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Ver agenda</a>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
565
+ <div class="p-5">
566
+ <div class="flex items-center">
567
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
568
+ <i class="fas fa-file-alt text-white"></i>
569
+ </div>
570
+ <div class="ml-5 w-0 flex-1">
571
+ <dl>
572
+ <dt class="text-sm font-medium text-gray-500 truncate">Currículos</dt>
573
+ <dd>
574
+ <div class="text-lg font-medium text-gray-900">42</div>
575
+ </dd>
576
+ </dl>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ <div class="bg-gray-50 px-5 py-3">
581
+ <div class="text-sm">
582
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Analisar</a>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-all">
588
+ <div class="p-5">
589
+ <div class="flex items-center">
590
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
591
+ <i class="fas fa-bullhorn text-white"></i>
592
+ </div>
593
+ <div class="ml-5 w-0 flex-1">
594
+ <dl>
595
+ <dt class="text-sm font-medium text-gray-500 truncate">Vagas Abertas</dt>
596
+ <dd>
597
+ <div class="text-lg font-medium text-gray-900">8</div>
598
+ </dd>
599
+ </dl>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ <div class="bg-gray-50 px-5 py-3">
604
+ <div class="text-sm">
605
+ <a href="#" class="font-medium text-blue-700 hover:text-blue-900">Gerenciar</a>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- HR Sections -->
612
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
613
+ <!-- Positions -->
614
+ <div class="bg-white shadow rounded-lg p-6 card-hover transition-all">
615
+ <div class="flex items-center justify-between mb-4">
616
+ <h2 class="text-lg font-medium text-gray-900">Cargos/Posições</h2>
617
+ <button class="text-blue-600 hover:text-blue-800">
618
+ <i class="fas fa-plus"></i>
619
+ </button>
620
+ </div>
621
+ <div class="space-y-3">
622
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
623
+ <div>
624
+ <p class="font-medium">Desenvolvedor Front-end</p>
625
+ <p class="text-sm text-gray-500">2 vagas abertas</p>
626
+ </div>
627
+ <button class="text-gray-400 hover:text-gray-600">
628
+ <i class="fas fa-ellipsis-v"></i>
629
+ </button>
630
+ </div>
631
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
632
+ <div>
633
+ <p class="font-medium">Analista de Dados</p>
634
+ <p class="text-sm text-gray-500">1 vaga aberta</p>
635
+ </div>
636
+ <button class="text-gray-400 hover:text-gray-600">
637
+ <i class="fas fa-ellipsis-v"></i>
638
+ </button>
639
+ </div>
640
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
641
+ <div>
642
+ <p class="font-medium">Gerente de Projetos</p>
643
+ <p class="text-sm text-gray-500">3 candidatos em processo</p>
644
+ </div>
645
+ <button class="text-gray-400 hover:text-gray-600">
646
+ <i class="fas fa-ellipsis-v"></i>
647
+ </button>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <!-- Interviews -->
653
+ <div class="bg-white shadow rounded-lg p-6 card-hover transition-all">
654
+ <div class="flex items-center justify-between mb-4">
655
+ <h2 class="text-lg font-medium text-gray-900">Entrevistas</h2>
656
+ <div class="flex space-x-2">
657
+ <button class="text-blue-600 hover:text-blue-800">
658
+ <i class="fas fa-plus"></i>
659
+ </button>
660
+ <button class="text-gray-500 hover:text-gray-700">
661
+ <i class="fas fa-calendar"></i>
662
+ </button>
663
+ </div>
664
+ </div>
665
+ <div class="space-y-3">
666
+ <div class="p-3 bg-gray-50 rounded-md">
667
+ <div class="flex items-center justify-between">
668
+ <p class="font-medium">João Silva</p>
669
+ <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">10:00</span>
670
+ </div>
671
+ <p class="text-sm text-gray-500 mt-1">Desenvolvedor Front-end</p>
672
+ </div>
673
+ <div class="p-3 bg-gray-50 rounded-md">
674
+ <div class="flex items-center justify-between">
675
+ <p class="font-medium">Maria Souza</p>
676
+ <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">14:30</span>
677
+ </div>
678
+ <p class="text-sm text-gray-500 mt-1">Analista de Dados</p>
679
+ </div>
680
+ <div class="p-3 bg-gray-50 rounded-md">
681
+ <div class="flex items-center justify-between">
682
+ <p class="font-medium">Carlos Oliveira</p>
683
+ <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">16:00</span>
684
+ </div>
685
+ <p class="text-sm text-gray-500 mt-1">Gerente de Projetos</p>
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Candidates -->
691
+ <div class="bg-white shadow rounded-lg p-6 card-hover transition-all">
692
+ <div class="flex items-center justify-between mb-4">
693
+ <h2 class="text-lg font-medium text-gray-900">Candidatos Recentes</h2>
694
+ <button class="text-blue-600 hover:text-blue-800">
695
+ <i class="fas fa-filter"></i>
696
+ </button>
697
+ </div>
698
+ <div class="space-y-3">
699
+ <div class="flex items-center p-3 bg-gray-50 rounded-md">
700
+ <div class="flex-shrink-0">
701
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
702
+ </div>
703
+ <div class="ml-3">
704
+ <p class="font-medium">Ana Beatriz</p>
705
+ <p class="text-sm text-gray-500">Front-end Developer</p>
706
+ </div>
707
+ <div class="ml-auto">
708
+ <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">Nova</span>
709
+ </div>
710
+ </div>
711
+ <div class="flex items-center p-3 bg-gray-50 rounded-md">
712
+ <div class="flex-shrink-0">
713
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
714
+ </div>
715
+ <div class="ml-3">
716
+ <p class="font-medium">Roberto Almeida</p>
717
+ <p class="text-sm text-gray-500">Data Scientist</p>
718
+ </div>
719
+ <div class="ml-auto">
720
+ <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">Aprovado</span>
721
+ </div>
722
+ </div>
723
+ <div class="flex items-center p-3 bg-gray-50 rounded-md">
724
+ <div class="flex-shrink-0">
725
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
726
+ </div>
727
+ <div class="ml-3">
728
+ <p class="font-medium">Juliana Costa</p>
729
+ <p class="text-sm text-gray-500">UX Designer</p>
730
+ </div>
731
+ <div class="ml-auto">
732
+ <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">Em análise</span>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- HR Actions -->
740
+ <div class="bg-white shadow rounded-lg overflow-hidden card-hover transition-all">
741
+ <div class="px-6 py-4 border-b border-gray-200">
742
+ <h2 class="text-lg font-medium text-gray-900">Ações Rápidas</h2>
743
+ </div>
744
+ <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
745
+ <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50">
746
+ <div class="mr-3 bg-blue-100 p-2 rounded-full">
747
+ <i class="fas fa-calendar-plus text-blue-600"></i>
748
+ </div>
749
+ <span>Agendar Entrevista</span>
750
+ </button>
751
+ <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50">
752
+ <div class="mr-3 bg-green-100 p-2 rounded-full">
753
+ <i class="fas fa-user-plus text-green-600"></i>
754
+ </div>
755
+ <span>Adicionar Candidato</span>
756
+ </button>
757
+ <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50">
758
+ <div class="mr-3 bg-purple-100 p-2 rounded-full">
759
+ <i class="fas fa-bullhorn text-purple-600"></i>
760
+ </div>
761
+ <span>Criar Nova Vaga</span>
762
+ </button>
763
+ <button class="flex items-center justify-center p-4 border border-gray-200 rounded-md hover:bg-gray-50">
764
+ <div class="mr-3 bg-yellow-100 p-2 rounded-full">
765
+ <i class="fas fa-file-upload text-yellow-600"></i>
766
+ </div>
767
+ <span>Importar Currículos</span>
768
+ </button>
769
+ </div>
770
+ </div>
771
+ </div>
772
+ </main>
773
+ </div>
774
+ </div>
775
+
776
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
777
+ <script>
778
+ // Toggle sidebar
779
+ document.getElementById('toggle-sidebar').addEventListener('click', function() {
780
+ document.getElementById('sidebar').classList.toggle('sidebar-collapsed');
781
+ });
782
+
783
+ // Chat functionality
784
+ document.getElementById('send-message').addEventListener('click', function() {
785
+ const input = document.getElementById('chat-input');
786
+ const message = input.value.trim();
787
+
788
+ if (message) {
789
+ // Add user message
790
+ const chatContainer = document.getElementById('chat-messages');
791
+ const userMessage = document.createElement('div');
792
+ userMessage.className = 'flex mb-4 justify-end';
793
+ userMessage.innerHTML = `
794
+ <div class="flex flex-col items-end">
795
+ <div class="bg-blue-500 p-3 rounded-lg shadow-sm chat-message">
796
+ <p class="text-sm text-white">${message}</p>
797
+ </div>
798
+ </div>
799
+ `;
800
+ chatContainer.appendChild(userMessage);
801
+
802
+ // Clear input
803
+ input.value = '';
804
+
805
+ // Simulate AI response
806
+ setTimeout(() => {
807
+ const responses = [
808
+ "Entendi sua solicitação. Posso te ajudar com algo mais específico?",
809
+ "Ótima pergunta! Estou processando sua requisição...",
810
+ "Com base nos dados disponíveis, posso te informar que...",
811
+ "Para essa ação, você precisará acessar a seção de configurações.",
812
+ "Posso te mostrar um tutorial sobre como realizar essa tarefa?"
813
+ ];
814
+
815
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
816
+
817
+ const aiMessage = document.createElement('div');
818
+ aiMessage.className = 'flex mb-4';
819
+ aiMessage.innerHTML = `
820
+ <div class="flex-shrink-0 mr-3">
821
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
822
+ <i class="fas fa-robot"></i>
823
+ </div>
824
+ </div>
825
+ <div class="bg-white p-3 rounded-lg shadow-sm chat-message">
826
+ <p class="text-sm text-gray-800">${randomResponse}</p>
827
+ </div>
828
+ `;
829
+ chatContainer.appendChild(aiMessage);
830
+
831
+ // Scroll to bottom
832
+ chatContainer.scrollTop = chatContainer.scrollHeight;
833
+ }, 1000);
834
+ }
835
+ });
836
+
837
+ // Allow pressing Enter to send message
838
+ document.getElementById('chat-input').addEventListener('keypress', function(e) {
839
+ if (e.key === 'Enter') {
840
+ document.getElementById('send-message').click();
841
+ }
842
+ });
843
+
844
+ // HR Wizard functionality
845
+ const wizardSteps = document.querySelectorAll('.wizard-step');
846
+ const wizardNext = document.getElementById('wizard-next');
847
+ const wizardPrev = document.getElementById('wizard-prev');
848
+ const wizardFinish = document.getElementById('wizard-finish');
849
+ let currentStep = 0;
850
+
851
+ wizardNext.addEventListener('click', function() {
852
+ if (currentStep < wizardSteps.length - 1) {
853
+ wizardSteps[currentStep].classList.remove('active');
854
+ currentStep++;
855
+ wizardSteps[currentStep].classList.add('active');
856
+
857
+ // Update button visibility
858
+ wizardPrev.classList.remove('hidden');
859
+ if (currentStep === wizardSteps.length - 1) {
860
+ wizardNext.classList.add('hidden');
861
+ wizardFinish.classList.remove('hidden');
862
+ }
863
+ }
864
+ });
865
+
866
+ wizardPrev.addEventListener('click', function() {
867
+ if (currentStep > 0) {
868
+ wizardSteps[currentStep].classList.remove('active');
869
+ currentStep--;
870
+ wizardSteps[currentStep].classList.add('active');
871
+
872
+ // Update button visibility
873
+ wizardFinish.classList.add('hidden');
874
+ wizardNext.classList.remove('hidden');
875
+ if (currentStep === 0) {
876
+ wizardPrev.classList.add('hidden');
877
+ }
878
+ }
879
+ });
880
+
881
+ wizardFinish.addEventListener('click', function() {
882
+ alert('Configuração inicial do módulo RH concluída com sucesso!');
883
+ document.getElementById('hr-wizard').classList.add('hidden');
884
+ });
885
+
886
+ // Add position functionality
887
+ document.getElementById('add-position').addEventListener('click', function() {
888
+ const positionName = document.getElementById('position-name').value.trim();
889
+ if (positionName) {
890
+ const positionsList = document.getElementById('positions-list');
891
+ const positionItem = document.createElement('li');
892
+ positionItem.className = 'flex items-center justify-between bg-white p-2 rounded-md shadow-sm';
893
+ positionItem.innerHTML = `
894
+ <span class="text-sm">${positionName}</span>
895
+ <button class="text-red-500 hover:text-red-700">
896
+ <i class="fas fa-times"></i>
897
+ </button>
898
+ `;
899
+ positionsList.appendChild(positionItem);
900
+ document.getElementById('position-name').value = '';
901
+
902
+ // Add delete functionality
903
+ positionItem.querySelector('button').addEventListener('click', function() {
904
+ positionsList.removeChild(positionItem);
905
+ });
906
+ }
907
+ });
908
+
909
+ // Performance chart
910
+ const ctx = document.getElementById('performanceChart').getContext('2d');
911
+ const performanceChart = new Chart(ctx, {
912
+ type: 'line',
913
+ data: {
914
+ labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'],
915
+ datasets: [
916
+ {
917
+ label: 'Entrevistador',
918
+ data: [65, 59, 80, 81, 56, 55, 90],
919
+ borderColor: 'rgb(99, 102, 241)',
920
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
921
+ tension: 0.3,
922
+ fill: true
923
+ },
924
+ {
925
+ label: 'Atendimento',
926
+ data: [28, 48, 40, 19, 86, 27, 45],
927
+ borderColor: 'rgb(16, 185, 129)',
928
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
929
+ tension: 0.3,
930
+ fill: true
931
+ },
932
+ {
933
+ label: 'Vendas',
934
+ data: [45, 25, 60, 40, 56, 67, 75],
935
+ borderColor: 'rgb(245, 158, 11)',
936
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
937
+ tension: 0.3,
938
+ fill: true
939
+ }
940
+ ]
941
+ },
942
+ options: {
943
+ responsive: true,
944
+ plugins: {
945
+ legend: {
946
+ position: 'top',
947
+ },
948
+ tooltip: {
949
+ mode: 'index',
950
+ intersect: false,
951
+ }
952
+ },
953
+ scales: {
954
+ y: {
955
+ beginAtZero: true,
956
+ max: 100
957
+ }
958
+ }
959
+ }
960
+ });
961
+
962
+ // Navigation between home and HR
963
+ document.querySelectorAll('#sidebar a').forEach(link => {
964
+ link.addEventListener('click', function(e) {
965
+ e.preventDefault();
966
+
967
+ // Remove active class from all links
968
+ document.querySelectorAll('#sidebar a').forEach(l => {
969
+ l.classList.remove('text-blue-700', 'bg-blue-50');
970
+ l.classList.add('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-100');
971
+ });
972
+
973
+ // Add active class to clicked link
974
+ this.classList.remove('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-100');
975
+ this.classList.add('text-blue-700', 'bg-blue-50');
976
+
977
+ // Show appropriate content
978
+ if (this.querySelector('span').textContent === 'Recursos Humanos') {
979
+ document.getElementById('home-content').classList.add('hidden');
980
+ document.getElementById('hr-content').classList.remove('hidden');
981
+ } else {
982
+ document.getElementById('home-content').classList.remove('hidden');
983
+ document.getElementById('hr-content').classList.add('hidden');
984
+ }
985
+ });
986
+ });
987
+ </script>
988
+ <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=menezes-nathan/testebb3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
989
+ </html>