Hugging Face's logo

Spaces:
crsmithdev
/
anycoder-659c1d28
Running

App Files Community
crsmithdev commited on
Commit
774587e
·
verified ·
1 Parent(s): 7794d87

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +733 -19
index.html CHANGED
@@ -1,19 +1,733 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Analytics Dashboard</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ :root {
11
+ --primary-color: #4361ee;
12
+ --primary-hover: #3a56d4;
13
+ --secondary-color: #3f37c9;
14
+ --accent-color: #4cc9f0;
15
+ --success-color: #4bb543;
16
+ --warning-color: #f8961e;
17
+ --danger-color: #f94144;
18
+ --light-color: #f8f9fa;
19
+ --dark-color: #212529;
20
+ --border-color: #dee2e6;
21
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
+ }
31
+
32
+ body {
33
+ background-color: #f5f7fa;
34
+ color: var(--dark-color);
35
+ line-height: 1.6;
36
+ }
37
+
38
+ .dashboard {
39
+ display: grid;
40
+ grid-template-columns: 250px 1fr;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ /* Sidebar */
45
+ .sidebar {
46
+ background-color: white;
47
+ box-shadow: var(--shadow);
48
+ padding: 1.5rem;
49
+ position: sticky;
50
+ top: 0;
51
+ height: 100vh;
52
+ overflow-y: auto;
53
+ }
54
+
55
+ .sidebar-header {
56
+ display: flex;
57
+ align-items: center;
58
+ margin-bottom: 2rem;
59
+ padding-bottom: 1rem;
60
+ border-bottom: 1px solid var(--border-color);
61
+ }
62
+
63
+ .sidebar-header h2 {
64
+ font-size: 1.2rem;
65
+ font-weight: 600;
66
+ margin-left: 0.5rem;
67
+ }
68
+
69
+ .sidebar-menu {
70
+ list-style: none;
71
+ }
72
+
73
+ .sidebar-menu li {
74
+ margin-bottom: 0.5rem;
75
+ }
76
+
77
+ .sidebar-menu a {
78
+ display: flex;
79
+ align-items: center;
80
+ padding: 0.75rem 1rem;
81
+ color: var(--dark-color);
82
+ text-decoration: none;
83
+ border-radius: 0.5rem;
84
+ transition: all 0.3s ease;
85
+ }
86
+
87
+ .sidebar-menu a:hover, .sidebar-menu a.active {
88
+ background-color: var(--primary-color);
89
+ color: white;
90
+ }
91
+
92
+ .sidebar-menu i {
93
+ margin-right: 0.75rem;
94
+ width: 18px;
95
+ }
96
+
97
+ /* Main Content */
98
+ .main-content {
99
+ padding: 1.5rem;
100
+ }
101
+
102
+ .header {
103
+ display: flex;
104
+ justify-content: space-between;
105
+ align-items: center;
106
+ margin-bottom: 1.5rem;
107
+ }
108
+
109
+ .header h1 {
110
+ font-size: 1.5rem;
111
+ font-weight: 600;
112
+ }
113
+
114
+ .header-actions {
115
+ display: flex;
116
+ align-items: center;
117
+ gap: 1rem;
118
+ }
119
+
120
+ .btn {
121
+ padding: 0.5rem 1rem;
122
+ border: none;
123
+ border-radius: 0.5rem;
124
+ cursor: pointer;
125
+ font-weight: 500;
126
+ transition: all 0.3s ease;
127
+ }
128
+
129
+ .btn-primary {
130
+ background-color: var(--primary-color);
131
+ color: white;
132
+ }
133
+
134
+ .btn-primary:hover {
135
+ background-color: var(--primary-hover);
136
+ }
137
+
138
+ .btn-secondary {
139
+ background-color: var(--light-color);
140
+ color: var(--dark-color);
141
+ }
142
+
143
+ .btn-secondary:hover {
144
+ background-color: var(--border-color);
145
+ }
146
+
147
+ /* Cards */
148
+ .cards {
149
+ display: grid;
150
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
151
+ gap: 1.5rem;
152
+ margin-bottom: 1.5rem;
153
+ }
154
+
155
+ .card {
156
+ background-color: white;
157
+ border-radius: 0.75rem;
158
+ padding: 1.5rem;
159
+ box-shadow: var(--shadow);
160
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
161
+ }
162
+
163
+ .card:hover {
164
+ transform: translateY(-5px);
165
+ box-shadow: var(--shadow-lg);
166
+ }
167
+
168
+ .card-header {
169
+ display: flex;
170
+ justify-content: space-between;
171
+ align-items: center;
172
+ margin-bottom: 1rem;
173
+ }
174
+
175
+ .card-title {
176
+ font-size: 0.9rem;
177
+ color: #6c757d;
178
+ text-transform: uppercase;
179
+ font-weight: 600;
180
+ letter-spacing: 0.5px;
181
+ }
182
+
183
+ .card-value {
184
+ font-size: 2rem;
185
+ font-weight: 700;
186
+ margin-bottom: 0.5rem;
187
+ }
188
+
189
+ .card-change {
190
+ display: flex;
191
+ align-items: center;
192
+ font-size: 0.875rem;
193
+ }
194
+
195
+ .card-change.positive {
196
+ color: var(--success-color);
197
+ }
198
+
199
+ .card-change.negative {
200
+ color: var(--danger-color);
201
+ }
202
+
203
+ .card-change i {
204
+ margin-right: 0.25rem;
205
+ }
206
+
207
+ /* Charts */
208
+ .charts {
209
+ display: grid;
210
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
211
+ gap: 1.5rem;
212
+ margin-bottom: 1.5rem;
213
+ }
214
+
215
+ .chart-container {
216
+ background-color: white;
217
+ border-radius: 0.75rem;
218
+ padding: 1.5rem;
219
+ box-shadow: var(--shadow);
220
+ }
221
+
222
+ .chart-header {
223
+ display: flex;
224
+ justify-content: space-between;
225
+ align-items: center;
226
+ margin-bottom: 1.5rem;
227
+ }
228
+
229
+ .chart-title {
230
+ font-size: 1.1rem;
231
+ font-weight: 600;
232
+ }
233
+
234
+ .chart-selector {
235
+ display: flex;
236
+ gap: 0.5rem;
237
+ }
238
+
239
+ .chart-selector button {
240
+ padding: 0.25rem 0.75rem;
241
+ border: 1px solid var(--border-color);
242
+ background-color: white;
243
+ border-radius: 0.5rem;
244
+ cursor: pointer;
245
+ font-size: 0.875rem;
246
+ }
247
+
248
+ .chart-selector button.active {
249
+ background-color: var(--primary-color);
250
+ color: white;
251
+ border-color: var(--primary-color);
252
+ }
253
+
254
+ /* Tables */
255
+ .table-container {
256
+ background-color: white;
257
+ border-radius: 0.75rem;
258
+ padding: 1.5rem;
259
+ box-shadow: var(--shadow);
260
+ overflow-x: auto;
261
+ }
262
+
263
+ .table {
264
+ width: 100%;
265
+ border-collapse: collapse;
266
+ }
267
+
268
+ .table thead {
269
+ background-color: var(--light-color);
270
+ }
271
+
272
+ .table th, .table td {
273
+ padding: 1rem;
274
+ text-align: left;
275
+ border-bottom: 1px solid var(--border-color);
276
+ }
277
+
278
+ .table th {
279
+ font-weight: 600;
280
+ color: var(--dark-color);
281
+ }
282
+
283
+ .table tr:hover {
284
+ background-color: var(--light-color);
285
+ }
286
+
287
+ /* Responsive */
288
+ @media (max-width: 768px) {
289
+ .dashboard {
290
+ grid-template-columns: 1fr;
291
+ }
292
+
293
+ .sidebar {
294
+ position: fixed;
295
+ top: 0;
296
+ left: -100%;
297
+ width: 250px;
298
+ height: 100vh;
299
+ z-index: 1000;
300
+ transition: left 0.3s ease;
301
+ }
302
+
303
+ .sidebar.active {
304
+ left: 0;
305
+ }
306
+
307
+ .main-content {
308
+ padding: 1rem;
309
+ }
310
+
311
+ .header {
312
+ flex-direction: column;
313
+ align-items: flex-start;
314
+ gap: 1rem;
315
+ }
316
+
317
+ .header-actions {
318
+ width: 100%;
319
+ justify-content: space-between;
320
+ }
321
+
322
+ .cards {
323
+ grid-template-columns: 1fr;
324
+ }
325
+
326
+ .charts {
327
+ grid-template-columns: 1fr;
328
+ }
329
+ }
330
+
331
+ /* Built with anycoder */
332
+ .anycoder-link {
333
+ position: fixed;
334
+ bottom: 1rem;
335
+ right: 1rem;
336
+ background-color: var(--primary-color);
337
+ color: white;
338
+ padding: 0.5rem 1rem;
339
+ border-radius: 0.5rem;
340
+ text-decoration: none;
341
+ font-size: 0.875rem;
342
+ box-shadow: var(--shadow);
343
+ z-index: 100;
344
+ }
345
+
346
+ .anycoder-link:hover {
347
+ background-color: var(--primary-hover);
348
+ }
349
+ </style>
350
+ </head>
351
+ <body>
352
+ <div class="dashboard">
353
+ <!-- Sidebar -->
354
+ <aside class="sidebar">
355
+ <div class="sidebar-header">
356
+ <i data-feather="bar-chart-2"></i>
357
+ <h2>Analytics</h2>
358
+ </div>
359
+ <ul class="sidebar-menu">
360
+ <li><a href="#" class="active"><i data-feather="home"></i>Dashboard</a></li>
361
+ <li><a href="#"><i data-feather="trending-up"></i>Overview</a></li>
362
+ <li><a href="#"><i data-feather="activity"></i>Reports</a></li>
363
+ <li><a href="#"><i data-feather="users"></i>Users</a></li>
364
+ <li><a href="#"><i data-feather="settings"></i>Settings</a></li>
365
+ </ul>
366
+ </aside>
367
+
368
+ <!-- Main Content -->
369
+ <main class="main-content">
370
+ <header class="header">
371
+ <h1>Analytics Dashboard</h1>
372
+ <div class="header-actions">
373
+ <button class="btn btn-secondary">Export</button>
374
+ <button class="btn btn-primary">Generate Report</button>
375
+ </div>
376
+ </header>
377
+
378
+ <!-- Cards -->
379
+ <div class="cards">
380
+ <div class="card">
381
+ <div class="card-header">
382
+ <span class="card-title">Total Revenue</span>
383
+ <i data-feather="dollar-sign" style="color: var(--primary-color);"></i>
384
+ </div>
385
+ <div class="card-value">$124,567</div>
386
+ <div class="card-change positive">
387
+ <i data-feather="trending-up"></i>
388
+ <span>12.5% vs last month</span>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="card">
393
+ <div class="card-header">
394
+ <span class="card-title">Active Users</span>
395
+ <i data-feather="users" style="color: var(--success-color);"></i>
396
+ </div>
397
+ <div class="card-value">1,245</div>
398
+ <div class="card-change positive">
399
+ <i data-feather="trending-up"></i>
400
+ <span>8.2% vs last month</span>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="card">
405
+ <div class="card-header">
406
+ <span class="card-title">Conversion Rate</span>
407
+ <i data-feather="percent" style="color: var(--warning-color);"></i>
408
+ </div>
409
+ <div class="card-value">3.2%</div>
410
+ <div class="card-change negative">
411
+ <i data-feather="trending-down"></i>
412
+ <span>1.8% vs last month</span>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="card">
417
+ <div class="card-header">
418
+ <span class="card-title">Bounce Rate</span>
419
+ <i data-feather="arrow-down-circle" style="color: var(--danger-color);"></i>
420
+ </div>
421
+ <div class="card-value">24.5%</div>
422
+ <div class="card-change negative">
423
+ <i data-feather="trending-down"></i>
424
+ <span>3.1% vs last month</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Charts -->
430
+ <div class="charts">
431
+ <div class="chart-container">
432
+ <div class="chart-header">
433
+ <h3 class="chart-title">Revenue Overview</h3>
434
+ <div class="chart-selector">
435
+ <button class="active" data-chart="monthly">Monthly</button>
436
+ <button data-chart="quarterly">Quarterly</button>
437
+ <button data-chart="yearly">Yearly</button>
438
+ </div>
439
+ </div>
440
+ <canvas id="revenueChart"></canvas>
441
+ </div>
442
+
443
+ <div class="chart-container">
444
+ <div class="chart-header">
445
+ <h3 class="chart-title">User Activity</h3>
446
+ <div class="chart-selector">
447
+ <button class="active" data-chart="weekly">Weekly</button>
448
+ <button data-chart="monthly">Monthly</button>
449
+ </div>
450
+ </div>
451
+ <canvas id="activityChart"></canvas>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Data Table -->
456
+ <div class="table-container">
457
+ <h3 class="chart-title" style="margin-bottom: 1.5rem;">Recent Transactions</h3>
458
+ <table class="table">
459
+ <thead>
460
+ <tr>
461
+ <th>ID</th>
462
+ <th>Customer</th>
463
+ <th>Amount</th>
464
+ <th>Status</th>
465
+ <th>Date</th>
466
+ </tr>
467
+ </thead>
468
+ <tbody id="transactionsTable">
469
+ <!-- Table content will be generated by JavaScript -->
470
+ </tbody>
471
+ </table>
472
+ </div>
473
+ </main>
474
+ </div>
475
+
476
+ <!-- Built with anycoder link -->
477
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
478
+ Built with anycoder
479
+ </a>
480
+
481
+ <script>
482
+ // Initialize Feather Icons
483
+ feather.replace();
484
+
485
+ // Chart.js configuration
486
+ const chartColors = {
487
+ primary: '#4361ee',
488
+ secondary: '#3f37c9',
489
+ accent: '#4cc9f0',
490
+ success: '#4bb543',
491
+ warning: '#f8961e',
492
+ danger: '#f94144'
493
+ };
494
+
495
+ // Revenue Chart
496
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
497
+ const revenueChart = new Chart(revenueCtx, {
498
+ type: 'line',
499
+ data: {
500
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
501
+ datasets: [{
502
+ label: 'Revenue',
503
+ data: [12000, 15000, 18000, 22000, 25000, 28000, 32000, 35000, 38000, 42000, 45000, 48000],
504
+ backgroundColor: 'rgba(67, 97, 238, 0.1)',
505
+ borderColor: chartColors.primary,
506
+ borderWidth: 2,
507
+ tension: 0.4,
508
+ fill: true
509
+ }]
510
+ },
511
+ options: {
512
+ responsive: true,
513
+ maintainAspectRatio: true,
514
+ plugins: {
515
+ legend: {
516
+ display: false
517
+ }
518
+ },
519
+ scales: {
520
+ y: {
521
+ beginAtZero: true,
522
+ ticks: {
523
+ callback: function(value) {
524
+ return '$' + value.toLocaleString();
525
+ }
526
+ }
527
+ }
528
+ }
529
+ }
530
+ });
531
+
532
+ // Activity Chart
533
+ const activityCtx = document.getElementById('activityChart').getContext('2d');
534
+ const activityChart = new Chart(activityCtx, {
535
+ type: 'bar',
536
+ data: {
537
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
538
+ datasets: [{
539
+ label: 'Active Users',
540
+ data: [120, 190, 150, 220, 180, 250, 200],
541
+ backgroundColor: chartColors.success,
542
+ borderRadius: 5
543
+ }, {
544
+ label: 'New Users',
545
+ data: [30, 45, 35, 50, 40, 60, 50],
546
+ backgroundColor: chartColors.accent,
547
+ borderRadius: 5
548
+ }]
549
+ },
550
+ options: {
551
+ responsive: true,
552
+ maintainAspectRatio: true,
553
+ plugins: {
554
+ legend: {
555
+ position: 'top',
556
+ align: 'end'
557
+ }
558
+ },
559
+ scales: {
560
+ y: {
561
+ beginAtZero: true
562
+ }
563
+ }
564
+ }
565
+ });
566
+
567
+ // Chart selector functionality
568
+ document.querySelectorAll('.chart-selector button').forEach(button => {
569
+ button.addEventListener('click', function() {
570
+ // Remove active class from all buttons in the same selector
571
+ this.parentElement.querySelectorAll('button').forEach(btn => {
572
+ btn.classList.remove('active');
573
+ });
574
+
575
+ // Add active class to clicked button
576
+ this.classList.add('active');
577
+
578
+ // Update chart data based on selection
579
+ const chartType = this.dataset.chart;
580
+ if (this.closest('.chart-container').querySelector('#revenueChart')) {
581
+ updateRevenueChart(chartType);
582
+ } else if (this.closest('.chart-container').querySelector('#activityChart')) {
583
+ updateActivityChart(chartType);
584
+ }
585
+ });
586
+ });
587
+
588
+ function updateRevenueChart(period) {
589
+ let labels = [];
590
+ let data = [];
591
+
592
+ switch(period) {
593
+ case 'monthly':
594
+ labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
595
+ data = [12000, 15000, 18000, 22000, 25000, 28000, 32000, 35000, 38000, 42000, 45000, 48000];
596
+ break;
597
+ case 'quarterly':
598
+ labels = ['Q1', 'Q2', 'Q3', 'Q4'];
599
+ data = [45000, 85000, 115000, 135000];
600
+ break;
601
+ case 'yearly':
602
+ labels = ['2020', '2021', '2022', '2023'];
603
+ data = [300000, 450000, 600000, 750000];
604
+ break;
605
+ }
606
+
607
+ revenueChart.data.labels = labels;
608
+ revenueChart.data.datasets[0].data = data;
609
+ revenueChart.update();
610
+ }
611
+
612
+ function updateActivityChart(period) {
613
+ let labels = [];
614
+ let activeUsers = [];
615
+ let newUsers = [];
616
+
617
+ switch(period) {
618
+ case 'weekly':
619
+ labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
620
+ activeUsers = [120, 190, 150, 220, 180, 250, 200];
621
+ newUsers = [30, 45, 35, 50, 40, 60, 50];
622
+ break;
623
+ case 'monthly':
624
+ labels = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
625
+ activeUsers = [800, 950, 1100, 1200];
626
+ newUsers = [150, 180, 200, 220];
627
+ break;
628
+ }
629
+
630
+ activityChart.data.labels = labels;
631
+ activityChart.data.datasets[0].data = activeUsers;
632
+ activityChart.data.datasets[1].data = newUsers;
633
+ activityChart.update();
634
+ }
635
+
636
+ // Generate table data
637
+ function generateTransactions() {
638
+ const transactions = [
639
+ { id: '#1001', customer: 'John Doe', amount: 125.50, status: 'completed', date: '2023-05-15' },
640
+ { id: '#1002', customer: 'Jane Smith', amount: 89.99, status: 'pending', date: '2023-05-14' },
641
+ { id: '#1003', customer: 'Robert Johnson', amount: 245.75, status: 'completed', date: '2023-05-13' },
642
+ { id: '#1004', customer: 'Emily Davis', amount: 67.20, status: 'failed', date: '2023-05-12' },
643
+ { id: '#1005', customer: 'Michael Brown', amount: 180.00, status: 'completed', date: '2023-05-11' },
644
+ { id: '#1006', customer: 'Sarah Wilson', amount: 95.40, status: 'pending', date: '2023-05-10' },
645
+ { id: '#1007', customer: 'David Taylor', amount: 320.80, status: 'completed', date: '2023-05-09' },
646
+ { id: '#1008', customer: 'Jessica Anderson', amount: 55.25, status: 'completed', date: '2023-05-08' }
647
+ ];
648
+
649
+ const tableBody = document.getElementById('transactionsTable');
650
+ tableBody.innerHTML = '';
651
+
652
+ transactions.forEach(transaction => {
653
+ const row = document.createElement('tr');
654
+
655
+ const statusClass = {
656
+ 'completed': 'success',
657
+ 'pending': 'warning',
658
+ 'failed': 'danger'
659
+ }[transaction.status];
660
+
661
+ row.innerHTML = `
662
+ <td>${transaction.id}</td>
663
+ <td>${transaction.customer}</td>
664
+ <td>$${transaction.amount.toFixed(2)}</td>
665
+ <td><span class="status-badge ${statusClass}">${transaction.status}</span></td>
666
+ <td>${transaction.date}</td>
667
+ `;
668
+
669
+ tableBody.appendChild(row);
670
+ });
671
+
672
+ // Add status badge styling
673
+ const style = document.createElement('style');
674
+ style.textContent = `
675
+ .status-badge {
676
+ padding: 0.25rem 0.5rem;
677
+ border-radius: 0.25rem;
678
+ font-size: 0.875rem;
679
+ font-weight: 500;
680
+ }
681
+ .status-badge.success {
682
+ background-color: rgba(75, 181, 67, 0.1);
683
+ color: ${chartColors.success};
684
+ }
685
+ .status-badge.warning {
686
+ background-color: rgba(248, 150, 30, 0.1);
687
+ color: ${chartColors.warning};
688
+ }
689
+ .status-badge.danger {
690
+ background-color: rgba(249, 65, 68, 0.1);
691
+ color: ${chartColors.danger};
692
+ }
693
+ `;
694
+ document.head.appendChild(style);
695
+ }
696
+
697
+ // Initialize the dashboard
698
+ document.addEventListener('DOMContentLoaded', function() {
699
+ generateTransactions();
700
+ });
701
+
702
+ // Mobile menu toggle (for responsive design)
703
+ const mobileMenuToggle = document.createElement('button');
704
+ mobileMenuToggle.className = 'btn btn-primary mobile-menu-toggle';
705
+ mobileMenuToggle.innerHTML = '<i data-feather="menu"></i>';
706
+ mobileMenuToggle.addEventListener('click', function() {
707
+ document.querySelector('.sidebar').classList.toggle('active');
708
+ });
709
+
710
+ // Add mobile menu toggle to header for mobile devices
711
+ if (window.innerWidth <= 768) {
712
+ document.querySelector('.header').prepend(mobileMenuToggle);
713
+ feather.replace();
714
+ }
715
+
716
+ // Handle window resize
717
+ window.addEventListener('resize', function() {
718
+ if (window.innerWidth <= 768) {
719
+ if (!document.querySelector('.mobile-menu-toggle')) {
720
+ document.querySelector('.header').prepend(mobileMenuToggle);
721
+ feather.replace();
722
+ }
723
+ } else {
724
+ const toggle = document.querySelector('.mobile-menu-toggle');
725
+ if (toggle) {
726
+ toggle.remove();
727
+ }
728
+ document.querySelector('.sidebar').classList.remove('active');
729
+ }
730
+ });
731
+ </script>
732
+ </body>
733
+ </html>