WIP My Account.

src/views/AccountManagement/MyAccount.vue

@@ -1,26 +1,59 @@
 <template>
-    <div class="div flex justify-center w-[600px]">
-        
+    <div class="general my-account flex justify-center w-full h-full p-8">
+        <main class="flex main-part flex-col px-6 mt-6 w-[536px]">
+            <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
+                {{ name }}
+            </h1>
+            <div class="general-status-container">
+                <Badge displayText="Admin" :isActivated="is_admin"/>
+                <Badge displayText="Suspended" :isActivated="!is_active"/>
+            </div>
+            <div id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
+                w-full">
+                Total visits <span class="text-[#0099FF]">
+                    {{ visitTime }}
+                </span> times.
+            </div>
+        </main>
     </div>
 </template>
 
 <script>
-import { onMounted, } from 'vue';
+import { onMounted, onBeforeMount, computed, ref } from 'vue';
+import i18next from '@/i18n/i18n.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
+import ModalHeader from './ModalHeader.vue';
+import Badge from '../../components/Badge.vue';
 import LoadingStore from '@/stores/loading.js';
-export default {
-    props: {
 
-    },
-    setup(props) {
+export default {
+    setup() {
         const loadingStore = LoadingStore();
+        const acctMgmtStore = useAcctMgmtStore();
+        const visitTime = ref(0);
+        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+        const {
+            username,
+            name,
+            is_admin,
+            is_active,
+        } = currentViewingUser.value;
 
         onMounted(() => {
             loadingStore.setIsLoading(false);
         });
 
         return {
-
+            i18next,
+            username,
+            name,
+            is_admin,
+            is_active,
+            visitTime,
         };
-  }
+  },
+  components: {
+        Badge,
+    }
 }
 </script>