aj/MoneyMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Convert receipt upload panel to modal dialog

Browse Source 
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>
This commit is contained in:
AJ Isaacs
2025-12-03 22:00:55 -05:00
parent 36a044da4f
commit 3a817e0f3f
1 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
MoneyMap/Pages/Receipts.cshtml
View File

@@ -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>