visit API, is_admin badge API, is_active badge API,

src/views/AccountManagement/ModalAccountInfo.vue

@@ -5,11 +5,13 @@
         <main class="flex main-part flex-col px-6 mt-6">
             <h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium">{{ fullName }}</h1>
             <div class="status-container">
-                <Badge displayText="Admin" isActivated/>
-                <Badge displayText="Suspended" :isActivated="false"/>
+                <Badge displayText="Admin" :isActivated="is_admin"/>
+                <Badge displayText="Suspended" :isActivated="is_active"/>
             </div>
             <div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
-                Account: <span class="text-[#0099FF]">{{ account }}</span>, total visits <span class="text-[#0099FF]">{{ visitTiime }}</span> times.
+                Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
+                    {{ visitTime }}
+                </span> times.
             </div>
         </main>
         <main class="flex main-part flex-col px-6 py-4">
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from './ModalHeader.vue';
@@ -32,25 +35,29 @@ import Badge from '../../components/Badge.vue';
 export default {
     setup(){
         const acctMgmtStore = useAcctMgmtStore();
-        const visitTiime = 23;
-        const { currentViewingUser } = acctMgmtStore;
+        const visitTime = ref(0);
+        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
         const {
-            id,
-            account,
-            fullName,
-            adminRights,
-            accountActivation,
-            detail
-        } = currentViewingUser;
+            username,
+            name,
+            is_admin,
+            is_active,
+            is_sso,
+            has_data,
+        } = currentViewingUser.value;
+
+        onBeforeMount(async() => {
+            await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
+            visitTime.value = currentViewingUser.value.detail.visits;
+        });
+
         return {
             i18next,
-            visitTiime,
-            id,
-            account,
-            fullName,
-            adminRights,
-            accountActivation,
-            detail
+            username,
+            name,
+            is_admin,
+            is_active,
+            visitTime,
         };
     },
     components: {