File size: 3,794 Bytes
582520a | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReplyFlow Dashboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/css/styles.css" />
</head>
<body>
<div class="shell">
<header class="topbar">
<a class="brand" href="/">
<span class="brand-mark" aria-hidden="true"></span>
<span>ReplyFlow</span>
</a>
<nav class="nav">
<a href="/chat">Live demo</a>
</nav>
</header>
<section style="padding:1rem 0 2.5rem">
<h1 style="font-family:var(--font-display);letter-spacing:-0.03em;margin:0 0 0.4rem">
Operator dashboard
</h1>
<p style="color:var(--muted);margin:0 0 1rem">
Conversation metrics and unanswered questions.
</p>
<div class="stats-grid" id="stats-grid">
<div class="panel stat"><div class="label">Conversations</div><div class="value" id="s-total">0</div></div>
<div class="panel stat"><div class="label">Resolved without human</div><div class="value" id="s-rate">0%</div></div>
<div class="panel stat"><div class="label">Appointments</div><div class="value" id="s-appt">0</div></div>
<div class="panel stat"><div class="label">Handed off</div><div class="value" id="s-hand">0</div></div>
<div class="panel stat"><div class="label">Unanswered</div><div class="value" id="s-unans">0</div></div>
<div class="panel stat"><div class="label">Complete leads</div><div class="value" id="s-leads">0</div></div>
</div>
<div class="panel" style="padding:1rem;margin-bottom:1rem">
<h2 style="font-family:var(--font-display);font-size:1.1rem;margin:0 0 0.8rem">
Recent conversations
</h2>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>ID</th>
<th>Channel</th>
<th>Lang</th>
<th>Lead</th>
<th>Status</th>
<th>Msgs</th>
<th>When</th>
<th></th>
</tr>
</thead>
<tbody id="conv-body"></tbody>
</table>
</div>
</div>
<div class="panel" style="padding:1rem">
<h2 style="font-family:var(--font-display);font-size:1.1rem;margin:0 0 0.8rem">
Recent unanswered
</h2>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>ID</th>
<th>Conversation</th>
<th>Question</th>
<th>When</th>
</tr>
</thead>
<tbody id="unans-body"></tbody>
</table>
</div>
</div>
</section>
</div>
<script src="/static/js/dashboard.js"></script>
</body>
</html>
|