`public/panels/insights.html`

22 lines
<!-- Insights — one nav entry over the 8 preview/not-yet-live analytics panels.
     A wrapping tab bar swaps a single content pane: insights.js loads the picked
     panel's html+js into #ins-content and runs that panel's own init(). Only one
     is mounted at a time (no cross-panel id collisions). Backends stay mounted;
     the 8 panels' nav entries are hidden via the app.js denylist. -->
<div class="ins">
  <div class="ins-note">📊 <b>Preview</b> — these views aren't wired to live data yet. Grouped here so they don't clutter the main nav.</div>
  <div class="ins-tabbar" id="ins-tabs"></div>
  <div class="ins-content" id="ins-content"><div class="loading">Loading…</div></div>
</div>

<style>
  .ins-note{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:9px 13px;
    font-size:12.5px;color:var(--ink);margin-bottom:12px}
  .ins-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .ins-tab{border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;
    font:600 12.5px/1 Inter;color:var(--ink);padding:8px 13px}
  .ins-tab:hover{background:var(--cream)}
  .ins-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ins-content{min-height:200px}
</style>