File size: 6,642 Bytes
dfe8a05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
document.addEventListener('DOMContentLoaded', function() {
// Initial process data
const processData = {
'drivers-license': {
title: 'Driver\'s License Renewal',
score: '4.5',
velocity: '3.8 hrs',
accuracy: '98.7%',
compliance: '100%',
cost: '12,450 AED',
steps: [
'Eye Test at Approved Centers (15 mins)',
'Fine Clearance via MOI App (5 mins)',
'Document Submission (Digital Upload)',
'Payment Processing (Blockchain Verified)',
'Digital Issuance via UAE Pass'
],
recommendations: [
'Integration with Blockchain Fine Settlement to reduce processing time by 4 hours',
'Automated eye test results directly from approved centers via API',
'Predictive document checklist based on user profile',
'Smart notifications for renewal deadlines'
]
},
'visa-sponsorship': {
title: 'Visa Sponsorship Process',
score: '3.2',
velocity: '8.5 hrs',
accuracy: '92.3%',
compliance: '98%',
cost: '8,720 AED',
steps: [
'Employer Identification Verification',
'Employee Documentation Collection',
'Medical Screening Scheduling',
'MOI Approval Process',
'Visa Stamping Appointment'
],
recommendations: [
'Digital verification of employer credentials via blockchain',
'Automated document validation using computer vision',
'Integrated medical center scheduling',
'Smart contract for sponsorship terms'
]
},
'golden-visa': {
title: 'Golden Visa Application',
score: '4.8',
velocity: '2.4 hrs',
accuracy: '99.1%',
compliance: '100%',
cost: '18,300 AED',
steps: [
'Eligibility Auto-Check via GDRFA',
'Document Digitization & Verification',
'Investment Proof Submission',
'Biometric Data Collection',
'Approval & Emirates ID Issuance'
],
recommendations: [
'AI-powered eligibility assessment for instant qualification',
'Blockchain verification of investment documents',
'Biometric pre-screening via UAE Pass',
'VIP concierge service for high-net-worth applicants'
]
}
};
// Set initial process
let currentProcess = 'drivers-license';
updateDashboard(currentProcess);
// Sidebar item click handlers
document.querySelectorAll('.process-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.process-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
currentProcess = this.getAttribute('data-process');
updateDashboard(currentProcess);
});
});
// Re-analyze button
document.getElementById('reanalyze-btn').addEventListener('click', function() {
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = 'Consulting n8n LLM... <span class="loading-spinner"></span>';
btn.disabled = true;
// Simulate API call
setTimeout(() => {
updateDashboard(currentProcess);
btn.innerHTML = originalText;
btn.disabled = false;
// Show success notification
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-500/90 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
notification.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> Analysis updated successfully';
document.body.appendChild(notification);
feather.replace();
setTimeout(() => {
notification.classList.add('opacity-0', 'translate-y-4');
setTimeout(() => notification.remove(), 300);
}, 3000);
}, 2000);
});
// Update dashboard with process data
function updateDashboard(processKey) {
const data = processData[processKey];
// Update main metrics
document.getElementById('process-title').textContent = data.title;
document.getElementById('process-score').textContent = data.score;
document.getElementById('process-velocity').textContent = data.velocity;
document.getElementById('process-accuracy').textContent = data.accuracy;
document.getElementById('process-compliance').textContent = data.compliance;
document.getElementById('process-cost').textContent = data.cost;
// Update process steps
const stepsContainer = document.getElementById('process-steps');
stepsContainer.innerHTML = '';
data.steps.forEach((step, index) => {
const stepElement = document.createElement('div');
stepElement.className = `step-item opacity-0`;
stepElement.style.animationDelay = `${index * 0.1}s`;
stepElement.innerHTML = `
<div class="font-medium">${step}</div>
<div class="text-xs text-gray-400 mt-1">Step ${index + 1}</div>
`;
stepsContainer.appendChild(stepElement);
});
// Update recommendations
const recContainer = document.getElementById('process-recommendations');
recContainer.innerHTML = '';
data.recommendations.forEach((rec, index) => {
const recElement = document.createElement('li');
recElement.className = 'flex items-start';
recElement.innerHTML = `
<div class="flex-shrink-0 mt-1">
<div class="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center">
<i data-feather="star" class="w-3 h-3 text-primary"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm">${rec}</p>
</div>
`;
recContainer.appendChild(recElement);
});
// Refresh feather icons
setTimeout(() => feather.replace(), 100);
}
}); |