From dc63462c0c7d7f655c4ec37597ad123fedf1774c Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Mon, 30 Mar 2026 23:51:34 -0400
Subject: [PATCH] fix: client detail page reloads when navigating between
 customers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract data loading into loadCustomer() function and watch props.id
for changes. Previously only ran in onMounted — navigating between
clients showed stale data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/ops/src/pages/ClientDetailPage.vue | 34 ++++++++++++++++++-------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/ops/src/pages/ClientDetailPage.vue b/apps/ops/src/pages/ClientDetailPage.vue
index 3a71a82..50a47c8 100644
--- a/apps/ops/src/pages/ClientDetailPage.vue
+++ b/apps/ops/src/pages/ClientDetailPage.vue
@@ -508,7 +508,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import draggable from 'vuedraggable'
 import { listDocs, getDoc, updateDoc } from 'src/api/erp'
 import { authFetch } from 'src/api/auth'
@@ -973,17 +973,29 @@ const ticketCols = [
   { name: 'status', label: '', field: 'status', align: 'center', style: 'width:64px;padding:0 4px' },
 ]
 
-onMounted(async () => {
+async function loadCustomer (id) {
+  loading.value = true
+  customer.value = null
+  locations.value = []
+  subscriptions.value = []
+  equipment.value = []
+  tickets.value = []
+  invoices.value = []
+  payments.value = []
+  comments.value = []
+  contact.value = null
+  modalOpen.value = false
+
   try {
-    const cust = await getDoc('Customer', props.id)
+    const cust = await getDoc('Customer', id)
     // Coerce check fields to boolean for q-toggle
     for (const f of ['is_commercial', 'is_bad_payer', 'exclude_fees', 'ppa_enabled']) {
       cust[f] = !!cust[f]
     }
     customer.value = cust
 
-    const custFilter = { customer: props.id }
-    const partyFilter = { party_type: 'Customer', party: props.id }
+    const custFilter = { customer: id }
+    const partyFilter = { party_type: 'Customer', party: id }
 
     const [locs, subs, equip, tix, invs, pays, ctc, memos] = await Promise.all([
       listDocs('Service Location', {
@@ -1023,7 +1035,7 @@ onMounted(async () => {
         orderBy: 'posting_date desc, name desc',
       }),
       listDocs('Payment Entry', {
-        filters: { party_type: 'Customer', party: props.id },
+        filters: { party_type: 'Customer', party: id },
         fields: ['name', 'posting_date', 'paid_amount', 'mode_of_payment', 'reference_no'],
         limit: 50,
         orderBy: 'posting_date desc',
@@ -1036,7 +1048,7 @@ onMounted(async () => {
       }).catch(() => []),
       // Comments/memos on this customer
       listDocs('Comment', {
-        filters: { reference_doctype: 'Customer', reference_name: props.id, comment_type: 'Comment' },
+        filters: { reference_doctype: 'Customer', reference_name: id, comment_type: 'Comment' },
         fields: ['name', 'content', 'comment_by', 'creation'],
         limit: 50,
         orderBy: 'creation desc',
@@ -1057,7 +1069,7 @@ onMounted(async () => {
 
     // Fetch accurate account balance from server (covers ALL invoices/payments, not just page limit)
     try {
-      const balRes = await authFetch(BASE_URL + '/api/method/customer_balance?customer=' + encodeURIComponent(props.id))
+      const balRes = await authFetch(BASE_URL + '/api/method/customer_balance?customer=' + encodeURIComponent(id))
       if (balRes.ok) {
         const balData = await balRes.json()
         accountBalance.value = balData.message
@@ -1069,7 +1081,11 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
-})
+}
+
+// Reload when navigating between clients
+watch(() => props.id, (newId) => { if (newId) loadCustomer(newId) })
+onMounted(() => loadCustomer(props.id))
 </script>
 
 <style lang="scss" scoped>