From 3a817e0f3fc3e5522ff99095a815abee0b23c9bf Mon Sep 17 00:00:00 2001
From: AJ Isaacs <ajisaacs27@gmail.com>
Date: Wed, 3 Dec 2025 22:00:55 -0500
Subject: [PATCH] UI: Convert receipt upload panel to modal dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the upload form from a card panel at the top of the page
to a modal triggered by an "Upload Receipt" button in the header.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 MoneyMap/Pages/Receipts.cshtml | 46 +++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/MoneyMap/Pages/Receipts.cshtml b/MoneyMap/Pages/Receipts.cshtml
index 392c893..130f632 100644
--- a/MoneyMap/Pages/Receipts.cshtml
+++ b/MoneyMap/Pages/Receipts.cshtml
@@ -6,7 +6,12 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
     <h2>Receipts</h2>
-    <a asp-page="/Index" class="btn btn-outline-secondary">Back to Dashboard</a>
+    <div>
+        <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#uploadReceiptModal">
+            Upload Receipt
+        </button>
+        <a asp-page="/Index" class="btn btn-outline-secondary">Back to Dashboard</a>
+    </div>
 </div>
 
 <!-- Success/Error Message -->
@@ -107,23 +112,28 @@
     </script>
 }
 
-<!-- Upload Section -->
-<div class="card shadow-sm mb-3">
-    <div class="card-header">
-        <strong>Upload Receipt</strong>
-    </div>
-    <div class="card-body">
-        <form method="post" enctype="multipart/form-data" asp-page-handler="Upload">
-            <div class="row g-3">
-                <div class="col-md-10">
-                    <input type="file" asp-for="UploadFile" class="form-control" accept=".jpg,.jpeg,.png,.pdf,.gif,.heic" />
-                    <div class="form-text">Supported formats: JPG, PNG, PDF, GIF, HEIC (Max 10MB)</div>
-                </div>
-                <div class="col-md-2 d-flex align-items-start">
-                    <button type="submit" class="btn btn-primary w-100">Upload</button>
-                </div>
+<!-- Upload Receipt Modal -->
+<div class="modal fade" id="uploadReceiptModal" tabindex="-1" aria-labelledby="uploadReceiptModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="uploadReceiptModalLabel">Upload Receipt</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-        </form>
+            <form method="post" enctype="multipart/form-data" asp-page-handler="Upload">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="UploadFile" class="form-label">Select Receipt File</label>
+                        <input type="file" asp-for="UploadFile" class="form-control" accept=".jpg,.jpeg,.png,.pdf,.gif,.heic" />
+                        <div class="form-text">Supported formats: JPG, PNG, PDF, GIF, HEIC (Max 10MB)</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Upload</button>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 
@@ -259,7 +269,7 @@
         else
         {
             <div class="p-3 text-center text-muted">
-                No receipts uploaded yet. Use the form above to upload your first receipt.
+                No receipts uploaded yet. Click "Upload Receipt" to add your first receipt.
             </div>
         }
     </div>