From 9169cb492d79e0d1771d2cbc524138c3e333471b Mon Sep 17 00:00:00 2001
From: Stephen <ganstephenkusumo@gamil.com>
Date: Wed, 14 Aug 2024 19:11:58 +0700
Subject: [PATCH] Navbar Menu

---
 globalcomponent/one-menu.vue   | 117 +++--
 globalcomponent/one-navbar.vue |  75 +--
 globalstore/globalstore.js     | 104 +++--
 json/breadcumb.json            |   9 +
 json/jsonformatter.json        | 811 +++++++++++++++++++++++++++++++++
 login-coba/index.html          |   8 +-
 menu/images/logo.png           | Bin 0 -> 4445 bytes
 menu/index.html                | 148 ++++++
 8 files changed, 1147 insertions(+), 125 deletions(-)
 create mode 100644 json/breadcumb.json
 create mode 100644 json/jsonformatter.json
 create mode 100644 menu/images/logo.png
 create mode 100644 menu/index.html

diff --git a/globalcomponent/one-menu.vue b/globalcomponent/one-menu.vue
index a994bd2..4ea3bd9 100644
--- a/globalcomponent/one-menu.vue
+++ b/globalcomponent/one-menu.vue
@@ -1,54 +1,89 @@
 <template>
-  <div>
-    <!-- :location="$vuetify.display.mobile ? 'bottom' : undefined" -->
-    <v-navigation-drawer style="border: 0;" v-model="drawer">
-      <v-list-item class="ml-2 mt-3">
-        <v-img
-          :aspect-ratio="1"
-          max-height="42px"
-          max-width="132px"
-          class="bg-white"
-          src="../globalimages/logo.png"
-        ></v-img>
-      </v-list-item>
+    <v-navigation-drawer style="border: 0;"class="pa-2" v-model="drawer" :width="320">
+    <!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
+      <v-list density="compact">
+        <v-list-item class="my-5">
+          <v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="images/logo.png"></v-img>
+        </v-list-item>
+        <!-- LEVEL 0 -->
+        <template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
+          <v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg">
+            <v-list-item-title >{{ lev_0.name }}</v-list-item-title>
+          </v-list-item>
+          <v-list-group v-else :value="lev_0.name" >
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" color="primary" rounded="lg" >
+                <v-list-item-title>{{ lev_0.name }}</v-list-item-title>
+              </v-list-item>
+            </template>
+            <!-- LEVEL 1 -->
+            <template v-for="(lev_1, j) in level_1['p_' + lev_0.id]" :key="lev_1.id">
+              <v-list-item v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1.url)" color="primary" rounded="lg" class="{'primary--text': activeItem === lev_2.id}">
+                <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
+              </v-list-item>
+              <v-list-group v-else :value="lev_1.state" v-show="level_2['p_' + lev_1.id]" sub-group no-action >
+                <template v-slot:activator="{ props }">
+                  <v-list-item v-bind="props" color="primary"rounded="lg"  >
+                    <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+                <!-- LEVEL 2 -->
+                <template v-for="(lev_2, k) in level_2['p_' + lev_1.id]" :key="lev_2.id">
+                  <v-list-item class="" @click="goto(lev_2.url)"  color="primary" rounded="lg">
+                    <v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_2.name }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-list-group>
+            </template>
+          </v-list-group>
+        </template>
+
+      </v-list>
     </v-navigation-drawer>
-  </div>
 </template>
 
 <script type="module">
-  export default {
-    name: "MenuComponent",
-    data() {
-      return {};
+export default {
+  name: "MenuComponent",
+  data() {
+    return {activeItem: null};
+  },
+  mounted() {
+    // Memuat data saat komponen di-mount
+    this.$store.dispatch('system/loadMenuData');
+  },
+  computed: {
+    // Akses state dari store
+    level_0() {
+      return this.$store.state.system.menu_level_0
     },
-    computed: {
-      // Akses state dari store
-      drawer: {
-        get() {
-          return this.$store.state.system.drawer;
-        },
-        set(val) {
-          this.$store.commit("system/setDrawer", val);
-        },
+
+    level_1() {
+      return this.$store.state.system.menu_level_1
+    },
+
+    level_2() {
+      return this.$store.state.system.menu_level_2
+    },
+    drawer: {
+      get() {
+        return this.$store.state.system.drawer;
       },
-      count() {
-        return this.$store.state.coba2.count;
-      },
-      email() {
-        return this.$store.state.coba2.email;
+      set(val) {
+        this.$store.commit("system/update_drawer", val);
       },
     },
-    methods: {
-      // Dispatch action ke store
-      increment() {
-        this.$store.dispatch("increment");
-      },
-    },
-  };
+  },
+  methods: {
+    goto(url) {
+      console.log("menuju ke- ", url)
+    }
+  },
+};
 </script>
 
 <style scoped>
-  h1 {
-    color: blue;
-  }
+h1 {
+  color: blue;
+}
 </style>
diff --git a/globalcomponent/one-navbar.vue b/globalcomponent/one-navbar.vue
index 1a2713f..a32b658 100644
--- a/globalcomponent/one-navbar.vue
+++ b/globalcomponent/one-navbar.vue
@@ -5,54 +5,57 @@
     <v-app-bar class="elevation-0">
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
-      <v-app-bar-title>Application</v-app-bar-title>
+      <v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
     </v-app-bar>
   </div>
 </template>
 
 <script type="module">
-  import MenuComponent from "./one-menu.vue";
+import MenuComponent from "./one-menu.vue";
 
-  export default {
-    name: "NavbarComponent",
-    components: {
-      "one-menu": MenuComponent,
+export default {
+  name: "NavbarComponent",
+  components: {
+    "one-menu": MenuComponent,
+  },
+  mounted() {
+    console.log("drawer");
+    console.log(this.$store.state.system.drawer);
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // Akses state dari store
+    bread_crumb() {
+      return this.$store.state.system.bread_crumb
+    },  
+    count() {
+      return this.$store.state.coba2.count;
     },
-    mounted() {
-      console.log("drawer");
-      console.log(this.$store.state.system.drawer);
-    },
-    data() {
-      return {};
-    },
-    computed: {
-      // Akses state dari store
-      count() {
-        return this.$store.state.coba2.count;
+    drawer: {
+      get() {
+        return this.$store.state.system.drawer;
       },
-      drawer: {
-        get() {
-          return this.$store.state.system.drawer;
-        },
-        set(val) {
-          this.$store.commit("system/setDrawer", val);
-        },
-      },
-      email() {
-        return this.$store.state.coba2.email;
+      set(val) {
+        this.$store.commit("system/update_drawer", val);
       },
     },
-    methods: {
-      // Dispatch action ke store
-      increment() {
-        this.$store.dispatch("increment");
-      },
+    email() {
+      return this.$store.state.coba2.email;
     },
-  };
+  },
+  methods: {
+    // Dispatch action ke store
+    increment() {
+      this.$store.dispatch("increment");
+    },
+  },
+};
 </script>
 
 <style scoped>
-  h1 {
-    color: blue;
-  }
+h1 {
+  color: blue;
+}
 </style>
diff --git a/globalstore/globalstore.js b/globalstore/globalstore.js
index 4b90238..313864e 100644
--- a/globalstore/globalstore.js
+++ b/globalstore/globalstore.js
@@ -1,68 +1,82 @@
 
-const URL = "/westone-api/v1/system/auth";
+const URL = "../json/jsonformatter.json";
+const URLBread = "../json/breadcumb.json";
 const store = {
     namespaced: true,
     state() {
         return {
-            count: 0,
+            menu_level_0: [],
+            menu_level_1: [],
+            menu_level_2: [],
             drawer: true,
-            data: null,
-            email: "lashlkdsa",
-            password: null,
-            dialog_success: false
+            bread_crumb: "",
+            search_error_message: "",
+            branch: {},
+            is_page_allowed: true,
+            dashboard: ""
         };
     },
     mutations: {
-        increment(state) {
-            state.count++;
+        update_menu_level_0(state, data) {
+            state.menu_level_0 = data
         },
-        decrement(state) {
-            state.count--;
+        update_bread_crumb(state, val) {
+            state.bread_crumb = val
         },
-        setData(state, payload) {
-            state.data = payload;
+        update_menu_level_1(state, data) {
+            state.menu_level_1 = data
         },
-        setDrawer(state, payload) {
+        update_menu_level_2(state, data) {
+            state.menu_level_2 = data
+        },
+        update_branch(state, val) {
+            state.branch = val
+        },
+        update_search_error_message(state, val) {
+            state.search_error_message = val
+        },
+        update_page_allowed(state, val) {
+            state.is_page_allowed = val
+        },
+        update_dashboard(state, val) {
+            state.dashboard = val
+        },
+        update_drawer(state, payload) {
             state.drawer = payload;
         },
-        setEmail(state, data) {
-            state.email = data;
-        },
-        setPassword(state, data) {
-            state.password = data;
-        },
-        setDialogSuccess(state, data) {
-            state.dialog_success = data;
-        }
     },
     actions: {
-        increment({ commit }) {
-            commit('increment');
-        },
-        decrement({ commit }) {
-            commit('decrement');
-        },
-        async loginState({ state, commit }) {
-            const params = {
-                email: state.email,
-                password: state.pasword
-            };
+        async loadMenuData(context) {
+            try {
+                let resp = await axios.get(URL);
 
-            try {
-                const response = await axios.post(URL + '/login', params);
-                commit('setData', response.data);
+                if (resp.data.status != "OK") {
+                    console.error('Gagal get api:');
+                } else {
+                    let x = resp.data.data
+                    if (x[0])
+                        context.commit("update_menu_level_0", x[0]['p_0'])
+                    if (x[1])
+                        context.commit("update_menu_level_1", x[1])
+                    if (x[2])
+                        context.commit("update_menu_level_2", x[2])
+                }
+                // tambahan get bread_crumb
+                resp = await axios.get(URLBread)
+                if (resp.data.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    console.log("menu", resp.data.data.bread_crumb)
+                    context.commit("update_bread_crumb", resp.data.data.bread_crumb)
+                    context.commit("update_branch", resp.data.data.branch)
+                    context.commit("update_page_allowed", resp.data.is_page_allowed)
+                    context.commit("update_dashboard", resp.data.dashboard)
+                }
             } catch (error) {
-                commit('setError', error);
+                console.error('Error loading menu data:', error);
             }
         },
-        async LoginParam({ commit }, params) {
-            try {
-                const response = await axios.post(URL + '/login', params);
-                commit('setData', response.data);
-            } catch (error) {
-                commit('setError', error);
-            }
-        }
     }
 };
 export default store
\ No newline at end of file
diff --git a/json/breadcumb.json b/json/breadcumb.json
new file mode 100644
index 0000000..36f6fde
--- /dev/null
+++ b/json/breadcumb.json
@@ -0,0 +1,9 @@
+{
+    "status": "OK",
+    "data": {
+        "bread_crumb": "Menu",
+        "dashboard": "one-ui/test/vuex/one-fo-verification",
+        "is_page_allowed": true,
+        "branch": []
+    }
+}
\ No newline at end of file
diff --git a/json/jsonformatter.json b/json/jsonformatter.json
new file mode 100644
index 0000000..e04d062
--- /dev/null
+++ b/json/jsonformatter.json
@@ -0,0 +1,811 @@
+{
+  "status": "OK",
+  "data": [
+    {
+      "p_0": [
+        {
+          "id": 1,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Front Office",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 114,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Laboratorium",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 115,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Radiodiagnostik",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 116,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Elektromedis",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 117,
+          "url": "#",
+          "icon": "healing",
+          "name": "Layanan Klinik",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 157,
+          "url": "#",
+          "icon": "healing",
+          "name": "MCU",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 131,
+          "url": "#",
+          "icon": "monetization_on",
+          "name": "Keuangan",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 31,
+          "url": "#",
+          "icon": "work",
+          "name": "Master Data",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 30,
+          "url": "test/vuex/one-report-v8/",
+          "icon": "description",
+          "name": "Laporan",
+          "level": 0,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 0
+        },
+        {
+          "id": 463,
+          "url": "#",
+          "icon": "work",
+          "name": "API",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        }
+      ]
+    },
+    {
+      "p_1": [
+        {
+          "id": 455,
+          "url": "test/vuex/cpone-fo-registration-v12",
+          "icon": null,
+          "name": "Registration (Preregister)",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 489,
+          "url": "test/vuex/one-fo-cashier-cpone",
+          "icon": null,
+          "name": "Kasir",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 123,
+          "url": "test/vuex/one-patient-list-barcode-vv-6-cpone/",
+          "icon": null,
+          "name": "List Pasien",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 490,
+          "url": "test/vuex/one-result-handover/",
+          "icon": null,
+          "name": "Serah Terima hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 493,
+          "url": "test/vuex/one-send-email-cpone/",
+          "icon": null,
+          "name": "Kirim Email Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 495,
+          "url": "test/vuex/one-patient-list-nonlab-cpone/",
+          "icon": null,
+          "name": "List Pasien Nonlab",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 496,
+          "url": "test/vuex/cpone-nonlab-upload-document/",
+          "icon": null,
+          "name": "Nonlab Upload Document",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 492,
+          "url": "test/vuex/cpone-fo-supervisor/",
+          "icon": null,
+          "name": "Tambah & Ganti Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        }
+      ],
+      "p_31": [
+        {
+          "id": 32,
+          "url": "#",
+          "icon": null,
+          "name": "System",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        },
+        {
+          "id": 41,
+          "url": "#",
+          "icon": null,
+          "name": "Setting Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        },
+        {
+          "id": 68,
+          "url": "#",
+          "icon": null,
+          "name": "Klien dan Harga",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        }
+      ],
+      "p_114": [
+        {
+          "id": 459,
+          "url": "test/vuex/cpone-sample-lab-mobile-v6/",
+          "icon": "",
+          "name": "Specimen Collection Mobile",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        },
+        {
+          "id": 491,
+          "url": "test/vuex/cpone-patient-checkout/",
+          "icon": "",
+          "name": "Patient Checkout",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        },
+        {
+          "id": 84,
+          "url": "test/vuex/cpone-process-resultentry-v20/",
+          "icon": "",
+          "name": "Result Entry",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        }
+      ],
+      "p_115": [
+        {
+          "id": 104,
+          "url": "test/vuex/one-resultentry-so-xray-v8-cpone",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 115
+        }
+      ],
+      "p_116": [
+        {
+          "id": 122,
+          "url": "test/vuex/one-resultentry-so-electromedis-v8-cpone/",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 116
+        }
+      ],
+      "p_117": [
+        {
+          "id": 127,
+          "url": "test/vuex/cpone-resultentry-so-others-v2/",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 117
+        }
+      ],
+      "p_131": [
+        {
+          "id": 133,
+          "url": "test/vuex/cpone-bill/",
+          "icon": null,
+          "name": "Penagihan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        },
+        {
+          "id": 134,
+          "url": "test/vuex/cpone-bill-payment/",
+          "icon": null,
+          "name": "Pelunasan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        },
+        {
+          "id": 478,
+          "url": "test/vuex/cpone-bill-cancel/",
+          "icon": null,
+          "name": "Hapus Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        }
+      ],
+      "p_157": [
+        {
+          "id": 486,
+          "url": "test/vuex/cpone-sample-to-branch/",
+          "icon": null,
+          "name": "Surat Jalan Sample",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 206,
+          "url": "test/vuex/cpone-setup-mcu-v4/",
+          "icon": null,
+          "name": "Setup",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 207,
+          "url": "test/vuex/cpone-mcu-offline-preregister-v2/",
+          "icon": null,
+          "name": "Pre-Register (xls)",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 208,
+          "url": "test/vuex/one-mcu-offline-preregister-app-cponev2/",
+          "icon": null,
+          "name": "Pre-Register",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 158,
+          "url": "test/vuex/one-mcu-resume-individu-cpone/",
+          "icon": null,
+          "name": "Resume Individu",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 479,
+          "url": "test/vuex/one-admin-mcu/",
+          "icon": null,
+          "name": "Pengelolaan MCU",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 483,
+          "url": "test/vuex/cpone-mcu-officer/",
+          "icon": null,
+          "name": "MCU Officer",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 488,
+          "url": "test/vuex/cpone-so-template-additional/",
+          "icon": null,
+          "name": "Additional Fisik",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 475,
+          "url": "test/vuex/one-mcu-resume-individu-cponev2/",
+          "icon": null,
+          "name": "Resume Individu V2",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        }
+      ],
+      "p_248": [
+        {
+          "id": 260,
+          "url": "#",
+          "icon": null,
+          "name": "Laporan",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 248
+        }
+      ],
+      "p_329": [
+        {
+          "id": 330,
+          "url": "#",
+          "icon": null,
+          "name": "Masterdata",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 329
+        }
+      ],
+      "p_463": [
+        {
+          "id": 460,
+          "url": "test/vuex/cpone-result-status/",
+          "icon": null,
+          "name": "Api Result",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        },
+        {
+          "id": 458,
+          "url": "test/vuex/cpone-nattest-mapping/",
+          "icon": null,
+          "name": "Nat Test Mapping",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        },
+        {
+          "id": 494,
+          "url": "test/vuex/cpone-mcu-inject-old",
+          "icon": null,
+          "name": "Inject data Old",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        }
+      ]
+    },
+    {
+      "p_32": [
+        {
+          "id": 33,
+          "url": "test/vuex/one-md-usergroup-user-v4/",
+          "icon": null,
+          "name": "User Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 470,
+          "url": "test/vuex/cpone-masterdata-doctor/",
+          "icon": null,
+          "name": "Doctor",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 34,
+          "url": "test/vuex/one-md-usergroup-user-v4/",
+          "icon": null,
+          "name": "User",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 240,
+          "url": "test/vuex/one-md-email-config-onhold",
+          "icon": null,
+          "name": "Konfigurasi Email (Invoice)",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 170,
+          "url": "test/vuex/one-md-email-config",
+          "icon": null,
+          "name": "Konfigurasi Email (Hasil)",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 35,
+          "url": "test/vuex/one-md-priviledge/",
+          "icon": null,
+          "name": "Hak Akses",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 36,
+          "url": "test/vuex/one-report-usergroup/",
+          "icon": null,
+          "name": "Report Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 39,
+          "url": "test/vuex/one-md-staff",
+          "icon": null,
+          "name": "Staff",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 40,
+          "url": "#",
+          "icon": null,
+          "name": "Configuration",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 171,
+          "url": "test/vuex/one-md-form/",
+          "icon": null,
+          "name": "No Dokumen",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 487,
+          "url": "test/vuex/cpone-masterdata-patient/",
+          "icon": null,
+          "name": "Patient",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 339,
+          "url": "test/vuex/one-md-report/",
+          "icon": null,
+          "name": "Setting Report",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 241,
+          "url": "test/vuex/one-md-bank/",
+          "icon": null,
+          "name": "Bank",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 172,
+          "url": "test/vuex/one-md-branch-v2/",
+          "icon": null,
+          "name": "Data Cabang",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        }
+      ],
+      "p_41": [
+        {
+          "id": 466,
+          "url": "test/vuex/cpone-group-result/",
+          "icon": null,
+          "name": "Group Result",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 43,
+          "url": "test/vuex/one-md-price-cpone/",
+          "icon": null,
+          "name": "Sub Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 467,
+          "url": "test/vuex/cpone-md-samplestation/",
+          "icon": null,
+          "name": "Sample Station",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 485,
+          "url": "test/vuex/cpone-md-location/",
+          "icon": null,
+          "name": "Lokasi",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 476,
+          "url": "test/vuex/one-md-advice-kelainan/",
+          "icon": "flip_to_front",
+          "name": "Saran Kelainan MCU",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 469,
+          "url": "test/vuex/cpone-md-bahan/",
+          "icon": null,
+          "name": "Bahan",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 468,
+          "url": "test/vuex/cpone-md-nat-bahan-sampletype/",
+          "icon": null,
+          "name": "Specimen",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 59,
+          "url": "test/vuex/one-md-test-nat-local-now/",
+          "icon": null,
+          "name": "Test",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 461,
+          "url": "test/vuex/cpone-md-requirement/",
+          "icon": null,
+          "name": "Requirement",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 465,
+          "url": "test/vuex/cpone-md-nonlab-template/",
+          "icon": "",
+          "name": "Non Lab Template",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 472,
+          "url": "test/vuex/cpone-md-pola-kelainan-nonlab/",
+          "icon": null,
+          "name": "Summary Kelainan Non Lab",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 471,
+          "url": "test/vuex/cpone-md-pola-kelainan/",
+          "icon": null,
+          "name": "Master Pola Kelainan",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 473,
+          "url": "test/vuex/cpone-md-kelainan-lab-v2/",
+          "icon": null,
+          "name": "Summary Kelainan Lab",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 477,
+          "url": "test/vuex/one-md-map-nonlab-mcu-result/",
+          "icon": null,
+          "name": "Nonlab Template MCU ",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        }
+      ],
+      "p_68": [
+        {
+          "id": 457,
+          "url": "test/vuex/one-md-price-cpone/",
+          "icon": null,
+          "name": "Harga",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 474,
+          "url": "test/vuex/cpone-masterdata-packet-v3/",
+          "icon": null,
+          "name": "Paket",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 462,
+          "url": "test/vuex/cpone-masterdata-corporate-v2/",
+          "icon": null,
+          "name": "Corporate",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 55,
+          "url": "test/vuex/one-klinik-fo-registration-v2",
+          "icon": null,
+          "name": "Pasien",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 143,
+          "url": "test/vuex/one-md-test-nat-local-now/",
+          "icon": null,
+          "name": "Test Nat Lokal ",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/login-coba/index.html b/login-coba/index.html
index 27b0a3f..a55485b 100644
--- a/login-coba/index.html
+++ b/login-coba/index.html
@@ -122,9 +122,11 @@
           };
         },
         // <one-navbar></one-navbar>
-        template: `
-            <main-component></main-component>
-            `,
+        template: ` 
+          <v-app>
+            <one-navbar></one-navbar>
+          </v-app>
+        `,
         // <v-row no-gutters>
         //   <v-col cols="8">
         //     <hello-world></hello-world>
diff --git a/menu/images/logo.png b/menu/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dc7e9090e298da5eaf813eefb517f72614b19a5
GIT binary patch
literal 4445
zcmV-j5u)yiP)<h;3K|Lk000e1NJLTq004vl001fo1^@s6a#Hg-00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH5b{YxK~#7F?OO?W
zR7JL~yY}r)cXpP5K|z*`;=%(I1_ubpstHSy4hbM`1XNU>3%KF5PXTuwSriD7MG}$_
z5)ufb;$xGC_?STl5fT_Dge+uFcY3+|ol_k;G$DbO&-p&^yZ`sy^u4F5&Z*_psZ*ya
z2<gzFLx&C>I&|pJp+m=S2?FW(-NI(Gk*6E(i8)_qpQ*}PUzI={OOpq_&YJN-XJu%l
z<9CBOFBae0JLvm=fg-4j-YKvgIO@va#rg+TP2+rdNJMkCz1m-Fv4q?a58XoijxZ)A
zE8jqo-<jiy_iJ*cZ$v>Jh3O=LWQwFt1_yI1d;am3&)3cyB6Y??w-7fd9$uIq>S`e)
zbJtHf^YkahhST5KQ(8RY2#KUDHyw%i-*ZCUNRlGX8yNbN5Hq*$+1b<nKNeesjaTMN
zA{{p*s%pg1)s2qt=l^$6&!4_+-qP$8GZY1Np=t6bmC;~1(3H?%<MOWITv0*B^uw{8
zED`OYE5r?m33D=U=S69Otf*mCcHs>VFC`EJAzRFb^u5`s3)jCr`Ise$E$9~&cDTIS
zd34f4Imv<Y))nFgz_j_>2gX0N?N0nYX=e7LPP_bnqNI#P8qzdH{TGmxAQSz;nEQGz
z@|78Jcl5I-%j@Db4Y9JM&JI+T?nB%FXlWLoc6r2+b6@-_<>Z-~Ws0f=V>-vt2SUQA
zj3x*57)`SW_Z+BLKQT3{a9IED+rBw+wosDg!8jjD66XSyr7OgBjE5KQ4XvrKeY(lP
zr%@#7YO=crshS!A{sA&^>=z?%8$Q=&>&+)E*fpi8!SOCA&3J|)!w;XXiNMML%ZO+)
zQtR%B3SInVfHHN3xK5Flc9bctEGgmzWd#0)SzZzq74mg;t)m)(OTUDN8`uB6{Ks%j
z)2hd&WG!;L<q43DAPKEbR+I?5oNyeqYEM?`^Pm`7pmOy%#C3{Ev$Nxx?7|MP1~AA3
zA0EM_?#!^}PfW?46%=gf4pt+A(3HC<L~nDr`SrLAK_aPJc<>a)L{wB&wtRcbO%X{|
zwat_7?m@r&(MMKKAaZpJah<}zuw4=230NvT-6JiDdFfM&G2IeI6bQUDMevBPf(n>I
zEkqfnL-0um2{JA#$e6Ype_Nl(pHoxUyu{;?Mw~d0jsa<7AaZquxK7cvyRo>w$=S@Z
z)H<IsOod=n?K#(WK~hI!%VA)t(~7G81ZH085@vi<At=#i%VDdkIJ%_X@uDCof5hbo
znvepOt8Y86Q><M!vATOiSbRt@x64QK)JkzaWq@Tw2oE#9POEB;(MbP2GTeN!vB|aN
zP$_z%w8`;Gt1@WF$T8oAcMbX~P`SE=xQ?+c{lSC&->}2z0)GjXp-%-{n3wa{O)tRo
z<R|lAD?Qt=SyeSwmZjkuA}H)snoZoQFqK@G^+CK6ph#UIZX_64=BU#nHgpL#Je>D=
z(h*D>m$LQovlWiD=)wkpp{O4;q_QeQ4~dVv<<)0q4GUNqF!Uwk214P+gae@#(<4j>
zUE`w(g8XOXQwD}A4GAMx4jf9qX9}VZef3SnLlaZ8SK=imP#Kpg1ng@G|EE2zqkJ8e
z3*>1p+h*HKe*!0W?bCh@zd&UMQlHM++8Hg-{8y9L5x>2A_j;}Q?#+osTR)yw*2WXU
z4S0Dl8t5H2g;_@CuC_XlIewNX6@6=W@Gmqu`6uQ)y}M7KvM#Gs;^PH>s<%5=s46mm
z<05tI7MjQl!Z>hPo+c5gg@zjz7OYM9>i!v7`(;_}$}nWpeKDmY4wVjg6VBfgAa+i0
z2Bw%ZG25CN-RmKsg4#EpAV}4~5k+5ZN%h9wlb_n&zpjpd6XNqj;L`~E={lOG4qMFZ
zn!@#o$HvXbS}IDdygO?MtgEibAmfAeZho~S$uVA;MEk}PYGedAEg~WUohq%&hvZ8J
z2KIPv14Hh(rGLM7*V=}-F)b;r;Evh`XO1_SCMuT9Pn~%D_`$HeedYTh+C#uV<oq==
z+2#xWq&&N$+xaTzm$IsIEK64P5ABuU401D7=Nfj2vSJ}oYkv^%gGj28Wrzcz=AhNN
zYvaq?w`uk>g}o}Ooo`CAGE`HwAn21Cqk+vD)?Zs?vsp!)XVR?fB`t1oL1>U+=+4bn
zFOLbSSxX%*@g?Xl5>7uG`}Q*5y5Zw#%_sm|=0gm;Ddg~;MyDprN(}ynkm#R6LX3MA
zMf*rnWya|s5@$TMtK8+0@582uqEMFGcz=)}l*NgXIslh3aO7KX0*538zB^pOR0yKb
z$MM_rxp_k?DxJF_J|EGRte_}KQt$M5<h1y?c~k9;e57!JcV|$M>=sFdloX|hASs>a
zRgjUFc%`+j?PjU0f(b@<pE^<U;G>Jajm>!Xz7|DOIN;~)3tA(LqemlDT4ACES&hNv
z;ly###E0@KAbFjag#>#%kT0tm2Lo@ZcGZzaHkgnU?N(@0So>Ooyy0%Q^yK8!+}XvM
zNjrQg<KcwzmvVbLY%9%eRhQ&mf+P>!cY;YynxB)9`<b;evU})<sMg*TH=<AV&dms=
zK2y~1?78MAure?dQQ9rs^7w|2rv{`97?&*>He0N0<ftOwx1^#;w?~O*7@GVMe+!~I
z&gJIs^L3^rh|Bo7r0Oo{gn{@QV(HZ}x10ZZi4cgiL4f6)|3g!>w~`G_yv?T!KyRQ)
zvK*$58=FCzB+4Eba`SGIA?rz!D)&AF(bhP~=fE_~kEEyyFU@a|VRlrLBw67nw_HUe
z?_W2HAY8t5;OA9euyli~Dl0lTA#Ak*qR11z_T%emEe`iP6K3W87wQDEBoO|}*D8;w
z#5bAnH?-f<<aTGoKe`QDNR;$M&H$H#&+sV&SXnz*r%Gs?iobb5y0@-gUYV4XLv4P4
zf@}9C>&kh)TTl{ig9ge#{d`B?=uz9!ryfMV0v+x$dPhg5A1|q13}%WIL}_w^7Q!)%
zBS#RGA+oAOyWHaQ-oiB1Fd(M;kz+reTc}-Fejr$qx8l{wb>nB{_Ve+BQ@K-1=BEtx
zm$85UKC}nnbx>{V$jA`pxq=PJUpz2#d$goU$rcN90yorV)0T`Hg|PF4maW;E0w!`3
zerFis@P{wO#I>{x_6`)j1Ts2lOIzGNG|c$q^Rp6m`pbnGt~~Nm@xZnYV5ySF9v?e$
z_V{kXxEa|mI6cC0O!tU#9LW9bAC=qD)c{Hn=JD{k^I!OKc!L{{G46_vj}It{bl%lB
z{GQQ6Z*JVO`{%y(&HOH~zPD&93U|1Kry$ECbq(@zP!f~3?+nzw&>-rO*B11vw5=?g
z2ut@SRYRe?C{1;ksaVLe$De=Zrw{%zDrrkL!%~f_--|tuekD3oh_&yGD<7MjS>*Ca
z39z>{{<ExQTvUW<+Zng;Ha11D9C%GKXQZ>=Sv0~GYu%EBzhU+&!6Amv+w+6-_^wMo
z%UX=zVX4(%HoM8j+D~zkZ&qT|+Qsy-saeT{O6&+Xo3`h!opJ`#Z8ieW4Dak1WzF=v
z`9q??g9po<9p1R?e9E#lnYZ~2VW@>Gj*Xr6!^4YrU6QZ4q(vqsbeAX3&Td8*BK|Ny
zrrU1ICH_%K`Q_}~5d<HnPf2;*is+sp&vlgUU(o3mB&&5G_5psLJZIZt802hBS0!~4
zEHl)|ge~3!Er>oz28Q^bf(<EU1sl9Yi^j~z+zCs}tk!fi4YgAUjM&?IJawYRZbjFC
zPPd%~BfSP)P;*gGr)*jgSH`ilpT-dyOA!0#EGX{F3#xa<fyFqHw`TgW_PoHE>f!WA
zZ{erKErY`&y~;%OVlR|g<1>X|kr=m2nheLdYpNRUN5)t)-%qm@nl7(hV5fH;QL$oq
zU{Sn}-NoP2n!>i_QDn7u{=x4vV-qvCIh?{PJ~~B{N3B-t)%WnQw1MgO=7W>TgsPgB
zcT}WNC_qF;7=LK1i;BWN+xkPaB;x>-cR91)F(~qce}0P8j<&UrSMKhJCtmh*Kb@M1
zt^u7Y#L%029ib?y8o%?RJm!(-iU$g!-1TA(jSwYmc&*(v<)S}9rFSx0H87Q;?*ZRH
z^d-DDZ^rWA5Ys~NQ7Zh+ESS-7H!nSZ_Ovq%T_Y$G$rMFMKDn^2UN*q^8k$Ftr+Y*x
zK~}VAOoM#&kp}w1fMhUaRb+%|MeBwIQBJ3v3Raat0Rnt7qwgJNyh3Yy+o`1YLR7PO
z2`|{7T-0U_1$0mH*Pzo#<r{AdbBs&Q{G!F9ERtod2W-6-!P-T`c1fivstmS5eLR9_
zWfZyz=LhG_*|lfz){c0YIQqwLvQr29(?D^&R$*gqab!rSVMoG<-k<F`c5aZ}E~GeJ
z;vAS|UXR@EQR3j|V{{D&iwH_8N>3>CBWc9uOY`7ULa2?i_2NmZVGj%AUdhc!tV96-
zlt3GKf8^4_?Ui?kqB1s+Adn>SZF%bJ-IM*2{y8^wc+IH9FUr7Q>y4f5pMG&o0(v@5
zOiL>?l{7iV`!btM)OYAN#uY=?!I9=o?#kx5P_eMaW_~87!Rgx%p%&v?HTBNzK<}Z5
zaulX>20H)q<&*0=;sc$=C8q5drl|^qASg{n5=x#|<jP(X_v6_{$7_<HOwX=y<`Fdc
zWu(Ql8R8Lt0IP&Ad|<`7_B$J**1x^n84C)^{If6&UD~H_$kei59Iu0KGzZffn>`Ee
zPs_>Kv({=4L`<)!E`0x<j+rMb9J>`s9dxz)yvhxl{@4zo$?3Y6=f&53bZ{WO4lu(q
z8^Ln?89I)1xrI04AKq>^v1IvadrOKSsAF*+*r_<+JYxg;jd8`$b>6D@6JTn6TId}Z
zj%C&@oE=_-gCwnFZvaR&u-b;s_<%_sP+e!=f4;%B5C7KHx%WfxYu)0vzYY<3IZ0NO
zD7Qyi;A#;HE9>otcu{Ga1z_@z`|~1HGT_@k4G#D6_HrG~!thHn5l9-;V?d>mBbU(>
z;q{Rq;C83htj-HmPKX$(rT=A0O{kfiOOmKVCGu5TQB-qHeM@n5ee+(AM|u~wmfruW
zVh!})dW3WD<M%#M##IpTE5+|%m3!1SI<w2`S`I*5=Gj&Yq`|}_S7xuCeiHr0xawJk
z(Zqh?YY&bm+}guj5E~mSgJOK@%fmv9V$q{12d=<|fXFAD)M|9=FQQ@XrcaeL$G{%D
z3?Au%2m%I!^ESFQ9D8WgZ3AAul+{HyfauV<yhy@3qV{rION$qIXsrc`H_a%um<_M{
z7=TZ)WOPzaJEx7%_U*$~lG8eJY<F#(`8PO*ehAtlpeq2^1J?~#5XW3#TV52?%QA7(
zs_6|leeDPF_5GsEV<6&t5P9pT5vroHt!+k*@DS6>k%`Rf=s$p~o_0Pk)SQ=pNE`sW
zA(G?BGppZwz&ndL&Xg&uGL3c0#8QXa|04)%GE_i_Zz<|zO9-7%y#r3{z!Mub<MI3$
zr=;EQbn$<H=(rg=sV3OW9em*4n|IG^_itw=L(mC=^t^>fgk|Z|?fIHGCIf=Zo!%*B
zDe6=gqp6{cb1cQ*MwY5-Y^?C=$-TE)*MECzs~G~8;dqy8G?39o&UlRD#J6xdLut+X
z_aikrns;&>wG_7<TLinkzO9ah83~2sXJ$SrN<?pnaX6TW?rsZHOFJCQdk{oxb0G03
zTTIM32+tqPToG5&-WktWIkgJTcE%h(Zy(#(=$atQxXYO{K}LFK!Mf?CXfx8GLx&C>
jI&|pJp+kp`8vy?XANH$fbuxb@00000NkvXXu0mjfUfQ9*

literal 0
HcmV?d00001

diff --git a/menu/index.html b/menu/index.html
new file mode 100644
index 0000000..3705b4a
--- /dev/null
+++ b/menu/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</title>
+    <!-- Vuetify CSS -->
+    <link href="../css/vuetify.css" rel="stylesheet" />
+    <!-- Local Stylesheet for Fonts -->
+    <link rel="stylesheet" href="../css/styles.css" />
+    <link href="../css/materialdesignicon.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <!-- Vue.js -->
+    <!-- <script src="https://unpkg.com/vue@next"></script> -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
+    <!-- Vuex -->
+    <script src="../libraries/vuex.js"></script>
+    <!-- Vuetify -->
+    <script src="../libraries/vuetify3.js"></script>
+    <!-- vue-i18n -->
+    <script src="../libraries/vue-i18n.global.js"></script>
+    <!-- Axios -->
+    <script src="../libraries/axios.js"></script>
+    <!-- Store JS -->
+    <!-- <script src="store.js"></script> -->
+    <!-- Component JS -->
+    <script src="../globalscript/theme.js"></script>
+    <!-- <script src="https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.iife.js"></script> -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+      import system from "../globalstore/globalstore.js";
+
+      // import theme from "./theme.js";
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+        },
+      });
+      const options = {
+        moduleCache: {
+          vue: Vue,
+        },
+        getFile(url) {
+          return fetch(url).then((response) =>
+            response.ok ? response.text() : Promise.reject(response)
+          );
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      // Locale messages
+      const messages = {
+        en: {
+          message: {
+            login: "Login",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+          },
+        },
+        id: {
+          message: {
+            login: "Masuk",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+          },
+        },
+      };
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback locale
+        messages, // Set locale messages
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        components: {
+        },
+
+        data() {
+          return {
+            visible: false,
+            bg_src: "./images/bg_cover.svg",
+            items: [
+              {
+                src: "./images/frame_1.svg",
+              },
+              {
+                src: "./images/frame_1.svg",
+              },
+            ],
+            loading: false, // Initialize loading state
+          };
+        },
+        template: ` 
+          <v-app>
+            <one-navbar></one-navbar>
+          </v-app>
+        `,
+      });
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "one-navbar": "../globalcomponent/one-navbar.vue"
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>