修正

2025-12-22 17:30:32 +09:00
parent 87fa1aaa1f
commit 001b7bf08f
12 changed files with 1380 additions and 506 deletions
--- a/frontend/pages/cash.html
+++ b/frontend/pages/cash.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>資金状況</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        margin: 24px;
+      }
+      h2,
+      h3 {
+        margin-top: 0;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin-top: 12px;
+      }
+      th,
+      td {
+        border: 1px solid #ccc;
+        padding: 6px;
+        text-align: right;
+      }
+      th {
+        background: #f5f5f5;
+      }
+      th.left,
+      td.left {
+        text-align: left;
+      }
+      .total {
+        font-weight: bold;
+        background: #f0f0f0;
+      }
+      .filter {
+        margin: 8px 0;
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
+      input,
+      select,
+      button {
+        padding: 4px 6px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>💰 現在の資金状況</h2>
+
+    <!-- 残高 -->
+    <table id="balanceTable">
+      <thead>
+        <tr>
+          <th class="left">口座</th>
+          <th>残高</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total">
+          <td class="left">合計</td>
+          <td id="totalBalance">-</td>
+        </tr>
+      </tfoot>
+    </table>
+
+    <hr />
+
+    <h3>📄 資金流水</h3>
+
+    <!-- 条件 -->
+    <div class="filter">
+      <label>口座：</label>
+      <select id="accountSelect"></select>
+
+      <label>期間：</label>
+      <input type="date" id="fromDate" />
+      〜
+      <input type="date" id="toDate" />
+
+      <button onclick="reloadTransactions()">表示</button>
+    </div>
+
+    <!-- 流水表 -->
+    <table id="txTable">
+      <thead>
+        <tr>
+          <th class="left">日付</th>
+          <th class="left">摘要</th>
+          <th class="left">相手科目</th>
+          <th>入金</th>
+          <th>出金</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+
+    <script>
+      const API = "http://127.0.0.1:8000";
+
+      // --------------------
+      // 初期化
+      // --------------------
+      async function init() {
+        await loadBalances();
+        await loadAccounts();
+
+        // 初期期間：当月
+        const now = new Date();
+        const first = new Date(now.getFullYear(), now.getMonth(), 1);
+        document.getElementById("fromDate").value = first
+          .toISOString()
+          .slice(0, 10);
+        document.getElementById("toDate").value = now
+          .toISOString()
+          .slice(0, 10);
+      }
+      init();
+
+      // --------------------
+      // 残高
+      // --------------------
+      async function loadBalances() {
+        const res = await fetch(`${API}/cash/balance`);
+        const data = await res.json();
+
+        const tbody = document.querySelector("#balanceTable tbody");
+        tbody.innerHTML = "";
+
+        data.items.forEach((i) => {
+          tbody.innerHTML += `
+            <tr>
+              <td class="left">${i.account_name}</td>
+              <td>${Number(i.balance).toLocaleString()}</td>
+            </tr>`;
+        });
+
+        document.getElementById("totalBalance").innerText = Number(
+          data.total_balance
+        ).toLocaleString();
+      }
+
+      // --------------------
+      // 口座一覧
+      // --------------------
+      async function loadAccounts() {
+        const res = await fetch(`${API}/cash/balance`);
+        const data = await res.json();
+
+        const sel = document.getElementById("accountSelect");
+        sel.innerHTML = data.items
+          .map(
+            (i) => `<option value="${i.account_id}">${i.account_name}</option>`
+          )
+          .join("");
+
+        reloadTransactions();
+      }
+
+      // --------------------
+      // 再表示
+      // --------------------
+      function reloadTransactions() {
+        const accountId = document.getElementById("accountSelect").value;
+        const from = document.getElementById("fromDate").value;
+        const to = document.getElementById("toDate").value;
+
+        loadTransactions(accountId, from, to);
+      }
+
+      // --------------------
+      // 流水
+      // --------------------
+      async function loadTransactions(accountId, from, to) {
+        let url = `${API}/cash/transactions?account_id=${accountId}`;
+        if (from) url += `&from=${from}`;
+        if (to) url += `&to=${to}`;
+
+        const res = await fetch(url);
+        const rows = await res.json();
+
+        const tbody = document.querySelector("#txTable tbody");
+        tbody.innerHTML = "";
+
+        rows.forEach((r) => {
+          tbody.innerHTML += `
+            <tr>
+              <td class="left">${r.journal_date}</td>
+              <td class="left">${r.description}</td>
+              <td class="left">${r.counter_account}</td>
+              <td>${r.amount > 0 ? r.amount.toLocaleString() : ""}</td>
+              <td>${r.amount < 0 ? (-r.amount).toLocaleString() : ""}</td>
+            </tr>`;
+        });
+      }
+    </script>
+  </body>
+</html>