How to Add a Page

Step-by-step template for adding a new page to the Control Center. No code to change beyond these 4 files.

1. Sidebar entry (index.html)

<a class="sidebar-link" data-page="my-page" data-perm="page:my-page">
  <span class="sidebar-icon">icon_name</span> My Page
</a>

Add inside a .sidebar-section. Use data-perm="page:my-page" to restrict access (managed via Access Management). Icon from Material Symbols.

2. Page HTML (index.html)

<div class="page" id="page-my-page" data-perm="page:my-page">
  <h1 class="page-title">My Page</h1>
  <p class="page-desc">Short description</p>

  <div class="section">
    <div class="section-title">Data Section</div>
    <div class="grid grid-4">
      <div class="card">...</div>
      <div class="card">...</div>
    </div>
  </div>
</div>

3. Sidebar icon color (styles/main.css)

[data-page="my-page"] .sidebar-icon { background: #hexcolor; }

4. Page logic (js/pages/*.js)

// If the page needs polling:
let myInterval = null;

async function loadMyData() { ... }

function startMyPolling() {
  if (myInterval) clearInterval(myInterval);
  loadMyData();
  myInterval = setInterval(loadMyData, 30000);
}

function stopMyPolling() {
  if (myInterval) { clearInterval(myInterval); myInterval = null; }
}

// Then in showPage() add:
// if (pageId === 'my-page') startMyPolling(); else stopMyPolling();

5. Multi-tenant (js/pages/*.js)

If the page uses client/site context, read currentClient and currentSite from the topbar context selector. These are set by MONITORING_CONFIG and stored in localStorage.

// Adding a new client:
MONITORING_CONFIG.clients.push({
  id: 'new-client',
  name: 'New Client Name',
  sites: [{
    id: 'site-1',
    name: 'Site Name',
    unifi: { siteId: '...' },
    rpis: ['rpi001'],
    zabbix: { hostGroupId: '...' },
    zippin: { storeId: '...' }
  }]
});

The topbar dropdown auto-populates from this config. No other code change needed.

Animations

Animation	Duration	Used on
`fadeIn`	0.3s	Page transitions (`.page.active`)
`glassIn`	0.35s	Cards appearing (staggered by nth-child)
`dotPulse`	2s infinite	Badge dots (live status indicators)
`pulse`	1.5s infinite	Gray badge dots (checking/loading)
`msgIn`	0.2s	AI chat messages appearing
`typingDot`	1.2s infinite	AI typing indicator