n.siegfried
61d1cf4bff
Site comments (8/3) - BIM card: LOD removed, IFF # added next to the coordination status, and required once that status is "Signed off (IFF)" — an unnumbered sign-off isn't traceable. A LOD already stored on a package is preserved and shown as legacy, not blanked. - The blue "from SOP types" subtext under a field is now a SOP chip on the label with the detail in a tooltip. The chip stays visible rather than hover-only: field tablets have no hover, and "this came from the SOP" is the part that matters. The hint elements stay in the DOM (hidden) so the code writing to them keeps working; an observer mirrors their text into the tooltip. - Specification Section is no longer typed per package. Each WP type carries a spec section on the SOP; the field is read-only in the Creator and follows the type, with the SOP's spec folder linked underneath. This reads both spec comments as one intent — stop typing it, derive it. - Assignees and Distribution are multi-selects over the SOP project team, showing each person's job function, with the CM pre-added to Distribution (removable per package) and a free-text option for people with no account. The stored display strings are unchanged so print/export/dashboard keep working; account ids ride alongside for the notification work in wave 3. Localization + time - Per-user locale/timezone (Language & time in the user menu), an app-wide default in the admin console, then the browser. Timezones are validated against the server's zoneinfo and the picker is fed from it. Calendar dates are formatted from their parts so a due date never reads a day early in another zone. - Every displayed timestamp now goes through the shared helpers. Top-bar chrome - Project switcher beside the logo and a centered global search, injected into either generation of top bar; skipped in an iframe so the embedded Creator doesn't get a second one. Ctrl/Cmd-K focuses search. - GET /api/search covers work packages, projects and SOPs, scoped to the caller's projects, hiding archived packages, with LIKE wildcards escaped. Fixed along the way: showForm() cleared every card's inline display, which undid applyKind() — so the Package Type and BIM cards reappeared on an install-only project. Split out applyKindVisibility() and re-apply it there. Verified: 100 API checks on a fresh database (44 permissions + 22 password reset + 34 search/localization), 24 driven UI checks against the real Creator page in headless Chrome (SOP chips, both people pickers, spec auto-fill, critical tags, BIM suppression), and the chrome harness on both bar styles. Screenshots reviewed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
215 lines
12 KiB
HTML
215 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Admin Console — Work Package Suite</title>
|
||
<script src="auth-guard.js"></script>
|
||
<link rel="icon" href="favicon.ico" sizes="any">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<meta name="theme-color" content="#161616">
|
||
<link rel="stylesheet" href="theme-light.css">
|
||
<link rel="stylesheet" href="wp-chrome.css">
|
||
<style>
|
||
:root{ --bg:#f4f4f4; --surface:#fff; --border:#e0e0e0; --border-strong:#8d8d8d; --text:#161616;
|
||
--muted:#525252; --dim:#8d8d8d; --accent:#0f62fe; --green:#198038; --green-bg:#defbe6;
|
||
--red:#da1e28; --red-bg:#fff1f1; --amber:#8e6a00; --amber-bg:#fdf6dd; --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace; }
|
||
*{ box-sizing:border-box; }
|
||
body{ margin:0; font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); }
|
||
.wrap{ max-width:860px; margin:0 auto; padding:28px 20px 80px; }
|
||
h1{ font-size:20px; margin:0 0 2px; }
|
||
.sub{ color:var(--muted); font-size:13px; margin-bottom:18px; }
|
||
.card{ background:var(--surface); border:1px solid var(--border); border-radius:0; padding:18px 20px; margin-bottom:16px; }
|
||
.card h2{ font-size:14px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); }
|
||
button{ font:inherit; font-size:13px; font-weight:600; border-radius:0; padding:8px 14px; cursor:pointer;
|
||
border:1px solid var(--border-strong); background:#fff; color:var(--text); }
|
||
button:hover{ border-color:var(--accent); color:var(--accent); }
|
||
button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
|
||
button.primary:hover{ background:#1e54bb; color:#fff; }
|
||
button.danger{ border-color:var(--red); color:var(--red); }
|
||
button.danger:hover{ background:var(--red-bg); }
|
||
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
|
||
.banner{ padding:10px 14px; border-radius:0; font-size:13px; font-weight:600; margin-top:10px; border:1px solid var(--border); background:var(--surface); }
|
||
.banner.ok{ background:var(--green-bg); color:var(--green); border-color:var(--green); }
|
||
.banner.bad{ background:var(--red-bg); color:var(--red); border-color:var(--red); }
|
||
pre.out{ background:#0f1525; color:#d7e0f5; border-radius:0; padding:12px 14px; font-family:var(--mono);
|
||
font-size:12px; line-height:1.55; white-space:pre-wrap; max-height:340px; overflow:auto; margin:12px 0 0; }
|
||
pre.out .p{ color:#56d364; font-weight:700; } pre.out .f{ color:#ff7b72; font-weight:700; }
|
||
table.kv{ border-collapse:collapse; font-size:13px; margin-top:8px; }
|
||
table.kv th{ text-align:left; padding:5px 18px 5px 0; color:var(--muted); font-weight:600; }
|
||
table.kv td{ padding:5px 0; font-variant-numeric:tabular-nums; font-weight:700; }
|
||
.note{ font-size:12px; color:var(--dim); margin-top:10px; }
|
||
.gate-overlay{ position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; }
|
||
.gate-box{ background:var(--surface); border:1px solid var(--border); border-radius:0; padding:28px; max-width:380px; width:100%; box-shadow:0 8px 30px rgba(20,30,50,.12); }
|
||
.gate-box h2{ margin:0 0 4px; font-size:17px; }
|
||
.gate-box p{ color:var(--muted); font-size:13px; margin:0 0 16px; }
|
||
.gate-box input{ width:100%; padding:10px 12px; font-size:14px; border:1px solid var(--border-strong); border-radius:0; margin-bottom:12px; }
|
||
.gate-msg{ color:var(--red); font-size:12px; min-height:16px; margin-bottom:8px; }
|
||
.secwarn{ background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber); border-radius:0; padding:9px 13px; font-size:12px; margin-bottom:16px; }
|
||
a.home{ color:var(--accent); font-size:13px; text-decoration:none; }
|
||
.urow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
|
||
.urow input, .urow select{ padding:8px 10px; font:inherit; font-size:13px; border:1px solid var(--border-strong);
|
||
border-radius:0; background:#fff; color:var(--text); }
|
||
.urow input{ flex:1; min-width:130px; }
|
||
table.users{ border-collapse:collapse; width:100%; font-size:13px; }
|
||
table.users th{ text-align:left; padding:7px 10px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
|
||
table.users td{ padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
|
||
table.users tr:last-child td{ border-bottom:none; }
|
||
.tag{ display:inline-block; padding:1px 9px; border-radius:11px; font-size:11px; font-weight:700; }
|
||
.tag.admin{ background:#edf5ff; color:#0f62fe; } .tag.user{ background:#e8e8e8; color:#525252; }
|
||
.tag.on{ background:var(--green-bg); color:var(--green); } .tag.off{ background:var(--red-bg); color:var(--red); }
|
||
button.mini{ padding:4px 9px; font-size:12px; }
|
||
.me-tag{ font-size:11px; color:var(--dim); margin-left:6px; }
|
||
select.role-select{ padding:4px 8px; font:inherit; font-size:12px; border:1px solid var(--border-strong); border-radius:0; background:#fff; color:var(--text); cursor:pointer; }
|
||
select.role-select:hover{ border-color:var(--accent); }
|
||
select.role-select.is-admin{ color:var(--accent); border-color:var(--accent); font-weight:700; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- SHARED DARK APP BAR -->
|
||
<header class="wp-appbar">
|
||
<a href="index.html" class="wp-appbar-brand" title="Back to site">
|
||
<span class="wp-logo-chip"><img src="prime-controls-logo.jpg" alt="Prime Controls"></span>
|
||
<span class="wp-appbar-title">Work Package Suite <span class="wp-appbar-sub">| Admin Console</span></span>
|
||
</a>
|
||
</header>
|
||
|
||
<!-- ADMINS ONLY (shown if the signed-in account isn't an admin) -->
|
||
<div class="wrap" id="admin-denied" style="display:none">
|
||
<div class="card">
|
||
<h2>Admins only</h2>
|
||
<p class="sub" style="margin:0 0 12px">Your account doesn’t have admin access. Sign in with an admin account, or ask an administrator to grant you the admin role.</p>
|
||
<div class="row"><a class="home" href="index.html">← Back to site</a> <button onclick="wpLogout()">Sign out</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONSOLE -->
|
||
<div class="wrap" id="admin-main" style="display:none">
|
||
<div class="row" style="justify-content:space-between">
|
||
<div><h1>Admin Console</h1><div class="sub">Stack diagnostics & tests · talks to <code>/api</code> on this host</div></div>
|
||
<div class="row"><a class="home" href="index.html">← Site</a></div>
|
||
</div>
|
||
|
||
<!-- CONNECTIVITY -->
|
||
<div class="card">
|
||
<h2>API connectivity</h2>
|
||
<div class="row"><button class="primary" onclick="checkHealth()">Check /api/health</button></div>
|
||
<div class="banner" id="health-banner">—</div>
|
||
</div>
|
||
|
||
<!-- USER ADMINISTRATION -->
|
||
<div class="card">
|
||
<h2>User administration</h2>
|
||
<div class="sub" style="margin-bottom:10px">Login accounts for the portal. Requires an <strong>admin</strong> role on your own account.</div>
|
||
<div class="row"><button onclick="loadUsers()">Refresh users</button></div>
|
||
<div id="users-banner"></div>
|
||
<div id="users-table" style="margin-top:12px"></div>
|
||
|
||
<h2 style="margin-top:22px">Add a user</h2>
|
||
<div class="urow">
|
||
<input id="nu-username" placeholder="Username *" autocomplete="off">
|
||
<input id="nu-fullname" placeholder="Full name" autocomplete="off">
|
||
<input id="nu-email" placeholder="Email" autocomplete="off">
|
||
<select id="nu-role" title="Permissions — what this account may do">
|
||
<option value="project_user">Project User</option>
|
||
<option value="project_admin">Project Admin</option>
|
||
<option value="admin">Administrator</option>
|
||
</select>
|
||
<select id="nu-project-role" title="Job function on the project"></select>
|
||
<input id="nu-password" type="password" placeholder="Password (min 12)" autocomplete="new-password">
|
||
<button class="primary" onclick="createUser()">Create user</button>
|
||
</div>
|
||
<div id="users-create-msg" class="note"></div>
|
||
</div>
|
||
|
||
<!-- FEATURE FLAGS -->
|
||
<div class="card">
|
||
<h2>Features</h2>
|
||
<div class="sub" style="margin-bottom:10px">Switches that change what the suite offers on every project.</div>
|
||
<div id="features-box" class="note">Loading…</div>
|
||
</div>
|
||
|
||
<!-- NOTIFICATIONS / EMAIL -->
|
||
<div class="card">
|
||
<h2>Notifications & email</h2>
|
||
<div class="sub" style="margin-bottom:10px">Email notifications for work-package assignments, and self-service password resets. <strong>Off by default</strong> — turn this on only once SMTP is configured. The SMTP <strong>password</strong> is read from the <code>SMTP_PASSWORD</code> environment variable and is never stored here.</div>
|
||
<div id="settings-box" class="note">Loading…</div>
|
||
<div id="notif-box" class="note" style="margin-top:14px"></div>
|
||
</div>
|
||
|
||
<!-- ALL FEEDBACK / COMMENTS -->
|
||
<div class="card">
|
||
<h2>All feedback & comments</h2>
|
||
<div class="sub" style="margin-bottom:10px">Every comment submitted across the suite — who wrote it, what they said, and where they were (page & step) when they commented.</div>
|
||
<div class="row">
|
||
<button onclick="loadComments()">Refresh comments</button>
|
||
<select id="cmt-filter" onchange="renderComments()"><option value="">All sources</option></select>
|
||
<input id="cmt-search" placeholder="Search text / author…" oninput="renderComments()" style="flex:1;min-width:160px;padding:8px 10px;font:inherit;font-size:13px;border:1px solid var(--border-strong);border-radius:0;">
|
||
</div>
|
||
<div id="comments-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- ACTIVITY LOG (AUDIT TRAIL) -->
|
||
<div class="card">
|
||
<h2>Activity log</h2>
|
||
<div class="sub" style="margin-bottom:10px">Who changed what, and when — across projects, SOPs, work packages, and user accounts. Stored server-side in the shared database.</div>
|
||
<div class="row">
|
||
<button onclick="loadAudit()">Refresh</button>
|
||
<select id="audit-type" onchange="renderAudit()">
|
||
<option value="">All types</option>
|
||
<option value="wp">Work packages</option>
|
||
<option value="sop">SOPs</option>
|
||
<option value="project">Projects</option>
|
||
<option value="user">User accounts</option>
|
||
</select>
|
||
<input id="audit-search" placeholder="Search actor / action / item…" oninput="renderAudit()" style="flex:1;min-width:160px;padding:8px 10px;font:inherit;font-size:13px;border:1px solid var(--border-strong);border-radius:0;">
|
||
</div>
|
||
<div id="audit-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- USAGE LOGS -->
|
||
<div class="card">
|
||
<h2>Usage logs</h2>
|
||
<div class="sub" style="margin-bottom:10px">Engagement recorded by the suite — sessions, step views, and actions. Note: stored locally per browser, so this reflects activity on <strong>this</strong> machine.</div>
|
||
<div class="row">
|
||
<button onclick="loadUsage()">Refresh</button>
|
||
<button onclick="downloadUsage()">Download JSON</button>
|
||
</div>
|
||
<div id="usage-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- DB SNAPSHOT -->
|
||
<div class="card">
|
||
<h2>Database snapshot</h2>
|
||
<div class="row"><button onclick="snapshot()">Refresh counts</button></div>
|
||
<div id="snapshot-out" class="note">Click refresh to read row counts from SQL via the API.</div>
|
||
</div>
|
||
|
||
<!-- SMOKE TEST -->
|
||
<div class="card">
|
||
<h2>End-to-end smoke test</h2>
|
||
<div class="sub" style="margin-bottom:8px">Creates a throwaway project, exercises the issue gate / status / metrics / comments, then deletes it (cascade). Mirrors <code>server/smoketest.py</code>.</div>
|
||
<div class="row"><button class="primary" onclick="runSmokeTest()">Run smoke test</button></div>
|
||
<pre class="out" id="smoke-out">Ready.</pre>
|
||
</div>
|
||
|
||
<!-- DEMO DATA -->
|
||
<div class="card">
|
||
<h2>Demo data</h2>
|
||
<div class="sub" style="margin-bottom:8px">Seed a realistic <code>DEMO</code> project (SOP + a spread of Work Packages) into SQL, or remove all <code>DEMO-</code>/<code>SMOKE-</code> projects.</div>
|
||
<div class="row">
|
||
<button class="primary" onclick="seedDemo()">Seed demo project</button>
|
||
<button class="danger" onclick="cleanDemo()">Clean DEMO / SMOKE projects</button>
|
||
</div>
|
||
<pre class="out" id="demo-out">Ready.</pre>
|
||
<div class="note">Note: the seeded <strong>project</strong> appears in the home picker; its SOP/WPs live in SQL but won't render in the Creator/Dashboard until the front end is wired to the API (Phase 2).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="admin.js"></script>
|
||
<script src="wp-format.js"></script>
|
||
<script src="wp-chrome.js"></script>
|
||
</body>
|
||
</html>
|