From 69835ad05b4274233c4a171dbc2593125487001b Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 19 Jun 2024 11:35:16 +0800
Subject: [PATCH] WIP: acct mgmt search bar and data grid header.

---
 src/assets/icon-search.svg                    |  4 ++++
 src/components/AccountMenu/SearchBar.vue      | 12 +++++++++--
 src/components/Navbar.vue                     |  2 +-
 src/i18n/en.json                              |  9 +++++++-
 .../AccountManagement/AccountAdmin/index.vue  | 21 ++++++++++++++-----
 5 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/icon-search.svg

diff --git a/src/assets/icon-search.svg b/src/assets/icon-search.svg
new file mode 100644
index 0000000..c60e26f
--- /dev/null
+++ b/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>
diff --git a/src/components/AccountMenu/SearchBar.vue b/src/components/AccountMenu/SearchBar.vue
index 8928c4b..68d87ae 100644
--- a/src/components/AccountMenu/SearchBar.vue
+++ b/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() {
 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 73fe9cc..5900076 100644
--- a/src/components/Navbar.vue
+++ b/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,
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1d060f1..46019f6 100644
--- a/src/i18n/en.json
+++ b/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",
diff --git a/src/views/AccountManagement/AccountAdmin/index.vue b/src/views/AccountManagement/AccountAdmin/index.vue
index 4add8be..e44d36e 100644
--- a/src/views/AccountManagement/AccountAdmin/index.vue
+++ b/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">Account Admin SSO/General cases</div>
-        <div class="flex justify-end">
-            <div class="flex">
+    <div class="flex justify-center pt-2">
+        <div class="flex w-[1216px] flex-col items-center">
+            <div class="flex w-full justify-end py-2">
                 <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: {