WIP: acct mgmt search bar and data grid header.

src/assets/icon-search.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 21L17 17" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/AccountMenu/SearchBar.vue

@@ -1,13 +1,21 @@
 <template>
-    <div id="search_bar_container" class="w-[280px] h-8 px-4 border-[#64748B] border-[1px] rounded-full	">
+    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
-
+        justify-between">
+        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"/>
+        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex"/>
     </div>
 </template>
 
 <script>
+import i18next from '@/i18n/i18n.js';
 export default {
     setup() {
 
+    },
+    data() {
+        return {
+            i18next: i18next,
+        }
     },
     created() {
 

src/components/Navbar.vue

@@ -110,7 +110,7 @@ export default {
         DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
         // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
         COMPARE: ['PERFORMANCE'],
-        'ACCOUNT MANAGEMENT': ['ALL', 'CREATE',],
+        'ACCOUNT MANAGEMENT': [],
       },
       navViewName: 'FILES',
       uploadModal: false,

src/i18n/en.json

@@ -11,7 +11,14 @@
         "hi": "Hi, ",
         "acctMgmt": "Account management",
         "mangUrAcct": "Manage your account",
-        "Logout": "Log out"
+        "Logout": "Log out",
+        "Search": "Search",
+        "Account": "Account",
+        "FullName": "Full Name",
+        "AdminRights": "Admin Rights",
+        "AccountActivation": "Account Activation",
+        "Detail": "Detail",
+        "Edit": "Edit"
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/views/AccountManagement/AccountAdmin/index.vue

@@ -1,10 +1,20 @@
 <template>
-    <div class="flex w-[1216px]  items-center pt-2 flex-col">
+    <div class="flex justify-center pt-2">
-        <div class="flex">Account Admin SSO/General cases</div>
+        <div class="flex w-[1216px] flex-col items-center">
-        <div class="flex justify-end">
+            <div class="flex w-full justify-end py-2">
-            <div class="flex">
                 <SearchBar/>
             </div>
+            <div id="acct_mgmt_data_grid" class="flex w-full">
+                <DataTable dataKey="id" tableClass="w-full mt-4 text-sm cursor-pointer relative table-fixed"
+                >
+                    <Column field="account" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium"  sortable></Column>
+                    <Column field="fullName" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable></Column>
+                    <Column field="adminRights" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500"></Column>
+                    <Column field="accountActivation" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"></Column>
+                    <Column field="detail" :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500"></Column>
+                    <Column field="edit" :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500"></Column>
+                </DataTable>
+            </div>
         </div>
     </div>
 </template>
@@ -13,6 +23,7 @@
 import { storeToRefs, mapState, } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
+import i18next from '@/i18n/i18n.js';
 
 export default {
     setup() {
@@ -25,7 +36,7 @@ export default {
     },
     data() {
         return {
-
+            i18next: i18next,
         };
     },
     components: {