From 73f5df9647a507b54205ab54f094b066c2ea63fb Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 20 Oct 2025 14:02:55 +0300
Subject: [PATCH 1/6] refactor: replace pending records with new transfer
 records system

---
 .../src/components/DashboardSidebar.vue       |   5 -
 .../dashboard/AdminPendingRecordsCard.vue     |  19 ++--
 .../dashboard/PendingRecordsTable.vue         | 101 ------------------
 .../dashboard/TransferRecordsTable.vue        |  94 ++++++++++++++++
 .../dashboard/UserPendingRecordsCard.vue      |  33 ------
 frontend/kubecloud/src/router/index.ts        |  22 ++--
 frontend/kubecloud/src/utils/adminService.ts  |  26 +++--
 frontend/kubecloud/src/utils/userService.ts   |  51 ---------
 .../src/views/PendingRecordsView.vue          |  95 ----------------
 .../kubecloud/src/views/UserDashboard.vue     |   4 +-
 10 files changed, 131 insertions(+), 319 deletions(-)
 delete mode 100644 frontend/kubecloud/src/components/dashboard/PendingRecordsTable.vue
 create mode 100644 frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
 delete mode 100644 frontend/kubecloud/src/components/dashboard/UserPendingRecordsCard.vue
 delete mode 100644 frontend/kubecloud/src/views/PendingRecordsView.vue

diff --git a/frontend/kubecloud/src/components/DashboardSidebar.vue b/frontend/kubecloud/src/components/DashboardSidebar.vue
index e8032ae38..347457849 100644
--- a/frontend/kubecloud/src/components/DashboardSidebar.vue
+++ b/frontend/kubecloud/src/components/DashboardSidebar.vue
@@ -63,11 +63,6 @@ const navigationItems = [
     title: 'Billing History',
     icon: 'mdi-receipt'
   },
-  {
-    key: 'payments',
-    title: 'Payments',
-    icon: 'mdi-clock-outline'
-  },
   {
     key: 'vouchers',
     title: 'Vouchers',
diff --git a/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue b/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue
index 49ae429b7..068839485 100644
--- a/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue
@@ -8,9 +8,8 @@
         </div>
       </div>
     </div>
-    <PendingRecordsTable 
-      :pendingRecords="pendingRecords" 
-      :showUserID="true"
+    <TransferRecordsTable
+      :transferRecords="transferRecords"
       :loading="loading"
     />
   </div>
@@ -18,25 +17,25 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { type PendingRecord } from '../../utils/userService'
-import PendingRecordsTable from './PendingRecordsTable.vue'
+import { type TransferRecord } from '../../utils/adminService'
+import TransferRecordsTable from './TransferRecordsTable.vue'
 import { useNotificationStore } from '../../stores/notifications'
 import { adminService } from '../../utils/adminService'
 
-const pendingRecords = ref<PendingRecord[]>([])
+const transferRecords = ref<TransferRecord[]>([])
 const notificationStore = useNotificationStore()
 
 onMounted(async () => {
-  await loadPendingRecords()
+  await loadTransferRecords()
 })
 
 const loading = ref(false)
 
-async function loadPendingRecords() {
+async function loadTransferRecords() {
   loading.value = true
   try {
-    const response = await adminService.listPendingRecords()
-    pendingRecords.value = response || []
+    const response = await adminService.listTransferRecords()
+    transferRecords.value = response || []
   } catch (error) {
     console.error('Failed to load payments:', error)
     notificationStore.error('Error', 'Failed to load payments')
diff --git a/frontend/kubecloud/src/components/dashboard/PendingRecordsTable.vue b/frontend/kubecloud/src/components/dashboard/PendingRecordsTable.vue
deleted file mode 100644
index b112ef3c4..000000000
--- a/frontend/kubecloud/src/components/dashboard/PendingRecordsTable.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="records-table-container">
-    <v-data-table :loading="loading" :headers="headers" :items="pendingRecords" class="records-table"
-      :items-per-page="5" :no-data-text="'No payments found'" density="comfortable">
-      <template v-slot:[`item.user_id`]="{ item }">
-        <span>{{ item.user_id }}</span>
-      </template>
-      <template  v-slot:[`item.username`]="{ item }">
-        <span>{{ item.username }}</span>
-      </template>
-      <template v-slot:[`item.created_at`]="{ item }">
-        <span>{{ formatDate(item.created_at) }}</span>
-      </template>
-      <template v-slot:[`item.usd_amount`]="{ item }">
-        <span>${{ item.usd_amount.toFixed(2) }}</span>
-      </template>
-      <template v-slot:[`item.transferred_usd_amount`]="{ item }">
-        <span>${{ item.transferred_usd_amount.toFixed(2) }}</span>
-      </template>
-            <template v-slot:[`item.transfer_mode`]="{ item }">
-        <span>{{ item.transfer_mode.replace('_', ' ') }}</span>
-      </template>
-      <template v-slot:[`item.status`]="{ item }">
-        <v-chip :color="getStatusColor(item)" size="small" class="status-chip">
-          {{ getStatus(item) }}
-        </v-chip>
-      </template>
-
-    </v-data-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type PendingRecord } from '../../utils/userService'
-import { formatDate } from '../../utils/uiUtils'
-
-const props = defineProps({
-  pendingRecords: {
-    type: Array as () => PendingRecord[],
-    required: true,
-    default: () => []
-  },
-  showUserID: {
-    type: Boolean,
-    default: false
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const headers = [
-  { title: 'Record Date', key: 'created_at' },
-  { title: 'Requested Amount', key: 'usd_amount' },
-  { title: 'Transferred Amount', key: 'transferred_usd_amount' },
-  { title: 'Transfer Mode', key: 'transfer_mode' },
-  { title: 'Status', key: 'status' },
-]
-
-if (props.showUserID) {
-  headers.unshift({ title: 'User ID', key: 'user_id' },
-  { title: 'Username', key: 'username' })
-}
-
-
-
-function getStatus(item: PendingRecord): string {
-  if (item.transferred_usd_amount === item.usd_amount) {
-    return 'Completed'
-  }
-  return 'Pending'
-}
-
-function getStatusColor(item: PendingRecord): string {
-  const status = getStatus(item)
-  if (status === 'Completed') {
-    return 'success'
-  }
-  return 'gray'
-}
-</script>
-
-<style scoped>
-.records-table-container {
-  margin-bottom: var(--space-6);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-}
-
-.records-table {
-  background: transparent;
-  width: 100%;
-}
-
-.status-chip {
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-medium);
-}
-</style>
diff --git a/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue b/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
new file mode 100644
index 000000000..3c55a7b15
--- /dev/null
+++ b/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="records-table-container">
+    <v-data-table :loading="loading" :headers="headers" :items="transferRecords" class="records-table"
+      :items-per-page="5" :no-data-text="'No records found'" density="comfortable">
+      <template v-slot:[`item.id`]="{ item }">
+        <span>{{ item.id }}</span>
+      </template>
+      <template v-slot:[`item.user_id`]="{ item }">
+        <span>{{ item.user_id }}</span>
+      </template>
+      <template  v-slot:[`item.username`]="{ item }">
+        <span>{{ item.username }}</span>
+      </template>
+      <template v-slot:[`item.operation`]="{ item }">
+        <span>{{ item.operation }}</span>
+      </template>
+      <template v-slot:[`item.state`]="{ item }">
+        <v-chip :color="getStatusColor(item)" size="small" class="status-chip">
+          {{ item.state }}
+        </v-chip>
+      </template>
+      <template v-slot:[`item.tft_amount`]="{ item }">
+        <span>{{ item.tft_amount.toFixed(2) }}</span>
+      </template>
+      <template v-slot:[`item.created_at`]="{ item }">
+        <span>{{ formatDate(item.created_at) }}</span>
+      </template>
+      <template v-slot:[`item.updated_at`]="{ item }">
+        <span>{{ formatDate(item.updated_at) }}</span>
+      </template>
+
+
+    </v-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type RecordState, type TransferRecord } from '../../utils/adminService'
+import { formatDate } from '../../utils/uiUtils'
+
+const props = defineProps({
+  transferRecords: {
+    type: Array as () => TransferRecord[],
+    required: true,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const headers = [
+  { title: 'ID', key: 'id' },
+  { title: 'User ID', key: 'user_id' },
+  { title: 'Username', key: 'username' },
+  { title: 'Record Date', key: 'created_at' },
+  { title: 'Updated Date', key: 'updated_at' },
+  { title: 'Operation', key: 'operation' },
+  { title: 'Status', key: 'state' },
+  { title: 'TFT Amount', key: 'tft_amount' },
+]
+
+
+
+function getStatusColor(item: TransferRecord): string {
+  if (item.state === 'success') {
+    return 'success'
+  }
+  if (item.state === 'failed') {
+    return 'error'
+  }
+  return 'gray'
+}
+</script>
+
+<style scoped>
+.records-table-container {
+  margin-bottom: var(--space-6);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.records-table {
+  background: transparent;
+  width: 100%;
+}
+
+.status-chip {
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-medium);
+}
+</style>
diff --git a/frontend/kubecloud/src/components/dashboard/UserPendingRecordsCard.vue b/frontend/kubecloud/src/components/dashboard/UserPendingRecordsCard.vue
deleted file mode 100644
index 158b0c1fa..000000000
--- a/frontend/kubecloud/src/components/dashboard/UserPendingRecordsCard.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="dashboard-card">
-    <div class="dashboard-card-header">
-      <div class="dashboard-card-title-section">
-        <div class="dashboard-card-title-content">
-          <h3 class="dashboard-card-title">Payments</h3>
-          <p class="dashboard-card-subtitle">View your payment records</p>
-        </div>
-      </div>
-    </div>
-    <PendingRecordsTable :pendingRecords="pendingRecords" :loading="loading" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { userService, type PendingRecord } from '../../utils/userService'
-import PendingRecordsTable from './PendingRecordsTable.vue'
-
-const pendingRecords = ref<PendingRecord[]>([])
-const loading = ref(true)
-onMounted(async () => {
-  try {
-    loading.value = true
-    const response = await userService.listUserPendingRecords()
-    pendingRecords.value = response || []
-    loading.value = false
-  } catch (error) {
-    console.error('Failed to load user payments:', error)
-    loading.value = false
-  }
-})
-</script>
diff --git a/frontend/kubecloud/src/router/index.ts b/frontend/kubecloud/src/router/index.ts
index 756988884..c593345b2 100644
--- a/frontend/kubecloud/src/router/index.ts
+++ b/frontend/kubecloud/src/router/index.ts
@@ -85,11 +85,6 @@ const router = createRouter({
       component: () => import('../views/ForgotPasswordView.vue'),
       meta: { requiresGuest: true }
     },
-    {
-      path: '/pending-requests',
-      name: 'pending-requests',
-      component: () => import('../views/PendingRecordsView.vue')
-    },
     {
       path: '/maintenance',
       name: 'maintenance',
@@ -126,39 +121,36 @@ async function handleMaintenanceCheck(to: RouteLocationNormalizedGeneric, next:
       return false // Continue with normal routing on error
     }
   }
-  
   if (to.path === '/maintenance' && !maintenanceStore.isMaintenanceMode) {
     next('/')
-    return true   
+    return true
   }
-  
   if (maintenanceStore.isMaintenanceMode) {
     // Allow access to maintenance page itself
     if (to.path === '/maintenance') {
       next()
-      return true 
+      return true
     }
     if (maintenanceStore.isRouteAllowed(to.path)) {
       next()
-      return true 
+      return true
     }
     next('/maintenance')
-    return true 
+    return true
   }
-  
-  return false 
+  return false
 }
 
 router.beforeEach(async (to, _from, next) => {
   const userStore = useUserStore()
   const maintenanceStore = useMaintenanceStore()
-  
+
   // Handle maintenance mode checks
   const maintenanceHandled = await handleMaintenanceCheck(to, next)
   if (maintenanceHandled) {
     return
   }
-  
+
   // Check if user is authenticated
   const isAuthenticated = userStore.isLoggedIn
 
diff --git a/frontend/kubecloud/src/utils/adminService.ts b/frontend/kubecloud/src/utils/adminService.ts
index 1e9c30b6f..c67e623fe 100644
--- a/frontend/kubecloud/src/utils/adminService.ts
+++ b/frontend/kubecloud/src/utils/adminService.ts
@@ -1,7 +1,6 @@
 import router from "@/router"
 import { api } from "./api"
 import type { ApiResponse } from "./authService"
-import type { PendingRecord } from "./userService"
 
 // Types for admin requests and responses
 export interface User {
@@ -75,6 +74,21 @@ export interface Invoice {
   created_at: string
 }
 
+export type RecordOperation = 'withdraw' | 'deposit'
+export type RecordState = 'pending' | 'success' | 'failed'
+
+export interface TransferRecord {
+  created_at: string,
+  failure: string,
+  id: number,
+  operation: RecordOperation,
+  state: RecordState,
+  tft_amount: number,
+  updated_at: string,
+  user_id: number,
+  username: string
+}
+
 // Admin service class
 export class AdminService {
   private static instance: AdminService
@@ -151,14 +165,14 @@ export class AdminService {
     return response.data.data.invoices
   }
 
-      // List all pending records (requires admin auth)
-  async listPendingRecords(): Promise<PendingRecord[]> {
-    const response = await api.get<ApiResponse<{ pending_records: PendingRecord[] }>>('/v1/pending-records', {
+  // List all transfer records (requires admin auth)
+  async listTransferRecords(): Promise<TransferRecord[]> {
+    const response = await api.get<ApiResponse<{ transfer_records: TransferRecord[] }>>('/v1/transfer-records', {
       requiresAuth: true,
       showNotifications: true,
-      errorMessage: 'Failed to load payments'
+      errorMessage: 'Failed to load transfer records'
     })
-    return response.data.data.pending_records
+    return response.data.data.transfer_records
   }
 
   // Send a system email to all users (requires admin auth)
diff --git a/frontend/kubecloud/src/utils/userService.ts b/frontend/kubecloud/src/utils/userService.ts
index c8dc42291..54a75ef8e 100644
--- a/frontend/kubecloud/src/utils/userService.ts
+++ b/frontend/kubecloud/src/utils/userService.ts
@@ -119,18 +119,6 @@ export interface TaskResponse {
   created_at: string;
 }
 
-export interface PendingRecord {
-  created_at: string;
-  id: number;
-  tft_amount: number;
-  transferred_tft_amount: number;
-  transferred_usd_amount: number;
-  updated_at: string;
-  usd_amount: number;
-  user_id: number;
-  username: string;
-  transfer_mode: string;
-}
 
 export interface TwinResponse {
   public_key: string;
@@ -226,26 +214,6 @@ export class UserService {
     )
   }
 
-  // Fetch the user's current balance
-  async fetchBalance(): Promise<{balance: number, pending_balance: number}> {
-    try {
-    const response = await api.get<{ data: { balance_usd: number, debt_usd: number, pending_balance_usd: number } }>(
-      '/v1/user/balance',
-      { requiresAuth: true, showNotifications: false }
-    )
-    const { balance_usd, debt_usd, pending_balance_usd } = response.data.data
-    return {balance: (balance_usd || 0) - (debt_usd || 0), pending_balance: pending_balance_usd || 0}
-  }catch(e){
-    if (!(e as ApiError)?.silent) {
-      useNotificationStore().error(
-        'Error',
-        'Failed to fetch balance',
-      )
-    }
-    return {balance: 0, pending_balance: 0}
-  }
-  }
-
   // List all SSH keys for the current user
   async listSshKeys(): Promise<SshKey[]> {
     const response = await api.get<ApiResponse<SshKey[]>>('/v1/user/ssh-keys', {
@@ -283,25 +251,6 @@ export class UserService {
     return api.delete(`/v1/deployments/${deploymentName}/nodes/${nodeName}`, { requiresAuth: true, showNotifications: true })
   }
 
-  // List all pending records
-  async listPendingRecords(): Promise<PendingRecord[]> {
-    const response = await api.get<ApiResponse<PendingRecord[]>>('/v1/user/pending-records', {
-      requiresAuth: true,
-      showNotifications: true,
-      errorMessage: 'Failed to load payments'
-    })
-    return response.data.data
-  }
-
-  async listUserPendingRecords(): Promise<PendingRecord[]> {
-    const response = await api.get<{ data: { pending_records: PendingRecord[] } }>(`/v1/user/pending-records`, {
-      requiresAuth: true,
-      showNotifications: true,
-      errorMessage: 'Failed to load payments'
-    })
-    return response.data.data.pending_records
-  }
-
   // Fetch twin account info
   async getTwinAccount(twinId: number): Promise<TwinResponse> {
     const response = await api.get<ApiResponse<TwinResponse>>(`/v1/twins/${twinId}/account`, {
diff --git a/frontend/kubecloud/src/views/PendingRecordsView.vue b/frontend/kubecloud/src/views/PendingRecordsView.vue
deleted file mode 100644
index da70066e1..000000000
--- a/frontend/kubecloud/src/views/PendingRecordsView.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <v-container fluid class="pa-0">
-      <div class="dashboard-header mb-6">
-        <h1 class="hero-title">Payments</h1>
-                  <p class="section-subtitle">View your payment records</p>
-      </div>
-      <div class="dashboard-content-wrapper">
-        <div class="dashboard-layout">
-          <div class="dashboard-sidebar">
-            <DashboardSidebar :selected="'payments'" @update:selected="handleSidebarSelect" />
-          </div>
-          <div class="dashboard-main">
-            <div class="dashboard-cards">
-              <UserPendingRecordsCard />
-            </div>
-          </div>
-        </div>
-      </div>
-    </v-container>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import DashboardSidebar from '../components/DashboardSidebar.vue'
-import UserPendingRecordsCard from '../components/dashboard/UserPendingRecordsCard.vue'
-
-const selected = ref('overview')
-function handleSidebarSelect(val: string) {
-  selected.value = val
-}
-</script>
-
-<style scoped>
-.dashboard-container {
-  min-height: 100vh;
-  background: var(--color-background);
-}
-
-.dashboard-header {
-  text-align: center;
-  padding: var(--space-8) 0;
-}
-
-.hero-title {
-  font-size: 2.5rem;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-2);
-}
-
-.section-subtitle {
-  font-size: 1.125rem;
-  color: var(--color-text-secondary);
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.dashboard-content-wrapper {
-  padding: 0 var(--space-6);
-}
-
-.dashboard-layout {
-  display: flex;
-  gap: var(--space-6);
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.dashboard-sidebar {
-  flex: 0 0 280px;
-}
-
-.dashboard-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.dashboard-cards {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-@media (max-width: 1024px) {
-  .dashboard-layout {
-    flex-direction: column;
-  }
-
-  .dashboard-sidebar {
-    flex: none;
-  }
-}
-</style>
diff --git a/frontend/kubecloud/src/views/UserDashboard.vue b/frontend/kubecloud/src/views/UserDashboard.vue
index 17b81f4ef..7f0e2a91f 100644
--- a/frontend/kubecloud/src/views/UserDashboard.vue
+++ b/frontend/kubecloud/src/views/UserDashboard.vue
@@ -13,7 +13,6 @@ import DashboardSidebar from '../components/DashboardSidebar.vue'
 import { userService } from '../utils/userService'
 import { useClusterStore } from '../stores/clusters'
 import { useNotificationStore } from '../stores/notifications'
-import UserPendingRecordsCard from '../components/dashboard/UserPendingRecordsCard.vue'
 
 const userStore = useUserStore()
 const userName = computed(() => userStore.user?.username || 'User')
@@ -139,8 +138,7 @@ function handleNavigateToFund() {
               <VouchersCard v-if="selected === 'vouchers'" :vouchers="vouchers" />
               <NodesCard v-if="selected === 'nodes'" />
               <ProfileCard v-if="selected === 'profile'" />
-              <UserPendingRecordsCard v-if="selected === 'payments'"/>
-            </div>
+             </div>
           </div>
         </div>
       </div>

From 28d7192be019aa6689697d056552c46c6bcf4907 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 20 Oct 2025 14:48:15 +0300
Subject: [PATCH 2/6] feat: implement new balance calculation using credit card
 and credited balances

---
 frontend/kubecloud/src/App.vue                 |  3 +++
 frontend/kubecloud/src/stores/user.ts          | 13 ++++++++++---
 frontend/kubecloud/src/views/UserDashboard.vue |  5 +----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/kubecloud/src/App.vue b/frontend/kubecloud/src/App.vue
index 62b1c8a0c..7c38ca721 100644
--- a/frontend/kubecloud/src/App.vue
+++ b/frontend/kubecloud/src/App.vue
@@ -57,6 +57,9 @@ onMounted(async () => {
       return
     }
     userStore.initializeAuth()
+    if(userStore.isLoggedIn){
+      await userStore.loadUser()
+    }
     await notificationStore.loadNotifications()
   } catch (error) {
     console.error('Failed to initialize application:', error)
diff --git a/frontend/kubecloud/src/stores/user.ts b/frontend/kubecloud/src/stores/user.ts
index 9b62b2c3d..08f16af3e 100644
--- a/frontend/kubecloud/src/stores/user.ts
+++ b/frontend/kubecloud/src/stores/user.ts
@@ -18,6 +18,10 @@ export interface User {
   balance_usd?: number
   pending_balance_usd?: number
   balance: number
+  credit_card_balance: number
+  credited_balance: number
+  credit_card_balance_in_usd: number
+  credited_balance_in_usd: number
 }
 
 export interface AuthState {
@@ -26,6 +30,9 @@ export interface AuthState {
   isLoading: boolean
   error: string | null
 }
+function calculateNetBalance(user: User) {
+  return user.credit_card_balance_in_usd + user.credited_balance_in_usd
+}
 
 export const useUserStore = defineStore('user',
   // Store definition
@@ -60,6 +67,8 @@ export const useUserStore = defineStore('user',
     const loadUser = async () => {
       const userRes = await api.get<ApiResponse<{ user: User }>>('/v1/user/', { requiresAuth: true, showNotifications: false })
       user.value = userRes.data.data.user
+      netBalance.value = calculateNetBalance(user.value)
+      return user.value
     }
 
     const login = async (email: string, password: string) => {
@@ -177,9 +186,7 @@ export const useUserStore = defineStore('user',
     }
 
     const updateNetBalance = async () => {
-      const balance = await userService.fetchBalance()
-      netBalance.value = balance.balance
-      pendingBalance.value = balance.pending_balance
+      netBalance.value = calculateNetBalance(await loadUser() )
     }
 
     return {
diff --git a/frontend/kubecloud/src/views/UserDashboard.vue b/frontend/kubecloud/src/views/UserDashboard.vue
index 7f0e2a91f..fdd30263e 100644
--- a/frontend/kubecloud/src/views/UserDashboard.vue
+++ b/frontend/kubecloud/src/views/UserDashboard.vue
@@ -52,10 +52,7 @@ onMounted(async () => {
     }
 
     // Fetch initial data
-    const [invoices] = await Promise.all([
-      userService.listUserInvoices(),
-      userStore.updateNetBalance(),
-    ])
+    const invoices = await userService.listUserInvoices()
 
     // Process invoices
     billingHistory.value = invoices.map(inv => ({

From 4ead7208d3aa0fefbc263de12d7f864a39c68b87 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 20 Oct 2025 16:12:05 +0300
Subject: [PATCH 3/6] refactor: centralize User type definition and update
 balance display in admin table

---
 .../src/components/AdminUsersTable.vue        | 36 ++++++++++++-------
 frontend/kubecloud/src/stores/user.ts         | 26 ++------------
 frontend/kubecloud/src/types/user.ts          | 23 ++++++++++++
 frontend/kubecloud/src/utils/adminService.ts  | 12 +------
 frontend/kubecloud/src/utils/dateUtils.ts     | 20 +++++++----
 5 files changed, 64 insertions(+), 53 deletions(-)
 create mode 100644 frontend/kubecloud/src/types/user.ts

diff --git a/frontend/kubecloud/src/components/AdminUsersTable.vue b/frontend/kubecloud/src/components/AdminUsersTable.vue
index 314d59c47..adc4083a6 100644
--- a/frontend/kubecloud/src/components/AdminUsersTable.vue
+++ b/frontend/kubecloud/src/components/AdminUsersTable.vue
@@ -20,29 +20,40 @@
           { title: 'ID', key: 'id', width: '80px' },
           { title: 'Name', key: 'username' },
           { title: 'Email', key: 'email' },
-          { title: 'Balance', key: 'balance' },
+          { title: 'Balance (USD)', key: 'balance_in_usd' },
+          { title: 'Balance (TFT)', key: 'balance_in_tft' },
+          { title: 'Admin', key: 'admin' },
           { title: 'Actions', key: 'actions', sortable: false, width: '160px' }
         ]"
         :items="users"
         :items-per-page="pageSize"
         :page="currentPage"
+        :sort-by="[{ key: 'id', order: 'asc' }]"
         @update:page="$emit('update:currentPage', $event)"
         class="admin-table"
         density="comfortable"
       >
-        <template #item.balance="{ item }">
-          ${{ item.balance.toFixed(2) }}
+        <template #item.balance_in_usd="{ item }">
+          ${{ +calculateNetBalance(item).toFixed(2) }}
+        </template>
+        <template #item.balance_in_tft="{ item }">
+          {{ +item.balance_in_tft.toFixed(2) }}
+        </template>
+        <template #item.admin="{ item }">
+          <v-checkbox v-if="item.admin" style=" display: flex; align-items: center;" :model-value="item.admin" disabled></v-checkbox>
         </template>
         <template #item.actions="{ item }">
           <div style="display: flex; gap: var(--space-4); align-items: center;">
-            <v-btn size="small" variant="outlined" class="action-btn" :disabled="!item.verified" @click="$emit('creditUser', item)">
-              <v-icon icon="mdi-cash-plus" size="16" class="mr-1"></v-icon>
-              Credit Balance
-            </v-btn>
-            <v-btn size="small" variant="outlined" class="action-btn" @click="$emit('deleteUser', item.id)">
-              <v-icon icon="mdi-delete" size="16" class="mr-1"></v-icon>
-              Remove
-            </v-btn>
+            <v-tooltip location="bottom" text="Credit user">
+              <template #activator="{ props }">
+                <v-btn v-bind="props" size="small" icon="mdi-cash-plus" :disabled="!item.verified" @click="$emit('creditUser', item)"></v-btn>
+              </template>
+            </v-tooltip>
+            <v-tooltip location="bottom" text="Delete user">
+              <template #activator="{ props }">
+                <v-btn v-bind="props" size="small" icon="mdi-delete" @click="$emit('deleteUser', item.id)"></v-btn>
+              </template>
+            </v-tooltip>
           </div>
         </template>
       </v-data-table>
@@ -52,8 +63,9 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import type { User } from '../stores/user'
+import type { User } from '../types/user'
 
+import { calculateNetBalance } from '../utils/dateUtils'
 const props = defineProps({
   users: Array as () => User[],
   searchQuery: String,
diff --git a/frontend/kubecloud/src/stores/user.ts b/frontend/kubecloud/src/stores/user.ts
index 08f16af3e..a101d274c 100644
--- a/frontend/kubecloud/src/stores/user.ts
+++ b/frontend/kubecloud/src/stores/user.ts
@@ -1,28 +1,11 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { authService, type LoginRequest, type RegisterRequest } from '@/utils/authService'
-import { api, createWorkflowStatusChecker } from '@/utils/api'
+import { api } from '@/utils/api'
 import type { ApiResponse, VerifyCodeRequest } from '@/utils/authService'
-import { userService } from '@/utils/userService'
 import { useNotificationStore } from './notifications'
-import { WorkflowStatus } from '@/types/ewf'
-import router from '@/router'
-
-export interface User {
-  id: number
-  username: string
-  email: string
-  admin: boolean
-  verified: boolean
-  updated_at: string
-  balance_usd?: number
-  pending_balance_usd?: number
-  balance: number
-  credit_card_balance: number
-  credited_balance: number
-  credit_card_balance_in_usd: number
-  credited_balance_in_usd: number
-}
+import type { User } from '@/types/user'
+import { calculateNetBalance } from '@/utils/dateUtils'
 
 export interface AuthState {
   user: User | null
@@ -30,9 +13,6 @@ export interface AuthState {
   isLoading: boolean
   error: string | null
 }
-function calculateNetBalance(user: User) {
-  return user.credit_card_balance_in_usd + user.credited_balance_in_usd
-}
 
 export const useUserStore = defineStore('user',
   // Store definition
diff --git a/frontend/kubecloud/src/types/user.ts b/frontend/kubecloud/src/types/user.ts
new file mode 100644
index 000000000..702bddda1
--- /dev/null
+++ b/frontend/kubecloud/src/types/user.ts
@@ -0,0 +1,23 @@
+export interface User {
+  id: number
+  username: string
+  email: string
+  admin: boolean
+  verified: boolean
+  updated_at: string
+  balance_usd?: number
+  pending_balance_usd?: number
+  balance: number
+  credit_card_balance: number
+  credited_balance: number
+  credit_card_balance_in_usd: number
+  credited_balance_in_usd: number
+  stripe_customer_id: string
+  ssh_key: string
+  debt: number
+  debt_in_usd: number
+  balance_in_tft: number
+  sponsored: boolean
+  account_address: string
+  code: number
+}
diff --git a/frontend/kubecloud/src/utils/adminService.ts b/frontend/kubecloud/src/utils/adminService.ts
index c67e623fe..f19cc3baa 100644
--- a/frontend/kubecloud/src/utils/adminService.ts
+++ b/frontend/kubecloud/src/utils/adminService.ts
@@ -1,19 +1,9 @@
 import router from "@/router"
 import { api } from "./api"
 import type { ApiResponse } from "./authService"
+import type { User } from "@/types/user"
 
 // Types for admin requests and responses
-export interface User {
-  id: number
-  username: string
-  email: string
-  admin: boolean
-  verified: boolean
-  balance: number
-  created_at: string
-  updated_at: string
-}
-
 export interface Voucher {
   id: number
   voucher: string
diff --git a/frontend/kubecloud/src/utils/dateUtils.ts b/frontend/kubecloud/src/utils/dateUtils.ts
index 6b6300125..c38a47143 100644
--- a/frontend/kubecloud/src/utils/dateUtils.ts
+++ b/frontend/kubecloud/src/utils/dateUtils.ts
@@ -1,3 +1,5 @@
+import type { User } from "../types/user"
+
 /**
  * Format a date string to a readable format
  * @param dateStr - ISO date string
@@ -6,9 +8,9 @@
 export function formatDate(dateStr: string): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
-  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { 
-    hour: '2-digit', 
-    minute: '2-digit' 
+  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
   })
 }
 
@@ -31,8 +33,12 @@ export function formatDateOnly(dateStr: string): string {
 export function formatTimeOnly(dateStr: string): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
-  return date.toLocaleTimeString([], { 
-    hour: '2-digit', 
-    minute: '2-digit' 
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
   })
-} 
\ No newline at end of file
+}
+
+export function calculateNetBalance(user: User) {
+  return user.credit_card_balance_in_usd + user.credited_balance_in_usd
+}

From f51ab7b81c19cdb330c7c5e78f319f2b0c97b0a9 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 20 Oct 2025 19:33:32 +0300
Subject: [PATCH 4/6] refactor: fix balance fetching logic from userService to
 userStore

---
 frontend/kubecloud/src/stores/user.ts           | 1 +
 frontend/kubecloud/src/views/AdminDashboard.vue | 5 +++--
 frontend/kubecloud/src/views/ReserveView.vue    | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/kubecloud/src/stores/user.ts b/frontend/kubecloud/src/stores/user.ts
index a101d274c..30d18d477 100644
--- a/frontend/kubecloud/src/stores/user.ts
+++ b/frontend/kubecloud/src/stores/user.ts
@@ -167,6 +167,7 @@ export const useUserStore = defineStore('user',
 
     const updateNetBalance = async () => {
       netBalance.value = calculateNetBalance(await loadUser() )
+      return netBalance.value
     }
 
     return {
diff --git a/frontend/kubecloud/src/views/AdminDashboard.vue b/frontend/kubecloud/src/views/AdminDashboard.vue
index f84adf3f1..73b95bf28 100644
--- a/frontend/kubecloud/src/views/AdminDashboard.vue
+++ b/frontend/kubecloud/src/views/AdminDashboard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, defineAsyncComponent, type Ref, watch } from 'vue'
-import { adminService, type User, type Voucher, type GenerateVouchersRequest, type Invoice } from '../utils/adminService'
+import { adminService, type Voucher, type GenerateVouchersRequest, type Invoice } from '../utils/adminService'
 import { statsService, type SystemStats} from '../utils/statsService'
 import AdminUsersTable from '../components/AdminUsersTable.vue'
 import AdminStatsCards from '../components/AdminStatsCards.vue'
@@ -11,6 +11,7 @@ import AdminSystemSection from '../components/AdminSystemCard.vue'
 import AdminInvoicesTable from '../components/AdminInvoicesTable.vue'
 import AdminPendingRecordsCard from '../components/dashboard/AdminPendingRecordsCard.vue'
 import AdminEmailsCard from '../components/dashboard/AdminEmailsCard.vue'
+import type { User } from '../types/user'
 
 const AdminSidebar = defineAsyncComponent(() => import('../components/AdminSidebar.vue'))
 const selected = ref('overview')
@@ -37,7 +38,7 @@ const currentPage = ref(1)
 const pageSize = 5
 const filteredUsers = computed(() => {
   if (!searchQuery.value) return users.value
-  return users.value.filter(u =>
+  return users.value.filter((u: User) =>
     u.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
     u.email.toLowerCase().includes(searchQuery.value.toLowerCase())
   )
diff --git a/frontend/kubecloud/src/views/ReserveView.vue b/frontend/kubecloud/src/views/ReserveView.vue
index 0caf2ecfb..aed3bc808 100644
--- a/frontend/kubecloud/src/views/ReserveView.vue
+++ b/frontend/kubecloud/src/views/ReserveView.vue
@@ -247,7 +247,7 @@ const reserveNode = async (node: NormalizedNode) => {
   reservingNodeIds.value.push(node.nodeId)
   try {
     // Fetch user balance
-    const { balance } = await userService.fetchBalance()
+    const balance = await userStore.updateNetBalance()
     // Calculate daily price (assuming monthly price divided by 30)
     const basePrice = Number(node.discount_price ?? node.price_usd ?? 0)
     const extraFee = Number(node.extraFee ?? 0) / 1000

From 5c2e911e268c6f2069127c4678d2e7a6733194c3 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 20 Oct 2025 19:35:55 +0300
Subject: [PATCH 5/6] refactor: remove pending balance feature from dashboard
 components and user store

---
 frontend/kubecloud/src/components/dashboard/OverviewCard.vue | 3 ---
 frontend/kubecloud/src/components/dashboard/PaymentCard.vue  | 4 ----
 frontend/kubecloud/src/components/dashboard/ProfileCard.vue  | 2 +-
 frontend/kubecloud/src/stores/user.ts                        | 3 ---
 4 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/frontend/kubecloud/src/components/dashboard/OverviewCard.vue b/frontend/kubecloud/src/components/dashboard/OverviewCard.vue
index b94447d20..0126eaf21 100644
--- a/frontend/kubecloud/src/components/dashboard/OverviewCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/OverviewCard.vue
@@ -65,11 +65,9 @@ const props = defineProps<Props>()
 const router = useRouter()
 const userStore = useUserStore()
 const netBalance = ref(userStore.netBalance)
-const pendingBalance = ref(userStore.pendingBalance)
 
 watchEffect(() => {
   netBalance.value = userStore.netBalance
-  pendingBalance.value = userStore.pendingBalance
 })
 
 // Computed data for stats
@@ -83,7 +81,6 @@ const statsData = computed(() => {
     {
       icon: 'mdi-currency-usd',
       value: `$${netBalance.value.toFixed(2)}`,
-      subvalue: pendingBalance.value > 0 ? `+$${pendingBalance.value.toFixed(2)} pending` : '',
       label: 'Balance'
     },
     {
diff --git a/frontend/kubecloud/src/components/dashboard/PaymentCard.vue b/frontend/kubecloud/src/components/dashboard/PaymentCard.vue
index 6863ee8fc..97cb270f6 100644
--- a/frontend/kubecloud/src/components/dashboard/PaymentCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/PaymentCard.vue
@@ -10,10 +10,6 @@
         <span>Current Balance:</span>
         <span class="balance-value">${{ userStore.netBalance.toFixed(2) }}</span>
       </div>
-      <div class="balance-row" v-if="userStore.pendingBalance > 0">
-        <span class="pending-balance-text">Pending Balance:</span>
-        <span class="pending-balance-value">${{ userStore.pendingBalance.toFixed(2) }}</span>
-      </div>
       </div>
       <div class="amount-row">
         <span>Amount:</span>
diff --git a/frontend/kubecloud/src/components/dashboard/ProfileCard.vue b/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
index 8e9b21f1e..9a5e37ac1 100644
--- a/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/ProfileCard.vue
@@ -19,7 +19,7 @@
         <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="`$${userStore.netBalance.toFixed(2)}`" 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>
diff --git a/frontend/kubecloud/src/stores/user.ts b/frontend/kubecloud/src/stores/user.ts
index 30d18d477..dd1b5aa5e 100644
--- a/frontend/kubecloud/src/stores/user.ts
+++ b/frontend/kubecloud/src/stores/user.ts
@@ -23,7 +23,6 @@ export const useUserStore = defineStore('user',
     const isLoading = ref(false)
     const error = ref<string | null>(null)
     const netBalance = ref(0)
-    const pendingBalance = ref(0)
     const balanceInterval = ref<ReturnType<typeof setInterval> | null>(null)
 
     // Computed properties
@@ -177,8 +176,6 @@ export const useUserStore = defineStore('user',
       isLoading,
       error,
       netBalance,
-      pendingBalance,
-
       // Computed
       isAdmin,
       isLoggedIn,

From 31ffce90944ee3aba1ebe23f25336bbc4a6da72e Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Tue, 21 Oct 2025 10:46:03 +0300
Subject: [PATCH 6/6] feat: rename payments to transfers

---
 frontend/kubecloud/src/components/AdminSidebar.vue   | 10 +++++-----
 ...gRecordsCard.vue => AdminTransferRecordsCard.vue} |  8 ++++----
 .../components/dashboard/TransferRecordsTable.vue    | 12 ++++++------
 frontend/kubecloud/src/utils/adminService.ts         |  1 +
 frontend/kubecloud/src/views/AdminDashboard.vue      |  4 ++--
 5 files changed, 18 insertions(+), 17 deletions(-)
 rename frontend/kubecloud/src/components/dashboard/{AdminPendingRecordsCard.vue => AdminTransferRecordsCard.vue} (82%)

diff --git a/frontend/kubecloud/src/components/AdminSidebar.vue b/frontend/kubecloud/src/components/AdminSidebar.vue
index 37e2e1c00..dee5f3e8e 100644
--- a/frontend/kubecloud/src/components/AdminSidebar.vue
+++ b/frontend/kubecloud/src/components/AdminSidebar.vue
@@ -35,7 +35,7 @@ const adminNavItems = [
   { key: 'vouchers', title: 'Vouchers', icon: 'mdi-ticket-percent' },
   { key: 'system', title: 'System', icon: 'mdi-cog' },
   { key: 'invoices', title: 'Invoices', icon: 'mdi-file-document-outline' },
-          { key: 'payments', title: 'Payments', icon: 'mdi-clock-outline' },
+  { key: 'transfers', title: 'Transfers', icon: 'mdi-swap-horizontal' },
   { key: 'emails', title: 'Emails', icon: 'mdi-email-outline' },
 ]
 
@@ -140,18 +140,18 @@ const adminNavItems = [
   .admin-sidebar-card {
     padding: 1rem;
   }
-  
+
   .sidebar-header {
     margin-bottom: 1rem;
     padding-bottom: 0.75rem;
   }
-  
+
   .sidebar-title {
     font-size: var(--font-size-base, 1rem);
   }
-  
+
   .sidebar-subtitle {
     font-size: var(--font-size-xs, 0.75rem);
   }
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue b/frontend/kubecloud/src/components/dashboard/AdminTransferRecordsCard.vue
similarity index 82%
rename from frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue
rename to frontend/kubecloud/src/components/dashboard/AdminTransferRecordsCard.vue
index 068839485..213f5bc66 100644
--- a/frontend/kubecloud/src/components/dashboard/AdminPendingRecordsCard.vue
+++ b/frontend/kubecloud/src/components/dashboard/AdminTransferRecordsCard.vue
@@ -3,8 +3,8 @@
     <div class="dashboard-card-header">
       <div class="dashboard-card-title-section">
         <div class="dashboard-card-title-content">
-          <h3 class="dashboard-card-title">Payments</h3>
-          <p class="dashboard-card-subtitle">View user payment records</p>
+          <h3 class="dashboard-card-title">Transactions</h3>
+          <p class="dashboard-card-subtitle">View transactions records</p>
         </div>
       </div>
     </div>
@@ -37,8 +37,8 @@ async function loadTransferRecords() {
     const response = await adminService.listTransferRecords()
     transferRecords.value = response || []
   } catch (error) {
-    console.error('Failed to load payments:', error)
-    notificationStore.error('Error', 'Failed to load payments')
+    console.error('Failed to load transfer records:', error)
+    notificationStore.error('Error', 'Failed to load transfer records')
   } finally {
     loading.value = false
   }
diff --git a/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue b/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
index 3c55a7b15..0b158e16e 100644
--- a/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
+++ b/frontend/kubecloud/src/components/dashboard/TransferRecordsTable.vue
@@ -12,15 +12,15 @@
         <span>{{ item.username }}</span>
       </template>
       <template v-slot:[`item.operation`]="{ item }">
-        <span>{{ item.operation }}</span>
+        <span>{{ capitalize(item.operation) }}</span>
       </template>
       <template v-slot:[`item.state`]="{ item }">
         <v-chip :color="getStatusColor(item)" size="small" class="status-chip">
-          {{ item.state }}
+          {{ capitalize(item.state) }}
         </v-chip>
       </template>
-      <template v-slot:[`item.tft_amount`]="{ item }">
-        <span>{{ item.tft_amount.toFixed(2) }}</span>
+      <template v-slot:[`item.tft_amount_in_whole_unit`]="{ item }">
+        <span>{{ +item.tft_amount_in_whole_unit.toFixed(2) }}</span>
       </template>
       <template v-slot:[`item.created_at`]="{ item }">
         <span>{{ formatDate(item.created_at) }}</span>
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { type RecordState, type TransferRecord } from '../../utils/adminService'
 import { formatDate } from '../../utils/uiUtils'
-
+import { capitalize } from 'vue'
 const props = defineProps({
   transferRecords: {
     type: Array as () => TransferRecord[],
@@ -58,7 +58,7 @@ const headers = [
   { title: 'Updated Date', key: 'updated_at' },
   { title: 'Operation', key: 'operation' },
   { title: 'Status', key: 'state' },
-  { title: 'TFT Amount', key: 'tft_amount' },
+  { title: 'TFT Amount', key: 'tft_amount_in_whole_unit' },
 ]
 
 
diff --git a/frontend/kubecloud/src/utils/adminService.ts b/frontend/kubecloud/src/utils/adminService.ts
index f19cc3baa..cb205c7a1 100644
--- a/frontend/kubecloud/src/utils/adminService.ts
+++ b/frontend/kubecloud/src/utils/adminService.ts
@@ -74,6 +74,7 @@ export interface TransferRecord {
   operation: RecordOperation,
   state: RecordState,
   tft_amount: number,
+  tft_amount_in_whole_unit: number,
   updated_at: string,
   user_id: number,
   username: string
diff --git a/frontend/kubecloud/src/views/AdminDashboard.vue b/frontend/kubecloud/src/views/AdminDashboard.vue
index 73b95bf28..377e09003 100644
--- a/frontend/kubecloud/src/views/AdminDashboard.vue
+++ b/frontend/kubecloud/src/views/AdminDashboard.vue
@@ -9,7 +9,7 @@ import AdminVouchersSection from '../components/AdminVouchersTable.vue'
 import AdminClustersSection from '../components/AdminClustersSection.vue'
 import AdminSystemSection from '../components/AdminSystemCard.vue'
 import AdminInvoicesTable from '../components/AdminInvoicesTable.vue'
-import AdminPendingRecordsCard from '../components/dashboard/AdminPendingRecordsCard.vue'
+import AdminPendingRecordsCard from '../components/dashboard/AdminTransferRecordsCard.vue'
 import AdminEmailsCard from '../components/dashboard/AdminEmailsCard.vue'
 import type { User } from '../types/user'
 
@@ -164,7 +164,7 @@ async function loadStats() {
             @generateVouchers="generateVouchers"
           />
           <AdminInvoicesTable v-else-if="selected === 'invoices'" :invoices="invoices" />
-          <AdminPendingRecordsCard v-else-if="selected === 'payments'" />
+          <AdminPendingRecordsCard v-else-if="selected === 'transfers'" />
           <AdminEmailsCard v-else-if="selected === 'emails'" />
           <v-dialog v-model="creditDialog" max-width="600" persistent>
             <v-card class="pa-4" style="background: rgba(16,24,39,0.98); border-radius: 18px;">