Hugging Face's logo

Spaces:
condorhacker
/
anycoder-8307118c
Running

App Files Community
condorhacker commited on
Commit
390ea24
·
verified ·
1 Parent(s): 1849dc3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +737 -19
index.html CHANGED
@@ -1,19 +1,737 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SEGRETERIA TELEFONICA AI AVANZATA - SISTEMA ENTERPRISE v4.0</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-color: #2563eb;
17
+ --secondary-color: #3b82f6;
18
+ --accent-color: #8b5cf6;
19
+ --success-color: #10b981;
20
+ --warning-color: #f59e0b;
21
+ --danger-color: #ef4444;
22
+ --dark-color: #1e293b;
23
+ --light-color: #f8fafc;
24
+ --gray-color: #64748b;
25
+ --text-color: #334155;
26
+ --border-radius: 12px;
27
+ --shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
28
+ --transition: all 0.3s ease;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
33
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
+ color: var(--text-color);
35
+ line-height: 1.6;
36
+ min-height: 100vh;
37
+ }
38
+
39
+ .container {
40
+ max-width: 1400px;
41
+ margin: 0 auto;
42
+ padding: 20px;
43
+ }
44
+
45
+ .header {
46
+ background: rgba(255, 255, 255, 0.1);
47
+ backdrop-filter: blur(10px);
48
+ border-radius: var(--border-radius);
49
+ padding: 30px;
50
+ margin-bottom: 30px;
51
+ border: 1px solid rgba(255, 255, 255, 0.2);
52
+ box-shadow: var(--shadow);
53
+ position: relative;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .header::before {
58
+ content: '';
59
+ position: absolute;
60
+ top: -50%;
61
+ left: -50%;
62
+ width: 200%;
63
+ height: 200%;
64
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
65
+ animation: float 15s infinite linear;
66
+ }
67
+
68
+ @keyframes float {
69
+ 0% { transform: translate(0, 0) rotate(0deg); }
70
+ 100% { transform: translate(-5%, -5%) rotate(360deg); }
71
+ }
72
+
73
+ .header h1 {
74
+ font-size: 2.5em;
75
+ font-weight: 800;
76
+ background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
77
+ -webkit-background-clip: text;
78
+ -webkit-text-fill-color: transparent;
79
+ margin-bottom: 10px;
80
+ position: relative;
81
+ z-index: 1;
82
+ }
83
+
84
+ .header p {
85
+ font-size: 1.2em;
86
+ color: rgba(255, 255, 255, 0.9);
87
+ position: relative;
88
+ z-index: 1;
89
+ }
90
+
91
+ .anycoder-link {
92
+ position: absolute;
93
+ top: 20px;
94
+ right: 20px;
95
+ color: rgba(255, 255, 255, 0.7);
96
+ text-decoration: none;
97
+ font-size: 0.9em;
98
+ z-index: 2;
99
+ }
100
+
101
+ .dashboard-grid {
102
+ display: grid;
103
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
104
+ gap: 25px;
105
+ margin-bottom: 30px;
106
+ }
107
+
108
+ .card {
109
+ background: rgba(255, 255, 255, 0.1);
110
+ backdrop-filter: blur(10px);
111
+ border-radius: var(--border-radius);
112
+ padding: 25px;
113
+ box-shadow: var(--shadow);
114
+ border: 1px solid rgba(255, 255, 255, 0.2);
115
+ transition: var(--transition);
116
+ }
117
+
118
+ .card:hover {
119
+ transform: translateY(-5px);
120
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
121
+ }
122
+
123
+ .stat-card {
124
+ text-align: center;
125
+ }
126
+
127
+ .stat-card .icon {
128
+ font-size: 2.5em;
129
+ margin-bottom: 15px;
130
+ color: var(--accent-color);
131
+ }
132
+
133
+ .stat-value {
134
+ font-size: 3em;
135
+ font-weight: 800;
136
+ margin: 15px 0;
137
+ background: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb);
138
+ -webkit-background-clip: text;
139
+ -webkit-text-fill-color: transparent;
140
+ }
141
+
142
+ .stat-label {
143
+ font-size: 1.1em;
144
+ opacity: 0.9;
145
+ }
146
+
147
+ .chart-container {
148
+ grid-column: span 2;
149
+ min-height: 300px;
150
+ }
151
+
152
+ .activity-feed {
153
+ max-height: 400px;
154
+ overflow-y: auto;
155
+ }
156
+
157
+ .activity-item {
158
+ display: flex;
159
+ align-items: center;
160
+ padding: 15px 0;
161
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
162
+ transition: var(--transition);
163
+ }
164
+
165
+ .activity-item:hover {
166
+ background: rgba(255, 255, 255, 0.05);
167
+ border-radius: 8px;
168
+ padding: 15px;
169
+ }
170
+
171
+ .activity-icon {
172
+ width: 40px;
173
+ height: 40px;
174
+ border-radius: 50%;
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ margin-right: 15px;
179
+ font-size: 1.2em;
180
+ }
181
+
182
+ .activity-content {
183
+ flex: 1;
184
+ }
185
+
186
+ .activity-time {
187
+ font-size: 0.9em;
188
+ opacity: 0.7;
189
+ }
190
+
191
+ .priority-badge {
192
+ padding: 4px 12px;
193
+ border-radius: 20px;
194
+ font-size: 0.85em;
195
+ font-weight: 600;
196
+ }
197
+
198
+ .priority-low { background: var(--success-color); color: white; }
199
+ .priority-medium { background: var(--warning-color); color: white; }
200
+ .priority-high { background: var(--danger-color); color: white; }
201
+ .priority-urgent {
202
+ background: var(--danger-color);
203
+ color: white;
204
+ animation: pulse 2s infinite;
205
+ }
206
+
207
+ @keyframes pulse {
208
+ 0% { opacity: 1; }
209
+ 50% { opacity: 0.7; }
210
+ 100% { opacity: 1; }
211
+ }
212
+
213
+ .tabs {
214
+ display: flex;
215
+ gap: 10px;
216
+ margin-bottom: 20px;
217
+ }
218
+
219
+ .tab {
220
+ padding: 12px 25px;
221
+ border-radius: var(--border-radius);
222
+ background: rgba(255, 255, 255, 0.05);
223
+ cursor: pointer;
224
+ transition: var(--transition);
225
+ }
226
+
227
+ .tab.active {
228
+ background: rgba(255, 255, 255, 0.1);
229
+ border: 1px solid rgba(255, 255, 255, 0.2);
230
+ }
231
+
232
+ .table-container {
233
+ overflow-x: auto;
234
+ }
235
+
236
+ table {
237
+ width: 100%;
238
+ border-collapse: collapse;
239
+ }
240
+
241
+ th {
242
+ background: rgba(255, 255, 255, 0.05);
243
+ padding: 15px 20px;
244
+ text-align: left;
245
+ font-weight: 600;
246
+ }
247
+
248
+ td {
249
+ padding: 15px 20px;
250
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
251
+ }
252
+
253
+ .real-time-indicator {
254
+ display: inline-block;
255
+ width: 10px;
256
+ height: 10px;
257
+ border-radius: 50%;
258
+ background: var(--success-color);
259
+ margin-right: 8px;
260
+ animation: blink 2s infinite;
261
+ }
262
+
263
+ @keyframes blink {
264
+ 0%, 50% { opacity: 1; }
265
+ 51%, 100% { opacity: 0; }
266
+ }
267
+
268
+ .controls {
269
+ display: flex;
270
+ gap: 15px;
271
+ flex-wrap: wrap;
272
+ margin-top: 20px;
273
+ }
274
+
275
+ .btn {
276
+ padding: 12px 25px;
277
+ border-radius: var(--border-radius);
278
+ border: none;
279
+ font-weight: 600;
280
+ cursor: pointer;
281
+ transition: var(--transition);
282
+ }
283
+
284
+ .btn-primary {
285
+ background: var(--primary-color);
286
+ color: white;
287
+ }
288
+
289
+ .btn-secondary {
290
+ background: rgba(255, 255, 255, 0.1);
291
+ color: white;
292
+ border: 1px solid rgba(255, 255, 255, 0.2);
293
+ }
294
+
295
+ .btn:hover {
296
+ transform: translateY(-2px);
297
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
298
+ }
299
+
300
+ /* Responsive Design */
301
+ @media (max-width: 1200px) {
302
+ .chart-container {
303
+ grid-column: span 1;
304
+ }
305
+ }
306
+
307
+ @media (max-width: 768px) {
308
+ .header h1 {
309
+ font-size: 2em;
310
+ }
311
+
312
+ .dashboard-grid {
313
+ grid-template-columns: 1fr;
314
+ }
315
+
316
+ .stat-value {
317
+ font-size: 2.5em;
318
+ }
319
+ }
320
+
321
+ @media (max-width: 480px) {
322
+ .container {
323
+ padding: 10px;
324
+ }
325
+
326
+ .header {
327
+ padding: 20px;
328
+ }
329
+ }
330
+ </style>
331
+ </head>
332
+ <body>
333
+ <div class="container">
334
+ <div class="header">
335
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
336
+ <i class="fas fa-code"></i> Built with anycoder
337
+ </a>
338
+ <h1><i class="fas fa-robot"></i> SEGRETERIA TELEFONICA AI AVANZATA</h1>
339
+ <p>SISTEMA ENTERPRISE - Versione: 4.0 Professional Plus</p>
340
+ </div>
341
+
342
+ <div class="tabs">
343
+ <div class="tab active">Dashboard</div>
344
+ <div class="tab">Chiamate</div>
345
+ <div class="tab">Voicemail</div>
346
+ <div class="tab">Clienti</div>
347
+ <div class="tab">Appuntamenti</div>
348
+ <div class="tab">Report</div>
349
+ <div class="tab">Configurazione</div>
350
+ </div>
351
+
352
+ <div class="dashboard-grid">
353
+ <!-- Statistiche Chiamate -->
354
+ <div class="card stat-card">
355
+ <div class="icon">
356
+ <i class="fas fa-phone"></i>
357
+ </div>
358
+ <div class="stat-value" id="totalCalls">0</div>
359
+ <div class="stat-label">Chiamate Oggi</div>
360
+ </div>
361
+
362
+ <!-- Voicemail in Attesa -->
363
+ <div class="card stat-card">
364
+ <div class="icon">
365
+ <i class="fas fa-voicemail"></i>
366
+ </div>
367
+ <div class="stat-value" id="pendingVoicemail">0</div>
368
+ <div class="stat-label">Voicemail in Attesa</div>
369
+ </div>
370
+
371
+ <!-- Appuntamenti Oggi -->
372
+ <div class="card stat-card">
373
+ <div class="icon">
374
+ <i class="fas fa-calendar"></i>
375
+ </div>
376
+ <div class="stat-value" id="todayAppointments">0</div>
377
+ <div class="stat-label">Appuntamenti Oggi</div>
378
+ </div>
379
+
380
+ <!-- Soddisfazione Media -->
381
+ <div class="card stat-card">
382
+ <div class="icon">
383
+ <i class="fas fa-chart-line"></i>
384
+ </div>
385
+ <div class="stat-value" id="satisfactionRate">0%</div>
386
+ <div class="stat-label">Soddisfazione Media</div>
387
+ </div>
388
+
389
+ <!-- Grafico Chiamate -->
390
+ <div class="card chart-container">
391
+ <h3><i class="fas fa-chart-bar"></i> Andamento Chiamate (Ultimi 7 giorni)</h3>
392
+ <canvas id="chiamateChart" width="400" height="200"></canvas>
393
+ </div>
394
+
395
+ <!-- Distribuzione Tipologia -->
396
+ <div class="card chart-container">
397
+ <h3><i class="fas fa-chart-pie"></i> Distribuzione Tipologia Chiamate</h3>
398
+ <canvas id="tipologiaChart" width="400" height="200"></canvas>
399
+ </div>
400
+
401
+ <!-- Feed Attività in Tempo Reale -->
402
+ <div class="card activity-feed">
403
+ <h3><i class="fas fa-bolt"></i> Attività in Tempo Reale</h3>
404
+ <div id="activityFeed">
405
+ <div class="activity-item">
406
+ <div class="activity-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger-color);">
407
+ <i class="fas fa-exclamation-triangle"></i>
408
+ </div>
409
+ <div class="activity-content">
410
+ <div>Chiamata VIP in entrata</div>
411
+ <div class="activity-time">2 minuti fa</div>
412
+ </div>
413
+ <span class="priority-badge priority-urgent">URGENTE</span>
414
+ </div>
415
+ <div class="activity-item">
416
+ <div class="activity-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning-color);">
417
+ <i class="fas fa-phone-volume"></i>
418
+ </div>
419
+ <div class="activity-content">
420
+ <div>Nuova voicemail ricevuta</div>
421
+ <div class="activity-time">5 minuti fa</div>
422
+ </div>
423
+ <span class="priority-badge priority-high">ALTA</span>
424
+ </div>
425
+ <div class="activity-item">
426
+ <div class="activity-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success-color);">
427
+ <i class="fas fa-envelope"></i>
428
+ </div>
429
+ <div class="activity-content">
430
+ <div>Appuntamento confermato</div>
431
+ <div class="activity-time">10 minuti fa</div>
432
+ </div>
433
+ <span class="priority-badge priority-medium">MEDIA</span>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Ultime Chiamate -->
441
+ <div class="card">
442
+ <h3><i class="fas fa-history"></i> Ultime Chiamate</h3>
443
+ <div class="table-container">
444
+ <table>
445
+ <thead>
446
+ <tr>
447
+ <th>Ora</th>
448
+ <th>Cliente</th>
449
+ <th>Stato</th>
450
+ <th>Priorità</th>
451
+ </tr>
452
+ </thead>
453
+ <tbody id="recentCalls">
454
+ <tr>
455
+ <td>14:30</td>
456
+ <td>Mario Rossi</td>
457
+ <td>Completata</td>
458
+ <td><span class="priority-badge priority-low">BASSA</span></td>
459
+ </tr>
460
+ <tr>
461
+ <td>14:15</td>
462
+ <td>+39 012 345 6789</td>
463
+ <td>In Corso</td>
464
+ <td><span class="priority-badge priority-medium">MEDIA</span></td>
465
+ </tr>
466
+ </tbody>
467
+ </table>
468
+ </div>
469
+ </div>
470
+
471
+ <!-- Voicemail Urgenti -->
472
+ <div class="card">
473
+ <h3><i class="fas fa-inbox"></i> Voicemail Urgenti</h3>
474
+ <div class="table-container">
475
+ <table>
476
+ <thead>
477
+ <tr>
478
+ <th>Data</th>
479
+ <th>Da</th>
480
+ <th>Priorità</th>
481
+ </tr>
482
+ </thead>
483
+ <tbody id="urgentVoicemail">
484
+ <tr>
485
+ <td>14:25</td>
486
+ <td>Giulia Bianchi</td>
487
+ <td><span class="priority-badge priority-urgent">URGENTE</span></td>
488
+ </tr>
489
+ </tbody>
490
+ </table>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="controls">
496
+ <button class="btn btn-primary" id="simulateCall">
497
+ <i class="fas fa-phone"></i> Simula Chiamata
498
+ </button>
499
+ <button class="btn btn-secondary" id="manageVoicemail">
500
+ <i class="fas fa-voicemail"></i> Gestisci Voicemail
501
+ </button>
502
+ <button class="btn btn-secondary" id="viewReports">
503
+ <i class="fas fa-chart-pie"></i> Report e Statistiche
504
+ </button>
505
+ <button class="btn btn-secondary" id="backupSystem">
506
+ <i class="fas fa-database"></i> Backup Sistema
507
+ </button>
508
+ </div>
509
+ </div>
510
+
511
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
512
+ <script>
513
+ // Inizializzazione dashboard
514
+ document.addEventListener('DOMContentLoaded', function() {
515
+ // Inizializza grafici
516
+ initCharts();
517
+
518
+ // Simula dati in tempo reale
519
+ simulateRealTimeData();
520
+
521
+ // Gestione tabs
522
+ setupTabs();
523
+
524
+ // Gestione pulsanti
525
+ setupButtons();
526
+
527
+ // Aggiornamento dati in tempo reale
528
+ setInterval(updateDashboard, 5000);
529
+ });
530
+
531
+ function initCharts() {
532
+ // Grafico andamento chiamate
533
+ const chiamateCtx = document.getElementById('chiamateChart').getContext('2d');
534
+ new Chart(chiamateCtx, {
535
+ type: 'line',
536
+ data: {
537
+ labels: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'],
538
+ datasets: [{
539
+ label: 'Chiamate Giornaliere',
540
+ data: [45, 52, 38, 60, 55, 30, 25],
541
+ borderColor: '#60a5fa',
542
+ backgroundColor: 'rgba(96, 165, 250, 0.1),
543
+ tension: 0.4,
544
+ fill: true
545
+ }]
546
+ },
547
+ options: {
548
+ responsive: true,
549
+ maintainAspectRatio: false,
550
+ plugins: {
551
+ legend: {
552
+ display: true
553
+ }
554
+ }
555
+ }
556
+ });
557
+
558
+ // Grafico distribuzione tipologia
559
+ const tipologiaCtx = document.getElementById('tipologiaChart').getContext('2d');
560
+ new Chart(tipologiaCtx, {
561
+ type: 'doughnut',
562
+ data: {
563
+ labels: ['Informazioni', 'Appuntamenti', 'Supporto', 'Reclami', 'Altro'],
564
+ datasets: [{
565
+ data: [30, 25, 20, 15, 10],
566
+ backgroundColor: [
567
+ '#60a5fa',
568
+ '#8b5cf6',
569
+ '#f59e0b',
570
+ '#ef4444',
571
+ '#64748b'
572
+ ],
573
+ borderWidth: 2,
574
+ borderColor: 'rgba(255, 255, 255, 0.8)',
575
+ borderColor: [
576
+ '#60a5fa',
577
+ '#8b5cf6',
578
+ '#f59e0b',
579
+ '#ef4444',
580
+ '#64748b'
581
+ }]
582
+ },
583
+ options: {
584
+ responsive: true,
585
+ maintainAspectRatio: false,
586
+ plugins: {
587
+ legend: {
588
+ position: 'right'
589
+ }
590
+ }
591
+ }
592
+ });
593
+ }
594
+
595
+ function simulateRealTimeData() {
596
+ // Dati simulati per dashboard
597
+ const stats = {
598
+ totalCalls: 42,
599
+ pendingVoicemail: 8,
600
+ todayAppointments: 15,
601
+ satisfactionRate: 87
602
+ };
603
+
604
+ updateDisplay(stats);
605
+ }
606
+
607
+ function updateDisplay(stats) {
608
+ document.getElementById('totalCalls').textContent = stats.totalCalls;
609
+ document.getElementById('pendingVoicemail').textContent = stats.pendingVoicemail;
610
+ document.getElementById('todayAppointments').textContent = stats.todayAppointments;
611
+ document.getElementById('satisfactionRate').textContent = stats.satisfactionRate + '%';
612
+ }
613
+
614
+ function updateDashboard() {
615
+ // Simula aggiornamento dati
616
+ const randomChange = Math.floor(Math.random() * 5) - 2;
617
+
618
+ const currentCalls = parseInt(document.getElementById('totalCalls').textContent);
619
+ const newCalls = Math.max(0, currentCalls + randomChange);
620
+
621
+ const currentVoicemail = parseInt(document.getElementById('pendingVoicemail').textContent);
622
+ const newVoicemail = Math.max(0, currentVoicemail + randomChange);
623
+
624
+ document.getElementById('totalCalls').textContent = newCalls;
625
+ document.getElementById('pendingVoicemail').textContent = newVoicemail;
626
+
627
+ // Aggiungi nuova attività al feed
628
+ addNewActivity();
629
+ }
630
+
631
+ function addNewActivity() {
632
+ const activities = [
633
+ { type: 'call', text: 'Nuova chiamata in entrata', priority: 'medium' },
634
+ { type: 'voicemail', text: 'Voicemail processata', priority: 'low' },
635
+ { type: 'appointment', text: 'Appuntamento modificato', priority: 'medium' },
636
+ { type: 'task', text: 'Task completato', priority: 'low' }
637
+ ];
638
+
639
+ const activity = activities[Math.floor(Math.random() * activities.length)];
640
+
641
+ const activityFeed = document.getElementById('activityFeed');
642
+ const newActivity = document.createElement('div');
643
+ newActivity.className = 'activity-item';
644
+ newActivity.innerHTML = `
645
+ <div class="activity-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--secondary-color);">
646
+ <i class="fas fa-phone"></i>
647
+ </div>
648
+ <div class="activity-content">
649
+ <div>${activity.text}</div>
650
+ <div class="activity-time">Ora</div>
651
+ </div>
652
+ <span class="priority-badge priority-${activity.priority}">${activity.priority.toUpperCase()}</span>
653
+ `;
654
+
655
+ activityFeed.insertBefore(newActivity, activityFeed.firstChild);
656
+
657
+ // Mantieni solo ultime 10 attività
658
+ while (activityFeed.children.length > 10) {
659
+ activityFeed.removeChild(activityFeed.lastChild);
660
+ }
661
+ }
662
+
663
+ function setupTabs() {
664
+ const tabs = document.querySelectorAll('.tab');
665
+ tabs.forEach(tab => {
666
+ tab.addEventListener('click', function() {
667
+ tabs.forEach(t => t.classList.remove('active'));
668
+ this.classList.add('active'));
669
+ });
670
+ });
671
+ }
672
+
673
+ function setupButtons() {
674
+ // Simula chiamata
675
+ document.getElementById('simulateCall').addEventListener('click', function() {
676
+ simulateIncomingCall();
677
+ });
678
+
679
+ // Gestisci voicemail
680
+ document.getElementById('manageVoicemail').addEventListener('click', function() {
681
+ alert('Gestione voicemail avviata. Verrebbero visualizzati tutti i messaggi in attesa.');
682
+ });
683
+
684
+ // Visualizza report
685
+ document.getElementById('viewReports').addEventListener('click', function() {
686
+ alert('Generazione report avanzati...');
687
+ });
688
+
689
+ // Backup sistema
690
+ document.getElementById('backupSystem').addEventListener('click', function() {
691
+ alert('Backup del sistema creato con successo.');
692
+ });
693
+ }
694
+
695
+ function simulateIncomingCall() {
696
+ const numbers = ['+39 012 3456789', '+39 345 6789012', '+39 678 9012345'];
697
+ const names = ['Mario Rossi', 'Luigi Verdi', 'Giulia Bianchi'];
698
+
699
+ const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];
700
+ const randomName = names[Math.floor(Math.random() * names.length)];
701
+
702
+ // Aggiungi chiamata alla lista recenti
703
+ const recentCalls = document.getElementById('recentCalls');
704
+ const newRow = document.createElement('tr');
705
+ newRow.innerHTML = `
706
+ <td>${new Date().toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit'})</td>
707
+ <td>${randomName}</td>
708
+ <td>In Corso</td>
709
+ <td><span class="priority-badge priority-medium">MEDIA</span></td>
710
+ `;
711
+ recentCalls.appendChild(newRow);
712
+
713
+ // Aggiorna contatore
714
+ const currentCalls = parseInt(document.getElementById('totalCalls').textContent);
715
+ document.getElementById('totalCalls').textContent = currentCalls + 1;
716
+
717
+ // Notifica chiamata VIP (20% probabilità)
718
+ if (Math.random() < 0.2) {
719
+ const activityFeed = document.getElementById('activityFeed');
720
+ const newActivity = document.createElement('div');
721
+ newActivity.className = 'activity-item';
722
+ newActivity.innerHTML = `
723
+ <div class="activity-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning-color);">
724
+ <i class="fas fa-crown"></i>
725
+ </div>
726
+ <div class="activity-content">
727
+ <div>Chiamata VIP in entrata</div>
728
+ <div class="activity-time">Ora</div>
729
+ </div>
730
+ <span class="priority-badge priority-urgent">VIP</span>
731
+ </div>
732
+ `;
733
+ activityFeed.insertBefore(newActivity, activityFeed.firstChild);
734
+ }
735
+ </script>
736
+ </body>
737
+ </html>