index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShopEase — AI Voice Call Agent</title>
    <meta name="description" content="AI-powered voice call agent for e-commerce order management and customer feedback." />
    <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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link rel="stylesheet" href="/src/style.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <div id="app">
      <header class="topbar">
        <div class="topbar-brand">
          <div class="brand-icon">
            <i class="fa-solid fa-headset"></i>
          </div>
          <div>
            <h1 class="brand-name">ShopEase</h1>
            <p class="brand-sub">AI Voice Call Agent</p>
          </div>
        </div>
        <div class="topbar-navigation">
          <button id="nav-console" class="nav-tab active">
            <i class="fa-solid fa-terminal"></i> Console
          </button>
          <button id="nav-analytics" class="nav-tab">
            <i class="fa-solid fa-chart-line"></i> Analytics
          </button>
        </div>
        <div class="topbar-status">
          <span id="server-status" class="status-dot offline"></span>
          <span id="server-status-text" class="status-text">Connecting...</span>
        </div>
      </header>

      <div class="dashboard">
        <aside class="panel panel-orders">
          <div class="panel-header">
            <h2 class="panel-title"><i class="fa-solid fa-box"></i> Orders</h2>
            <span id="order-count" class="badge">0</span>
          </div>
          <div id="orders-list" class="orders-list">
            <div class="loading-shimmer">Loading orders...</div>
          </div>

          <div class="panel-checkout">
            <h3 class="checkout-title"><i class="fa-solid fa-cart-shopping"></i> Simulated Checkout</h3>
            <form id="checkout-form" class="checkout-form">
              <div class="form-group">
                <input type="text" id="checkout-name" placeholder="Customer Name" required />
              </div>
              <div class="form-group">
                <input type="text" id="checkout-phone" placeholder="Phone (e.g. 919876543210)" required />
              </div>
              <div class="form-group">
                <input type="email" id="checkout-email" placeholder="Email" />
              </div>
              <div class="form-group">
                <input type="text" id="checkout-product" placeholder="Product" required />
              </div>
              <button type="submit" id="btn-submit-checkout" class="btn btn-checkout">
                <i class="fa-solid fa-cash-register"></i> Place Order
              </button>
            </form>
          </div>
        </aside>

        <main class="panel panel-call">
          <div class="agent-tabs">
            <button class="agent-tab active" data-agent="order_confirmation" id="tab-order">
              <i class="fa-solid fa-clipboard-check"></i>
              <span>Order Confirmation</span>
            </button>
            <button class="agent-tab" data-agent="delivery_verification" id="tab-delivery">
              <i class="fa-solid fa-truck"></i>
              <span>Delivery Verification</span>
            </button>
            <button class="agent-tab" data-agent="feedback_followup" id="tab-feedback">
              <i class="fa-solid fa-comments"></i>
              <span>Post-Delivery Feedback</span>
            </button>
          </div>

          <div id="selected-order-info" class="selected-order-info hidden">
            <div class="order-info-row">
              <span class="info-label">Customer</span>
              <span id="info-customer" class="info-value"></span>
            </div>
            <div class="order-info-row">
              <span class="info-label">Order</span>
              <span id="info-order-id" class="info-value"></span>
            </div>
            <div class="order-info-row">
              <span class="info-label">Product</span>
              <span id="info-product" class="info-value"></span>
            </div>
            <div class="order-info-row">
              <span class="info-label">Delivery</span>
              <span id="info-delivery" class="info-value"></span>
            </div>
          </div>

          <div class="call-controls">
            <button id="btn-start-call" class="btn btn-call" disabled>
              <i class="fa-solid fa-phone"></i>
              <span>Start Call</span>
            </button>
            <button id="btn-end-call" class="btn btn-end" disabled>
              <i class="fa-solid fa-phone-slash"></i>
              <span>End Call</span>
            </button>
            <button id="btn-whatsapp-fallback" class="btn btn-whatsapp" disabled style="display: none;">
              <i class="fa-brands fa-whatsapp"></i>
              <span>Send WhatsApp</span>
            </button>
            <div id="call-status-badge" class="call-badge idle">
              <span class="pulse-dot"></span>
              <span id="call-status-text">Select an order to begin</span>
            </div>
          </div>

          <div id="mic-indicator" class="mic-indicator hidden">
            <div class="mic-ring">
              <i class="fa-solid fa-microphone"></i>
            </div>
            <span class="mic-label">Listening...</span>
          </div>

          <div class="transcript-area">
            <h3 class="transcript-title">
              <i class="fa-solid fa-message"></i> Conversation
            </h3>
            <div id="transcript" class="transcript">
              <div class="transcript-empty">
                <i class="fa-solid fa-phone-volume"></i>
                <p>Select an order from the sidebar, choose an agent type, and click Start Call.</p>
              </div>
            </div>
          </div>

          <div class="text-input-bar">
            <input id="text-input" type="text" placeholder="Type a reply (or speak into your mic)..." disabled autocomplete="off" />
            <button id="btn-send" class="btn btn-send" disabled>
              <i class="fa-solid fa-paper-plane"></i>
            </button>
          </div>
        </main>

        <aside class="panel panel-feedback">
          <div class="panel-header">
            <h2 class="panel-title"><i class="fa-solid fa-chart-bar"></i> Feedback</h2>
            <button id="btn-refresh-feedback" class="btn-icon-small" title="Refresh">
              <i class="fa-solid fa-arrows-rotate"></i>
            </button>
          </div>

          <div class="stats-grid">
            <div class="stat-card">
              <span class="stat-value" id="stat-total-calls">0</span>
              <span class="stat-label">Total Calls</span>
            </div>
            <div class="stat-card">
              <span class="stat-value" id="stat-avg-rating">&mdash;</span>
              <span class="stat-label">Avg Rating</span>
            </div>
          </div>

          <div id="feedback-list" class="feedback-list">
            <p class="feedback-empty">No feedback yet. Complete a call to see ratings here.</p>
          </div>
        </aside>

        <!-- Analytics panel -->
        <main id="panel-analytics" class="panel panel-analytics hidden">
          <div class="analytics-header">
            <h2 class="analytics-title"><i class="fa-solid fa-chart-pie"></i> Business Insights & Analytics</h2>
            <button id="btn-refresh-analytics" class="btn btn-secondary">
              <i class="fa-solid fa-arrows-rotate"></i> Refresh
            </button>
          </div>

          <div class="analytics-stats-grid">
            <div class="analytics-stat-card">
              <div class="stat-icon blue"><i class="fa-solid fa-phone"></i></div>
              <div class="stat-content">
                <span class="stat-num" id="stat-total-calls-val">0</span>
                <span class="stat-label">Total Calls</span>
              </div>
            </div>
            <div class="analytics-stat-card">
              <div class="stat-icon green"><i class="fa-solid fa-star"></i></div>
              <div class="stat-content">
                <span class="stat-num" id="stat-avg-rating-val">0.0</span>
                <span class="stat-label">Avg Rating</span>
              </div>
            </div>
            <div class="analytics-stat-card">
              <div class="stat-icon orange"><i class="fa-brands fa-whatsapp"></i></div>
              <div class="stat-content">
                <span class="stat-num" id="stat-whatsapp-val">0</span>
                <span class="stat-label">WhatsApp Fallbacks</span>
              </div>
            </div>
            <div class="analytics-stat-card">
              <div class="stat-icon purple"><i class="fa-solid fa-circle-check"></i></div>
              <div class="stat-content">
                <span class="stat-num" id="stat-completed-val">0</span>
                <span class="stat-label">Completed Chats</span>
              </div>
            </div>
          </div>

          <div class="analytics-charts-grid">
            <div class="chart-card">
              <h3>Call Outcome Distribution</h3>
              <div class="chart-container">
                <canvas id="chart-outcomes"></canvas>
              </div>
            </div>
            <div class="chart-card">
              <h3>Daily Call Timeline</h3>
              <div class="chart-container">
                <canvas id="chart-timeline"></canvas>
              </div>
            </div>
            <div class="chart-card">
              <h3>Customer Rating Distribution</h3>
              <div class="chart-container">
                <canvas id="chart-ratings"></canvas>
              </div>
            </div>
            <div class="chart-card">
              <h3>Sentiment & Category Analysis</h3>
              <div class="chart-container">
                <canvas id="chart-categories"></canvas>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>