| <!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> |
|
|
