Spaces:
Running
Running
Buatkan aplikasi yang memuat fitur berikut :
Browse files1. Manajemen Dokumen Digital
Semua dokumen proyek (check sheet, ITR, certificate, summary report) terpusat dalam satu sistem yang mampu menyimpan, mencari, dan mengontrol versi dokumen secara mudah dan aman.
2. Automasi Workflow & Progress Tracking
Sistem otomatis untuk penugasan, update status, approval, dan tracking progress pekerjaan mechanical completion, pre-commissioning, hingga handover. Progress dapat dipantau lewat dashboard visual.
3. Checklist & Inspection Form
Fitur pembuatan dan pengisian checklist digital (inspeksi, FAT/SAT, commissioning) yang bisa dikustomisasi sesuai SOP proyek. User bisa melakukan input data langsung dari lapangan.
4. Punch List dan Issue Tracking
Sistem untuk pencatatan temuan lapangan (punch list), penugasan solusi per item, serta tracking status penyelesaian secara real-time, termasuk notifikasi follow-up.
5. Pelaporan Otomatis & Audit Ready
Laporan serta rekap progres dapat diekspor otomatis dan audit trail disimpan sistem untuk kebutuhan compliance dan validasi kualitas.
6. Mobile & Cloud Integration
Mendukung akses dari lapangan melalui perangkat mobile serta sinkronisasi cloud, sehingga semua tim bisa update status, upload evidence (foto/dokumen), dan kolaborasi digital.
7. Asset & Barcode Management
Fitur manajemen aset proyek beserta tracking via barcode/QR code untuk identifikasi equipment, tag, hingga check sheet.
8. Kolaborasi Tim & Komunikasi
Mendukung pemberian tugas, catatan, dan chat/collaboration antar anggota tim dalam satu platform agar koordinasi lebih efisien
- project-management.html +405 -0
project-management.html
ADDED
|
@@ -0,0 +1,405 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Project Management System</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 |
+
.dashboard-card:hover {
|
| 11 |
+
transform: translateY(-5px);
|
| 12 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
| 13 |
+
}
|
| 14 |
+
.progress-bar {
|
| 15 |
+
transition: width 0.5s ease-in-out;
|
| 16 |
+
}
|
| 17 |
+
.document-card:hover .document-actions {
|
| 18 |
+
opacity: 1;
|
| 19 |
+
}
|
| 20 |
+
</style>
|
| 21 |
+
</head>
|
| 22 |
+
<body class="bg-gray-50">
|
| 23 |
+
<!-- Navigation -->
|
| 24 |
+
<nav class="bg-blue-800 text-white shadow-lg">
|
| 25 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 26 |
+
<div class="flex justify-between h-16 items-center">
|
| 27 |
+
<div class="flex items-center">
|
| 28 |
+
<div class="flex-shrink-0 flex items-center">
|
| 29 |
+
<i class="fas fa-project-diagram text-2xl mr-2"></i>
|
| 30 |
+
<span class="text-xl font-bold">ProjectHub</span>
|
| 31 |
+
</div>
|
| 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>
|
| 42 |
+
</div>
|
| 43 |
+
<div class="flex items-center">
|
| 44 |
+
<button class="p-1 rounded-full text-blue-200 hover:text-white focus:outline-none">
|
| 45 |
+
<i class="fas fa-bell"></i>
|
| 46 |
+
</button>
|
| 47 |
+
<div class="ml-3 relative">
|
| 48 |
+
<div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer">
|
| 49 |
+
<span class="text-white font-medium">AD</span>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
</nav>
|
| 56 |
+
|
| 57 |
+
<!-- Main Content -->
|
| 58 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
| 59 |
+
<!-- Dashboard Header -->
|
| 60 |
+
<div class="flex justify-between items-center mb-8">
|
| 61 |
+
<div>
|
| 62 |
+
<h1 class="text-3xl font-bold text-gray-800">Project Dashboard</h1>
|
| 63 |
+
<p class="text-gray-600">Welcome back, Admin! Here's your project overview.</p>
|
| 64 |
+
</div>
|
| 65 |
+
<div class="flex space-x-3">
|
| 66 |
+
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center">
|
| 67 |
+
<i class="fas fa-plus mr-2"></i> New Project
|
| 68 |
+
</button>
|
| 69 |
+
<button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 flex items-center">
|
| 70 |
+
<i class="fas fa-filter mr-2"></i> Filter
|
| 71 |
+
</button>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
|
| 75 |
+
<!-- Stats Cards -->
|
| 76 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
| 77 |
+
<div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300">
|
| 78 |
+
<div class="flex justify-between items-start">
|
| 79 |
+
<div>
|
| 80 |
+
<p class="text-gray-500">Total Projects</p>
|
| 81 |
+
<h3 class="text-3xl font-bold mt-2">24</h3>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="bg-blue-100 p-3 rounded-lg">
|
| 84 |
+
<i class="fas fa-folder-open text-blue-600"></i>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="mt-4">
|
| 88 |
+
<div class="flex items-center">
|
| 89 |
+
<span class="text-green-500 text-sm font-medium">+12%</span>
|
| 90 |
+
<span class="text-gray-500 text-sm ml-2">vs last month</span>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
|
| 95 |
+
<div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300">
|
| 96 |
+
<div class="flex justify-between items-start">
|
| 97 |
+
<div>
|
| 98 |
+
<p class="text-gray-500">Active Workflows</p>
|
| 99 |
+
<h3 class="text-3xl font-bold mt-2">156</h3>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="bg-green-100 p-3 rounded-lg">
|
| 102 |
+
<i class="fas fa-tasks text-green-600"></i>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="mt-4">
|
| 106 |
+
<div class="flex items-center">
|
| 107 |
+
<span class="text-green-500 text-sm font-medium">+8%</span>
|
| 108 |
+
<span class="text-gray-500 text-sm ml-2">vs last week</span>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300">
|
| 114 |
+
<div class="flex justify-between items-start">
|
| 115 |
+
<div>
|
| 116 |
+
<p class="text-gray-500">Pending Approvals</p>
|
| 117 |
+
<h3 class="text-3xl font-bold mt-2">42</h3>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="bg-yellow-100 p-3 rounded-lg">
|
| 120 |
+
<i class="fas fa-clipboard-check text-yellow-600"></i>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
<div class="mt-4">
|
| 124 |
+
<div class="flex items-center">
|
| 125 |
+
<span class="text-red-500 text-sm font-medium">-5%</span>
|
| 126 |
+
<span class="text-gray-500 text-sm ml-2">vs yesterday</span>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
|
| 131 |
+
<div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300">
|
| 132 |
+
<div class="flex justify-between items-start">
|
| 133 |
+
<div>
|
| 134 |
+
<p class="text-gray-500">Open Issues</p>
|
| 135 |
+
<h3 class="text-3xl font-bold mt-2">89</h3>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="bg-red-100 p-3 rounded-lg">
|
| 138 |
+
<i class="fas fa-exclamation-triangle text-red-600"></i>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="mt-4">
|
| 142 |
+
<div class="flex items-center">
|
| 143 |
+
<span class="text-red-500 text-sm font-medium">+15%</span>
|
| 144 |
+
<span class="text-gray-500 text-sm ml-2">vs last week</span>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
|
| 150 |
+
<!-- Project Progress -->
|
| 151 |
+
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
| 152 |
+
<div class="flex justify-between items-center mb-6">
|
| 153 |
+
<h2 class="text-xl font-bold text-gray-800">Project Progress</h2>
|
| 154 |
+
<select class="border border-gray-300 rounded-md px-3 py-1 bg-white text-gray-700">
|
| 155 |
+
<option>All Projects</option>
|
| 156 |
+
<option>Mechanical Completion</option>
|
| 157 |
+
<option>Pre-Commissioning</option>
|
| 158 |
+
<option>Commissioning</option>
|
| 159 |
+
</select>
|
| 160 |
+
</div>
|
| 161 |
+
|
| 162 |
+
<div class="space-y-6">
|
| 163 |
+
<!-- Project 1 -->
|
| 164 |
+
<div>
|
| 165 |
+
<div class="flex justify-between mb-1">
|
| 166 |
+
<span class="font-medium">EPC Project A - Mechanical</span>
|
| 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>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
|
| 178 |
+
<!-- Project 2 -->
|
| 179 |
+
<div>
|
| 180 |
+
<div class="flex justify-between mb-1">
|
| 181 |
+
<span class="font-medium">Turnaround Project B - 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%"></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>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
|
| 193 |
+
<!-- Project 3 -->
|
| 194 |
+
<div>
|
| 195 |
+
<div class="flex justify-between mb-1">
|
| 196 |
+
<span class="font-medium">Greenfield Project C - Handover</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%"></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>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
</div>
|
| 208 |
+
</div>
|
| 209 |
+
|
| 210 |
+
<!-- Recent Documents & Activities -->
|
| 211 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
| 212 |
+
<!-- Recent Documents -->
|
| 213 |
+
<div class="bg-white rounded-lg shadow-md p-6">
|
| 214 |
+
<div class="flex justify-between items-center mb-6">
|
| 215 |
+
<h2 class="text-xl font-bold text-gray-800">Recent Documents</h2>
|
| 216 |
+
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<div class="space-y-4">
|
| 220 |
+
<div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200">
|
| 221 |
+
<div class="flex justify-between">
|
| 222 |
+
<div class="flex items-start">
|
| 223 |
+
<div class="bg-blue-100 p-2 rounded-lg mr-3">
|
| 224 |
+
<i class="fas fa-file-pdf text-blue-600"></i>
|
| 225 |
+
</div>
|
| 226 |
+
<div>
|
| 227 |
+
<h3 class="font-medium">ITR-001 Mechanical Completion</h3>
|
| 228 |
+
<p class="text-sm text-gray-500">EPC Project A • Version 1.2</p>
|
| 229 |
+
<div class="flex items-center mt-1 text-sm text-gray-500">
|
| 230 |
+
<span>Updated 2 hours ago</span>
|
| 231 |
+
<span class="mx-2">•</span>
|
| 232 |
+
<span>John Doe</span>
|
| 233 |
+
</div>
|
| 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 |
+
|
| 243 |
+
<div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200">
|
| 244 |
+
<div class="flex justify-between">
|
| 245 |
+
<div class="flex items-start">
|
| 246 |
+
<div class="bg-green-100 p-2 rounded-lg mr-3">
|
| 247 |
+
<i class="fas fa-file-excel text-green-600"></i>
|
| 248 |
+
</div>
|
| 249 |
+
<div>
|
| 250 |
+
<h3 class="font-medium">Check Sheet - Pump P-101</h3>
|
| 251 |
+
<p class="text-sm text-gray-500">Turnaround Project B • Version 3.1</p>
|
| 252 |
+
<div class="flex items-center mt-1 text-sm text-gray-500">
|
| 253 |
+
<span>Updated yesterday</span>
|
| 254 |
+
<span class="mx-2">•</span>
|
| 255 |
+
<span>Jane Smith</span>
|
| 256 |
+
</div>
|
| 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 |
+
|
| 266 |
+
<div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200">
|
| 267 |
+
<div class="flex justify-between">
|
| 268 |
+
<div class="flex items-start">
|
| 269 |
+
<div class="bg-purple-100 p-2 rounded-lg mr-3">
|
| 270 |
+
<i class="fas fa-file-word text-purple-600"></i>
|
| 271 |
+
</div>
|
| 272 |
+
<div>
|
| 273 |
+
<h3 class="font-medium">Commissioning Procedure</h3>
|
| 274 |
+
<p class="text-sm text-gray-500">Greenfield Project C • Version 2.0</p>
|
| 275 |
+
<div class="flex items-center mt-1 text-sm text-gray-500">
|
| 276 |
+
<span>Updated 3 days ago</span>
|
| 277 |
+
<span class="mx-2">•</span>
|
| 278 |
+
<span>Mike Johnson</span>
|
| 279 |
+
</div>
|
| 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>
|
| 289 |
+
|
| 290 |
+
<button class="mt-4 w-full py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-300 hover:text-blue-600 transition-colors duration-200">
|
| 291 |
+
<i class="fas fa-plus mr-2"></i> Upload New Document
|
| 292 |
+
</button>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<!-- Recent Activities -->
|
| 296 |
+
<div class="bg-white rounded-lg shadow-md p-6">
|
| 297 |
+
<div class="flex justify-between items-center mb-6">
|
| 298 |
+
<h2 class="text-xl font-bold text-gray-800">Recent Activities</h2>
|
| 299 |
+
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
|
| 300 |
+
</div>
|
| 301 |
+
|
| 302 |
+
<div class="space-y-4">
|
| 303 |
+
<div class="flex items-start">
|
| 304 |
+
<div class="bg-blue-100 p-2 rounded-full mr-3">
|
| 305 |
+
<i class="fas fa-tasks text-blue-600 text-sm"></i>
|
| 306 |
+
</div>
|
| 307 |
+
<div>
|
| 308 |
+
<p class="text-sm"><span class="font-medium">Sarah Lee</span> completed checklist <span class="font-medium">Pump Alignment</span> for <span class="text-blue-600">P-101</span></p>
|
| 309 |
+
<p class="text-xs text-gray-500 mt-1">2 hours ago • EPC Project A</p>
|
| 310 |
+
</div>
|
| 311 |
+
</div>
|
| 312 |
+
|
| 313 |
+
<div class="flex items-start">
|
| 314 |
+
<div class="bg-green-100 p-2 rounded-full mr-3">
|
| 315 |
+
<i class="fas fa-check-circle text-green-600 text-sm"></i>
|
| 316 |
+
</div>
|
| 317 |
+
<div>
|
| 318 |
+
<p class="text-sm"><span class="font-medium">David Kim</span> approved <span class="font-medium">ITR-002</span> for Mechanical Completion</p>
|
| 319 |
+
<p class="text-xs text-gray-500 mt-1">5 hours ago • Turnaround Project B</p>
|
| 320 |
+
</div>
|
| 321 |
+
</div>
|
| 322 |
+
|
| 323 |
+
<div class="flex items-start">
|
| 324 |
+
<div class="bg-yellow-100 p-2 rounded-full mr-3">
|
| 325 |
+
<i class="fas fa-exclamation-triangle text-yellow-600 text-sm"></i>
|
| 326 |
+
</div>
|
| 327 |
+
<div>
|
| 328 |
+
<p class="text-sm"><span class="font-medium">System</span> assigned punch item <span class="text-yellow-600">#PL-204</span> to <span class="font-medium">John Doe</span></p>
|
| 329 |
+
<p class="text-xs text-gray-500 mt-1">Yesterday • Greenfield Project C</p>
|
| 330 |
+
</div>
|
| 331 |
+
</div>
|
| 332 |
+
|
| 333 |
+
<div class="flex items-start">
|
| 334 |
+
<div class="bg-purple-100 p-2 rounded-full mr-3">
|
| 335 |
+
<i class="fas fa-file-upload text-purple-600 text-sm"></i>
|
| 336 |
+
</div>
|
| 337 |
+
<div>
|
| 338 |
+
<p class="text-sm"><span class="font-medium">Emma Wilson</span> uploaded new version of <span class="font-medium">Commissioning Procedure</span></p>
|
| 339 |
+
<p class="text-xs text-gray-500 mt-1">Yesterday • EPC Project A</p>
|
| 340 |
+
</div>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<div class="flex items-start">
|
| 344 |
+
<div class="bg-red-100 p-2 rounded-full mr-3">
|
| 345 |
+
<i class="fas fa-comment-dots text-red-600 text-sm"></i>
|
| 346 |
+
</div>
|
| 347 |
+
<div>
|
| 348 |
+
<p class="text-sm"><span class="font-medium">Mark Taylor</span> commented on punch item <span class="text-red-600">#PL-198</span></p>
|
| 349 |
+
<p class="text-xs text-gray-500 mt-1">2 days ago • Turnaround Project B</p>
|
| 350 |
+
</div>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
|
| 357 |
+
<!-- Mobile Bottom Navigation (hidden on desktop) -->
|
| 358 |
+
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200">
|
| 359 |
+
<div class="flex justify-around py-3">
|
| 360 |
+
<a href="#" class="text-blue-600 flex flex-col items-center">
|
| 361 |
+
<i class="fas fa-home"></i>
|
| 362 |
+
<span class="text-xs mt-1">Home</span>
|
| 363 |
+
</a>
|
| 364 |
+
<a href="#" class="text-gray-600 flex flex-col items-center">
|
| 365 |
+
<i class="fas fa-tasks"></i>
|
| 366 |
+
<span class="text-xs mt-1">Tasks</span>
|
| 367 |
+
</a>
|
| 368 |
+
<a href="#" class="text-gray-600 flex flex-col items-center">
|
| 369 |
+
<i class="fas fa-file"></i>
|
| 370 |
+
<span class="text-xs mt-1">Docs</span>
|
| 371 |
+
</a>
|
| 372 |
+
<a href="#" class="text-gray-600 flex flex-col items-center">
|
| 373 |
+
<i class="fas fa-cog"></i>
|
| 374 |
+
<span class="text-xs mt-1">Settings</span>
|
| 375 |
+
</a>
|
| 376 |
+
</div>
|
| 377 |
+
</div>
|
| 378 |
+
|
| 379 |
+
<script>
|
| 380 |
+
// Document version control functionality
|
| 381 |
+
document.querySelectorAll('.document-card').forEach(card => {
|
| 382 |
+
card.addEventListener('mouseenter', function() {
|
| 383 |
+
this.querySelector('.document-actions').style.opacity = '1';
|
| 384 |
+
});
|
| 385 |
+
card.addEventListener('mouseleave', function() {
|
| 386 |
+
this.querySelector('.document-actions').style.opacity = '0';
|
| 387 |
+
});
|
| 388 |
+
});
|
| 389 |
+
|
| 390 |
+
// Barcode scanning simulation
|
| 391 |
+
function scanBarcode() {
|
| 392 |
+
alert('Barcode scanning would be implemented here using device camera API');
|
| 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) {
|
| 399 |
+
console.log('Online - syncing data with cloud');
|
| 400 |
+
} else {
|
| 401 |
+
console.log('Offline - working in offline mode, changes will sync when online');
|
| 402 |
+
}
|
| 403 |
+
</script>
|
| 404 |
+
</body>
|
| 405 |
+
</html>
|