修正

2026-01-12 20:59:52 +09:00
parent 76d8e7622e
commit 59e8e8625d
7 changed files with 840 additions and 314 deletions
--- a/frontend/journal-view.html
+++ b/frontend/journal-view.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>仕訳詳細</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        margin: 24px;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin-top: 12px;
+      }
+      th,
+      td {
+        border: 1px solid #ccc;
+        padding: 8px;
+      }
+      th {
+        background: #f5f5f5;
+      }
+      .info-row {
+        margin: 8px 0;
+      }
+      .info-label {
+        font-weight: bold;
+        min-width: 120px;
+        display: inline-block;
+      }
+      .total-row {
+        background: #f0f8ff;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>仕訳詳細</h2>
+
+    <div id="info"></div>
+
+    <table>
+      <thead>
+        <tr>
+          <th>科目コード</th>
+          <th>科目名</th>
+          <th>借方</th>
+          <th>貸方</th>
+        </tr>
+      </thead>
+      <tbody id="lines"></tbody>
+    </table>
+
+    <div style="margin-top: 16px">
+      <button onclick="window.close()">閉じる</button>
+      <button onclick="goBack()">一覧に戻る</button>
+    </div>
+
+    <script>
+      const API = "http://127.0.0.1:18080";
+
+      async function loadJournalEntry() {
+        const params = new URLSearchParams(window.location.search);
+        const id = params.get("id");
+
+        if (!id) {
+          alert("仕訳IDが指定されていません");
+          return;
+        }
+
+        const res = await fetch(`${API}/journal-entries/${id}`);
+        if (!res.ok) {
+          alert("仕訳の取得に失敗しました");
+          return;
+        }
+
+        const data = await res.json();
+
+        // ヘッダー情報
+        document.getElementById("info").innerHTML = `
+          <div class="info-row">
+            <span class="info-label">仕訳ID:</span> ${data.journal_entry_id}
+          </div>
+          <div class="info-row">
+            <span class="info-label">仕訳日:</span> ${data.entry_date}
+          </div>
+          <div class="info-row">
+            <span class="info-label">摘要:</span> ${data.description}
+          </div>
+          <div class="info-row">
+            <span class="info-label">会計年度:</span> ${data.fiscal_year}
+          </div>
+        `;
+
+        // 明細
+        const tbody = document.getElementById("lines");
+        let totalDebit = 0;
+        let totalCredit = 0;
+
+        data.lines.forEach((line) => {
+          const tr = document.createElement("tr");
+          tr.innerHTML = `
+            <td>${line.account_code}</td>
+            <td>${line.account_name}</td>
+            <td style="text-align:right">${
+              line.debit > 0 ? line.debit.toLocaleString() : ""
+            }</td>
+            <td style="text-align:right">${
+              line.credit > 0 ? line.credit.toLocaleString() : ""
+            }</td>
+          `;
+          tbody.appendChild(tr);
+
+          totalDebit += parseFloat(line.debit);
+          totalCredit += parseFloat(line.credit);
+        });
+
+        // 合計行
+        const totalRow = document.createElement("tr");
+        totalRow.className = "total-row";
+        totalRow.innerHTML = `
+          <td colspan="2" style="text-align:center">合計</td>
+          <td style="text-align:right">${totalDebit.toLocaleString()}</td>
+          <td style="text-align:right">${totalCredit.toLocaleString()}</td>
+        `;
+        tbody.appendChild(totalRow);
+      }
+
+      function goBack() {
+        window.location.href = "journal-list.html";
+      }
+
+      loadJournalEntry();
+    </script>
+  </body>
+</html>