@logboard/cli 1.0.0

package/views/super-admin-orgs.ejs

@@ -0,0 +1,310 @@
+<%- include('partials/head', { title: 'Manage Orgs' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:8px;vertical-align:-2px"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
+        Organisation Management
+        <span style="font-size:11px;background:rgba(239,68,68,.15);color:#f87171;padding:2px 8px;border-radius:4px;margin-left:8px;font-weight:600;letter-spacing:.3px;">SUPER ADMIN</span>
+      </div>
+      <button class="btn btn-primary btn-sm" onclick="showCreate()">+ New Org</button>
+    </header>
+    <div class="page-content">
+
+      <!-- Stats row -->
+      <div class="stats-grid" style="margin-bottom:14px;">
+        <div class="stat-card"><div><div class="stat-value" id="stat-orgs"><%= orgs.length %></div><div class="stat-label">Total Orgs</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="stat-pro"><%= orgs.filter(function(o){return o.plan==='pro';}).length %></div><div class="stat-label">Pro Plan</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="stat-users">—</div><div class="stat-label">Total Users</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="stat-new"><%= orgs.filter(function(o){return new Date(o.createdAt)>new Date(Date.now()-7*864e5);}).length %></div><div class="stat-label">New this week</div></div></div>
+      </div>
+
+      <!-- Orgs accordion -->
+      <div id="orgs-list">
+        <% orgs.forEach(function(org, oi){ %>
+        <div class="card" style="margin-bottom:10px;" id="org-card-<%=org.slug%>">
+          <!-- Org header row -->
+          <div style="display:flex;align-items:center;gap:12px;cursor:pointer;" onclick="toggleOrg('<%=org.slug%>')">
+            <div style="width:36px;height:36px;border-radius:8px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--accent-l);flex-shrink:0;">
+              <%=org.name.charAt(0).toUpperCase()%>
+            </div>
+            <div style="flex:1;min-width:0;">
+              <div style="font-weight:600;font-size:14px;"><%= org.name %></div>
+              <div style="font-size:11px;color:var(--text3);">
+                <code style="background:var(--surface2);padding:1px 5px;border-radius:3px;"><%=org.slug%></code>
+                &nbsp;·&nbsp; <%=org.plan||'free'%> plan
+                &nbsp;·&nbsp; created <%=new Date(org.createdAt).toLocaleDateString()%>
+                <% if(org.migratedAt){ %>&nbsp;·&nbsp;<span style="color:var(--blue);">migrated</span><% } %>
+              </div>
+            </div>
+            <span class="badge <%=org.plan==='pro'?'badge-green':'badge-debug'%>" style="font-size:10px;"><%=org.plan||'free'%></span>
+            <% if(org.slug!=='default'){ %>
+            <button class="btn btn-danger btn-xs" onclick="deleteOrg(event,'<%=org.slug%>','<%=org.name%>')">Delete</button>
+            <% } %>
+            <svg id="chevron-<%=org.slug%>" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform .2s;flex-shrink:0;"><polyline points="6,9 12,15 18,9"/></svg>
+          </div>
+
+          <!-- Org details (collapsed by default) -->
+          <div id="org-detail-<%=org.slug%>" style="display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
+              <!-- Users list -->
+              <div>
+                <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:8px;">Users</div>
+                <div id="users-<%=org.slug%>" style="font-size:12px;color:var(--text2);">Loading…</div>
+                <!-- Invite user -->
+                <div style="margin-top:10px;display:flex;gap:6px;">
+                  <input type="email" id="inv-email-<%=org.slug%>" class="form-input" style="flex:1;font-size:11px;" placeholder="email@example.com"/>
+                  <select id="inv-role-<%=org.slug%>" class="form-select" style="width:90px;font-size:11px;">
+                    <option value="viewer">Viewer</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                  <button class="btn btn-secondary btn-xs" onclick="inviteUser('<%=org.slug%>')">Invite</button>
+                </div>
+                <div id="inv-result-<%=org.slug%>" style="font-size:11px;margin-top:6px;"></div>
+              </div>
+              <!-- Org settings -->
+              <div>
+                <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:8px;">Details</div>
+                <div id="settings-<%=org.slug%>" style="font-size:12px;color:var(--text2);">Loading…</div>
+                <!-- Create admin -->
+                <div style="margin-top:12px;border-top:1px solid var(--border);padding-top:10px;">
+                  <div style="font-size:11px;font-weight:500;color:var(--text2);margin-bottom:6px;">Create admin account</div>
+                  <div style="display:flex;gap:6px;flex-wrap:wrap;">
+                    <input type="text" id="admin-user-<%=org.slug%>" class="form-input" style="width:120px;font-size:11px;" placeholder="username"/>
+                    <input type="password" id="admin-pass-<%=org.slug%>" class="form-input" style="width:120px;font-size:11px;" placeholder="password (8+)"/>
+                    <button class="btn btn-primary btn-xs" onclick="createAdmin('<%=org.slug%>')">Create Admin</button>
+                  </div>
+                  <div id="admin-result-<%=org.slug%>" style="font-size:11px;margin-top:6px;"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <% }) %>
+      </div>
+
+      <!-- Migration card -->
+      <div class="card" style="margin-top:4px;">
+        <div class="card-title" style="margin-bottom:8px;">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px;vertical-align:-2px"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+          Data Migration
+        </div>
+        <p style="font-size:12px;color:var(--text2);margin-bottom:10px;">Move existing flat data + logs → <code>data/orgs/default/</code> and <code>logs/default/</code>. Safe to run multiple times.</p>
+        <div style="display:flex;gap:10px;align-items:center;">
+          <button class="btn btn-secondary btn-sm" onclick="runMigration()">Run Migration → Default Org</button>
+          <span id="mig-status" style="font-size:12px;color:var(--text3);"></span>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Create org modal -->
+<div id="create-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999;align-items:center;justify-content:center;">
+  <div class="card" style="width:440px;max-width:calc(100vw - 32px);padding:24px;">
+    <div class="card-title" style="margin-bottom:20px;">Create New Organisation</div>
+    <div class="form-group">
+      <label class="form-label">Org Name</label>
+      <input type="text" id="new-name" class="form-input" placeholder="Acme Inc"/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Admin Username</label>
+      <input type="text" id="new-owner" class="form-input" placeholder="admin"/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Admin Password <span style="color:var(--text3);font-weight:400;">(min 8 chars)</span></label>
+      <input type="password" id="new-pass" class="form-input" placeholder="••••••••"/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Plan</label>
+      <select id="new-plan" class="form-select">
+        <option value="free">Free</option>
+        <option value="pro">Pro</option>
+      </select>
+    </div>
+    <div style="display:flex;gap:8px;margin-top:4px;">
+      <button class="btn btn-primary btn-sm" onclick="createOrg()">Create Organisation</button>
+      <button class="btn btn-secondary btn-sm" onclick="hideCreate()">Cancel</button>
+    </div>
+    <div id="create-error" style="display:none;color:var(--red);font-size:12px;margin-top:8px;"></div>
+  </div>
+</div>
+
+<script>
+// ── Org accordion ──────────────────────────────────────────────────────────
+const loadedOrgs = new Set();
+
+function toggleOrg(slug) {
+  const detail = document.getElementById('org-detail-'+slug);
+  const chevron = document.getElementById('chevron-'+slug);
+  const isOpen  = detail.style.display !== 'none';
+  detail.style.display  = isOpen ? 'none' : '';
+  chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
+  if (!isOpen && !loadedOrgs.has(slug)) {
+    loadedOrgs.add(slug);
+    loadOrgDetail(slug);
+  }
+}
+
+async function loadOrgDetail(slug) {
+  try {
+    const r = await fetch('/api/orgs/'+slug+'/detail', {credentials:'include'});
+    if (!r.ok) { 
+      let errMsg = 'Error '+r.status;
+      try { errMsg = (await r.json()).error || errMsg; } catch {}
+      throw new Error(errMsg); 
+    }
+    const d = await r.json();
+    
+    // Users
+    const usersEl = document.getElementById('users-'+slug);
+    if (d.users && d.users.length) {
+      usersEl.innerHTML = d.users.map(u =>
+        '<div style="display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);">'
+        +'<span style="font-weight:500;">'+escHtml(u.username)+'</span>'
+        +'<span class="badge badge-'+(u.role==='admin'?'error':'info')+'" style="font-size:9px;">'+u.role+'</span>'
+        +(u.email?'<span style="color:var(--text3);font-size:11px;">'+escHtml(u.email)+'</span>':'')
+        +'<button class="btn btn-danger btn-xs" style="margin-left:auto;" onclick="removeUser(\''+slug+'\',\''+u.username+'\')">Remove</button>'
+        +'</div>'
+      ).join('');
+    } else {
+      usersEl.innerHTML = '<span style="color:var(--text3);">No users yet</span>';
+    }
+    
+    // Settings / details
+    const settingsEl = document.getElementById('settings-'+slug);
+    settingsEl.innerHTML = [
+      ['App name', d.settings.appName||'—'],
+      ['Log retention', (d.settings.retentionDays||7)+' days'],
+      ['Logs dir', '<code style="font-size:10px;word-break:break-all;">'+escHtml(d.logsDir||'')+'</code>'],
+      ['Services', (d.services||[]).join(', ')||'none'],
+      ['Total users', d.users.length],
+    ].map(([k,v]) =>
+      '<div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);">'
+      +'<span style="color:var(--text3);min-width:90px;">'+k+'</span>'
+      +'<span style="font-weight:400;">'+v+'</span></div>'
+    ).join('');
+    
+    // Update total users stat
+    updateUserStat();
+  } catch(e) {
+    document.getElementById('users-'+slug).textContent = 'Error: '+e.message;
+  }
+}
+
+async function updateUserStat() {
+  try {
+    const r = await fetch('/api/orgs');
+    const d = await r.json();
+    // Just show loaded count
+    document.getElementById('stat-users').textContent = '…';
+  } catch {}
+}
+
+// ── Create org ──────────────────────────────────────────────────────────────
+function showCreate()  { document.getElementById('create-modal').style.display='flex'; document.getElementById('new-name').focus(); }
+function hideCreate()  { document.getElementById('create-modal').style.display='none'; document.getElementById('create-error').style.display='none'; }
+
+async function createOrg() {
+  const name  = document.getElementById('new-name').value.trim();
+  const owner = document.getElementById('new-owner').value.trim();
+  const pass  = document.getElementById('new-pass').value;
+  const plan  = document.getElementById('new-plan').value;
+  const errEl = document.getElementById('create-error');
+  errEl.style.display = 'none';
+  if (!name)          { errEl.textContent='Org name required'; errEl.style.display=''; return; }
+  if (!owner)         { errEl.textContent='Admin username required'; errEl.style.display=''; return; }
+  if (pass.length<8)  { errEl.textContent='Password must be at least 8 characters'; errEl.style.display=''; return; }
+  const r = await fetch('/api/orgs', {credentials:'include',
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ name, ownerUsername:owner, ownerPassword:pass, plan }),
+  });
+  const d = await r.json();
+  if (!r.ok) { errEl.textContent=d.error||'Create failed'; errEl.style.display=''; return; }
+  toast('Org "'+d.org.slug+'" created!','success');
+  setTimeout(() => location.reload(), 1200);
+}
+
+// ── Delete org ──────────────────────────────────────────────────────────────
+async function deleteOrg(evt, slug, name) {
+  evt.stopPropagation();
+  if (!confirm('Delete org "'+name+'" ('+slug+')?\n\nData files will NOT be deleted.')) return;
+  const r = await fetch('/api/orgs/'+slug, { method:'DELETE', credentials:'include' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('Org deleted','success');
+  document.getElementById('org-card-'+slug).remove();
+}
+
+// ── Create admin in org ────────────────────────────────────────────────────
+async function createAdmin(slug) {
+  const username = document.getElementById('admin-user-'+slug).value.trim();
+  const password = document.getElementById('admin-pass-'+slug).value;
+  const resEl    = document.getElementById('admin-result-'+slug);
+  if (!username || password.length < 8) { resEl.innerHTML='<span style="color:var(--red)">Username and password (8+) required</span>'; return; }
+  const r = await fetch('/api/orgs/'+slug+'/create-user', {credentials:'include',
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ username, password, role:'admin' }),
+  });
+  const d = await r.json();
+  if (!r.ok) { resEl.innerHTML='<span style="color:var(--red)">'+escHtml(d.error||'Failed')+'</span>'; return; }
+  resEl.innerHTML = '<span style="color:var(--green)">✓ Admin "'+escHtml(username)+'" created</span>';
+  document.getElementById('admin-user-'+slug).value = '';
+  document.getElementById('admin-pass-'+slug).value = '';
+  loadedOrgs.delete(slug);
+  loadOrgDetail(slug);
+}
+
+// ── Remove user ─────────────────────────────────────────────────────────────
+async function removeUser(slug, username) {
+  if (!confirm('Remove user "'+username+'" from org "'+slug+'"?')) return;
+  const r = await fetch('/api/orgs/'+slug+'/users/'+encodeURIComponent(username), { method:'DELETE', credentials:'include' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('User removed','success');
+  loadedOrgs.delete(slug);
+  loadOrgDetail(slug);
+}
+
+// ── Invite user ─────────────────────────────────────────────────────────────
+async function inviteUser(slug) {
+  const email = document.getElementById('inv-email-'+slug).value.trim();
+  const role  = document.getElementById('inv-role-'+slug).value;
+  const resEl = document.getElementById('inv-result-'+slug);
+  if (!email) { resEl.innerHTML='<span style="color:var(--red)">Email required</span>'; return; }
+  const r = await fetch('/api/orgs/invites', {credentials:'include',
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ email, role, orgSlug: slug }),
+  });
+  const d = await r.json();
+  if (!r.ok) { resEl.innerHTML='<span style="color:var(--red)">'+escHtml(d.error||'Failed')+'</span>'; return; }
+  const link = window.location.origin+'/invite/'+d.token;
+  resEl.innerHTML = '<span style="color:var(--green)">✓ Invite link: </span><a href="'+link+'" style="color:var(--accent-l);font-size:10px;word-break:break-all;">'+link+'</a>';
+  document.getElementById('inv-email-'+slug).value = '';
+}
+
+// ── Migration ───────────────────────────────────────────────────────────────
+async function runMigration() {
+  document.getElementById('mig-status').textContent = 'Running…';
+  const r = await fetch('/api/orgs/migrate', { method:'POST', credentials:'include' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); document.getElementById('mig-status').textContent='Error'; return; }
+  if (d.skipped) { document.getElementById('mig-status').textContent='Already migrated ✓'; return; }
+  toast('Migration complete!','success');
+  document.getElementById('mig-status').textContent='Done ✓ — moved: '+(d.moved||[]).join(', ');
+  setTimeout(() => location.reload(), 1500);
+}
+
+// Auto-expand first org on page load
+document.addEventListener('DOMContentLoaded', function() {
+  const firstOrg = document.querySelector('[id^="org-card-"]');
+  if (firstOrg) {
+    const slug = firstOrg.id.replace('org-card-','');
+    toggleOrg(slug);
+  }
+});
+function escHtml(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+</script>
+</body></html>

package/views/super-admin-profile.ejs

@@ -0,0 +1,77 @@
+<%- include('partials/head', { title: 'My Profile' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">My Profile <span style="font-size:11px;background:rgba(239,68,68,.15);color:#f87171;padding:2px 8px;border-radius:4px;margin-left:8px;font-weight:600;">SUPER ADMIN</span></div>
+    </header>
+    <div class="page-content" style="max-width:560px;">
+
+      <!-- Profile info -->
+      <div class="card" style="margin-bottom:14px;padding:20px 24px;">
+        <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
+          <div style="width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;">
+            <%= user.username[0].toUpperCase() %>
+          </div>
+          <div>
+            <div style="font-size:16px;font-weight:600;"><%= user.username %></div>
+            <div style="font-size:12px;color:var(--text3);">Super Administrator</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Change password -->
+      <div class="card" style="padding:20px 24px;">
+        <div style="font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          Change Password
+        </div>
+        <div id="pw-error"   style="display:none;color:var(--red);font-size:12px;margin-bottom:12px;padding:8px 12px;background:rgba(239,68,68,.1);border-radius:6px;"></div>
+        <div id="pw-success" style="display:none;color:var(--green);font-size:12px;margin-bottom:12px;padding:8px 12px;background:rgba(34,197,94,.1);border-radius:6px;">✓ Password updated</div>
+        <div class="form-group">
+          <label class="form-label">Current Password</label>
+          <input type="password" id="pw-current" class="form-input" placeholder="Enter current password" autocomplete="current-password"/>
+        </div>
+        <div class="form-group">
+          <label class="form-label">New Password <span style="color:var(--text3);font-weight:400;">(min 8 chars)</span></label>
+          <input type="password" id="pw-new" class="form-input" placeholder="Enter new password" autocomplete="new-password"/>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Confirm New Password</label>
+          <input type="password" id="pw-confirm" class="form-input" placeholder="Repeat new password"/>
+        </div>
+        <button id="pw-btn" class="btn btn-primary" onclick="changePassword()">Update Password</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+<script>
+async function changePassword() {
+  const curr    = document.getElementById('pw-current').value;
+  const newPw   = document.getElementById('pw-new').value;
+  const confirm = document.getElementById('pw-confirm').value;
+  const errEl   = document.getElementById('pw-error');
+  const okEl    = document.getElementById('pw-success');
+  const btn     = document.getElementById('pw-btn');
+  errEl.style.display = okEl.style.display = 'none';
+
+  if (!curr)           { errEl.textContent='Current password required'; errEl.style.display=''; return; }
+  if (newPw.length<8)  { errEl.textContent='New password must be at least 8 characters'; errEl.style.display=''; return; }
+  if (newPw!==confirm) { errEl.textContent='Passwords do not match'; errEl.style.display=''; return; }
+
+  btn.disabled=true; btn.textContent='Updating…';
+  try {
+    const r = await fetch('/api/super/change-password', {
+      method: 'POST', credentials: 'include',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ currentPassword: curr, newPassword: newPw }),
+    });
+    const d = await r.json();
+    if (!r.ok) { errEl.textContent = d.error||'Failed'; errEl.style.display=''; }
+    else { okEl.style.display=''; document.getElementById('pw-current').value=''; document.getElementById('pw-new').value=''; document.getElementById('pw-confirm').value=''; }
+  } catch(e) { errEl.textContent='Network error'; errEl.style.display=''; }
+  btn.disabled=false; btn.textContent='Update Password';
+}
+</script>
+</body></html>

package/views/super-admin-settings.ejs

@@ -0,0 +1,108 @@
+<%- include('partials/head', { title: 'Global Settings' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Global Settings <span style="font-size:11px;background:rgba(239,68,68,.15);color:#f87171;padding:2px 8px;border-radius:4px;margin-left:8px;font-weight:600;">SUPER ADMIN</span></div>
+    </header>
+    <div class="page-content">
+
+      <!-- Registration -->
+      <div class="card" style="margin-bottom:12px;">
+        <div class="card-title" style="margin-bottom:12px;">Registration</div>
+        <div class="form-group">
+          <label class="form-label">Public Registration</label>
+          <div style="display:flex;align-items:center;gap:12px;">
+            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
+              <input type="radio" name="reg-mode" value="open" <%=globalSettings.registrationMode==='open'?'checked':''%>> Open (anyone can register)
+            </label>
+            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
+              <input type="radio" name="reg-mode" value="invite" <%=globalSettings.registrationMode!=='open'?'checked':''%>> Invite only (super-admin creates orgs)
+            </label>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Default Plan for new orgs</label>
+          <select id="default-plan" class="form-select" style="width:160px;">
+            <option value="free" <%=globalSettings.defaultPlan==='free'?'selected':''%>>Free</option>
+            <option value="pro"  <%=globalSettings.defaultPlan==='pro'?'selected':''%>>Pro</option>
+          </select>
+        </div>
+        <button class="btn btn-primary btn-sm" onclick="saveRegistration()">Save</button>
+      </div>
+
+      <!-- OAuth / SSO -->
+      <div class="card" style="margin-bottom:12px;">
+        <div class="card-title" style="margin-bottom:12px;">OAuth / SSO Providers</div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+          <div>
+            <div style="font-size:12px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+              GitHub
+            </div>
+            <div class="form-group"><label class="form-label">Client ID</label><input type="text" id="gh-id" class="form-input" value="<%=globalSettings.githubClientId||''%>" placeholder="Ghp_xxxxxxx"/></div>
+            <div class="form-group"><label class="form-label">Client Secret</label><input type="password" id="gh-secret" class="form-input" value="<%=globalSettings.githubClientSecret?'••••••••':''%>" placeholder="Leave blank to keep"/></div>
+          </div>
+          <div>
+            <div style="font-size:12px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+              Google
+            </div>
+            <div class="form-group"><label class="form-label">Client ID</label><input type="text" id="gg-id" class="form-input" value="<%=globalSettings.googleClientId||''%>" placeholder="xxxxx.apps.googleusercontent.com"/></div>
+            <div class="form-group"><label class="form-label">Client Secret</label><input type="password" id="gg-secret" class="form-input" value="<%=globalSettings.googleClientSecret?'••••••••':''%>" placeholder="Leave blank to keep"/></div>
+          </div>
+        </div>
+        <div style="margin-top:4px;font-size:11px;color:var(--text3);">Callback URL: <code><%=baseUrl%>/auth/github/callback</code> &nbsp;|&nbsp; <code><%=baseUrl%>/auth/google/callback</code></div>
+        <button class="btn btn-primary btn-sm" style="margin-top:12px;" onclick="saveOAuth()">Save OAuth Config</button>
+      </div>
+
+      <!-- SMTP -->
+      <div class="card">
+        <div class="card-title" style="margin-bottom:12px;">Global SMTP (for registration emails)</div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+          <div class="form-group" style="margin:0"><label class="form-label">SMTP Host</label><input type="text" id="smtp-host" class="form-input" value="<%=globalSettings.smtpHost||''%>" placeholder="smtp.sendgrid.net"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">Port</label><input type="number" id="smtp-port" class="form-input" value="<%=globalSettings.smtpPort||587%>"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">User</label><input type="text" id="smtp-user" class="form-input" value="<%=globalSettings.smtpUser||''%>"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">Password</label><input type="password" id="smtp-pass" class="form-input" placeholder="Leave blank to keep"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">From</label><input type="email" id="smtp-from" class="form-input" value="<%=globalSettings.smtpFrom||''%>" placeholder="noreply@yourapp.com"/></div>
+        </div>
+        <button class="btn btn-primary btn-sm" style="margin-top:12px;" onclick="saveSMTP()">Save SMTP</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+<script>
+async function saveRegistration() {
+  const mode = document.querySelector('input[name="reg-mode"]:checked').value;
+  const plan = document.getElementById('default-plan').value;
+  const r = await fetch('/api/super/settings', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ registrationMode:mode, defaultPlan:plan }) });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('Registration settings saved','success');
+}
+async function saveOAuth() {
+  const body = {
+    githubClientId: document.getElementById('gh-id').value.trim(),
+    googleClientId: document.getElementById('gg-id').value.trim(),
+  };
+  const ghSecret = document.getElementById('gh-secret').value;
+  const ggSecret = document.getElementById('gg-secret').value;
+  if (ghSecret && ghSecret !== '••••••••') body.githubClientSecret = ghSecret;
+  if (ggSecret && ggSecret !== '••••••••') body.googleClientSecret = ggSecret;
+  const r = await fetch('/api/super/settings', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('OAuth config saved — restart server for changes to take effect','success');
+}
+async function saveSMTP() {
+  const body = { smtpHost: document.getElementById('smtp-host').value.trim(), smtpPort: +document.getElementById('smtp-port').value, smtpUser: document.getElementById('smtp-user').value.trim(), smtpFrom: document.getElementById('smtp-from').value.trim() };
+  const pass = document.getElementById('smtp-pass').value;
+  if (pass) body.smtpPass = pass;
+  const r = await fetch('/api/super/settings', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('SMTP saved','success');
+}
+</script>
+</body></html>

package/views/super-admin-system.ejs

@@ -0,0 +1,46 @@
+<%- include('partials/head', { title: 'System Health' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">System Health <span style="font-size:11px;background:rgba(239,68,68,.15);color:#f87171;padding:2px 8px;border-radius:4px;margin-left:8px;font-weight:600;">SUPER ADMIN</span></div>
+      <button class="btn btn-secondary btn-sm" onclick="load()">Refresh</button>
+    </header>
+    <div class="page-content">
+      <div class="stats-grid" style="margin-bottom:14px;">
+        <div class="stat-card"><div><div class="stat-value" id="s-ram">—</div><div class="stat-label">RAM Used %</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="s-uptime">—</div><div class="stat-label">Uptime</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="s-node">—</div><div class="stat-label">Node.js</div></div></div>
+        <div class="stat-card"><div><div class="stat-value" id="s-env">—</div><div class="stat-label">Environment</div></div></div>
+      </div>
+      <div class="card">
+        <div class="card-title" style="margin-bottom:12px;">Process Details</div>
+        <div id="details" style="font-size:12px;color:var(--text2);">Loading…</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+async function load() {
+  const r = await fetch('/api/super/system-health', {credentials:'include'});
+  if (!r.ok) { document.getElementById('details').textContent='Error '+r.status+': '+((await r.json()).error||r.statusText); return; }
+  const d = await r.json();
+  document.getElementById('s-ram').textContent    = d.ramPct+'%';
+  document.getElementById('s-uptime').textContent = formatUptime(d.uptime);
+  document.getElementById('s-node').textContent   = d.node;
+  document.getElementById('s-env').textContent    = d.env;
+  document.getElementById('details').innerHTML = [
+    ['PID', d.pid], ['Platform', d.platform], ['Arch', d.arch],
+    ['Hostname', d.hostname], ['CPUs', d.cpus],
+    ['RAM', d.ramUsed+'MB / '+d.ramTotal+'MB'],
+  ].map(([k,v])=>`<div style="display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);">
+    <span style="color:var(--text3);min-width:100px;">${k}</span>
+    <span style="font-family:monospace;">${v}</span></div>`).join('');
+}
+function formatUptime(s) {
+  const h=Math.floor(s/3600), m=Math.floor((s%3600)/60);
+  return h>0?h+'h '+m+'m':m+'m '+(s%60)+'s';
+}
+load();
+</script>
+</body></html>