Hugging Face's logo

Spaces:
FlipFlopsNSocks
/
undefined
Running

App Files Community
FlipFlopsNSocks commited on
Commit
9a53652
·
verified ·
1 Parent(s): 20d7dde

Add a small summary section for upcoming and recent milestones

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +555 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,556 @@
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>PipeFlow Pro | Industrial Piping Project Controls</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .module-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ .kpi-badge {
20
+ animation: pulse 2s infinite;
21
+ }
22
+ @keyframes pulse {
23
+ 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
24
+ 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
25
+ 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 font-sans">
30
+ <!-- Vanta.js Background -->
31
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
32
+
33
+ <!-- Main Layout -->
34
+ <div class="relative z-10 flex h-screen overflow-hidden">
35
+ <!-- Sidebar -->
36
+ <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out">
37
+ <div class="p-4 border-b border-gray-700">
38
+ <div class="flex items-center space-x-2">
39
+ <i data-feather="pipe" class="text-blue-400"></i>
40
+ <h1 class="text-xl font-bold">PipeFlow Pro</h1>
41
+ </div>
42
+ <p class="text-gray-400 text-sm mt-1">Industrial Piping Command Center</p>
43
+ </div>
44
+
45
+ <nav class="p-4">
46
+ <div class="mb-6">
47
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
48
+ <ul class="space-y-2">
49
+ <li>
50
+ <a href="#financial" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
51
+ <i data-feather="dollar-sign" class="w-5 h-5"></i>
52
+ <span>Financial</span>
53
+ </a>
54
+ </li>
55
+ <li>
56
+ <a href="#tracking" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
57
+ <i data-feather="activity" class="w-5 h-5"></i>
58
+ <span>Tracking</span>
59
+ </a>
60
+ </li>
61
+ <li>
62
+ <a href="#earned-value" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
63
+ <i data-feather="trending-up" class="w-5 h-5"></i>
64
+ <span>Earned Value</span>
65
+ </a>
66
+ </li>
67
+ <li>
68
+ <a href="#plan-forecast" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
69
+ <i data-feather="calendar" class="w-5 h-5"></i>
70
+ <span>Plan & Forecast</span>
71
+ </a>
72
+ </li>
73
+ </ul>
74
+ </div>
75
+
76
+ <div>
77
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Settings</h3>
78
+ <ul class="space-y-2">
79
+ <li>
80
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
81
+ <i data-feather="user" class="w-5 h-5"></i>
82
+ <span>Profile</span>
83
+ </a>
84
+ </li>
85
+ <li>
86
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
87
+ <i data-feather="settings" class="w-5 h-5"></i>
88
+ <span>Preferences</span>
89
+ </a>
90
+ </li>
91
+ </ul>
92
+ </div>
93
+ </nav>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <div class="flex-1 overflow-auto">
98
+ <!-- Top Navigation -->
99
+ <header class="bg-white shadow-sm">
100
+ <div class="flex items-center justify-between px-6 py-4">
101
+ <div class="flex items-center space-x-4">
102
+ <button id="sidebar-toggle" class="md:hidden text-gray-500">
103
+ <i data-feather="menu"></i>
104
+ </button>
105
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
106
+ </div>
107
+
108
+ <div class="flex items-center space-x-4">
109
+ <div class="relative">
110
+ <i data-feather="bell" class="text-gray-500"></i>
111
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
112
+ </div>
113
+ <div class="flex items-center space-x-2">
114
+ <img src="https://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
115
+ <span class="text-sm font-medium">John Doe</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </header>
120
+
121
+ <!-- Dashboard Content -->
122
+ <main class="p-6">
123
+ <!-- Project Overview -->
124
+ <div class="mb-8">
125
+ <div class="flex items-center justify-between mb-4">
126
+ <h3 class="text-lg font-semibold">Project Overview</h3>
127
+ <div class="flex space-x-2">
128
+ <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded-lg">Active Project</button>
129
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg">All Projects</button>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
134
+ <div class="bg-white p-4 rounded-lg shadow">
135
+ <div class="flex items-center justify-between">
136
+ <span class="text-gray-500">Budget</span>
137
+ <i data-feather="dollar-sign" class="text-green-500"></i>
138
+ </div>
139
+ <h4 class="text-2xl font-bold mt-2">$4.2M</h4>
140
+ <div class="mt-2 text-sm text-green-500 flex items-center">
141
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
142
+ <span>2.5% under</span>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="bg-white p-4 rounded-lg shadow">
147
+ <div class="flex items-center justify-between">
148
+ <span class="text-gray-500">Progress</span>
149
+ <i data-feather="clock" class="text-blue-500"></i>
150
+ </div>
151
+ <h4 class="text-2xl font-bold mt-2">68%</h4>
152
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
153
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="bg-white p-4 rounded-lg shadow">
158
+ <div class="flex items-center justify-between">
159
+ <span class="text-gray-500">Materials Used</span>
160
+ <i data-feather="package" class="text-purple-500"></i>
161
+ </div>
162
+ <h4 class="text-2xl font-bold mt-2">1,428 LF</h4>
163
+ <div class="mt-2 text-sm text-red-500 flex items-center">
164
+ <i data-feather="alert-triangle" class="w-4 h-4 mr-1"></i>
165
+ <span>5% over</span>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white p-4 rounded-lg shadow">
170
+ <div class="flex items-center justify-between">
171
+ <span class="text-gray-500">Labor Hours</span>
172
+ <i data-feather="users" class="text-orange-500"></i>
173
+ </div>
174
+ <h4 class="text-2xl font-bold mt-2">3,428</h4>
175
+ <div class="mt-2 text-sm text-green-500 flex items-center">
176
+ <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
177
+ <span>8% under</span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Module Cards -->
184
+ <div class="mb-8">
185
+ <h3 class="text-lg font-semibold mb-4">Project Modules</h3>
186
+
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
188
+ <!-- Financial Module -->
189
+ <div id="financial" class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
190
+ <div class="p-5">
191
+ <div class="flex items-center justify-between mb-4">
192
+ <div class="bg-blue-100 p-3 rounded-full">
193
+ <i data-feather="dollar-sign" class="text-blue-500 w-6 h-6"></i>
194
+ </div>
195
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Active</span>
196
+ </div>
197
+ <h4 class="text-xl font-bold mb-2">Financial Module</h4>
198
+ <p class="text-gray-600 mb-4">Track budgets, expenditures, and generate detailed financial reports.</p>
199
+ <div class="flex justify-between items-center">
200
+ <div>
201
+ <span class="text-sm text-gray-500">Last updated</span>
202
+ <span class="text-sm font-medium">2 hours ago</span>
203
+ </div>
204
+ <button class="text-blue-500 hover:text-blue-700">
205
+ <i data-feather="arrow-right"></i>
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Tracking Module -->
212
+ <div id="tracking" class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
213
+ <div class="p-5">
214
+ <div class="flex items-center justify-between mb-4">
215
+ <div class="bg-green-100 p-3 rounded-full">
216
+ <i data-feather="activity" class="text-green-500 w-6 h-6"></i>
217
+ </div>
218
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Active</span>
219
+ </div>
220
+ <h4 class="text-xl font-bold mb-2">Tracking Module</h4>
221
+ <p class="text-gray-600 mb-4">Monitor installed quantities and progress against project milestones.</p>
222
+ <div class="flex justify-between items-center">
223
+ <div>
224
+ <span class="text-sm text-gray-500">Last updated</span>
225
+ <span class="text-sm font-medium">15 min ago</span>
226
+ </div>
227
+ <button class="text-green-500 hover:text-green-700">
228
+ <i data-feather="arrow-right"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Earned Value Module -->
235
+ <div id="earned-value" class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
236
+ <div class="p-5">
237
+ <div class="flex items-center justify-between mb-4">
238
+ <div class="bg-purple-100 p-3 rounded-full">
239
+ <i data-feather="trending-up" class="text-purple-500 w-6 h-6"></i>
240
+ </div>
241
+ <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Active</span>
242
+ </div>
243
+ <h4 class="text-xl font-bold mb-2">Earned Value</h4>
244
+ <p class="text-gray-600 mb-4">Calculate CPI, SPI and compare planned vs. actual progress.</p>
245
+ <div class="flex justify-between items-center">
246
+ <div>
247
+ <span class="text-sm text-gray-500">Last updated</span>
248
+ <span class="text-sm font-medium">1 hour ago</span>
249
+ </div>
250
+ <button class="text-purple-500 hover:text-purple-700">
251
+ <i data-feather="arrow-right"></i>
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Plan & Forecast Module -->
258
+ <div id="plan-forecast" class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
259
+ <div class="p-5">
260
+ <div class="flex items-center justify-between mb-4">
261
+ <div class="bg-orange-100 p-3 rounded-full">
262
+ <i data-feather="calendar" class="text-orange-500 w-6 h-6"></i>
263
+ </div>
264
+ <span class="text-xs px-2 py-1 bg-orange-100 text-orange-800 rounded-full">Active</span>
265
+ </div>
266
+ <h4 class="text-xl font-bold mb-2">Plan & Forecast</h4>
267
+ <p class="text-gray-600 mb-4">Project schedules with Gantt charts and predictive analytics.</p>
268
+ <div class="flex justify-between items-center">
269
+ <div>
270
+ <span class="text-sm text-gray-500">Last updated</span>
271
+ <span class="text-sm font-medium">4 hours ago</span>
272
+ </div>
273
+ <button class="text-orange-500 hover:text-orange-700">
274
+ <i data-feather="arrow-right"></i>
275
+ </button>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Charts Section -->
283
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
284
+ <!-- Financial Performance -->
285
+ <div class="bg-white p-6 rounded-lg shadow">
286
+ <div class="flex items-center justify-between mb-4">
287
+ <h3 class="text-lg font-semibold">Financial Performance</h3>
288
+ <div class="flex space-x-2">
289
+ <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded-lg">Monthly</button>
290
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg">Quarterly</button>
291
+ </div>
292
+ </div>
293
+ <canvas id="financialChart" height="250"></canvas>
294
+ </div>
295
+
296
+ <!-- Project Progress -->
297
+ <div class="bg-white p-6 rounded-lg shadow">
298
+ <div class="flex items-center justify-between mb-4">
299
+ <h3 class="text-lg font-semibold">Project Progress</h3>
300
+ <div class="flex items-center space-x-2">
301
+ <span class="text-sm text-gray-500">Last updated: 15 min ago</span>
302
+ <button class="text-blue-500">
303
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
304
+ </button>
305
+ </div>
306
+ </div>
307
+ <canvas id="progressChart" height="250"></canvas>
308
+ </div>
309
+ </div>
310
+ <!-- Milestones Summary -->
311
+ <div class="bg-white p-6 rounded-lg shadow mb-8">
312
+ <div class="flex items-center justify-between mb-4">
313
+ <h3 class="text-lg font-semibold">Milestones Summary</h3>
314
+ <button class="text-blue-500 hover:text-blue-700 text-sm">View All</button>
315
+ </div>
316
+
317
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
318
+ <!-- Upcoming Milestones -->
319
+ <div class="border-l-4 border-blue-500 pl-4">
320
+ <h4 class="font-medium text-blue-700 mb-2">Upcoming</h4>
321
+ <ul class="space-y-3">
322
+ <li>
323
+ <div class="flex items-start">
324
+ <div class="bg-blue-100 p-1 rounded-full mr-3">
325
+ <i data-feather="calendar" class="text-blue-500 w-4 h-4"></i>
326
+ </div>
327
+ <div>
328
+ <p class="font-medium">Zone 4 Piping Complete</p>
329
+ <p class="text-sm text-gray-500">Due: May 15, 2023</p>
330
+ </div>
331
+ </div>
332
+ </li>
333
+ <li>
334
+ <div class="flex items-start">
335
+ <div class="bg-blue-100 p-1 rounded-full mr-3">
336
+ <i data-feather="truck" class="text-blue-500 w-4 h-4"></i>
337
+ </div>
338
+ <div>
339
+ <p class="font-medium">Material Delivery</p>
340
+ <p class="text-sm text-gray-500">Due: May 8, 2023</p>
341
+ </div>
342
+ </div>
343
+ </li>
344
+ </ul>
345
+ </div>
346
+
347
+ <!-- Recent Milestones -->
348
+ <div class="border-l-4 border-green-500 pl-4">
349
+ <h4 class="font-medium text-green-700 mb-2">Recently Completed</h4>
350
+ <ul class="space-y-3">
351
+ <li>
352
+ <div class="flex items-start">
353
+ <div class="bg-green-100 p-1 rounded-full mr-3">
354
+ <i data-feather="check" class="text-green-500 w-4 h-4"></i>
355
+ </div>
356
+ <div>
357
+ <p class="font-medium">Zone 3 Hydro Test</p>
358
+ <p class="text-sm text-gray-500">Completed: Apr 28, 2023</p>
359
+ </div>
360
+ </div>
361
+ </li>
362
+ <li>
363
+ <div class="flex items-start">
364
+ <div class="bg-green-100 p-1 rounded-full mr-3">
365
+ <i data-feather="check" class="text-green-500 w-4 h-4"></i>
366
+ </div>
367
+ <div>
368
+ <p class="font-medium">Pump Station Piping</p>
369
+ <p class="text-sm text-gray-500">Completed: Apr 22, 2023</p>
370
+ </div>
371
+ </div>
372
+ </li>
373
+ </ul>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Recent Activities -->
379
+ <div class="bg-white p-6 rounded-lg shadow mb-8">
380
+ <div class="flex items-center justify-between mb-4">
381
+ <h3 class="text-lg font-semibold">Recent Activities</h3>
382
+ <button class="text-blue-500 hover:text-blue-700 text-sm">View All</button>
383
+ </div>
384
+
385
+ <div class="space-y-4">
386
+ <div class="flex items-start space-x-4">
387
+ <div class="bg-green-100 p-2 rounded-full">
388
+ <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i>
389
+ </div>
390
+ <div class="flex-1">
391
+ <p class="font-medium">Material delivery completed</p>
392
+ <p class="text-sm text-gray-500">304 LF of 6" SCH40 pipe received at Site A</p>
393
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="flex items-start space-x-4">
398
+ <div class="bg-blue-100 p-2 rounded-full">
399
+ <i data-feather="dollar-sign" class="text-blue-500 w-5 h-5"></i>
400
+ </div>
401
+ <div class="flex-1">
402
+ <p class="font-medium">Invoice approved</p>
403
+ <p class="text-sm text-gray-500">Invoice #INV-2023-045 for $24,850 approved</p>
404
+ <p class="text-xs text-gray-400 mt-1">4 hours ago</p>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex items-start space-x-4">
409
+ <div class="bg-purple-100 p-2 rounded-full">
410
+ <i data-feather="trending-up" class="text-purple-500 w-5 h-5"></i>
411
+ </div>
412
+ <div class="flex-1">
413
+ <p class="font-medium">Earned value updated</p>
414
+ <p class="text-sm text-gray-500">CPI: 1.02, SPI: 0.98 for Zone 3 piping</p>
415
+ <p class="text-xs text-gray-400 mt-1">6 hours ago</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </main>
421
+ </div>
422
+ </div>
423
+
424
+ <script>
425
+ // Initialize Feather Icons
426
+ feather.replace();
427
+
428
+ // Initialize Vanta.js background
429
+ VANTA.NET({
430
+ el: "#vanta-bg",
431
+ color: 0x3b82f6,
432
+ backgroundColor: 0xf8fafc,
433
+ points: 12,
434
+ maxDistance: 20,
435
+ spacing: 15
436
+ });
437
+
438
+ // Toggle sidebar on mobile
439
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
440
+ document.querySelector('.sidebar').classList.toggle('translate-x-0');
441
+ });
442
+
443
+ // Initialize Financial Chart
444
+ const financialCtx = document.getElementById('financialChart').getContext('2d');
445
+ const financialChart = new Chart(financialCtx, {
446
+ type: 'bar',
447
+ data: {
448
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
449
+ datasets: [
450
+ {
451
+ label: 'Budget',
452
+ data: [450000, 500000, 600000, 550000, 700000, 650000],
453
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
454
+ borderColor: 'rgba(59, 130, 246, 1)',
455
+ borderWidth: 1
456
+ },
457
+ {
458
+ label: 'Actual',
459
+ data: [420000, 480000, 580000, 520000, 680000, 620000],
460
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
461
+ borderColor: 'rgba(16, 185, 129, 1)',
462
+ borderWidth: 1
463
+ }
464
+ ]
465
+ },
466
+ options: {
467
+ responsive: true,
468
+ plugins: {
469
+ legend: {
470
+ position: 'top',
471
+ },
472
+ tooltip: {
473
+ callbacks: {
474
+ label: function(context) {
475
+ let label = context.dataset.label || '';
476
+ if (label) {
477
+ label += ': ';
478
+ }
479
+ if (context.parsed.y !== null) {
480
+ label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
481
+ }
482
+ return label;
483
+ }
484
+ }
485
+ }
486
+ },
487
+ scales: {
488
+ y: {
489
+ beginAtZero: true,
490
+ ticks: {
491
+ callback: function(value) {
492
+ return '$' + (value / 1000) + 'K';
493
+ }
494
+ }
495
+ }
496
+ }
497
+ }
498
+ });
499
+
500
+ // Initialize Progress Chart
501
+ const progressCtx = document.getElementById('progressChart').getContext('2d');
502
+ const progressChart = new Chart(progressCtx, {
503
+ type: 'line',
504
+ data: {
505
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
506
+ datasets: [
507
+ {
508
+ label: 'Planned',
509
+ data: [10, 20, 35, 45, 60, 75],
510
+ borderColor: 'rgba(99, 102, 241, 1)',
511
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
512
+ borderWidth: 2,
513
+ tension: 0.3,
514
+ fill: true
515
+ },
516
+ {
517
+ label: 'Actual',
518
+ data: [8, 18, 30, 42, 55, 68],
519
+ borderColor: 'rgba(245, 158, 11, 1)',
520
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
521
+ borderWidth: 2,
522
+ tension: 0.3,
523
+ fill: true
524
+ }
525
+ ]
526
+ },
527
+ options: {
528
+ responsive: true,
529
+ plugins: {
530
+ legend: {
531
+ position: 'top',
532
+ },
533
+ tooltip: {
534
+ callbacks: {
535
+ label: function(context) {
536
+ return context.dataset.label + ': ' + context.parsed.y + '%';
537
+ }
538
+ }
539
+ }
540
+ },
541
+ scales: {
542
+ y: {
543
+ beginAtZero: true,
544
+ max: 100,
545
+ ticks: {
546
+ callback: function(value) {
547
+ return value + '%';
548
+ }
549
+ }
550
+ }
551
+ }
552
+ }
553
+ });
554
+ </script>
555
+ </body>
556
  </html>