Update frontend/dashboard.html

frontend/dashboard.html

@@ -156,63 +156,124 @@
     </main>
 
     <script>
+        // --- CẤU HÌNH API THÔNG MINH ---
+        // Giúp Dashboard chạy được cả trên Localhost, File HTML rời, và Hugging Face
+        function getBaseUrl() {
+            const host = window.location.hostname;
+            
+            // 1. Nếu chạy Localhost (IP 127.0.0.1 hoặc localhost)
+            if (host === 'localhost' || host === '127.0.0.1') {
+                // Mặc định HF Spaces chạy port 7860, Local thường là 8000
+                // Bạn có thể sửa thành 8000 nếu chạy local
+                return "http://localhost:7860"; 
+            }
+            
+            // 2. Nếu chạy file HTML trực tiếp (file://)
+            if (window.location.protocol === 'file:') {
+                return "http://localhost:7860"; 
+            }
+
+            // 3. Nếu chạy trên Hugging Face (Production)
+            // Trả về chuỗi rỗng để trình duyệt tự nối vào domain hiện tại
+            return ""; 
+        }
+
+        const API_BASE = getBaseUrl();
+        console.log("👉 API BASE URL:", API_BASE || "(Relative Path)");
+
         let rawData = [];
         let currentPeriod = 'today';
         let busChart, intChart, sentChart;
 
-        // --- HÀM MỚI: GỌI API LẤY DỮ LIỆU THẬT ---
+        // --- HÀM GỌI API ---
         async function fetchRealData() {
+            const statusDot = document.getElementById('status-dot');
+            const lastUpdate = document.getElementById('last-update');
+
             try {
-                // Hiệu ứng loading nhẹ
-                document.getElementById('status-dot').className = "w-2 h-2 bg-yellow-400 rounded-full animate-ping";
+                // Hiệu ứng đang tải
+                statusDot.className = "w-2 h-2 bg-yellow-400 rounded-full animate-ping";
+                lastUpdate.innerText = "Syncing...";
+
+                // Gọi API với đường dẫn đã xử lý
+                // Thêm timestamp để tránh cache trình duyệt
+                const response = await fetch(`${API_BASE}/api/dashboard-stats?t=${new Date().getTime()}`);
                 
-                const response = await fetch('/api/dashboard-stats');
+                // Kiểm tra nếu Server báo lỗi (VD: 500 Internal Server Error)
+                if (!response.ok) {
+                    throw new Error(`Server Error: ${response.status}`);
+                }
+
                 const result = await response.json();
                 
                 if (result.status === 'success') {
-                    // Map dữ liệu từ Backend sang format của Dashboard
+                    // Map dữ liệu
                     rawData = result.data.map(item => ({
                         id: item.id || 0,
-                        time: item.timestamp, // Format từ backend
-                        dur: item.duration || 0,
-                        // Xử lý cost: Nếu là dict thì lấy value, không thì lấy chính nó
+                        time: item.timestamp || item.time, // Handle cả 2 trường hợp tên biến
+                        dur: item.duration || item.dur || 0,
                         cost: (typeof item.cost === 'object') ? item.cost.value : item.cost,
                         csat: (typeof item.cost === 'object') ? item.cost.csat : (item.csat || 4),
-                        ai: item.ai_resolved,
+                        ai: item.ai_resolved || item.ai,
                         intent: item.intent || 'general',
-                        sent: item.sentiment || 'neutral',
-                        upsell: item.upsell || false
+                        sent: item.sentiment || item.sent || 'neutral',
+                        upsell: item.upsell_success || item.upsell || false
                     }));
                     
-                    // Sắp xếp mới nhất lên đầu
+                    // Sắp xếp
                     rawData.sort((a, b) => new Date(b.time) - new Date(a.time));
                     
                     loadDashboard(currentPeriod);
                     
-                    // Cập nhật trạng thái Online
-                    document.getElementById('status-dot').className = "w-2 h-2 bg-green-400 rounded-full animate-pulse";
-                    document.getElementById('last-update').innerText = new Date().toLocaleTimeString('vi-VN');
+                    // Cập nhật trạng thái XANH (Thành công)
+                    statusDot.className = "w-2 h-2 bg-green-400 rounded-full animate-pulse";
+                    lastUpdate.innerText = new Date().toLocaleTimeString('vi-VN');
+                    // Xóa thông báo lỗi nếu có
+                    document.getElementById('connection-error-msg')?.remove();
+                } else {
+                    throw new Error("API trả về dữ liệu lỗi");
                 }
             } catch (error) {
-                console.error("Lỗi lấy dữ liệu:", error);
-                document.getElementById('status-dot').className = "w-2 h-2 bg-red-500 rounded-full";
+                console.error("❌ LỖI DASHBOARD:", error);
+                
+                // Cập nhật trạng thái ĐỎ (Lỗi)
+                statusDot.className = "w-2 h-2 bg-red-600 rounded-full";
+                lastUpdate.innerText = "Mất kết nối";
+                
+                // Hiển thị lỗi lên màn hình để dễ debug trên HF
+                showErrorOnScreen(error.message);
             }
         }
 
+        // Hàm hiển thị lỗi nhỏ trên giao diện (giúp debug nhanh)
+        function showErrorOnScreen(msg) {
+            if(!document.getElementById('connection-error-msg')) {
+                const div = document.createElement('div');
+                div.id = 'connection-error-msg';
+                div.className = "fixed bottom-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded shadow-lg text-xs z-50";
+                document.body.appendChild(div);
+                div.innerText = "⚠️ Lỗi: " + msg;
+            } else {
+                document.getElementById('connection-error-msg').innerText = "⚠️ Lỗi: " + msg;
+            }
+        }
+
+        // --- CÁC HÀM HELPER & CHART (GIỮ NGUYÊN LOGIC CŨ) ---
         function formatAHT(seconds) {
             if (!seconds || isNaN(seconds)) return "00:00";
             const m = Math.floor(seconds / 60).toString().padStart(2, '0');
             const s = (seconds % 60).toString().padStart(2, '0');
             return `${m}:${s}`;
         }
-
+        
         function filterData(period) {
             if (!rawData || rawData.length === 0) return [];
             const now = new Date();
             const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6);
+            // Fix logic tuần: Lấy 7 ngày gần nhất
+            const startOfWeek = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
             const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
+            
             return rawData.filter(item => {
                 const itemTime = new Date(item.time);
                 if (period === 'today') return itemTime >= startOfDay;
@@ -225,7 +286,7 @@
         function calculateMetrics(data) {
             const total = data.length;
             if (total === 0) return { totalCalls: 0, avgCost: 0, aht: 0, fcr: 0, avgCSAT: 0, intents: { network:0, cancel:0, competitor:0, low_data:0 }, sentiments: { pos:0, neu:0, neg:0 } };
-
+            
             const totalCost = data.reduce((sum, c) => sum + (Number(c.cost) || 0), 0);
             const totalDur = data.reduce((sum, c) => sum + (Number(c.dur) || 0), 0);
             const totalCSAT = data.reduce((sum, c) => sum + (Number(c.csat) || 0), 0);
@@ -233,16 +294,17 @@
             
             const intents = { network: 0, cancel: 0, competitor: 0, low_data: 0 };
             const sents = { pos: 0, neu: 0, neg: 0 };
-
+            
             data.forEach(c => {
                 const i = (c.intent || "").toLowerCase();
                 if(i.includes('network')) intents.network++;
                 else if(i.includes('low_data') || i.includes('data')) intents.low_data++;
                 else if(i.includes('cancel')) intents.cancel++;
-                else intents.competitor++; // Gom các loại khác vào competitor hoặc general
-
-                if(c.sent === 'positive') sents.pos++;
-                else if(c.sent === 'negative') sents.neg++;
+                else intents.competitor++;
+                
+                const s = (c.sent || "").toLowerCase();
+                if(s.includes('pos')) sents.pos++;
+                else if(s.includes('neg')) sents.neg++;
                 else sents.neu++;
             });
 
@@ -260,9 +322,7 @@
         function renderCharts(metrics, period) {
             Chart.defaults.font.family = 'Plus Jakarta Sans';
             Chart.defaults.color = '#64748b';
-
-            // Chart Logic (Vẫn dùng dummy cho đường line chart vì chưa đủ data history)
-            // Nhưng Pie/Doughnut dùng data thật
+            
             const labels = period === 'today' ? ['08:00','10:00','12:00','14:00','16:00'] : ['Th 2','Th 3','Th 4','Th 5','Th 6','Th 7','CN'];
             const retentionData = [65,68,62,70,75,72,78];
             const upsellData = [10,12,8,15,14,13,16];
@@ -304,11 +364,10 @@
         function updateFeed() {
             const feedContainer = document.getElementById('activity-feed');
             feedContainer.innerHTML = '';
-            // Lấy 10 cuộc gọi gần nhất
             const recentItems = rawData.slice(0,10);
-
+            
             if(recentItems.length === 0) {
-                feedContainer.innerHTML = '<div class="text-center text-slate-400 py-10">Chưa có dữ liệu cuộc gọi</div>';
+                feedContainer.innerHTML = '<div class="text-center text-slate-400 py-10 text-sm">Chưa có dữ liệu cuộc gọi nào.</div>';
                 return;
             }
 
@@ -318,16 +377,18 @@
                 if(item.upsell){ 
                     iconClass='bg-emerald-100 text-emerald-600'; icon='fa-arrow-trend-up'; title='Upsell Thành công!'; msg=`KH ${item.id} đã chốt đơn.`; 
                 }
-                else if(item.intent==='low_data'){ 
+                else if(item.intent.includes('low_data')){ 
                     iconClass='bg-purple-100 text-purple-600'; icon='fa-database'; title='Phàn nàn Data'; msg=`KH ${item.id} báo dung lượng thấp.`; 
                 }
-                else if(item.sent==='negative'){ 
+                else if(item.sent.includes('neg')){ 
                     iconClass='bg-rose-100 text-rose-600'; icon='fa-triangle-exclamation'; title='Cảnh báo Rủi ro'; msg=`KH ${item.id} có thái độ tiêu cực.`; 
                 }
 
-                // Format thời gian
                 let dateObj = new Date(item.time);
-                const timeString = isNaN(dateObj) ? "N/A" : dateObj.toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'});
+                const timeString = isNaN(dateObj) ? "--:--" : dateObj.toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'});
+                
+                // Format cost
+                const costDisplay = item.cost ? Number(item.cost).toLocaleString() : "0";
 
                 feedContainer.innerHTML+=`
                     <div class="flex gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:bg-white hover:shadow-md transition-all">
@@ -343,7 +404,7 @@
                             <div class="mt-2 flex gap-3 text-[10px] font-semibold text-slate-400 uppercase tracking-wide">
                                 <span><i class="fas fa-star text-amber-400 mr-1"></i> ${item.csat}/5</span>
                                 <span><i class="fas fa-clock text-blue-400 mr-1"></i> ${item.dur}s</span>
-                                <span><i class="fas fa-coins text-green-500 mr-1"></i> ${Number(item.cost).toLocaleString()}đ</span>
+                                <span><i class="fas fa-coins text-green-500 mr-1"></i> ${costDisplay}đ</span>
                             </div>
                         </div>
                     </div>
@@ -361,25 +422,22 @@
         function loadDashboard(period){
             const filteredData = filterData(period);
             const metrics = calculateMetrics(filteredData);
-
-            // Animate Numbers
+            
             document.getElementById('kpi-total-calls').innerText = metrics.totalCalls.toLocaleString();
             document.getElementById('kpi-cost').innerText = metrics.avgCost.toLocaleString();
             document.getElementById('kpi-aht').innerText = formatAHT(metrics.aht);
             document.getElementById('kpi-fcr').innerText = metrics.fcr;
             document.getElementById('fcr-bar').style.width = `${metrics.fcr}%`;
             document.getElementById('kpi-csat').innerText = metrics.avgCSAT;
-
+            
             renderCharts(metrics, period);
             updateFeed();
         }
 
         document.addEventListener('DOMContentLoaded', ()=>{
-            // Gọi lần đầu
             fetchRealData();
-            
-            // Tự động refresh mỗi 10 giây
-            setInterval(fetchRealData, 10000);
+            // Refresh mỗi 5s
+            setInterval(fetchRealData, 5000);
         });
     </script>