Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document Management | ProjectHub</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> | |
| .document-card:hover { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .status-badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| </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 hover:bg-blue-600">Dashboard</a> | |
| <a href="document-management.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700">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> | |
| </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"> | |
| <!-- Page Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Document Management</h1> | |
| <p class="text-gray-600">Upload, track and approve project documents</p> | |
| </div> | |
| <button id="uploadDocumentBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-upload mr-2"></i> Upload Document | |
| </button> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="flex space-x-8"> | |
| <button class="tab-active py-4 px-1 inline-flex items-center"> | |
| All Documents | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center"> | |
| Pending Approval | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center"> | |
| Approved | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700 py-4 px-1 inline-flex items-center"> | |
| Rejected | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Filters --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>All Projects</option> | |
| <option>EPC Project A</option> | |
| <option>Turnaround Project B</option> | |
| <option>Greenfield Project C</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>All Types</option> | |
| <option>ITR Forms</option> | |
| <option>Check Sheets</option> | |
| <option>Procedures</option> | |
| <option>Reports</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>All Statuses</option> | |
| <option>Draft</option> | |
| <option>Submitted</option> | |
| <option>Approved</option> | |
| <option>Rejected</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents Grid --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <!-- Document 1 --> | |
| <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-pdf text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">ITR-001 Mechanical Completion</div> | |
| <div class="text-sm text-gray-500">Updated 2 hours ago</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">EPC Project A</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">ITR Form</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('itr-001')">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Download</button> | |
| </td> | |
| </tr> | |
| <!-- Document 2 --> | |
| <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-excel text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Check Sheet - Pump P-101</div> | |
| <div class="text-sm text-gray-500">Updated yesterday</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Turnaround Project B</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Check Sheet</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.1</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Review</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('pump-check')">Review</button> | |
| <button class="text-gray-600 hover:text-gray-900">Download</button> | |
| </td> | |
| </tr> | |
| <!-- Document 3 --> | |
| <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-word text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Commissioning Procedure</div> | |
| <div class="text-sm text-gray-500">Updated 3 days ago</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Greenfield Project C</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Procedure</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.0</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Rejected</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('commissioning-proc')">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Download</button> | |
| </td> | |
| </tr> | |
| <!-- Document 4 --> | |
| <tr class="document-card hover:bg-gray-50 transition-colors cursor-pointer"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-image text-yellow-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">As-Built Drawing</div> | |
| <div class="text-sm text-gray-500">Updated 1 week ago</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">EPC Project A</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Drawing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.5</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Under Revision</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewDocument('as-built')">Edit</button> | |
| <button class="text-gray-600 hover:text-gray-900">Download</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Upload Modal --> | |
| <div id="uploadModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"> | |
| <div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Upload New Document</h3> | |
| <button onclick="closeModal()" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>EPC Project A</option> | |
| <option>Turnaround Project B</option> | |
| <option>Greenfield Project C</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2"> | |
| <option>ITR Form</option> | |
| <option>Check Sheet</option> | |
| <option>Procedure</option> | |
| <option>Report</option> | |
| <option>Drawing</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Document Title</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Enter document title"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Version</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="1.0"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload File</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload a file</span> | |
| <input type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PDF, DOCX, XLSX, JPG up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Upload Document</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functions | |
| function openModal() { | |
| document.getElementById('uploadModal').classList.remove('hidden'); | |
| } | |
| function closeModal() { | |
| document.getElementById('uploadModal').classList.add('hidden'); | |
| } | |
| // View document function | |
| function viewDocument(docId) { | |
| alert(`Would open document viewer for ${docId} - in real implementation would show document with approval workflow`); | |
| // In real implementation would show document with approval buttons/status | |
| } | |
| // Event listeners | |
| document.getElementById('uploadDocumentBtn').addEventListener('click', openModal); | |
| // Update project status when document is approved | |
| function updateProjectStatus(projectId, newStatus, documentId) { | |
| console.log(`Updating project ${projectId} to ${newStatus} based on document ${documentId}`); | |
| // In real implementation would make API call to update project status | |
| // and potentially trigger notifications/workflows | |
| } | |
| </script> | |
| </body> | |
| </html> |