Add #18 reseller white-label branding + #24 audit log UI with filters

#18: reseller_branding table (migration 008). branding.php endpoint: get/save/ upload-logo/delete-logo/resellers. _branding.php server-side helper injects CSS vars (--primary, --accent), custom CSS, favicon, and panel name into <head> of reseller + user portals at page-load time (no flash of unbranded content). NOVACPX_BRANDING JS global carries panel_name/support_email/ support_url/hide_powered_by for runtime use. Reseller panel gets a new "White Label" sidebar page with logo upload, color pickers with live preview, support contact fields, powered-by toggle, and custom CSS textarea. #24: audit-log backend now accepts user/action/date_from/date_to filter params. auditLog() JS rebuilt: filter bar at top, paginated table, expandable detail rows (click row to show JSON detail), total entry count, page buttons. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 17:50:41 -05:00 · 2026-06-08 03:51:45 +00:00
parent dbc5a01de9
commit 33c36ffc65
8 changed files with 512 additions and 42 deletions
@@ -350,28 +350,109 @@
  }

  // ── Audit Log ──────────────────────────────────────────────────────────────
-  async function auditLog() {
-    const res = await Nova.api('system', 'audit-log', { params: { per_page: 50 } });
-    const rows = res?.data || [];
-    return `
-<div class="card">
-  <div class="card-header"><span class="card-title">Audit Log</span></div>
-  <div class="table-wrap">
-    <table>
-      <thead><tr><th>Time</th><th>User</th><th>Action</th><th>Resource</th><th>IP</th></tr></thead>
-      <tbody>
-        ${rows.map(r => `
-          <tr>
-            <td class="text-muted text-sm">${Nova.relTime(r.created_at)}</td>
-            <td>${r.username || '—'}</td>
-            <td><code>${r.action}</code></td>
-            <td>${r.resource || '—'}</td>
-            <td class="text-muted text-sm">${r.ip_address || '—'}</td>
-          </tr>`).join('')}
-      </tbody>
-    </table>
+  async function auditLog(opts = {}) {
+    const { page = 1, user = '', action = '', date_from = '', date_to = '' } = opts;
+    const params = { page, per_page: 50 };
+    if (user)      params.user      = user;
+    if (action)    params.action    = action;
+    if (date_from) params.date_from = date_from;
+    if (date_to)   params.date_to   = date_to;
+
+    const content = document.getElementById('page-content');
+    const filterBar = `
+<div class="card" style="margin-bottom:1rem">
+  <div class="card-body" style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end">
+    <div class="form-group" style="margin:0;flex:1;min-width:140px">
+      <label style="font-size:.75rem;margin-bottom:.25rem">User</label>
+      <input id="al-user" class="form-control form-control-sm" value="${Nova.escHtml(user)}" placeholder="username…">
+    </div>
+    <div class="form-group" style="margin:0;flex:1;min-width:140px">
+      <label style="font-size:.75rem;margin-bottom:.25rem">Action</label>
+      <input id="al-action" class="form-control form-control-sm" value="${Nova.escHtml(action)}" placeholder="e.g. account.create">
+    </div>
+    <div class="form-group" style="margin:0;min-width:130px">
+      <label style="font-size:.75rem;margin-bottom:.25rem">From</label>
+      <input id="al-from" type="date" class="form-control form-control-sm" value="${Nova.escHtml(date_from)}">
+    </div>
+    <div class="form-group" style="margin:0;min-width:130px">
+      <label style="font-size:.75rem;margin-bottom:.25rem">To</label>
+      <input id="al-to" type="date" class="form-control form-control-sm" value="${Nova.escHtml(date_to)}">
+    </div>
+    <button class="btn btn-primary btn-sm" onclick="alApplyFilter()">Filter</button>
+    <button class="btn btn-ghost btn-sm" onclick="auditLog()">Reset</button>
  </div>
 </div>`;
+
+    if (content) content.innerHTML = filterBar + '<div class="page-loader">Loading…</div>';
+
+    const res   = await Nova.api('system', 'audit-log', { params });
+    const rows  = res?.data   || [];
+    const meta  = res?.meta   || {};
+    const total = meta.total  || rows.length;
+    const pages = meta.pages  || 1;
+
+    const tableHtml = rows.length ? `
+<div class="table-wrap">
+  <table>
+    <thead><tr><th>Time</th><th>User</th><th>Action</th><th>Resource</th><th>IP</th><th></th></tr></thead>
+    <tbody>
+      ${rows.map((r, i) => `
+        <tr style="cursor:pointer" onclick="alToggleDetail(${i})">
+          <td class="text-muted text-sm" style="white-space:nowrap">${Nova.relTime(r.created_at)}</td>
+          <td>${Nova.escHtml(r.username || '—')}</td>
+          <td><code style="font-size:.8rem">${Nova.escHtml(r.action)}</code></td>
+          <td class="text-muted text-sm">${Nova.escHtml(r.resource || '—')}</td>
+          <td class="text-muted text-sm" style="white-space:nowrap">${Nova.escHtml(r.ip_address || '—')}</td>
+          <td style="width:20px;color:var(--text-muted)">▾</td>
+        </tr>
+        <tr id="al-detail-${i}" style="display:none">
+          <td colspan="6" style="background:var(--bg3);padding:.75rem 1rem">
+            <pre style="margin:0;font-size:.78rem;white-space:pre-wrap;word-break:break-all">${
+              r.detail ? JSON.stringify(JSON.parse(r.detail || '{}'), null, 2) : '(no detail)'
+            }</pre>
+          </td>
+        </tr>`).join('')}
+    </tbody>
+  </table>
+</div>` : '<div class="empty-state"><p>No audit entries match the current filters.</p></div>';
+
+    const paginationHtml = pages > 1 ? `
+<div style="display:flex;gap:.5rem;justify-content:center;padding:1rem;flex-wrap:wrap">
+  ${Array.from({length: pages}, (_, i) => i + 1).map(p => `
+    <button class="btn btn-sm ${p === page ? 'btn-primary' : 'btn-ghost'}" onclick="alGoPage(${p})">${p}</button>
+  `).join('')}
+</div>` : '';
+
+    const tableCard = `
+<div class="card">
+  <div class="card-header">
+    <span class="card-title">Audit Log</span>
+    <span class="text-muted text-sm">${total} entr${total !== 1 ? 'ies' : 'y'}</span>
+  </div>
+  ${tableHtml}
+  ${paginationHtml}
+</div>`;
+
+    if (content) content.innerHTML = filterBar + tableCard;
+    else return filterBar + tableCard;
+
+    window._alOpts = opts;
+  }
+
+  window.alToggleDetail = (i) => {
+    const row = document.getElementById('al-detail-' + i);
+    if (row) row.style.display = row.style.display === 'none' ? '' : 'none';
+  };
+  window.alApplyFilter = () => {
+    auditLog({
+      page:      1,
+      user:      document.getElementById('al-user')?.value   || '',
+      action:    document.getElementById('al-action')?.value || '',
+      date_from: document.getElementById('al-from')?.value   || '',
+      date_to:   document.getElementById('al-to')?.value     || '',
+    });
+  };
+  window.alGoPage = (p) => auditLog({ ...(window._alOpts || {}), page: p });
  }

  // ── PHP Manager ────────────────────────────────────────────────────────────
@@ -298,8 +298,9 @@ const rNavItems = [
  { id:'packages',       label:'Packages',    icon:'ni-packages' },
  { id:'dns',            label:'DNS Zones',   icon:'ni-dns' },
  { id:'docker',         label:'Docker',      icon:'ni-docker' },
+  { id:'whitelabel',     label:'White Label', icon:'ni-settings' },
 ];
-const rPages = { dashboard: rDashboard, accounts: rAccounts, createAccount: rCreateAccount, packages: rPackages, dns: rDNS, docker: rDocker };
+const rPages = { dashboard: rDashboard, accounts: rAccounts, createAccount: rCreateAccount, packages: rPackages, dns: rDNS, docker: rDocker, whitelabel: rWhiteLabel };

 let _rActivePage = 'dashboard';

@@ -482,3 +483,152 @@ window.rDockerLaunchModal = async (appKey, appName) => {
    if (r?.success) rDockerLoadTab('containers');
  };
 };
+
+// ── White Label / Branding (#18) ────────────────────────────────────────────
+async function rWhiteLabel(el) {
+  el.innerHTML = '<div class="page-loader">Loading…</div>';
+  const res = await Nova.api('branding', 'get');
+  const b   = res?.data || {};
+
+  el.innerHTML = `
+<div class="page-header"><h1 class="page-title">White Label Branding</h1></div>
+<div class="grid-2" style="gap:1.5rem;align-items:start">
+
+  <div class="card">
+    <div class="card-header"><span class="card-title">Panel Identity</span></div>
+    <div class="card-body" style="display:flex;flex-direction:column;gap:1rem">
+      <div class="form-group">
+        <label>Panel Name</label>
+        <input id="wl-name" class="form-control" value="${Nova.escHtml(b.panel_name||'NovaCPX')}" placeholder="NovaCPX">
+      </div>
+      <div class="form-group">
+        <label>Logo</label>
+        ${b.logo_url ? `<div style="margin-bottom:.5rem"><img src="${Nova.escHtml(b.logo_url)}" style="max-height:50px;max-width:200px;border-radius:6px;background:var(--bg2);padding:.5rem"></div>` : ''}
+        <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
+          <label class="btn btn-ghost btn-sm" style="cursor:pointer">
+            Upload Logo <input type="file" id="wl-logo-file" accept="image/*" style="display:none" onchange="rWlUploadLogo()">
+          </label>
+          ${b.logo_url ? `<button class="btn btn-ghost btn-sm" onclick="rWlDeleteLogo()" style="color:var(--danger)">Remove</button>` : ''}
+          <span class="text-muted text-sm">PNG/SVG/JPG · max 512 KB</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>Custom CSS <span class="text-muted text-sm">(advanced)</span></label>
+        <textarea id="wl-css" class="form-control" rows="4" style="font-family:monospace;font-size:.8rem" placeholder="/* e.g. .sidebar { background: #1a1a2e; } */">${Nova.escHtml(b.custom_css||'')}</textarea>
+      </div>
+    </div>
+  </div>
+
+  <div style="display:flex;flex-direction:column;gap:1.5rem">
+    <div class="card">
+      <div class="card-header"><span class="card-title">Colors</span></div>
+      <div class="card-body" style="display:flex;flex-direction:column;gap:1rem">
+        <div class="form-group">
+          <label>Primary Color</label>
+          <div style="display:flex;gap:.5rem;align-items:center">
+            <input type="color" id="wl-primary" value="${Nova.escHtml(b.primary_color||'#6366f1')}" style="width:48px;height:36px;padding:2px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer">
+            <input type="text"  id="wl-primary-hex" class="form-control" style="width:110px;font-family:monospace" value="${Nova.escHtml(b.primary_color||'#6366f1')}" maxlength="7">
+          </div>
+        </div>
+        <div class="form-group">
+          <label>Accent Color</label>
+          <div style="display:flex;gap:.5rem;align-items:center">
+            <input type="color" id="wl-accent" value="${Nova.escHtml(b.accent_color||'#0ea5e9')}" style="width:48px;height:36px;padding:2px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer">
+            <input type="text"  id="wl-accent-hex" class="form-control" style="width:110px;font-family:monospace" value="${Nova.escHtml(b.accent_color||'#0ea5e9')}" maxlength="7">
+          </div>
+        </div>
+        <div id="wl-color-preview" style="height:40px;border-radius:8px;background:linear-gradient(135deg,${Nova.escHtml(b.primary_color||'#6366f1')},${Nova.escHtml(b.accent_color||'#0ea5e9')});transition:background .3s"></div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><span class="card-title">Support</span></div>
+      <div class="card-body" style="display:flex;flex-direction:column;gap:1rem">
+        <div class="form-group">
+          <label>Support Email</label>
+          <input id="wl-email" class="form-control" type="email" value="${Nova.escHtml(b.support_email||'')}" placeholder="support@yourdomain.com">
+        </div>
+        <div class="form-group">
+          <label>Support URL</label>
+          <input id="wl-url" class="form-control" type="url" value="${Nova.escHtml(b.support_url||'')}" placeholder="https://support.yourdomain.com">
+        </div>
+        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer">
+          <input type="checkbox" id="wl-hide-powered" ${b.hide_powered_by ? 'checked' : ''}>
+          Hide "Powered by NovaCPX" in panel footer
+        </label>
+      </div>
+    </div>
+
+    <div style="display:flex;gap:.5rem;justify-content:flex-end">
+      <button class="btn btn-ghost" onclick="rWhiteLabel(document.getElementById('page-content'))">Reset</button>
+      <button class="btn btn-primary" onclick="rWlSave()">Save Branding</button>
+    </div>
+  </div>
+</div>`;
+
+  // Sync color pickers ↔ hex inputs ↔ preview
+  ['primary','accent'].forEach(k => {
+    const picker = document.getElementById('wl-'+k);
+    const hex    = document.getElementById('wl-'+k+'-hex');
+    const sync   = () => {
+      if (picker) hex.value = picker.value;
+      rWlUpdatePreview();
+    };
+    const syncBack = () => {
+      if (/^#[0-9a-fA-F]{6}$/.test(hex.value)) { picker.value = hex.value; rWlUpdatePreview(); }
+    };
+    picker?.addEventListener('input', sync);
+    hex?.addEventListener('input', syncBack);
+  });
+}
+
+function rWlUpdatePreview() {
+  const p  = document.getElementById('wl-primary-hex')?.value || '#6366f1';
+  const a  = document.getElementById('wl-accent-hex')?.value  || '#0ea5e9';
+  const el = document.getElementById('wl-color-preview');
+  if (el) el.style.background = `linear-gradient(135deg,${p},${a})`;
+  // Live-preview CSS vars
+  const style = document.getElementById('reseller-branding') || (() => {
+    const s = document.createElement('style'); s.id = 'reseller-branding'; document.head.appendChild(s); return s;
+  })();
+  style.textContent = `:root { --primary: ${p}; --primary-dark: ${p}; --accent: ${a}; }`;
+}
+
+window.rWlUploadLogo = async () => {
+  const file = document.getElementById('wl-logo-file')?.files?.[0];
+  if (!file) return;
+  if (file.size > 512 * 1024) { Nova.toast('Logo must be under 512 KB', 'error'); return; }
+  const fd = new FormData();
+  fd.append('logo', file);
+  Nova.toast('Uploading…', 'info', 5000);
+  try {
+    const res = await fetch('/api/branding/upload-logo', {
+      method: 'POST', credentials: 'include', body: fd
+    });
+    const data = await res.json();
+    Nova.toast(data?.success ? 'Logo uploaded' : (data?.message || 'Upload failed'),
+               data?.success ? 'success' : 'error');
+    if (data?.success) rWhiteLabel(document.getElementById('page-content'));
+  } catch (e) { Nova.toast('Upload failed', 'error'); }
+};
+
+window.rWlDeleteLogo = async () => {
+  const r = await Nova.api('branding', 'delete-logo', { method: 'POST' });
+  Nova.toast(r?.success ? 'Logo removed' : (r?.message || 'Failed'), r?.success ? 'success' : 'error');
+  if (r?.success) rWhiteLabel(document.getElementById('page-content'));
+};
+
+window.rWlSave = async () => {
+  const body = {
+    panel_name:      document.getElementById('wl-name')?.value?.trim()        || 'NovaCPX',
+    primary_color:   document.getElementById('wl-primary-hex')?.value          || '#6366f1',
+    accent_color:    document.getElementById('wl-accent-hex')?.value           || '#0ea5e9',
+    support_email:   document.getElementById('wl-email')?.value?.trim()        || '',
+    support_url:     document.getElementById('wl-url')?.value?.trim()          || '',
+    hide_powered_by: document.getElementById('wl-hide-powered')?.checked ? 1 : 0,
+    custom_css:      document.getElementById('wl-css')?.value                  || '',
+  };
+  const r = await Nova.api('branding', 'save', { method: 'POST', body });
+  Nova.toast(r?.success ? 'Branding saved — reload to see changes' : (r?.message || 'Save failed'),
+             r?.success ? 'success' : 'error');
+};