| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>JalGuard - Analytics</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;600;700;800&family=Sora:wght@600;700&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/static/css/styles.css" /> |
| </head> |
| <body> |
| <header class="nav"> |
| <div class="nav-inner"> |
| <div class="brand"><span class="brand-dot"></span>JalGuard Control Suite</div> |
| <nav class="nav-links"> |
| <a class="nav-link" data-page="dashboard" href="/dashboard">Dashboard</a> |
| <a class="nav-link" data-page="scenario" href="/scenario-builder">Scenario Builder</a> |
| <a class="nav-link" data-page="analytics" href="/analytics">Analytics & Reports</a> |
| <a class="nav-link" data-page="admin" href="/admin-panel">Admin Panel</a> |
| </nav> |
| <a class="profile-link" id="profileLink" href="/settings">JG</a> |
| </div> |
| </header> |
|
|
| <main class="wrap"> |
| <section class="status-bar"> |
| <div class="status-pill">FastAPI<strong id="statusFastAPI">-</strong></div> |
| <div class="status-pill">Simulation Engine<strong id="statusOpenEnv">-</strong></div> |
| <div class="status-pill">AI Assistant<strong id="statusAssistant">-</strong></div> |
| <div class="status-pill">Current Task<strong id="statusTask">-</strong></div> |
| </section> |
|
|
| <section class="quick-actions"> |
| <button class="btn" data-qa="start">Start Episode</button> |
| <button class="btn secondary" data-qa="reset">Reset</button> |
| <button class="btn accent" data-qa="ask-ai">Ask AI</button> |
| <button class="btn ghost" data-qa="download">Download Report</button> |
| </section> |
|
|
| <section class="grid"> |
| <article class="card" style="grid-column: span 12;"> |
| <h3>Episode Summary</h3> |
| <p id="episodeSummary" class="desc"></p> |
| <div class="form-row"> |
| <button id="refreshAnalytics" class="btn">Refresh</button> |
| <button id="exportJson" class="btn secondary">Export JSON</button> |
| <button id="exportCsv" class="btn accent">Export CSV</button> |
| <span class="tag">Update Mode: <strong id="chartModeLabel">-</strong></span> |
| </div> |
| </article> |
|
|
| <article class="card" style="grid-column: span 6; min-height: 300px;"> |
| <h3>Tank + Chlorine History</h3> |
| <div style="height:240px;"><canvas id="tankChart"></canvas></div> |
| </article> |
|
|
| <article class="card" style="grid-column: span 6; min-height: 300px;"> |
| <h3>Reward Timeline</h3> |
| <div style="height:240px;"><canvas id="rewardChart"></canvas></div> |
| </article> |
|
|
| <article class="card" style="grid-column: span 12;"> |
| <h3>Assistant vs Manual Decisions</h3> |
| <table class="table"> |
| <thead><tr><th>Metric</th><th>Value</th></tr></thead> |
| <tbody id="comparisonBody"></tbody> |
| </table> |
| </article> |
| </section> |
| </main> |
|
|
| <a class="help-fab" href="/docs" title="Help">?</a> |
| <div class="toast-wrap" id="toastWrap"></div> |
| <div class="modal" id="onboardModal"><div class="modal-content"><h3>Quick Onboarding</h3><p id="onboardBody"></p><button id="onboardNext" class="btn">Next</button></div></div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="/static/js/common.js"></script> |
| <script src="/static/js/analytics.js"></script> |
| </body> |
| </html> |
|
|
