From d28faa68385612f58b6eb6bd2fd9faeb17560627 Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Sat, 14 Feb 2026 22:00:15 -0500
Subject: [PATCH] Hide past payments in amortization schedule by default

Add toggle button to show/hide past payments. Future payments are shown
by default since past entries are rarely useful for day-to-day viewing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/loans/LoansView.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/loans/LoansView.vue b/frontend/src/views/loans/LoansView.vue
index 418b3c9..a7e70e4 100644
--- a/frontend/src/views/loans/LoansView.vue
+++ b/frontend/src/views/loans/LoansView.vue
@@ -109,10 +109,16 @@
 
       <!-- Amortization Schedule -->
       <v-card v-if="loanDetail" class="mb-4">
-        <v-card-title>Amortization Schedule</v-card-title>
+        <v-card-title class="d-flex align-center">
+          Amortization Schedule
+          <v-spacer />
+          <v-btn size="small" variant="text" @click="showPastPayments = !showPastPayments">
+            {{ showPastPayments ? 'Hide' : 'Show' }} past payments
+          </v-btn>
+        </v-card-title>
         <v-data-table
           :headers="amortHeaders"
-          :items="loanDetail.amortizationSchedule"
+          :items="filteredSchedule"
           density="compact"
           :items-per-page="25"
         >
@@ -267,12 +273,20 @@ const prePopulated = ref(false)
 const snackbar = ref(false)
 const snackbarText = ref('')
 const snackbarColor = ref('success')
+const showPastPayments = ref(false)
 
 const loanAccountTypes = ['AutoLoan', 'PersonalLoan', 'Mortgage', 'LineOfCredit']
 const loanAccounts = computed(() =>
   accountsStore.accounts.filter(a => a.hasLoanDetail || loanAccountTypes.includes(a.type))
 )
 
+const filteredSchedule = computed(() => {
+  if (!loanDetail.value) return []
+  if (showPastPayments.value) return loanDetail.value.amortizationSchedule
+  const today = new Date().toISOString().split('T')[0]
+  return loanDetail.value.amortizationSchedule.filter(e => e.paymentDate.split('T')[0] >= today)
+})
+
 const amortHeaders = [
   { title: '#', key: 'paymentNumber', width: '60px' },
   { title: 'Date', key: 'paymentDate', width: '110px' },