From 759c0afe595474810dcc1cebbcb9585eff3066ef Mon Sep 17 00:00:00 2001
From: zaelgohary <zainabelgohary96@gmail.com>
Date: Wed, 12 Nov 2025 08:45:25 +0200
Subject: [PATCH] Update package lock, fix config path, add loading balance
 state, create formatted computed prop

---
 backend/notification-config-example.json      |  2 +-
 frontend/kubecloud/package-lock.json          | 20 ++++++++++++++++
 .../src/components/dashboard/ProfileCard.vue  | 23 ++++++++++++++++---
 frontend/kubecloud/src/stores/user.ts         | 14 ++++++++---
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/backend/notification-config-example.json b/backend/notification-config-example.json
index ec8a3ed1..3fb9e61f 100644
--- a/backend/notification-config-example.json
+++ b/backend/notification-config-example.json
@@ -1,5 +1,5 @@
 {
-  "email_templates_dir_path": "../internal/mailservice/templates/notifications",
+  "email_templates_dir_path": "./internal/mailservice/templates/notifications",
   "template_types": {
     "deployment": {
       "default": {
diff --git a/frontend/kubecloud/package-lock.json b/frontend/kubecloud/package-lock.json
index 8ca5e45f..8b17227f 100644
--- a/frontend/kubecloud/package-lock.json
+++ b/frontend/kubecloud/package-lock.json
@@ -76,6 +76,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1830,6 +1831,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.34.1.tgz",
       "integrity": "sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.34.1",
         "@typescript-eslint/types": "8.34.1",
@@ -2662,6 +2664,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3006,6 +3009,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -3737,6 +3741,7 @@
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -3878,6 +3883,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
       "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3938,6 +3944,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.5.tgz",
       "integrity": "sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -3983,6 +3990,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.0.1.tgz",
       "integrity": "sha512-A5dRYc3eQ5i2rJFBW8J6F69ur/H7YfYg+5SCg6v829FU0BhM4fUTrRVR2d4MdZgzw0ioJEk6otYHEAnoGFqO4A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
@@ -4639,6 +4647,7 @@
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-13.10.1.tgz",
       "integrity": "sha512-9GZLEFvQL5EgfJX2zcBgu1nsPUn98JF/EiJnSfQbdxI6YEQGqpd09lXXxOmYonRBIEFz9JlGCOiPflDzgS1p8w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "entities": "^4.5.0",
         "webidl-conversions": "^7.0.0",
@@ -5005,6 +5014,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
       "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -5954,6 +5964,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
       "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^7.7.2"
       },
@@ -6061,6 +6072,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -6792,6 +6804,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "devOptional": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6948,6 +6961,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7134,6 +7148,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "devOptional": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -7988,6 +8003,7 @@
       "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.1.tgz",
       "integrity": "sha512-Pb7bKhQH8qPMzURmEGq2aIqCJkruFNsyf1NcrrtnjsOIkqJPMcBbiP0oJoO8/uAmyB5W/1JTbbUEsyXdMM0QHQ==",
       "devOptional": true,
+      "peer": true,
       "dependencies": {
         "@vuetify/loader-shared": "^2.1.0",
         "debug": "^4.3.3",
@@ -8021,6 +8037,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "devOptional": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8033,6 +8050,7 @@
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.1.tgz",
       "integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "1.6.1",
         "@vitest/runner": "1.6.1",
@@ -8708,6 +8726,7 @@
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.17.tgz",
       "integrity": "sha512-LbHV3xPN9BeljML+Xctq4lbz2lVHCR6DtbpTf5XIO6gugpXUN49j2QQPcMj086r9+AkJ0FfUT8xjulKKBkkr9g==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.17",
         "@vue/compiler-sfc": "3.5.17",
@@ -8805,6 +8824,7 @@
       "version": "3.8.10",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.8.10.tgz",
       "integrity": "sha512-3BETdCGh3eB1cV5+dA+L5CYi62Q/Jb09H512GImeYzMHd2R+LntO0F5pNCqVB4KoxymQ4Jej3Q0J6AYmf0KD8w==",
+      "peer": true,
       "engines": {
         "node": "^12.20 || >=14.13"
       },
diff --git a/frontend/kubecloud/src/components/dashboard/ProfileCard.vue b/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
index 8e9b21f1..88854f69 100644
--- a/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
@@ -19,7 +19,16 @@
         <div class="profile-row">
           <div class="profile-col">
             <label class="profile-label">Balance</label>
-            <v-text-field :model-value="`$${userStore.netBalance.toFixed(2)}${userStore.pendingBalance > 0 ? ` (+$${userStore.pendingBalance.toFixed(2)} pending)` : ''}`" variant="outlined" class="profile-field compact" color="accent" bg-color="transparent" hide-details="auto" disabled density="compact" />
+            <v-text-field
+              :model-value="formattedBalance"
+              variant="outlined"
+              class="profile-field compact"
+              color="accent"
+              bg-color="transparent"
+              hide-details="auto"
+              disabled
+              density="compact"
+            />
           </div>
           <div class="profile-col">
             <label class="profile-label">Verified</label>
@@ -85,13 +94,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '../../stores/user'
 import { authService } from '../../utils/authService'
 
-const { user } = storeToRefs(useUserStore())
 const userStore = useUserStore()
+const { user, netBalance, pendingBalance, isBalanceLoading } = storeToRefs(userStore)
+
+const formattedBalance = computed(() => {
+  if (isBalanceLoading.value) return 'Loading...'
+  const balance = netBalance.value || 0
+  const pending = pendingBalance.value || 0
+  const base = `$${balance.toFixed(2)}`
+  return pending > 0 ? `${base} (+$${pending.toFixed(2)} pending)` : base
+})
 
 // Change password form data
 const passwordFormData = ref({
diff --git a/frontend/kubecloud/src/stores/user.ts b/frontend/kubecloud/src/stores/user.ts
index 9b62b2c3..124f6ddb 100644
--- a/frontend/kubecloud/src/stores/user.ts
+++ b/frontend/kubecloud/src/stores/user.ts
@@ -37,6 +37,7 @@ export const useUserStore = defineStore('user',
     const error = ref<string | null>(null)
     const netBalance = ref(0)
     const pendingBalance = ref(0)
+    const isBalanceLoading = ref(true)
     const balanceInterval = ref<ReturnType<typeof setInterval> | null>(null)
 
     // Computed properties
@@ -84,6 +85,7 @@ export const useUserStore = defineStore('user',
       user.value = null
       token.value = null
       error.value = null
+      isBalanceLoading.value = true
       // Clear localStorage
       authService.clearTokens()
       // Clear notifications and related ephemeral state
@@ -177,9 +179,14 @@ export const useUserStore = defineStore('user',
     }
 
     const updateNetBalance = async () => {
-      const balance = await userService.fetchBalance()
-      netBalance.value = balance.balance
-      pendingBalance.value = balance.pending_balance
+      isBalanceLoading.value = true
+      try {
+        const balance = await userService.fetchBalance()
+        netBalance.value = balance.balance
+        pendingBalance.value = balance.pending_balance
+      } finally {
+        isBalanceLoading.value = false
+      }
     }
 
     return {
@@ -190,6 +197,7 @@ export const useUserStore = defineStore('user',
       error,
       netBalance,
       pendingBalance,
+      isBalanceLoading,
 
       // Computed
       isAdmin,