Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard | NASKSOFT</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <custom-navbar></custom-navbar> | |
| <main class="dashboard"> | |
| <div class="container"> | |
| <div class="dashboard-header"> | |
| <h1>Sales Dashboard</h1> | |
| <div class="dashboard-actions"> | |
| <button class="btn btn-outline"><i class="fas fa-download"></i> Export</button> | |
| <button class="btn btn-primary"><i class="fas fa-share"></i> Share</button> | |
| </div> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-card wide"> | |
| <h3>Quarterly Revenue</h3> | |
| <div class="chart-container"> | |
| <canvas id="lineChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Sales by Region</h3> | |
| <div class="chart-container"> | |
| <canvas id="barChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Product Mix</h3> | |
| <div class="chart-container"> | |
| <canvas id="pieChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3>Top Customers</h3> | |
| <div class="data-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Customer</th> | |
| <th>Revenue</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Acme Corp</td> | |
| <td>$12,450</td> | |
| </tr> | |
| <tr> | |
| <td>Globex</td> | |
| <td>$9,870</td> | |
| </tr> | |
| <tr> | |
| <td>Initech</td> | |
| <td>$8,120</td> | |
| </tr> | |
| <tr> | |
| <td>Umbrella</td> | |
| <td>$7,650</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="dashboard-card wide"> | |
| <h3>Recent Transactions</h3> | |
| <div class="data-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Customer</th> | |
| <th>Product</th> | |
| <th>Amount</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>2023-06-15</td> | |
| <td>Acme Corp</td> | |
| <td>Pro Plan</td> | |
| <td>$1,200</td> | |
| <td><span class="status completed">Completed</span></td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-14</td> | |
| <td>Globex</td> | |
| <td>Basic Plan</td> | |
| <td>$450</td> | |
| <td><span class="status completed">Completed</span></td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-12</td> | |
| <td>Initech</td> | |
| <td>Enterprise Plan</td> | |
| <td>$2,800</td> | |
| <td><span class="status pending">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td>2023-06-10</td> | |
| <td>Umbrella</td> | |
| <td>Pro Plan</td> | |
| <td>$1,200</td> | |
| <td><span class="status completed">Completed</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |