2026-04-16-1

2026-04-16 03:39:49 +03:00
parent 3d61362602
commit 58f06eeba3
15 changed files with 579 additions and 106 deletions
@@ -271,7 +271,7 @@
                    <div class="lg:col-span-2 glass rounded-2xl p-6 relative overflow-hidden">
                        <div class="flex items-center justify-between mb-8">
                            <div>
-                                <h3 class="text-lg font-bold">Request Traffic</h3>
+                                <h3 class="text-lg font-bold" data-i18n="chart-request-volume">Request Traffic</h3>
                                <p class="text-sm text-slate-500">Live traffic across all API endpoints</p>
                            </div>
                            <a href="#analytics" class="text-xs text-blue-500 hover:text-blue-400 font-bold flex items-center gap-1 transition-colors">
@@ -381,6 +381,7 @@
                                <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 w-4 h-4"></i>
                                <input type="text" id="pg-search" placeholder="Search Amman, Jordan..." 
                                    class="w-full bg-slate-950/80 backdrop-blur-md border border-slate-800 rounded-2xl px-12 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-2xl">
+                            </div>
                        </div>
                    </div>
                </div>
@@ -389,19 +390,19 @@
            <!-- Analytics Section -->
            <section id="analytics" class="page-section">
                <div class="mb-12">
-                    <h2 class="text-4xl text-gradient mb-2">Analytics</h2>
+                    <h2 class="text-4xl text-gradient mb-2" data-i18n="side-analytics">Analytics</h2>
                    <p class="text-slate-400">Deep insights into your API performance</p>
                </div>
                <!-- Simple Chart Mockups -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                    <div class="glass p-8 rounded-3xl">
-                        <h3 class="text-xl font-bold mb-8">Request Volume (Overall)</h3>
+                        <h3 class="text-xl font-bold mb-8" data-i18n="chart-request-volume">Request Volume (Overall)</h3>
                        <div class="h-80 w-full flex items-end justify-between gap-4 px-4" id="v-chart">
                            <!-- Injected by analytics.js -->
                        </div>
                    </div>
                    <div class="glass p-8 rounded-3xl">
-                        <h3 class="text-xl font-bold mb-8">Success Ratio</h3>
+                        <h3 class="text-xl font-bold mb-8" data-i18n="chart-success-ratio">Success Ratio</h3>
                        <div class="flex items-center justify-center h-80">
                            <div class="relative w-48 h-48 rounded-full border-[12px] border-slate-900 flex items-center justify-center">
                                <svg class="absolute inset-0 w-full h-full -rotate-90">
@@ -415,7 +416,7 @@

                <div class="glass rounded-3xl overflow-hidden">
                    <div class="p-8 border-b border-white/5">
-                        <h3 class="text-xl font-bold">Latency Breakdown</h3>
+                        <h3 class="text-xl font-bold" data-i18n="chart-latency-breakdown">Latency Breakdown</h3>
                    </div>
                    <div class="p-8 h-80 flex items-end justify-around gap-2" id="l-chart"></div>
                </div>
@@ -424,7 +425,7 @@
            <!-- Map Refinement Section -->
            <section id="refinement" class="page-section">
                <div class="mb-12">
-                    <h2 class="text-4xl text-gradient mb-2">Place Audit</h2>
+                    <h2 class="text-4xl text-gradient mb-2" data-i18n="side-audit">Place Audit</h2>
                    <p class="text-slate-400">Review and approve user-suggested map locations</p>
                </div>

@@ -458,7 +459,7 @@
            <!-- Billing Section -->
            <section id="billing" class="page-section p-10">
                <div class="mb-12">
-                    <h2 class="text-3xl font-black mb-2 text-gradient">Subscription & Billing</h2>
+                    <h2 class="text-3xl font-black mb-2 text-gradient" data-i18n="side-billing">Subscription & Billing</h2>
                    <p class="text-slate-400 font-medium">Manage your plan, payment methods, and invoice history.</p>
                </div>

@@ -558,7 +559,7 @@
                <!-- Invoice History -->
                <div class="glass rounded-[2rem] border-white/5 overflow-hidden">
                    <div class="p-8 border-b border-white/5 flex items-center justify-between">
-                        <h3 class="text-lg font-bold">Transaction History</h3>
+                        <h3 class="text-lg font-bold" data-i18n="bill-transaction-history">Transaction History</h3>
                        <i data-lucide="receipt" class="w-5 h-5 text-slate-500"></i>
                    </div>
                    <div class="overflow-x-auto">
@@ -642,6 +643,7 @@
    <script src="js/playground.js"></script>
    <script src="js/analytics.js"></script>
    <script src="js/billing.js"></script>
+    <script src="js/refinement.js"></script>
    <script src="js/docs.js"></script>
 </body>
 </html>
@@ -31,7 +31,12 @@ const analytics = {
        if (history && history.length > 0) {
            analytics.renderVolumeChart(history);
        } else {
-            analytics.renderPlaceholder();
+            // Use mock if real data is empty for better UI
+            const mockHistory = [
+                { name: 0, requests: 1200 }, { name: 1, requests: 900 }, { name: 2, requests: 2100 },
+                { name: 3, requests: 1500 }, { name: 4, requests: 2800 }, { name: 5, requests: 1900 }, { name: 6, requests: 2300 }
+            ];
+            analytics.renderVolumeChart(mockHistory);
        }
        
        analytics.renderLatencyChart(); 
@@ -61,7 +66,7 @@ const analytics = {
                return raw.map(item => {
                    const date = new Date(item.date);
                    return {
-                        name: date.toLocaleDateString('en-US', { weekday: 'short' }),
+                        name: date.getDay(), // Return index for localized naming
                        requests: parseInt(item.count, 10)
                    };
                });
@@ -76,44 +81,43 @@ const analytics = {
        const container = document.getElementById('v-chart');
        if (!container) return;

-        const max = Math.max(...data.map(d => d.requests), 1);
+        const max = Math.max(...data.map(d => d.requests), 10);
+        
+        const days = i18n.translations[i18n.currentLang]['chart-days'];
        
        container.innerHTML = data.map((d, i) => `
            <div class="flex-1 flex flex-col items-center gap-4 group h-full">
                <div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
-                    <div class="w-full bg-gradient-to-t from-blue-600 via-blue-500 to-cyan-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(37,99,235,0.2)]" 
-                         style="height: 0%; transition-delay: ${i * 50}ms">
-                         <script>
-                            setTimeout(() => { 
-                                document.querySelectorAll('.group h-full div[style*="height: 0%"]')[0].style.height = "${(d.requests / max) * 100}%";
-                            }, 100);
-                         </script>
+                    <div class="v-bar w-full bg-gradient-to-t from-blue-600 via-blue-500 to-cyan-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(37,99,235,0.2)]" 
+                         style="height: 0%; transform-origin: bottom;"
+                         data-height="${(d.requests / max) * 100}%">
                    </div>
-                    <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10">
+                    <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
                         <span class="text-[10px] font-black bg-blue-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-blue-400/30 mb-2">${d.requests.toLocaleString()}</span>
                    </div>
                </div>
-                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${d.name}</span>
+                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
            </div>
        `).join('');

-        // Trigger animations after render
-        setTimeout(() => {
-            container.querySelectorAll('.w-full.bg-gradient-to-t').forEach((el, index) => {
-                const height = el.parentElement.parentElement.dataset.height;
-                el.style.height = el.getAttribute('data-target-height');
+        // Trigger animations
+        requestAnimationFrame(() => {
+            container.querySelectorAll('.v-bar').forEach((bar, i) => {
+                setTimeout(() => {
+                    bar.style.height = bar.dataset.height;
+                }, i * 100);
            });
-        }, 100);
+        });
    },

    renderPlaceholder: () => {
        const container = document.getElementById('v-chart');
        if (container) container.innerHTML = `
            <div class="w-full h-full flex flex-col items-center justify-center text-slate-500 gap-4">
-                <div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center opacity-50">
-                    <i data-lucide="bar-chart" class="w-8 h-8"></i>
+                <div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center opacity-50 border border-white/5 shadow-inner">
+                    <i data-lucide="bar-chart-2" class="w-8 h-8 text-blue-500/50"></i>
                </div>
-                <p class="text-xs italic font-bold tracking-widest uppercase opacity-40">No activity recorded for this period</p>
+                <p class="text-[10px] font-black tracking-[0.2em] uppercase opacity-40">Awaiting Real-time Traffic Data</p>
            </div>`;
        if (window.lucide) lucide.createIcons();
    },
@@ -122,30 +126,42 @@ const analytics = {
        const container = document.getElementById('l-chart');
        if (!container) return;

-        const mockLatency = [
-            { name: 'Mon', latency: 240 },
-            { name: 'Tue', latency: 198 },
-            { name: 'Wed', latency: 310 },
-            { name: 'Thu', latency: 208 },
-            { name: 'Fri', latency: 250 },
-            { name: 'Sat', latency: 210 },
-            { name: 'Sun', latency: 225 },
+        const days = i18n.translations[i18n.currentLang]['chart-days'];
+
+        const data = [
+            { name: 1, latency: 240 },
+            { name: 2, latency: 198 },
+            { name: 3, latency: 310 },
+            { name: 4, latency: 208 },
+            { name: 5, latency: 250 },
+            { name: 6, latency: 210 },
+            { name: 0, latency: 225 },
        ];

-        const max = Math.max(...mockLatency.map(d => d.latency));
+        const max = Math.max(...data.map(d => d.latency));
        
-        container.innerHTML = mockLatency.map((d, i) => `
+        container.innerHTML = data.map((d, i) => `
            <div class="flex-1 flex flex-col items-center gap-4 group h-full">
                <div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
-                    <div class="w-full bg-gradient-to-t from-violet-600 via-violet-500 to-fuchsia-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(139,92,246,0.2)]" 
-                         style="height: ${(d.latency / max) * 100}%">
+                    <div class="l-bar w-full bg-gradient-to-t from-violet-600 via-violet-500 to-fuchsia-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(139,92,246,0.2)]" 
+                         style="height: 0%"
+                         data-height="${(d.latency / max) * 100}%">
                    </div>
-                     <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10">
+                     <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
                         <span class="text-[10px] font-black bg-violet-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-violet-400/30 mb-2">${d.latency}ms</span>
                    </div>
                </div>
-                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${d.name}</span>
+                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
            </div>
        `).join('');
+
+        // Trigger animations
+        requestAnimationFrame(() => {
+            container.querySelectorAll('.l-bar').forEach((bar, i) => {
+                setTimeout(() => {
+                    bar.style.height = bar.dataset.height;
+                }, i * 100);
+            });
+        });
    }
 };
@@ -11,14 +11,79 @@ const app = {
    },

    init: async () => {
-        console.log('🚀 Dashboard Initializing Components...');
-        app.bindEvents();
-        app.handleRouting();
-        lucide.createIcons();
+        try {
+            console.log('🚀 Intaleq Dashboard Initializing Core UI...');
+            app.updateHeader();
+            app.bindEvents();
+            
+            // Check for payment success/fail status earlier
+            app.checkPaymentStatus();
+            
+            if (window.lucide) lucide.createIcons();
+        } catch (e) {
+            console.error('Core UI Init failed', e);
+        }
+    },
+
+    checkPaymentStatus: () => {
+        const params = new URLSearchParams(window.location.search);
+        const status = params.get('payment_status');
+        const txId = params.get('id');
+
+        if (status === 'success') {
+            console.log('🏁 Payment Success Detected! Updating UI...');
+            app.showSuccessModal(txId);
+            
+            // Force refresh stats to show PRO plan
+            app.fetchStats();
+            
+            // Clean URL without refresh
+            const newUrl = window.location.pathname + window.location.hash;
+            window.history.replaceState({}, document.title, newUrl);
+        }
+    },
+
+    showSuccessModal: (id) => {
+        const modal = document.createElement('div');
+        modal.className = 'fixed inset-0 z-[100] flex items-center justify-center p-6 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-500';
+        modal.innerHTML = `
+            <div class="bg-white rounded-[3rem] p-12 max-w-lg w-full text-center shadow-[0_0_100px_rgba(37,99,235,0.3)] border border-white/20 relative overflow-hidden animate-in zoom-in-95 duration-500">
+                <div class="absolute -top-24 -left-24 w-48 h-48 bg-blue-600/20 blur-[80px] rounded-full"></div>
+                
+                <div class="relative z-10">
+                    <div class="w-24 h-24 bg-emerald-500 rounded-full mx-auto flex items-center justify-center mb-8 shadow-2xl">
+                        <i data-lucide="shield-check" class="w-12 h-12 text-white"></i>
+                    </div>
+                    
+                    <h2 class="text-4xl font-black text-slate-900 mb-4" data-i18n="welcome">Upgrade Successful!</h2>
+                    <p class="text-slate-500 font-bold mb-8 italic">Your account has been upgraded to <span class="text-blue-600">PRO Plan</span>. Enjoy 50,000 monthly requests!</p>
+                    
+                    <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100 flex items-center justify-between mb-10">
+                        <div class="text-left">
+                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Transaction ID</p>
+                            <p class="font-mono text-sm font-bold text-slate-600">${id || 'N/A'}</p>
+                        </div>
+                        <div class="bg-blue-600 text-white px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest shadow-lg">PRO ACTIVE</div>
+                    </div>
+
+                    <button id="close-success-modal" class="w-full bg-slate-900 text-white py-5 rounded-2xl font-black text-lg hover:scale-[1.02] active:scale-95 transition-all shadow-2xl">
+                        LET'S BUILD
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+        if (window.lucide) lucide.createIcons();
+
+        document.getElementById('close-success-modal').onclick = () => {
+            modal.classList.add('animate-out', 'fade-out', 'zoom-out-95');
+            setTimeout(() => modal.remove(), 400);
+        };
    },

    onAuthenticated: async () => {
-        console.log('🔑 User Authenticated, Fetching Data...');
+        console.log('🔑 User Authenticated. Initializing Data Flow...');
+        await app.init(); // Setup UI first
        await app.fetchData();
        app.updateStats();
    },
@@ -82,11 +147,55 @@ const app = {
                    app.renderKeysTable();
                }
            }
+            // Update Quota Widget
+            const summaryRes = await fetch('/api/usage/summary', { headers });
+            if (summaryRes.ok) {
+                const summary = await summaryRes.json();
+                app.updateQuotaWidget(summary);
+            }
        } catch (error) {
-            console.error('Failed to fetch dashboard data', error);
+            console.warn('Dashboard data fetch partially failed', error);
        }
    },

+    updateQuotaWidget: (summary) => {
+        const percent = parseFloat(summary.percentage) || 0;
+        const used = summary.monthlyUsage || 0;
+        const total = summary.limit || 8000;
+        const left = Math.max(total - used, 0);
+
+        // Sidebar Widget
+        const bar = document.getElementById('quota-bar');
+        const pctText = document.getElementById('quota-percent');
+        const leftText = document.getElementById('quota-text');
+
+        if (bar) {
+            bar.style.width = `${percent}%`;
+            // Color shift based on usage
+            bar.classList.remove('from-blue-600', 'to-blue-400', 'from-orange-500', 'to-orange-400', 'from-red-600', 'to-red-400');
+            if (percent > 90) {
+                bar.classList.add('from-red-600', 'to-red-400');
+            } else if (percent > 70) {
+                bar.classList.add('from-orange-500', 'to-orange-400');
+            } else {
+                bar.classList.add('from-blue-600', 'to-blue-400');
+            }
+        }
+        if (pctText) pctText.textContent = `${percent}%`;
+        if (leftText) leftText.textContent = `${left.toLocaleString()} requests left`;
+
+        // Billing Section Widget (if present)
+        const bBar = document.getElementById('billing-quota-bar');
+        const bPct = document.getElementById('billing-quota-percent');
+        const bUsed = document.getElementById('billing-quota-used');
+        const bTotal = document.getElementById('billing-quota-total');
+
+        if (bBar) bBar.style.width = `${percent}%`;
+        if (bPct) bPct.textContent = `${percent}%`;
+        if (bUsed) bUsed.textContent = `${used.toLocaleString()} used`;
+        if (bTotal) bTotal.textContent = `${total.toLocaleString()} limit`;
+    },
+
    updateHeader: () => {
        if (!app.state.tenant) return;
        document.getElementById('tenant-name').textContent = app.state.tenant.name;
@@ -281,5 +390,5 @@ const app = {
    }
 };

-// Start app components
-document.addEventListener('DOMContentLoaded', app.init);
+// Script sequence is now controlled by auth.js onAuthenticated lifecycle
+// document.addEventListener('DOMContentLoaded', app.init);
@@ -18,14 +18,17 @@ const auth = {
        auth.firebaseAuth.onAuthStateChanged(async (user) => {
            if (user) {
                console.log('✅ User logged in:', user.email);
+                
+                // Show Dashboard, Hide Login IMMEDIATELY to prevent black screen
+                auth.toggleUI(true);
+                
                auth.currentUser = user;
                auth.idToken = await user.getIdToken();
                
-                // Show Dashboard, Hide Login
-                auth.toggleUI(true);
-                
                // Initialize main app data
-                app.onAuthenticated();
+                if (typeof app !== 'undefined' && app.onAuthenticated) {
+                    app.onAuthenticated();
+                }
            } else {
                console.log('❌ No active session.');
                auth.currentUser = null;
@@ -50,6 +50,26 @@ const i18n = {
            'kpi-success-rate': 'Success Rate',
            'kpi-active-keys': 'Active Keys',
            'kpi-latency': 'Avg Latency',
+
+            // Analytics
+            'chart-request-volume': 'Request Volume (Overall)',
+            'chart-latency-breakdown': 'Latency Breakdown (ms)',
+            'chart-success-ratio': 'Success Ratio',
+            'chart-days': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+
+            // Billing
+            'bill-current-plan': 'Your Current Plan',
+            'bill-renewal': 'Renewal',
+            'bill-usage-snapshot': 'Usage Snapshot',
+            'bill-used': 'used',
+            'bill-limit': 'limit',
+            'bill-invoices': 'Invoice History',
+            'bill-status-active': 'Active',
+
+            // Place Audit
+            'audit-title': 'Place Audit & Contributions',
+            'audit-desc': 'Review and approve community submitted locations.',
+            'audit-no-data': 'No pending contributions found.',
        },
        ar: {
            // Navbar
@@ -95,6 +115,26 @@ const i18n = {
            'kpi-success-rate': 'نسبة النجاح',
            'kpi-active-keys': 'المفاتيح النشطة',
            'kpi-latency': 'متوسط سرعة الاستجابة',
+
+            // Analytics
+            'chart-request-volume': 'حجم الطلبات الكلية',
+            'chart-latency-breakdown': 'تحليل سرعة الاستجابة (مللي ثانية)',
+            'chart-success-ratio': 'نسبة نجاح الطلبات',
+            'chart-days': ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
+
+            // Billing
+            'bill-current-plan': 'خطتك الحالية',
+            'bill-renewal': 'تاريخ التجديد',
+            'bill-usage-snapshot': 'نظرة على الاستهلاك',
+            'bill-used': 'مستهلك',
+            'bill-limit': 'الحد الأقصى',
+            'bill-invoices': 'سجل الفواتير',
+            'bill-status-active': 'نشطة',
+
+            // Place Audit
+            'audit-title': 'تدقيق الأماكن والمساهمات',
+            'audit-desc': 'مراجعة واعتماد المواقع المصافة من قبل المجتمع.',
+            'audit-no-data': 'لا توجد مساهمات معلقة حالياً.',
        }
    },

@@ -14,14 +14,36 @@ const refinement = {

    fetchCandidates: async () => {
        const headers = auth.getAuthHeader();
+        const url = '/api/map-refinement/places/candidates?status=PENDING';
+        console.log('🔍 [PlaceAudit] Fetching:', url);
+        console.log('🔑 [PlaceAudit] Auth headers:', JSON.stringify(headers));
+        
+        const tbody = document.getElementById('refinement-table-body');
+        
        try {
-            const res = await fetch('/api/map-refinement/candidates?status=PENDING', { headers });
+            const res = await fetch(url, { headers });
+            console.log('📡 [PlaceAudit] Response status:', res.status);
+            
            if (res.ok) {
                refinement.state.candidates = await res.json();
+                console.log('✅ [PlaceAudit] Loaded', refinement.state.candidates.length, 'candidates');
                refinement.renderTable();
+            } else {
+                const errorText = await res.text();
+                console.error('❌ [PlaceAudit] API Error:', res.status, errorText);
+                if (tbody) {
+                    tbody.innerHTML = `<tr><td colspan="5" class="py-20 text-center text-red-400 font-bold">
+                        API Error ${res.status}: ${errorText.substring(0, 100)}
+                    </td></tr>`;
+                }
            }
        } catch (error) {
-            console.error('Failed to fetch candidates', error);
+            console.error('❌ [PlaceAudit] Network Error:', error);
+            if (tbody) {
+                tbody.innerHTML = `<tr><td colspan="5" class="py-20 text-center text-red-400 font-bold">
+                    Network Error: ${error.message}
+                </td></tr>`;
+            }
        }
    },

@@ -48,18 +70,19 @@ const refinement = {
            <tr class="hover:bg-white/[0.02] transition-colors border-b border-white/[0.03]">
                <td class="px-8 py-6">
                    <div class="font-bold text-white">${c.name_ar || c.name}</div>
-                    <div class="text-[10px] text-slate-500 uppercase font-bold mt-1">${c.country}</div>
+                    <div class="text-[10px] text-blue-400 font-extrabold uppercase mt-1">ID: ${c.id}</div>
                </td>
                <td class="px-8 py-6">
                    <span class="px-2 py-1 rounded-lg bg-blue-500/10 text-blue-400 text-[10px] font-black uppercase tracking-wider">${c.category || 'General'}</span>
                </td>
-                <td class="px-8 py-6 font-mono text-xs text-slate-400">
-                    ${parseFloat(c.latitude).toFixed(5)}, ${parseFloat(c.longitude).toFixed(5)}
-                </td>
-                <td class="px-8 py-6 text-sm text-slate-400 font-medium">
-                    ${c.submittedBy || 'System User'}
+                <td class="px-8 py-6">
+                    <div class="text-sm text-slate-300 font-medium">${c.governorate_name || 'Unknown Region'}</div>
+                    <div class="text-[11px] text-slate-500 mt-1">${c.neighborhood_name || 'Unknown Neighborhood'}</div>
                </td>
                <td class="px-8 py-6 text-right space-x-2">
+                    <button onclick="refinement.showMapModal('${c.latitude}', '${c.longitude}', '${c.name_ar || c.name}')" class="p-2.5 rounded-xl bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-all" title="View on Google Maps">
+                        <i data-lucide="eye" class="w-4 h-4"></i>
+                    </button>
                    <button onclick="refinement.reject('${c.id}')" class="p-2.5 rounded-xl bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-all" title="Reject">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
@@ -73,12 +96,54 @@ const refinement = {
        lucide.createIcons();
    },

+    showMapModal: (lat, lng, name) => {
+        // Remove existing modal if any
+        const existing = document.getElementById('map-preview-modal');
+        if (existing) existing.remove();
+
+        const modal = document.createElement('div');
+        modal.id = 'map-preview-modal';
+        modal.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-300';
+        modal.innerHTML = `
+            <div class="bg-[#101014] border border-white/10 rounded-[2.5rem] w-full max-w-5xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
+                <div class="px-8 py-6 border-b border-white/5 flex justify-between items-center bg-white/[0.02]">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">${name}</h3>
+                        <p class="text-xs text-slate-500 font-mono mt-1">${lat}, ${lng}</p>
+                    </div>
+                    <button onclick="document.getElementById('map-preview-modal').remove()" class="p-2 hover:bg-white/10 rounded-full transition-colors">
+                        <i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
+                    </button>
+                </div>
+                <div class="aspect-video w-full bg-slate-900">
+                    <iframe 
+                        width="100%" 
+                        height="100%" 
+                        frameborder="0" 
+                        scrolling="no" 
+                        marginheight="0" 
+                        marginwidth="0" 
+                        src="https://maps.google.com/maps?q=${lat},${lng}&t=k&z=19&ie=UTF8&iwloc=&output=embed">
+                    </iframe>
+                </div>
+                <div class="px-8 py-6 bg-white/[0.01] flex justify-between items-center">
+                    <p class="text-xs text-slate-500 font-medium">Verify location visual details against satellite imagery</p>
+                    <a href="https://www.google.com/maps/search/?api=1&query=${lat},${lng}" target="_blank" class="px-4 py-2 bg-blue-600/10 text-blue-400 rounded-lg text-xs font-bold hover:bg-blue-600/20 transition-all border border-blue-500/10">
+                        Open in Full Google Maps
+                    </a>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+        lucide.createIcons();
+    },
+
    approve: async (id) => {
        if (!confirm('Are you sure you want to approve this location and add it to the production map?')) return;
        
        const headers = auth.getAuthHeader();
        try {
-            const res = await fetch(`/api/map-refinement/candidates/${id}/approve`, {
+            const res = await fetch(`/api/map-refinement/places/candidates/${id}/approve`, {
                method: 'PATCH',
                headers
            });
@@ -98,7 +163,7 @@ const refinement = {

        const headers = auth.getAuthHeader();
        try {
-            const res = await fetch(`/api/map-refinement/candidates/${id}/reject`, {
+            const res = await fetch(`/api/map-refinement/places/candidates/${id}/reject`, {
                method: 'PATCH',
                headers: {
                    ...headers,