Hugging Face's logo

Spaces:
alterzick
/
completionflow-pro
Running

App Files Community
alterzick commited on
Commit
f5995fc
·
verified ·
1 Parent(s): 175e918

continue to create link to document for update project and process project and to change status project with evident from document upload and approval status

Browse files
Files changed (2) hide show
  1. document-management.html +351 -0
  2. project-management.html +51 -19
document-management.html ADDED
@@ -0,0 +1,351 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Document Management | ProjectHub</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <style>
10
+ .document-card:hover {
11
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
12
+ transform: translateY(-2px);
13
+ }
14
+ .status-badge {
15
+ font-size: 0.75rem;
16
+ padding: 0.25rem 0.5rem;
17
+ }
18
+ .tab-active {
19
+ border-bottom: 2px solid #3b82f6;
20
+ color: #3b82f6;
21
+ font-weight: 600;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <!-- Navigation -->
27
+ <nav class="bg-blue-800 text-white shadow-lg">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16 items-center">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <i class="fas fa-project-diagram text-2xl mr-2"></i>
33
+ <span class="text-xl font-bold">ProjectHub</span>
34
+ </div>
35
+ </div>
36
+ <div class="hidden md:block">
37
+ <div class="ml-10 flex items-center space-x-4">
38
+ <a href="project-management.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Dashboard</a>
39
+ <a href="document-management.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700">Documents</a>
40
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Workflows</a>
41
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Checklists</a>
42
+ </div>
43
+ </div>
44
+ <div class="flex items-center">
45
+ <button class="p-1 rounded-full text-blue-200 hover:text-white focus:outline-none">
46
+ <i class="fas fa-bell"></i>
47
+ </button>
48
+ <div class="ml-3 relative">
49
+ <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer">
50
+ <span class="text-white font-medium">AD</span>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Main Content -->
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
60
+ <!-- Page Header -->
61
+ <div class="flex justify-between items-center mb-8">
62
+ <div>
63
+ <h1 class="text-3xl font-bold text-gray-800">Document Management</h1>
64
+ <p class="text-gray-600">Upload, track and approve project documents</p>
65
+ </div>
66
+ <button id="uploadDocumentBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center">
67
+ <i class="fas fa-upload mr-2"></i> Upload Document
68
+ </button>
69
+ </div>
70
+
71
+ <!-- Tabs -->
72
+ <div class="border-b border-gray-200 mb-6">
73
+ <nav class="flex space-x-8">
74
+ <button class="tab-active py-4 px-1 inline-flex items-center">
75
+ All Documents
76
+ </button>
77
+ <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center">
78
+ Pending Approval
79
+ </button>
80
+ <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center">
81
+ Approved
82
+ </button>
83
+ <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center">
84
+ Rejected
85
+ </button>
86
+ </nav>
87
+ </div>
88
+
89
+ <!-- Filters -->
90
+ <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
91
+ <div class="flex flex-wrap items-center gap-4">
92
+ <div class="flex-1 min-w-[200px]">
93
+ <label class="block text-sm font-medium text-gray-700 mb-1">Project</label>
94
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2">
95
+ <option>All Projects</option>
96
+ <option>EPC Project A</option>
97
+ <option>Turnaround Project B</option>
98
+ <option>Greenfield Project C</option>
99
+ </select>
100
+ </div>
101
+ <div class="flex-1 min-w-[200px]">
102
+ <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label>
103
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2">
104
+ <option>All Types</option>
105
+ <option>ITR Forms</option>
106
+ <option>Check Sheets</option>
107
+ <option>Procedures</option>
108
+ <option>Reports</option>
109
+ </select>
110
+ </div>
111
+ <div class="flex-1 min-w-[200px]">
112
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
113
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2">
114
+ <option>All Statuses</option>
115
+ <option>Draft</option>
116
+ <option>Submitted</option>
117
+ <option>Approved</option>
118
+ <option>Rejected</option>
119
+ </select>
120
+ </div>
121
+ <div class="flex items-end">
122
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
123
+ Apply Filters
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Documents Grid -->
130
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
131
+ <div class="overflow-x-auto">
132
+ <table class="min-w-full divide-y divide-gray-200">
133
+ <thead class="bg-gray-50">
134
+ <tr>
135
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document</th>
136
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
137
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
139
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
140
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
141
+ </tr>
142
+ </thead>
143
+ <tbody class="bg-white divide-y divide-gray-200">
144
+ <!-- Document 1 -->
145
+ <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer">
146
+ <td class="px-6 py-4 whitespace-nowrap">
147
+ <div class="flex items-center">
148
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
149
+ <i class="fas fa-file-pdf text-blue-600"></i>
150
+ </div>
151
+ <div class="ml-4">
152
+ <div class="text-sm font-medium text-gray-900">ITR-001 Mechanical Completion</div>
153
+ <div class="text-sm text-gray-500">Updated 2 hours ago</div>
154
+ </div>
155
+ </div>
156
+ </td>
157
+ <td class="px-6 py-4 whitespace-nowrap">
158
+ <div class="text-sm text-gray-900">EPC Project A</div>
159
+ </td>
160
+ <td class="px-6 py-4 whitespace-nowrap">
161
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">ITR Form</span>
162
+ </td>
163
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2</td>
164
+ <td class="px-6 py-4 whitespace-nowrap">
165
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
166
+ </td>
167
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
168
+ <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('itr-001')">View</button>
169
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
170
+ </td>
171
+ </tr>
172
+
173
+ <!-- Document 2 -->
174
+ <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer">
175
+ <td class="px-6 py-4 whitespace-nowrap">
176
+ <div class="flex items-center">
177
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
178
+ <i class="fas fa-file-excel text-green-600"></i>
179
+ </div>
180
+ <div class="ml-4">
181
+ <div class="text-sm font-medium text-gray-900">Check Sheet - Pump P-101</div>
182
+ <div class="text-sm text-gray-500">Updated yesterday</div>
183
+ </div>
184
+ </div>
185
+ </td>
186
+ <td class="px-6 py-4 whitespace-nowrap">
187
+ <div class="text-sm text-gray-900">Turnaround Project B</div>
188
+ </td>
189
+ <td class="px-6 py-4 whitespace-nowrap">
190
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Check Sheet</span>
191
+ </td>
192
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.1</td>
193
+ <td class="px-6 py-4 whitespace-nowrap">
194
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Review</span>
195
+ </td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
197
+ <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('pump-check')">Review</button>
198
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
199
+ </td>
200
+ </tr>
201
+
202
+ <!-- Document 3 -->
203
+ <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer">
204
+ <td class="px-6 py-4 whitespace-nowrap">
205
+ <div class="flex items-center">
206
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
207
+ <i class="fas fa-file-word text-purple-600"></i>
208
+ </div>
209
+ <div class="ml-4">
210
+ <div class="text-sm font-medium text-gray-900">Commissioning Procedure</div>
211
+ <div class="text-sm text-gray-500">Updated 3 days ago</div>
212
+ </div>
213
+ </div>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <div class="text-sm text-gray-900">Greenfield Project C</div>
217
+ </td>
218
+ <td class="px-6 py-4 whitespace-nowrap">
219
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Procedure</span>
220
+ </td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.0</td>
222
+ <td class="px-6 py-4 whitespace-nowrap">
223
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Rejected</span>
224
+ </td>
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
226
+ <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('commissioning-proc')">View</button>
227
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
228
+ </td>
229
+ </tr>
230
+
231
+ <!-- Document 4 -->
232
+ <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer">
233
+ <td class="px-6 py-4 whitespace-nowrap">
234
+ <div class="flex items-center">
235
+ <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center">
236
+ <i class="fas fa-file-image text-yellow-600"></i>
237
+ </div>
238
+ <div class="ml-4">
239
+ <div class="text-sm font-medium text-gray-900">As-Built Drawing</div>
240
+ <div class="text-sm text-gray-500">Updated 1 week ago</div>
241
+ </div>
242
+ </div>
243
+ </td>
244
+ <td class="px-6 py-4 whitespace-nowrap">
245
+ <div class="text-sm text-gray-900">EPC Project A</div>
246
+ </td>
247
+ <td class="px-6 py-4 whitespace-nowrap">
248
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Drawing</span>
249
+ </td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.5</td>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Under Revision</span>
253
+ </td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
255
+ <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('as-built')">Edit</button>
256
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
257
+ </td>
258
+ </tr>
259
+ </tbody>
260
+ </table>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Upload Modal -->
265
+ <div id="uploadModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
266
+ <div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white">
267
+ <div class="flex justify-between items-center mb-4">
268
+ <h3 class="text-lg font-medium text-gray-900">Upload New Document</h3>
269
+ <button onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
270
+ <i class="fas fa-times"></i>
271
+ </button>
272
+ </div>
273
+ <div class="space-y-4">
274
+ <div>
275
+ <label class="block text-sm font-medium text-gray-700 mb-1">Project</label>
276
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2">
277
+ <option>EPC Project A</option>
278
+ <option>Turnaround Project B</option>
279
+ <option>Greenfield Project C</option>
280
+ </select>
281
+ </div>
282
+ <div>
283
+ <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label>
284
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2">
285
+ <option>ITR Form</option>
286
+ <option>Check Sheet</option>
287
+ <option>Procedure</option>
288
+ <option>Report</option>
289
+ <option>Drawing</option>
290
+ </select>
291
+ </div>
292
+ <div>
293
+ <label class="block text-sm font-medium text-gray-700 mb-1">Document Title</label>
294
+ <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Enter document title">
295
+ </div>
296
+ <div>
297
+ <label class="block text-sm font-medium text-gray-700 mb-1">Version</label>
298
+ <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="1.0">
299
+ </div>
300
+ <div>
301
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload File</label>
302
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
303
+ <div class="space-y-1 text-center">
304
+ <div class="flex text-sm text-gray-600">
305
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
306
+ <span>Upload a file</span>
307
+ <input type="file" class="sr-only">
308
+ </label>
309
+ <p class="pl-1">or drag and drop</p>
310
+ </div>
311
+ <p class="text-xs text-gray-500">PDF, DOCX, XLSX, JPG up to 10MB</p>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="flex justify-end space-x-3 pt-4">
316
+ <button onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
317
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Upload Document</button>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <script>
325
+ // Modal functions
326
+ function openModal() {
327
+ document.getElementById('uploadModal').classList.remove('hidden');
328
+ }
329
+
330
+ function closeModal() {
331
+ document.getElementById('uploadModal').classList.add('hidden');
332
+ }
333
+
334
+ // View document function
335
+ function viewDocument(docId) {
336
+ alert(`Would open document viewer for ${docId} - in real implementation would show document with approval workflow`);
337
+ // In real implementation would show document with approval buttons/status
338
+ }
339
+
340
+ // Event listeners
341
+ document.getElementById('uploadDocumentBtn').addEventListener('click', openModal);
342
+
343
+ // Update project status when document is approved
344
+ function updateProjectStatus(projectId, newStatus, documentId) {
345
+ console.log(`Updating project ${projectId} to ${newStatus} based on document ${documentId}`);
346
+ // In real implementation would make API call to update project status
347
+ // and potentially trigger notifications/workflows
348
+ }
349
+ </script>
350
+ </body>
351
+ </html>
project-management.html CHANGED
@@ -32,10 +32,10 @@
32
  </div>
33
  <div class="hidden md:block">
34
  <div class="ml-10 flex items-center space-x-4">
35
- <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700">Dashboard</a>
36
- <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Documents</a>
37
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Workflows</a>
38
- <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Checklists</a>
39
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Assets</a>
40
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Reports</a>
41
  </div>
@@ -167,8 +167,8 @@
167
  <span class="font-medium">75%</span>
168
  </div>
169
  <div class="w-full bg-gray-200 rounded-full h-2.5">
170
- <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 75%"></div>
171
- </div>
172
  <div class="flex justify-between text-sm text-gray-500 mt-1">
173
  <span>42/56 systems completed</span>
174
  <span>Next milestone: Pre-Commissioning</span>
@@ -182,8 +182,8 @@
182
  <span class="font-medium">32%</span>
183
  </div>
184
  <div class="w-full bg-gray-200 rounded-full h-2.5">
185
- <div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 32%"></div>
186
- </div>
187
  <div class="flex justify-between text-sm text-gray-500 mt-1">
188
  <span>18/56 systems completed</span>
189
  <span>Next milestone: System Testing</span>
@@ -197,8 +197,8 @@
197
  <span class="font-medium">89%</span>
198
  </div>
199
  <div class="w-full bg-gray-200 rounded-full h-2.5">
200
- <div class="bg-purple-500 h-2.5 rounded-full progress-bar" style="width: 89%"></div>
201
- </div>
202
  <div class="flex justify-between text-sm text-gray-500 mt-1">
203
  <span>89/100 punch items closed</span>
204
  <span>Next milestone: Final Documentation</span>
@@ -234,9 +234,10 @@
234
  </div>
235
  </div>
236
  <div class="document-actions opacity-0 transition-opacity duration-200">
237
- <button class="text-blue-600 hover:text-blue-800 p-1"><i class="fas fa-download"></i></button>
238
- <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-share"></i></button>
239
- </div>
 
240
  </div>
241
  </div>
242
 
@@ -257,9 +258,10 @@
257
  </div>
258
  </div>
259
  <div class="document-actions opacity-0 transition-opacity duration-200">
260
- <button class="text-blue-600 hover:text-blue-800 p-1"><i class="fas fa-download"></i></button>
261
- <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-share"></i></button>
262
- </div>
 
263
  </div>
264
  </div>
265
 
@@ -280,9 +282,10 @@
280
  </div>
281
  </div>
282
  <div class="document-actions opacity-0 transition-opacity duration-200">
283
- <button class="text-blue-600 hover:text-blue-800 p-1"><i class="fas fa-download"></i></button>
284
- <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-share"></i></button>
285
- </div>
 
286
  </div>
287
  </div>
288
  </div>
@@ -393,6 +396,35 @@
393
  // In real implementation would use:
394
  // navigator.mediaDevices.getUserMedia or QuaggaJS for barcode scanning
395
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
 
397
  // Mobile offline sync simulation
398
  if (navigator.onLine) {
@@ -400,6 +432,6 @@
400
  } else {
401
  console.log('Offline - working in offline mode, changes will sync when online');
402
  }
403
- </script>
404
  </body>
405
  </html>
 
32
  </div>
33
  <div class="hidden md:block">
34
  <div class="ml-10 flex items-center space-x-4">
35
+ <a href="project-management.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700">Dashboard</a>
36
+ <a href="document-management.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Documents</a>
37
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Workflows</a>
38
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Checklists</a>
39
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Assets</a>
40
  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Reports</a>
41
  </div>
 
167
  <span class="font-medium">75%</span>
168
  </div>
169
  <div class="w-full bg-gray-200 rounded-full h-2.5">
170
+ <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 75%" data-project="epc-a"></div>
171
+ </div>
172
  <div class="flex justify-between text-sm text-gray-500 mt-1">
173
  <span>42/56 systems completed</span>
174
  <span>Next milestone: Pre-Commissioning</span>
 
182
  <span class="font-medium">32%</span>
183
  </div>
184
  <div class="w-full bg-gray-200 rounded-full h-2.5">
185
+ <div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 32%" data-project="turnaround-b"></div>
186
+ </div>
187
  <div class="flex justify-between text-sm text-gray-500 mt-1">
188
  <span>18/56 systems completed</span>
189
  <span>Next milestone: System Testing</span>
 
197
  <span class="font-medium">89%</span>
198
  </div>
199
  <div class="w-full bg-gray-200 rounded-full h-2.5">
200
+ <div class="bg-purple-500 h-2.5 rounded-full progress-bar" style="width: 89%" data-project="greenfield-c"></div>
201
+ </div>
202
  <div class="flex justify-between text-sm text-gray-500 mt-1">
203
  <span>89/100 punch items closed</span>
204
  <span>Next milestone: Final Documentation</span>
 
234
  </div>
235
  </div>
236
  <div class="document-actions opacity-0 transition-opacity duration-200">
237
+ <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('itr-001')"><i class="fas fa-eye"></i></button>
238
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button>
239
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2" onclick="updateProjectStatus('epc-a', 'mechanical-complete', 'itr-001')"><i class="fas fa-check-circle"></i></button>
240
+ </div>
241
  </div>
242
  </div>
243
 
 
258
  </div>
259
  </div>
260
  <div class="document-actions opacity-0 transition-opacity duration-200">
261
+ <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('pump-check')"><i class="fas fa-eye"></i></button>
262
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button>
263
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2" onclick="updateProjectStatus('turnaround-b', 'testing', 'pump-check')"><i class="fas fa-check-circle"></i></button>
264
+ </div>
265
  </div>
266
  </div>
267
 
 
282
  </div>
283
  </div>
284
  <div class="document-actions opacity-0 transition-opacity duration-200">
285
+ <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('commissioning-proc')"><i class="fas fa-eye"></i></button>
286
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button>
287
+ <button class="text-blue-600 hover:text-blue-800 p-1 ml-2" onclick="updateProjectStatus('greenfield-c', 'commissioning', 'commissioning-proc')"><i class="fas fa-check-circle"></i></button>
288
+ </div>
289
  </div>
290
  </div>
291
  </div>
 
396
  // In real implementation would use:
397
  // navigator.mediaDevices.getUserMedia or QuaggaJS for barcode scanning
398
  }
399
+ // Document and project status functions
400
+ function viewDocument(docId) {
401
+ window.location.href = `document-management.html#${docId}`;
402
+ }
403
+
404
+ function updateProjectStatus(projectId, newStatus, documentId) {
405
+ if (confirm(`Update project ${projectId} to ${newStatus} based on document ${documentId}?`)) {
406
+ // In real implementation would make API call to update status
407
+ alert(`Project ${projectId} status updated to ${newStatus}`);
408
+ // Refresh project progress bars
409
+ document.querySelectorAll('.progress-bar').forEach(bar => {
410
+ if (bar.getAttribute('data-project') === projectId) {
411
+ const newWidth = getNewWidthForStatus(newStatus);
412
+ bar.style.width = newWidth;
413
+ bar.previousElementSibling.textContent = newWidth;
414
+ }
415
+ });
416
+ }
417
+ }
418
+
419
+ function getNewWidthForStatus(status) {
420
+ // Simplified for demo - would calculate based on actual project phase
421
+ const statusMap = {
422
+ 'mechanical-complete': '75%',
423
+ 'testing': '32%',
424
+ 'commissioning': '89%'
425
+ };
426
+ return statusMap[status] || '50%';
427
+ }
428
 
429
  // Mobile offline sync simulation
430
  if (navigator.onLine) {
 
432
  } else {
433
  console.log('Offline - working in offline mode, changes will sync when online');
434
  }
435
+ </script>
436
  </body>
437
  </html>