From 123367c7bf692ac18258f38988f9a2605d880d96 Mon Sep 17 00:00:00 2001
From: AJ <ajisaacs27@gmail.com>
Date: Sun, 12 Oct 2025 13:39:43 -0400
Subject: [PATCH] Convert duplicate warnings to blocking modal dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed duplicate detection from informational alert to a modal dialog
that requires user decision before proceeding with upload.

Upload Flow Changes:
1. Initial upload detects duplicates and uploads temporarily
2. If duplicates found:
   - Deletes the uploaded file
   - Stores warnings and filename in TempData
   - Redirects to show modal
3. Modal blocks with two options:
   - Cancel: Don't upload (returns to page)
   - Upload Anyway: Re-upload with confirmation flag

Modal Features:
- Non-dismissible (static backdrop, no keyboard close)
- Yellow warning header
- Table showing all potential duplicates with:
  - Receipt ID and filename
  - Upload timestamp
  - Reason for match (hash/name+size)
  - Transaction mapping status
  - View button to compare
- Clear explanation of options
- Prompts user to re-select file for confirmed upload

Benefits:
- Prevents accidental duplicate uploads
- Forces user acknowledgment
- Provides context for decision-making
- Links to view existing receipts for comparison
- Better UX than passive alert banner

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 MoneyMap/Pages/Receipts.cshtml    | 114 ++++++++++++++++++++++--------
 MoneyMap/Pages/Receipts.cshtml.cs |  66 +++++++++++++----
 2 files changed, 136 insertions(+), 44 deletions(-)

diff --git a/MoneyMap/Pages/Receipts.cshtml b/MoneyMap/Pages/Receipts.cshtml
index 2a84a16..ab2b48c 100644
--- a/MoneyMap/Pages/Receipts.cshtml
+++ b/MoneyMap/Pages/Receipts.cshtml
@@ -18,37 +18,93 @@
     </div>
 }
 
-<!-- Duplicate Warnings -->
-@if (Model.DuplicateWarnings.Any())
+<!-- Duplicate Warning Modal -->
+@if (Model.ShowDuplicateModal && Model.DuplicateWarnings.Any())
 {
-    <div class="alert alert-warning alert-dismissible fade show" role="alert">
-        <h5 class="alert-heading">⚠️ Potential Duplicates Detected</h5>
-        <p>The following receipt(s) may be duplicates of the one you just uploaded:</p>
-        <ul class="mb-0">
-            @foreach (var warning in Model.DuplicateWarnings)
-            {
-                <li>
-                    <strong>Receipt #@warning.ReceiptId</strong> - @warning.FileName
-                    <br />
-                    <small class="text-muted">
-                        Uploaded: @warning.UploadedAtUtc.ToLocalTime().ToString("yyyy-MM-dd HH:mm") |
-                        Reason: @warning.Reason
-                        @if (warning.TransactionId.HasValue)
-                        {
-                            <span> | Mapped to: @warning.TransactionName (Transaction #@warning.TransactionId)</span>
-                        }
-                        else
-                        {
-                            <span> | Status: Unmapped</span>
-                        }
-                    </small>
-                    <br />
-                    <a asp-page="/ViewReceipt" asp-route-id="@warning.ReceiptId" class="btn btn-sm btn-outline-primary mt-1">View Receipt #@warning.ReceiptId</a>
-                </li>
-            }
-        </ul>
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <div class="modal fade show" id="duplicateWarningModal" tabindex="-1" aria-labelledby="duplicateWarningModalLabel" style="display: block; background-color: rgba(0,0,0,0.5);" data-bs-backdrop="static" data-bs-keyboard="false">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header bg-warning">
+                    <h5 class="modal-title" id="duplicateWarningModalLabel">⚠️ Potential Duplicates Detected</h5>
+                </div>
+                <div class="modal-body">
+                    <p class="fw-bold">The file "@Model.PendingUploadFileName" may be a duplicate of existing receipt(s):</p>
+                    <div class="table-responsive">
+                        <table class="table table-sm table-bordered">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Receipt</th>
+                                    <th>Uploaded</th>
+                                    <th>Reason</th>
+                                    <th>Transaction</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @foreach (var warning in Model.DuplicateWarnings)
+                                {
+                                    <tr>
+                                        <td>
+                                            <strong>#@warning.ReceiptId</strong><br />
+                                            <small>@warning.FileName</small>
+                                        </td>
+                                        <td class="small">@warning.UploadedAtUtc.ToLocalTime().ToString("yyyy-MM-dd HH:mm")</td>
+                                        <td class="small">@warning.Reason</td>
+                                        <td class="small">
+                                            @if (warning.TransactionId.HasValue)
+                                            {
+                                                <div><strong>@warning.TransactionName</strong></div>
+                                                <div class="text-muted">Transaction #@warning.TransactionId</div>
+                                            }
+                                            else
+                                            {
+                                                <span class="badge bg-warning text-dark">Unmapped</span>
+                                            }
+                                        </td>
+                                        <td>
+                                            <a asp-page="/ViewReceipt" asp-route-id="@warning.ReceiptId" class="btn btn-sm btn-outline-primary" target="_blank">
+                                                View
+                                            </a>
+                                        </td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="alert alert-info mb-0">
+                        <strong>What would you like to do?</strong>
+                        <ul class="mb-0">
+                            <li><strong>Cancel:</strong> Don't upload this receipt</li>
+                            <li><strong>Upload Anyway:</strong> Continue with upload despite potential duplicates</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <form method="get" style="display: inline;">
+                        <button type="submit" class="btn btn-secondary">Cancel</button>
+                    </form>
+                    <form method="post" asp-page-handler="Upload" enctype="multipart/form-data" style="display: inline;">
+                        <input type="file" asp-for="UploadFile" accept=".jpg,.jpeg,.png,.pdf,.gif,.heic" style="display:none;" id="confirmUploadFile" required />
+                        <input type="hidden" asp-for="ConfirmDuplicateUpload" value="true" />
+                        <button type="submit" class="btn btn-warning" onclick="return copyFileInput();">Upload Anyway</button>
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
+    <script>
+        // Auto-show modal on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            var modal = new bootstrap.Modal(document.getElementById('duplicateWarningModal'));
+            modal.show();
+        });
+
+        function copyFileInput() {
+            alert('Please re-select the file to upload.');
+            document.getElementById('confirmUploadFile').click();
+            return false;
+        }
+    </script>
 }
 
 <!-- Upload Section -->
diff --git a/MoneyMap/Pages/Receipts.cshtml.cs b/MoneyMap/Pages/Receipts.cshtml.cs
index 2fe8e6c..1d57308 100644
--- a/MoneyMap/Pages/Receipts.cshtml.cs
+++ b/MoneyMap/Pages/Receipts.cshtml.cs
@@ -26,25 +26,33 @@ namespace MoneyMap.Pages
         [BindProperty]
         public IFormFile? UploadFile { get; set; }
 
+        [BindProperty]
+        public bool ConfirmDuplicateUpload { get; set; }
+
         [TempData]
         public string? Message { get; set; }
 
         [TempData]
         public bool IsSuccess { get; set; }
 
+        [TempData]
+        public string? PendingUploadFileName { get; set; }
+
         [TempData]
         public string? DuplicateWarningsJson { get; set; }
 
         public List<DuplicateWarning> DuplicateWarnings { get; set; } = new();
+        public bool ShowDuplicateModal { get; set; } = false;
 
         public async Task OnGetAsync()
         {
             await LoadReceiptsAsync();
 
-            // Deserialize duplicate warnings if present
+            // Show duplicate modal if warnings present
             if (!string.IsNullOrWhiteSpace(DuplicateWarningsJson))
             {
                 DuplicateWarnings = System.Text.Json.JsonSerializer.Deserialize<List<DuplicateWarning>>(DuplicateWarningsJson) ?? new();
+                ShowDuplicateModal = DuplicateWarnings.Any();
             }
         }
 
@@ -58,29 +66,57 @@ namespace MoneyMap.Pages
                 return Page();
             }
 
-            var result = await _receiptManager.UploadUnmappedReceiptAsync(UploadFile);
-
-            if (result.IsSuccess)
+            // If not confirmed and duplicates exist, show modal
+            if (!ConfirmDuplicateUpload)
             {
-                if (result.DuplicateWarnings.Any())
+                var result = await _receiptManager.UploadUnmappedReceiptAsync(UploadFile);
+
+                if (result.IsSuccess)
                 {
-                    Message = $"Receipt uploaded successfully, but {result.DuplicateWarnings.Count} potential duplicate(s) detected.";
-                    IsSuccess = true;
-                    DuplicateWarningsJson = System.Text.Json.JsonSerializer.Serialize(result.DuplicateWarnings);
+                    if (result.DuplicateWarnings.Any())
+                    {
+                        // Store warnings and redirect to show modal
+                        PendingUploadFileName = UploadFile.FileName;
+                        DuplicateWarningsJson = System.Text.Json.JsonSerializer.Serialize(result.DuplicateWarnings);
+
+                        // Delete the uploaded file since user needs to confirm
+                        await _receiptManager.DeleteReceiptAsync(result.Receipt!.Id);
+
+                        return RedirectToPage();
+                    }
+                    else
+                    {
+                        Message = "Receipt uploaded successfully!";
+                        IsSuccess = true;
+                        return RedirectToPage();
+                    }
                 }
                 else
                 {
-                    Message = "Receipt uploaded successfully!";
-                    IsSuccess = true;
+                    Message = result.ErrorMessage ?? "Failed to upload receipt.";
+                    IsSuccess = false;
+                    await LoadReceiptsAsync();
+                    return Page();
                 }
-                return RedirectToPage();
             }
             else
             {
-                Message = result.ErrorMessage ?? "Failed to upload receipt.";
-                IsSuccess = false;
-                await LoadReceiptsAsync();
-                return Page();
+                // User confirmed, upload anyway
+                var result = await _receiptManager.UploadUnmappedReceiptAsync(UploadFile);
+
+                if (result.IsSuccess)
+                {
+                    Message = "Receipt uploaded successfully!";
+                    IsSuccess = true;
+                    return RedirectToPage();
+                }
+                else
+                {
+                    Message = result.ErrorMessage ?? "Failed to upload receipt.";
+                    IsSuccess = false;
+                    await LoadReceiptsAsync();
+                    return Page();
+                }
             }
         }