From 3d0ebc92c65950be405bfa130ff8e4f99489ed8e Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Mon, 1 Jun 2026 13:30:37 -0400
Subject: [PATCH] 06/01 Fix Save Income/Expense buttons don't work

---
 app/templates/transactions/form.html | 80 ++++++++++++++--------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/app/templates/transactions/form.html b/app/templates/transactions/form.html
index f5eaab4..37d9c17 100644
--- a/app/templates/transactions/form.html
+++ b/app/templates/transactions/form.html
@@ -102,46 +102,6 @@
             {{ form.notes(class="form-control", rows=2, placeholder="Optional notes", id="field_notes") }}
         </div>
 
-        <!-- Receipt section (edit mode only) -->
-        {% if txn and txn.receipt %}
-        <div class="mb-3 p-3" style="background:#f8fafc;border-radius:8px;">
-            <div class="d-flex justify-content-between align-items-center">
-                <div style="font-size:13px;">
-                    <i class="bi bi-paperclip me-1 text-muted"></i>
-                    <a href="{{ url_for('settings.view_receipt', filename=txn.receipt.filename) }}" target="_blank">
-                        {{ txn.receipt.original_filename }}
-                    </a>
-                </div>
-                <div class="d-flex gap-2">
-                    <button type="button" onclick="ocrExistingReceipt('{{ txn.receipt.filename }}')"
-                        class="btn btn-sm" style="font-size:11px;background:#ede9fe;color:#5b21b6;border:none;">
-                        <i class="bi bi-stars me-1"></i>Re-extract
-                    </button>
-                    <form method="POST" action="{{ url_for('settings.delete_receipt', txn_id=txn.id) }}"
-                          onsubmit="return confirm('Delete receipt?')" style="display:inline;">
-                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                        <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
-                    </form>
-                </div>
-            </div>
-        </div>
-        {% elif txn %}
-        <div class="mb-3">
-            <label class="form-label fw-medium" style="font-size:13px;">Receipt</label>
-            <form method="POST" action="{{ url_for('settings.upload_receipt', txn_id=txn.id) }}"
-                  enctype="multipart/form-data" id="receiptUploadForm">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                <div class="input-group input-group-sm">
-                    <input type="file" name="receipt" id="receiptFileEdit"
-                           class="form-control" accept=".png,.jpg,.jpeg,.gif,.pdf,.webp"
-                           style="font-size:12px;" onchange="autoOcrOnUpload(this)">
-                    <button type="submit" class="btn btn-outline-secondary" style="font-size:12px;">Upload</button>
-                </div>
-                <small class="text-muted" style="font-size:11px;">PNG, JPG, WEBP, PDF — max 10MB</small>
-            </form>
-        </div>
-        {% endif %}
-
         <div class="d-flex gap-2">
             <button type="submit" class="btn {% if txn_type=='income' %}btn-success{% else %}btn-danger{% endif %}">
                 Save {{ txn_type | title }}
@@ -149,6 +109,46 @@
             <a href="{{ url_for('transactions.index', tab=txn_type) }}" class="btn btn-outline-secondary">Cancel</a>
         </div>
     </form>
+
+    {# Receipt section — kept OUTSIDE #txnForm to avoid nested-form breakage #}
+    {% if txn and txn.receipt %}
+    <div class="mt-3 p-3" style="background:#f8fafc;border-radius:8px;">
+        <div class="d-flex justify-content-between align-items-center">
+            <div style="font-size:13px;">
+                <i class="bi bi-paperclip me-1 text-muted"></i>
+                <a href="{{ url_for('settings.view_receipt', filename=txn.receipt.filename) }}" target="_blank">
+                    {{ txn.receipt.original_filename }}
+                </a>
+            </div>
+            <div class="d-flex gap-2">
+                <button type="button" onclick="ocrExistingReceipt('{{ txn.receipt.filename }}')"
+                    class="btn btn-sm" style="font-size:11px;background:#ede9fe;color:#5b21b6;border:none;">
+                    <i class="bi bi-stars me-1"></i>Re-extract
+                </button>
+                <form method="POST" action="{{ url_for('settings.delete_receipt', txn_id=txn.id) }}"
+                      onsubmit="return confirm('Delete receipt?')" style="display:inline;">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                    <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    {% elif txn %}
+    <div class="mt-3">
+        <label class="form-label fw-medium" style="font-size:13px;">Receipt</label>
+        <form method="POST" action="{{ url_for('settings.upload_receipt', txn_id=txn.id) }}"
+              enctype="multipart/form-data" id="receiptUploadForm">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <div class="input-group input-group-sm">
+                <input type="file" name="receipt" id="receiptFileEdit"
+                       class="form-control" accept=".png,.jpg,.jpeg,.gif,.pdf,.webp"
+                       style="font-size:12px;" onchange="autoOcrOnUpload(this)">
+                <button type="submit" class="btn btn-outline-secondary" style="font-size:12px;">Upload</button>
+            </div>
+            <small class="text-muted" style="font-size:11px;">PNG, JPG, WEBP, PDF — max 10MB</small>
+        </form>
+    </div>
+    {% endif %}
 </div>
 </div>
 </div>