use limits api to render usage

app/javascript/dashboard/api/enterprise/account.js

@@ -25,10 +25,6 @@ class EnterpriseAccountAPI extends ApiClient {
   }
 
   // V2 Billing APIs
-  creditsBalance() {
-    return axios.get(`${this.url}credits_balance`);
-  }
-
   creditGrants() {
     return axios.get(`${this.url}credit_grants`);
   }

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditsBalance.vue

@@ -20,7 +20,7 @@ const emit = defineEmits(['refresh', 'viewTopup', 'viewHistory']);
 const { t } = useI18n();
 
 const currentBalance = computed(() => {
-  return props.balanceData?.total_credits || 0;
+  return props.balanceData?.current_available || 0;
 });
 
 const monthlyCredits = computed(() => {

app/javascript/dashboard/store/modules/accounts.js

@@ -178,8 +178,19 @@ export const actions = {
   fetchCreditsBalance: async ({ commit }) => {
     commit(types.default.SET_V2_BILLING_UI_FLAG, { isFetchingBalance: true });
     try {
-      const response = await EnterpriseAccountAPI.creditsBalance();
-      commit(types.default.SET_CREDITS_BALANCE, response.data);
+      const response = await EnterpriseAccountAPI.getLimits();
+      const responses = response.data?.limits?.captain?.responses || {};
+
+      // Transform captain.responses to the format expected by the UI
+      const creditsBalance = {
+        total_credits: responses.total_count || 0,
+        monthly_credits: responses.monthly || 0,
+        topup_credits: responses.topup || 0,
+        usage_this_month: responses.consumed || 0,
+        current_available: responses.current_available || 0,
+      };
+
+      commit(types.default.SET_CREDITS_BALANCE, creditsBalance);
     } catch (error) {
       throwErrorMessage(error);
     } finally {