Spaces:
Running
Running
File size: 5,481 Bytes
442f755 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html>
<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> |