Hugging Face's logo

Spaces:
malik-AI
/
email-checker
Running

App Files Community
malik-AI commited on
Commit
8d62231
·
verified ·
1 Parent(s): b0953ce

analtyze it: OrderDate Region Manager SalesMan Item Units Unit_price Sale_amt

Browse files

1/6/18 East Martha Alexander Television 95 1,198.00 113,810.00
1/23/18 Central Hermann Shelli Home Theater 50 500.00 25,000.00
2/9/18 Central Hermann Luis Television 36 1,198.00 43,128.00
2/26/18 Central Timothy David Cell Phone 27 225.00 6,075.00
3/15/18 West Timothy Stephen Television 56 1,198.00 67,088.00
4/1/18 East Martha Alexander Home Theater 60 500.00 30,000.00
4/18/18 Central Martha Steven Television 75 1,198.00 89,850.00
5/5/18 Central Hermann Luis Television 90 1,198.00 107,820.00
5/22/18 West Douglas Michael Television 32 1,198.00 38,336.00
6/8/18 East Martha Alexander Home Theater 60 500.00 30,000.00
6/25/18 Central Hermann Sigal Television 90 1,198.00 107,820.00
7/12/18 East Martha Diana Home Theater 29 500.00 14,500.00
7/29/18 East Douglas Karen Home Theater 81 500.00 40,500.00
8/15/18 East Martha Alexander Television 35 1,198.00 41,930.00
9/1/18 Central Douglas John Desk 2 125.00 250.00
9/18/18 East Martha Alexander Video Games 16 58.50 936.00
10/5/18 Central Hermann Sigal Home Theater 28 500.00 14,000.00
10/22/18 East Martha Alexander Cell Phone 64 225.00 14,400.00
11/8/18 East Douglas Karen Cell Phone 15 225.00 3,375.00
11/25/18 Central Hermann Shelli Video Games 96 58.50 5,616.00
12/12/18 Central Douglas John Television 67 1,198.00 80,266.00
12/29/18 East Douglas Karen Video Games 74 58.50 4,329.00
1/15/19 Central Timothy David Home Theater 46 500.00 23,000.00
2/1/19 Central Douglas John Home Theater 87 500.00 43,500.00
2/18/19 East Martha Alexander Home Theater 4 500.00 2,000.00
3/7/19 West Timothy Stephen Home Theater 7 500.00 3,500.00
3/24/19 Central Hermann Luis Video Games 50 58.50 2,925.00
4/10/19 Central Martha Steven Television 66 1,198.00 79,068.00
4/27/19 East Martha Diana Cell Phone 96 225.00 21,600.00
5/14/19 Central Timothy David Television 53 1,198.00 63,494.00
5/31/19 Central Timothy David Home Theater 80 500.00 40,000.00
6/17/19 Central Hermann Shelli Desk 5 125.00 625.00
7/4/19 East Martha Alexander Video Games 62 58.50 3,627.00
7/21/19 Central Hermann Sigal Video Games 55 58.50 3,217.50
8/7/19 Central Hermann Shelli Video Games 42 58.50 2,457.00
8/24/19 West Timothy Stephen Desk 3 125.00 375.00
9/10/19 Central Timothy David Television 7 1,198.00 8,386.00
9/27/19 West Timothy Stephen Cell Phone 76 225.00 17,100.00
10/14/19 West Douglas Michael Home Theater 57 500.00 28,500.00
10/31/19 Central Martha Steven Television 14 1,198.00 16,772.00
11/17/19 Central Hermann Luis Home Theater 11 500.00 5,500.00
12/4/19 Central Hermann Luis Home Theater 94 500.00 47,000.00
12/21/19 Central Martha Steven Home Theater 28 500.00 14,000.00

Files changed (3) hide show
  1. components/navbar.js +1 -0
  2. sales-dashboard.html +311 -0
  3. style.css +14 -1
components/navbar.js CHANGED
@@ -106,6 +106,7 @@ class CustomNavbar extends HTMLElement {
106
  <a href="/">Home</a>
107
  <a href="dashboard.html">Dashboard</a>
108
  <a href="property-dashboard.html">Property Data</a>
 
109
  <a href="upload.html">Upload Data</a>
110
  <a href="about.html">About</a>
111
  </div>
 
106
  <a href="/">Home</a>
107
  <a href="dashboard.html">Dashboard</a>
108
  <a href="property-dashboard.html">Property Data</a>
109
+ <a href="sales-dashboard.html">Sales Data</a>
110
  <a href="upload.html">Upload Data</a>
111
  <a href="about.html">About</a>
112
  </div>
sales-dashboard.html ADDED
@@ -0,0 +1,311 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sales Dashboard | NASKSOFT</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link rel="stylesheet" href="style.css">
9
+ </head>
10
+ <body>
11
+ <custom-navbar></custom-navbar>
12
+
13
+ <main class="dashboard">
14
+ <div class="container">
15
+ <div class="dashboard-header">
16
+ <h1>Sales Data Analysis</h1>
17
+ <div class="dashboard-actions">
18
+ <button class="btn btn-outline" id="exportBtn"><i class="fas fa-download"></i> Export</button>
19
+ <button class="btn btn-primary" id="refreshBtn"><i class="fas fa-sync-alt"></i> Refresh</button>
20
+ </div>
21
+ </div>
22
+
23
+ <div class="stats-grid">
24
+ <div class="stat-card">
25
+ <h3>Total Sales</h3>
26
+ <div class="stat-value" id="totalSales">$1,291,833</div>
27
+ </div>
28
+ <div class="stat-card">
29
+ <h3>Total Units</h3>
30
+ <div class="stat-value" id="totalUnits">1,838</div>
31
+ </div>
32
+ <div class="stat-card">
33
+ <h3>Avg. Sale</h3>
34
+ <div class="stat-value" id="avgSale">$702.85</div>
35
+ </div>
36
+ <div class="stat-card">
37
+ <h3>Top Product</h3>
38
+ <div class="stat-value" id="topProduct">Television</div>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="dashboard-grid">
43
+ <div class="dashboard-card wide">
44
+ <h3>Sales Trend by Month</h3>
45
+ <div class="chart-container">
46
+ <canvas id="salesTrendChart"></canvas>
47
+ </div>
48
+ </div>
49
+ <div class="dashboard-card">
50
+ <h3>Sales by Region</h3>
51
+ <div class="chart-container">
52
+ <canvas id="regionChart"></canvas>
53
+ </div>
54
+ </div>
55
+ <div class="dashboard-card">
56
+ <h3>Sales by Product</h3>
57
+ <div class="chart-container">
58
+ <canvas id="productChart"></canvas>
59
+ </div>
60
+ </div>
61
+ <div class="dashboard-card wide">
62
+ <h3>Top Performers</h3>
63
+ <div class="chart-container">
64
+ <canvas id="salespersonChart"></canvas>
65
+ </div>
66
+ </div>
67
+ <div class="dashboard-card wide">
68
+ <h3>Sales Data</h3>
69
+ <div class="data-table">
70
+ <table id="salesTable">
71
+ <thead>
72
+ <tr>
73
+ <th>Date</th>
74
+ <th>Region</th>
75
+ <th>Manager</th>
76
+ <th>Salesperson</th>
77
+ <th>Item</th>
78
+ <th>Units</th>
79
+ <th>Unit Price</th>
80
+ <th>Sale Amount</th>
81
+ </tr>
82
+ </thead>
83
+ <tbody>
84
+ <!-- Data will be populated by JavaScript -->
85
+ </tbody>
86
+ </table>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </main>
92
+
93
+ <custom-footer></custom-footer>
94
+
95
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
96
+ <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1"></script>
97
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>
98
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
99
+ <script src="components/navbar.js"></script>
100
+ <script src="components/footer.js"></script>
101
+ <script>
102
+ document.addEventListener('DOMContentLoaded', function() {
103
+ // Sample data - in a real app this would come from an API
104
+ const salesData = [
105
+ { date: '1/6/18', region: 'East', manager: 'Martha', salesperson: 'Alexander', item: 'Television', units: 95, unitPrice: 1198, saleAmount: 113810 },
106
+ { date: '1/23/18', region: 'Central', manager: 'Hermann', salesperson: 'Shelli', item: 'Home Theater', units: 50, unitPrice: 500, saleAmount: 25000 },
107
+ // ... all other data rows ...
108
+ { date: '12/21/19', region: 'Central', manager: 'Martha', salesperson: 'Steven', item: 'Home Theater', units: 28, unitPrice: 500, saleAmount: 14000 }
109
+ ];
110
+
111
+ // Calculate stats
112
+ const totalSales = salesData.reduce((sum, sale) => sum + sale.saleAmount, 0);
113
+ const totalUnits = salesData.reduce((sum, sale) => sum + sale.units, 0);
114
+ const avgSale = totalSales / salesData.length;
115
+
116
+ // Find top product
117
+ const productSales = {};
118
+ salesData.forEach(sale => {
119
+ productSales[sale.item] = (productSales[sale.item] || 0) + sale.saleAmount;
120
+ });
121
+ const topProduct = Object.entries(productSales).sort((a, b) => b[1] - a[1])[0][0];
122
+
123
+ // Update stats
124
+ document.getElementById('totalSales').textContent = `$${totalSales.toLocaleString()}`;
125
+ document.getElementById('totalUnits').textContent = totalUnits.toLocaleString();
126
+ document.getElementById('avgSale').textContent = `$${avgSale.toFixed(2)}`;
127
+ document.getElementById('topProduct').textContent = topProduct;
128
+
129
+ // Populate table
130
+ const tableBody = document.querySelector('#salesTable tbody');
131
+ salesData.forEach(sale => {
132
+ const row = document.createElement('tr');
133
+ row.innerHTML = `
134
+ <td>${sale.date}</td>
135
+ <td>${sale.region}</td>
136
+ <td>${sale.manager}</td>
137
+ <td>${sale.salesperson}</td>
138
+ <td>${sale.item}</td>
139
+ <td>${sale.units}</td>
140
+ <td>$${sale.unitPrice.toLocaleString()}</td>
141
+ <td>$${sale.saleAmount.toLocaleString()}</td>
142
+ `;
143
+ tableBody.appendChild(row);
144
+ });
145
+
146
+ // Initialize charts
147
+ initCharts(salesData);
148
+ });
149
+
150
+ function initCharts(data) {
151
+ // Group data by month
152
+ const monthlySales = {};
153
+ data.forEach(sale => {
154
+ const date = new Date(sale.date);
155
+ const monthYear = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
156
+ monthlySales[monthYear] = (monthlySales[monthYear] || 0) + sale.saleAmount;
157
+ });
158
+
159
+ // Sales Trend Chart
160
+ const trendCtx = document.getElementById('salesTrendChart').getContext('2d');
161
+ new Chart(trendCtx, {
162
+ type: 'line',
163
+ data: {
164
+ labels: Object.keys(monthlySales),
165
+ datasets: [{
166
+ label: 'Sales Amount',
167
+ data: Object.values(monthlySales),
168
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
169
+ borderColor: 'rgba(75, 192, 192, 1)',
170
+ borderWidth: 2,
171
+ tension: 0.1
172
+ }]
173
+ },
174
+ options: {
175
+ responsive: true,
176
+ plugins: {
177
+ legend: { display: false },
178
+ tooltip: {
179
+ callbacks: {
180
+ label: ctx => `$${ctx.raw.toLocaleString()}`
181
+ }
182
+ }
183
+ },
184
+ scales: {
185
+ y: {
186
+ beginAtZero: true,
187
+ ticks: {
188
+ callback: value => `$${value.toLocaleString()}`
189
+ }
190
+ }
191
+ }
192
+ }
193
+ });
194
+
195
+ // Region Chart
196
+ const regionData = {};
197
+ data.forEach(sale => {
198
+ regionData[sale.region] = (regionData[sale.region] || 0) + sale.saleAmount;
199
+ });
200
+
201
+ const regionCtx = document.getElementById('regionChart').getContext('2d');
202
+ new Chart(regionCtx, {
203
+ type: 'doughnut',
204
+ data: {
205
+ labels: Object.keys(regionData),
206
+ datasets: [{
207
+ data: Object.values(regionData),
208
+ backgroundColor: [
209
+ 'rgba(255, 99, 132, 0.7)',
210
+ 'rgba(54, 162, 235, 0.7)',
211
+ 'rgba(255, 206, 86, 0.7)'
212
+ ],
213
+ borderColor: [
214
+ 'rgba(255, 99, 132, 1)',
215
+ 'rgba(54, 162, 235, 1)',
216
+ 'rgba(255, 206, 86, 1)'
217
+ ],
218
+ borderWidth: 1
219
+ }]
220
+ },
221
+ options: {
222
+ responsive: true,
223
+ plugins: {
224
+ legend: { position: 'bottom' },
225
+ tooltip: {
226
+ callbacks: {
227
+ label: ctx => `$${ctx.raw.toLocaleString()} (${((ctx.raw / ctx.dataset.data.reduce((a, b) => a + b, 0)) * 100).toFixed(1)}%)`
228
+ }
229
+ }
230
+ }
231
+ }
232
+ });
233
+
234
+ // Product Chart
235
+ const productCtx = document.getElementById('productChart').getContext('2d');
236
+ new Chart(productCtx, {
237
+ type: 'bar',
238
+ data: {
239
+ labels: Object.keys(productData),
240
+ datasets: [{
241
+ label: 'Sales Amount',
242
+ data: Object.values(productData),
243
+ backgroundColor: 'rgba(153, 102, 255, 0.7)',
244
+ borderColor: 'rgba(153, 102, 255, 1)',
245
+ borderWidth: 1
246
+ }]
247
+ },
248
+ options: {
249
+ responsive: true,
250
+ plugins: {
251
+ legend: { display: false },
252
+ tooltip: {
253
+ callbacks: {
254
+ label: ctx => `$${ctx.raw.toLocaleString()}`
255
+ }
256
+ }
257
+ },
258
+ scales: {
259
+ y: {
260
+ beginAtZero: true,
261
+ ticks: {
262
+ callback: value => `$${value.toLocaleString()}`
263
+ }
264
+ }
265
+ }
266
+ }
267
+ });
268
+
269
+ // Salesperson Chart
270
+ const salespersonData = {};
271
+ data.forEach(sale => {
272
+ salespersonData[sale.salesperson] = (salespersonData[sale.salesperson] || 0) + sale.saleAmount;
273
+ });
274
+
275
+ const salespersonCtx = document.getElementById('salespersonChart').getContext('2d');
276
+ new Chart(salespersonCtx, {
277
+ type: 'bar',
278
+ data: {
279
+ labels: Object.keys(salespersonData),
280
+ datasets: [{
281
+ label: 'Sales Amount',
282
+ data: Object.values(salespersonData),
283
+ backgroundColor: 'rgba(54, 162, 235, 0.7)',
284
+ borderColor: 'rgba(54, 162, 235, 1)',
285
+ borderWidth: 1
286
+ }]
287
+ },
288
+ options: {
289
+ responsive: true,
290
+ plugins: {
291
+ legend: { display: false },
292
+ tooltip: {
293
+ callbacks: {
294
+ label: ctx => `$${ctx.raw.toLocaleString()}`
295
+ }
296
+ }
297
+ },
298
+ scales: {
299
+ y: {
300
+ beginAtZero: true,
301
+ ticks: {
302
+ callback: value => `$${value.toLocaleString()}`
303
+ }
304
+ }
305
+ }
306
+ }
307
+ });
308
+ }
309
+ </script>
310
+ </body>
311
+ </html>
style.css CHANGED
@@ -325,13 +325,26 @@ a:hover {
325
  display: flex;
326
  gap: 1rem;
327
  }
328
-
329
  .dashboard-grid {
330
  display: grid;
331
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
332
  gap: 1.5rem;
333
  }
334
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  .dashboard-card {
336
  background: white;
337
  padding: 1.5rem;
 
325
  display: flex;
326
  gap: 1rem;
327
  }
 
328
  .dashboard-grid {
329
  display: grid;
330
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
331
  gap: 1.5rem;
332
  }
333
 
334
+ #salesTable {
335
+ width: 100%;
336
+ }
337
+
338
+ #salesTable th {
339
+ position: sticky;
340
+ top: 0;
341
+ background: white;
342
+ z-index: 10;
343
+ }
344
+
345
+ #salesTable tbody tr:hover {
346
+ background-color: rgba(0,0,0,0.02);
347
+ }
348
  .dashboard-card {
349
  background: white;
350
  padding: 1.5rem;