104 lines
4.1 KiB
Plaintext
104 lines
4.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Missed Calls - Kitchen Agent</title>
|
|
<link rel="stylesheet" href="/public/css/style.css">
|
|
</head>
|
|
<body class="dashboard-page abandoned-calls-page">
|
|
<header class="main-header">
|
|
<div class="header-content">
|
|
<div class="header-title-group">
|
|
<a href="/dashboard" class="back-link" title="Back to Kitchen Display">←</a>
|
|
<h1>Missed Calls</h1>
|
|
</div>
|
|
<div class="connection-status-bar" id="connectionStatusBar">
|
|
<div class="connection-status-item" id="localConnectionStatus" title="Dashboard">
|
|
<span class="status-indicator status-checking"></span>
|
|
<span class="status-text">Dashboard</span>
|
|
<span class="status-label" id="localStatusLabel">Checking...</span>
|
|
</div>
|
|
<div class="connection-status-item" id="apiConnectionStatus" title="API Server">
|
|
<span class="status-indicator status-checking"></span>
|
|
<span class="status-text">API Server</span>
|
|
<span class="status-label" id="apiStatusLabel">Checking...</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/dashboard" class="btn btn-secondary">Kitchen Display</a>
|
|
<a href="/settings" class="btn btn-secondary">Settings</a>
|
|
<a href="/auth/logout" class="btn btn-secondary">Logout</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="stats-bar" id="statsBar">
|
|
<div class="stat-card stat-abandoned-pending">
|
|
<div class="stat-label">Pending Callbacks</div>
|
|
<div class="stat-value" id="stat-pending"><%= stats.pending || 0 %></div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Tracked</div>
|
|
<div class="stat-value" id="stat-total"><%= stats.total || 0 %></div>
|
|
</div>
|
|
<div class="stat-card stat-converted">
|
|
<div class="stat-label">Converted</div>
|
|
<div class="stat-value" id="stat-converted"><%= stats.converted || 0 %></div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Dismissed</div>
|
|
<div class="stat-value" id="stat-dismissed"><%= stats.dismissed || 0 %></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-controls">
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn filter-critical" data-filter="critical">Critical</button>
|
|
<button class="filter-btn filter-high" data-filter="high">High</button>
|
|
<button class="filter-btn filter-medium" data-filter="medium">Medium</button>
|
|
<button class="filter-btn" data-filter="queued">Queued</button>
|
|
</div>
|
|
<div class="controls-right">
|
|
<label class="toggle-switch" id="showProcessedToggle" title="Show already handled calls">
|
|
<input type="checkbox" id="showProcessedCheckbox">
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Show Processed</span>
|
|
</label>
|
|
<button class="btn btn-secondary sync-button" id="syncButton" onclick="manualRefresh()" title="Refresh now">
|
|
<span class="sync-spinner"></span>
|
|
<span class="sync-text">Refresh</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="orders-container abandoned-calls-container" id="abandonedCallsContainer">
|
|
<div class="loading">Loading missed calls...</div>
|
|
</div>
|
|
|
|
<!-- Abandoned Call Detail Modal -->
|
|
<div class="modal" id="detailsModal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h2>Missed Call Details</h2>
|
|
<button class="close-btn" onclick="closeDetailsModal()">×</button>
|
|
</div>
|
|
<div id="callDetailsContent"></div>
|
|
<div class="modal-actions" id="detailModalActions"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const config = {
|
|
refreshInterval: <%= config.abandonedCallRefreshInterval || 15000 %>
|
|
};
|
|
</script>
|
|
<script src="/public/js/common.js"></script>
|
|
<script src="/public/js/abandoned-calls.js"></script>
|
|
</body>
|
|
</html>
|