feat: add minimal frontend (accounts, trial balance)

frontend/js/accounts.js

@@ -0,0 +1,18 @@
+(async () => {
+  try {
+    const data = await apiGet("/accounts/");
+    const tbody = document.getElementById("accounts-body");
+
+    data.forEach((a) => {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `
+        <td>${a.account_code}</td>
+        <td>${a.account_name}</td>
+        <td>${a.account_type}</td>
+      `;
+      tbody.appendChild(tr);
+    });
+  } catch (e) {
+    alert(e.message);
+  }
+})();

frontend/js/api.js

@@ -0,0 +1,10 @@
+const API_BASE = "http://localhost:18080";
+
+async function apiGet(path) {
+  const res = await fetch(`${API_BASE}${path}`);
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || "APIエラー");
+  }
+  return res.json();
+}

frontend/js/trial-balance.js

@@ -0,0 +1,29 @@
+document.getElementById("load").onclick = async () => {
+  const from = document.getElementById("from").value;
+  const to = document.getElementById("to").value;
+
+  if (!from || !to) {
+    alert("期間を指定してください");
+    return;
+  }
+
+  try {
+    const data = await apiGet(`/trial-balance?date_from=${from}&date_to=${to}`);
+    const tbody = document.getElementById("tb-body");
+    tbody.innerHTML = "";
+
+    data.accounts.forEach((a) => {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `
+        <td>${a.account_name}</td>
+        <td style="text-align:right">${a.opening_balance}</td>
+        <td style="text-align:right">${a.debit}</td>
+        <td style="text-align:right">${a.credit}</td>
+        <td style="text-align:right">${a.closing_balance}</td>
+      `;
+      tbody.appendChild(tr);
+    });
+  } catch (e) {
+    alert(e.message);
+  }
+};