css scroll Navbar Menu

Navbar Menu
specimen handling ui
2024-08-14 19:56:06 +07:00 · 2024-08-14 19:11:58 +07:00 · 2024-08-14 18:22:33 +07:00 · 2024-08-14 08:22:51 +07:00 · 2024-08-14 08:22:34 +07:00 · 2024-08-14 08:22:03 +07:00
25 changed files with 8042 additions and 33 deletions
--- a/css/styles.css
+++ b/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;
+}
+
--- a/globalcomponent/one-menu.vue
+++ b/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>
--- a/globalcomponent/one-navbar.vue
+++ b/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>
--- a/globalscript/global.js
+++ b/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
--- a/globalscript/theme.js
+++ b/globalscript/theme.js
@@ -11,9 +11,9 @@ var CustomTheme = {
            error: "#F44336",
            "error-lighten": "#FFEBEE",
            "error-darken": "#B71C1C",
-            info: "#3F51B5",
-            "info-lighten": "#E8EAF6",
-            "info-darken": "#1A237E",
+            info: "#00BCD4",
+            "info-lighten": "#E0F7FA",
+            "info-darken": "#006064",
            success: "#4CAF50",
            "success-lighten": "#E8F5E9",
            "success-darken": "#1B5E20",
--- a/globalstore/globalstore.js
+++ b/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
--- a/json/breadcumb.json
+++ b/json/breadcumb.json
@@ -0,0 +1,9 @@
+{
+    "status": "OK",
+    "data": {
+        "bread_crumb": "Menu",
+        "dashboard": "one-ui/test/vuex/one-fo-verification",
+        "is_page_allowed": true,
+        "branch": []
+    }
+}
--- a/json/jsonformatter.json
+++ b/json/jsonformatter.json
@@ -0,0 +1,811 @@
+{
+  "status": "OK",
+  "data": [
+    {
+      "p_0": [
+        {
+          "id": 1,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Front Office",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 114,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Laboratorium",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 115,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Radiodiagnostik",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 116,
+          "url": "#",
+          "icon": "flip_to_front",
+          "name": "Elektromedis",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 117,
+          "url": "#",
+          "icon": "healing",
+          "name": "Layanan Klinik",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 157,
+          "url": "#",
+          "icon": "healing",
+          "name": "MCU",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 131,
+          "url": "#",
+          "icon": "monetization_on",
+          "name": "Keuangan",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 31,
+          "url": "#",
+          "icon": "work",
+          "name": "Master Data",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        },
+        {
+          "id": 30,
+          "url": "test/vuex/one-report-v8/",
+          "icon": "description",
+          "name": "Laporan",
+          "level": 0,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 0
+        },
+        {
+          "id": 463,
+          "url": "#",
+          "icon": "work",
+          "name": "API",
+          "level": 0,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 0
+        }
+      ]
+    },
+    {
+      "p_1": [
+        {
+          "id": 455,
+          "url": "test/vuex/cpone-fo-registration-v12",
+          "icon": null,
+          "name": "Registration (Preregister)",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 489,
+          "url": "test/vuex/one-fo-cashier-cpone",
+          "icon": null,
+          "name": "Kasir",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 123,
+          "url": "test/vuex/one-patient-list-barcode-vv-6-cpone/",
+          "icon": null,
+          "name": "List Pasien",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 490,
+          "url": "test/vuex/one-result-handover/",
+          "icon": null,
+          "name": "Serah Terima hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 493,
+          "url": "test/vuex/one-send-email-cpone/",
+          "icon": null,
+          "name": "Kirim Email Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 495,
+          "url": "test/vuex/one-patient-list-nonlab-cpone/",
+          "icon": null,
+          "name": "List Pasien Nonlab",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 496,
+          "url": "test/vuex/cpone-nonlab-upload-document/",
+          "icon": null,
+          "name": "Nonlab Upload Document",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        },
+        {
+          "id": 492,
+          "url": "test/vuex/cpone-fo-supervisor/",
+          "icon": null,
+          "name": "Tambah & Ganti Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 1
+        }
+      ],
+      "p_31": [
+        {
+          "id": 32,
+          "url": "#",
+          "icon": null,
+          "name": "System",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        },
+        {
+          "id": 41,
+          "url": "#",
+          "icon": null,
+          "name": "Setting Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        },
+        {
+          "id": 68,
+          "url": "#",
+          "icon": null,
+          "name": "Klien dan Harga",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 31
+        }
+      ],
+      "p_114": [
+        {
+          "id": 459,
+          "url": "test/vuex/cpone-sample-lab-mobile-v6/",
+          "icon": "",
+          "name": "Specimen Collection Mobile",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        },
+        {
+          "id": 491,
+          "url": "test/vuex/cpone-patient-checkout/",
+          "icon": "",
+          "name": "Patient Checkout",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        },
+        {
+          "id": 84,
+          "url": "test/vuex/cpone-process-resultentry-v20/",
+          "icon": "",
+          "name": "Result Entry",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 114
+        }
+      ],
+      "p_115": [
+        {
+          "id": 104,
+          "url": "test/vuex/one-resultentry-so-xray-v8-cpone",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 115
+        }
+      ],
+      "p_116": [
+        {
+          "id": 122,
+          "url": "test/vuex/one-resultentry-so-electromedis-v8-cpone/",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 116
+        }
+      ],
+      "p_117": [
+        {
+          "id": 127,
+          "url": "test/vuex/cpone-resultentry-so-others-v2/",
+          "icon": null,
+          "name": "Dokumentasi Hasil",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 117
+        }
+      ],
+      "p_131": [
+        {
+          "id": 133,
+          "url": "test/vuex/cpone-bill/",
+          "icon": null,
+          "name": "Penagihan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        },
+        {
+          "id": 134,
+          "url": "test/vuex/cpone-bill-payment/",
+          "icon": null,
+          "name": "Pelunasan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        },
+        {
+          "id": 478,
+          "url": "test/vuex/cpone-bill-cancel/",
+          "icon": null,
+          "name": "Hapus Pemeriksaan",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 131
+        }
+      ],
+      "p_157": [
+        {
+          "id": 486,
+          "url": "test/vuex/cpone-sample-to-branch/",
+          "icon": null,
+          "name": "Surat Jalan Sample",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 206,
+          "url": "test/vuex/cpone-setup-mcu-v4/",
+          "icon": null,
+          "name": "Setup",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 207,
+          "url": "test/vuex/cpone-mcu-offline-preregister-v2/",
+          "icon": null,
+          "name": "Pre-Register (xls)",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 208,
+          "url": "test/vuex/one-mcu-offline-preregister-app-cponev2/",
+          "icon": null,
+          "name": "Pre-Register",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 158,
+          "url": "test/vuex/one-mcu-resume-individu-cpone/",
+          "icon": null,
+          "name": "Resume Individu",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 479,
+          "url": "test/vuex/one-admin-mcu/",
+          "icon": null,
+          "name": "Pengelolaan MCU",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 483,
+          "url": "test/vuex/cpone-mcu-officer/",
+          "icon": null,
+          "name": "MCU Officer",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 488,
+          "url": "test/vuex/cpone-so-template-additional/",
+          "icon": null,
+          "name": "Additional Fisik",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        },
+        {
+          "id": 475,
+          "url": "test/vuex/one-mcu-resume-individu-cponev2/",
+          "icon": null,
+          "name": "Resume Individu V2",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 157
+        }
+      ],
+      "p_248": [
+        {
+          "id": 260,
+          "url": "#",
+          "icon": null,
+          "name": "Laporan",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 248
+        }
+      ],
+      "p_329": [
+        {
+          "id": 330,
+          "url": "#",
+          "icon": null,
+          "name": "Masterdata",
+          "level": 1,
+          "state": false,
+          "is_parent": "Y",
+          "parent_id": 329
+        }
+      ],
+      "p_463": [
+        {
+          "id": 460,
+          "url": "test/vuex/cpone-result-status/",
+          "icon": null,
+          "name": "Api Result",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        },
+        {
+          "id": 458,
+          "url": "test/vuex/cpone-nattest-mapping/",
+          "icon": null,
+          "name": "Nat Test Mapping",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        },
+        {
+          "id": 494,
+          "url": "test/vuex/cpone-mcu-inject-old",
+          "icon": null,
+          "name": "Inject data Old",
+          "level": 1,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 463
+        }
+      ]
+    },
+    {
+      "p_32": [
+        {
+          "id": 33,
+          "url": "test/vuex/one-md-usergroup-user-v4/",
+          "icon": null,
+          "name": "User Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 470,
+          "url": "test/vuex/cpone-masterdata-doctor/",
+          "icon": null,
+          "name": "Doctor",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 34,
+          "url": "test/vuex/one-md-usergroup-user-v4/",
+          "icon": null,
+          "name": "User",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 240,
+          "url": "test/vuex/one-md-email-config-onhold",
+          "icon": null,
+          "name": "Konfigurasi Email (Invoice)",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 170,
+          "url": "test/vuex/one-md-email-config",
+          "icon": null,
+          "name": "Konfigurasi Email (Hasil)",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 35,
+          "url": "test/vuex/one-md-priviledge/",
+          "icon": null,
+          "name": "Hak Akses",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 36,
+          "url": "test/vuex/one-report-usergroup/",
+          "icon": null,
+          "name": "Report Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 39,
+          "url": "test/vuex/one-md-staff",
+          "icon": null,
+          "name": "Staff",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 40,
+          "url": "#",
+          "icon": null,
+          "name": "Configuration",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 171,
+          "url": "test/vuex/one-md-form/",
+          "icon": null,
+          "name": "No Dokumen",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 487,
+          "url": "test/vuex/cpone-masterdata-patient/",
+          "icon": null,
+          "name": "Patient",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 339,
+          "url": "test/vuex/one-md-report/",
+          "icon": null,
+          "name": "Setting Report",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 241,
+          "url": "test/vuex/one-md-bank/",
+          "icon": null,
+          "name": "Bank",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        },
+        {
+          "id": 172,
+          "url": "test/vuex/one-md-branch-v2/",
+          "icon": null,
+          "name": "Data Cabang",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 32
+        }
+      ],
+      "p_41": [
+        {
+          "id": 466,
+          "url": "test/vuex/cpone-group-result/",
+          "icon": null,
+          "name": "Group Result",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 43,
+          "url": "test/vuex/one-md-price-cpone/",
+          "icon": null,
+          "name": "Sub Group",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 467,
+          "url": "test/vuex/cpone-md-samplestation/",
+          "icon": null,
+          "name": "Sample Station",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 485,
+          "url": "test/vuex/cpone-md-location/",
+          "icon": null,
+          "name": "Lokasi",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 476,
+          "url": "test/vuex/one-md-advice-kelainan/",
+          "icon": "flip_to_front",
+          "name": "Saran Kelainan MCU",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 469,
+          "url": "test/vuex/cpone-md-bahan/",
+          "icon": null,
+          "name": "Bahan",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 468,
+          "url": "test/vuex/cpone-md-nat-bahan-sampletype/",
+          "icon": null,
+          "name": "Specimen",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 59,
+          "url": "test/vuex/one-md-test-nat-local-now/",
+          "icon": null,
+          "name": "Test",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 461,
+          "url": "test/vuex/cpone-md-requirement/",
+          "icon": null,
+          "name": "Requirement",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 465,
+          "url": "test/vuex/cpone-md-nonlab-template/",
+          "icon": "",
+          "name": "Non Lab Template",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 472,
+          "url": "test/vuex/cpone-md-pola-kelainan-nonlab/",
+          "icon": null,
+          "name": "Summary Kelainan Non Lab",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 471,
+          "url": "test/vuex/cpone-md-pola-kelainan/",
+          "icon": null,
+          "name": "Master Pola Kelainan",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 473,
+          "url": "test/vuex/cpone-md-kelainan-lab-v2/",
+          "icon": null,
+          "name": "Summary Kelainan Lab",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        },
+        {
+          "id": 477,
+          "url": "test/vuex/one-md-map-nonlab-mcu-result/",
+          "icon": null,
+          "name": "Nonlab Template MCU ",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 41
+        }
+      ],
+      "p_68": [
+        {
+          "id": 457,
+          "url": "test/vuex/one-md-price-cpone/",
+          "icon": null,
+          "name": "Harga",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 474,
+          "url": "test/vuex/cpone-masterdata-packet-v3/",
+          "icon": null,
+          "name": "Paket",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 462,
+          "url": "test/vuex/cpone-masterdata-corporate-v2/",
+          "icon": null,
+          "name": "Corporate",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 55,
+          "url": "test/vuex/one-klinik-fo-registration-v2",
+          "icon": null,
+          "name": "Pasien",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        },
+        {
+          "id": 143,
+          "url": "test/vuex/one-md-test-nat-local-now/",
+          "icon": null,
+          "name": "Test Nat Lokal ",
+          "level": 2,
+          "state": false,
+          "is_parent": "N",
+          "parent_id": 68
+        }
+      ]
+    }
+  ]
+}
--- a/libraries/moment.js
+++ b/libraries/moment.js
--- a/login-coba/components/main.vue
+++ b/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: {
--- a/login-coba/index.html
+++ b/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: `
-            <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>
--- a/loginv3/components/dekstop.vue
+++ b/loginv3/components/dekstop.vue
@@ -37,15 +37,17 @@
                      </p>
                    </v-sheet>
                  </div>
+                  <!-- bg-primary-lighten text-primary  -->
+                  <!-- icon="mdi-information-slab-circle-outline" -->
                  <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"
+                    :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"
@@ -87,7 +89,10 @@
                    >
                      {{ $t("message.login") }}
                      <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
+                        <!-- <v-progress-linear indeterminate></v-progress-linear> -->
+                        <v-progress-circular
+                          indeterminate
+                        ></v-progress-circular>
                      </template>
                    </v-btn>
                  </div>
@@ -111,8 +116,11 @@
    },
    computed: {
      // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
      },
      email: {
        get() {
@@ -133,6 +141,9 @@
    },
    methods: {
      // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
      increment() {
        this.$store.dispatch("increment");
      },
--- a/loginv3/components/login.vue
+++ b/loginv3/components/login.vue
@@ -18,6 +18,7 @@
      "mobile-component": MobileComponent,
      "dekstop-component": DekstopComponent,
    },
+    mounted() {},
    data() {
      return {
        visible: false,
--- a/loginv3/components/mobile.vue
+++ b/loginv3/components/mobile.vue
@@ -27,12 +27,11 @@
            </v-sheet>
          </div>
          <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"
+            :text="alert.message"
+            :type="alert.type"
+            class="mt-4 mb-3 w-100"
+            variant="tonal"
          >
          </v-alert>
          <v-text-field
@@ -76,7 +75,7 @@
            >
              {{ $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>
@@ -96,8 +95,11 @@
    },
    computed: {
      // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
      },
      email: {
        get() {
@@ -118,6 +120,9 @@
    },
    methods: {
      // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
      increment() {
        this.$store.dispatch("increment");
      },
--- a/loginv3/index.html
+++ b/loginv3/index.html
@@ -28,6 +28,7 @@
    <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>
@@ -36,11 +37,12 @@
      const { loadModule } = window["vue3-sfc-loader"];

      import login from "./modules/login.js";
-      const store = Vuex.createStore({
-        modules: {
-          login: login,
-        },
-      });
+      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,
@@ -69,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() {
--- a/loginv3/language.js
+++ b/loginv3/language.js
@@ -9,6 +9,9 @@ var CustomMessages = {
            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: {
@@ -21,6 +24,9 @@ var CustomMessages = {
            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"
        },
    },
 };
--- a/loginv3/modules/login.js
+++ b/loginv3/modules/login.js
@@ -1,6 +1,8 @@

 // const URL = "/westone-api/v1/system/auth";
-const URL = "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/";
+
+const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+
 const store = {
    namespaced: true,
    state() {
@@ -9,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: {
@@ -30,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: {
@@ -39,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
@@ -47,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);
            }
        },
--- a/menu/images/logo.png
+++ b/menu/images/logo.png
--- a/menu/index.html
+++ b/menu/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</title>
+    <!-- Vuetify CSS -->
+    <link href="../css/vuetify.css" rel="stylesheet" />
+    <!-- Local Stylesheet for Fonts -->
+    <link rel="stylesheet" href="../css/styles.css" />
+    <link href="../css/materialdesignicon.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <!-- Vue.js -->
+    <!-- <script src="https://unpkg.com/vue@next"></script> -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
+    <!-- Vuex -->
+    <script src="../libraries/vuex.js"></script>
+    <!-- Vuetify -->
+    <script src="../libraries/vuetify3.js"></script>
+    <!-- vue-i18n -->
+    <script src="../libraries/vue-i18n.global.js"></script>
+    <!-- Axios -->
+    <script src="../libraries/axios.js"></script>
+    <!-- Store JS -->
+    <!-- <script src="store.js"></script> -->
+    <!-- Component JS -->
+    <script src="../globalscript/theme.js"></script>
+    <!-- <script src="https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.iife.js"></script> -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+      import system from "../globalstore/globalstore.js";
+
+      // import theme from "./theme.js";
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+        },
+      });
+      const options = {
+        moduleCache: {
+          vue: Vue,
+        },
+        getFile(url) {
+          return fetch(url).then((response) =>
+            response.ok ? response.text() : Promise.reject(response)
+          );
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      // Locale messages
+      const messages = {
+        en: {
+          message: {
+            login: "Login",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+          },
+        },
+        id: {
+          message: {
+            login: "Masuk",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+          },
+        },
+      };
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback locale
+        messages, // Set locale messages
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        components: {
+        },
+
+        data() {
+          return {
+            visible: false,
+            bg_src: "./images/bg_cover.svg",
+            items: [
+              {
+                src: "./images/frame_1.svg",
+              },
+              {
+                src: "./images/frame_1.svg",
+              },
+            ],
+            loading: false, // Initialize loading state
+          };
+        },
+        template: ` 
+          <v-app>
+            <one-navbar></one-navbar>
+          </v-app>
+        `,
+      });
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "one-navbar": "../globalcomponent/one-navbar.vue"
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>
--- a/specimen-handling/components/left.vue
+++ b/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>
--- a/specimen-handling/components/main.vue
+++ b/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>
--- a/specimen-handling/components/right.vue
+++ b/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>
--- a/specimen-handling/index.html
+++ b/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>
--- a/specimen-handling/language.js
+++ b/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"
+        },
+    },
+};
--- a/specimen-handling/modules/specimen.js
+++ b/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
Author	SHA1	Message	Date
Stephen	4770be54f4	css scroll Navbar Menu	2024-08-14 19:56:06 +07:00
Stephen	9169cb492d	Navbar Menu	2024-08-14 19:11:58 +07:00
Sas Andy	a926cfa3b7	specimen handling ui	2024-08-14 18:22:33 +07:00
Sas Andy	83c805b4a7	api login v3	2024-08-14 08:22:51 +07:00
Sas Andy	f8ff853818	coba global component	2024-08-14 08:22:34 +07:00
Sas Andy	7fd7ed635e	theme	2024-08-14 08:22:03 +07:00
Sas Andy	387038cb2a	global component menu dan navbar	2024-08-14 08:21:56 +07:00
Sas Andy	a500a671a9	global script dan global store	2024-08-14 08:21:26 +07:00