Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Project Management System</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .document-card:hover .document-actions { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-800 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-project-diagram text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">ProjectHub</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4"> | |
| <a href="project-management.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700">Dashboard</a> | |
| <a href="document-management.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Documents</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Workflows</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Checklists</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Assets</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Reports</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="p-1 rounded-full text-blue-200 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer"> | |
| <span class="text-white font-medium">AD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Dashboard Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Project Dashboard</h1> | |
| <p class="text-gray-600">Welcome back, Admin! Here's your project overview.</p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Projects</p> | |
| <h3 class="text-3xl font-bold mt-2">24</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-folder-open text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-green-500 text-sm font-medium">+12%</span> | |
| <span class="text-gray-500 text-sm ml-2">vs last month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Active Workflows</p> | |
| <h3 class="text-3xl font-bold mt-2">156</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-tasks text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-green-500 text-sm font-medium">+8%</span> | |
| <span class="text-gray-500 text-sm ml-2">vs last week</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Pending Approvals</p> | |
| <h3 class="text-3xl font-bold mt-2">42</h3> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-lg"> | |
| <i class="fas fa-clipboard-check text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-red-500 text-sm font-medium">-5%</span> | |
| <span class="text-gray-500 text-sm ml-2">vs yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6 dashboard-card transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Open Issues</p> | |
| <h3 class="text-3xl font-bold mt-2">89</h3> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-lg"> | |
| <i class="fas fa-exclamation-triangle text-red-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-red-500 text-sm font-medium">+15%</span> | |
| <span class="text-gray-500 text-sm ml-2">vs last week</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Progress --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">Project Progress</h2> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 bg-white text-gray-700"> | |
| <option>All Projects</option> | |
| <option>Mechanical Completion</option> | |
| <option>Pre-Commissioning</option> | |
| <option>Commissioning</option> | |
| </select> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Project 1 --> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">EPC Project A - Mechanical</span> | |
| <span class="font-medium">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 75%" data-project="epc-a"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>42/56 systems completed</span> | |
| <span>Next milestone: Pre-Commissioning</span> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Turnaround Project B - Commissioning</span> | |
| <span class="font-medium">32%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 32%" data-project="turnaround-b"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>18/56 systems completed</span> | |
| <span>Next milestone: System Testing</span> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Greenfield Project C - Handover</span> | |
| <span class="font-medium">89%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full progress-bar" style="width: 89%" data-project="greenfield-c"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>89/100 punch items closed</span> | |
| <span>Next milestone: Final Documentation</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Documents & Activities --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Recent Documents --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">Recent Documents</h2> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-file-pdf text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">ITR-001 Mechanical Completion</h3> | |
| <p class="text-sm text-gray-500">EPC Project A • Version 1.2</p> | |
| <div class="flex items-center mt-1 text-sm text-gray-500"> | |
| <span>Updated 2 hours ago</span> | |
| <span class="mx-2">•</span> | |
| <span>John Doe</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-actions opacity-0 transition-opacity duration-200"> | |
| <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('itr-001')"><i class="fas fa-eye"></i></button> | |
| <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-file-excel text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Check Sheet - Pump P-101</h3> | |
| <p class="text-sm text-gray-500">Turnaround Project B • Version 3.1</p> | |
| <div class="flex items-center mt-1 text-sm text-gray-500"> | |
| <span>Updated yesterday</span> | |
| <span class="mx-2">•</span> | |
| <span>Jane Smith</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-actions opacity-0 transition-opacity duration-200"> | |
| <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('pump-check')"><i class="fas fa-eye"></i></button> | |
| <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-card border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors duration-200"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-file-word text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Commissioning Procedure</h3> | |
| <p class="text-sm text-gray-500">Greenfield Project C • Version 2.0</p> | |
| <div class="flex items-center mt-1 text-sm text-gray-500"> | |
| <span>Updated 3 days ago</span> | |
| <span class="mx-2">•</span> | |
| <span>Mike Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-actions opacity-0 transition-opacity duration-200"> | |
| <button class="text-blue-600 hover:text-blue-800 p-1" onclick="viewDocument('commissioning-proc')"><i class="fas fa-eye"></i></button> | |
| <button class="text-blue-600 hover:text-blue-800 p-1 ml-2"><i class="fas fa-download"></i></button> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> Upload New Document | |
| </button> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">Recent Activities</h2> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-tasks text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <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> | |
| <p class="text-xs text-gray-500 mt-1">2 hours ago • EPC Project A</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle text-green-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">David Kim</span> approved <span class="font-medium">ITR-002</span> for Mechanical Completion</p> | |
| <p class="text-xs text-gray-500 mt-1">5 hours ago • Turnaround Project B</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <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> | |
| <p class="text-xs text-gray-500 mt-1">Yesterday • Greenfield Project C</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-file-upload text-purple-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Emma Wilson</span> uploaded new version of <span class="font-medium">Commissioning Procedure</span></p> | |
| <p class="text-xs text-gray-500 mt-1">Yesterday • EPC Project A</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-comment-dots text-red-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Mark Taylor</span> commented on punch item <span class="text-red-600">#PL-198</span></p> | |
| <p class="text-xs text-gray-500 mt-1">2 days ago • Turnaround Project B</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Navigation (hidden on desktop) --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-home"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-tasks"></i> | |
| <span class="text-xs mt-1">Tasks</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-file"></i> | |
| <span class="text-xs mt-1">Docs</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-cog"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Document version control functionality | |
| document.querySelectorAll('.document-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.querySelector('.document-actions').style.opacity = '1'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.querySelector('.document-actions').style.opacity = '0'; | |
| }); | |
| }); | |
| // Barcode scanning simulation | |
| function scanBarcode() { | |
| alert('Barcode scanning would be implemented here using device camera API'); | |
| // In real implementation would use: | |
| // navigator.mediaDevices.getUserMedia or QuaggaJS for barcode scanning | |
| } | |
| // Document and project status functions | |
| function viewDocument(docId) { | |
| window.location.href = `document-management.html#${docId}`; | |
| } | |
| function updateProjectStatus(projectId, newStatus, documentId) { | |
| if (confirm(`Update project ${projectId} to ${newStatus} based on document ${documentId}?`)) { | |
| // In real implementation would make API call to update status | |
| alert(`Project ${projectId} status updated to ${newStatus}`); | |
| // Refresh project progress bars | |
| document.querySelectorAll('.progress-bar').forEach(bar => { | |
| if (bar.getAttribute('data-project') === projectId) { | |
| const newWidth = getNewWidthForStatus(newStatus); | |
| bar.style.width = newWidth; | |
| bar.previousElementSibling.textContent = newWidth; | |
| } | |
| }); | |
| } | |
| } | |
| function getNewWidthForStatus(status) { | |
| // Simplified for demo - would calculate based on actual project phase | |
| const statusMap = { | |
| 'mechanical-complete': '75%', | |
| 'testing': '32%', | |
| 'commissioning': '89%' | |
| }; | |
| return statusMap[status] || '50%'; | |
| } | |
| // Mobile offline sync simulation | |
| if (navigator.onLine) { | |
| console.log('Online - syncing data with cloud'); | |
| } else { | |
| console.log('Offline - working in offline mode, changes will sync when online'); | |
| } | |
| </script> | |
| </body> | |
| </html> |