修正

frontend/index.html

@@ -30,7 +30,67 @@
       <tbody></tbody>
     </table>
 
+    <h3>💰 当前资金状况</h3>
+
+    <table border="1" cellpadding="6" style="border-collapse: collapse">
+      <thead>
+        <tr style="background: #f5f5f5">
+          <th>账户</th>
+          <th style="text-align: right">余额</th>
+        </tr>
+      </thead>
+      <tbody id="cashBalanceBody">
+        <tr>
+          <td colspan="2">读取中...</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr style="font-weight: bold">
+          <td>合计</td>
+          <td id="cashBalanceTotal" style="text-align: right">-</td>
+        </tr>
+      </tfoot>
+    </table>
+
     <script src="js/api.js"></script>
     <script src="js/trial_balance.js"></script>
+    <script>
+      const API_BASE = "http://127.0.0.1:18080";
+
+      function formatYen(v) {
+        return "¥ " + Number(v).toLocaleString("ja-JP");
+      }
+
+      async function loadCashBalance() {
+        const body = document.getElementById("cashBalanceBody");
+        const totalEl = document.getElementById("cashBalanceTotal");
+
+        body.innerHTML = "<tr><td colspan='2'>读取中...</td></tr>";
+        totalEl.innerText = "-";
+
+        try {
+          const res = await fetch(`${API_BASE}/cash/balance`);
+          const data = await res.json();
+
+          body.innerHTML = "";
+
+          data.items.forEach((item) => {
+            const tr = document.createElement("tr");
+            tr.innerHTML = `
+        <td>${item.account_name}</td>
+        <td style="text-align:right;">${formatYen(item.balance)}</td>
+      `;
+            body.appendChild(tr);
+          });
+
+          totalEl.innerText = formatYen(data.total_balance);
+        } catch (e) {
+          body.innerHTML = `<tr><td colspan="2">读取失败</td></tr>`;
+        }
+      }
+
+      // 页面加载时自动读取
+      window.addEventListener("DOMContentLoaded", loadCashBalance);
+    </script>
   </body>
 </html>