Add expense locking workflow with bulk lock and unlock capability

- Add "Lock" button for bulk locking reimbursed expenses to "Closed" status
- Add lock modal showing eligible/ineligible expenses with warnings
- Add unlock functionality in edit modal for locked expenses
- Prevent editing, deletion, and attachment changes on locked expenses
- Add lock protection to expenses API (PATCH/PUT/DELETE)
- Add lock protection to attachments API (POST/DELETE)
- Add locked expense banner with unlock button in edit modal
- Style locked fields and hide upload sections when locked

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

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: JavaDogWebDesign

app/assets/css/components/modals.css

@@ -954,3 +954,162 @@ html.dark-mode .confirm-modal-icon-info {
         overscroll-behavior: contain;
     }
 }
+
+/* Lock Modal */
+.lock-modal-content {
+    padding: 1.25rem 1.5rem;
+}
+
+.lock-modal-content > p {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+}
+
+.lock-expense-list {
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+}
+
+.lock-expense-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    gap: 1rem;
+}
+
+.lock-expense-item:last-child {
+    border-bottom: none;
+}
+
+.lock-expense-item.not-eligible {
+    opacity: 0.5;
+    background: var(--bg-secondary);
+}
+
+.lock-expense-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.lock-expense-info .provider {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+}
+
+.lock-expense-info .date {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+}
+
+.lock-expense-amount {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-primary);
+}
+
+.lock-expense-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.lock-expense-status .eligible {
+    color: var(--primary-green);
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.lock-expense-status .not-eligible-text {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-style: italic;
+}
+
+.lock-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+    border-radius: 6px;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    color: var(--warning-amber);
+    font-size: 0.85rem;
+}
+
+.lock-warning svg {
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.lock-summary {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+}
+
+.lock-summary p {
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Locked Expense Banner in Edit Modal */
+.locked-expense-banner {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+}
+
+.locked-banner-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.locked-banner-content svg {
+    color: var(--danger-red);
+    flex-shrink: 0;
+}
+
+.locked-banner-content span {
+    flex: 1;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+.locked-banner-content .unlock-btn {
+    flex-shrink: 0;
+}
+
+/* Locked field styling */
+.locked-field {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+@media (max-width: 480px) {
+    .locked-banner-content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .locked-banner-content .unlock-btn {
+        width: 100%;
+    }
+}

app/assets/js/main.js

@@ -10,7 +10,8 @@ import {
     editExpense,
     deleteExpense,
     viewExpense,
-    viewExpenseDetails
+    viewExpenseDetails,
+    unlockExpense
 } from './services/expenses.js';
 import { loadProviders, deleteProvider } from './services/providers.js';
 import { loadFamilyMembers, deleteFamilyMember } from './services/familyMembers.js';
@@ -34,6 +35,7 @@ window.editExpense = editExpense;
 window.deleteExpense = deleteExpense;
 window.viewExpense = viewExpense;
 window.viewExpenseDetails = viewExpenseDetails;
+window.unlockExpense = unlockExpense;
 window.deleteProvider = deleteProvider;
 window.deleteFamilyMember = deleteFamilyMember;
 window.openPlanYearModal = openPlanYearModal;

app/assets/js/services/expenses.js

@@ -152,6 +152,139 @@ function setupReimbursementLogic() {
     });
 }
 
+// Handle locked expense state in edit modal
+function handleLockedExpenseState(modal, isLocked, expense) {
+    const form = modal.querySelector('#expenseForm');
+    const formInputs = form.querySelectorAll('input, select, textarea');
+    const submitBtn = form.querySelector('button[type="submit"]');
+    const modalFooter = modal.querySelector('.modal-footer');
+
+    // Remove any existing unlock banner
+    const existingBanner = modal.querySelector('.locked-expense-banner');
+    if (existingBanner) {
+        existingBanner.remove();
+    }
+
+    // Get receipt/proof delete buttons and file upload sections
+    const receiptDeleteBtns = modal.querySelectorAll('.existing-receipt-delete, .receipt-delete-btn');
+    // Get the parent form-group of file drop zones (contains label + drop zone)
+    const receiptDropZone = modal.querySelector('#receiptDropZone');
+    const proofDropZone = modal.querySelector('#proofDropZone');
+    const receiptUploadSection = receiptDropZone ? receiptDropZone.closest('.form-group') : null;
+    const proofUploadSection = proofDropZone ? proofDropZone.closest('.form-group') : null;
+
+    if (isLocked) {
+        // Disable all form inputs
+        formInputs.forEach(input => {
+            input.disabled = true;
+            input.classList.add('locked-field');
+        });
+
+        // Hide submit button
+        if (submitBtn) {
+            submitBtn.style.display = 'none';
+        }
+
+        // Hide receipt delete buttons
+        receiptDeleteBtns.forEach(btn => {
+            btn.style.display = 'none';
+        });
+
+        // Hide entire file upload sections (including labels)
+        if (receiptUploadSection) {
+            receiptUploadSection.style.display = 'none';
+        }
+        if (proofUploadSection) {
+            proofUploadSection.style.display = 'none';
+        }
+
+        // Add unlock banner at the top of modal content
+        const modalBody = modal.querySelector('.modal-body') || form.parentElement;
+        const banner = document.createElement('div');
+        banner.className = 'locked-expense-banner';
+        banner.innerHTML = `
+            <div class="locked-banner-content">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                    <path d="M7 11V7a5 5 0 0110 0v4"/>
+                </svg>
+                <span>This expense is locked and cannot be edited.</span>
+                <button type="button" class="btn btn-small btn-primary unlock-btn" onclick="unlockExpense(${expense.id})">Unlock to Edit</button>
+            </div>
+        `;
+        modalBody.insertBefore(banner, modalBody.firstChild);
+    } else {
+        // Enable all form inputs
+        formInputs.forEach(input => {
+            input.disabled = false;
+            input.classList.remove('locked-field');
+        });
+
+        // Show submit button
+        if (submitBtn) {
+            submitBtn.style.display = '';
+        }
+
+        // Show receipt delete buttons
+        receiptDeleteBtns.forEach(btn => {
+            btn.style.display = '';
+        });
+
+        // Show file upload sections
+        if (receiptUploadSection) {
+            receiptUploadSection.style.display = '';
+        }
+        if (proofUploadSection) {
+            proofUploadSection.style.display = '';
+        }
+    }
+}
+
+// Unlock an expense
+export async function unlockExpense(expenseId) {
+    const confirmed = await showConfirmModal({
+        title: 'Unlock Expense',
+        message: 'Are you sure you want to unlock this expense? This will change its status from "Closed" to "Reimbursed" and allow editing.',
+        confirmText: 'Unlock',
+        cancelText: 'Cancel',
+        confirmStyle: 'primary',
+        icon: 'warning'
+    });
+
+    if (confirmed) {
+        try {
+            const response = await fetch(`/api/expenses/${expenseId}`, addCSRFToken({
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ unlock: true })
+            }));
+
+            const result = await response.json();
+            if (result.success) {
+                showAlert('Expense unlocked successfully!', 'success');
+                // Reload the edit modal with unlocked expense
+                editExpense(expenseId);
+
+                // Update the row in the table
+                const row = document.querySelector(`tr[data-expense-id="${expenseId}"]`);
+                if (row) {
+                    const statusBadge = row.querySelector('.status-badge');
+                    if (statusBadge) {
+                        statusBadge.className = 'status-badge status-reimbursed';
+                        statusBadge.textContent = 'Reimbursed';
+                    }
+                    row.dataset.status = 'Reimbursed';
+                }
+            } else {
+                showAlert(result.error || 'Error unlocking expense', 'error');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            showAlert('Error unlocking expense', 'error');
+        }
+    }
+}
+
 // Open Add Expense Modal
 export function openAddExpenseModal() {
     const expenseModal = document.getElementById('expenseModal');
@@ -491,6 +624,7 @@ export function editExpense(id) {
         .then(response => response.json())
         .then(async expense => {
             const expenseModal = document.getElementById('expenseModal');
+            const isLocked = expense.status === 'Closed';
 
             document.getElementById('expenseId').value = expense.id;
             document.getElementById('dateOfService').value = expense.date_of_service;
@@ -502,7 +636,10 @@ export function editExpense(id) {
             document.getElementById('familyMember').value = expense.family_member_id || '';
             document.getElementById('claimNumber').value = expense.claim_number || '';
             document.getElementById('description').value = expense.description || '';
-            document.getElementById('modalTitle').textContent = 'Edit Expense';
+            document.getElementById('modalTitle').textContent = isLocked ? 'View Locked Expense' : 'Edit Expense';
+
+            // Handle locked state
+            handleLockedExpenseState(expenseModal, isLocked, expense);
 
             // Setup smart reimbursement logic
             setupReimbursementLogic();

app/routes/attachments.py

@@ -74,7 +74,7 @@ def add_attachments(expense_id):
         # Get expense details and verify ownership
         expense = conn.execute(
             '''SELECT e.date_of_service, e.insurance_year, e.category, e.plan_year_id,
-                      e.amount_outflow, p.name as provider_name
+                      e.amount_outflow, e.status, p.name as provider_name
                FROM expenses e
                LEFT JOIN providers p ON e.provider_id = p.id
                WHERE e.id = ? AND e.user_id = ?''',
@@ -84,6 +84,14 @@ def add_attachments(expense_id):
         if not expense:
             return jsonify({'error': 'Expense not found'}), 404
 
+        # Check if expense is locked (Closed status)
+        if expense['status'] == 'Closed':
+            return jsonify({
+                'error': 'Expense is locked',
+                'message': 'This expense is locked and cannot be modified. Unlock it first to add attachments.',
+                'locked': True
+            }), 403
+
         if 'receipts' not in request.files:
             return jsonify({'error': 'No files provided'}), 400
 
@@ -173,10 +181,11 @@ def delete_attachment(attachment_id):
     paperless_info = None
 
     with db_connection() as conn:
-        # Get attachment file path, Paperless info, and verify ownership
+        # Get attachment file path, Paperless info, expense status, and verify ownership
         attachment = conn.execute('''
             SELECT a.file_path, a.paperless_doc_id, a.paperless_sync_status,
-                   e.date_of_service, e.category, p.name as provider_name
+                   e.date_of_service, e.category, e.status as expense_status,
+                   p.name as provider_name
             FROM attachments a
             INNER JOIN expenses e ON a.expense_id = e.id
             LEFT JOIN providers p ON e.provider_id = p.id
@@ -186,6 +195,14 @@ def delete_attachment(attachment_id):
         if not attachment:
             return jsonify({'error': 'Attachment not found or access denied'}), 404
 
+        # Check if expense is locked (Closed status)
+        if attachment['expense_status'] == 'Closed':
+            return jsonify({
+                'error': 'Expense is locked',
+                'message': 'This expense is locked and its attachments cannot be deleted. Unlock the expense first.',
+                'locked': True
+            }), 403
+
         # Store Paperless info before deletion
         if attachment['paperless_sync_status'] == 'synced':
             paperless_info = {