Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Seven Tides Commercial Intelligence Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .critical-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .status-critical { background-color: #EF4444; } | |
| .status-high { background-color: #F59E0B; } | |
| .status-medium { background-color: #3B82F6; } | |
| .status-low { background-color: #10B981; } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -24px; | |
| top: 8px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #3B82F6; | |
| border: 2px solid white; | |
| box-shadow: 0 0 0 2px #3B82F6; | |
| } | |
| .story-bubble { | |
| position: relative; | |
| display: inline-flex; | |
| } | |
| .story-bubble::after { | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 9px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
| cursor: pointer; | |
| } | |
| .story-bubble.email-activity::after { | |
| content: '\f0e0'; | |
| font-family: 'Font Awesome 6 Free'; | |
| font-weight: 900; | |
| } | |
| .story-bubble.sheet-remarks::after { | |
| content: '\f1c3'; | |
| font-family: 'Font Awesome 6 Free'; | |
| font-weight: 900; | |
| } | |
| .story-bubble.combined::after { | |
| content: '\f1de'; | |
| font-family: 'Font Awesome 6 Free'; | |
| font-weight: 900; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 280px; | |
| background-color: #1F2937; | |
| color: #fff; | |
| text-align: left; | |
| border-radius: 6px; | |
| padding: 12px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 13px; | |
| font-weight: normal; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .authority-matrix { | |
| display: grid; | |
| grid-template-columns: repeat(5, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .authority-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| background-color: #F3F4F6; | |
| } | |
| .authority-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
| } | |
| .activity-item { | |
| position: relative; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #E5E7EB; | |
| transition: all 0.2s ease; | |
| } | |
| .activity-item:hover { | |
| background-color: #F9FAFB; | |
| } | |
| .document-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| margin: 2px 0; | |
| border-radius: 9999px; | |
| font-size: 12px; | |
| line-height: 1; | |
| transition: all 0.2s ease; | |
| border: 1px solid #E5E7EB; | |
| } | |
| .hover-grow { | |
| transition: all 0.2s ease; | |
| } | |
| .hover-grow:hover { | |
| transform: scale(1.02); | |
| } | |
| .progress-bar-container { | |
| position: relative; | |
| width: 100%; | |
| background-color: #E5E7EB; | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| .time-critical { | |
| background: linear-gradient(90deg, #ef4444 0%, #f97316 100%); | |
| } | |
| .time-urgent { | |
| background: linear-gradient(90deg, #f97316 0%, #f59e0b 100%); | |
| } | |
| .time-warning { | |
| background: linear-gradient(90deg, #f59e0b 0%, #facc15 100%); | |
| } | |
| .project-status-chart { | |
| min-height: 200px; | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-around; | |
| padding: 20px 0; | |
| } | |
| .chart-bar { | |
| width: 30px; | |
| background-color: #3B82F6; | |
| border-radius: 4px 4px 0 0; | |
| position: relative; | |
| transition: height 0.5s ease; | |
| } | |
| .chart-bar-label { | |
| position: absolute; | |
| bottom: -25px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: #6B7280; | |
| } | |
| .chart-bar-value { | |
| position: absolute; | |
| top: -20px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .heatmap-cell { | |
| transition: all 0.15s ease; | |
| cursor: pointer; | |
| } | |
| .heatmap-cell:hover { | |
| transform: scale(1.1); | |
| z-index: 2; | |
| } | |
| .heatmap-0 { background-color: #ECFDF5; } /* Least urgent */ | |
| .heatmap-1 { background-color: #D1FAE5; } | |
| .heatmap-2 { background-color: #A7F3D0; } | |
| .heatmap-3 { background-color: #6EE7B7; } | |
| .heatmap-4 { background-color: #34D399; } /* Most urgent */ | |
| .funnel-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .funnel-stage { | |
| width: 100%; | |
| padding: 8px 12px; | |
| margin: 2px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 13px; | |
| position: relative; | |
| background-color: #F9FAFB; | |
| border-radius: 4px; | |
| } | |
| .funnel-stage-value { | |
| font-weight: 600; | |
| } | |
| .role-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| background-color: #EFF6FF; | |
| color: #1E40AF; | |
| margin-left: 4px; | |
| } | |
| .role-badge.commercial { | |
| background-color: #ECFDF5; | |
| color: #065F46; | |
| } | |
| .role-badge.finance { | |
| background-color: #FEF2F2; | |
| color: #991B1B; | |
| } | |
| .role-badge.legal { | |
| background-color: #F5F3FF; | |
| color: #5B21B6; | |
| } | |
| .role-badge.md-office { | |
| background-color: #F0F9FF; | |
| color: #0369A1; | |
| } | |
| .context-card { | |
| border-left: 4px solid #E5E7EB; | |
| transition: all 0.2s ease; | |
| } | |
| .context-card:hover { | |
| border-left-color: #3B82F6; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 50; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| background-color: rgba(0,0,0,0.4); | |
| } | |
| .modal-content { | |
| background-color: #fff; | |
| margin: 5% auto; | |
| padding: 24px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| width: 80%; | |
| max-width: 900px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .close-modal { | |
| color: #9CA3AF; | |
| float: right; | |
| font-size: 24px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: color 0.2s ease; | |
| } | |
| .close-modal:hover { | |
| color: #6B7280; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1024px) { | |
| .lg-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| .authority-matrix { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .md-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| .authority-matrix { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .sm-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| .authority-matrix { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <!-- Enhanced Global KPIs Bar with source indicators --> | |
| <div class="bg-white border-b border-gray-200 px-4 py-2 shadow-sm"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 text-xs"> | |
| <!-- Urgent Items --> | |
| <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg hover-grow"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2 critical-pulse"></div> | |
| <span class="flex items-center"> | |
| Urgent Items | |
| <span class="tooltip ml-1"> | |
| <i class="fas fa-envelope text-gray-500"></i> | |
| <span class="tooltip-text"> | |
| <strong>Data Source:</strong> 3 from email analysis, 2 from tracker sheets<br> | |
| <strong>Trend:</strong> 5 total (+2 from yesterday)<br> | |
| <strong>Breakdown:</strong> 2 contracts, 1 invoice, 2 LPOs | |
| </span> | |
| </span> | |
| </span> | |
| </div> | |
| <strong class="text-lg font-bold text-red-700">5</strong> | |
| </div> | |
| <!-- Projects At Risk --> | |
| <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg hover-grow"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="flex items-center"> | |
| Projects At Risk | |
| <span class="tooltip ml-1"> | |
| <i class="far fa-file-excel text-gray-500"></i> | |
| <span class="tooltip-text"> | |
| <strong>Data Source:</strong> Project tracker sheets<br> | |
| <strong>Active Projects:</strong> 12 total<br> | |
| <strong>Risk Factors:</strong> 2 overdue approvals, 3 budget variances, 2 delayed milestones | |
| </span> | |
| </span> | |
| </span> | |
| </div> | |
| <strong class="text-lg font-bold text-yellow-700">4</strong> | |
| </div> | |
| <!-- Overdue Approvals --> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg hover-grow"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="flex items-center"> | |
| Overdue Approvals | |
| <span class="tooltip ml-1"> | |
| <i class="fas fa-envelope text-gray-500"></i> | |
| <span class="tooltip-text"> | |
| <strong>Data Source:</strong> Approval trackers & email follow-ups<br> | |
| <strong>By Department:</strong> 1 Commercial, 3 Legal, 2 Finance<br> | |
| <strong>Aging:</strong> Average 3.2 days overdue | |
| </span> | |
| </span> | |
| </span> | |
| </div> | |
| <strong class="text-lg font-bold text-blue-700">6</strong> | |
| </div> | |
| <!-- Issues Resolved --> | |
| <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg hover-grow"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| <span class="flex items-center"> | |
| Issues Resolved | |
| <span class="tooltip ml-1"> | |
| <i class="far fa-file-excel text-gray-500"></i> | |
| <span class="tooltip-text"> | |
| <strong>Data Source:</strong> Completed items in trackers<br> | |
| <strong>Trend:</strong> +12% vs last week<br> | |
| <strong>Resolution Time:</strong> Average 2.3 days | |
| </span> | |
| </span> | |
| </span> | |
| </div> | |
| <strong class="text-lg font-bold text-green-700">12</strong> | |
| </div> | |
| </div> | |
| <!-- Contextual info bar --> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-3 text-xs text-gray-500"> | |
| <div class="flex flex-wrap items-center gap-x-4 gap-y-1"> | |
| <div> | |
| <i class="fas fa-user-tie mr-1"></i> Next MD Meeting: <strong class="text-gray-700">Today @ 2:30 PM</strong> | |
| <span class="ml-2 text-blue-600 hover:underline cursor-pointer flex items-center inline"> | |
| <i class="fas fa-file-pdf mr-1"></i> Agenda | |
| </span> | |
| </div> | |
| <div> | |
| <i class="fas fa-project-diagram mr-1"></i> Key Project: <strong class="text-gray-700">IBGOB Contract Renewal</strong> | |
| </div> | |
| </div> | |
| <div class="mt-2 sm:mt-0"> | |
| <i class="fas fa-sync-alt mr-1"></i> Last updated: <strong class="text-gray-700">Today 11:42 AM</strong> | |
| <span class="ml-3 px-2 py-1 bg-green-100 text-green-800 rounded-full"> | |
| <i class="fas fa-circle text-xs mr-1"></i> System: Operational | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard Content --> | |
| <div class="container mx-auto px-4 py-6 max-w-7xl"> | |
| <!-- Enhanced Header with contextual actions --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://via.placeholder.com/40" alt="Company Logo" class="h-12 w-12 rounded-full border-2 border-blue-100 shadow-sm"> | |
| <div> | |
| <div class="flex flex-wrap items-center gap-2"> | |
| <h1 class="text-2xl font-bold text-gray-800">Commercial Intelligence Dashboard</h1> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full flex items-center"> | |
| <i class="fas fa-arrow-trend-up mr-1"></i> System Operational +8% | |
| </span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full flex items-center tooltip"> | |
| <i class="fas fa-database mr-1"></i> 96% Data Coverage | |
| <span class="tooltip-text"> | |
| <strong>Data Sources:</strong><br> | |
| ✅ 12/12 Sheet Trackers Connected<br> | |
| ✅ Email Integration Active<br> | |
| 📊 3,452 Documents Indexed<br> | |
| ⚡ 87% AI Analysis Complete | |
| </span> | |
| </span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 flex flex-wrap items-center gap-1 mt-1"> | |
| <span class="font-medium text-gray-700 flex items-center"> | |
| <i class="far fa-calendar-alt mr-1"></i> Tuesday, 19 March 2025 | |
| </span> | |
| <span class="text-gray-400 hidden sm:inline">•</span> | |
| <span class="text-blue-600 hover:underline cursor-pointer flex items-center" title="Download consolidated report"> | |
| <i class="fas fa-download text-xs mr-1"></i> | |
| Export Report | |
| <i class="far fa-file-excel ml-1"></i> | |
| </span> | |
| <span class="text-gray-400 hidden sm:inline">•</span> | |
| <span class="text-gray-500 text-xs flex items-center"> | |
| <i class="fas fa-user-circle mr-1"></i> | |
| <span class="font-medium">Paterno Dungca</span> | |
| <span class="ml-1">(Commercial Manager)</span> | |
| </span> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Dashboard Tools --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative group hidden md:block"> | |
| <button class="p-3 rounded-lg bg-white border border-gray-200 hover:bg-gray-50 text-gray-600 transition-colors shadow-sm"> | |
| <i class="fas fa-sliders"></i> | |
| <span class="ml-1 hidden lg:inline">Settings</span> | |
| </button> | |
| </div> | |
| <div class="bg-blue-50 p-2 rounded-lg border border-blue-100 hidden lg:block"> | |
| <div class="flex items-center space-x-3 text-xs"> | |
| <div class="tooltip"> | |
| <span class="font-medium text-blue-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-1"></i> | |
| <span>27/48 Tasks</span> | |
| </span> | |
| <span class="tooltip-text">Completed tracker tasks this week (56%)</span> | |
| </div> | |
| <div class="h-4 w-px bg-blue-200"></div> | |
| <div class="tooltip"> | |
| <span class="font-medium text-yellow-700"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> | |
| <span>7/32 Approvals</span> | |
| </span> | |
| <span class="tooltip-text">Pending approvals with deadlines (22%)</span> | |
| </div> | |
| <div class="h-4 w-px bg-blue-200"></div> | |
| <div class="tooltip"> | |
| <span class="font-medium text-gray-700"> | |
| <i class="fas fa-envelope-open-text mr-1"></i> | |
| <span>14 Unread</span> | |
| </span> | |
| <span class="tooltip-text">Commercial emails requiring action</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <span>Refresh Data</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- URGENT ITEMS SECTION --> | |
| <div class="bg-gradient-to-r from-red-50 via-pink-50 to-orange-50 border-l-6 border-red-500 rounded-xl p-6 mb-8 shadow-sm hover-grow"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-3"> | |
| <h2 class="text-xl font-bold text-red-800 flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-2xl critical-pulse mr-3"></i> | |
| 🔴 URGENT / MUST ACTION | |
| <span class="ml-4 text-sm font-normal text-red-700 flex items-center tooltip"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>4 items from emails, 1 from tracker</span> | |
| <span class="tooltip-text">This section combines critical items identified by AI analysis of emails and high-priority tracker items</span> | |
| </span> | |
| </h2> | |
| <div class="flex items-center space-x-3"> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 font-semibold rounded-full text-xs flex items-center"> | |
| <i class="fas fa-fire mr-1"></i> | |
| 3 CRITICAL ITEMS | |
| </span> | |
| <div class="relative"> | |
| <button class="px-3 py-1 bg-white border border-red-300 text-red-600 rounded-lg hover:bg-red-50 text-xs flex items-center"> | |
| <i class="fas fa-ellipsis-h mr-1"></i> Actions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-5" id="urgentItemsList"> | |
| <!-- Critical Contract Renewal --> | |
| <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden context-card urgent-item" onclick="openModal('contractModal')"> | |
| <div class="p-4 pb-3"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-gray-800 flex items-center"> | |
| IBGOB Contract Renewal | |
| <span class="story-bubble combined ml-2"></span> | |
| </h3> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">CRITICAL</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3"> | |
| <div class="flex items-center mb-1"> | |
| <i class="far fa-file-excel text-gray-400 mr-2"></i> | |
| <span><strong>Tracker Status:</strong> <span class="font-medium">Legal Review</span> (Deadline: <span class="text-red-600 font-bold">Today EOD</span>)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-dots text-gray-400 mr-2"></i> | |
| <span><strong>Latest Email:</strong> Final signature blocked by Legal pending review of clause 12.3 (from Sarah @ Legal - 1h ago)</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-xs mb-2"> | |
| <span>Time remaining</span> | |
| <span class="font-medium">8 hours</span> | |
| </div> | |
| <div class="progress-bar-container mb-3"> | |
| <div class="progress-bar-fill time-critical" style="width: 15%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <div> | |
| <i class="far fa-calendar-alt mr-1"></i> | |
| <span>Originated: 12-Mar</span> | |
| </div> | |
| <div class="tooltip"> | |
| <span>Personnel: 4 involved</span> | |
| <span class="tooltip-text">1. Uwais (Commercial)<br>2. Sarah (Legal)<br>3. Paterno (Commercial)<br>4. MD Office</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-2 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overdue Payment Certificate --> | |
| <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden context-card urgent-item" onclick="openModal('pcModal')"> | |
| <div class="p-4 pb-3"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-gray-800 flex items-center"> | |
| PC#1831 - Bauhaus | |
| <span class="story-bubble email-activity ml-2"></span> | |
| </h3> | |
| <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">HIGH</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3"> | |
| <div class="flex items-center mb-1"> | |
| <i class="far fa-file-excel text-gray-400 mr-2"></i> | |
| <span><strong>Tracker Status:</strong> <span class="font-medium">Pending Finance Certification</span> (Due: <span class="text-orange-600 font-bold">Yesterday</span>)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-dots text-gray-400 mr-2"></i> | |
| <span><strong>Latest Email:</strong> Contractor threatening penalty for late payment (from Jamzith - 3h ago)</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-xs mb-2"> | |
| <span>Overdue by</span> | |
| <span class="font-medium">1 day</span> | |
| </div> | |
| <div class="progress-bar-container mb-3"> | |
| <div class="progress-bar-fill time-urgent" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <div> | |
| <i class="fas fa-file-invoice-dollar mr-1"></i> | |
| <span>AED 42,750</span> | |
| </div> | |
| <div class="tooltip"> | |
| <span>Required approvals: 2/4</span> | |
| <span class="tooltip-text">✔ Sydney (Commercial)<br>✔ Jamzith (QS)<br>□ Marc (Finance)<br>□ MD Office</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-2 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Cheque Release --> | |
| <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden context-card urgent-item" onclick="openModal('chequeModal')"> | |
| <div class="p-4 pb-3"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-gray-800 flex items-center"> | |
| Security Cheque #4589 | |
| <span class="story-bubble sheet-remarks ml-2"></span> | |
| </h3> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">MEDIUM</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3"> | |
| <div class="flex items-center mb-1"> | |
| <i class="far fa-file-excel text-gray-400 mr-2"></i> | |
| <span><strong>Tracker Status:</strong> <span class="font-medium">Pending MD Signature</span> (Due: <span class="text-yellow-600 font-bold">Tomorrow</span>)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-dots text-gray-400 mr-2"></i> | |
| <span><strong>Latest Email:</strong> Required for DEWA contractor bond (from Pradeesh - 1d ago)</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-xs mb-2"> | |
| <span>Time remaining</span> | |
| <span class="font-medium">34 hours</span> | |
| </div> | |
| <div class="progress-bar-container mb-3"> | |
| <div class="progress-bar-fill time-warning" style="width: 45%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <div> | |
| <i class="fas fa-building mr-1"></i> | |
| <span>DEWA Electrical</span> | |
| </div> | |
| <div> | |
| <span class="role-badge">MD Office</span> | |
| <span class="role-badge finance">Finance</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-2 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="text-xs p-1 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-right"> | |
| <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center justify-end"> | |
| <span>View All Urgent Items (8)</span> | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- MAIN CONTENT GRID --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg-columns"> | |
| <!-- LEFT COLUMN - Approval Pipeline & Project Cards --> | |
| <div class="space-y-6"> | |
| <!-- APPROVAL PIPELINE --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-project-diagram text-blue-500 mr-3"></i> | |
| APPROVAL PIPELINE | |
| </h2> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">Updated 15m ago</span> | |
| </div> | |
| <!-- Pipeline Tabs --> | |
| <div class="flex border-b border-gray-200 mb-4"> | |
| <button class="px-4 py-2 text-sm font-medium text-blue-700 border-b-2 border-blue-700 bg-blue-50">All (12)</button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Documents (9)</button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Payments (3)</button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Contracts (4)</button> | |
| </div> | |
| <!-- Pipeline Cards --> | |
| <div class="space-y-4"> | |
| <!-- Document Approval --> | |
| <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 hover-grow context-card" onclick="openModal('pipelineModal1')"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| VAF-BSI-1831 | Bauhaus Furniture | |
| <span class="story-bubble combined ml-2"></span> | |
| </h3> | |
| <p class="text-xs text-gray-500">From: <span class="font-medium">Cost Control Tracker</span></p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">2d</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-600 mb-3"> | |
| <div> | |
| <span class="font-medium">Pending Uwais (Asst. Manager)</span> | |
| <span class="mx-2">•</span> | |
| <span>Submitted: <span class="font-medium">17-Mar</span></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-invoice-dollar mr-1"></i> | |
| <span>AED 12,450</span> | |
| </div> | |
| </div> | |
| <div class="progress-bar-container mb-2"> | |
| <div class="progress-bar-fill" style="width: 40%; background-color: #F59E0B;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>2/5 approvals completed</span> | |
| <div class="flex items-center"> | |
| <span class="role-badge commercial">Commercial</span> | |
| <span class="role-badge legal ml-1">Legal</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Approval --> | |
| <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 hover-grow context-card" onclick="openModal('pipelineModal2')"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| PC#1844 | Al Qadar Plumbing | |
| <span class="story-bubble email-activity ml-2"></span> | |
| </h3> | |
| <p class="text-xs text-gray-500">From: <span class="font-medium">Email thread (Jamzith)</span></p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">4h</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-600 mb-3"> | |
| <div> | |
| <span class="font-medium">Pending Marc (Financial Manager)</span> | |
| <span class="mx-2">•</span> | |
| <span>Submitted: <span class="font-medium">Today 09:42</span></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-invoice-dollar mr-1"></i> | |
| <span>AED 34,200</span> | |
| </div> | |
| </div> | |
| <div class="progress-bar-container mb-2"> | |
| <div class="progress-bar-fill" style="width: 75%; background-color: #3B82F6;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>3/4 approvals completed</span> | |
| <div class="flex items-center"> | |
| <span class="role-badge commercial">Commercial</span> | |
| <span class="role-badge finance ml-1">Finance</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Decisions --> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-history mr-2"></i> Recent Decisions | |
| </h3> | |
| <div class="space-y-3 text-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="font-medium">LPO#123-2023</span> - Bauhaus furniture | |
| <div class="text-xs text-gray-500"> | |
| <span>Approved by Uwais (Tracker - 18-Mar)</span> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Approved</span> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="font-medium">Artline Contract</span> - F&B Services | |
| <div class="text-xs text-gray-500"> | |
| <span>Rejected by Legal (Email - clauses 5.2, 8.4 need revision)</span> | |
| </div> | |
| </div> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Rejected</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PROJECTS OVERVIEW --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-tasks text-blue-500 mr-3"></i> | |
| PROJECTS OVERVIEW | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full mr-2">12 Active</span> | |
| <button class="text-xs p-1 text-gray-500 hover:bg-gray-100 rounded"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Project Filter --> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded-full">All</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">On Track</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">At Risk</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">Delayed</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"> | |
| <i class="fas fa-search mr-1"></i> Filter | |
| </button> | |
| </div> | |
| <!-- Project Cards --> | |
| <div class="space-y-4 mb-6"> | |
| <!-- IBGOB Project --> | |
| <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 hover-grow context-card" onclick="openModal('ibgobModal')"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-semibold text-gray-800">IBGOB Corporate Office</h3> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">RISK</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mb-3 mt-1"> | |
| <span class="mr-3">Project ID: STI-PRJ-056</span> | |
| <span>Commercial Lead: Paterno</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <span class="font-medium text-gray-700 mr-2">Progress: 63%</span> | |
| <div class="w-24 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 63%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <i class="fas fa-calendar-day text-gray-400 mr-1"></i> | |
| <span class="text-gray-600">End: 15-May-2025</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-600 mb-3">Contract renewal pending, structural work 80% complete, awaiting MEP drawings...</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="document-chip"> | |
| <i class="far fa-file-alt mr-1"></i> 35 docs | |
| </span> | |
| <span class="document-chip bg-blue-50 text-blue-700 border-blue-100"> | |
| <i class="fas fa-envelope mr-1"></i> 7 new emails | |
| </span> | |
| <span class="document-chip bg-red-50 text-red-700 border-red-100"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> 3 urgent | |
| </span> | |
| <span class="document-chip bg-yellow-50 text-yellow-700 border-yellow-100"> | |
| <i class="fas fa-tasks mr-1"></i> 5 pending | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Zen Tower Project --> | |
| <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 hover-grow context-card" onclick="openModal('zenModal')"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-semibold text-gray-800">Zen Tower Refurbishment</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">ON TRACK</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mb-3 mt-1"> | |
| <span class="mr-3">Project ID: STI-PRJ-042</span> | |
| <span>Commercial Lead: Uwais</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <span class="font-medium text-gray-700 mr-2">Progress: 82%</span> | |
| <div class="w-24 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <i class="fas fa-calendar-day text-gray-400 mr-1"></i> | |
| <span class="text-gray-600">End: 30-Apr-2025</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-600 mb-3">Finalizing MEP snag list, awaiting revised drawings from consultant...</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="document-chip"> | |
| <i class="far fa-file-alt mr-1"></i> 28 docs | |
| </span> | |
| <span class="document-chip bg-blue-50 text-blue-700 border-blue-100"> | |
| <i class="fas fa-envelope mr-1"></i> 4 new emails | |
| </span> | |
| <span class="document-chip bg-yellow-50 text-yellow-700 border-yellow-100"> | |
| <i class="fas fa-tasks mr-1"></i> 2 pending | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View All Projects --> | |
| <div class="text-center"> | |
| <button class="text-sm text-blue-600 hover:text-blue-800 px-4 py-2"> | |
| View All Projects (12) <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CENTER COLUMN - Financial Watch & Authority Approvals --> | |
| <div class="space-y-6"> | |
| <!-- FINANCIAL WATCH --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-chart-line text-blue-500 mr-3"></i> | |
| FINANCIAL WATCH | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full mr-2"> | |
| <i class="far fa-file-excel mr-1"></i> Tracker Data | |
| </span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-green-50 p-3 rounded-lg border border-green-100"> | |
| <div class="flex justify-between items-start"> | |
| <span class="text-xs text-green-700">LPOs Issued</span> | |
| <i class="far fa-file-alt text-green-300"></i> | |
| </div> | |
| <div class="text-2xl font-bold text-green-800 mt-1">7</div> | |
| <div class="text-xs text-green-600 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> +2 this week | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded-lg border border-blue-100"> | |
| <div class="flex justify-between items-start"> | |
| <span class="text-xs text-blue-700">Invoices Pending</span> | |
| <i class="fas fa-file-invoice text-blue-300"></i> | |
| </div> | |
| <div class="text-2xl font-bold text-blue-800 mt-1">12</div> | |
| <div class="text-xs text-blue-600 mt-1"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> 3 overdue | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded-lg border border-purple-100"> | |
| <div class="flex justify-between items-start"> | |
| <span class="text-xs text-purple-700">PCs Approved</span> | |
| <i class="fas fa-file-certificate text-purple-300"></i> | |
| </div> | |
| <div class="text-2xl font-bold text-purple-800 mt-1">5</div> | |
| <div class="text-xs text-purple-600 mt-1"> | |
| <i class="fas fa-check-circle mr-1"></i> +1 yesterday | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-100"> | |
| <div class="flex justify-between items-start"> | |
| <span class="text-xs text-yellow-700">Disputed Amount</span> | |
| <i class="fas fa-exclamation-triangle text-yellow-300"></i> | |
| </div> | |
| <div class="text-2xl font-bold text-yellow-800 mt-1">AED 67,400</div> | |
| <div class="text-xs text-yellow-600 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 12% decrease | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Payments --> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-money-bill-transfer mr-2"></i> Top Payments This Week | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">Mars Digital Systems</div> | |
| <div class="text-xs text-gray-500">LPO#457-2023 | Cleared today</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-bold">AED 28,500</div> | |
| <div class="text-xs text-green-600"> | |
| <i class="fas fa-check-circle mr-1"></i> Paid | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">Al Qadar Plumbing</div> | |
| <div class="text-xs text-gray-500">PC#1844 | Pending approval</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-bold">AED 34,200</div> | |
| <div class="text-xs text-blue-600"> | |
| <i class="fas fa-hourglass-half mr-1"></i> Processing | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">Ayal Nasser Contracting</div> | |
| <div class="text-xs text-gray-500">Invoice #INV-7894 | Due tomorrow</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-bold">AED 52,100</div> | |
| <div class="text-xs text-yellow-600"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> Urgent | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Funnel Visualization --> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Payment Pipeline: World Island | |
| <span class="ml-2 text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full"> | |
| <i class="far fa-file-excel mr-1"></i> Account Ledger - World Island.csv | |
| </span> | |
| </h3> | |
| <div class="funnel-container"> | |
| <div class="funnel-stage bg-blue-50 text-blue-800"> | |
| <span>Total LPO Value</span> | |
| <span class="funnel-stage-value">AED 2,456,800</span> | |
| </div> | |
| <div class="funnel-stage bg-purple-50 text-purple-800"> | |
| <span>Invoiced Amount</span> | |
| <span class="funnel-stage-value">AED 1,783,400 (73%)</span> | |
| </div> | |
| <div class="funnel-stage bg-green-50 text-green-800"> | |
| <span>Certified Payments</span> | |
| <span class="funnel-stage-value">AED 1,245,600 (70%)</span> | |
| </div> | |
| <div class="funnel-stage bg-gray-50 text-gray-800"> | |
| <span>Amount Paid</span> | |
| <span class="funnel-stage-value">AED 987,300 (79%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AUTHORITY APPROVALS MATRIX --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-clipboard-check text-blue-500 mr-3"></i> | |
| AUTHORITY APPROVALS | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full mr-2"> | |
| <i class="far fa-file-excel mr-1"></i> Tracker Data | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mb-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-600"> | |
| Showing: <span class="font-medium">Key Projects</span> | |
| </div> | |
| <div> | |
| <select class="text-xs border border-gray-200 rounded px-2 py-1 bg-white"> | |
| <option>All Authorities</option> | |
| <option>DEWA Electrical</option> | |
| <option>DEWA Water</option> | |
| <option>BCC Approvals</option> | |
| <option>DM Approvals</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="authority-matrix"> | |
| <!-- Project 1 --> | |
| <div class="authority-item"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">IBGOB</div> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-800"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-center">DEWA Electrical</div> | |
| <div class="text-xs text-gray-500">12-Mar-2025</div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="authority-item"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Zen Tower</div> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-800"> | |
| <i class="fas fa-hourglass-half"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-center">DEWA Water</div> | |
| <div class="text-xs text-gray-500">Pending</div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="authority-item"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">World Island</div> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-800"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-center">BCC</div> | |
| <div class="text-xs text-gray-500">05-Mar-2025</div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="authority-item"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Seven City</div> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-800"> | |
| <i class="fas fa-minus"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-center">DM</div> | |
| <div class="text-xs text-gray-500">Not Started</div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="authority-item"> | |
| <div class="text-xs font-medium text-gray-500 mb-1">Ayal Nasser</div> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-800"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-center">DEWA</div> | |
| <div class="text-xs text-gray-500">Rejected 10-Mar</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-sm font-semibold text-gray-700">Approval Status Legend</h3> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2 text-xs"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-100 border border-green-300 mr-1 flex items-center justify-center"> | |
| <i class="fas fa-check text-green-600 text-[8px]"></i> | |
| </div> | |
| <span>Approved</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-100 border border-yellow-300 mr-1 flex items-center justify-center"> | |
| <i class="fas fa-hourglass-half text-yellow-600 text-[8px]"></i> | |
| </div> | |
| <span>Pending</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-100 border border-red-300 mr-1 flex items-center justify-center"> | |
| <i class="fas fa-times text-red-600 text-[8px]"></i> | |
| </div> | |
| <span>Rejected</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-gray-100 border border-gray-300 mr-1 flex items-center justify-center"> | |
| <i class="fas fa-minus text-gray-600 text-[8px]"></i> | |
| </div> | |
| <span>Not Started</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT COLUMN - Recent Activity & Document Categories --> | |
| <div class="space-y-6"> | |
| <!-- RECENT ACTIVITY --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-stream text-blue-500 mr-3"></i> | |
| RECENT ACTIVITY | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">Last 24 hours</span> | |
| </div> | |
| </div> | |
| <div class="activity-feed overflow-y-auto" style="max-height: 320px;"> | |
| <!-- Email Activity --> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-envelope text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">New email from Legal Dept</div> | |
| <div class="text-xs text-gray-600"> | |
| "URGENT: IBGOB Contract revisions needed for clauses 5.2, 8.4 before final signature..." | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mt-1"> | |
| <span>Received 1h ago</span> | |
| <span class="mx-2">•</span> | |
| <span>From: Sarah Al Habsi</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tracker Update --> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"> | |
| <i class="far fa-file-excel text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">Tracker Update</div> | |
| <div class="text-xs text-gray-600"> | |
| LPO#789-2023 for Project Seven City - Status changed from "Pending Commercial" to "Approved by MD" | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mt-1"> | |
| <span>Updated 2h ago</span> | |
| <span class="mx-2">•</span> | |
| <span>By: Uwais (Asst. Manager)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Document Identified --> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-lightbulb text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">New Potential LPO Identified</div> | |
| <div class="text-xs text-gray-600"> | |
| Email from Paterno with draft LPO for ABC Corp (AED 45,200) - Not yet in tracker | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mt-1"> | |
| <span>Detected 4h ago</span> | |
| <span class="mx-2">•</span> | |
| <span>Subject: "Draft LPO for ABC Corp"</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Activity --> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-envelope text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">Reminder from Contractor</div> | |
| <div class="text-xs text-gray-600"> | |
| "Following up on overdue payment for PC#1831 - Bauhaus Furniture (AED 42,750)" | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mt-1"> | |
| <span>Received 5h ago</span> | |
| <span class="mx-2">•</span> | |
| <span>From: Jamzith (QS)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tracker Update --> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"> | |
| <i class="far fa-file-excel text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">Tracker Update</div> | |
| <div class="text-xs text-gray-600"> | |
| Invoice #INV-2845 for Zen Tower - Status changed to "Paid" with payment date 18-Mar-2025 | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mt-1"> | |
| <span>Updated 7h ago</span> | |
| <span class="mx-2">•</span> | |
| <span>By: Sydney Sarmiento</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-right"> | |
| <button class="text-sm text-blue-600 hover:text-blue-800"> | |
| View All Activity <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- DOCUMENT CATEGORIES --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-grow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-folder-open text-blue-500 mr-3"></i> | |
| DOCUMENT CATEGORIES | |
| </h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">Last 30 days</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="document-category bg-white border border-blue-100 rounded-lg p-3 hover-grow"> | |
| <div class="flex justify-between items-start"> | |
| <div class="bg-blue-50 text-blue-600 rounded-full p-2"> | |
| <i class="fas fa-file-signature"></i> | |
| </div> | |
| <span class="text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded-full">+12%</span> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="text-lg font-bold text-gray-800">28</div> | |
| <div class="text-xs text-gray-600">Contracts</div> | |
| </div> | |
| </div> | |
| <div class="document-category bg-white border border-green-100 rounded-lg p-3 hover-grow"> | |
| <div class="flex justify-between items-start"> | |
| <div class="bg-green-50 text-green-600 rounded-full p-2"> | |
| <i class="fas fa-file-invoice-dollar"></i> | |
| </div> | |
| <span class="text-xs text-green-700 bg-green-50 px-2 py-1 rounded-full">+5%</span> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="text-lg font-bold text-gray-800">45</div> | |
| <div class="text-xs text-gray-600">Invoices</div> | |
| </div> | |
| </div> | |
| <div class="document-category bg-white border border-purple-100 rounded-lg p-3 hover-grow"> | |
| <div class="flex justify-between items-start"> | |
| <div class="bg-purple-50 text-purple-600 rounded-full p-2"> | |
| <i class="fas fa-file-certificate"></i> | |
| </div> | |
| <span class="text-xs text-purple-700 bg-purple-50 px-2 py-1 rounded-full">+8%</span> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="text-lg font-bold text-gray-800">18</div> | |
| <div class="text-xs text-gray-600">Payment Certificates</div> | |
| </div> | |
| </div> | |
| <div class="document-category bg-white border border-red-100 rounded-lg p-3 hover-grow"> | |
| <div class="flex justify-between items-start"> | |
| <div class="bg-red-50 text-red-600 rounded-full p-2"> | |
| <i class="fas fa-file-invoice"></i> | |
| </div> | |
| <span class="text-xs text-red-700 bg-red-50 px-2 py-1 rounded-full">-3%</span> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="text-lg font-bold text-gray-800">22</div> | |
| <div class="text-xs text-gray-600">LPOs</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Document Types Chart --> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-3">Top Document Types</h3> | |
| <div class="project-status-chart"> | |
| <div class="chart-bar" style="height: 120px;"> | |
| <div class="chart-bar-value">28</div> | |
| <div class="chart-bar-label">Contracts</div> | |
| </div> | |
| <div class="chart-bar" style="height: 160px;"> | |
| <div class="chart-bar-value">45</div> | |
| <div class="chart-bar-label">Invoices</div> | |
| </div> | |
| <div class="chart-bar" style="height: 80px;"> | |
| <div class="chart-bar-value">18</div> | |
| <div class="chart-bar-label">PCs</div> | |
| </div> | |
| <div class="chart-bar" style="height: 70px;"> | |
| <div class="chart-bar-value">22</div> | |
| <div class="chart-bar-label">LPOs</div> | |
| </div> | |
| <div class="chart-bar" style="height: 40px;"> | |
| <div class="chart-bar-value">12</div> | |
| <div class="chart-bar-label">RFQs</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Status Breakdown --> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-3">Document Status</h3> | |
| <div class="grid grid-cols-3 gap-2 text-center text-xs"> | |
| <div class="bg-green-50 p-2 rounded"> | |
| <div class="font-bold text-green-700">42</div> | |
| <div>Approved</div> | |
| </div> | |
| <div class="bg-yellow-50 p-2 rounded"> | |
| <div class="font-bold text-yellow-700">28</div> | |
| <div>Pending</div> | |
| </div> | |
| <div class="bg-blue-50 p-2 rounded"> | |
| <div class="font-bold text-blue-700">35</div> | |
| <div>In Process</div> | |
| </div> | |
| <div class="bg-red-50 p-2 rounded"> | |
| <div class="font-bold text-red-700">9</div> | |
| <div>Rejected</div> | |
| </div> | |
| <div class="bg-purple-50 p-2 rounded"> | |
| <div class="font-bold text-purple-700">18</div> | |
| <div>Paid</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded"> | |
| <div class="font-bold text-gray-700">7</div> | |
| <div>Expired</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MODALS --> | |
| <!-- IBGOB Contract Modal --> | |
| <div id="contractModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-modal" onclick="closeModal('contractModal')">×</span> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-1">IBGOB Contract Renewal</h2> | |
| <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600"> | |
| <span><strong>Status:</strong> <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">Critical</span></span> | |
| <span><strong>Project:</strong> IBGOB Corporate Office (STI-PRJ-056)</span> | |
| <span><strong>Commercial Lead:</strong> Paterno Dungca</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Key Details --> | |
| <div class="md:col-span-1 bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> Key Details | |
| </h3> | |
| <div class="space-y-3 text-sm"> | |
| <div> | |
| <span class="text-gray-500">Document Type:</span> | |
| <span class="font-medium">Service Agreement</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Current Status:</span> | |
| <span class="font-medium">Pending Legal Review</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Deadline:</span> | |
| <span class="font-medium text-red-600">Today EOD</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Originated:</span> | |
| <span class="font-medium">12-Mar-2025</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Value:</span> | |
| <span class="font-medium">AED 1,250,000</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Contract Period:</span> | |
| <span class="font-medium">1 year</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-user-friends text-blue-500 mr-2"></i> Personnel | |
| </h3> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center mr-2"> | |
| PD | |
| </div> | |
| <div> | |
| <div class="font-medium">Paterno Dungca</div> | |
| <div class="text-xs text-gray-500">Commercial Manager</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-purple-100 text-purple-800 flex items-center justify-center mr-2"> | |
| AU | |
| </div> | |
| <div> | |
| <div class="font-medium">Ahamed Uwais</div> | |
| <div class="text-xs text-gray-500">Asst. Manager</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-red-100 text-red-800 flex items-center justify-center mr-2"> | |
| SL | |
| </div> | |
| <div> | |
| <div class="font-medium">Sarah Al Habsi</div> | |
| <div class="text-xs text-gray-500">Legal Counsel</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Timeline --> | |
| <div class="md:col-span-2"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-history text-blue-500 mr-2"></i> Activity Timeline | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Tracker Entry --> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Tracker Entry Created</div> | |
| <div class="text-xs text-gray-500 mb-2">15-Mar-2025 09:15 • Cost Control Tracker</div> | |
| </div> | |
| <div class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">Sheet Record</div> | |
| </div> | |
| <div class="text-sm"> | |
| Document entered into renewal tracker by Edmond Taborlupa (Document Controller) | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="font-medium">Tracker Status:</span> New Request | |
| </div> | |
| </div> | |
| <!-- Email Activity --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Initial Review</div> | |
| <div class="text-xs text-gray-500 mb-2">15-Mar-2025 14:30 • Email Thread</div> | |
| </div> | |
| <div class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">Email Activity</div> | |
| </div> | |
| <div class="text-sm"> | |
| Paterno Dungca reviewed draft and requested changes to clauses 3.4, 5.7: | |
| <div class="bg-white mt-2 p-2 rounded text-xs italic"> | |
| "Please adjust the performance bond requirements to 5% and extend the defect liability period to 24 months." | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Update --> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Commercial Approval</div> | |
| <div class="text-xs text-gray-500 mb-2">16-Mar-2025 11:20 • Cost Control Tracker</div> | |
| </div> | |
| <div class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">Sheet Record</div> | |
| </div> | |
| <div class="text-sm"> | |
| Uwais approved commercial terms and forwarded to Legal for final review | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="font-medium">Tracker Status Changed to:</span> Legal Review | |
| </div> | |
| </div> | |
| <!-- Email Activity --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Legal Review</div> | |
| <div class="text-xs text-gray-500 mb-2">1h ago • Email from Sarah (Legal)</div> | |
| </div> | |
| <div class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">Email Activity</div> | |
| </div> | |
| <div class="text-sm"> | |
| Final signature blocked by Legal pending review of clause 12.3: | |
| <div class="bg-white mt-2 p-2 rounded text-xs italic"> | |
| "Clause 12.3 indemnification language needs to be revised to match our standard terms. Please see attached mark-up." | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-blue-700"> | |
| <i class="fas fa-paperclip mr-1"></i> 1 attachment (IBGOB_Contract_Markup.docx) | |
| </div> | |
| <div class="mt-3"> | |
| <button class="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"> | |
| <i class="fas fa-reply mr-1"></i> Respond | |
| </button> | |
| <button class="text-xs px-3 py-1 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 ml-2"> | |
| <i class="fas fa-file-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="mt-6 pt-4 border-t border-gray-200 flex justify-between"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-check-circle mr-2"></i> Mark as Complete | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PC Payment Modal --> | |
| <div id="pcModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-modal" onclick="closeModal('pcModal')">×</span> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-1">PC#1831 - Bauhaus Furniture</h2> | |
| <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600"> | |
| <span><strong>Status:</strong> <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full text-xs">High Priority</span></span> | |
| <span><strong>Project:</strong> Zen Tower Refurbishment (STI-PRJ-042)</span> | |
| <span><strong>Amount:</strong> AED 42,750</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Key Details --> | |
| <div class="md:col-span-1 bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> Key Details | |
| </h3> | |
| <div class="space-y-3 text-sm"> | |
| <div> | |
| <span class="text-gray-500">PC Number:</span> | |
| <span class="font-medium">PC#1831/2025</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Current Status:</span> | |
| <span class="font-medium">Pending Finance Certification</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Due Date:</span> | |
| <span class="font-medium text-orange-600">Yesterday</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Submitted:</span> | |
| <span class="font-medium">15-Mar-2025</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">LPO Reference:</span> | |
| <span class="font-medium">LPO#123-2023</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Retention:</span> | |
| <span class="font-medium">10% (AED 4,275)</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-list-check text-blue-500 mr-2"></i> Approval Progress | |
| </h3> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex items-center justify-between"> | |
| <span>Commercial:</span> | |
| <span class="text-green-600 font-medium">Approved (Uwais)</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span>QS:</span> | |
| <span class="text-green-600 font-medium">Certified (Jamzith)</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span>Finance:</span> | |
| <span class="text-blue-600 font-medium">Pending (Marc)</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span>MD:</span> | |
| <span class="text-gray-500">Not Started</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-file-invoice-dollar text-blue-500 mr-2"></i> Payment Details | |
| </h3> | |
| <div class="space-y-3 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>Net Amount:</span> | |
| <span class="font-medium">AED 42,750</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>VAT 5%:</span> | |
| <span class="font-medium">AED 2,137.50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Retention Held:</span> | |
| <span class="font-medium">AED 4,275</span> | |
| </div> | |
| <div class="flex justify-between font-bold border-t border-gray-200 pt-2 mt-2"> | |
| <span>Amount Due:</span> | |
| <span class="text-blue-700">AED 38,475</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Timeline --> | |
| <div class="md:col-span-2"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-history text-blue-500 mr-2"></i> Activity Timeline | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Tracker Entry --> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">PC Submitted</div> | |
| <div class="text-xs text-gray-500 mb-2">15-Mar-2025 09:30 • Payment Cert Register</div> | |
| </div> | |
| <div class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">Sheet Record</div> | |
| </div> | |
| <div class="text-sm"> | |
| Payment Certificate entered into system by Sydney Sarmiento (PA to Oper. Manager) | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="font-medium">Tracker Status:</span> Submitted | |
| </div> | |
| </div> | |
| <!-- Email Activity --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Commercial Review</div> | |
| <div class="text-xs text-gray-500 mb-2">16-Mar-2025 10:15 • Email from Uwais</div> | |
| </div> | |
| <div class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">Email Activity</div> | |
| </div> | |
| <div class="text-sm"> | |
| Uwais approved commercial terms and forwarded to QS for certification: | |
| <div class="bg-white mt-2 p-2 rounded text-xs italic"> | |
| "Please verify quantities against site measurements before certifying." | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Update --> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">QS Certified</div> | |
| <div class="text-xs text-gray-500 mb-2">17-Mar-2025 14:00 • Payment Cert Register</div> | |
| </div> | |
| <div class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">Sheet Record</div> | |
| </div> | |
| <div class="text-sm"> | |
| Jamzith certified quantities and amounts, approving for payment processing | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="font-medium">Tracker Status Changed to:</span> Pending Finance Certification | |
| </div> | |
| </div> | |
| <!-- Email Activity --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 relative pl-8 timeline-item"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="font-medium">Contractor Reminder</div> | |
| <div class="text-xs text-gray-500 mb-2">3h ago • Email from Jamzith (QS)</div> | |
| </div> | |
| <div class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">Email Activity</div> | |
| </div> | |
| <div class="text-sm"> | |
| Contractor reminder about late payment penalty clauses: | |
| <div class="bg-white mt-2 p-2 rounded text-xs italic"> | |
| "Per contract clause 8.3, payment delayed beyond 14 days incurs 1% daily penalty. Currently at day 12." | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <button class="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"> | |
| <i class="fas fa-reply mr-1"></i> Respond | |
| </button> | |
| <button class="text-xs px-3 py-1 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 ml-2"> | |
| <i class="fas fa-check-circle mr-1"></i> Mark Processed | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Linked Documents --> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-link text-blue-500 mr-2"></i> Linked Documents | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm"> | |
| <div class="border border-gray-200 rounded p-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="font-medium">LPO#123-2023</div> | |
| <div class="text-xs text-gray-500">Bauhaus Furniture</div> | |
| <div class="text-xs mt-1 text-blue-600">AED 45,000</div> | |
| </div> | |
| <div class="border border-gray-200 rounded p-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="font-medium">Contract #CT-2048</div> | |
| <div class="text-xs text-gray-500">Bauhaus General Terms</div> | |
| <div class="text-xs mt-1 text-blue-600">1 year duration</div> | |
| </div> | |
| <div class="border border-gray-200 rounded p-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="font-medium">Delivery Note #7845</div> | |
| <div class="text-xs text-gray-500">Received 10-Mar</div> | |
| <div class="text-xs mt-1 text-blue-600">Signed by Site Engineer</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Alert Modal --> | |
| <div id="privModal" class="modal" style="display: block;"> | |
| <div class="modal-content" style="max-width: 500px; margin: 10% auto;"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-lock text-blue-500 mr-3"></i> Privacy & Security Notice | |
| </h2> | |
| <div class="text-sm text-gray-600 mb-6"> | |
| <p class="mb-4">This dashboard contains sensitive commercial information intended only for authorized Seven Tides personnel.</p> | |
| <p class="mb-4">All activity is logged and monitored. Unauthorized access or disclosure may result in disciplinary action.</p> | |
| <p>By continuing, you acknowledge your responsibility to maintain confidentiality of all information displayed.</p> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="closeModal('privModal')"> | |
| I Understand | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple modal functions | |
| function openModal(modalId) { | |
| document.getElementById(modalId).style.display = 'block'; | |
| } | |
| function closeModal(modalId) { | |
| document.getElementById(modalId).style.display = 'none'; | |
| } | |
| // Close modal when clicking outside | |
| window.onclick = function(event) { | |
| if (event.target.className === 'modal') { | |
| event.target.style.display = 'none'; | |
| } | |
| } | |
| // Simulate data loading | |
| setTimeout(() => { | |
| document.getElementById('privModal').style.display = 'none'; | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> |