<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>BuJo Dashboard</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.card { border: 1px solid #ddd; border-radius: 12px; padding: 12px; margin: 12px 0; }
h2 { margin: 0 0 8px; }
input { padding: 8px; width: 140px; }
button { padding: 8px 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.small { color: #666; font-size: 12px; }
</style>
</head>
<body>
<h1>BuJo Dashboard (MVP)</h1>
<div class="card">
<h2>Settings</h2>
<div class="row">
<label>LINE userId:</label>
<input id="uid" placeholder="Uxxxxxxxx"/>
</div>
<div class="row">
<label>Month (YYYY-MM):</label>
<input id="ym" value="2026-01"/>
<button onclick="loadAll()">Load</button>
</div>
<p class="small">
</p>
</div>
<div class="card">
<h2>Dreams (Today Popup)</h2>
<div id="dreams"></div>
</div>
<div class="card">
<h2>Finance (Month)</h2>
<pre id="finance"></pre>
</div>
<script>
const WORKER_BASE = "https://<pisitpong-sws.workers.dev>.workers.dev";
const DASH_KEY = "<7915364280>"; //
async function api(path) {
const res = await fetch(WORKER_BASE + path, {
headers: { "x-dashboard-key": DASH_KEY }
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
async function loadAll() {
const uid = document.getElementById("uid").value.trim();
const ym = document.getElementById("ym").value.trim();
const dreams = await api(`/api/dreams/today?line_user_id=${encodeURIComponent(uid)}`);
document.getElementById("dreams").innerHTML =
dreams.dreams.map(d => `<div class="card"><b>${d.title}</b><div class="small">${d.description||""}</div></div>`).join("");
const fin = await api(`/api/finance/month?line_user_id=${encodeURIComponent(uid)}&ym=${encodeURIComponent(ym)}`);
document.getElementById("finance").textContent = JSON.stringify(fin, null, 2);
}
</script>
</body>
</html>