66a3460c92
Clean dark theme matching /proof page. Priority badges on contracts (urgent=red, high=yellow, medium=blue, low=green). Worker matches shown inline. Day tabs show fill counts. Alerts with icons. Playbook entries styled. All styles inline — no separate CSS file. Mobile responsive: single column layout, scrollable tabs. Links to /proof at bottom. https://devop.live/lakehouse/ — the dashboard https://devop.live/lakehouse/proof — the proof page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
101 lines
5.3 KiB
HTML
101 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lakehouse — Staffing Co-Pilot</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Inter','SF Pro',system-ui,sans-serif;background:#0a0a0f;color:#d4d4d8;line-height:1.6}
|
|
.hero{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);padding:24px 30px;border-bottom:1px solid #1e293b;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
|
|
.hero h1{font-size:20px;font-weight:700;background:linear-gradient(to right,#f472b6,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.hero .right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
|
|
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
|
|
.dot.g{background:#34d399}.dot.r{background:#f87171}.dot.y{background:#fbbf24}
|
|
.svc{font-size:11px;color:#94a3b8}
|
|
.vram{font-size:11px;color:#64748b}
|
|
.btn{background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:7px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s}
|
|
.btn:hover{background:#818cf8;border-color:#818cf8}
|
|
.btn.primary{background:#7c3aed;border-color:#7c3aed}
|
|
.btn.primary:hover{background:#6d28d9}
|
|
.container{max-width:1200px;margin:0 auto;padding:20px 16px}
|
|
.grid{display:grid;grid-template-columns:5fr 3fr;gap:16px}
|
|
.card{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:18px;margin-bottom:16px}
|
|
.card h2{font-size:13px;color:#818cf8;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
|
|
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
|
|
.tab{padding:5px 14px;background:#1e293b;border:1px solid #334155;color:#94a3b8;border-radius:6px;cursor:pointer;font-size:11px;font-weight:500}
|
|
.tab.active{background:#7c3aed;border-color:#7c3aed;color:#fff}
|
|
.contract{border-left:3px solid #334155;padding:12px 16px;margin-bottom:10px;background:#0d1117;border-radius:0 8px 8px 0;transition:border-color .2s}
|
|
.contract.urgent{border-left-color:#f87171}.contract.high{border-left-color:#fbbf24}.contract.filled{border-left-color:#34d399}
|
|
.contract .top{display:flex;justify-content:space-between;align-items:center}
|
|
.contract .title{font-weight:600;font-size:13px;color:#e2e8f0}
|
|
.contract .badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
|
|
.badge.urgent{background:#7f1d1d;color:#fca5a5}.badge.high{background:#78350f;color:#fcd34d}.badge.medium{background:#1e3a5f;color:#93c5fd}.badge.low{background:#14532d;color:#86efac}
|
|
.contract .meta{font-size:11px;color:#64748b;margin-top:4px}
|
|
.contract .workers{font-size:11px;color:#94a3b8;margin-top:8px}
|
|
.contract .workers b{color:#34d399}
|
|
.alert{padding:10px 14px;margin-bottom:8px;border-radius:6px;font-size:12px;display:flex;align-items:center;gap:8px}
|
|
.alert .icon{font-size:14px}
|
|
.alert.warn{background:#1c1305;border:1px solid #854d0e}.alert.info{background:#0c1a2e;border:1px solid #1e40af}.alert.good{background:#052e16;border:1px solid #166534}
|
|
.playbook{padding:10px 14px;margin-bottom:6px;background:#0d1117;border-radius:6px;font-size:11px;border:1px solid #1e293b}
|
|
.playbook .op{color:#a78bfa;font-weight:600}
|
|
.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1e293b;font-size:13px}
|
|
.stat-row .val{color:#34d399;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.log{font-size:11px;color:#64748b;max-height:200px;overflow-y:auto}
|
|
.log div{padding:4px 0;border-bottom:1px solid #111827}
|
|
.empty{color:#475569;font-size:13px;text-align:center;padding:30px}
|
|
.proof-link{display:block;text-align:center;padding:12px;color:#818cf8;font-size:12px;text-decoration:none;border-top:1px solid #1e293b;margin-top:16px}
|
|
.proof-link:hover{color:#a78bfa}
|
|
@media(max-width:768px){
|
|
.hero{padding:16px;flex-direction:column;align-items:flex-start}
|
|
.grid{grid-template-columns:1fr}
|
|
.contract .top{flex-direction:column;align-items:flex-start;gap:4px}
|
|
.tabs{overflow-x:auto;flex-wrap:nowrap}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hero">
|
|
<h1>Staffing Co-Pilot</h1>
|
|
<div class="right">
|
|
<span class="svc"><span class="dot g" id="svc-gw"></span>Gateway</span>
|
|
<span class="svc"><span class="dot g" id="svc-lh"></span>Lakehouse</span>
|
|
<span class="vram" id="vram-display">VRAM: —</span>
|
|
<button class="btn" onclick="refresh()">Refresh</button>
|
|
<button class="btn primary" onclick="runWeek()">Run Week Sim</button>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div>
|
|
<div class="card">
|
|
<h2>Contracts</h2>
|
|
<div class="tabs" id="day-nav"></div>
|
|
<div id="contracts"><div class="empty">Click <b>Run Week Sim</b> to simulate a staffing week</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Week Summary</h2>
|
|
<div id="week-stats"><div class="empty">No simulation data yet</div></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card">
|
|
<h2>Alerts</h2>
|
|
<div id="alerts"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Playbooks</h2>
|
|
<div id="playbooks"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Live Log</h2>
|
|
<div class="log" id="log"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="proof-link" href="proof">View Proof of Work →</a>
|
|
</div>
|
|
<script type="module" src="dashboard.ts"></script>
|
|
</body>
|
|
</html>
|