月次レポート機能を実装し、経費の取り消し・復帰機能を追加。CSV取込画面にドラッグ＆ドロップエリアを実装し、エラーメッセージ表示を追加。金額のカンマ区切り表示を全体に適用。faviconとapple-touch-iconを追加し、404エラーを回避。作業ログをdiary.mdに追記。

templates/expenses/csv_upload.html

@@ -5,13 +5,76 @@
 {% block content %}
   <section>
     <h2>CSV取込</h2>
+    {% if error_message %}
+      <p style="color: #b00020;">{{ error_message }}</p>
+    {% endif %}
+    <style>
+      .drop-zone {
+        border: 2px dashed #888;
+        padding: 24px;
+        text-align: center;
+        background: #fafafa;
+        transition: background 0.2s ease;
+      }
+      .drop-zone.is-dragover {
+        background: #e9f2ff;
+      }
+      .drop-zone input[type="file"] {
+        display: none;
+      }
+      .drop-zone .file-name {
+        margin-top: 8px;
+        color: #555;
+        font-size: 0.9em;
+      }
+    </style>
     <div>
-      <p>ここにDrag & Dropエリアを配置予定。</p>
-      <form method="post" enctype="multipart/form-data">
+      <form method="post" enctype="multipart/form-data" id="js-csv-form">
         {% csrf_token %}
-        <input type="file" name="csv_file">
+        <label class="drop-zone" id="js-drop-zone">
+          <strong>ここにCSVをドラッグ＆ドロップ</strong>
+          <div>またはクリックして選択</div>
+          <input type="file" name="csv_file" id="js-csv-input" accept=".csv">
+          <div class="file-name" id="js-file-name">ファイル未選択</div>
+        </label>
         <button type="submit">アップロード</button>
       </form>
     </div>
+    <script>
+      const dropZone = document.querySelector('#js-drop-zone');
+      const fileInput = document.querySelector('#js-csv-input');
+      const fileName = document.querySelector('#js-file-name');
+
+      function updateFileName(files) {
+        if (!files || files.length === 0) {
+          fileName.textContent = 'ファイル未選択';
+          return;
+        }
+        fileName.textContent = files[0].name;
+      }
+
+      dropZone.addEventListener('dragover', (event) => {
+        event.preventDefault();
+        dropZone.classList.add('is-dragover');
+      });
+
+      dropZone.addEventListener('dragleave', () => {
+        dropZone.classList.remove('is-dragover');
+      });
+
+      dropZone.addEventListener('drop', (event) => {
+        event.preventDefault();
+        dropZone.classList.remove('is-dragover');
+        if (!event.dataTransfer?.files?.length) {
+          return;
+        }
+        fileInput.files = event.dataTransfer.files;
+        updateFileName(fileInput.files);
+      });
+
+      fileInput.addEventListener('change', (event) => {
+        updateFileName(event.target.files);
+      });
+    </script>
   </section>
 {% endblock %}