dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ellavox Manager Agent Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white font-sans p-8">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="flex justify-between items-center mb-8 border-b border-gray-700 pb-6">
            <div>
                <h1 class="text-3xl font-bold text-blue-400">⚡ Ellavox Manager Agent</h1>
                <p class="text-gray-400">Live Quality Assurance & Governance Dashboard</p>
            </div>
            <div class="text-right">
                <span id="timestamp" class="text-xs text-gray-500"></span>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <p class="text-gray-400 text-sm mb-1">Total Calls (24h)</p>
                <h2 id="totalCalls" class="text-4xl font-bold">--</h2>
            </div>
            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <p class="text-gray-400 text-sm mb-1">Avg Quality Score</p>
                <h2 id="avgScore" class="text-4xl font-bold text-green-400">--</h2>
            </div>
            <div class="bg-gray-800 p-6 rounded-xl border border-red-900/50">
                <p class="text-gray-400 text-sm mb-1">Critical Failures</p>
                <h2 id="criticalCount" class="text-4xl font-bold text-red-500">--</h2>
            </div>
        </div>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Recent Calls -->
            <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                <div class="p-4 bg-gray-700/50 border-b border-gray-600">
                    <h3 class="font-semibold">Audit Logs (Recent)</h3>
                </div>
                <table class="w-full text-left text-sm">
                    <thead class="bg-gray-900/50 text-gray-400 uppercase text-xs">
                        <tr>
                            <th class="p-4">Call ID</th>
                            <th class="p-4">Score</th>
                            <th class="p-4">Status</th>
                        </tr>
                    </thead>
                    <tbody id="callTable">
                        <!-- Rows injected here -->
                    </tbody>
                </table>
            </div>

            <!-- Focus Issue -->
            <div class="bg-gray-800 p-6 rounded-xl border border-yellow-900/30">
                <h3 class="text-xl font-bold text-yellow-500 mb-4">🚨 Priority Fix Recommendation</h3>
                <div class="bg-gray-900 p-4 rounded-lg mb-4">
                    <p class="text-sm text-gray-300 italic mb-2">"The agent verbally confirmed the reservation but did not trigger the transferCall tool, leaving the customer in silence."</p>
                    <p class="text-xs text-blue-400 uppercase font-bold">Detected in: Call 019c3100</p>
                </div>
                <h4 class="text-xs uppercase text-gray-500 font-bold mb-2">Copy-Paste Prompt Fix:</h4>
                <div class="bg-black p-4 rounded-lg font-mono text-xs text-green-400 border border-gray-700">
                    TRANSFER RULE (CRITICAL): After saying "Let me connect you," you MUST call transferCall immediately. Do NOT generate further text.
                </div>
            </div>
        </div>
    </div>

    <script>
        // In a real environment, this would fetch from a local API
        // For the POC demo, we'll embed the data directly or read from a global variable
        const data = {
            "avgScore": 84,
            "totalCalls": 50,
            "criticalCount": 3,
            "recentCalls": [
                { "id": "019c3100", "score": 62, "verdict": "FAIL" },
                { "id": "019c2fb9", "score": 95, "verdict": "PASS" },
                { "id": "019c343f", "score": 71, "verdict": "PASS" },
                { "id": "019c3896", "score": 88, "verdict": "PASS" },
                { "id": "019c4342", "score": 59, "verdict": "FAIL" }
            ]
        };

        document.getElementById('totalCalls').innerText = data.totalCalls;
        document.getElementById('avgScore').innerText = data.avgScore + '/100';
        document.getElementById('criticalCount').innerText = data.criticalCount;
        document.getElementById('timestamp').innerText = new Date().toLocaleString();

        const table = document.getElementById('callTable');
        data.recentCalls.forEach(call => {
            const row = document.createElement('tr');
            row.className = "border-b border-gray-700 hover:bg-gray-700/30 transition-colors";
            row.innerHTML = `
                <td class="p-4 font-mono text-gray-400">${call.id}</td>
                <td class="p-4 font-bold ${call.score < 65 ? 'text-red-500' : 'text-green-400'}">${call.score}</td>
                <td class="p-4">
                    <span class="px-2 py-1 rounded text-xs font-bold ${call.verdict === 'PASS' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'}">${call.verdict}</span>
                </td>
            `;
            table.appendChild(row);
        });
    </script>
</body>
</html>