Hugging Face's logo

Spaces:
FourLabs-UN2
/
android-test-pilot
Running

App Files Community
FourLabs-UN2 commited on
Commit
e5bda5f
·
verified ·
1 Parent(s): 1646bef

faça a página de relatórios

Browse files
Files changed (3) hide show
  1. chatbot.html +1 -1
  2. components/sidebar.js +2 -3
  3. relatorios.html +473 -0
chatbot.html CHANGED
@@ -35,7 +35,7 @@
35
  <div class="flex items-center gap-4">
36
  <span id="platformBadge" class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
37
  <i data-feather="circle" class="w-3 h-3"></i>
38
- Android Conectado
39
  </span>
40
  <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
41
  <i data-feather="settings" class="w-4 h-4"></i>
 
35
  <div class="flex items-center gap-4">
36
  <span id="platformBadge" class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
37
  <i data-feather="circle" class="w-3 h-3"></i>
38
+ Android Conectado
39
  </span>
40
  <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
41
  <i data-feather="settings" class="w-4 h-4"></i>
components/sidebar.js CHANGED
@@ -166,12 +166,11 @@ class CustomSidebar extends HTMLElement {
166
  <i data-feather="clock"></i>
167
  <span>Histórico</span>
168
  </a>
169
- <a href="#" class="nav-item">
170
  <i data-feather="pie-chart"></i>
171
  <span>Relatórios</span>
172
  </a>
173
-
174
- <a href="#" class="nav-item">
175
  <i data-feather="sliders"></i>
176
  <span>Configurações</span>
177
  </a>
 
166
  <i data-feather="clock"></i>
167
  <span>Histórico</span>
168
  </a>
169
+ <a href="relatorios.html" class="nav-item">
170
  <i data-feather="pie-chart"></i>
171
  <span>Relatórios</span>
172
  </a>
173
+ <a href="#" class="nav-item">
 
174
  <i data-feather="sliders"></i>
175
  <span>Configurações</span>
176
  </a>
relatorios.html ADDED
@@ -0,0 +1,473 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Relatórios - Mobile Test Pilot</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#21223a',
18
+ secondary: '#ff580f',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-primary min-h-screen text-white">
26
+ <custom-sidebar></custom-sidebar>
27
+
28
+ <main class="ml-64 p-8">
29
+ <div class="max-w-7xl mx-auto">
30
+ <div class="flex items-center justify-between mb-8">
31
+ <div>
32
+ <h1 class="text-3xl font-bold mb-2">Relatórios</h1>
33
+ <p class="text-gray-300">Análise detalhada do desempenho dos seus testes</p>
34
+ </div>
35
+ <div class="flex items-center gap-4">
36
+ <div class="relative">
37
+ <input type="text" placeholder="Buscar relatório..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50">
38
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
39
+ </div>
40
+ <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
41
+ <i data-feather="filter" class="w-4 h-4"></i>
42
+ Filtrar
43
+ </button>
44
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
45
+ <i data-feather="download" class="w-4 h-4"></i>
46
+ Exportar
47
+ </button>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Estatísticas Gerais -->
52
+ <div class="grid grid-cols-4 gap-6 mb-8">
53
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
54
+ <div class="flex items-center justify-between">
55
+ <div>
56
+ <p class="text-gray-400 text-sm">Total de Testes</p>
57
+ <p class="text-2xl font-bold">245</p>
58
+ </div>
59
+ <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center">
60
+ <i data-feather="bar-chart-2" class="text-secondary"></i>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
66
+ <div class="flex items-center justify-between">
67
+ <div>
68
+ <p class="text-gray-400 text-sm">Taxa de Sucesso</p>
69
+ <p class="text-2xl font-bold text-green-400">89%</p>
70
+ </div>
71
+ <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center">
72
+ <i data-feather="trending-up" class="text-green-400"></i>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
78
+ <div class="flex items-center justify-between">
79
+ <div>
80
+ <p class="text-gray-400 text-sm">Tempo Médio</p>
81
+ <p class="text-2xl font-bold text-blue-400">28min</p>
82
+ </div>
83
+ <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center">
84
+ <i data-feather="clock" class="text-blue-400"></i>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
90
+ <div class="flex items-center justify-between">
91
+ <div>
92
+ <p class="text-gray-400 text-sm">Apps Testados</p>
93
+ <p class="text-2xl font-bold text-purple-400">18</p>
94
+ </div>
95
+ <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center">
96
+ <i data-feather="smartphone" class="text-purple-400"></i>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Gráficos -->
103
+ <div class="grid grid-cols-2 gap-6 mb-8">
104
+ <!-- Gráfico de Status dos Testes -->
105
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
106
+ <h3 class="text-xl font-semibold mb-4">Status dos Testes</h3>
107
+ <div class="h-64">
108
+ <canvas id="statusChart"></canvas>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Gráfico de Performance por Plataforma -->
113
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
114
+ <h3 class="text-xl font-semibold mb-4">Performance por Plataforma</h3>
115
+ <div class="h-64">
116
+ <canvas id="platformChart"></canvas>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Tendência Temporal -->
122
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8">
123
+ <h3 class="text-xl font-semibold mb-4">Tendência de Testes (Últimos 30 dias)</h3>
124
+ <div class="h-80">
125
+ <canvas id="trendChart"></canvas>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Relatórios Detalhados -->
130
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
131
+ <div class="flex items-center justify-between mb-6">
132
+ <h3 class="text-xl font-semibold">Relatórios Detalhados</h3>
133
+ <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
134
+ <i data-feather="plus" class="w-4 h-4"></i>
135
+ Novo Relatório
136
+ </button>
137
+ </div>
138
+
139
+ <div class="overflow-x-auto">
140
+ <table class="w-full">
141
+ <thead>
142
+ <tr class="border-b border-gray-700">
143
+ <th class="text-left py-3 px-4">Aplicativo</th>
144
+ <th class="text-left py-3 px-4">Plataforma</th>
145
+ <th class="text-left py-3 px-4">Data</th>
146
+ <th class="text-left py-3 px-4">Status</th>
147
+ <th class="text-left py-3 px-4">Métricas</th>
148
+ <th class="text-left py-3 px-4">Ações</th>
149
+ </tr>
150
+ </thead>
151
+ <tbody>
152
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
153
+ <td class="py-4 px-4">
154
+ <div class="flex items-center gap-3">
155
+ <div class="w-10 h-10 bg-secondary bg-opacity-20 rounded-lg flex items-center justify-center">
156
+ <i data-feather="smartphone" class="text-secondary"></i>
157
+ </div>
158
+ <div>
159
+ <p class="font-semibold">App Banking</p>
160
+ <p class="text-sm text-gray-400">v1.2.3</p>
161
+ </div>
162
+ </div>
163
+ </td>
164
+ <td class="py-4 px-4">
165
+ <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
166
+ </td>
167
+ <td class="py-4 px-4">
168
+ <p class="text-sm">15/12/2024</p>
169
+ <p class="text-xs text-gray-400">14:30</p>
170
+ </td>
171
+ <td class="py-4 px-4">
172
+ <span class="text-green-400 flex items-center gap-2">
173
+ <i data-feather="check-circle" class="w-4 h-4"></i>
174
+ Concluído
175
+ </span>
176
+ </td>
177
+ <td class="py-4 px-4">
178
+ <div class="text-sm">
179
+ <p>CPU: 15% | Mem: 128MB</p>
180
+ <p class="text-xs text-gray-400">FPS: 60 | Latência: 42ms</p>
181
+ </div>
182
+ </td>
183
+ <td class="py-4 px-4">
184
+ <div class="flex gap-2">
185
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
186
+ <i data-feather="eye" class="w-4 h-4"></i>
187
+ </button>
188
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download">
189
+ <i data-feather="download" class="w-4 h-4"></i>
190
+ </button>
191
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Compartilhar">
192
+ <i data-feather="share" class="w-4 h-4"></i>
193
+ </button>
194
+ </div>
195
+ </td>
196
+ </tr>
197
+
198
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
199
+ <td class="py-4 px-4">
200
+ <div class="flex items-center gap-3">
201
+ <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center">
202
+ <i data-feather="shopping-cart" class="text-blue-400"></i>
203
+ </div>
204
+ <div>
205
+ <p class="font-semibold">E-commerce App</p>
206
+ <p class="text-sm text-gray-400">v2.0.1</p>
207
+ </div>
208
+ </div>
209
+ </td>
210
+ <td class="py-4 px-4">
211
+ <span class="bg-blue-500 text-white px-2 py-1 rounded-full text-xs">iOS</span>
212
+ </td>
213
+ <td class="py-4 px-4">
214
+ <p class="text-sm">14/12/2024</p>
215
+ <p class="text-xs text-gray-400">11:15</p>
216
+ </td>
217
+ <td class="py-4 px-4">
218
+ <span class="text-green-400 flex items-center gap-2">
219
+ <i data-feather="check-circle" class="w-4 h-4"></i>
220
+ Concluído
221
+ </span>
222
+ </td>
223
+ <td class="py-4 px-4">
224
+ <div class="text-sm">
225
+ <p>CPU: 18% | Mem: 156MB</p>
226
+ <p class="text-xs text-gray-400">FPS: 58 | Latência: 38ms</p>
227
+ </div>
228
+ </td>
229
+ <td class="py-4 px-4">
230
+ <div class="flex gap-2">
231
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
232
+ <i data-feather="eye" class="w-4 h-4"></i>
233
+ </button>
234
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download">
235
+ <i data-feather="download" class="w-4 h-4"></i>
236
+ </button>
237
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Compartilhar">
238
+ <i data-feather="share" class="w-4 h-4"></i>
239
+ </button>
240
+ </div>
241
+ </td>
242
+ </tr>
243
+
244
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
245
+ <td class="py-4 px-4">
246
+ <div class="flex items-center gap-3">
247
+ <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center">
248
+ <i data-feather="map" class="text-red-400"></i>
249
+ </div>
250
+ <div>
251
+ <p class="font-semibold">Navigation App</p>
252
+ <p class="text-sm text-gray-400">v3.1.0</p>
253
+ </div>
254
+ </div>
255
+ </td>
256
+ <td class="py-4 px-4">
257
+ <span class="bg-red-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
258
+ </td>
259
+ <td class="py-4 px-4">
260
+ <p class="text-sm">13/12/2024</p>
261
+ <p class="text-xs text-gray-400">16:45</p>
262
+ </td>
263
+ <td class="py-4 px-4">
264
+ <span class="text-red-400 flex items-center gap-2">
265
+ <i data-feather="x-circle" class="w-4 h-4"></i>
266
+ Falhou
267
+ </span>
268
+ </td>
269
+ <td class="py-4 px-4">
270
+ <div class="text-sm">
271
+ <p>CPU: 85% | Mem: 256MB</p>
272
+ <p class="text-xs text-gray-400">FPS: 12 | Latência: 120ms</p>
273
+ </div>
274
+ </td>
275
+ <td class="py-4 px-4">
276
+ <div class="flex gap-2">
277
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
278
+ <i data-feather="eye" class="w-4 h-4"></i>
279
+ </button>
280
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download">
281
+ <i data-feather="download" class="w-4 h-4"></i>
282
+ </button>
283
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Compartilhar">
284
+ <i data-feather="share" class="w-4 h-4"></i>
285
+ </button>
286
+ </div>
287
+ </td>
288
+ </tr>
289
+ </tbody>
290
+ </table>
291
+ </div>
292
+
293
+ <!-- Paginação -->
294
+ <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-700">
295
+ <p class="text-sm text-gray-400">Mostrando 3 de 45 relatórios</p>
296
+ <div class="flex gap-2">
297
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
298
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
299
+ </button>
300
+ <button class="px-3 py-1 bg-secondary text-white rounded-lg">1</button>
301
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">2</button>
302
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">3</button>
303
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
304
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
305
+ </button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </main>
311
+
312
+ <script src="components/sidebar.js"></script>
313
+ <script src="script.js"></script>
314
+ <script>
315
+ feather.replace();
316
+
317
+ // Atualizar sidebar para marcar a página ativa
318
+ document.addEventListener('DOMContentLoaded', function() {
319
+ const sidebar = document.querySelector('custom-sidebar');
320
+ if (sidebar) {
321
+ const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
322
+ navItems.forEach(item => {
323
+ if (item.querySelector('span').textContent === 'Relatórios') {
324
+ item.classList.add('active');
325
+ } else {
326
+ item.classList.remove('active');
327
+ }
328
+ });
329
+ }
330
+
331
+ // Inicializar gráficos
332
+ initializeCharts();
333
+ });
334
+
335
+ function initializeCharts() {
336
+ // Gráfico de Status dos Testes
337
+ const statusCtx = document.getElementById('statusChart').getContext('2d');
338
+ new Chart(statusCtx, {
339
+ type: 'doughnut',
340
+ data: {
341
+ labels: ['Concluídos', 'Falhas', 'Pausados', 'Em Execução'],
342
+ datasets: [{
343
+ data: [218, 27, 12, 8],
344
+ backgroundColor: [
345
+ '#10B981',
346
+ '#EF4444',
347
+ '#F59E0B',
348
+ '#3B82F6'
349
+ ],
350
+ borderWidth: 0
351
+ }]
352
+ },
353
+ options: {
354
+ responsive: true,
355
+ maintainAspectRatio: false,
356
+ plugins: {
357
+ legend: {
358
+ position: 'bottom',
359
+ labels: {
360
+ color: '#E5E7EB',
361
+ font: {
362
+ size: 12
363
+ }
364
+ }
365
+ }
366
+ }
367
+ }
368
+ });
369
+
370
+ // Gráfico de Performance por Plataforma
371
+ const platformCtx = document.getElementById('platformChart').getContext('2d');
372
+ new Chart(platformCtx, {
373
+ type: 'bar',
374
+ data: {
375
+ labels: ['Android', 'iOS'],
376
+ datasets: [{
377
+ label: 'Taxa de Sucesso (%)',
378
+ data: [92, 86],
379
+ backgroundColor: '#FF580F',
380
+ borderRadius: 6
381
+ }]
382
+ },
383
+ options: {
384
+ responsive: true,
385
+ maintainAspectRatio: false,
386
+ scales: {
387
+ y: {
388
+ beginAtZero: true,
389
+ max: 100,
390
+ grid: {
391
+ color: '#374151'
392
+ },
393
+ ticks: {
394
+ color: '#9CA3AF'
395
+ }
396
+ },
397
+ x: {
398
+ grid: {
399
+ display: false
400
+ },
401
+ ticks: {
402
+ color: '#9CA3AF'
403
+ }
404
+ }
405
+ },
406
+ plugins: {
407
+ legend: {
408
+ display: false
409
+ }
410
+ }
411
+ }
412
+ });
413
+
414
+ // Gráfico de Tendência Temporal
415
+ const trendCtx = document.getElementById('trendChart').getContext('2d');
416
+ new Chart(trendCtx, {
417
+ type: 'line',
418
+ data: {
419
+ labels: ['1', '5', '10', '15', '20', '25', '30'],
420
+ datasets: [
421
+ {
422
+ label: 'Testes Concluídos',
423
+ data: [8, 12, 6, 14, 10, 16, 12],
424
+ borderColor: '#10B981',
425
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
426
+ tension: 0.4,
427
+ fill: true
428
+ },
429
+ {
430
+ label: 'Testes com Falha',
431
+ data: [2, 3, 1, 4, 2, 3, 1],
432
+ borderColor: '#EF4444',
433
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
434
+ tension: 0.4,
435
+ fill: true
436
+ }
437
+ ]
438
+ },
439
+ options: {
440
+ responsive: true,
441
+ maintainAspectRatio: false,
442
+ scales: {
443
+ y: {
444
+ grid: {
445
+ color: '#374151'
446
+ },
447
+ ticks: {
448
+ color: '#9CA3AF'
449
+ }
450
+ },
451
+ x: {
452
+ grid: {
453
+ color: '#374151'
454
+ },
455
+ ticks: {
456
+ color: '#9CA3AF'
457
+ }
458
+ }
459
+ },
460
+ plugins: {
461
+ legend: {
462
+ position: 'bottom',
463
+ labels: {
464
+ color: '#E5E7EB'
465
+ }
466
+ }
467
+ }
468
+ }
469
+ });
470
+ }
471
+ </script>
472
+ </body>
473
+ </html>