Hugging Face's logo

Spaces:
FlipFlopsNSocks
/
undefined
Running

App Files Community
FlipFlopsNSocks commited on
Commit
8c421a2
·
verified ·
1 Parent(s): 9f5bb96

Create Tracking Log that feeds dashboard for manual data entry with columns for( Drawing Number, System, Area, (Category - Pipe Spool, Welding, Valve Handling, Pipe Support, Bolt up, Hydro, QC Buy-off) and Budget Qnty., Installed Qnty, Unit Manhours, Earned Man-Hours Percent Complete

Browse files
Files changed (2) hide show
  1. index.html +2 -2
  2. tracking.html +371 -0
index.html CHANGED
@@ -53,12 +53,12 @@
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>
 
53
  </a>
54
  </li>
55
  <li>
56
+ <a href="tracking.html" 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>
tracking.html ADDED
@@ -0,0 +1,371 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Tracking 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/vanta@latest/dist/vanta.net.min.js"></script>
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .data-table th {
15
+ background-color: #f3f4f6;
16
+ font-weight: 600;
17
+ }
18
+ .data-table tr:nth-child(even) {
19
+ background-color: #f9fafb;
20
+ }
21
+ .data-table tr:hover {
22
+ background-color: #f1f5f9;
23
+ }
24
+ .form-input {
25
+ transition: all 0.2s ease;
26
+ }
27
+ .form-input:focus {
28
+ border-color: #3b82f6;
29
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 font-sans">
34
+ <!-- Vanta.js Background -->
35
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
36
+
37
+ <!-- Main Layout -->
38
+ <div class="relative z-10 flex h-screen overflow-hidden">
39
+ <!-- Sidebar -->
40
+ <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">
41
+ <div class="p-4 border-b border-gray-700">
42
+ <div class="flex items-center space-x-2">
43
+ <i data-feather="pipe" class="text-blue-400"></i>
44
+ <h1 class="text-xl font-bold">PipeFlow Pro</h1>
45
+ </div>
46
+ <p class="text-gray-400 text-sm mt-1">Industrial Piping Command Center</p>
47
+ </div>
48
+
49
+ <nav class="p-4">
50
+ <div class="mb-6">
51
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
52
+ <ul class="space-y-2">
53
+ <li>
54
+ <a href="index.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
55
+ <i data-feather="home" class="w-5 h-5"></i>
56
+ <span>Dashboard</span>
57
+ </a>
58
+ </li>
59
+ <li>
60
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
61
+ <i data-feather="dollar-sign" class="w-5 h-5"></i>
62
+ <span>Financial</span>
63
+ </a>
64
+ </li>
65
+ <li>
66
+ <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
67
+ <i data-feather="activity" class="w-5 h-5"></i>
68
+ <span>Tracking</span>
69
+ </a>
70
+ </li>
71
+ <li>
72
+ <a href="earned-value.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
73
+ <i data-feather="trending-up" class="w-5 h-5"></i>
74
+ <span>Earned Value</span>
75
+ </a>
76
+ </li>
77
+ <li>
78
+ <a href="plan-forecast.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
79
+ <i data-feather="calendar" class="w-5 h-5"></i>
80
+ <span>Plan & Forecast</span>
81
+ </a>
82
+ </li>
83
+ </ul>
84
+ </div>
85
+
86
+ <div>
87
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Settings</h3>
88
+ <ul class="space-y-2">
89
+ <li>
90
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
91
+ <i data-feather="user" class="w-5 h-5"></i>
92
+ <span>Profile</span>
93
+ </a>
94
+ </li>
95
+ <li>
96
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
97
+ <i data-feather="settings" class="w-5 h-5"></i>
98
+ <span>Preferences</span>
99
+ </a>
100
+ </li>
101
+ </ul>
102
+ </div>
103
+ </nav>
104
+ </div>
105
+
106
+ <!-- Main Content -->
107
+ <div class="flex-1 overflow-auto">
108
+ <!-- Top Navigation -->
109
+ <header class="bg-white shadow-sm">
110
+ <div class="flex items-center justify-between px-6 py-4">
111
+ <div class="flex items-center space-x-4">
112
+ <button id="sidebar-toggle" class="md:hidden text-gray-500">
113
+ <i data-feather="menu"></i>
114
+ </button>
115
+ <h2 class="text-xl font-semibold text-gray-800">Tracking Module</h2>
116
+ </div>
117
+
118
+ <div class="flex items-center space-x-4">
119
+ <div class="relative">
120
+ <i data-feather="bell" class="text-gray-500"></i>
121
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
122
+ </div>
123
+ <div class="flex items-center space-x-2">
124
+ <img src="https://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
125
+ <span class="text-sm font-medium">John Doe</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- Tracking Content -->
132
+ <main class="p-6">
133
+ <!-- Header -->
134
+ <div class="mb-6">
135
+ <div class="flex items-center justify-between">
136
+ <div>
137
+ <h3 class="text-lg font-semibold">Tracking Log</h3>
138
+ <p class="text-gray-600">Manage and update installed quantities for project tracking</p>
139
+ </div>
140
+ <button id="add-entry-btn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center">
141
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
142
+ Add Entry
143
+ </button>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Add Entry Form (Hidden by default) -->
148
+ <div id="entry-form" class="bg-white rounded-lg shadow mb-6 p-6 hidden">
149
+ <h4 class="text-md font-semibold mb-4">Add New Tracking Entry</h4>
150
+ <form id="tracking-form">
151
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
152
+ <div>
153
+ <label class="block text-sm font-medium text-gray-700 mb-1">Drawing Number</label>
154
+ <input type="text" id="drawing-number" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="e.g. PIP-1001">
155
+ </div>
156
+ <div>
157
+ <label class="block text-sm font-medium text-gray-700 mb-1">System</label>
158
+ <input type="text" id="system" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="e.g. Fire Water">
159
+ </div>
160
+ <div>
161
+ <label class="block text-sm font-medium text-gray-700 mb-1">Area</label>
162
+ <input type="text" id="area" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="e.g. Zone 3">
163
+ </div>
164
+ <div>
165
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
166
+ <select id="category" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md">
167
+ <option value="">Select Category</option>
168
+ <option value="Pipe Spool">Pipe Spool</option>
169
+ <option value="Welding">Welding</option>
170
+ <option value="Valve Handling">Valve Handling</option>
171
+ <option value="Pipe Support">Pipe Support</option>
172
+ <option value="Bolt up">Bolt up</option>
173
+ <option value="Hydro">Hydro</option>
174
+ <option value="QC Buy-off">QC Buy-off</option>
175
+ </select>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
180
+ <div>
181
+ <label class="block text-sm font-medium text-gray-700 mb-1">Budget Quantity</label>
182
+ <input type="number" id="budget-qty" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0">
183
+ </div>
184
+ <div>
185
+ <label class="block text-sm font-medium text-gray-700 mb-1">Installed Quantity</label>
186
+ <input type="number" id="installed-qty" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0">
187
+ </div>
188
+ <div>
189
+ <label class="block text-sm font-medium text-gray-700 mb-1">Unit Manhours</label>
190
+ <input type="number" id="unit-manhours" step="0.01" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0.00">
191
+ </div>
192
+ <div>
193
+ <label class="block text-sm font-medium text-gray-700 mb-1">Earned Man-Hours</label>
194
+ <input type="number" id="earned-manhours" step="0.01" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0.00" readonly>
195
+ </div>
196
+ <div>
197
+ <label class="block text-sm font-medium text-gray-700 mb-1">Percent Complete</label>
198
+ <input type="number" id="percent-complete" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0" readonly>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="flex justify-end space-x-3">
203
+ <button type="button" id="cancel-entry" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
204
+ <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save Entry</button>
205
+ </div>
206
+ </form>
207
+ </div>
208
+
209
+ <!-- Data Table -->
210
+ <div class="bg-white rounded-lg shadow overflow-hidden">
211
+ <div class="overflow-x-auto">
212
+ <table class="data-table min-w-full divide-y divide-gray-200">
213
+ <thead>
214
+ <tr>
215
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Drawing Number</th>
216
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">System</th>
217
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area</th>
218
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
219
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget Qty</th>
220
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Installed Qty</th>
221
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit Manhours</th>
222
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Earned Man-Hours</th>
223
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Percent Complete</th>
224
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
225
+ </tr>
226
+ </thead>
227
+ <tbody class="bg-white divide-y divide-gray-200">
228
+ <!-- Sample Data Row -->
229
+ <tr>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PIP-2001</td>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Fire Water</td>
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Zone 3</td>
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Pipe Spool</td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">120</td>
235
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">95</td>
236
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.5</td>
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">237.5</td>
238
+ <td class="px-6 py-4 whitespace-nowrap">
239
+ <div class="flex items-center">
240
+ <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
241
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 79%"></div>
242
+ </div>
243
+ <span class="text-sm text-gray-900">79%</span>
244
+ </div>
245
+ </td>
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
247
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
248
+ <i data-feather="edit" class="w-4 h-4"></i>
249
+ </button>
250
+ <button class="text-red-500 hover:text-red-700">
251
+ <i data-feather="trash" class="w-4 h-4"></i>
252
+ </button>
253
+ </td>
254
+ </tr>
255
+ <tr>
256
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PIP-2002</td>
257
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Process</td>
258
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Zone 2</td>
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Welding</td>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">85</td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">72</td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3.2</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">230.4</td>
264
+ <td class="px-6 py-4 whitespace-nowrap">
265
+ <div class="flex items-center">
266
+ <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
267
+ <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
268
+ </div>
269
+ <span class="text-sm text-gray-900">85%</span>
270
+ </div>
271
+ </td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
273
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
274
+ <i data-feather="edit" class="w-4 h-4"></i>
275
+ </button>
276
+ <button class="text-red-500 hover:text-red-700">
277
+ <i data-feather="trash" class="w-4 h-4"></i>
278
+ </button>
279
+ </td>
280
+ </tr>
281
+ <tr>
282
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PIP-3005</td>
283
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Steam</td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Zone 4</td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Pipe Support</td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">45</td>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">38</td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.8</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">68.4</td>
290
+ <td class="px-6 py-4 whitespace-nowrap">
291
+ <div class="flex items-center">
292
+ <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
293
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 84%"></div>
294
+ </div>
295
+ <span class="text-sm text-gray-900">84%</span>
296
+ </div>
297
+ </td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
299
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
300
+ <i data-feather="edit" class="w-4 h-4"></i>
301
+ </button>
302
+ <button class="text-red-500 hover:text-red-700">
303
+ <i data-feather="trash" class="w-4 h-4"></i>
304
+ </button>
305
+ </td>
306
+ </tr>
307
+ </tbody>
308
+ </table>
309
+ </div>
310
+ </div>
311
+ </main>
312
+ </div>
313
+ </div>
314
+
315
+ <script>
316
+ // Initialize Feather Icons
317
+ feather.replace();
318
+
319
+ // Initialize Vanta.js background
320
+ VANTA.NET({
321
+ el: "#vanta-bg",
322
+ color: 0x3b82f6,
323
+ backgroundColor: 0xf8fafc,
324
+ points: 12,
325
+ maxDistance: 20,
326
+ spacing: 15
327
+ });
328
+
329
+ // Toggle sidebar on mobile
330
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
331
+ document.querySelector('.sidebar').classList.toggle('translate-x-0');
332
+ });
333
+
334
+ // Show/hide entry form
335
+ document.getElementById('add-entry-btn').addEventListener('click', function() {
336
+ document.getElementById('entry-form').classList.toggle('hidden');
337
+ });
338
+
339
+ document.getElementById('cancel-entry').addEventListener('click', function() {
340
+ document.getElementById('entry-form').classList.add('hidden');
341
+ document.getElementById('tracking-form').reset();
342
+ });
343
+
344
+ // Calculate earned man-hours and percent complete
345
+ document.getElementById('installed-qty').addEventListener('input', calculateValues);
346
+ document.getElementById('unit-manhours').addEventListener('input', calculateValues);
347
+ document.getElementById('budget-qty').addEventListener('input', calculateValues);
348
+
349
+ function calculateValues() {
350
+ const installedQty = parseFloat(document.getElementById('installed-qty').value) || 0;
351
+ const unitManhours = parseFloat(document.getElementById('unit-manhours').value) || 0;
352
+ const budgetQty = parseFloat(document.getElementById('budget-qty').value) || 1;
353
+
354
+ const earnedManhours = installedQty * unitManhours;
355
+ const percentComplete = (installedQty / budgetQty) * 100;
356
+
357
+ document.getElementById('earned-manhours').value = earnedManhours.toFixed(2);
358
+ document.getElementById('percent-complete').value = isNaN(percentComplete) ? 0 : percentComplete.toFixed(0);
359
+ }
360
+
361
+ // Form submission
362
+ document.getElementById('tracking-form').addEventListener('submit', function(e) {
363
+ e.preventDefault();
364
+ // In a real application, this would submit to a server
365
+ alert('Entry saved successfully!');
366
+ document.getElementById('entry-form').classList.add('hidden');
367
+ this.reset();
368
+ });
369
+ </script>
370
+ </body>
371
+ </html>