WIP: account info modal prototype with a little bit of pinia state mgmt.

src/views/AccountManagement/ModalAccountInfo.vue

@@ -0,0 +1,56 @@
+<template>
+     <div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
+        shadow-lg flex flex-col">
+        <ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
+        <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">Admin Suspended</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.
+            </div>
+        </main>
+        <main class="flex main-part flex-col px-6 py-4">
+            <ul class="leading-[21px] list-disc list-inside">
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+            </ul>
+        </main>
+    </div>
+</template>
+
+<script>
+import i18next from '@/i18n/i18n.js';
+import ModalHeader from './ModalHeader.vue';
+import useAcctMgmtStore from '@/stores/acctMgmt.js';
+
+export default {
+    setup(){
+        const acctMgmtStore = useAcctMgmtStore();
+        const visitTiime = 23;
+        const { currentViewingUser } = acctMgmtStore;
+        const {
+            id,
+            account,
+            fullName,
+            adminRights,
+            accountActivation,
+            detail
+        } = currentViewingUser;
+        return {
+            i18next,
+            visitTiime,
+            id,
+            account,
+            fullName,
+            adminRights,
+            accountActivation,
+            detail
+        };
+    },
+    components: {
+        ModalHeader,
+    }
+}
+</script>