Merge pull request 'Feature Navbar Menu' (#1) from menu into main

Reviewed-on: #1

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>

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>

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

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": []
+    }
+}

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
+        }
+      ]
+    }
+  ]
+}

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>

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>