Hugging Face's logo

Spaces:
FlipFlopsNSocks
/
undefined
Running

App Files Community
FlipFlopsNSocks commited on
Commit
4b5fb3f
·
verified ·
1 Parent(s): a7fe11b

Now the plan and forecast module

Browse files
Files changed (1) hide show
  1. plan-forecast.html +584 -0
plan-forecast.html ADDED
@@ -0,0 +1,584 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Plan & Forecast Module | PipeFlow Pro</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
+ .kpi-card {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .kpi-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .data-table th {
23
+ background-color: #f3f4f6;
24
+ font-weight: 600;
25
+ }
26
+ .data-table tr:nth-child(even) {
27
+ background-color: #f9fafb;
28
+ }
29
+ .data-table tr:hover {
30
+ background-color: #f1f5f9;
31
+ }
32
+ .gantt-task {
33
+ height: 30px;
34
+ border-radius: 4px;
35
+ display: flex;
36
+ align-items: center;
37
+ padding: 0 8px;
38
+ font-size: 12px;
39
+ color: white;
40
+ position: relative;
41
+ }
42
+ .gantt-task::after {
43
+ content: '';
44
+ position: absolute;
45
+ right: -5px;
46
+ top: 50%;
47
+ transform: translateY(-50%);
48
+ border: 5px solid transparent;
49
+ border-left-color: inherit;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans">
54
+ <!-- Vanta.js Background -->
55
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
56
+
57
+ <!-- Main Layout -->
58
+ <div class="relative z-10 flex h-screen overflow-hidden">
59
+ <!-- Sidebar -->
60
+ <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">
61
+ <div class="p-4 border-b border-gray-700">
62
+ <div class="flex items-center space-x-2">
63
+ <i data-feather="pipe" class="text-blue-400"></i>
64
+ <h1 class="text-xl font-bold">PipeFlow Pro</h1>
65
+ </div>
66
+ <p class="text-gray-400 text-sm mt-1">Industrial Piping Command Center</p>
67
+ </div>
68
+
69
+ <nav class="p-4">
70
+ <div class="mb-6">
71
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
72
+ <ul class="space-y-2">
73
+ <li>
74
+ <a href="index.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
75
+ <i data-feather="home" class="w-5 h-5"></i>
76
+ <span>Dashboard</span>
77
+ </a>
78
+ </li>
79
+ <li>
80
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
81
+ <i data-feather="dollar-sign" class="w-5 h-5"></i>
82
+ <span>Financial</span>
83
+ </a>
84
+ </li>
85
+ <li>
86
+ <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
87
+ <i data-feather="activity" class="w-5 h-5"></i>
88
+ <span>Tracking</span>
89
+ </a>
90
+ </li>
91
+ <li>
92
+ <a href="earned-value.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
93
+ <i data-feather="trending-up" class="w-5 h-5"></i>
94
+ <span>Earned Value</span>
95
+ </a>
96
+ </li>
97
+ <li>
98
+ <a href="plan-forecast.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
99
+ <i data-feather="calendar" class="w-5 h-5"></i>
100
+ <span>Plan & Forecast</span>
101
+ </a>
102
+ </li>
103
+ </ul>
104
+ </div>
105
+
106
+ <div>
107
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Settings</h3>
108
+ <ul class="space-y-2">
109
+ <li>
110
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
111
+ <i data-feather="user" class="w-5 h-5"></i>
112
+ <span>Profile</span>
113
+ </a>
114
+ </li>
115
+ <li>
116
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
117
+ <i data-feather="settings" class="w-5 h-5"></i>
118
+ <span>Preferences</span>
119
+ </a>
120
+ </li>
121
+ </ul>
122
+ </div>
123
+ </nav>
124
+ </div>
125
+
126
+ <!-- Main Content -->
127
+ <div class="flex-1 overflow-auto">
128
+ <!-- Top Navigation -->
129
+ <header class="bg-white shadow-sm">
130
+ <div class="flex items-center justify-between px-6 py-4">
131
+ <div class="flex items-center space-x-4">
132
+ <button id="sidebar-toggle" class="md:hidden text-gray-500">
133
+ <i data-feather="menu"></i>
134
+ </button>
135
+ <h2 class="text-xl font-semibold text-gray-800">Plan & Forecast Module</h2>
136
+ </div>
137
+
138
+ <div class="flex items-center space-x-4">
139
+ <div class="relative">
140
+ <i data-feather="bell" class="text-gray-500"></i>
141
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
142
+ </div>
143
+ <div class="flex items-center space-x-2">
144
+ <img src="https://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
145
+ <span class="text-sm font-medium">John Doe</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </header>
150
+
151
+ <!-- Plan & Forecast Content -->
152
+ <main class="p-6">
153
+ <!-- Header -->
154
+ <div class="mb-6">
155
+ <div class="flex items-center justify-between">
156
+ <div>
157
+ <h3 class="text-lg font-semibold">Project Planning & Forecasting</h3>
158
+ <p class="text-gray-600">Manage schedules, milestones, and predictive analytics</p>
159
+ </div>
160
+ <div class="flex space-x-3">
161
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
162
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
163
+ Export Gantt
164
+ </button>
165
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center">
166
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
167
+ Add Task
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Planning KPIs -->
174
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
175
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
176
+ <div class="p-5">
177
+ <div class="flex items-center justify-between mb-4">
178
+ <span class="text-gray-500">Project Duration</span>
179
+ <div class="bg-blue-100 p-2 rounded-full">
180
+ <i data-feather="clock" class="text-blue-500 w-5 h-5"></i>
181
+ </div>
182
+ </div>
183
+ <h4 class="text-2xl font-bold mb-2">180 Days</h4>
184
+ <div class="flex items-center text-sm">
185
+ <span class="text-gray-500 mr-2">Start: Jan 15, 2023</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
191
+ <div class="p-5">
192
+ <div class="flex items-center justify-between mb-4">
193
+ <span class="text-gray-500">Critical Path</span>
194
+ <div class="bg-purple-100 p-2 rounded-full">
195
+ <i data-feather="alert-triangle" class="text-purple-500 w-5 h-5"></i>
196
+ </div>
197
+ </div>
198
+ <h4 class="text-2xl font-bold mb-2">45 Days</h4>
199
+ <div class="flex items-center text-sm">
200
+ <span class="text-gray-500 mr-2">Longest sequence</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
206
+ <div class="p-5">
207
+ <div class="flex items-center justify-between mb-4">
208
+ <span class="text-gray-500">Milestones</span>
209
+ <div class="bg-green-100 p-2 rounded-full">
210
+ <i data-feather="flag" class="text-green-500 w-5 h-5"></i>
211
+ </div>
212
+ </div>
213
+ <h4 class="text-2xl font-bold mb-2">12</h4>
214
+ <div class="flex items-center text-sm">
215
+ <span class="text-gray-500 mr-2">8 completed</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
221
+ <div class="p-5">
222
+ <div class="flex items-center justify-between mb-4">
223
+ <span class="text-gray-500">Forecast Accuracy</span>
224
+ <div class="bg-yellow-100 p-2 rounded-full">
225
+ <i data-feather="target" class="text-yellow-500 w-5 h-5"></i>
226
+ </div>
227
+ </div>
228
+ <h4 class="text-2xl font-bold mb-2">87%</h4>
229
+ <div class="flex items-center text-sm">
230
+ <span class="text-gray-500 mr-2">Based on historical data</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Gantt Chart Section -->
237
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
238
+ <div class="flex items-center justify-between mb-4">
239
+ <h3 class="text-lg font-semibold">Project Gantt Chart</h3>
240
+ <div class="flex space-x-2">
241
+ <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded-lg">Monthly</button>
242
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg">Quarterly</button>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="overflow-x-auto">
247
+ <div class="min-w-full">
248
+ <!-- Timeline Header -->
249
+ <div class="flex border-b border-gray-200 pb-2 mb-2">
250
+ <div class="w-1/4 font-medium text-gray-700">Task</div>
251
+ <div class="w-3/4 grid grid-cols-12 gap-1">
252
+ <div class="text-center text-xs text-gray-500">J1</div>
253
+ <div class="text-center text-xs text-gray-500">F1</div>
254
+ <div class="text-center text-xs text-gray-500">M1</div>
255
+ <div class="text-center text-xs text-gray-500">A1</div>
256
+ <div class="text-center text-xs text-gray-500">M1</div>
257
+ <div class="text-center text-xs text-gray-500">J1</div>
258
+ <div class="text-center text-xs text-gray-500">J2</div>
259
+ <div class="text-center text-xs text-gray-500">A2</div>
260
+ <div class="text-center text-xs text-gray-500">S1</div>
261
+ <div class="text-center text-xs text-gray-500">O1</div>
262
+ <div class="text-center text-xs text-gray-500">N1</div>
263
+ <div class="text-center text-xs text-gray-500">D1</div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Gantt Rows -->
268
+ <div class="space-y-3">
269
+ <!-- Task 1 -->
270
+ <div class="flex items-center">
271
+ <div class="w-1/4 text-sm font-medium text-gray-900">Foundation Work</div>
272
+ <div class="w-3/4 relative h-8">
273
+ <div class="absolute top-1 h-6 bg-blue-500 rounded" style="width: 25%; left: 0;"></div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Task 2 -->
278
+ <div class="flex items-center">
279
+ <div class="w-1/4 text-sm font-medium text-gray-900">Structural Steel</div>
280
+ <div class="w-3/4 relative h-8">
281
+ <div class="absolute top-1 h-6 bg-green-500 rounded" style="width: 33%; left: 20%;"></div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Task 3 -->
286
+ <div class="flex items-center">
287
+ <div class="w-1/4 text-sm font-medium text-gray-900">Piping Installation</div>
288
+ <div class="w-3/4 relative h-8">
289
+ <div class="absolute top-1 h-6 bg-yellow-500 rounded" style="width: 42%; left: 33%;"></div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Task 4 -->
294
+ <div class="flex items-center">
295
+ <div class="w-1/4 text-sm font-medium text-gray-900">Hydro Testing</div>
296
+ <div class="w-3/4 relative h-8">
297
+ <div class="absolute top-1 h-6 bg-purple-500 rounded" style="width: 17%; left: 65%;"></div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Task 5 -->
302
+ <div class="flex items-center">
303
+ <div class="w-1/4 text-sm font-medium text-gray-900">Inspection & QA</div>
304
+ <div class="w-3/4 relative h-8">
305
+ <div class="absolute top-1 h-6 bg-red-500 rounded" style="width: 25%; left: 75%;"></div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Forecasting Charts -->
314
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
315
+ <!-- Completion Forecast -->
316
+ <div class="bg-white p-6 rounded-lg shadow">
317
+ <div class="flex items-center justify-between mb-4">
318
+ <h3 class="text-lg font-semibold">Completion Forecast</h3>
319
+ <div class="flex items-center space-x-2">
320
+ <span class="text-sm text-gray-500">Based on current progress</span>
321
+ </div>
322
+ </div>
323
+ <canvas id="completionChart" height="250"></canvas>
324
+ </div>
325
+
326
+ <!-- Resource Forecast -->
327
+ <div class="bg-white p-6 rounded-lg shadow">
328
+ <div class="flex items-center justify-between mb-4">
329
+ <h3 class="text-lg font-semibold">Resource Forecast</h3>
330
+ <div class="flex items-center space-x-2">
331
+ <span class="text-sm text-gray-500">Next 30 days</span>
332
+ </div>
333
+ </div>
334
+ <canvas id="resourceChart" height="250"></canvas>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Upcoming Milestones -->
339
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
340
+ <div class="px-6 py-4 border-b border-gray-200">
341
+ <h3 class="text-lg font-semibold">Upcoming Milestones</h3>
342
+ </div>
343
+ <div class="overflow-x-auto">
344
+ <table class="data-table min-w-full divide-y divide-gray-200">
345
+ <thead>
346
+ <tr>
347
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Milestone</th>
348
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target Date</th>
349
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dependencies</th>
350
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
351
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
352
+ </tr>
353
+ </thead>
354
+ <tbody class="bg-white divide-y divide-gray-200">
355
+ <tr>
356
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Zone 3 Piping Complete</td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 25, 2023</td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Material Delivery</td>
359
+ <td class="px-6 py-4 whitespace-nowrap">
360
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span>
361
+ </td>
362
+ <td class="px-6 py-4 whitespace-nowrap">
363
+ <div class="flex items-center">
364
+ <div class="w-24 bg-gray-200 rounded-full h-2 mr-2">
365
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
366
+ </div>
367
+ <span class="text-sm text-gray-900">65%</span>
368
+ </div>
369
+ </td>
370
+ </tr>
371
+ <tr>
372
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Hydro Testing Start</td>
373
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 5, 2023</td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Zone 3 Complete</td>
375
+ <td class="px-6 py-4 whitespace-nowrap">
376
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span>
377
+ </td>
378
+ <td class="px-6 py-4 whitespace-nowrap">
379
+ <div class="flex items-center">
380
+ <div class="w-24 bg-gray-200 rounded-full h-2 mr-2">
381
+ <div class="bg-gray-500 h-2 rounded-full" style="width: 0%"></div>
382
+ </div>
383
+ <span class="text-sm text-gray-900">0%</span>
384
+ </div>
385
+ </td>
386
+ </tr>
387
+ <tr>
388
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Zone 4 Material Delivery</td>
389
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 12, 2023</td>
390
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Procurement</td>
391
+ <td class="px-6 py-4 whitespace-nowrap">
392
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap">
395
+ <div class="flex items-center">
396
+ <div class="w-24 bg-gray-200 rounded-full h-2 mr-2">
397
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
398
+ </div>
399
+ <span class="text-sm text-gray-900">100%</span>
400
+ </div>
401
+ </td>
402
+ </tr>
403
+ <tr>
404
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Project Midpoint Review</td>
405
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 20, 2023</td>
406
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">All prior milestones</td>
407
+ <td class="px-6 py-4 whitespace-nowrap">
408
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span>
409
+ </td>
410
+ <td class="px-6 py-4 whitespace-nowrap">
411
+ <div class="flex items-center">
412
+ <div class="w-24 bg-gray-200 rounded-full h-2 mr-2">
413
+ <div class="bg-gray-500 h-2 rounded-full" style="width: 0%"></div>
414
+ </div>
415
+ <span class="text-sm text-gray-900">0%</span>
416
+ </div>
417
+ </td>
418
+ </tr>
419
+ </tbody>
420
+ </table>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Risk Forecast -->
425
+ <div class="bg-white rounded-lg shadow overflow-hidden">
426
+ <div class="px-6 py-4 border-b border-gray-200">
427
+ <h3 class="text-lg font-semibold">Risk Forecast</h3>
428
+ </div>
429
+ <div class="overflow-x-auto">
430
+ <table class="data-table min-w-full divide-y divide-gray-200">
431
+ <thead>
432
+ <tr>
433
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risk</th>
434
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Probability</th>
435
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impact</th>
436
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mitigation Strategy</th>
437
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forecasted Date</th>
438
+ </tr>
439
+ </thead>
440
+ <tbody class="bg-white divide-y divide-gray-200">
441
+ <tr>
442
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Weather Delays</td>
443
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Medium (60%)</td>
444
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500 font-medium">Medium</td>
445
+ <td class="px-6 py-4 text-sm text-gray-500">Adjust schedule for weather windows</td>
446
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 30, 2023</td>
447
+ </tr>
448
+ <tr>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Material Shortage</td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Low (30%)</td>
451
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500 font-medium">High</td>
452
+ <td class="px-6 py-4 text-sm text-gray-500">Maintain 15% buffer stock</td>
453
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 15, 2023</td>
454
+ </tr>
455
+ <tr>
456
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Labor Shortage</td>
457
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">High (80%)</td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500 font-medium">High</td>
459
+ <td class="px-6 py-4 text-sm text-gray-500">Secure backup contractors</td>
460
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">July 5, 2023</td>
461
+ </tr>
462
+ </tbody>
463
+ </table>
464
+ </div>
465
+ </div>
466
+ </main>
467
+ </div>
468
+ </div>
469
+
470
+ <script>
471
+ // Initialize Feather Icons
472
+ feather.replace();
473
+
474
+ // Initialize Vanta.js background
475
+ VANTA.NET({
476
+ el: "#vanta-bg",
477
+ color: 0x3b82f6,
478
+ backgroundColor: 0xf8fafc,
479
+ points: 12,
480
+ maxDistance: 20,
481
+ spacing: 15
482
+ });
483
+
484
+ // Toggle sidebar on mobile
485
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
486
+ document.querySelector('.sidebar').classList.toggle('translate-x-0');
487
+ });
488
+
489
+ // Initialize Completion Forecast Chart
490
+ const completionCtx = document.getElementById('completionChart').getContext('2d');
491
+ const completionChart = new Chart(completionCtx, {
492
+ type: 'line',
493
+ data: {
494
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
495
+ datasets: [
496
+ {
497
+ label: 'Planned Completion',
498
+ data: [5, 12, 20, 30, 45, 55, 70, 85],
499
+ borderColor: 'rgba(99, 102, 241, 1)',
500
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
501
+ borderWidth: 2,
502
+ tension: 0.3,
503
+ fill: true
504
+ },
505
+ {
506
+ label: 'Forecasted Completion',
507
+ data: [7, 15, 25, 35, 48, 60, 72, 85],
508
+ borderColor: 'rgba(16, 185, 129, 1)',
509
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
510
+ borderWidth: 2,
511
+ borderDash: [5, 5],
512
+ tension: 0.3,
513
+ fill: true
514
+ }
515
+ ]
516
+ },
517
+ options: {
518
+ responsive: true,
519
+ plugins: {
520
+ legend: {
521
+ position: 'top',
522
+ },
523
+ tooltip: {
524
+ callbacks: {
525
+ label: function(context) {
526
+ return context.dataset.label + ': ' + context.parsed.y + '%';
527
+ }
528
+ }
529
+ }
530
+ },
531
+ scales: {
532
+ y: {
533
+ beginAtZero: true,
534
+ max: 100,
535
+ ticks: {
536
+ callback: function(value) {
537
+ return value + '%';
538
+ }
539
+ }
540
+ }
541
+ }
542
+ }
543
+ });
544
+
545
+ // Initialize Resource Forecast Chart
546
+ const resourceCtx = document.getElementById('resourceChart').getContext('2d');
547
+ const resourceChart = new Chart(resourceCtx, {
548
+ type: 'bar',
549
+ data: {
550
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
551
+ datasets: [
552
+ {
553
+ label: 'Labor (FTE)',
554
+ data: [15, 18, 22, 19],
555
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
556
+ borderColor: 'rgba(59, 130, 246, 1)',
557
+ borderWidth: 1
558
+ },
559
+ {
560
+ label: 'Equipment',
561
+ data: [8, 10, 12, 9],
562
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
563
+ borderColor: 'rgba(16, 185, 129, 1)',
564
+ borderWidth: 1
565
+ }
566
+ ]
567
+ },
568
+ options: {
569
+ responsive: true,
570
+ plugins: {
571
+ legend: {
572
+ position: 'top',
573
+ }
574
+ },
575
+ scales: {
576
+ y: {
577
+ beginAtZero: true
578
+ }
579
+ }
580
+ }
581
+ });
582
+ </script>
583
+ </body>
584
+ </html>