From 01528d9ebeb9830611735fd939b5a61ed9edba77 Mon Sep 17 00:00:00 2001
From: Corey Salzano <938411+csalzano@users.noreply.github.com>
Date: Mon, 16 Feb 2026 11:35:49 -0500
Subject: [PATCH] Fix wrong customer names on invoice list page 2+
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the invoices list, when viewing page 2 or later, customer names in the
table could be wrong—opening an invoice showed a different customer than
the one displayed in that row.

Ensure we only apply API responses that match the currently requested page.
This prevents stale or out-of-order responses from overwriting the displayed
data. Also use row id as v-for key for correct Vue reconciliation.
---
 .../components/base/base-table/BaseTable.vue  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index f44e13c6..6881d97b 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -74,7 +74,7 @@
             <tbody v-else>
               <tr
                 v-for="(row, index) in sortedRows"
-                :key="index"
+                :key="row.data?.id ?? index"
                 :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
               >
                 <td
@@ -296,6 +296,12 @@ async function fetchServerData() {
 
   isLoading.value = false
 
+  // Ignore stale responses: only apply if this is still the requested page
+  const currentPage = (pagination.value && pagination.value.currentPage) || 1
+  if (page !== currentPage) {
+    return null
+  }
+
   pagination.value = response.pagination
   return response.data
 }
@@ -316,9 +322,16 @@ function changeSorting(column) {
 }
 
 async function mapDataToRows() {
-  const data = usesLocalData.value
-    ? prepareLocalData()
-    : await fetchServerData()
+  let data
+
+  if (usesLocalData.value) {
+    data = prepareLocalData()
+  } else {
+    data = await fetchServerData()
+    if (data === null) {
+      return
+    }
+  }
 
   rows.value = data.map((rowData) => new Row(rowData, tableColumns))
 }