css scroll Navbar Menu

css/styles.css

@@ -28,3 +28,39 @@
 body {
   font-family: "Roboto", sans-serif;
 }
+
+
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+/* this targets the default scrollbar (compulsory) */
+
+::-webkit-scrollbar-track {
+  background-color: #E3F2FD;
+}
+
+/* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+  background-color:  #2196F3;
+  ;
+}
+
+/* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+  background-color:  #E3F2FD;
+  ;
+}
+
+/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+  background-color: black;
+}
+

globalcomponent/one-menu.vue

@@ -0,0 +1,89 @@
+<template>
+    <v-navigation-drawer style="border: 0;"class="pa-4" v-model="drawer" :width="380">
+    <!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
+      <v-list>
+        <v-list-item class="my-5">
+          <v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="../globalimages/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" class="my-2">
+            <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" class="mb-3">
+                <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>
+</template>
+
+<script type="module">
+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
+    },
+
+    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;
+      },
+      set(val) {
+        this.$store.commit("system/update_drawer", val);
+      },
+    },
+  },
+  methods: {
+    goto(url) {
+      console.log("menuju ke- ", url)
+    }
+  },
+};
+</script>
+
+<style scoped>
+h1 {
+  color: blue;
+}
+</style>

globalcomponent/one-navbar.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <one-menu></one-menu>
+
+    <v-app-bar class="elevation-0">
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
+    </v-app-bar>
+  </div>
+</template>
+
+<script type="module">
+import MenuComponent from "./one-menu.vue";
+
+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;
+    },
+    drawer: {
+      get() {
+        return this.$store.state.system.drawer;
+      },
+      set(val) {
+        this.$store.commit("system/update_drawer", val);
+      },
+    },
+    email() {
+      return this.$store.state.coba2.email;
+    },
+  },
+  methods: {
+    // Dispatch action ke store
+    increment() {
+      this.$store.dispatch("increment");
+    },
+  },
+};
+</script>
+
+<style scoped>
+h1 {
+  color: blue;
+}
+</style>

globalscript/global.js

@@ -0,0 +1,24 @@
+function one_money(inp, format) {
+    return numeral(inp).format(format ? format : '0,000')
+}
+window.one_money = one_money
+
+function one_token() {
+    return localStorage.getItem('token')
+}
+window.one_token = one_token
+
+function one_user() {
+    return JSON.parse(localStorage.getItem('user'))
+}
+window.one_user = one_user
+function one_float(inp) {
+    try {
+        let val = parseFloat(inp)
+        if (isNaN(val)) return 0.0
+        return val
+    } catch (e) {
+        return 0.0
+    }
+}
+window.one_float = one_float

globalscript/theme.js

@@ -11,9 +11,9 @@ var CustomTheme = {
             error: "#F44336",
             "error-lighten": "#FFEBEE",
             "error-darken": "#B71C1C",
-            info: "#3F51B5",
+            info: "#00BCD4",
-            "info-lighten": "#E8EAF6",
+            "info-lighten": "#E0F7FA",
-            "info-darken": "#1A237E",
+            "info-darken": "#006064",
             success: "#4CAF50",
             "success-lighten": "#E8F5E9",
             "success-darken": "#1B5E20",

globalstore/globalstore.js

@@ -0,0 +1,82 @@
+
+const URL = "../json/jsonformatter.json";
+const URLBread = "../json/breadcumb.json";
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            menu_level_0: [],
+            menu_level_1: [],
+            menu_level_2: [],
+            drawer: true,
+            bread_crumb: "",
+            search_error_message: "",
+            branch: {},
+            is_page_allowed: true,
+            dashboard: ""
+        };
+    },
+    mutations: {
+        update_menu_level_0(state, data) {
+            state.menu_level_0 = data
+        },
+        update_bread_crumb(state, val) {
+            state.bread_crumb = val
+        },
+        update_menu_level_1(state, data) {
+            state.menu_level_1 = data
+        },
+        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;
+        },
+    },
+    actions: {
+        async loadMenuData(context) {
+            try {
+                let resp = await axios.get(URL);
+
+                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) {
+                console.error('Error loading menu data:', error);
+            }
+        },
+    }
+};
+export default store

index.php

@@ -1,3 +1,2 @@
 <?php
-header('Location: /westone-ui/test/');
+header('Location: /westone-ui/login/');
-?>

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/components/main.vue

@@ -22,7 +22,7 @@
 
 <script type="module">
   import CobaComponent from "./coba.vue";
-  import NavbarComponent from "./one-navbar.vue";
+  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
   export default {
     name: "component2",
     components: {

login-coba/index.html

@@ -30,7 +30,7 @@
     <!-- Component JS -->
     <script src="components/ComponentA.js"></script>
     <script src="components/ComponentB.js"></script>
-    <script src="theme.js"></script>
+    <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>
 
@@ -39,9 +39,12 @@
 
       import coba from "./modules/coba.js";
       import coba2 from "./modules/coba2.js";
+      import system from "../globalstore/globalstore.js";
+
       // import theme from "./theme.js";
       const store = Vuex.createStore({
         modules: {
+          system: system,
           coba: coba,
           coba2: coba2,
         },
@@ -119,9 +122,11 @@
           };
         },
         // <one-navbar></one-navbar>
-        template: `
+        template: ` 
-            <main-component></main-component>
+          <v-app>
-            `,
+            <one-navbar></one-navbar>
+          </v-app>
+        `,
         // <v-row no-gutters>
         //   <v-col cols="8">
         //     <hello-world></hello-world>

loginv3/components/dekstop.vue

@@ -0,0 +1,154 @@
+<template>
+  <v-app id="inspire">
+    <v-row no-gutters>
+      <v-col lg="8" md="7">
+        <!-- width="100vw" -->
+        <!-- :aspect-ratio="1" -->
+        <v-img
+          min-height="100vh"
+          cover
+          style="background-repeat: repeat-y;"
+          class="bg-white"
+          src="./images/bg-left.jpg"
+          cover
+        ></v-img>
+      </v-col>
+      <v-col lg="4" md="5">
+        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
+          <v-img
+            class="bg-white"
+            height="86px"
+            aspect-ratio="16/9"
+            src="../globalimages/logo.png"
+          ></v-img>
+        </div>
+        <v-container class="mt-16">
+          <v-row no-gutters justify="center">
+            <v-col>
+              <div class="d-flex justify-center">
+                <v-card class="mx-auto px-12" elevation="0" rounded="lg">
+                  <div class="d-flex mb-6">
+                    <v-sheet class="">
+                      <h2 class="text-h6 font-weight-black">
+                        {{ $t("message.title") }}
+                      </h2>
+                      <p class="text-subtitle-1" style="color: #637381;">
+                        {{ $t("message.sublogin") }}
+                      </p>
+                    </v-sheet>
+                  </div>
+                  <!-- bg-primary-lighten text-primary  -->
+                  <!-- icon="mdi-information-slab-circle-outline" -->
+                  <v-alert
+                    density="compact"
+                    :text="alert.message"
+                    :type="alert.type"
+                    class="mt-4 mb-3 w-100"
+                    variant="tonal"
+                  >
+                  </v-alert>
+
+                  <v-text-field
+                    class="mt-3"
+                    v-model="email"
+                    :label="$t('message.email')"
+                    :placeholder="$t('message.placeholderEmail')"
+                    variant="outlined"
+                  ></v-text-field>
+                  <!-- <div
+                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                  >
+                    {{ $t("message.password") }}
+                    <a
+                      class="text-caption text-decoration-none text-blue"
+                      href="#"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {{ $t("message.forgotPassword") }}</a
+                    >
+                  </div> -->
+                  <v-text-field
+                    :label="$t('message.password')"
+                    v-model="password"
+                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                    :type="visible ? 'text' : 'password'"
+                    :placeholder="$t('message.placeholderPassword')"
+                    variant="outlined"
+                    @click:append-inner="visible = !visible"
+                  ></v-text-field>
+                  <div class="text-center">
+                    <v-btn
+                      :loading="loading"
+                      @click="login"
+                      class="mt-5 text-none"
+                      color="blue"
+                      size="large"
+                      variant="elevated"
+                      block
+                    >
+                      {{ $t("message.login") }}
+                      <template v-slot:loader>
+                        <!-- <v-progress-linear indeterminate></v-progress-linear> -->
+                        <v-progress-circular
+                          indeterminate
+                        ></v-progress-circular>
+                      </template>
+                    </v-btn>
+                  </div>
+                </v-card>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-app>
+</template>
+
+<script type="module">
+  export default {
+    name: "dekstop",
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

loginv3/components/login.vue

@@ -1,112 +1,24 @@
 <template>
   <v-app id="inspire">
-    <v-row no-gutters>
+    <div class="hidden-md-and-up">
-      <v-col cols="8">
+      <mobile-component></mobile-component>
-        <v-img
+    </div>
-          :aspect-ratio="1"
+    <div class="hidden-sm-and-down">
-          class="bg-white"
+      <dekstop-component></dekstop-component>
-          src="./images/bg-left.jpg"
+    </div>
-          width="100vw"
-          height="100vh"
-          cover
-        ></v-img>
-      </v-col>
-      <v-col cols="4">
-        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
-          <v-img
-            class="bg-white"
-            height="86px"
-            src="../globalimages/logo.png"
-          ></v-img>
-        </div>
-        <v-container class="mb-6 mt-16">
-          <v-row style="min-height: 480px;" no-gutters justify="center">
-            <v-col>
-              <div class="d-flex px-10">
-                <v-sheet class="pl-16 ma-2">
-                  <h2 class="text-h6 font-weight-black">
-                    {{ $t("message.title") }}
-                  </h2>
-                  <p class="text-subtitle-1" style="color: #637381;">
-                    {{ $t("message.sublogin") }}
-                  </p>
-                </v-sheet>
-              </div>
-
-              <div class="d-flex justify-center mb-6">
-                <v-card
-                  class="mx-auto px-12"
-                  elevation="0"
-                  min-width="400"
-                  rounded="lg"
-                >
-                  <v-alert
-                    color="primary"
-                    density="compact"
-                    type="info"
-                    style="width: 100% !important;"
-                    class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-                    text="Enter the registered account"
-                  >
-                  </v-alert>
-                  <v-text-field
-                    class="mt-3"
-                    v-model="email"
-                    :label="$t('message.email')"
-                    :placeholder="$t('message.placeholderEmail')"
-                    variant="outlined"
-                  ></v-text-field>
-                  <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
-                  <v-text-field
-                    :label="$t('message.password')"
-                    v-model="password"
-                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
-                    :type="visible ? 'text' : 'password'"
-                    :placeholder="$t('message.placeholderPassword')"
-                    variant="outlined"
-                    @click:append-inner="visible = !visible"
-                  ></v-text-field>
-                  <div class="text-center">
-                    <v-btn
-                      :loading="loading"
-                      @click="login"
-                      class="mt-5 text-none"
-                      color="blue"
-                      size="large"
-                      variant="elevated"
-                      block
-                    >
-                      {{ $t("message.login") }}
-                      <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
-                      </template>
-                    </v-btn>
-                  </div>
-                </v-card>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
   </v-app>
 </template>
 
 <script type="module">
+  import MobileComponent from "./mobile.vue";
+  import DekstopComponent from "./dekstop.vue";
   export default {
     name: "login",
+    components: {
+      "mobile-component": MobileComponent,
+      "dekstop-component": DekstopComponent,
+    },
+    mounted() {},
     data() {
       return {
         visible: false,

loginv3/components/mobile.vue

@@ -0,0 +1,133 @@
+<template>
+  <div style="background-image: url(./images/bg-left.jpg);">
+    <v-container class="h-100 w-100">
+      <v-col align-self="center">
+        <v-card
+          class="mx-auto px-5 py-12"
+          elevation="0"
+          rounded="lg"
+          width="90%"
+        >
+          <div class="d-flex justify-center mb-6 bg-surface-variant">
+            <v-img
+              class="bg-white"
+              height="86px"
+              aspect-ratio="16/9"
+              src="../globalimages/logo.png"
+            ></v-img>
+          </div>
+          <div class="d-flex mb-6">
+            <v-sheet class="">
+              <h2 class="text-h6 font-weight-black">
+                {{ $t("message.title") }}
+              </h2>
+              <p class="text-subtitle-1" style="color: #637381;">
+                {{ $t("message.sublogin") }}
+              </p>
+            </v-sheet>
+          </div>
+          <v-alert
+            density="compact"
+            :text="alert.message"
+            :type="alert.type"
+            class="mt-4 mb-3 w-100"
+            variant="tonal"
+          >
+          </v-alert>
+          <v-text-field
+            class="mt-3"
+            v-model="email"
+            :label="$t('message.email')"
+            :placeholder="$t('message.placeholderEmail')"
+            variant="outlined"
+          ></v-text-field>
+          <!-- <div
+                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                  >
+                    {{ $t("message.password") }}
+                    <a
+                      class="text-caption text-decoration-none text-blue"
+                      href="#"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {{ $t("message.forgotPassword") }}</a
+                    >
+                  </div> -->
+          <v-text-field
+            :label="$t('message.password')"
+            v-model="password"
+            :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+            :type="visible ? 'text' : 'password'"
+            :placeholder="$t('message.placeholderPassword')"
+            variant="outlined"
+            @click:append-inner="visible = !visible"
+          ></v-text-field>
+          <div class="text-center">
+            <v-btn
+              :loading="loading"
+              @click="login"
+              class="mt-5 text-none"
+              color="blue"
+              size="large"
+              variant="elevated"
+              block
+            >
+              {{ $t("message.login") }}
+              <template v-slot:loader>
+                <v-progress-circular indeterminate></v-progress-circular>
+              </template>
+            </v-btn>
+          </div>
+        </v-card>
+      </v-col>
+    </v-container>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "mobile",
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

loginv3/index.html

@@ -28,18 +28,21 @@
     <script src="../libraries/axios.js"></script>
 
     <script src="../globalscript/theme.js"></script>
+    <script src="../globalscript/global.js"></script>
     <!-- loader single file component -->
     <script src="../libraries/vue3-sfc-loader.js"></script>
+    <script src="./language.js"></script>
 
     <script type="module">
       const { loadModule } = window["vue3-sfc-loader"];
 
       import login from "./modules/login.js";
-      const store = Vuex.createStore({
+      import system from "../globalstore/globalstore.js";
-        modules: {
+
-          login: login,
+      //   if (one_token()) {
-        },
+      //     let usr = JSON.parse(localStorage.getItem("user"));
-      });
+      //     location.replace("/" + usr.M_UserGroupDashboard);
+      //   }
       const options = {
         moduleCache: {
           vue: Vue,
@@ -57,32 +60,7 @@
         },
       };
       // Locale messages
-      const messages = {
+      const messages = CustomMessages;
-        en: {
-          message: {
-            login: "Log in",
-            title: "Log in to your account",
-            sublogin: "Enter your details below",
-            email: "Email",
-            password: "Password",
-            forgotPassword: "Forgot password?",
-            placeholderEmail: "Enter your email",
-            placeholderPassword: "Enter your password",
-          },
-        },
-        id: {
-          message: {
-            login: "Masuk",
-            title: "Masuk ke akun Anda",
-            sublogin: "Masukkan detail Anda di bawah ini",
-            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];
@@ -93,7 +71,13 @@
         fallbackLocale: "en", // Set fallback locale
         messages, // Set locale messages
       });
-
+      window.i18n = i18n;
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          login: login,
+        },
+      });
       // Vue App
       const app = Vue.createApp({
         data() {

loginv3/language.js

@@ -0,0 +1,32 @@
+var CustomMessages = {
+    en: {
+        message: {
+            login: "Log in",
+            title: "Log in to your account",
+            sublogin: "Enter your details below",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+            msgInfo: 'Enter the registered account',
+            errorQuery: "Error get data",
+            invalid: "Invalid username / password"
+        },
+    },
+    id: {
+        message: {
+            login: "Masuk",
+            title: "Masuk ke akun Anda",
+            sublogin: "Masukkan detail Anda di bawah ini",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+            msgInfo: "Masukkan akun terdaftar",
+            errorQuery: "Gagal mendapatkan data",
+            invalid: "Nama pengguna / kata sandi tidak valid"
+        },
+    },
+};

loginv3/modules/login.js

@@ -1,5 +1,8 @@
 
-const URL = "/westone-api/v1/system/auth";
+// const URL = "/westone-api/v1/system/auth";
+
+const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+
 const store = {
     namespaced: true,
     state() {
@@ -8,7 +11,15 @@ const store = {
             data: null,
             email: "",
             password: "",
-            dialog_success: false
+            dialog_success: false,
+            loading: false,
+            errorMessage: "",
+            iin: window.i18n.global.t('message.login'),
+            alert: {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
         };
     },
     mutations: {
@@ -29,6 +40,12 @@ const store = {
         },
         setDialogSuccess(state, data) {
             state.dialog_success = data;
+        },
+        setLoading(state, data) {
+            state.loading = data;
+        },
+        setAlert(state, data) {
+            state.alert = data;
         }
     },
     actions: {
@@ -38,7 +55,50 @@ const store = {
         decrement({ commit }) {
             commit('decrement');
         },
+        async login({ state, commit }) {
+            commit('setLoading', true);
+            let alert = {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
+            let params = {
+                username: state.email,
+                password: state.password
+            };
+            console.log(params);
+            try {
+                const response = await axios.post(URL + '/login', params);
+                console.log(response.data)
+                if (response.data.status != 'OK') {
+                    commit('setLoading', false);
+                    if (response.data.message !== 'Invalid') {
+                        alert.message = window.i18n.global.t('message.errorQuery');
+                    } else {
+                        alert.message = window.i18n.global.t('message.invalid');
+                    }
+                    alert.type = "error"
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data.data);
+                    localStorage.setItem("token", response.data.data.token)
+                    localStorage.setItem('user', JSON.stringify(response.data.data.user))
+                    //console.log(localStorage.getItem("token"))
+                    // if (data.user.is_courier === 'Y' && window.innerWidth < 600)
+                    //     window.location = "/one-ui/test/vuex/one-courier-mobile/";
+                    // else
+                    // window.location = "/" + response.data.data.user.M_UserGroupDashboard;
+
+                }
+                commit('setAlert', alert)
+            } catch (error) {
+                console.log(error)
+                commit('setLoading', false);
+
+            }
+        },
         async loginState({ state, commit }) {
+            commit('setLoading', true);
             const params = {
                 email: state.email,
                 password: state.pasword
@@ -46,8 +106,16 @@ const store = {
 
             try {
                 const response = await axios.post(URL + '/login', params);
-                commit('setData', response.data);
+                if (response.status != 'OK') {
+                    commit('setLoading', false);
+
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data);
+
+                }
             } catch (error) {
+                commit('setLoading', false);
                 commit('setError', error);
             }
         },

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>

specimen-handling/components/left.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <v-container class="bg-white rounded-lg">
+          <v-row>
+            <v-col cols="5"
+              ><v-text-field
+                label="No reg/Nama"
+                variant="outlined"
+                hide-details
+                append-inner-icon="mdi-magnify"
+              ></v-text-field
+            ></v-col>
+            <v-col cols="5">
+              <v-autocomplete
+                label="Specimen"
+                variant="outlined"
+                hide-details
+                menu-icon="mdi-chevron-down"
+                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+              ></v-autocomplete>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="5">
+              <!-- <v-date-input label="Date input"></v-date-input> -->
+              <v-menu
+                v-model="menu"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+                min-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <!-- v-model="formatDate()" -->
+                  <v-text-field
+                    :model-value="formatDate()"
+                    label="Pilih Tanggal"
+                    prepend-inner-icon="mdi-calendar"
+                    hide-details
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  hide-header
+                  show-adjacent-months
+                  rounded="lg"
+                  color="primary"
+                  v-model="date"
+                  @update:modelValue="menu=false"
+                ></v-date-picker>
+              </v-menu>
+              <!-- <v-menu v-model="menu" transition="scale-transition">
+                <template v-slot:activator="{ props }">
+                  <v-text-field
+                    v-model="date"
+                    label="Pilih Tanggal"
+                    prepend-inner-icon="mdi-calendar"
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+
+                <div>klsajkls</div>
+              </v-menu> -->
+            </v-col>
+            <v-col cols="5">
+              <v-autocomplete
+                label="Kel. Pelanggan"
+                variant="outlined"
+                hide-details
+                menu-icon="mdi-chevron-down"
+                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2">
+              <div style="height: 100%;">
+                <v-row class="pt-3">
+                  <div
+                    style="height: 100%;"
+                    class="rounded-lg bg-primary pa-2 mr-2 h-100"
+                  >
+                    <!-- <v-icon icon="mdi-magnify"></v-icon> -->
+                    <!-- <Icon icon="" /> -->
+                    <iconify-icon
+                      style="font-size: 2rem;"
+                      icon="fluent:search-20-regular"
+                    ></iconify-icon>
+                  </div>
+
+                  <div class="rounded-lg bg-warning pa-2">
+                    <!-- <v-icon icon="mdi-magnify"></v-icon> -->
+                    <iconify-icon
+                      style="font-size: 2rem;"
+                      icon="fluent:arrow-download-20-regular"
+                    ></iconify-icon>
+                  </div>
+                </v-row>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+      <v-col cols="12">
+        <v-container class="bg-white rounded-lg">
+          <v-data-table
+            v-model="selectedItems"
+            :items="items"
+            :headers="headers"
+            show-select
+            return-object
+            hide-default-footer
+          >
+            <template
+              v-slot:header.data-table-select="{ allSelected, selectAll, someSelected }"
+            >
+              <v-checkbox-btn
+                :indeterminate="someSelected && !allSelected"
+                :model-value="allSelected"
+                color="primary"
+                @update:model-value="selectAll(!allSelected)"
+              ></v-checkbox-btn>
+            </template>
+
+            <template
+              v-slot:item.data-table-select="{ internalItem, isSelected, toggleSelect }"
+            >
+              <v-checkbox-btn
+                :model-value="isSelected(internalItem)"
+                color="primary"
+                @update:model-value="toggleSelect(internalItem)"
+              ></v-checkbox-btn>
+            </template>
+            <template
+              v-slot:item="{ item, isSelected, index, toggleSelect, internalItem }"
+            >
+              <tr>
+                <td class="px-2">
+                  <v-checkbox-btn
+                    :model-value="isSelected(internalItem)"
+                    color="primary"
+                    @update:model-value="toggleSelect(internalItem)"
+                  ></v-checkbox-btn>
+                </td>
+                <td>
+                  <p class="font-weight-medium">{{ item.mou }}</p>
+                </td>
+                <td>
+                  <div class="text-center">
+                    <p class="font-weight-medium">{{ item.noreg }}</p>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.orderdate }}
+                    </v-chip>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.regstaff }}
+                    </v-chip>
+                  </div>
+                </td>
+                <td>
+                  <p class="text-center">{{ item.pasienname }}</p>
+                </td>
+                <td>
+                  <div class="text-center">
+                    <p class="">{{ item.sample }}</p>
+                    <p class="font-weight-medium">{{ item.samplenumber }}</p>
+                    <v-chip class="ma-1" color="primary" size="small" label>
+                      {{ item.sampledate }}
+                    </v-chip>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.samplestaff }}
+                    </v-chip>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
+        </v-container>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "LeftSpecimen",
+    components: {},
+    mounted() {},
+    data() {
+      return {
+        menu: false,
+        visible: false,
+        items: [
+          {
+            mou: "Pasien Dokter",
+            noreg: "055000035LA",
+            orderdate: "01-08-2024 15:02",
+            orderdate: "01-08-2024 15:02",
+            regstaff: "NOVITA",
+            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
+            sample: "NaF 2JPP",
+            samplenumber: "055000035LAEL1",
+            sampledate: "01-08-2024 15:04",
+            samplestaff: "ADMIN WESTERINDO",
+          },
+          {
+            mou: "Pasien Dokter",
+            noreg: "055000036LA",
+            orderdate: "01-08-2024 15:02",
+            orderdate: "01-08-2024 15:02",
+            regstaff: "NOVITA",
+            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
+            sample: "NaF 2JPP",
+            samplenumber: "055000035LAEL1",
+            sampledate: "01-08-2024 15:04",
+            samplestaff: "ADMIN WESTERINDO",
+          },
+        ],
+        selectedItems: [],
+        headers: [
+          {
+            title: "KEL. PELANGGAN",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "25%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "NO REG",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "25%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "NAMA",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "25%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "BARCODE",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "25%",
+            class: "font-weight-bold",
+          },
+        ],
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      date: {
+        get() {
+          return this.$store.state.specimen.date;
+        },
+        set(val) {
+          this.$store.commit("specimen/setDate", val);
+          //   this.menu = false;
+          console.log(val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      formatDate() {
+        if (!this.date) return null;
+
+        return moment(this.date).format("DD-MM-YYYY");
+      },
+      deFormatedDate(date) {
+        if (!date) return null;
+
+        const [day, month, year] = date.split("-");
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+      },
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

specimen-handling/components/main.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-app id="inspire">
+    <one-navbar></one-navbar>
+    <v-main>
+      <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+        <v-row>
+          <v-col cols="12" md="6" sm="12" xs="12">
+            <one-left></one-left>
+          </v-col>
+          <v-col cols="12" md="6" sm="12" xs="12">
+            <one-right></one-right>
+          </v-col>
+        </v-row>
+      </div>
+    </v-main>
+  </v-app>
+</template>
+
+<script type="module">
+  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+  import LeftComponent from "./left.vue";
+  import RightComponent from "./right.vue";
+  export default {
+    name: "Specimen",
+    components: {
+      "one-navbar": NavbarComponent,
+      "one-left": LeftComponent,
+      "one-right": RightComponent,
+    },
+    mounted() {},
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

specimen-handling/components/right.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <v-container class="bg-white rounded-lg">
+          <v-row>
+            <v-col cols="5"
+              ><v-text-field
+                label="No reg/Nama"
+                variant="outlined"
+                hide-details
+                append-inner-icon="mdi-magnify"
+              ></v-text-field
+            ></v-col>
+            <v-col cols="5">
+              <v-autocomplete
+                label="Specimen"
+                variant="outlined"
+                hide-details
+                menu-icon="mdi-chevron-down"
+                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+              ></v-autocomplete>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="5">
+              <!-- <v-date-input label="Date input"></v-date-input> -->
+              <v-menu
+                v-model="menu"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+                min-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <!-- v-model="formatDate()" -->
+                  <v-text-field
+                    :model-value="formatDate()"
+                    label="Pilih Tanggal"
+                    prepend-inner-icon="mdi-calendar"
+                    hide-details
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  hide-header
+                  show-adjacent-months
+                  rounded="lg"
+                  color="primary"
+                  v-model="date"
+                  @update:modelValue="menu=false"
+                ></v-date-picker>
+              </v-menu>
+              <!-- <v-menu v-model="menu" transition="scale-transition">
+                <template v-slot:activator="{ props }">
+                  <v-text-field
+                    v-model="date"
+                    label="Pilih Tanggal"
+                    prepend-inner-icon="mdi-calendar"
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+
+                <div>klsajkls</div>
+              </v-menu> -->
+            </v-col>
+            <v-col cols="5">
+              <v-autocomplete
+                label="Kel. Pelanggan"
+                variant="outlined"
+                hide-details
+                menu-icon="mdi-chevron-down"
+                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2">
+              <div style="height: 100%;">
+                <v-row class="pt-3">
+                  <div
+                    style="height: 100%;"
+                    class="rounded-lg bg-primary pa-2 mr-2 h-100"
+                  >
+                    <iconify-icon
+                      class="text-center"
+                      style="font-size: 2rem;"
+                      icon="fluent:search-20-regular"
+                    ></iconify-icon>
+                  </div>
+                </v-row>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+      <v-col cols="12">
+        <v-container class="bg-white rounded-lg">
+          <v-data-table
+            v-model="selectedItems"
+            :items="items"
+            :headers="headers"
+            hide-default-footer
+          >
+            <template v-slot:item="{ item }">
+              <tr>
+                <td>
+                  <p class="font-weight-medium">{{ item.mou }}</p>
+                </td>
+                <td>
+                  <div class="text-center">
+                    <p class="font-weight-medium">{{ item.noreg }}</p>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.orderdate }}
+                    </v-chip>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.regstaff }}
+                    </v-chip>
+                  </div>
+                </td>
+                <td>
+                  <p class="text-center">{{ item.pasienname }}</p>
+                </td>
+                <td>
+                  <div class="text-center">
+                    <p class="">{{ item.sample }}</p>
+                    <p class="font-weight-medium">{{ item.samplenumber }}</p>
+                    <v-chip class="ma-1" color="primary" size="small" label>
+                      {{ item.sampledate }}
+                    </v-chip>
+                    <v-chip class="ma-1" size="small" label>
+                      {{ item.samplestaff }}
+                    </v-chip>
+                  </div>
+                </td>
+                <td>
+                  <!-- <v-sheet>
+                  
+                   
+                  </v-sheet> -->
+                  <v-row no-gutterss class="text-center">
+                    <v-col cols="6" class="pa-0">
+                      <v-btn icon="mdi-close" color="error" variant="plain">
+                      </v-btn
+                    ></v-col>
+                    <v-col cols="6" class="pa-0">
+                      <v-btn icon="mdi-export" color="success" variant="plain">
+                      </v-btn
+                    ></v-col>
+                  </v-row>
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
+        </v-container>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "LeftSpecimen",
+    components: {},
+    mounted() {},
+    data() {
+      return {
+        menu: false,
+        visible: false,
+        items: [
+          {
+            mou: "Pasien Dokter",
+            noreg: "055000035LA",
+            orderdate: "01-08-2024 15:02",
+            orderdate: "01-08-2024 15:02",
+            regstaff: "NOVITA",
+            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
+            sample: "NaF 2JPP",
+            samplenumber: "055000035LAEL1",
+            sampledate: "01-08-2024 15:04",
+            samplestaff: "ADMIN WESTERINDO",
+          },
+          {
+            mou: "Pasien Dokter",
+            noreg: "055000036LA",
+            orderdate: "01-08-2024 15:02",
+            orderdate: "01-08-2024 15:02",
+            regstaff: "NOVITA",
+            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
+            sample: "NaF 2JPP",
+            samplenumber: "055000035LAEL1",
+            sampledate: "01-08-2024 15:04",
+            samplestaff: "ADMIN WESTERINDO",
+          },
+        ],
+        selectedItems: [],
+        headers: [
+          {
+            title: "KEL. PELANGGAN",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "20%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "NO REG",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "20%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "NAMA",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "20%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "BARCODE",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "20%",
+            class: "font-weight-bold",
+          },
+          {
+            title: "PROSES",
+            align: "center",
+            sortable: false,
+            key: "name",
+            width: "20%",
+            class: "font-weight-bold",
+          },
+        ],
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      date: {
+        get() {
+          return this.$store.state.specimen.date;
+        },
+        set(val) {
+          this.$store.commit("specimen/setDate", val);
+          //   this.menu = false;
+          console.log(val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      formatDate() {
+        if (!this.date) return null;
+
+        return moment(this.date).format("DD-MM-YYYY");
+      },
+      deFormatedDate(date) {
+        if (!date) return null;
+
+        const [day, month, year] = date.split("-");
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+      },
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

specimen-handling/index.html

@@ -0,0 +1,126 @@
+<!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" />
+    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- Moment -->
+    <script src="../libraries/moment.js"></script>
+    <!-- Vue.js -->
+    <!-- DEV -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- PROD -->
+    <!-- <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>
+
+    <script src="../globalscript/theme.js"></script>
+    <script src="../globalscript/global.js"></script>
+    <!-- loader single file component -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+    <script src="./language.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+
+      import specimen from "./modules/specimen.js";
+      import system from "../globalstore/globalstore.js";
+
+      //   if (one_token()) {
+      //     let usr = JSON.parse(localStorage.getItem("user"));
+      //     location.replace("/" + usr.M_UserGroupDashboard);
+      //   }
+      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 = CustomMessages;
+
+      // 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
+      });
+      window.i18n = i18n;
+      moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          specimen: specimen,
+        },
+      });
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {
+            visible: false,
+            bg_src: "",
+            loading: false, // Initialize loading state
+          };
+        },
+
+        template: `
+            <main-component></main-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-component": "./components/main.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>

specimen-handling/language.js

@@ -0,0 +1,32 @@
+var CustomMessages = {
+    en: {
+        message: {
+            login: "Log in",
+            title: "Log in to your account",
+            sublogin: "Enter your details below",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+            msgInfo: 'Enter the registered account',
+            errorQuery: "Error get data",
+            invalid: "Invalid username / password"
+        },
+    },
+    id: {
+        message: {
+            login: "Masuk",
+            title: "Masuk ke akun Anda",
+            sublogin: "Masukkan detail Anda di bawah ini",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+            msgInfo: "Masukkan akun terdaftar",
+            errorQuery: "Gagal mendapatkan data",
+            invalid: "Nama pengguna / kata sandi tidak valid"
+        },
+    },
+};

specimen-handling/modules/specimen.js

@@ -0,0 +1,138 @@
+
+// const URL = "/westone-api/v1/system/auth";
+
+const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            // date: moment(new Date()).format("YYYY-MM-DD"),
+            // date: new Date().toISOString().substr(0, 10),
+            date: new Date(),
+            count: 0,
+            data: null,
+            email: "",
+            password: "",
+            dialog_success: false,
+            loading: false,
+            errorMessage: "",
+            iin: window.i18n.global.t('message.login'),
+            alert: {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
+        };
+    },
+    mutations: {
+        increment(state) {
+            state.count++;
+        },
+        decrement(state) {
+            state.count--;
+        },
+        setData(state, payload) {
+            state.data = payload;
+        },
+        setEmail(state, data) {
+            state.email = data;
+        },
+        setPassword(state, data) {
+            state.password = data;
+        },
+        setDialogSuccess(state, data) {
+            state.dialog_success = data;
+        },
+        setLoading(state, data) {
+            state.loading = data;
+        },
+        setAlert(state, data) {
+            state.alert = data;
+        },
+        setDate(state, data) {
+            state.date = data;
+        }
+    },
+    actions: {
+        increment({ commit }) {
+            commit('increment');
+        },
+        decrement({ commit }) {
+            commit('decrement');
+        },
+        async login({ state, commit }) {
+            commit('setLoading', true);
+            let alert = {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
+            let params = {
+                username: state.email,
+                password: state.password
+            };
+            console.log(params);
+            try {
+                const response = await axios.post(URL + '/login', params);
+                console.log(response.data)
+                if (response.data.status != 'OK') {
+                    commit('setLoading', false);
+                    if (response.data.message !== 'Invalid') {
+                        alert.message = window.i18n.global.t('message.errorQuery');
+                    } else {
+                        alert.message = window.i18n.global.t('message.invalid');
+                    }
+                    alert.type = "error"
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data.data);
+                    localStorage.setItem("token", response.data.data.token)
+                    localStorage.setItem('user', JSON.stringify(response.data.data.user))
+                    //console.log(localStorage.getItem("token"))
+                    // if (data.user.is_courier === 'Y' && window.innerWidth < 600)
+                    //     window.location = "/one-ui/test/vuex/one-courier-mobile/";
+                    // else
+                    // window.location = "/" + response.data.data.user.M_UserGroupDashboard;
+
+                }
+                commit('setAlert', alert)
+            } catch (error) {
+                console.log(error)
+                commit('setLoading', false);
+
+            }
+        },
+        async loginState({ state, commit }) {
+            commit('setLoading', true);
+            const params = {
+                email: state.email,
+                password: state.pasword
+            };
+
+            try {
+                const response = await axios.post(URL + '/login', params);
+                if (response.status != 'OK') {
+                    commit('setLoading', false);
+
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data);
+
+                }
+            } catch (error) {
+                commit('setLoading', false);
+                commit('setError', 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