update navigation all

Reviewed-on: #2

css/styles.css

@@ -27,13 +27,70 @@
 
 body {
   font-family: "Roboto", sans-serif;
+  background-color: #e5e8e5;
 }
 
-
 .scroll-container {
+  overflow: auto;
   scroll-padding: 50px 0 0 50px;
 }
 
+.scroll-container.horizontal::-webkit-scrollbar {
+  height: 7px; /* Mengubah tinggi scrollbar horizontal */
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+  background-color: #2196f3; /* Warna default */
+}
+
+.scroll-container.primary::-webkit-scrollbar-thumb {
+  background-color: #2196f3; /* primary */
+}
+
+.scroll-container.primary::-webkit-scrollbar-track {
+  background-color: #e3f2fd; /* primary */
+}
+
+.scroll-container.secondary::-webkit-scrollbar-thumb {
+  background-color: #ffc107; /* secondary */
+}
+
+.scroll-container.secondary::-webkit-scrollbar-track {
+  background-color: #fff8e1; /* secondary */
+}
+
+.scroll-container.error::-webkit-scrollbar-thumb {
+  background-color: #f44336; /* error */
+}
+
+.scroll-container.error::-webkit-scrollbar-track {
+  background-color: #ffebee; /* error */
+}
+
+.scroll-container.info::-webkit-scrollbar-thumb {
+  background-color: #3f51b5; /* info */
+}
+
+.scroll-container.info::-webkit-scrollbar-track {
+  background-color: #e8eaf6; /* info */
+}
+
+.scroll-container.success::-webkit-scrollbar-thumb {
+  background-color: #4caf50; /* success */
+}
+
+.scroll-container.success::-webkit-scrollbar-track {
+  background-color: ##e8f5e9; /* success */
+}
+
+.scroll-container.warning::-webkit-scrollbar-thumb {
+  background-color: #ff9800; /* success */
+}
+
+.scroll-container.warning::-webkit-scrollbar-track {
+  background-color: #fff3e0; /* success */
+}
+
 ::-webkit-scrollbar {
   width: 7px;
 }
@@ -41,21 +98,19 @@ body {
 /* this targets the default scrollbar (compulsory) */
 
 ::-webkit-scrollbar-track {
-  background-color: #E3F2FD;
+  background-color: #e3f2fd;
 }
 
 /* the new scrollbar will have a flat appearance with the set background color */
 
 ::-webkit-scrollbar-thumb {
-  background-color:  #2196F3;
+  background-color: #2196f3;
-  ;
 }
 
 /* this will style the thumb, ignoring the track */
 
 ::-webkit-scrollbar-button {
-  background-color:  #E3F2FD;
+  background-color: #e3f2fd;
-  ;
 }
 
 /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
@@ -63,4 +118,3 @@ body {
 ::-webkit-scrollbar-corner {
   background-color: black;
 }
-

globalcomponent/one-menu.vue

@@ -7,7 +7,7 @@
         </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 v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0)" 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" >
@@ -18,7 +18,7 @@
             </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 v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1)" 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 >
@@ -29,7 +29,7 @@
                 </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 class="" @click="goto(lev_2)"  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>
@@ -73,10 +73,19 @@ export default {
         this.$store.commit("system/update_drawer", val);
       },
     },
+    active_menu: {
+      get() {
+        return this.$store.state.system.active_menu;
+      },
+      set(menu) {
+        this.$store.commit("system/update_active_menu", menu);
+      }
+    }
   },
   methods: {
-    goto(url) {
+    goto(item) {
-      console.log("menuju ke- ", url)
+      console.log("menuju ke- ", item.url);
+      this.active_menu = item;
     }
   },
 };

globalcomponent/one-navbar.vue

@@ -1,46 +1,135 @@
 <template>
   <div>
-    <one-menu></one-menu>
+    <v-app-bar>
+      <!-- Slot prepend -->
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      </template>
 
-    <v-app-bar class="elevation-0">
+      <v-app-bar-title>WESTONE</v-app-bar-title>
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
-      <v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
+      <!-- Slot append -->
+      <template v-slot:append>
+        <v-menu v-model="menu" location="top start" origin="top start" transition="scale-transition">
+          <template v-slot:activator="{ props }">
+            <v-chip v-bind="props" class="ma-2" variant="text">
+              <v-icon icon="mdi-account-circle-outline" start></v-icon>
+              John Leider
+            </v-chip>
+          </template>
+
+          <v-card width="300">
+            <v-list bg-color="black">
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-avatar image="https://cdn.vuetifyjs.com/images/john.png"></v-avatar>
+                </template>
+
+                <v-list-item-title>John Leider</v-list-item-title>
+
+                <v-list-item-subtitle>john@google.com</v-list-item-subtitle>
+
+                <template v-slot:append>
+                  <v-list-item-action>
+                    <v-btn variant="text" icon @click="menu = false">
+                      <v-icon>mdi-close-circle</v-icon>
+                    </v-btn>
+                  </v-list-item-action>
+                </template>
+              </v-list-item>
+            </v-list>
+
+            <v-list>
+              <v-list-item prepend-icon="mdi-briefcase" link>
+                <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+
+       
+        <v-divider class="mx-2 " vertical></v-divider>
+        <v-menu :close-on-content-click="false" location="center">
+          <template v-slot:activator="{ props }">
+            <v-btn variant="tonal"  append-icon="mdi-open-in-new" class="text-none text-subtitle-1 ma-2" color="primary" flat small v-bind="props">
+              Quick Menu
+            </v-btn>
+          </template>
+          <v-card min-width="200" class="mx-auto">
+            <v-list density="compact" nav>
+              <v-list-subheader
+                class="font-bold text-high-emphasis text-uppercase font-weight-black">REPORTS</v-list-subheader>
+
+              <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary">
+                <template v-slot:prepend>
+                  <v-icon :icon="item.icon"></v-icon>
+                </template>
+
+                <v-list-item-title v-text="item.text"></v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+
+        </v-menu>
+      </template>
     </v-app-bar>
+
+
+    <!-- Bind v-model ke drawer dari Vuex -->
+    <v-navigation-drawer temporary v-model="drawer">
+      <v-list :lines="false" density="compact" nav>
+        <v-list-group active-color="primary" value="Admin">
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" title="Admin" prepend-icon="mdi-account-multiple-outline"></v-list-item>
+          </template>
+
+          <v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
+        </v-list-group>
+      </v-list>
+
+    </v-navigation-drawer>
+
   </div>
 </template>
+<script setup>
+import { ref } from 'vue'
 
+const menu = ref(false)
+const items = [
+  { text: 'Real-Time', icon: 'mdi-clock' },
+  { text: 'Audience', icon: 'mdi-account' },
+  { text: 'Conversions', icon: 'mdi-flag' },
+]
+</script>
 <script type="module">
 import MenuComponent from "./one-menu.vue";
+import QuickMenu from "./quick-menu.vue";
 
 export default {
   name: "NavbarComponent",
   components: {
     "one-menu": MenuComponent,
-  },
+    "quick-menu": QuickMenu,
-  mounted() {
-    console.log("drawer");
-    console.log(this.$store.state.system.drawer);
   },
   data() {
-    return {};
+    return {
+      drawer: false,
+      isUsersOpen: true,
+      admins: [
+        ['Management', 'mdi-account-multiple-outline'],
+        ['Settings', 'mdi-cog-outline'],
+      ],
+
+    };
   },
   computed: {
-    // Akses state dari store
+    // Akses state dari Vuex
     bread_crumb() {
-      return this.$store.state.system.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;
     },
@@ -50,6 +139,10 @@ export default {
     increment() {
       this.$store.dispatch("increment");
     },
+    toggleDrawer() {
+      this.drawer = !this.drawer;
+      console.log(this.drawer)
+    },
   },
 };
 </script>

globalcomponent/quick-menu.vue

@@ -0,0 +1,144 @@
+<template>
+    <div style="display: flex;
+  flex-direction: column; width:80%" class=" mx-2 my-1 mb-3">
+  
+    <v-card 
+    
+    ref="menuContainer" elevation="0"
+            v-click-outside="{
+                handler: onClickOutside,
+                include
+            }"
+      variant="flat">
+        <v-list-item class="px-2">
+        <!--<template v-slot:prepend>
+            <v-avatar class="pl-3" size="48">🎯</v-avatar>
+        </template>-->
+
+        <template v-slot:title> 
+            <div class="pa-0 pt-2 pb-2 scroll-container horizontal secondary" fluid style="overflow-x: auto; white-space: nowrap">
+                <v-text-field
+                    v-show="listing_menu"
+                    density="compact"
+                    label="Search Menu"
+                    variant="outlined"
+                    v-model="searchQuery" placeholder="Search menu..." @input="searchItems"
+                    hide-details
+                    single-line
+                    @click:append-inner="onClick"
+                    ref="searchInput"
+                ></v-text-field>
+                <v-btn
+                    v-show="!listing_menu"
+                    class="mr-2"
+                    size="small"
+                    :variant="active_menu.id === qmenu.id ? 'tonal' : 'text'"
+                    v-for="qmenu in qmenus"
+                    @click="redirect(qmenu)"
+                >
+                    {{ qmenu.name }}
+                </v-btn>
+            </div>
+        </template>
+
+        <template v-slot:append>
+            <v-btn  @click="showHideListingMenu()" v-show="listing_menu == false" icon="mdi-magnify" variant="text"></v-btn>
+            <v-btn  @click="showHideListingMenu()"  v-show="listing_menu === true" icon="mdi-close" variant="text"></v-btn>
+        </template>
+        </v-list-item>
+
+
+        <v-card-text  v-if="listing_menu" class="text-medium-emphasis">
+    
+        <v-list variant="text" v-if="listing_menu">
+
+                    <v-list-item
+                       class="included"
+                        v-for="(item, i) in limitedMenus"
+                        :key="i"
+                        :value="item"
+                        color="primary"
+                        @click="redirect(qmenu)"
+     
+                    >
+                        <template v-slot:prepend>
+                        <v-icon icon="mdi-arrow-forward"></v-icon>
+                        </template>
+
+                        <v-list-item-title v-text="item.name"></v-list-item-title>
+                    </v-list-item>
+                </v-list>
+     
+        </v-card-text>
+    </v-card>
+    </div>
+</template>
+
+<script type="module">
+    export default {
+        name: "QuickAccessComponent",
+        mounted() {
+            this.$store.dispatch('system/loadQuickMenu');
+        },
+        data() {
+            return {
+                pressed: false,
+                listing_menu:false,
+                searchQuery:'',
+                clickOutsideEnabled: false,
+            }
+        },
+        computed: {
+            qmenus() {
+                return this.$store.state.system.quick_menu;
+            },
+            active_menu: {
+                get() {
+                    return this.$store.state.system.active_menu;
+                },
+                set(menu) {
+                    this.$store.commit("system/update_active_menu", menu);
+                }
+            },
+            menus(){
+                return this.$store.state.system.quick_menu;
+            },
+            limitedMenus: {
+                get() {
+                    return this.$store.state.system.active_menu;
+                },
+                set(menu) {
+                    this.$store.commit("system/update_active_menu", menu);
+                }
+            }
+        },
+        methods: {
+            redirect(item) {
+                this.listing_menu = false
+                this.active_menu = item;
+                //console.log("redirect url ", item.url);
+            },
+            showHideListingMenu(){
+                let xnow = this.listing_menu
+                this.listing_menu = xnow?false:true
+                this.$nextTick(() => {
+                    if (this.listing_menu) {
+                        this.$refs.searchInput.focus(); // Fokuskan input setelah menu ditampilkan
+                    }
+                });
+            },
+            searchItems() {
+                this.limitedMenus = this.menus.filter(item => {
+                    return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ;
+                });
+            },
+            onClickOutside () {
+                this.listing_menu = false
+            },
+            include () {
+                return [document.querySelector('.included')]
+            },
+
+        },
+    }
+</script>

globalscript/theme.js

@@ -18,6 +18,9 @@ var CustomTheme = {
             "success-lighten": "#E8F5E9",
             "success-darken": "#1B5E20",
             white: "#FFFFFF",
+            grey: "#9E9E9E",
+            "grey-lighten-5": "#FAFAFA",
+            "grey-darken-1": "#757575"
         },
     },
 }

globalstore/globalstore.js

@@ -8,7 +8,9 @@ const store = {
             menu_level_0: [],
             menu_level_1: [],
             menu_level_2: [],
-            drawer: true,
+            quick_menu: [],
+            active_menu: {},
+            drawer: false,
             bread_crumb: "",
             search_error_message: "",
             branch: {},
@@ -44,6 +46,12 @@ const store = {
         update_drawer(state, payload) {
             state.drawer = payload;
         },
+        update_quick_menu(state, data) {
+            state.quick_menu = data;
+        },
+        update_active_menu(state, data) {
+            state.active_menu = data;
+        }
     },
     actions: {
         async loadMenuData(context) {
@@ -67,7 +75,6 @@ const store = {
                     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)
@@ -77,6 +84,20 @@ const store = {
                 console.error('Error loading menu data:', error);
             }
         },
+        async loadQuickMenu(context) {
+            try {
+                let resp = await axios.get(URL);
+                if (resp.data.status != "OK") {
+                    console.error('get api failed');
+                } else {
+                    let item = resp.data.data;
+                    if (item[1])
+                        context.commit("update_quick_menu", item[1]['p_1'])
+                }
+            } catch (error) {
+                console.error('Error load quick menu data', error);
+            }
+        }
     }
 };
 export default store

libraries/lodash.min.js

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+(function(){function n(n,t,r){switch(r.length){case 0:return n.call(t);case 1:return n.call(t,r[0]);case 2:return n.call(t,r[0],r[1]);case 3:return n.call(t,r[0],r[1],r[2])}return n.apply(t,r)}function t(n,t,r,e){for(var u=-1,i=null==n?0:n.length;++u<i;){var o=n[u];t(e,o,r(o),n)}return e}function r(n,t){for(var r=-1,e=null==n?0:n.length;++r<e&&t(n[r],r,n)!==!1;);return n}function e(n,t){for(var r=null==n?0:n.length;r--&&t(n[r],r,n)!==!1;);return n}function u(n,t){for(var r=-1,e=null==n?0:n.length;++r<e;)if(!t(n[r],r,n))return!1;
+    return!0}function i(n,t){for(var r=-1,e=null==n?0:n.length,u=0,i=[];++r<e;){var o=n[r];t(o,r,n)&&(i[u++]=o)}return i}function o(n,t){return!!(null==n?0:n.length)&&y(n,t,0)>-1}function f(n,t,r){for(var e=-1,u=null==n?0:n.length;++e<u;)if(r(t,n[e]))return!0;return!1}function c(n,t){for(var r=-1,e=null==n?0:n.length,u=Array(e);++r<e;)u[r]=t(n[r],r,n);return u}function a(n,t){for(var r=-1,e=t.length,u=n.length;++r<e;)n[u+r]=t[r];return n}function l(n,t,r,e){var u=-1,i=null==n?0:n.length;for(e&&i&&(r=n[++u]);++u<i;)r=t(r,n[u],u,n);
+    return r}function s(n,t,r,e){var u=null==n?0:n.length;for(e&&u&&(r=n[--u]);u--;)r=t(r,n[u],u,n);return r}function h(n,t){for(var r=-1,e=null==n?0:n.length;++r<e;)if(t(n[r],r,n))return!0;return!1}function p(n){return n.split("")}function _(n){return n.match($t)||[]}function v(n,t,r){var e;return r(n,function(n,r,u){if(t(n,r,u))return e=r,!1}),e}function g(n,t,r,e){for(var u=n.length,i=r+(e?1:-1);e?i--:++i<u;)if(t(n[i],i,n))return i;return-1}function y(n,t,r){return t===t?Z(n,t,r):g(n,b,r)}function d(n,t,r,e){
+    for(var u=r-1,i=n.length;++u<i;)if(e(n[u],t))return u;return-1}function b(n){return n!==n}function w(n,t){var r=null==n?0:n.length;return r?k(n,t)/r:Cn}function m(n){return function(t){return null==t?X:t[n]}}function x(n){return function(t){return null==n?X:n[t]}}function j(n,t,r,e,u){return u(n,function(n,u,i){r=e?(e=!1,n):t(r,n,u,i)}),r}function A(n,t){var r=n.length;for(n.sort(t);r--;)n[r]=n[r].value;return n}function k(n,t){for(var r,e=-1,u=n.length;++e<u;){var i=t(n[e]);i!==X&&(r=r===X?i:r+i);
+    }return r}function O(n,t){for(var r=-1,e=Array(n);++r<n;)e[r]=t(r);return e}function I(n,t){return c(t,function(t){return[t,n[t]]})}function R(n){return n?n.slice(0,H(n)+1).replace(Lt,""):n}function z(n){return function(t){return n(t)}}function E(n,t){return c(t,function(t){return n[t]})}function S(n,t){return n.has(t)}function W(n,t){for(var r=-1,e=n.length;++r<e&&y(t,n[r],0)>-1;);return r}function L(n,t){for(var r=n.length;r--&&y(t,n[r],0)>-1;);return r}function C(n,t){for(var r=n.length,e=0;r--;)n[r]===t&&++e;
+    return e}function U(n){return"\\"+Yr[n]}function B(n,t){return null==n?X:n[t]}function T(n){return Nr.test(n)}function $(n){return Pr.test(n)}function D(n){for(var t,r=[];!(t=n.next()).done;)r.push(t.value);return r}function M(n){var t=-1,r=Array(n.size);return n.forEach(function(n,e){r[++t]=[e,n]}),r}function F(n,t){return function(r){return n(t(r))}}function N(n,t){for(var r=-1,e=n.length,u=0,i=[];++r<e;){var o=n[r];o!==t&&o!==cn||(n[r]=cn,i[u++]=r)}return i}function P(n){var t=-1,r=Array(n.size);
+    return n.forEach(function(n){r[++t]=n}),r}function q(n){var t=-1,r=Array(n.size);return n.forEach(function(n){r[++t]=[n,n]}),r}function Z(n,t,r){for(var e=r-1,u=n.length;++e<u;)if(n[e]===t)return e;return-1}function K(n,t,r){for(var e=r+1;e--;)if(n[e]===t)return e;return e}function V(n){return T(n)?J(n):_e(n)}function G(n){return T(n)?Y(n):p(n)}function H(n){for(var t=n.length;t--&&Ct.test(n.charAt(t)););return t}function J(n){for(var t=Mr.lastIndex=0;Mr.test(n);)++t;return t}function Y(n){return n.match(Mr)||[];
+    }function Q(n){return n.match(Fr)||[]}var X,nn="4.17.21",tn=200,rn="Unsupported core-js use. Try https://npms.io/search?q=ponyfill.",en="Expected a function",un="Invalid `variable` option passed into `_.template`",on="__lodash_hash_undefined__",fn=500,cn="__lodash_placeholder__",an=1,ln=2,sn=4,hn=1,pn=2,_n=1,vn=2,gn=4,yn=8,dn=16,bn=32,wn=64,mn=128,xn=256,jn=512,An=30,kn="...",On=800,In=16,Rn=1,zn=2,En=3,Sn=1/0,Wn=9007199254740991,Ln=1.7976931348623157e308,Cn=NaN,Un=4294967295,Bn=Un-1,Tn=Un>>>1,$n=[["ary",mn],["bind",_n],["bindKey",vn],["curry",yn],["curryRight",dn],["flip",jn],["partial",bn],["partialRight",wn],["rearg",xn]],Dn="[object Arguments]",Mn="[object Array]",Fn="[object AsyncFunction]",Nn="[object Boolean]",Pn="[object Date]",qn="[object DOMException]",Zn="[object Error]",Kn="[object Function]",Vn="[object GeneratorFunction]",Gn="[object Map]",Hn="[object Number]",Jn="[object Null]",Yn="[object Object]",Qn="[object Promise]",Xn="[object Proxy]",nt="[object RegExp]",tt="[object Set]",rt="[object String]",et="[object Symbol]",ut="[object Undefined]",it="[object WeakMap]",ot="[object WeakSet]",ft="[object ArrayBuffer]",ct="[object DataView]",at="[object Float32Array]",lt="[object Float64Array]",st="[object Int8Array]",ht="[object Int16Array]",pt="[object Int32Array]",_t="[object Uint8Array]",vt="[object Uint8ClampedArray]",gt="[object Uint16Array]",yt="[object Uint32Array]",dt=/\b__p \+= '';/g,bt=/\b(__p \+=) '' \+/g,wt=/(__e\(.*?\)|\b__t\)) \+\n'';/g,mt=/&(?:amp|lt|gt|quot|#39);/g,xt=/[&<>"']/g,jt=RegExp(mt.source),At=RegExp(xt.source),kt=/<%-([\s\S]+?)%>/g,Ot=/<%([\s\S]+?)%>/g,It=/<%=([\s\S]+?)%>/g,Rt=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,zt=/^\w*$/,Et=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,St=/[\\^$.*+?()[\]{}|]/g,Wt=RegExp(St.source),Lt=/^\s+/,Ct=/\s/,Ut=/\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,Bt=/\{\n\/\* \[wrapped with (.+)\] \*/,Tt=/,? & /,$t=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g,Dt=/[()=,{}\[\]\/\s]/,Mt=/\\(\\)?/g,Ft=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,Nt=/\w*$/,Pt=/^[-+]0x[0-9a-f]+$/i,qt=/^0b[01]+$/i,Zt=/^\[object .+?Constructor\]$/,Kt=/^0o[0-7]+$/i,Vt=/^(?:0|[1-9]\d*)$/,Gt=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,Ht=/($^)/,Jt=/['\n\r\u2028\u2029\\]/g,Yt="\\ud800-\\udfff",Qt="\\u0300-\\u036f",Xt="\\ufe20-\\ufe2f",nr="\\u20d0-\\u20ff",tr=Qt+Xt+nr,rr="\\u2700-\\u27bf",er="a-z\\xdf-\\xf6\\xf8-\\xff",ur="\\xac\\xb1\\xd7\\xf7",ir="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",or="\\u2000-\\u206f",fr=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",cr="A-Z\\xc0-\\xd6\\xd8-\\xde",ar="\\ufe0e\\ufe0f",lr=ur+ir+or+fr,sr="['\u2019]",hr="["+Yt+"]",pr="["+lr+"]",_r="["+tr+"]",vr="\\d+",gr="["+rr+"]",yr="["+er+"]",dr="[^"+Yt+lr+vr+rr+er+cr+"]",br="\\ud83c[\\udffb-\\udfff]",wr="(?:"+_r+"|"+br+")",mr="[^"+Yt+"]",xr="(?:\\ud83c[\\udde6-\\uddff]){2}",jr="[\\ud800-\\udbff][\\udc00-\\udfff]",Ar="["+cr+"]",kr="\\u200d",Or="(?:"+yr+"|"+dr+")",Ir="(?:"+Ar+"|"+dr+")",Rr="(?:"+sr+"(?:d|ll|m|re|s|t|ve))?",zr="(?:"+sr+"(?:D|LL|M|RE|S|T|VE))?",Er=wr+"?",Sr="["+ar+"]?",Wr="(?:"+kr+"(?:"+[mr,xr,jr].join("|")+")"+Sr+Er+")*",Lr="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",Cr="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",Ur=Sr+Er+Wr,Br="(?:"+[gr,xr,jr].join("|")+")"+Ur,Tr="(?:"+[mr+_r+"?",_r,xr,jr,hr].join("|")+")",$r=RegExp(sr,"g"),Dr=RegExp(_r,"g"),Mr=RegExp(br+"(?="+br+")|"+Tr+Ur,"g"),Fr=RegExp([Ar+"?"+yr+"+"+Rr+"(?="+[pr,Ar,"$"].join("|")+")",Ir+"+"+zr+"(?="+[pr,Ar+Or,"$"].join("|")+")",Ar+"?"+Or+"+"+Rr,Ar+"+"+zr,Cr,Lr,vr,Br].join("|"),"g"),Nr=RegExp("["+kr+Yt+tr+ar+"]"),Pr=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,qr=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],Zr=-1,Kr={};
+    Kr[at]=Kr[lt]=Kr[st]=Kr[ht]=Kr[pt]=Kr[_t]=Kr[vt]=Kr[gt]=Kr[yt]=!0,Kr[Dn]=Kr[Mn]=Kr[ft]=Kr[Nn]=Kr[ct]=Kr[Pn]=Kr[Zn]=Kr[Kn]=Kr[Gn]=Kr[Hn]=Kr[Yn]=Kr[nt]=Kr[tt]=Kr[rt]=Kr[it]=!1;var Vr={};Vr[Dn]=Vr[Mn]=Vr[ft]=Vr[ct]=Vr[Nn]=Vr[Pn]=Vr[at]=Vr[lt]=Vr[st]=Vr[ht]=Vr[pt]=Vr[Gn]=Vr[Hn]=Vr[Yn]=Vr[nt]=Vr[tt]=Vr[rt]=Vr[et]=Vr[_t]=Vr[vt]=Vr[gt]=Vr[yt]=!0,Vr[Zn]=Vr[Kn]=Vr[it]=!1;var Gr={"\xc0":"A","\xc1":"A","\xc2":"A","\xc3":"A","\xc4":"A","\xc5":"A","\xe0":"a","\xe1":"a","\xe2":"a","\xe3":"a","\xe4":"a","\xe5":"a",
+    "\xc7":"C","\xe7":"c","\xd0":"D","\xf0":"d","\xc8":"E","\xc9":"E","\xca":"E","\xcb":"E","\xe8":"e","\xe9":"e","\xea":"e","\xeb":"e","\xcc":"I","\xcd":"I","\xce":"I","\xcf":"I","\xec":"i","\xed":"i","\xee":"i","\xef":"i","\xd1":"N","\xf1":"n","\xd2":"O","\xd3":"O","\xd4":"O","\xd5":"O","\xd6":"O","\xd8":"O","\xf2":"o","\xf3":"o","\xf4":"o","\xf5":"o","\xf6":"o","\xf8":"o","\xd9":"U","\xda":"U","\xdb":"U","\xdc":"U","\xf9":"u","\xfa":"u","\xfb":"u","\xfc":"u","\xdd":"Y","\xfd":"y","\xff":"y","\xc6":"Ae",
+    "\xe6":"ae","\xde":"Th","\xfe":"th","\xdf":"ss","\u0100":"A","\u0102":"A","\u0104":"A","\u0101":"a","\u0103":"a","\u0105":"a","\u0106":"C","\u0108":"C","\u010a":"C","\u010c":"C","\u0107":"c","\u0109":"c","\u010b":"c","\u010d":"c","\u010e":"D","\u0110":"D","\u010f":"d","\u0111":"d","\u0112":"E","\u0114":"E","\u0116":"E","\u0118":"E","\u011a":"E","\u0113":"e","\u0115":"e","\u0117":"e","\u0119":"e","\u011b":"e","\u011c":"G","\u011e":"G","\u0120":"G","\u0122":"G","\u011d":"g","\u011f":"g","\u0121":"g",
+    "\u0123":"g","\u0124":"H","\u0126":"H","\u0125":"h","\u0127":"h","\u0128":"I","\u012a":"I","\u012c":"I","\u012e":"I","\u0130":"I","\u0129":"i","\u012b":"i","\u012d":"i","\u012f":"i","\u0131":"i","\u0134":"J","\u0135":"j","\u0136":"K","\u0137":"k","\u0138":"k","\u0139":"L","\u013b":"L","\u013d":"L","\u013f":"L","\u0141":"L","\u013a":"l","\u013c":"l","\u013e":"l","\u0140":"l","\u0142":"l","\u0143":"N","\u0145":"N","\u0147":"N","\u014a":"N","\u0144":"n","\u0146":"n","\u0148":"n","\u014b":"n","\u014c":"O",
+    "\u014e":"O","\u0150":"O","\u014d":"o","\u014f":"o","\u0151":"o","\u0154":"R","\u0156":"R","\u0158":"R","\u0155":"r","\u0157":"r","\u0159":"r","\u015a":"S","\u015c":"S","\u015e":"S","\u0160":"S","\u015b":"s","\u015d":"s","\u015f":"s","\u0161":"s","\u0162":"T","\u0164":"T","\u0166":"T","\u0163":"t","\u0165":"t","\u0167":"t","\u0168":"U","\u016a":"U","\u016c":"U","\u016e":"U","\u0170":"U","\u0172":"U","\u0169":"u","\u016b":"u","\u016d":"u","\u016f":"u","\u0171":"u","\u0173":"u","\u0174":"W","\u0175":"w",
+    "\u0176":"Y","\u0177":"y","\u0178":"Y","\u0179":"Z","\u017b":"Z","\u017d":"Z","\u017a":"z","\u017c":"z","\u017e":"z","\u0132":"IJ","\u0133":"ij","\u0152":"Oe","\u0153":"oe","\u0149":"'n","\u017f":"s"},Hr={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},Jr={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'"},Yr={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Qr=parseFloat,Xr=parseInt,ne="object"==typeof global&&global&&global.Object===Object&&global,te="object"==typeof self&&self&&self.Object===Object&&self,re=ne||te||Function("return this")(),ee="object"==typeof exports&&exports&&!exports.nodeType&&exports,ue=ee&&"object"==typeof module&&module&&!module.nodeType&&module,ie=ue&&ue.exports===ee,oe=ie&&ne.process,fe=function(){
+    try{var n=ue&&ue.require&&ue.require("util").types;return n?n:oe&&oe.binding&&oe.binding("util")}catch(n){}}(),ce=fe&&fe.isArrayBuffer,ae=fe&&fe.isDate,le=fe&&fe.isMap,se=fe&&fe.isRegExp,he=fe&&fe.isSet,pe=fe&&fe.isTypedArray,_e=m("length"),ve=x(Gr),ge=x(Hr),ye=x(Jr),de=function p(x){function Z(n){if(cc(n)&&!bh(n)&&!(n instanceof Ct)){if(n instanceof Y)return n;if(bl.call(n,"__wrapped__"))return eo(n)}return new Y(n)}function J(){}function Y(n,t){this.__wrapped__=n,this.__actions__=[],this.__chain__=!!t,
+    this.__index__=0,this.__values__=X}function Ct(n){this.__wrapped__=n,this.__actions__=[],this.__dir__=1,this.__filtered__=!1,this.__iteratees__=[],this.__takeCount__=Un,this.__views__=[]}function $t(){var n=new Ct(this.__wrapped__);return n.__actions__=Tu(this.__actions__),n.__dir__=this.__dir__,n.__filtered__=this.__filtered__,n.__iteratees__=Tu(this.__iteratees__),n.__takeCount__=this.__takeCount__,n.__views__=Tu(this.__views__),n}function Yt(){if(this.__filtered__){var n=new Ct(this);n.__dir__=-1,
+    n.__filtered__=!0}else n=this.clone(),n.__dir__*=-1;return n}function Qt(){var n=this.__wrapped__.value(),t=this.__dir__,r=bh(n),e=t<0,u=r?n.length:0,i=Oi(0,u,this.__views__),o=i.start,f=i.end,c=f-o,a=e?f:o-1,l=this.__iteratees__,s=l.length,h=0,p=Hl(c,this.__takeCount__);if(!r||!e&&u==c&&p==c)return wu(n,this.__actions__);var _=[];n:for(;c--&&h<p;){a+=t;for(var v=-1,g=n[a];++v<s;){var y=l[v],d=y.iteratee,b=y.type,w=d(g);if(b==zn)g=w;else if(!w){if(b==Rn)continue n;break n}}_[h++]=g}return _}function Xt(n){
+    var t=-1,r=null==n?0:n.length;for(this.clear();++t<r;){var e=n[t];this.set(e[0],e[1])}}function nr(){this.__data__=is?is(null):{},this.size=0}function tr(n){var t=this.has(n)&&delete this.__data__[n];return this.size-=t?1:0,t}function rr(n){var t=this.__data__;if(is){var r=t[n];return r===on?X:r}return bl.call(t,n)?t[n]:X}function er(n){var t=this.__data__;return is?t[n]!==X:bl.call(t,n)}function ur(n,t){var r=this.__data__;return this.size+=this.has(n)?0:1,r[n]=is&&t===X?on:t,this}function ir(n){
+    var t=-1,r=null==n?0:n.length;for(this.clear();++t<r;){var e=n[t];this.set(e[0],e[1])}}function or(){this.__data__=[],this.size=0}function fr(n){var t=this.__data__,r=Wr(t,n);return!(r<0)&&(r==t.length-1?t.pop():Ll.call(t,r,1),--this.size,!0)}function cr(n){var t=this.__data__,r=Wr(t,n);return r<0?X:t[r][1]}function ar(n){return Wr(this.__data__,n)>-1}function lr(n,t){var r=this.__data__,e=Wr(r,n);return e<0?(++this.size,r.push([n,t])):r[e][1]=t,this}function sr(n){var t=-1,r=null==n?0:n.length;for(this.clear();++t<r;){
+    var e=n[t];this.set(e[0],e[1])}}function hr(){this.size=0,this.__data__={hash:new Xt,map:new(ts||ir),string:new Xt}}function pr(n){var t=xi(this,n).delete(n);return this.size-=t?1:0,t}function _r(n){return xi(this,n).get(n)}function vr(n){return xi(this,n).has(n)}function gr(n,t){var r=xi(this,n),e=r.size;return r.set(n,t),this.size+=r.size==e?0:1,this}function yr(n){var t=-1,r=null==n?0:n.length;for(this.__data__=new sr;++t<r;)this.add(n[t])}function dr(n){return this.__data__.set(n,on),this}function br(n){
+    return this.__data__.has(n)}function wr(n){this.size=(this.__data__=new ir(n)).size}function mr(){this.__data__=new ir,this.size=0}function xr(n){var t=this.__data__,r=t.delete(n);return this.size=t.size,r}function jr(n){return this.__data__.get(n)}function Ar(n){return this.__data__.has(n)}function kr(n,t){var r=this.__data__;if(r instanceof ir){var e=r.__data__;if(!ts||e.length<tn-1)return e.push([n,t]),this.size=++r.size,this;r=this.__data__=new sr(e)}return r.set(n,t),this.size=r.size,this}function Or(n,t){
+    var r=bh(n),e=!r&&dh(n),u=!r&&!e&&mh(n),i=!r&&!e&&!u&&Oh(n),o=r||e||u||i,f=o?O(n.length,hl):[],c=f.length;for(var a in n)!t&&!bl.call(n,a)||o&&("length"==a||u&&("offset"==a||"parent"==a)||i&&("buffer"==a||"byteLength"==a||"byteOffset"==a)||Ci(a,c))||f.push(a);return f}function Ir(n){var t=n.length;return t?n[tu(0,t-1)]:X}function Rr(n,t){return Xi(Tu(n),Mr(t,0,n.length))}function zr(n){return Xi(Tu(n))}function Er(n,t,r){(r===X||Gf(n[t],r))&&(r!==X||t in n)||Br(n,t,r)}function Sr(n,t,r){var e=n[t];
+    bl.call(n,t)&&Gf(e,r)&&(r!==X||t in n)||Br(n,t,r)}function Wr(n,t){for(var r=n.length;r--;)if(Gf(n[r][0],t))return r;return-1}function Lr(n,t,r,e){return ys(n,function(n,u,i){t(e,n,r(n),i)}),e}function Cr(n,t){return n&&$u(t,Pc(t),n)}function Ur(n,t){return n&&$u(t,qc(t),n)}function Br(n,t,r){"__proto__"==t&&Tl?Tl(n,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):n[t]=r}function Tr(n,t){for(var r=-1,e=t.length,u=il(e),i=null==n;++r<e;)u[r]=i?X:Mc(n,t[r]);return u}function Mr(n,t,r){return n===n&&(r!==X&&(n=n<=r?n:r),
+    t!==X&&(n=n>=t?n:t)),n}function Fr(n,t,e,u,i,o){var f,c=t&an,a=t&ln,l=t&sn;if(e&&(f=i?e(n,u,i,o):e(n)),f!==X)return f;if(!fc(n))return n;var s=bh(n);if(s){if(f=zi(n),!c)return Tu(n,f)}else{var h=zs(n),p=h==Kn||h==Vn;if(mh(n))return Iu(n,c);if(h==Yn||h==Dn||p&&!i){if(f=a||p?{}:Ei(n),!c)return a?Mu(n,Ur(f,n)):Du(n,Cr(f,n))}else{if(!Vr[h])return i?n:{};f=Si(n,h,c)}}o||(o=new wr);var _=o.get(n);if(_)return _;o.set(n,f),kh(n)?n.forEach(function(r){f.add(Fr(r,t,e,r,n,o))}):jh(n)&&n.forEach(function(r,u){
+    f.set(u,Fr(r,t,e,u,n,o))});var v=l?a?di:yi:a?qc:Pc,g=s?X:v(n);return r(g||n,function(r,u){g&&(u=r,r=n[u]),Sr(f,u,Fr(r,t,e,u,n,o))}),f}function Nr(n){var t=Pc(n);return function(r){return Pr(r,n,t)}}function Pr(n,t,r){var e=r.length;if(null==n)return!e;for(n=ll(n);e--;){var u=r[e],i=t[u],o=n[u];if(o===X&&!(u in n)||!i(o))return!1}return!0}function Gr(n,t,r){if("function"!=typeof n)throw new pl(en);return Ws(function(){n.apply(X,r)},t)}function Hr(n,t,r,e){var u=-1,i=o,a=!0,l=n.length,s=[],h=t.length;
+    if(!l)return s;r&&(t=c(t,z(r))),e?(i=f,a=!1):t.length>=tn&&(i=S,a=!1,t=new yr(t));n:for(;++u<l;){var p=n[u],_=null==r?p:r(p);if(p=e||0!==p?p:0,a&&_===_){for(var v=h;v--;)if(t[v]===_)continue n;s.push(p)}else i(t,_,e)||s.push(p)}return s}function Jr(n,t){var r=!0;return ys(n,function(n,e,u){return r=!!t(n,e,u)}),r}function Yr(n,t,r){for(var e=-1,u=n.length;++e<u;){var i=n[e],o=t(i);if(null!=o&&(f===X?o===o&&!bc(o):r(o,f)))var f=o,c=i}return c}function ne(n,t,r,e){var u=n.length;for(r=kc(r),r<0&&(r=-r>u?0:u+r),
+    e=e===X||e>u?u:kc(e),e<0&&(e+=u),e=r>e?0:Oc(e);r<e;)n[r++]=t;return n}function te(n,t){var r=[];return ys(n,function(n,e,u){t(n,e,u)&&r.push(n)}),r}function ee(n,t,r,e,u){var i=-1,o=n.length;for(r||(r=Li),u||(u=[]);++i<o;){var f=n[i];t>0&&r(f)?t>1?ee(f,t-1,r,e,u):a(u,f):e||(u[u.length]=f)}return u}function ue(n,t){return n&&bs(n,t,Pc)}function oe(n,t){return n&&ws(n,t,Pc)}function fe(n,t){return i(t,function(t){return uc(n[t])})}function _e(n,t){t=ku(t,n);for(var r=0,e=t.length;null!=n&&r<e;)n=n[no(t[r++])];
+    return r&&r==e?n:X}function de(n,t,r){var e=t(n);return bh(n)?e:a(e,r(n))}function we(n){return null==n?n===X?ut:Jn:Bl&&Bl in ll(n)?ki(n):Ki(n)}function me(n,t){return n>t}function xe(n,t){return null!=n&&bl.call(n,t)}function je(n,t){return null!=n&&t in ll(n)}function Ae(n,t,r){return n>=Hl(t,r)&&n<Gl(t,r)}function ke(n,t,r){for(var e=r?f:o,u=n[0].length,i=n.length,a=i,l=il(i),s=1/0,h=[];a--;){var p=n[a];a&&t&&(p=c(p,z(t))),s=Hl(p.length,s),l[a]=!r&&(t||u>=120&&p.length>=120)?new yr(a&&p):X}p=n[0];
+    var _=-1,v=l[0];n:for(;++_<u&&h.length<s;){var g=p[_],y=t?t(g):g;if(g=r||0!==g?g:0,!(v?S(v,y):e(h,y,r))){for(a=i;--a;){var d=l[a];if(!(d?S(d,y):e(n[a],y,r)))continue n}v&&v.push(y),h.push(g)}}return h}function Oe(n,t,r,e){return ue(n,function(n,u,i){t(e,r(n),u,i)}),e}function Ie(t,r,e){r=ku(r,t),t=Gi(t,r);var u=null==t?t:t[no(jo(r))];return null==u?X:n(u,t,e)}function Re(n){return cc(n)&&we(n)==Dn}function ze(n){return cc(n)&&we(n)==ft}function Ee(n){return cc(n)&&we(n)==Pn}function Se(n,t,r,e,u){
+    return n===t||(null==n||null==t||!cc(n)&&!cc(t)?n!==n&&t!==t:We(n,t,r,e,Se,u))}function We(n,t,r,e,u,i){var o=bh(n),f=bh(t),c=o?Mn:zs(n),a=f?Mn:zs(t);c=c==Dn?Yn:c,a=a==Dn?Yn:a;var l=c==Yn,s=a==Yn,h=c==a;if(h&&mh(n)){if(!mh(t))return!1;o=!0,l=!1}if(h&&!l)return i||(i=new wr),o||Oh(n)?pi(n,t,r,e,u,i):_i(n,t,c,r,e,u,i);if(!(r&hn)){var p=l&&bl.call(n,"__wrapped__"),_=s&&bl.call(t,"__wrapped__");if(p||_){var v=p?n.value():n,g=_?t.value():t;return i||(i=new wr),u(v,g,r,e,i)}}return!!h&&(i||(i=new wr),vi(n,t,r,e,u,i));
+    }function Le(n){return cc(n)&&zs(n)==Gn}function Ce(n,t,r,e){var u=r.length,i=u,o=!e;if(null==n)return!i;for(n=ll(n);u--;){var f=r[u];if(o&&f[2]?f[1]!==n[f[0]]:!(f[0]in n))return!1}for(;++u<i;){f=r[u];var c=f[0],a=n[c],l=f[1];if(o&&f[2]){if(a===X&&!(c in n))return!1}else{var s=new wr;if(e)var h=e(a,l,c,n,t,s);if(!(h===X?Se(l,a,hn|pn,e,s):h))return!1}}return!0}function Ue(n){return!(!fc(n)||Di(n))&&(uc(n)?kl:Zt).test(to(n))}function Be(n){return cc(n)&&we(n)==nt}function Te(n){return cc(n)&&zs(n)==tt;
+    }function $e(n){return cc(n)&&oc(n.length)&&!!Kr[we(n)]}function De(n){return"function"==typeof n?n:null==n?La:"object"==typeof n?bh(n)?Ze(n[0],n[1]):qe(n):Fa(n)}function Me(n){if(!Mi(n))return Vl(n);var t=[];for(var r in ll(n))bl.call(n,r)&&"constructor"!=r&&t.push(r);return t}function Fe(n){if(!fc(n))return Zi(n);var t=Mi(n),r=[];for(var e in n)("constructor"!=e||!t&&bl.call(n,e))&&r.push(e);return r}function Ne(n,t){return n<t}function Pe(n,t){var r=-1,e=Hf(n)?il(n.length):[];return ys(n,function(n,u,i){
+    e[++r]=t(n,u,i)}),e}function qe(n){var t=ji(n);return 1==t.length&&t[0][2]?Ni(t[0][0],t[0][1]):function(r){return r===n||Ce(r,n,t)}}function Ze(n,t){return Bi(n)&&Fi(t)?Ni(no(n),t):function(r){var e=Mc(r,n);return e===X&&e===t?Nc(r,n):Se(t,e,hn|pn)}}function Ke(n,t,r,e,u){n!==t&&bs(t,function(i,o){if(u||(u=new wr),fc(i))Ve(n,t,o,r,Ke,e,u);else{var f=e?e(Ji(n,o),i,o+"",n,t,u):X;f===X&&(f=i),Er(n,o,f)}},qc)}function Ve(n,t,r,e,u,i,o){var f=Ji(n,r),c=Ji(t,r),a=o.get(c);if(a)return Er(n,r,a),X;var l=i?i(f,c,r+"",n,t,o):X,s=l===X;
+    if(s){var h=bh(c),p=!h&&mh(c),_=!h&&!p&&Oh(c);l=c,h||p||_?bh(f)?l=f:Jf(f)?l=Tu(f):p?(s=!1,l=Iu(c,!0)):_?(s=!1,l=Wu(c,!0)):l=[]:gc(c)||dh(c)?(l=f,dh(f)?l=Rc(f):fc(f)&&!uc(f)||(l=Ei(c))):s=!1}s&&(o.set(c,l),u(l,c,e,i,o),o.delete(c)),Er(n,r,l)}function Ge(n,t){var r=n.length;if(r)return t+=t<0?r:0,Ci(t,r)?n[t]:X}function He(n,t,r){t=t.length?c(t,function(n){return bh(n)?function(t){return _e(t,1===n.length?n[0]:n)}:n}):[La];var e=-1;return t=c(t,z(mi())),A(Pe(n,function(n,r,u){return{criteria:c(t,function(t){
+    return t(n)}),index:++e,value:n}}),function(n,t){return Cu(n,t,r)})}function Je(n,t){return Ye(n,t,function(t,r){return Nc(n,r)})}function Ye(n,t,r){for(var e=-1,u=t.length,i={};++e<u;){var o=t[e],f=_e(n,o);r(f,o)&&fu(i,ku(o,n),f)}return i}function Qe(n){return function(t){return _e(t,n)}}function Xe(n,t,r,e){var u=e?d:y,i=-1,o=t.length,f=n;for(n===t&&(t=Tu(t)),r&&(f=c(n,z(r)));++i<o;)for(var a=0,l=t[i],s=r?r(l):l;(a=u(f,s,a,e))>-1;)f!==n&&Ll.call(f,a,1),Ll.call(n,a,1);return n}function nu(n,t){for(var r=n?t.length:0,e=r-1;r--;){
+    var u=t[r];if(r==e||u!==i){var i=u;Ci(u)?Ll.call(n,u,1):yu(n,u)}}return n}function tu(n,t){return n+Nl(Ql()*(t-n+1))}function ru(n,t,r,e){for(var u=-1,i=Gl(Fl((t-n)/(r||1)),0),o=il(i);i--;)o[e?i:++u]=n,n+=r;return o}function eu(n,t){var r="";if(!n||t<1||t>Wn)return r;do t%2&&(r+=n),t=Nl(t/2),t&&(n+=n);while(t);return r}function uu(n,t){return Ls(Vi(n,t,La),n+"")}function iu(n){return Ir(ra(n))}function ou(n,t){var r=ra(n);return Xi(r,Mr(t,0,r.length))}function fu(n,t,r,e){if(!fc(n))return n;t=ku(t,n);
+    for(var u=-1,i=t.length,o=i-1,f=n;null!=f&&++u<i;){var c=no(t[u]),a=r;if("__proto__"===c||"constructor"===c||"prototype"===c)return n;if(u!=o){var l=f[c];a=e?e(l,c,f):X,a===X&&(a=fc(l)?l:Ci(t[u+1])?[]:{})}Sr(f,c,a),f=f[c]}return n}function cu(n){return Xi(ra(n))}function au(n,t,r){var e=-1,u=n.length;t<0&&(t=-t>u?0:u+t),r=r>u?u:r,r<0&&(r+=u),u=t>r?0:r-t>>>0,t>>>=0;for(var i=il(u);++e<u;)i[e]=n[e+t];return i}function lu(n,t){var r;return ys(n,function(n,e,u){return r=t(n,e,u),!r}),!!r}function su(n,t,r){
+    var e=0,u=null==n?e:n.length;if("number"==typeof t&&t===t&&u<=Tn){for(;e<u;){var i=e+u>>>1,o=n[i];null!==o&&!bc(o)&&(r?o<=t:o<t)?e=i+1:u=i}return u}return hu(n,t,La,r)}function hu(n,t,r,e){var u=0,i=null==n?0:n.length;if(0===i)return 0;t=r(t);for(var o=t!==t,f=null===t,c=bc(t),a=t===X;u<i;){var l=Nl((u+i)/2),s=r(n[l]),h=s!==X,p=null===s,_=s===s,v=bc(s);if(o)var g=e||_;else g=a?_&&(e||h):f?_&&h&&(e||!p):c?_&&h&&!p&&(e||!v):!p&&!v&&(e?s<=t:s<t);g?u=l+1:i=l}return Hl(i,Bn)}function pu(n,t){for(var r=-1,e=n.length,u=0,i=[];++r<e;){
+    var o=n[r],f=t?t(o):o;if(!r||!Gf(f,c)){var c=f;i[u++]=0===o?0:o}}return i}function _u(n){return"number"==typeof n?n:bc(n)?Cn:+n}function vu(n){if("string"==typeof n)return n;if(bh(n))return c(n,vu)+"";if(bc(n))return vs?vs.call(n):"";var t=n+"";return"0"==t&&1/n==-Sn?"-0":t}function gu(n,t,r){var e=-1,u=o,i=n.length,c=!0,a=[],l=a;if(r)c=!1,u=f;else if(i>=tn){var s=t?null:ks(n);if(s)return P(s);c=!1,u=S,l=new yr}else l=t?[]:a;n:for(;++e<i;){var h=n[e],p=t?t(h):h;if(h=r||0!==h?h:0,c&&p===p){for(var _=l.length;_--;)if(l[_]===p)continue n;
+    t&&l.push(p),a.push(h)}else u(l,p,r)||(l!==a&&l.push(p),a.push(h))}return a}function yu(n,t){return t=ku(t,n),n=Gi(n,t),null==n||delete n[no(jo(t))]}function du(n,t,r,e){return fu(n,t,r(_e(n,t)),e)}function bu(n,t,r,e){for(var u=n.length,i=e?u:-1;(e?i--:++i<u)&&t(n[i],i,n););return r?au(n,e?0:i,e?i+1:u):au(n,e?i+1:0,e?u:i)}function wu(n,t){var r=n;return r instanceof Ct&&(r=r.value()),l(t,function(n,t){return t.func.apply(t.thisArg,a([n],t.args))},r)}function mu(n,t,r){var e=n.length;if(e<2)return e?gu(n[0]):[];
+    for(var u=-1,i=il(e);++u<e;)for(var o=n[u],f=-1;++f<e;)f!=u&&(i[u]=Hr(i[u]||o,n[f],t,r));return gu(ee(i,1),t,r)}function xu(n,t,r){for(var e=-1,u=n.length,i=t.length,o={};++e<u;){r(o,n[e],e<i?t[e]:X)}return o}function ju(n){return Jf(n)?n:[]}function Au(n){return"function"==typeof n?n:La}function ku(n,t){return bh(n)?n:Bi(n,t)?[n]:Cs(Ec(n))}function Ou(n,t,r){var e=n.length;return r=r===X?e:r,!t&&r>=e?n:au(n,t,r)}function Iu(n,t){if(t)return n.slice();var r=n.length,e=zl?zl(r):new n.constructor(r);
+    return n.copy(e),e}function Ru(n){var t=new n.constructor(n.byteLength);return new Rl(t).set(new Rl(n)),t}function zu(n,t){return new n.constructor(t?Ru(n.buffer):n.buffer,n.byteOffset,n.byteLength)}function Eu(n){var t=new n.constructor(n.source,Nt.exec(n));return t.lastIndex=n.lastIndex,t}function Su(n){return _s?ll(_s.call(n)):{}}function Wu(n,t){return new n.constructor(t?Ru(n.buffer):n.buffer,n.byteOffset,n.length)}function Lu(n,t){if(n!==t){var r=n!==X,e=null===n,u=n===n,i=bc(n),o=t!==X,f=null===t,c=t===t,a=bc(t);
+    if(!f&&!a&&!i&&n>t||i&&o&&c&&!f&&!a||e&&o&&c||!r&&c||!u)return 1;if(!e&&!i&&!a&&n<t||a&&r&&u&&!e&&!i||f&&r&&u||!o&&u||!c)return-1}return 0}function Cu(n,t,r){for(var e=-1,u=n.criteria,i=t.criteria,o=u.length,f=r.length;++e<o;){var c=Lu(u[e],i[e]);if(c){if(e>=f)return c;return c*("desc"==r[e]?-1:1)}}return n.index-t.index}function Uu(n,t,r,e){for(var u=-1,i=n.length,o=r.length,f=-1,c=t.length,a=Gl(i-o,0),l=il(c+a),s=!e;++f<c;)l[f]=t[f];for(;++u<o;)(s||u<i)&&(l[r[u]]=n[u]);for(;a--;)l[f++]=n[u++];return l;
+    }function Bu(n,t,r,e){for(var u=-1,i=n.length,o=-1,f=r.length,c=-1,a=t.length,l=Gl(i-f,0),s=il(l+a),h=!e;++u<l;)s[u]=n[u];for(var p=u;++c<a;)s[p+c]=t[c];for(;++o<f;)(h||u<i)&&(s[p+r[o]]=n[u++]);return s}function Tu(n,t){var r=-1,e=n.length;for(t||(t=il(e));++r<e;)t[r]=n[r];return t}function $u(n,t,r,e){var u=!r;r||(r={});for(var i=-1,o=t.length;++i<o;){var f=t[i],c=e?e(r[f],n[f],f,r,n):X;c===X&&(c=n[f]),u?Br(r,f,c):Sr(r,f,c)}return r}function Du(n,t){return $u(n,Is(n),t)}function Mu(n,t){return $u(n,Rs(n),t);
+    }function Fu(n,r){return function(e,u){var i=bh(e)?t:Lr,o=r?r():{};return i(e,n,mi(u,2),o)}}function Nu(n){return uu(function(t,r){var e=-1,u=r.length,i=u>1?r[u-1]:X,o=u>2?r[2]:X;for(i=n.length>3&&"function"==typeof i?(u--,i):X,o&&Ui(r[0],r[1],o)&&(i=u<3?X:i,u=1),t=ll(t);++e<u;){var f=r[e];f&&n(t,f,e,i)}return t})}function Pu(n,t){return function(r,e){if(null==r)return r;if(!Hf(r))return n(r,e);for(var u=r.length,i=t?u:-1,o=ll(r);(t?i--:++i<u)&&e(o[i],i,o)!==!1;);return r}}function qu(n){return function(t,r,e){
+    for(var u=-1,i=ll(t),o=e(t),f=o.length;f--;){var c=o[n?f:++u];if(r(i[c],c,i)===!1)break}return t}}function Zu(n,t,r){function e(){return(this&&this!==re&&this instanceof e?i:n).apply(u?r:this,arguments)}var u=t&_n,i=Gu(n);return e}function Ku(n){return function(t){t=Ec(t);var r=T(t)?G(t):X,e=r?r[0]:t.charAt(0),u=r?Ou(r,1).join(""):t.slice(1);return e[n]()+u}}function Vu(n){return function(t){return l(Ra(ca(t).replace($r,"")),n,"")}}function Gu(n){return function(){var t=arguments;switch(t.length){
+    case 0:return new n;case 1:return new n(t[0]);case 2:return new n(t[0],t[1]);case 3:return new n(t[0],t[1],t[2]);case 4:return new n(t[0],t[1],t[2],t[3]);case 5:return new n(t[0],t[1],t[2],t[3],t[4]);case 6:return new n(t[0],t[1],t[2],t[3],t[4],t[5]);case 7:return new n(t[0],t[1],t[2],t[3],t[4],t[5],t[6])}var r=gs(n.prototype),e=n.apply(r,t);return fc(e)?e:r}}function Hu(t,r,e){function u(){for(var o=arguments.length,f=il(o),c=o,a=wi(u);c--;)f[c]=arguments[c];var l=o<3&&f[0]!==a&&f[o-1]!==a?[]:N(f,a);
+    return o-=l.length,o<e?oi(t,r,Qu,u.placeholder,X,f,l,X,X,e-o):n(this&&this!==re&&this instanceof u?i:t,this,f)}var i=Gu(t);return u}function Ju(n){return function(t,r,e){var u=ll(t);if(!Hf(t)){var i=mi(r,3);t=Pc(t),r=function(n){return i(u[n],n,u)}}var o=n(t,r,e);return o>-1?u[i?t[o]:o]:X}}function Yu(n){return gi(function(t){var r=t.length,e=r,u=Y.prototype.thru;for(n&&t.reverse();e--;){var i=t[e];if("function"!=typeof i)throw new pl(en);if(u&&!o&&"wrapper"==bi(i))var o=new Y([],!0)}for(e=o?e:r;++e<r;){
+    i=t[e];var f=bi(i),c="wrapper"==f?Os(i):X;o=c&&$i(c[0])&&c[1]==(mn|yn|bn|xn)&&!c[4].length&&1==c[9]?o[bi(c[0])].apply(o,c[3]):1==i.length&&$i(i)?o[f]():o.thru(i)}return function(){var n=arguments,e=n[0];if(o&&1==n.length&&bh(e))return o.plant(e).value();for(var u=0,i=r?t[u].apply(this,n):e;++u<r;)i=t[u].call(this,i);return i}})}function Qu(n,t,r,e,u,i,o,f,c,a){function l(){for(var y=arguments.length,d=il(y),b=y;b--;)d[b]=arguments[b];if(_)var w=wi(l),m=C(d,w);if(e&&(d=Uu(d,e,u,_)),i&&(d=Bu(d,i,o,_)),
+    y-=m,_&&y<a){return oi(n,t,Qu,l.placeholder,r,d,N(d,w),f,c,a-y)}var x=h?r:this,j=p?x[n]:n;return y=d.length,f?d=Hi(d,f):v&&y>1&&d.reverse(),s&&c<y&&(d.length=c),this&&this!==re&&this instanceof l&&(j=g||Gu(j)),j.apply(x,d)}var s=t&mn,h=t&_n,p=t&vn,_=t&(yn|dn),v=t&jn,g=p?X:Gu(n);return l}function Xu(n,t){return function(r,e){return Oe(r,n,t(e),{})}}function ni(n,t){return function(r,e){var u;if(r===X&&e===X)return t;if(r!==X&&(u=r),e!==X){if(u===X)return e;"string"==typeof r||"string"==typeof e?(r=vu(r),
+    e=vu(e)):(r=_u(r),e=_u(e)),u=n(r,e)}return u}}function ti(t){return gi(function(r){return r=c(r,z(mi())),uu(function(e){var u=this;return t(r,function(t){return n(t,u,e)})})})}function ri(n,t){t=t===X?" ":vu(t);var r=t.length;if(r<2)return r?eu(t,n):t;var e=eu(t,Fl(n/V(t)));return T(t)?Ou(G(e),0,n).join(""):e.slice(0,n)}function ei(t,r,e,u){function i(){for(var r=-1,c=arguments.length,a=-1,l=u.length,s=il(l+c),h=this&&this!==re&&this instanceof i?f:t;++a<l;)s[a]=u[a];for(;c--;)s[a++]=arguments[++r];
+    return n(h,o?e:this,s)}var o=r&_n,f=Gu(t);return i}function ui(n){return function(t,r,e){return e&&"number"!=typeof e&&Ui(t,r,e)&&(r=e=X),t=Ac(t),r===X?(r=t,t=0):r=Ac(r),e=e===X?t<r?1:-1:Ac(e),ru(t,r,e,n)}}function ii(n){return function(t,r){return"string"==typeof t&&"string"==typeof r||(t=Ic(t),r=Ic(r)),n(t,r)}}function oi(n,t,r,e,u,i,o,f,c,a){var l=t&yn,s=l?o:X,h=l?X:o,p=l?i:X,_=l?X:i;t|=l?bn:wn,t&=~(l?wn:bn),t&gn||(t&=~(_n|vn));var v=[n,t,u,p,s,_,h,f,c,a],g=r.apply(X,v);return $i(n)&&Ss(g,v),g.placeholder=e,
+    Yi(g,n,t)}function fi(n){var t=al[n];return function(n,r){if(n=Ic(n),r=null==r?0:Hl(kc(r),292),r&&Zl(n)){var e=(Ec(n)+"e").split("e");return e=(Ec(t(e[0]+"e"+(+e[1]+r)))+"e").split("e"),+(e[0]+"e"+(+e[1]-r))}return t(n)}}function ci(n){return function(t){var r=zs(t);return r==Gn?M(t):r==tt?q(t):I(t,n(t))}}function ai(n,t,r,e,u,i,o,f){var c=t&vn;if(!c&&"function"!=typeof n)throw new pl(en);var a=e?e.length:0;if(a||(t&=~(bn|wn),e=u=X),o=o===X?o:Gl(kc(o),0),f=f===X?f:kc(f),a-=u?u.length:0,t&wn){var l=e,s=u;
+    e=u=X}var h=c?X:Os(n),p=[n,t,r,e,u,l,s,i,o,f];if(h&&qi(p,h),n=p[0],t=p[1],r=p[2],e=p[3],u=p[4],f=p[9]=p[9]===X?c?0:n.length:Gl(p[9]-a,0),!f&&t&(yn|dn)&&(t&=~(yn|dn)),t&&t!=_n)_=t==yn||t==dn?Hu(n,t,f):t!=bn&&t!=(_n|bn)||u.length?Qu.apply(X,p):ei(n,t,r,e);else var _=Zu(n,t,r);return Yi((h?ms:Ss)(_,p),n,t)}function li(n,t,r,e){return n===X||Gf(n,gl[r])&&!bl.call(e,r)?t:n}function si(n,t,r,e,u,i){return fc(n)&&fc(t)&&(i.set(t,n),Ke(n,t,X,si,i),i.delete(t)),n}function hi(n){return gc(n)?X:n}function pi(n,t,r,e,u,i){
+    var o=r&hn,f=n.length,c=t.length;if(f!=c&&!(o&&c>f))return!1;var a=i.get(n),l=i.get(t);if(a&&l)return a==t&&l==n;var s=-1,p=!0,_=r&pn?new yr:X;for(i.set(n,t),i.set(t,n);++s<f;){var v=n[s],g=t[s];if(e)var y=o?e(g,v,s,t,n,i):e(v,g,s,n,t,i);if(y!==X){if(y)continue;p=!1;break}if(_){if(!h(t,function(n,t){if(!S(_,t)&&(v===n||u(v,n,r,e,i)))return _.push(t)})){p=!1;break}}else if(v!==g&&!u(v,g,r,e,i)){p=!1;break}}return i.delete(n),i.delete(t),p}function _i(n,t,r,e,u,i,o){switch(r){case ct:if(n.byteLength!=t.byteLength||n.byteOffset!=t.byteOffset)return!1;
+    n=n.buffer,t=t.buffer;case ft:return!(n.byteLength!=t.byteLength||!i(new Rl(n),new Rl(t)));case Nn:case Pn:case Hn:return Gf(+n,+t);case Zn:return n.name==t.name&&n.message==t.message;case nt:case rt:return n==t+"";case Gn:var f=M;case tt:var c=e&hn;if(f||(f=P),n.size!=t.size&&!c)return!1;var a=o.get(n);if(a)return a==t;e|=pn,o.set(n,t);var l=pi(f(n),f(t),e,u,i,o);return o.delete(n),l;case et:if(_s)return _s.call(n)==_s.call(t)}return!1}function vi(n,t,r,e,u,i){var o=r&hn,f=yi(n),c=f.length;if(c!=yi(t).length&&!o)return!1;
+    for(var a=c;a--;){var l=f[a];if(!(o?l in t:bl.call(t,l)))return!1}var s=i.get(n),h=i.get(t);if(s&&h)return s==t&&h==n;var p=!0;i.set(n,t),i.set(t,n);for(var _=o;++a<c;){l=f[a];var v=n[l],g=t[l];if(e)var y=o?e(g,v,l,t,n,i):e(v,g,l,n,t,i);if(!(y===X?v===g||u(v,g,r,e,i):y)){p=!1;break}_||(_="constructor"==l)}if(p&&!_){var d=n.constructor,b=t.constructor;d!=b&&"constructor"in n&&"constructor"in t&&!("function"==typeof d&&d instanceof d&&"function"==typeof b&&b instanceof b)&&(p=!1)}return i.delete(n),
+    i.delete(t),p}function gi(n){return Ls(Vi(n,X,_o),n+"")}function yi(n){return de(n,Pc,Is)}function di(n){return de(n,qc,Rs)}function bi(n){for(var t=n.name+"",r=fs[t],e=bl.call(fs,t)?r.length:0;e--;){var u=r[e],i=u.func;if(null==i||i==n)return u.name}return t}function wi(n){return(bl.call(Z,"placeholder")?Z:n).placeholder}function mi(){var n=Z.iteratee||Ca;return n=n===Ca?De:n,arguments.length?n(arguments[0],arguments[1]):n}function xi(n,t){var r=n.__data__;return Ti(t)?r["string"==typeof t?"string":"hash"]:r.map;
+    }function ji(n){for(var t=Pc(n),r=t.length;r--;){var e=t[r],u=n[e];t[r]=[e,u,Fi(u)]}return t}function Ai(n,t){var r=B(n,t);return Ue(r)?r:X}function ki(n){var t=bl.call(n,Bl),r=n[Bl];try{n[Bl]=X;var e=!0}catch(n){}var u=xl.call(n);return e&&(t?n[Bl]=r:delete n[Bl]),u}function Oi(n,t,r){for(var e=-1,u=r.length;++e<u;){var i=r[e],o=i.size;switch(i.type){case"drop":n+=o;break;case"dropRight":t-=o;break;case"take":t=Hl(t,n+o);break;case"takeRight":n=Gl(n,t-o)}}return{start:n,end:t}}function Ii(n){var t=n.match(Bt);
+    return t?t[1].split(Tt):[]}function Ri(n,t,r){t=ku(t,n);for(var e=-1,u=t.length,i=!1;++e<u;){var o=no(t[e]);if(!(i=null!=n&&r(n,o)))break;n=n[o]}return i||++e!=u?i:(u=null==n?0:n.length,!!u&&oc(u)&&Ci(o,u)&&(bh(n)||dh(n)))}function zi(n){var t=n.length,r=new n.constructor(t);return t&&"string"==typeof n[0]&&bl.call(n,"index")&&(r.index=n.index,r.input=n.input),r}function Ei(n){return"function"!=typeof n.constructor||Mi(n)?{}:gs(El(n))}function Si(n,t,r){var e=n.constructor;switch(t){case ft:return Ru(n);
+    case Nn:case Pn:return new e(+n);case ct:return zu(n,r);case at:case lt:case st:case ht:case pt:case _t:case vt:case gt:case yt:return Wu(n,r);case Gn:return new e;case Hn:case rt:return new e(n);case nt:return Eu(n);case tt:return new e;case et:return Su(n)}}function Wi(n,t){var r=t.length;if(!r)return n;var e=r-1;return t[e]=(r>1?"& ":"")+t[e],t=t.join(r>2?", ":" "),n.replace(Ut,"{\n/* [wrapped with "+t+"] */\n")}function Li(n){return bh(n)||dh(n)||!!(Cl&&n&&n[Cl])}function Ci(n,t){var r=typeof n;
+    return t=null==t?Wn:t,!!t&&("number"==r||"symbol"!=r&&Vt.test(n))&&n>-1&&n%1==0&&n<t}function Ui(n,t,r){if(!fc(r))return!1;var e=typeof t;return!!("number"==e?Hf(r)&&Ci(t,r.length):"string"==e&&t in r)&&Gf(r[t],n)}function Bi(n,t){if(bh(n))return!1;var r=typeof n;return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=n&&!bc(n))||(zt.test(n)||!Rt.test(n)||null!=t&&n in ll(t))}function Ti(n){var t=typeof n;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==n:null===n}function $i(n){
+    var t=bi(n),r=Z[t];if("function"!=typeof r||!(t in Ct.prototype))return!1;if(n===r)return!0;var e=Os(r);return!!e&&n===e[0]}function Di(n){return!!ml&&ml in n}function Mi(n){var t=n&&n.constructor;return n===("function"==typeof t&&t.prototype||gl)}function Fi(n){return n===n&&!fc(n)}function Ni(n,t){return function(r){return null!=r&&(r[n]===t&&(t!==X||n in ll(r)))}}function Pi(n){var t=Cf(n,function(n){return r.size===fn&&r.clear(),n}),r=t.cache;return t}function qi(n,t){var r=n[1],e=t[1],u=r|e,i=u<(_n|vn|mn),o=e==mn&&r==yn||e==mn&&r==xn&&n[7].length<=t[8]||e==(mn|xn)&&t[7].length<=t[8]&&r==yn;
+    if(!i&&!o)return n;e&_n&&(n[2]=t[2],u|=r&_n?0:gn);var f=t[3];if(f){var c=n[3];n[3]=c?Uu(c,f,t[4]):f,n[4]=c?N(n[3],cn):t[4]}return f=t[5],f&&(c=n[5],n[5]=c?Bu(c,f,t[6]):f,n[6]=c?N(n[5],cn):t[6]),f=t[7],f&&(n[7]=f),e&mn&&(n[8]=null==n[8]?t[8]:Hl(n[8],t[8])),null==n[9]&&(n[9]=t[9]),n[0]=t[0],n[1]=u,n}function Zi(n){var t=[];if(null!=n)for(var r in ll(n))t.push(r);return t}function Ki(n){return xl.call(n)}function Vi(t,r,e){return r=Gl(r===X?t.length-1:r,0),function(){for(var u=arguments,i=-1,o=Gl(u.length-r,0),f=il(o);++i<o;)f[i]=u[r+i];
+    i=-1;for(var c=il(r+1);++i<r;)c[i]=u[i];return c[r]=e(f),n(t,this,c)}}function Gi(n,t){return t.length<2?n:_e(n,au(t,0,-1))}function Hi(n,t){for(var r=n.length,e=Hl(t.length,r),u=Tu(n);e--;){var i=t[e];n[e]=Ci(i,r)?u[i]:X}return n}function Ji(n,t){if(("constructor"!==t||"function"!=typeof n[t])&&"__proto__"!=t)return n[t]}function Yi(n,t,r){var e=t+"";return Ls(n,Wi(e,ro(Ii(e),r)))}function Qi(n){var t=0,r=0;return function(){var e=Jl(),u=In-(e-r);if(r=e,u>0){if(++t>=On)return arguments[0]}else t=0;
+    return n.apply(X,arguments)}}function Xi(n,t){var r=-1,e=n.length,u=e-1;for(t=t===X?e:t;++r<t;){var i=tu(r,u),o=n[i];n[i]=n[r],n[r]=o}return n.length=t,n}function no(n){if("string"==typeof n||bc(n))return n;var t=n+"";return"0"==t&&1/n==-Sn?"-0":t}function to(n){if(null!=n){try{return dl.call(n)}catch(n){}try{return n+""}catch(n){}}return""}function ro(n,t){return r($n,function(r){var e="_."+r[0];t&r[1]&&!o(n,e)&&n.push(e)}),n.sort()}function eo(n){if(n instanceof Ct)return n.clone();var t=new Y(n.__wrapped__,n.__chain__);
+    return t.__actions__=Tu(n.__actions__),t.__index__=n.__index__,t.__values__=n.__values__,t}function uo(n,t,r){t=(r?Ui(n,t,r):t===X)?1:Gl(kc(t),0);var e=null==n?0:n.length;if(!e||t<1)return[];for(var u=0,i=0,o=il(Fl(e/t));u<e;)o[i++]=au(n,u,u+=t);return o}function io(n){for(var t=-1,r=null==n?0:n.length,e=0,u=[];++t<r;){var i=n[t];i&&(u[e++]=i)}return u}function oo(){var n=arguments.length;if(!n)return[];for(var t=il(n-1),r=arguments[0],e=n;e--;)t[e-1]=arguments[e];return a(bh(r)?Tu(r):[r],ee(t,1));
+    }function fo(n,t,r){var e=null==n?0:n.length;return e?(t=r||t===X?1:kc(t),au(n,t<0?0:t,e)):[]}function co(n,t,r){var e=null==n?0:n.length;return e?(t=r||t===X?1:kc(t),t=e-t,au(n,0,t<0?0:t)):[]}function ao(n,t){return n&&n.length?bu(n,mi(t,3),!0,!0):[]}function lo(n,t){return n&&n.length?bu(n,mi(t,3),!0):[]}function so(n,t,r,e){var u=null==n?0:n.length;return u?(r&&"number"!=typeof r&&Ui(n,t,r)&&(r=0,e=u),ne(n,t,r,e)):[]}function ho(n,t,r){var e=null==n?0:n.length;if(!e)return-1;var u=null==r?0:kc(r);
+    return u<0&&(u=Gl(e+u,0)),g(n,mi(t,3),u)}function po(n,t,r){var e=null==n?0:n.length;if(!e)return-1;var u=e-1;return r!==X&&(u=kc(r),u=r<0?Gl(e+u,0):Hl(u,e-1)),g(n,mi(t,3),u,!0)}function _o(n){return(null==n?0:n.length)?ee(n,1):[]}function vo(n){return(null==n?0:n.length)?ee(n,Sn):[]}function go(n,t){return(null==n?0:n.length)?(t=t===X?1:kc(t),ee(n,t)):[]}function yo(n){for(var t=-1,r=null==n?0:n.length,e={};++t<r;){var u=n[t];e[u[0]]=u[1]}return e}function bo(n){return n&&n.length?n[0]:X}function wo(n,t,r){
+    var e=null==n?0:n.length;if(!e)return-1;var u=null==r?0:kc(r);return u<0&&(u=Gl(e+u,0)),y(n,t,u)}function mo(n){return(null==n?0:n.length)?au(n,0,-1):[]}function xo(n,t){return null==n?"":Kl.call(n,t)}function jo(n){var t=null==n?0:n.length;return t?n[t-1]:X}function Ao(n,t,r){var e=null==n?0:n.length;if(!e)return-1;var u=e;return r!==X&&(u=kc(r),u=u<0?Gl(e+u,0):Hl(u,e-1)),t===t?K(n,t,u):g(n,b,u,!0)}function ko(n,t){return n&&n.length?Ge(n,kc(t)):X}function Oo(n,t){return n&&n.length&&t&&t.length?Xe(n,t):n;
+    }function Io(n,t,r){return n&&n.length&&t&&t.length?Xe(n,t,mi(r,2)):n}function Ro(n,t,r){return n&&n.length&&t&&t.length?Xe(n,t,X,r):n}function zo(n,t){var r=[];if(!n||!n.length)return r;var e=-1,u=[],i=n.length;for(t=mi(t,3);++e<i;){var o=n[e];t(o,e,n)&&(r.push(o),u.push(e))}return nu(n,u),r}function Eo(n){return null==n?n:Xl.call(n)}function So(n,t,r){var e=null==n?0:n.length;return e?(r&&"number"!=typeof r&&Ui(n,t,r)?(t=0,r=e):(t=null==t?0:kc(t),r=r===X?e:kc(r)),au(n,t,r)):[]}function Wo(n,t){
+    return su(n,t)}function Lo(n,t,r){return hu(n,t,mi(r,2))}function Co(n,t){var r=null==n?0:n.length;if(r){var e=su(n,t);if(e<r&&Gf(n[e],t))return e}return-1}function Uo(n,t){return su(n,t,!0)}function Bo(n,t,r){return hu(n,t,mi(r,2),!0)}function To(n,t){if(null==n?0:n.length){var r=su(n,t,!0)-1;if(Gf(n[r],t))return r}return-1}function $o(n){return n&&n.length?pu(n):[]}function Do(n,t){return n&&n.length?pu(n,mi(t,2)):[]}function Mo(n){var t=null==n?0:n.length;return t?au(n,1,t):[]}function Fo(n,t,r){
+    return n&&n.length?(t=r||t===X?1:kc(t),au(n,0,t<0?0:t)):[]}function No(n,t,r){var e=null==n?0:n.length;return e?(t=r||t===X?1:kc(t),t=e-t,au(n,t<0?0:t,e)):[]}function Po(n,t){return n&&n.length?bu(n,mi(t,3),!1,!0):[]}function qo(n,t){return n&&n.length?bu(n,mi(t,3)):[]}function Zo(n){return n&&n.length?gu(n):[]}function Ko(n,t){return n&&n.length?gu(n,mi(t,2)):[]}function Vo(n,t){return t="function"==typeof t?t:X,n&&n.length?gu(n,X,t):[]}function Go(n){if(!n||!n.length)return[];var t=0;return n=i(n,function(n){
+    if(Jf(n))return t=Gl(n.length,t),!0}),O(t,function(t){return c(n,m(t))})}function Ho(t,r){if(!t||!t.length)return[];var e=Go(t);return null==r?e:c(e,function(t){return n(r,X,t)})}function Jo(n,t){return xu(n||[],t||[],Sr)}function Yo(n,t){return xu(n||[],t||[],fu)}function Qo(n){var t=Z(n);return t.__chain__=!0,t}function Xo(n,t){return t(n),n}function nf(n,t){return t(n)}function tf(){return Qo(this)}function rf(){return new Y(this.value(),this.__chain__)}function ef(){this.__values__===X&&(this.__values__=jc(this.value()));
+    var n=this.__index__>=this.__values__.length;return{done:n,value:n?X:this.__values__[this.__index__++]}}function uf(){return this}function of(n){for(var t,r=this;r instanceof J;){var e=eo(r);e.__index__=0,e.__values__=X,t?u.__wrapped__=e:t=e;var u=e;r=r.__wrapped__}return u.__wrapped__=n,t}function ff(){var n=this.__wrapped__;if(n instanceof Ct){var t=n;return this.__actions__.length&&(t=new Ct(this)),t=t.reverse(),t.__actions__.push({func:nf,args:[Eo],thisArg:X}),new Y(t,this.__chain__)}return this.thru(Eo);
+    }function cf(){return wu(this.__wrapped__,this.__actions__)}function af(n,t,r){var e=bh(n)?u:Jr;return r&&Ui(n,t,r)&&(t=X),e(n,mi(t,3))}function lf(n,t){return(bh(n)?i:te)(n,mi(t,3))}function sf(n,t){return ee(yf(n,t),1)}function hf(n,t){return ee(yf(n,t),Sn)}function pf(n,t,r){return r=r===X?1:kc(r),ee(yf(n,t),r)}function _f(n,t){return(bh(n)?r:ys)(n,mi(t,3))}function vf(n,t){return(bh(n)?e:ds)(n,mi(t,3))}function gf(n,t,r,e){n=Hf(n)?n:ra(n),r=r&&!e?kc(r):0;var u=n.length;return r<0&&(r=Gl(u+r,0)),
+    dc(n)?r<=u&&n.indexOf(t,r)>-1:!!u&&y(n,t,r)>-1}function yf(n,t){return(bh(n)?c:Pe)(n,mi(t,3))}function df(n,t,r,e){return null==n?[]:(bh(t)||(t=null==t?[]:[t]),r=e?X:r,bh(r)||(r=null==r?[]:[r]),He(n,t,r))}function bf(n,t,r){var e=bh(n)?l:j,u=arguments.length<3;return e(n,mi(t,4),r,u,ys)}function wf(n,t,r){var e=bh(n)?s:j,u=arguments.length<3;return e(n,mi(t,4),r,u,ds)}function mf(n,t){return(bh(n)?i:te)(n,Uf(mi(t,3)))}function xf(n){return(bh(n)?Ir:iu)(n)}function jf(n,t,r){return t=(r?Ui(n,t,r):t===X)?1:kc(t),
+    (bh(n)?Rr:ou)(n,t)}function Af(n){return(bh(n)?zr:cu)(n)}function kf(n){if(null==n)return 0;if(Hf(n))return dc(n)?V(n):n.length;var t=zs(n);return t==Gn||t==tt?n.size:Me(n).length}function Of(n,t,r){var e=bh(n)?h:lu;return r&&Ui(n,t,r)&&(t=X),e(n,mi(t,3))}function If(n,t){if("function"!=typeof t)throw new pl(en);return n=kc(n),function(){if(--n<1)return t.apply(this,arguments)}}function Rf(n,t,r){return t=r?X:t,t=n&&null==t?n.length:t,ai(n,mn,X,X,X,X,t)}function zf(n,t){var r;if("function"!=typeof t)throw new pl(en);
+    return n=kc(n),function(){return--n>0&&(r=t.apply(this,arguments)),n<=1&&(t=X),r}}function Ef(n,t,r){t=r?X:t;var e=ai(n,yn,X,X,X,X,X,t);return e.placeholder=Ef.placeholder,e}function Sf(n,t,r){t=r?X:t;var e=ai(n,dn,X,X,X,X,X,t);return e.placeholder=Sf.placeholder,e}function Wf(n,t,r){function e(t){var r=h,e=p;return h=p=X,d=t,v=n.apply(e,r)}function u(n){return d=n,g=Ws(f,t),b?e(n):v}function i(n){var r=n-y,e=n-d,u=t-r;return w?Hl(u,_-e):u}function o(n){var r=n-y,e=n-d;return y===X||r>=t||r<0||w&&e>=_;
+    }function f(){var n=fh();return o(n)?c(n):(g=Ws(f,i(n)),X)}function c(n){return g=X,m&&h?e(n):(h=p=X,v)}function a(){g!==X&&As(g),d=0,h=y=p=g=X}function l(){return g===X?v:c(fh())}function s(){var n=fh(),r=o(n);if(h=arguments,p=this,y=n,r){if(g===X)return u(y);if(w)return As(g),g=Ws(f,t),e(y)}return g===X&&(g=Ws(f,t)),v}var h,p,_,v,g,y,d=0,b=!1,w=!1,m=!0;if("function"!=typeof n)throw new pl(en);return t=Ic(t)||0,fc(r)&&(b=!!r.leading,w="maxWait"in r,_=w?Gl(Ic(r.maxWait)||0,t):_,m="trailing"in r?!!r.trailing:m),
+    s.cancel=a,s.flush=l,s}function Lf(n){return ai(n,jn)}function Cf(n,t){if("function"!=typeof n||null!=t&&"function"!=typeof t)throw new pl(en);var r=function(){var e=arguments,u=t?t.apply(this,e):e[0],i=r.cache;if(i.has(u))return i.get(u);var o=n.apply(this,e);return r.cache=i.set(u,o)||i,o};return r.cache=new(Cf.Cache||sr),r}function Uf(n){if("function"!=typeof n)throw new pl(en);return function(){var t=arguments;switch(t.length){case 0:return!n.call(this);case 1:return!n.call(this,t[0]);case 2:
+    return!n.call(this,t[0],t[1]);case 3:return!n.call(this,t[0],t[1],t[2])}return!n.apply(this,t)}}function Bf(n){return zf(2,n)}function Tf(n,t){if("function"!=typeof n)throw new pl(en);return t=t===X?t:kc(t),uu(n,t)}function $f(t,r){if("function"!=typeof t)throw new pl(en);return r=null==r?0:Gl(kc(r),0),uu(function(e){var u=e[r],i=Ou(e,0,r);return u&&a(i,u),n(t,this,i)})}function Df(n,t,r){var e=!0,u=!0;if("function"!=typeof n)throw new pl(en);return fc(r)&&(e="leading"in r?!!r.leading:e,u="trailing"in r?!!r.trailing:u),
+    Wf(n,t,{leading:e,maxWait:t,trailing:u})}function Mf(n){return Rf(n,1)}function Ff(n,t){return ph(Au(t),n)}function Nf(){if(!arguments.length)return[];var n=arguments[0];return bh(n)?n:[n]}function Pf(n){return Fr(n,sn)}function qf(n,t){return t="function"==typeof t?t:X,Fr(n,sn,t)}function Zf(n){return Fr(n,an|sn)}function Kf(n,t){return t="function"==typeof t?t:X,Fr(n,an|sn,t)}function Vf(n,t){return null==t||Pr(n,t,Pc(t))}function Gf(n,t){return n===t||n!==n&&t!==t}function Hf(n){return null!=n&&oc(n.length)&&!uc(n);
+    }function Jf(n){return cc(n)&&Hf(n)}function Yf(n){return n===!0||n===!1||cc(n)&&we(n)==Nn}function Qf(n){return cc(n)&&1===n.nodeType&&!gc(n)}function Xf(n){if(null==n)return!0;if(Hf(n)&&(bh(n)||"string"==typeof n||"function"==typeof n.splice||mh(n)||Oh(n)||dh(n)))return!n.length;var t=zs(n);if(t==Gn||t==tt)return!n.size;if(Mi(n))return!Me(n).length;for(var r in n)if(bl.call(n,r))return!1;return!0}function nc(n,t){return Se(n,t)}function tc(n,t,r){r="function"==typeof r?r:X;var e=r?r(n,t):X;return e===X?Se(n,t,X,r):!!e;
+    }function rc(n){if(!cc(n))return!1;var t=we(n);return t==Zn||t==qn||"string"==typeof n.message&&"string"==typeof n.name&&!gc(n)}function ec(n){return"number"==typeof n&&Zl(n)}function uc(n){if(!fc(n))return!1;var t=we(n);return t==Kn||t==Vn||t==Fn||t==Xn}function ic(n){return"number"==typeof n&&n==kc(n)}function oc(n){return"number"==typeof n&&n>-1&&n%1==0&&n<=Wn}function fc(n){var t=typeof n;return null!=n&&("object"==t||"function"==t)}function cc(n){return null!=n&&"object"==typeof n}function ac(n,t){
+    return n===t||Ce(n,t,ji(t))}function lc(n,t,r){return r="function"==typeof r?r:X,Ce(n,t,ji(t),r)}function sc(n){return vc(n)&&n!=+n}function hc(n){if(Es(n))throw new fl(rn);return Ue(n)}function pc(n){return null===n}function _c(n){return null==n}function vc(n){return"number"==typeof n||cc(n)&&we(n)==Hn}function gc(n){if(!cc(n)||we(n)!=Yn)return!1;var t=El(n);if(null===t)return!0;var r=bl.call(t,"constructor")&&t.constructor;return"function"==typeof r&&r instanceof r&&dl.call(r)==jl}function yc(n){
+    return ic(n)&&n>=-Wn&&n<=Wn}function dc(n){return"string"==typeof n||!bh(n)&&cc(n)&&we(n)==rt}function bc(n){return"symbol"==typeof n||cc(n)&&we(n)==et}function wc(n){return n===X}function mc(n){return cc(n)&&zs(n)==it}function xc(n){return cc(n)&&we(n)==ot}function jc(n){if(!n)return[];if(Hf(n))return dc(n)?G(n):Tu(n);if(Ul&&n[Ul])return D(n[Ul]());var t=zs(n);return(t==Gn?M:t==tt?P:ra)(n)}function Ac(n){if(!n)return 0===n?n:0;if(n=Ic(n),n===Sn||n===-Sn){return(n<0?-1:1)*Ln}return n===n?n:0}function kc(n){
+    var t=Ac(n),r=t%1;return t===t?r?t-r:t:0}function Oc(n){return n?Mr(kc(n),0,Un):0}function Ic(n){if("number"==typeof n)return n;if(bc(n))return Cn;if(fc(n)){var t="function"==typeof n.valueOf?n.valueOf():n;n=fc(t)?t+"":t}if("string"!=typeof n)return 0===n?n:+n;n=R(n);var r=qt.test(n);return r||Kt.test(n)?Xr(n.slice(2),r?2:8):Pt.test(n)?Cn:+n}function Rc(n){return $u(n,qc(n))}function zc(n){return n?Mr(kc(n),-Wn,Wn):0===n?n:0}function Ec(n){return null==n?"":vu(n)}function Sc(n,t){var r=gs(n);return null==t?r:Cr(r,t);
+    }function Wc(n,t){return v(n,mi(t,3),ue)}function Lc(n,t){return v(n,mi(t,3),oe)}function Cc(n,t){return null==n?n:bs(n,mi(t,3),qc)}function Uc(n,t){return null==n?n:ws(n,mi(t,3),qc)}function Bc(n,t){return n&&ue(n,mi(t,3))}function Tc(n,t){return n&&oe(n,mi(t,3))}function $c(n){return null==n?[]:fe(n,Pc(n))}function Dc(n){return null==n?[]:fe(n,qc(n))}function Mc(n,t,r){var e=null==n?X:_e(n,t);return e===X?r:e}function Fc(n,t){return null!=n&&Ri(n,t,xe)}function Nc(n,t){return null!=n&&Ri(n,t,je);
+    }function Pc(n){return Hf(n)?Or(n):Me(n)}function qc(n){return Hf(n)?Or(n,!0):Fe(n)}function Zc(n,t){var r={};return t=mi(t,3),ue(n,function(n,e,u){Br(r,t(n,e,u),n)}),r}function Kc(n,t){var r={};return t=mi(t,3),ue(n,function(n,e,u){Br(r,e,t(n,e,u))}),r}function Vc(n,t){return Gc(n,Uf(mi(t)))}function Gc(n,t){if(null==n)return{};var r=c(di(n),function(n){return[n]});return t=mi(t),Ye(n,r,function(n,r){return t(n,r[0])})}function Hc(n,t,r){t=ku(t,n);var e=-1,u=t.length;for(u||(u=1,n=X);++e<u;){var i=null==n?X:n[no(t[e])];
+    i===X&&(e=u,i=r),n=uc(i)?i.call(n):i}return n}function Jc(n,t,r){return null==n?n:fu(n,t,r)}function Yc(n,t,r,e){return e="function"==typeof e?e:X,null==n?n:fu(n,t,r,e)}function Qc(n,t,e){var u=bh(n),i=u||mh(n)||Oh(n);if(t=mi(t,4),null==e){var o=n&&n.constructor;e=i?u?new o:[]:fc(n)&&uc(o)?gs(El(n)):{}}return(i?r:ue)(n,function(n,r,u){return t(e,n,r,u)}),e}function Xc(n,t){return null==n||yu(n,t)}function na(n,t,r){return null==n?n:du(n,t,Au(r))}function ta(n,t,r,e){return e="function"==typeof e?e:X,
+    null==n?n:du(n,t,Au(r),e)}function ra(n){return null==n?[]:E(n,Pc(n))}function ea(n){return null==n?[]:E(n,qc(n))}function ua(n,t,r){return r===X&&(r=t,t=X),r!==X&&(r=Ic(r),r=r===r?r:0),t!==X&&(t=Ic(t),t=t===t?t:0),Mr(Ic(n),t,r)}function ia(n,t,r){return t=Ac(t),r===X?(r=t,t=0):r=Ac(r),n=Ic(n),Ae(n,t,r)}function oa(n,t,r){if(r&&"boolean"!=typeof r&&Ui(n,t,r)&&(t=r=X),r===X&&("boolean"==typeof t?(r=t,t=X):"boolean"==typeof n&&(r=n,n=X)),n===X&&t===X?(n=0,t=1):(n=Ac(n),t===X?(t=n,n=0):t=Ac(t)),n>t){
+    var e=n;n=t,t=e}if(r||n%1||t%1){var u=Ql();return Hl(n+u*(t-n+Qr("1e-"+((u+"").length-1))),t)}return tu(n,t)}function fa(n){return Qh(Ec(n).toLowerCase())}function ca(n){return n=Ec(n),n&&n.replace(Gt,ve).replace(Dr,"")}function aa(n,t,r){n=Ec(n),t=vu(t);var e=n.length;r=r===X?e:Mr(kc(r),0,e);var u=r;return r-=t.length,r>=0&&n.slice(r,u)==t}function la(n){return n=Ec(n),n&&At.test(n)?n.replace(xt,ge):n}function sa(n){return n=Ec(n),n&&Wt.test(n)?n.replace(St,"\\$&"):n}function ha(n,t,r){n=Ec(n),t=kc(t);
+    var e=t?V(n):0;if(!t||e>=t)return n;var u=(t-e)/2;return ri(Nl(u),r)+n+ri(Fl(u),r)}function pa(n,t,r){n=Ec(n),t=kc(t);var e=t?V(n):0;return t&&e<t?n+ri(t-e,r):n}function _a(n,t,r){n=Ec(n),t=kc(t);var e=t?V(n):0;return t&&e<t?ri(t-e,r)+n:n}function va(n,t,r){return r||null==t?t=0:t&&(t=+t),Yl(Ec(n).replace(Lt,""),t||0)}function ga(n,t,r){return t=(r?Ui(n,t,r):t===X)?1:kc(t),eu(Ec(n),t)}function ya(){var n=arguments,t=Ec(n[0]);return n.length<3?t:t.replace(n[1],n[2])}function da(n,t,r){return r&&"number"!=typeof r&&Ui(n,t,r)&&(t=r=X),
+    (r=r===X?Un:r>>>0)?(n=Ec(n),n&&("string"==typeof t||null!=t&&!Ah(t))&&(t=vu(t),!t&&T(n))?Ou(G(n),0,r):n.split(t,r)):[]}function ba(n,t,r){return n=Ec(n),r=null==r?0:Mr(kc(r),0,n.length),t=vu(t),n.slice(r,r+t.length)==t}function wa(n,t,r){var e=Z.templateSettings;r&&Ui(n,t,r)&&(t=X),n=Ec(n),t=Sh({},t,e,li);var u,i,o=Sh({},t.imports,e.imports,li),f=Pc(o),c=E(o,f),a=0,l=t.interpolate||Ht,s="__p += '",h=sl((t.escape||Ht).source+"|"+l.source+"|"+(l===It?Ft:Ht).source+"|"+(t.evaluate||Ht).source+"|$","g"),p="//# sourceURL="+(bl.call(t,"sourceURL")?(t.sourceURL+"").replace(/\s/g," "):"lodash.templateSources["+ ++Zr+"]")+"\n";
+    n.replace(h,function(t,r,e,o,f,c){return e||(e=o),s+=n.slice(a,c).replace(Jt,U),r&&(u=!0,s+="' +\n__e("+r+") +\n'"),f&&(i=!0,s+="';\n"+f+";\n__p += '"),e&&(s+="' +\n((__t = ("+e+")) == null ? '' : __t) +\n'"),a=c+t.length,t}),s+="';\n";var _=bl.call(t,"variable")&&t.variable;if(_){if(Dt.test(_))throw new fl(un)}else s="with (obj) {\n"+s+"\n}\n";s=(i?s.replace(dt,""):s).replace(bt,"$1").replace(wt,"$1;"),s="function("+(_||"obj")+") {\n"+(_?"":"obj || (obj = {});\n")+"var __t, __p = ''"+(u?", __e = _.escape":"")+(i?", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n":";\n")+s+"return __p\n}";
+    var v=Xh(function(){return cl(f,p+"return "+s).apply(X,c)});if(v.source=s,rc(v))throw v;return v}function ma(n){return Ec(n).toLowerCase()}function xa(n){return Ec(n).toUpperCase()}function ja(n,t,r){if(n=Ec(n),n&&(r||t===X))return R(n);if(!n||!(t=vu(t)))return n;var e=G(n),u=G(t);return Ou(e,W(e,u),L(e,u)+1).join("")}function Aa(n,t,r){if(n=Ec(n),n&&(r||t===X))return n.slice(0,H(n)+1);if(!n||!(t=vu(t)))return n;var e=G(n);return Ou(e,0,L(e,G(t))+1).join("")}function ka(n,t,r){if(n=Ec(n),n&&(r||t===X))return n.replace(Lt,"");
+    if(!n||!(t=vu(t)))return n;var e=G(n);return Ou(e,W(e,G(t))).join("")}function Oa(n,t){var r=An,e=kn;if(fc(t)){var u="separator"in t?t.separator:u;r="length"in t?kc(t.length):r,e="omission"in t?vu(t.omission):e}n=Ec(n);var i=n.length;if(T(n)){var o=G(n);i=o.length}if(r>=i)return n;var f=r-V(e);if(f<1)return e;var c=o?Ou(o,0,f).join(""):n.slice(0,f);if(u===X)return c+e;if(o&&(f+=c.length-f),Ah(u)){if(n.slice(f).search(u)){var a,l=c;for(u.global||(u=sl(u.source,Ec(Nt.exec(u))+"g")),u.lastIndex=0;a=u.exec(l);)var s=a.index;
+    c=c.slice(0,s===X?f:s)}}else if(n.indexOf(vu(u),f)!=f){var h=c.lastIndexOf(u);h>-1&&(c=c.slice(0,h))}return c+e}function Ia(n){return n=Ec(n),n&&jt.test(n)?n.replace(mt,ye):n}function Ra(n,t,r){return n=Ec(n),t=r?X:t,t===X?$(n)?Q(n):_(n):n.match(t)||[]}function za(t){var r=null==t?0:t.length,e=mi();return t=r?c(t,function(n){if("function"!=typeof n[1])throw new pl(en);return[e(n[0]),n[1]]}):[],uu(function(e){for(var u=-1;++u<r;){var i=t[u];if(n(i[0],this,e))return n(i[1],this,e)}})}function Ea(n){
+    return Nr(Fr(n,an))}function Sa(n){return function(){return n}}function Wa(n,t){return null==n||n!==n?t:n}function La(n){return n}function Ca(n){return De("function"==typeof n?n:Fr(n,an))}function Ua(n){return qe(Fr(n,an))}function Ba(n,t){return Ze(n,Fr(t,an))}function Ta(n,t,e){var u=Pc(t),i=fe(t,u);null!=e||fc(t)&&(i.length||!u.length)||(e=t,t=n,n=this,i=fe(t,Pc(t)));var o=!(fc(e)&&"chain"in e&&!e.chain),f=uc(n);return r(i,function(r){var e=t[r];n[r]=e,f&&(n.prototype[r]=function(){var t=this.__chain__;
+    if(o||t){var r=n(this.__wrapped__);return(r.__actions__=Tu(this.__actions__)).push({func:e,args:arguments,thisArg:n}),r.__chain__=t,r}return e.apply(n,a([this.value()],arguments))})}),n}function $a(){return re._===this&&(re._=Al),this}function Da(){}function Ma(n){return n=kc(n),uu(function(t){return Ge(t,n)})}function Fa(n){return Bi(n)?m(no(n)):Qe(n)}function Na(n){return function(t){return null==n?X:_e(n,t)}}function Pa(){return[]}function qa(){return!1}function Za(){return{}}function Ka(){return"";
+    }function Va(){return!0}function Ga(n,t){if(n=kc(n),n<1||n>Wn)return[];var r=Un,e=Hl(n,Un);t=mi(t),n-=Un;for(var u=O(e,t);++r<n;)t(r);return u}function Ha(n){return bh(n)?c(n,no):bc(n)?[n]:Tu(Cs(Ec(n)))}function Ja(n){var t=++wl;return Ec(n)+t}function Ya(n){return n&&n.length?Yr(n,La,me):X}function Qa(n,t){return n&&n.length?Yr(n,mi(t,2),me):X}function Xa(n){return w(n,La)}function nl(n,t){return w(n,mi(t,2))}function tl(n){return n&&n.length?Yr(n,La,Ne):X}function rl(n,t){return n&&n.length?Yr(n,mi(t,2),Ne):X;
+    }function el(n){return n&&n.length?k(n,La):0}function ul(n,t){return n&&n.length?k(n,mi(t,2)):0}x=null==x?re:be.defaults(re.Object(),x,be.pick(re,qr));var il=x.Array,ol=x.Date,fl=x.Error,cl=x.Function,al=x.Math,ll=x.Object,sl=x.RegExp,hl=x.String,pl=x.TypeError,_l=il.prototype,vl=cl.prototype,gl=ll.prototype,yl=x["__core-js_shared__"],dl=vl.toString,bl=gl.hasOwnProperty,wl=0,ml=function(){var n=/[^.]+$/.exec(yl&&yl.keys&&yl.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}(),xl=gl.toString,jl=dl.call(ll),Al=re._,kl=sl("^"+dl.call(bl).replace(St,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Ol=ie?x.Buffer:X,Il=x.Symbol,Rl=x.Uint8Array,zl=Ol?Ol.allocUnsafe:X,El=F(ll.getPrototypeOf,ll),Sl=ll.create,Wl=gl.propertyIsEnumerable,Ll=_l.splice,Cl=Il?Il.isConcatSpreadable:X,Ul=Il?Il.iterator:X,Bl=Il?Il.toStringTag:X,Tl=function(){
+    try{var n=Ai(ll,"defineProperty");return n({},"",{}),n}catch(n){}}(),$l=x.clearTimeout!==re.clearTimeout&&x.clearTimeout,Dl=ol&&ol.now!==re.Date.now&&ol.now,Ml=x.setTimeout!==re.setTimeout&&x.setTimeout,Fl=al.ceil,Nl=al.floor,Pl=ll.getOwnPropertySymbols,ql=Ol?Ol.isBuffer:X,Zl=x.isFinite,Kl=_l.join,Vl=F(ll.keys,ll),Gl=al.max,Hl=al.min,Jl=ol.now,Yl=x.parseInt,Ql=al.random,Xl=_l.reverse,ns=Ai(x,"DataView"),ts=Ai(x,"Map"),rs=Ai(x,"Promise"),es=Ai(x,"Set"),us=Ai(x,"WeakMap"),is=Ai(ll,"create"),os=us&&new us,fs={},cs=to(ns),as=to(ts),ls=to(rs),ss=to(es),hs=to(us),ps=Il?Il.prototype:X,_s=ps?ps.valueOf:X,vs=ps?ps.toString:X,gs=function(){
+    function n(){}return function(t){if(!fc(t))return{};if(Sl)return Sl(t);n.prototype=t;var r=new n;return n.prototype=X,r}}();Z.templateSettings={escape:kt,evaluate:Ot,interpolate:It,variable:"",imports:{_:Z}},Z.prototype=J.prototype,Z.prototype.constructor=Z,Y.prototype=gs(J.prototype),Y.prototype.constructor=Y,Ct.prototype=gs(J.prototype),Ct.prototype.constructor=Ct,Xt.prototype.clear=nr,Xt.prototype.delete=tr,Xt.prototype.get=rr,Xt.prototype.has=er,Xt.prototype.set=ur,ir.prototype.clear=or,ir.prototype.delete=fr,
+    ir.prototype.get=cr,ir.prototype.has=ar,ir.prototype.set=lr,sr.prototype.clear=hr,sr.prototype.delete=pr,sr.prototype.get=_r,sr.prototype.has=vr,sr.prototype.set=gr,yr.prototype.add=yr.prototype.push=dr,yr.prototype.has=br,wr.prototype.clear=mr,wr.prototype.delete=xr,wr.prototype.get=jr,wr.prototype.has=Ar,wr.prototype.set=kr;var ys=Pu(ue),ds=Pu(oe,!0),bs=qu(),ws=qu(!0),ms=os?function(n,t){return os.set(n,t),n}:La,xs=Tl?function(n,t){return Tl(n,"toString",{configurable:!0,enumerable:!1,value:Sa(t),
+    writable:!0})}:La,js=uu,As=$l||function(n){return re.clearTimeout(n)},ks=es&&1/P(new es([,-0]))[1]==Sn?function(n){return new es(n)}:Da,Os=os?function(n){return os.get(n)}:Da,Is=Pl?function(n){return null==n?[]:(n=ll(n),i(Pl(n),function(t){return Wl.call(n,t)}))}:Pa,Rs=Pl?function(n){for(var t=[];n;)a(t,Is(n)),n=El(n);return t}:Pa,zs=we;(ns&&zs(new ns(new ArrayBuffer(1)))!=ct||ts&&zs(new ts)!=Gn||rs&&zs(rs.resolve())!=Qn||es&&zs(new es)!=tt||us&&zs(new us)!=it)&&(zs=function(n){var t=we(n),r=t==Yn?n.constructor:X,e=r?to(r):"";
+    if(e)switch(e){case cs:return ct;case as:return Gn;case ls:return Qn;case ss:return tt;case hs:return it}return t});var Es=yl?uc:qa,Ss=Qi(ms),Ws=Ml||function(n,t){return re.setTimeout(n,t)},Ls=Qi(xs),Cs=Pi(function(n){var t=[];return 46===n.charCodeAt(0)&&t.push(""),n.replace(Et,function(n,r,e,u){t.push(e?u.replace(Mt,"$1"):r||n)}),t}),Us=uu(function(n,t){return Jf(n)?Hr(n,ee(t,1,Jf,!0)):[]}),Bs=uu(function(n,t){var r=jo(t);return Jf(r)&&(r=X),Jf(n)?Hr(n,ee(t,1,Jf,!0),mi(r,2)):[]}),Ts=uu(function(n,t){
+    var r=jo(t);return Jf(r)&&(r=X),Jf(n)?Hr(n,ee(t,1,Jf,!0),X,r):[]}),$s=uu(function(n){var t=c(n,ju);return t.length&&t[0]===n[0]?ke(t):[]}),Ds=uu(function(n){var t=jo(n),r=c(n,ju);return t===jo(r)?t=X:r.pop(),r.length&&r[0]===n[0]?ke(r,mi(t,2)):[]}),Ms=uu(function(n){var t=jo(n),r=c(n,ju);return t="function"==typeof t?t:X,t&&r.pop(),r.length&&r[0]===n[0]?ke(r,X,t):[]}),Fs=uu(Oo),Ns=gi(function(n,t){var r=null==n?0:n.length,e=Tr(n,t);return nu(n,c(t,function(n){return Ci(n,r)?+n:n}).sort(Lu)),e}),Ps=uu(function(n){
+    return gu(ee(n,1,Jf,!0))}),qs=uu(function(n){var t=jo(n);return Jf(t)&&(t=X),gu(ee(n,1,Jf,!0),mi(t,2))}),Zs=uu(function(n){var t=jo(n);return t="function"==typeof t?t:X,gu(ee(n,1,Jf,!0),X,t)}),Ks=uu(function(n,t){return Jf(n)?Hr(n,t):[]}),Vs=uu(function(n){return mu(i(n,Jf))}),Gs=uu(function(n){var t=jo(n);return Jf(t)&&(t=X),mu(i(n,Jf),mi(t,2))}),Hs=uu(function(n){var t=jo(n);return t="function"==typeof t?t:X,mu(i(n,Jf),X,t)}),Js=uu(Go),Ys=uu(function(n){var t=n.length,r=t>1?n[t-1]:X;return r="function"==typeof r?(n.pop(),
+    r):X,Ho(n,r)}),Qs=gi(function(n){var t=n.length,r=t?n[0]:0,e=this.__wrapped__,u=function(t){return Tr(t,n)};return!(t>1||this.__actions__.length)&&e instanceof Ct&&Ci(r)?(e=e.slice(r,+r+(t?1:0)),e.__actions__.push({func:nf,args:[u],thisArg:X}),new Y(e,this.__chain__).thru(function(n){return t&&!n.length&&n.push(X),n})):this.thru(u)}),Xs=Fu(function(n,t,r){bl.call(n,r)?++n[r]:Br(n,r,1)}),nh=Ju(ho),th=Ju(po),rh=Fu(function(n,t,r){bl.call(n,r)?n[r].push(t):Br(n,r,[t])}),eh=uu(function(t,r,e){var u=-1,i="function"==typeof r,o=Hf(t)?il(t.length):[];
+    return ys(t,function(t){o[++u]=i?n(r,t,e):Ie(t,r,e)}),o}),uh=Fu(function(n,t,r){Br(n,r,t)}),ih=Fu(function(n,t,r){n[r?0:1].push(t)},function(){return[[],[]]}),oh=uu(function(n,t){if(null==n)return[];var r=t.length;return r>1&&Ui(n,t[0],t[1])?t=[]:r>2&&Ui(t[0],t[1],t[2])&&(t=[t[0]]),He(n,ee(t,1),[])}),fh=Dl||function(){return re.Date.now()},ch=uu(function(n,t,r){var e=_n;if(r.length){var u=N(r,wi(ch));e|=bn}return ai(n,e,t,r,u)}),ah=uu(function(n,t,r){var e=_n|vn;if(r.length){var u=N(r,wi(ah));e|=bn;
+    }return ai(t,e,n,r,u)}),lh=uu(function(n,t){return Gr(n,1,t)}),sh=uu(function(n,t,r){return Gr(n,Ic(t)||0,r)});Cf.Cache=sr;var hh=js(function(t,r){r=1==r.length&&bh(r[0])?c(r[0],z(mi())):c(ee(r,1),z(mi()));var e=r.length;return uu(function(u){for(var i=-1,o=Hl(u.length,e);++i<o;)u[i]=r[i].call(this,u[i]);return n(t,this,u)})}),ph=uu(function(n,t){return ai(n,bn,X,t,N(t,wi(ph)))}),_h=uu(function(n,t){return ai(n,wn,X,t,N(t,wi(_h)))}),vh=gi(function(n,t){return ai(n,xn,X,X,X,t)}),gh=ii(me),yh=ii(function(n,t){
+    return n>=t}),dh=Re(function(){return arguments}())?Re:function(n){return cc(n)&&bl.call(n,"callee")&&!Wl.call(n,"callee")},bh=il.isArray,wh=ce?z(ce):ze,mh=ql||qa,xh=ae?z(ae):Ee,jh=le?z(le):Le,Ah=se?z(se):Be,kh=he?z(he):Te,Oh=pe?z(pe):$e,Ih=ii(Ne),Rh=ii(function(n,t){return n<=t}),zh=Nu(function(n,t){if(Mi(t)||Hf(t))return $u(t,Pc(t),n),X;for(var r in t)bl.call(t,r)&&Sr(n,r,t[r])}),Eh=Nu(function(n,t){$u(t,qc(t),n)}),Sh=Nu(function(n,t,r,e){$u(t,qc(t),n,e)}),Wh=Nu(function(n,t,r,e){$u(t,Pc(t),n,e);
+    }),Lh=gi(Tr),Ch=uu(function(n,t){n=ll(n);var r=-1,e=t.length,u=e>2?t[2]:X;for(u&&Ui(t[0],t[1],u)&&(e=1);++r<e;)for(var i=t[r],o=qc(i),f=-1,c=o.length;++f<c;){var a=o[f],l=n[a];(l===X||Gf(l,gl[a])&&!bl.call(n,a))&&(n[a]=i[a])}return n}),Uh=uu(function(t){return t.push(X,si),n(Mh,X,t)}),Bh=Xu(function(n,t,r){null!=t&&"function"!=typeof t.toString&&(t=xl.call(t)),n[t]=r},Sa(La)),Th=Xu(function(n,t,r){null!=t&&"function"!=typeof t.toString&&(t=xl.call(t)),bl.call(n,t)?n[t].push(r):n[t]=[r]},mi),$h=uu(Ie),Dh=Nu(function(n,t,r){
+    Ke(n,t,r)}),Mh=Nu(function(n,t,r,e){Ke(n,t,r,e)}),Fh=gi(function(n,t){var r={};if(null==n)return r;var e=!1;t=c(t,function(t){return t=ku(t,n),e||(e=t.length>1),t}),$u(n,di(n),r),e&&(r=Fr(r,an|ln|sn,hi));for(var u=t.length;u--;)yu(r,t[u]);return r}),Nh=gi(function(n,t){return null==n?{}:Je(n,t)}),Ph=ci(Pc),qh=ci(qc),Zh=Vu(function(n,t,r){return t=t.toLowerCase(),n+(r?fa(t):t)}),Kh=Vu(function(n,t,r){return n+(r?"-":"")+t.toLowerCase()}),Vh=Vu(function(n,t,r){return n+(r?" ":"")+t.toLowerCase()}),Gh=Ku("toLowerCase"),Hh=Vu(function(n,t,r){
+    return n+(r?"_":"")+t.toLowerCase()}),Jh=Vu(function(n,t,r){return n+(r?" ":"")+Qh(t)}),Yh=Vu(function(n,t,r){return n+(r?" ":"")+t.toUpperCase()}),Qh=Ku("toUpperCase"),Xh=uu(function(t,r){try{return n(t,X,r)}catch(n){return rc(n)?n:new fl(n)}}),np=gi(function(n,t){return r(t,function(t){t=no(t),Br(n,t,ch(n[t],n))}),n}),tp=Yu(),rp=Yu(!0),ep=uu(function(n,t){return function(r){return Ie(r,n,t)}}),up=uu(function(n,t){return function(r){return Ie(n,r,t)}}),ip=ti(c),op=ti(u),fp=ti(h),cp=ui(),ap=ui(!0),lp=ni(function(n,t){
+    return n+t},0),sp=fi("ceil"),hp=ni(function(n,t){return n/t},1),pp=fi("floor"),_p=ni(function(n,t){return n*t},1),vp=fi("round"),gp=ni(function(n,t){return n-t},0);return Z.after=If,Z.ary=Rf,Z.assign=zh,Z.assignIn=Eh,Z.assignInWith=Sh,Z.assignWith=Wh,Z.at=Lh,Z.before=zf,Z.bind=ch,Z.bindAll=np,Z.bindKey=ah,Z.castArray=Nf,Z.chain=Qo,Z.chunk=uo,Z.compact=io,Z.concat=oo,Z.cond=za,Z.conforms=Ea,Z.constant=Sa,Z.countBy=Xs,Z.create=Sc,Z.curry=Ef,Z.curryRight=Sf,Z.debounce=Wf,Z.defaults=Ch,Z.defaultsDeep=Uh,
+    Z.defer=lh,Z.delay=sh,Z.difference=Us,Z.differenceBy=Bs,Z.differenceWith=Ts,Z.drop=fo,Z.dropRight=co,Z.dropRightWhile=ao,Z.dropWhile=lo,Z.fill=so,Z.filter=lf,Z.flatMap=sf,Z.flatMapDeep=hf,Z.flatMapDepth=pf,Z.flatten=_o,Z.flattenDeep=vo,Z.flattenDepth=go,Z.flip=Lf,Z.flow=tp,Z.flowRight=rp,Z.fromPairs=yo,Z.functions=$c,Z.functionsIn=Dc,Z.groupBy=rh,Z.initial=mo,Z.intersection=$s,Z.intersectionBy=Ds,Z.intersectionWith=Ms,Z.invert=Bh,Z.invertBy=Th,Z.invokeMap=eh,Z.iteratee=Ca,Z.keyBy=uh,Z.keys=Pc,Z.keysIn=qc,
+    Z.map=yf,Z.mapKeys=Zc,Z.mapValues=Kc,Z.matches=Ua,Z.matchesProperty=Ba,Z.memoize=Cf,Z.merge=Dh,Z.mergeWith=Mh,Z.method=ep,Z.methodOf=up,Z.mixin=Ta,Z.negate=Uf,Z.nthArg=Ma,Z.omit=Fh,Z.omitBy=Vc,Z.once=Bf,Z.orderBy=df,Z.over=ip,Z.overArgs=hh,Z.overEvery=op,Z.overSome=fp,Z.partial=ph,Z.partialRight=_h,Z.partition=ih,Z.pick=Nh,Z.pickBy=Gc,Z.property=Fa,Z.propertyOf=Na,Z.pull=Fs,Z.pullAll=Oo,Z.pullAllBy=Io,Z.pullAllWith=Ro,Z.pullAt=Ns,Z.range=cp,Z.rangeRight=ap,Z.rearg=vh,Z.reject=mf,Z.remove=zo,Z.rest=Tf,
+    Z.reverse=Eo,Z.sampleSize=jf,Z.set=Jc,Z.setWith=Yc,Z.shuffle=Af,Z.slice=So,Z.sortBy=oh,Z.sortedUniq=$o,Z.sortedUniqBy=Do,Z.split=da,Z.spread=$f,Z.tail=Mo,Z.take=Fo,Z.takeRight=No,Z.takeRightWhile=Po,Z.takeWhile=qo,Z.tap=Xo,Z.throttle=Df,Z.thru=nf,Z.toArray=jc,Z.toPairs=Ph,Z.toPairsIn=qh,Z.toPath=Ha,Z.toPlainObject=Rc,Z.transform=Qc,Z.unary=Mf,Z.union=Ps,Z.unionBy=qs,Z.unionWith=Zs,Z.uniq=Zo,Z.uniqBy=Ko,Z.uniqWith=Vo,Z.unset=Xc,Z.unzip=Go,Z.unzipWith=Ho,Z.update=na,Z.updateWith=ta,Z.values=ra,Z.valuesIn=ea,
+    Z.without=Ks,Z.words=Ra,Z.wrap=Ff,Z.xor=Vs,Z.xorBy=Gs,Z.xorWith=Hs,Z.zip=Js,Z.zipObject=Jo,Z.zipObjectDeep=Yo,Z.zipWith=Ys,Z.entries=Ph,Z.entriesIn=qh,Z.extend=Eh,Z.extendWith=Sh,Ta(Z,Z),Z.add=lp,Z.attempt=Xh,Z.camelCase=Zh,Z.capitalize=fa,Z.ceil=sp,Z.clamp=ua,Z.clone=Pf,Z.cloneDeep=Zf,Z.cloneDeepWith=Kf,Z.cloneWith=qf,Z.conformsTo=Vf,Z.deburr=ca,Z.defaultTo=Wa,Z.divide=hp,Z.endsWith=aa,Z.eq=Gf,Z.escape=la,Z.escapeRegExp=sa,Z.every=af,Z.find=nh,Z.findIndex=ho,Z.findKey=Wc,Z.findLast=th,Z.findLastIndex=po,
+    Z.findLastKey=Lc,Z.floor=pp,Z.forEach=_f,Z.forEachRight=vf,Z.forIn=Cc,Z.forInRight=Uc,Z.forOwn=Bc,Z.forOwnRight=Tc,Z.get=Mc,Z.gt=gh,Z.gte=yh,Z.has=Fc,Z.hasIn=Nc,Z.head=bo,Z.identity=La,Z.includes=gf,Z.indexOf=wo,Z.inRange=ia,Z.invoke=$h,Z.isArguments=dh,Z.isArray=bh,Z.isArrayBuffer=wh,Z.isArrayLike=Hf,Z.isArrayLikeObject=Jf,Z.isBoolean=Yf,Z.isBuffer=mh,Z.isDate=xh,Z.isElement=Qf,Z.isEmpty=Xf,Z.isEqual=nc,Z.isEqualWith=tc,Z.isError=rc,Z.isFinite=ec,Z.isFunction=uc,Z.isInteger=ic,Z.isLength=oc,Z.isMap=jh,
+    Z.isMatch=ac,Z.isMatchWith=lc,Z.isNaN=sc,Z.isNative=hc,Z.isNil=_c,Z.isNull=pc,Z.isNumber=vc,Z.isObject=fc,Z.isObjectLike=cc,Z.isPlainObject=gc,Z.isRegExp=Ah,Z.isSafeInteger=yc,Z.isSet=kh,Z.isString=dc,Z.isSymbol=bc,Z.isTypedArray=Oh,Z.isUndefined=wc,Z.isWeakMap=mc,Z.isWeakSet=xc,Z.join=xo,Z.kebabCase=Kh,Z.last=jo,Z.lastIndexOf=Ao,Z.lowerCase=Vh,Z.lowerFirst=Gh,Z.lt=Ih,Z.lte=Rh,Z.max=Ya,Z.maxBy=Qa,Z.mean=Xa,Z.meanBy=nl,Z.min=tl,Z.minBy=rl,Z.stubArray=Pa,Z.stubFalse=qa,Z.stubObject=Za,Z.stubString=Ka,
+    Z.stubTrue=Va,Z.multiply=_p,Z.nth=ko,Z.noConflict=$a,Z.noop=Da,Z.now=fh,Z.pad=ha,Z.padEnd=pa,Z.padStart=_a,Z.parseInt=va,Z.random=oa,Z.reduce=bf,Z.reduceRight=wf,Z.repeat=ga,Z.replace=ya,Z.result=Hc,Z.round=vp,Z.runInContext=p,Z.sample=xf,Z.size=kf,Z.snakeCase=Hh,Z.some=Of,Z.sortedIndex=Wo,Z.sortedIndexBy=Lo,Z.sortedIndexOf=Co,Z.sortedLastIndex=Uo,Z.sortedLastIndexBy=Bo,Z.sortedLastIndexOf=To,Z.startCase=Jh,Z.startsWith=ba,Z.subtract=gp,Z.sum=el,Z.sumBy=ul,Z.template=wa,Z.times=Ga,Z.toFinite=Ac,Z.toInteger=kc,
+    Z.toLength=Oc,Z.toLower=ma,Z.toNumber=Ic,Z.toSafeInteger=zc,Z.toString=Ec,Z.toUpper=xa,Z.trim=ja,Z.trimEnd=Aa,Z.trimStart=ka,Z.truncate=Oa,Z.unescape=Ia,Z.uniqueId=Ja,Z.upperCase=Yh,Z.upperFirst=Qh,Z.each=_f,Z.eachRight=vf,Z.first=bo,Ta(Z,function(){var n={};return ue(Z,function(t,r){bl.call(Z.prototype,r)||(n[r]=t)}),n}(),{chain:!1}),Z.VERSION=nn,r(["bind","bindKey","curry","curryRight","partial","partialRight"],function(n){Z[n].placeholder=Z}),r(["drop","take"],function(n,t){Ct.prototype[n]=function(r){
+    r=r===X?1:Gl(kc(r),0);var e=this.__filtered__&&!t?new Ct(this):this.clone();return e.__filtered__?e.__takeCount__=Hl(r,e.__takeCount__):e.__views__.push({size:Hl(r,Un),type:n+(e.__dir__<0?"Right":"")}),e},Ct.prototype[n+"Right"]=function(t){return this.reverse()[n](t).reverse()}}),r(["filter","map","takeWhile"],function(n,t){var r=t+1,e=r==Rn||r==En;Ct.prototype[n]=function(n){var t=this.clone();return t.__iteratees__.push({iteratee:mi(n,3),type:r}),t.__filtered__=t.__filtered__||e,t}}),r(["head","last"],function(n,t){
+    var r="take"+(t?"Right":"");Ct.prototype[n]=function(){return this[r](1).value()[0]}}),r(["initial","tail"],function(n,t){var r="drop"+(t?"":"Right");Ct.prototype[n]=function(){return this.__filtered__?new Ct(this):this[r](1)}}),Ct.prototype.compact=function(){return this.filter(La)},Ct.prototype.find=function(n){return this.filter(n).head()},Ct.prototype.findLast=function(n){return this.reverse().find(n)},Ct.prototype.invokeMap=uu(function(n,t){return"function"==typeof n?new Ct(this):this.map(function(r){
+    return Ie(r,n,t)})}),Ct.prototype.reject=function(n){return this.filter(Uf(mi(n)))},Ct.prototype.slice=function(n,t){n=kc(n);var r=this;return r.__filtered__&&(n>0||t<0)?new Ct(r):(n<0?r=r.takeRight(-n):n&&(r=r.drop(n)),t!==X&&(t=kc(t),r=t<0?r.dropRight(-t):r.take(t-n)),r)},Ct.prototype.takeRightWhile=function(n){return this.reverse().takeWhile(n).reverse()},Ct.prototype.toArray=function(){return this.take(Un)},ue(Ct.prototype,function(n,t){var r=/^(?:filter|find|map|reject)|While$/.test(t),e=/^(?:head|last)$/.test(t),u=Z[e?"take"+("last"==t?"Right":""):t],i=e||/^find/.test(t);
+    u&&(Z.prototype[t]=function(){var t=this.__wrapped__,o=e?[1]:arguments,f=t instanceof Ct,c=o[0],l=f||bh(t),s=function(n){var t=u.apply(Z,a([n],o));return e&&h?t[0]:t};l&&r&&"function"==typeof c&&1!=c.length&&(f=l=!1);var h=this.__chain__,p=!!this.__actions__.length,_=i&&!h,v=f&&!p;if(!i&&l){t=v?t:new Ct(this);var g=n.apply(t,o);return g.__actions__.push({func:nf,args:[s],thisArg:X}),new Y(g,h)}return _&&v?n.apply(this,o):(g=this.thru(s),_?e?g.value()[0]:g.value():g)})}),r(["pop","push","shift","sort","splice","unshift"],function(n){
+    var t=_l[n],r=/^(?:push|sort|unshift)$/.test(n)?"tap":"thru",e=/^(?:pop|shift)$/.test(n);Z.prototype[n]=function(){var n=arguments;if(e&&!this.__chain__){var u=this.value();return t.apply(bh(u)?u:[],n)}return this[r](function(r){return t.apply(bh(r)?r:[],n)})}}),ue(Ct.prototype,function(n,t){var r=Z[t];if(r){var e=r.name+"";bl.call(fs,e)||(fs[e]=[]),fs[e].push({name:t,func:r})}}),fs[Qu(X,vn).name]=[{name:"wrapper",func:X}],Ct.prototype.clone=$t,Ct.prototype.reverse=Yt,Ct.prototype.value=Qt,Z.prototype.at=Qs,
+    Z.prototype.chain=tf,Z.prototype.commit=rf,Z.prototype.next=ef,Z.prototype.plant=of,Z.prototype.reverse=ff,Z.prototype.toJSON=Z.prototype.valueOf=Z.prototype.value=cf,Z.prototype.first=Z.prototype.head,Ul&&(Z.prototype[Ul]=uf),Z},be=de();"function"==typeof define&&"object"==typeof define.amd&&define.amd?(re._=be,define(function(){return be})):ue?((ue.exports=be)._=be,ee._=be):re._=be}).call(this);

loginv3/components/dekstop.vue

@@ -7,7 +7,7 @@
         <v-img
           min-height="100vh"
           cover
-          style="background-repeat: repeat-y;"
+          style="background-repeat: repeat-y"
           class="bg-white"
           src="./images/bg-left.jpg"
           cover
@@ -17,8 +17,8 @@
         <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
           <v-img
             class="bg-white"
-            height="86px"
+            height="12px"
-            aspect-ratio="16/9"
+            aspect-ratio="1"
             src="../globalimages/logo.png"
           ></v-img>
         </div>
@@ -32,7 +32,7 @@
                       <h2 class="text-h6 font-weight-black">
                         {{ $t("message.title") }}
                       </h2>
-                      <p class="text-subtitle-1" style="color: #637381;">
+                      <p class="text-subtitle-1" style="color: #637381">
                         {{ $t("message.sublogin") }}
                       </p>
                     </v-sheet>
@@ -71,7 +71,7 @@
                   <v-text-field
                     :label="$t('message.password')"
                     v-model="password"
-                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                    :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'"
                     :type="visible ? 'text' : 'password'"
                     :placeholder="$t('message.placeholderPassword')"
                     variant="outlined"
@@ -90,9 +90,7 @@
                       {{ $t("message.login") }}
                       <template v-slot:loader>
                         <!-- <v-progress-linear indeterminate></v-progress-linear> -->
-                        <v-progress-circular
+                        <v-progress-circular indeterminate></v-progress-circular>
-                          indeterminate
-                        ></v-progress-circular>
                       </template>
                     </v-btn>
                   </div>
@@ -107,48 +105,48 @@
 </template>
 
 <script type="module">
-  export default {
+export default {
-    name: "dekstop",
+  name: "dekstop",
-    data() {
+  data() {
-      return {
+    return {
-        visible: false,
+      visible: false,
-      };
+    };
+  },
+  computed: {
+    // Akses state dari store
+    loading() {
+      return this.$store.state.login.loading;
     },
-    computed: {
+    alert() {
-      // Akses state dari store
+      return this.$store.state.login.alert;
-      loading() {
+    },
-        return this.$store.state.login.loading;
+    email: {
+      get() {
+        return this.$store.state.login.email;
       },
-      alert() {
+      set(val) {
-        return this.$store.state.login.alert;
+        this.$store.commit("login/setEmail", val);
-      },
-      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: {
+    password: {
-      // Dispatch action ke store
+      get() {
-      login() {
+        return this.$store.state.login.password;
-        this.$store.dispatch("login/login");
       },
-      increment() {
+      set(val) {
-        this.$store.dispatch("increment");
+        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

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WESTONE</title>
+    <title>BISKEU</title>
     <!-- Vuetify CSS -->
     <link href="../css/vuetify.css" rel="stylesheet" />
     <!-- Local Stylesheet for Fonts -->

registration/components/datatable_patient.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <v-card class="mb-3">
+      <v-card-text>
+        <div class="d-flex">
+          <v-text-field
+            v-model="value"
+            label="Ketikkan pencarian pasien"
+            placeholder="Mulai mengetik lalu tekan enter..."
+            :loading="loading"
+            hint="NAMA + DOB (DD-MM-YYYY) + NIK + HP"
+            hide-details="auto"
+            class="me-auto pr-1"
+            density="compact"
+          >
+          </v-text-field>
+
+          <!--<v-btn-toggle
+          v-model="type_card"
+          variant="outlined"
+          divided
+          class="mt-1"
+          density="compact"
+  
+        >
+          <v-btn >
+            <v-icon size="x-large"  icon="mdi-badge-account"></v-icon>
+          </v-btn>
+  
+          <v-btn>
+            <v-icon size="x-large"  icon="mdi-book-account"></v-icon>
+          </v-btn>
+        </v-btn-toggle>-->
+        </div>
+      </v-card-text>
+    </v-card>
+    <v-card
+      border="xl"
+      variant="outlined"
+      class="scroll-container pa-2"
+      style="height: 70vh"
+    >
+      <v-list selectable lines="three" item-props density="compact">
+        <v-list-subheader inset>Hasil Pencarian Pasien</v-list-subheader>
+
+        <v-list-item
+          v-for="(item, index) in items"
+          :key="index"
+          @click="handleSelect(item)"
+        >
+          <template v-slot:prepend>
+            <v-avatar color="grey-lighten-1">
+              <v-img
+                :src="item.prependAvatar"
+                class="rounded-circle"
+                max-width="40"
+              ></v-img>
+            </v-avatar>
+          </template>
+          <template v-slot:title>
+            <div v-html="item.title"></div>
+          </template>
+          <template v-slot:subtitle>
+            <div v-html="item.subtitle"></div>
+            <v-chip class="mt-1 mr-1" color="pink" label size="small">
+              <v-icon icon="mdi-cake" start></v-icon>
+              {{ item.dob }}
+            </v-chip>
+
+            <v-chip class="mt-1 mr-1" color="primary" label size="small">
+              <v-icon icon="mdi-phone" start></v-icon>
+              {{ item.hp }}
+            </v-chip>
+          </template>
+
+          <template v-slot:append>
+            <v-btn
+              v-if="item.selected"
+              color="green"
+              icon="mdi-check"
+              variant="text"
+            ></v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+const items = [
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+    title: "LAA0000082",
+    subtitle: `<span class="text-primary">Fatiha Rizku Nur Imansari</span> &mdash; Giwangan Tegal Turi UH.7 144 Sawunggaling, Wonokromo, Surabaya`,
+    dob: "19-01-2001",
+    hp: "087731221123",
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+    title: "LAA0007904",
+    subtitle: `<span class="text-primary">Stephan Wilson Mandala Putra Aditama</span> &mdash; Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
+    dob: "07-07-2002",
+    hp: "081234222126",
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+    title: "LAA0000035",
+    subtitle:
+      '<span class="text-primary">Ujang Taufik S.Sastramidjaja</span> &mdash; JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya?',
+    dob: "14-09-1988",
+    hp: "085111222129",
+    selected: false,
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+    title: "LAA0000072",
+    subtitle:
+      '<span class="text-primary">Santi Yuliana</span> &mdash; Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
+    dob: "11-10-2004",
+    hp: "0852343421900",
+    selected: true,
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+    title: "LAA0010689",
+    subtitle:
+      '<span class="text-primary">Cindy Tiara Hadianti</span> &mdash; Gunung Sari Indah OO-9 Sawunggaling, Wonokromo, Surabaya',
+    dob: "17-01-2001",
+    hp: "087734211126",
+    selected: false,
+  },
+];
+</script>
+<script>
+export default {
+  name: "leftcomp",
+  components: {},
+  mounted() {},
+  data() {
+    return {
+      selected: {},
+      type_card: 0,
+      value: "",
+      loading: false,
+      expanded: [],
+      headers: [
+        {
+          title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
+          align: "start",
+          key: "M_PatientNoReg",
+          sortable: true,
+          width: "15%",
+          value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Nama",
+          align: "start",
+          key: "M_PatientName",
+          sortable: true,
+          width: "35%",
+          value: "PatientFullName", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Alamat",
+          align: "start",
+          key: "M_PatientAddress",
+          sortable: true,
+          value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
+        },
+      ],
+    };
+  },
+  computed: {
+    search: {
+      get() {
+        return this.$store.state.patient.search;
+      },
+      set(data) {
+        this.$store.commit("setSearch", data);
+      },
+    },
+    patients() {
+      return this.$store.state.patient.patients;
+    },
+    selected_patient: {
+      get() {
+        return this.$store.state.patient.selected_patient;
+      },
+      set(data) {
+        this.$store.commit("setSelectedPatient", data);
+      },
+    },
+    current_page: {
+      get() {
+        return this.$store.state.patient.current_page;
+      },
+      set(data) {
+        this.$store.commit("setCurrentPage", data);
+      },
+    },
+    loading: {
+      get() {
+        return this.$store.state.patient.loading;
+      },
+      set(data) {
+        this.$store.commit("setLoading", data);
+      },
+    },
+    loadmore: {
+      get() {
+        return this.$store.state.patient.loadmore;
+      },
+      set(data) {
+        this.$store.commit("setLoadMore", data);
+      },
+    },
+    itemsperpage: {
+      get() {
+        return this.$store.state.patient.itemsperpage;
+      },
+      set(data) {
+        this.$store.commit("setItemsPerPage", data);
+      },
+    },
+    sortby: {
+      get() {
+        return this.$store.state.patient.sortby;
+      },
+      set(data) {
+        this.$store.commit("setSortBy", data);
+      },
+    },
+  },
+  methods: {
+    handleSelect(item) {
+      console.log("Selected item:", item);
+      this.selected = item; // Simpan item yang dipilih
+    },
+    selectItem(data) {
+      this.selected_patient = data;
+    },
+    isItemSelected(data) {
+      return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
+    },
+    searchPat() {
+      this.current_page = 1;
+      this.searchPatients();
+    },
+    searchPatients() {
+      if (this.search != "") {
+        this.loading = true;
+        const formattedSortBy =
+          this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
+        if (this.search !== "") {
+          this.$store
+            .dispatch("searchPatients", {
+              current_page: this.current_page,
+              items_per_page: this.itemsperpage,
+              sort_by: formattedSortBy,
+              search: this.search,
+            })
+            .then(() => {
+              this.loading = false;
+            });
+        }
+      }
+    },
+    loadMore() {
+      this.current_page += 1;
+      this.searchPatients();
+    },
+    handleSort(sortBy) {
+      this.sortby = sortBy.map((sort) => ({
+        key: sort.key,
+        order: sort.order === "desc" ? "desc" : "asc",
+      }));
+      this.current_page = 1;
+      this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row-pointer >>> tbody tr :hover {
+  cursor: pointer;
+}
+</style>

registration/components/datatable_patient_old.vue

@@ -0,0 +1,439 @@
+<template>
+  <div >
+  
+      <v-card class="mb-3">
+        <v-card-text>
+             <div class="d-flex">
+              <v-text-field
+            v-model="value"
+            label="Ketikkan pencarian pasien"
+            placeholder="Mulai mengetik lalu tekan enter..."
+            :loading="loading"
+            hint="NAMA + DOB (DD-MM-YYYY) + NIK + HP"
+            hide-details="auto"
+            class="me-auto pr-3"
+            density="compact"
+          >
+        </v-text-field>
+    
+
+        <v-btn-toggle
+        v-model="type_card"
+        variant="outlined"
+        divided
+        class="mt-1"
+        density="compact"
+
+      >
+        <v-btn >
+          <v-icon size="x-large"  icon="mdi-badge-account"></v-icon>
+        </v-btn>
+
+        <v-btn>
+          <v-icon size="x-large"  icon="mdi-book-account"></v-icon>
+        </v-btn>
+      </v-btn-toggle>
+            </div>
+          
+        </v-card-text>
+      </v-card>
+      <v-card border="xl" variant="outlined" class="scroll-container pa-2" style="height:70vh">
+      <v-card
+          class="mb-3"
+          subtitle="AAE0033398"
+          color="orange-lighten-5"
+          dark
+          prepend-avatar="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
+        >
+
+          <template v-slot:title>
+            <span class="text-subtitle-1 font-weight-bold">Fajri Hardhita M</span>
+          </template>
+          <template v-slot:append>
+            <v-btn
+              class="ma-2 text-none"
+              color="success"
+              label
+              v-show="type_card == 1"
+              size="small"
+              variant="tonal"
+            >
+              <v-icon icon="mdi-check" start></v-icon>
+              Telah dipilih
+            </v-btn>
+        </template>
+   
+          <v-divider></v-divider>
+          <v-card-text class="pt-1 pl-0 ml-0 mb-0 pb-0 pr-2">
+            <div class="d-flex justify-start no-gutters">
+              <v-chip
+            class="ma-2"
+            color="pink"
+            label
+            
+            size="small"
+          >
+            <v-icon icon="mdi-label" start></v-icon>
+            Tags
+          </v-chip>
+
+          <v-chip
+            class="ma-2"
+            color="primary"
+            label
+            size="small"
+          >
+            <v-icon icon="mdi-account-circle-outline" start></v-icon>
+            John Leider
+          </v-chip>
+          <v-chip
+            class="ma-2"
+            color="cyan"
+          size="small"
+            label
+          >
+            <v-icon icon="mdi-twitter" start></v-icon>
+            New Tweets
+          </v-chip>
+            </div>
+            <v-card v-show="type_card == 0" class="ml-2 mb-0 mr-0 pr-0"
+              variant="tonal"
+              density="compact"
+              color="blue-grey-lighten-1"
+              text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
+            ></v-card>
+
+          </v-card-text>
+          <v-card-actions v-show="type_card == 0">
+            <v-btn
+            color="success"
+            prepend-icon='mdi-check'
+            class="text-none"
+            block
+            text="Pasien telah dipilih"
+            variant="tonal"
+          ></v-btn>
+          </v-card-actions>
+        </v-card>
+        <v-card
+          class="mb-3"
+          subtitle="AAE0033398"
+        
+          prepend-avatar="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
+        >
+
+          <template v-slot:title>
+            <span class="text-subtitle-1 font-weight-bold">Fajri Hardhita M</span>
+          </template>
+          <template  v-slot:append >
+            <v-btn
+              v-show="type_card == 1"
+              class="ma-2 text-white text-none"
+              color="blue-lighten-2"
+              label
+              size="small"
+              variant="elevated"
+            >
+              Pilih pasien
+            </v-btn>
+        </template>
+          <v-divider></v-divider>
+          <v-card-text class="pt-1 pl-0 ml-0 mb-0 pb-0 pr-2">
+            <div class="d-flex justify-start no-gutters">
+              <v-chip
+            class="ma-2"
+            color="pink"
+            label
+            size="small"
+          >
+            <v-icon icon="mdi-label" start></v-icon>
+            Tags
+          </v-chip>
+
+          <v-chip
+            class="ma-2"
+            color="primary"
+            label
+            size="small"
+          >
+            <v-icon icon="mdi-account-circle-outline" start></v-icon>
+            John Leider
+          </v-chip>
+          <v-chip
+            class="ma-2"
+            color="cyan"
+          size="small"
+            label
+          >
+            <v-icon icon="mdi-twitter" start></v-icon>
+            New Tweets
+          </v-chip>
+            </div>
+            <v-card class="ml-2 mb-0 mr-0 pr-0"
+              variant="tonal"
+              v-show="type_card == 0"
+              density="compact"
+              text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
+            ></v-card>
+
+          </v-card-text>
+          <v-card-actions v-show="type_card == 0">
+            <v-btn
+              color="blue-lighten-2"
+              text="Pilih pasien"
+              class="text-none"
+              block
+              border
+              @click="reserve"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
+        <v-divider class="mt-2 mb-2"></v-divider>
+        <v-card>
+          <v-btn
+              color="orange-lighten-3"
+              text="Tampilkan lebih banyak"
+              class="text-none"
+              block
+              border="5px"
+            ></v-btn>
+        </v-card>
+      </v-card>
+
+      <!--<v-data-table-server
+        :headers="headers"
+        :items="patients"
+        :items-per-page="itemperpage"
+        :sort-by="sortby"
+        height="47vh"
+        fixed-header
+        :loading="loading"
+        @update:sort-by="handleSort"
+      >
+        <template v-slot:top>
+          <div class="d-flex align-center mb-2">
+            <v-sheet style="width: 100%" class="pr-2">
+              <v-text-field
+                variant="outlined"
+                v-model="search"
+                placeholder="Ketikkan kata pencarian"
+                label="Cari"
+                hint="Nama+NIK+DOB+HP+Alamat"
+                @keyup.enter="searchPat"
+                density="compact"
+              ></v-text-field
+            ></v-sheet>
+            <v-sheet style="width: 60px" class="text-center">
+              <v-btn
+                :disabled="loading"
+                @click="searchPat"
+                height="40"
+                min-width="40"
+                class="mb-5"
+                color="primary"
+              >
+                <v-icon>mdi-magnify</v-icon>
+              </v-btn>
+            </v-sheet>
+            <v-sheet style="width: 60px" class="text-center pl-2">
+              <v-btn height="40" min-width="40" class="mb-5" color="warning">
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </v-sheet>
+          </div>
+        </template>
+        <template v-slot:item="{ item }">
+          <tr
+            @click="selectItem(item)"
+            v-bind:class="{ 'bg-primary-lighten': isItemSelected(item) }"
+          >
+            <td>{{ item.M_PatientNoReg }}</td>
+            <td>
+              <p class="mb-0">{{ item.PatientFullName }}</p>
+              <p
+                class="text-caption text-no-wrap bg-secondary"
+                style="padding-left: 0.3rem; width: 10rem"
+              >
+                NIK : {{ item.M_PatientIDNumber }}
+              </p>
+            </td>
+            <td>{{ item.M_PatientAddressDescription }}</td>
+          </tr>
+        </template>
+        <template v-slot:bottom>
+          <div v-if="patients.length > 0" class="text-center pt-2">
+            <v-btn
+              :loading="loading"
+              v-if="loadmore"
+              @click="loadMore()"
+              class="mt-3 mb-0 text-none"
+              variant="tonal"
+              color="primary-darken"
+              block
+              >Tampilkan data lebih banyak ...</v-btn
+            >
+            <v-btn
+              v-if="!loadmore"
+              class="mt-3 mb-0 text-none"
+              color="error-darken"
+              block
+              variant="tonal"
+              >Sudah tidak ada data ditemukan</v-btn
+            >
+          </div>
+        </template>
+      </v-data-table-server>-->
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "leftcomp",
+  components: {},
+  mounted() {},
+  data() {
+    return {
+      type_card:0,
+      value:'',
+      loading:false,
+      expanded: [],
+      headers: [
+        {
+          title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
+          align: "start",
+          key: "M_PatientNoReg",
+          sortable: true,
+          width: "15%",
+          value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Nama",
+          align: "start",
+          key: "M_PatientName",
+          sortable: true,
+          width: "35%",
+          value: "PatientFullName", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Alamat",
+          align: "start",
+          key: "M_PatientAddress",
+          sortable: true,
+          value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
+        },
+      ],
+    };
+  },
+  computed: {
+    search: {
+      get() {
+        return this.$store.state.patient.search;
+      },
+      set(data) {
+        this.$store.commit("setSearch", data);
+      },
+    },
+    patients() {
+      return this.$store.state.patient.patients;
+    },
+    selected_patient: {
+      get() {
+        return this.$store.state.patient.selected_patient;
+      },
+      set(data) {
+        this.$store.commit("setSelectedPatient", data);
+      },
+    },
+    current_page: {
+      get() {
+        return this.$store.state.patient.current_page;
+      },
+      set(data) {
+        this.$store.commit("setCurrentPage", data);
+      },
+    },
+    loading: {
+      get() {
+        return this.$store.state.patient.loading;
+      },
+      set(data) {
+        this.$store.commit("setLoading", data);
+      },
+    },
+    loadmore: {
+      get() {
+        return this.$store.state.patient.loadmore;
+      },
+      set(data) {
+        this.$store.commit("setLoadMore", data);
+      },
+    },
+    itemsperpage: {
+      get() {
+        return this.$store.state.patient.itemsperpage;
+      },
+      set(data) {
+        this.$store.commit("setItemsPerPage", data);
+      },
+    },
+    sortby: {
+      get() {
+        return this.$store.state.patient.sortby;
+      },
+      set(data) {
+        this.$store.commit("setSortBy", data);
+      },
+    },
+  },
+  methods: {
+    selectItem(data) {
+      this.selected_patient = data;
+    },
+    isItemSelected(data) {
+      return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
+    },
+    searchPat() {
+      this.current_page = 1;
+      this.searchPatients();
+    },
+    searchPatients() {
+      if(this.search != ''){
+        this.loading = true;
+        const formattedSortBy =
+          this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
+        if (this.search !== "") {
+          this.$store
+            .dispatch("searchPatients", {
+              current_page: this.current_page,
+              items_per_page: this.itemsperpage,
+              sort_by: formattedSortBy,
+              search: this.search,
+            })
+            .then(() => {
+              this.loading = false;
+            });
+        }
+      }
+    },
+    loadMore() {
+      this.current_page += 1;
+      this.searchPatients();
+    },
+    handleSort(sortBy) {
+      this.sortby = sortBy.map((sort) => ({
+        key: sort.key,
+        order: sort.order === "desc" ? "desc" : "asc",
+      }));
+      this.current_page = 1;
+      this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row-pointer >>> tbody tr :hover {
+  cursor: pointer;
+}
+</style>

registration/components/form_patient.vue

@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <v-card class="scroll-container pa-2" style="height: 70vh">
+      <v-toolbar color="amber-lighten-5" density="compact">
+        <v-toolbar-title class="text-subtitle-1 font-weight-medium"
+          >DATA PASIEN</v-toolbar-title
+        >
+
+        <v-spacer></v-spacer>
+
+        <v-btn icon>
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-row no-gutters class="mt-2">
+        <v-col cols="3">
+          <div class="d-flex mb-2">
+            <v-img
+              :aspect-ratio="1"
+              class="bg-white"
+              src="https://cdn.vuetifyjs.com/images/lists/4.jpg"
+              width="250"
+              rounded
+              cover
+            ></v-img>
+          </div>
+          <div class="d-flex mb-2">
+            <v-btn
+              color="primary"
+              text="Ganti Foto"
+              class="flex-grow-1"
+              variant="tonal"
+              flat
+            ></v-btn>
+          </div>
+          <div class="d-flex mb-2">
+            <v-btn
+              color="primary"
+              text="Update Data"
+              class="flex-grow-1"
+              variant="tonal"
+              flat
+            ></v-btn>
+          </div>
+          <div class="d-flex mb-2">
+            <v-btn
+              color="primary"
+              text="Riwayat Order"
+              class="flex-grow-1"
+              variant="tonal"
+              flat
+            ></v-btn>
+          </div>
+        </v-col>
+        <v-col class="pl-2" cols="9">
+          <v-row no-gutters class="mt-0">
+            <v-col cols="12">
+              <v-text-field
+                v-model="first"
+                color="primary"
+                density="compact"
+                label="PID"
+                hide-details="auto"
+                variant="underlined"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="mt-3">
+            <v-col cols="3" class="pr-2">
+              <v-text-field
+                v-model="first"
+                color="primary"
+                hide-details="auto"
+                density="compact"
+                label="Awalan"
+                variant="underlined"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="6">
+              <v-text-field
+                v-model="first"
+                color="primary"
+                hide-details="auto"
+                density="compact"
+                label="Nama"
+                variant="underlined"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="3" class="pl-2">
+              <v-text-field
+                v-model="first"
+                color="primary"
+                hide-details="auto"
+                density="compact"
+                label="Akhiran"
+                variant="underlined"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="mt-3">
+            <v-col cols="6" class="pr2">
+              <v-select
+                :items="genders"
+                density="compact"
+                label="Jenis Kelamin"
+                return-object
+                item-title="name"
+                variant="underlined"
+              ></v-select>
+            </v-col>
+            <v-col cols="6" class="pl-2">
+              <v-select
+                :items="titles"
+                density="compact"
+                label="Sapaan"
+                return-object
+                item-title="name"
+                variant="underlined"
+              ></v-select>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+const titles = [
+  { id: "1", name: "Tn" },
+  { id: "2", name: "Bapak" },
+];
+const genders = [
+  { id: "M", name: "Laki-laki" },
+  { id: "P", name: "Perempuan" },
+];
+const items = [
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+    title: "LAA0000082",
+    subtitle: `<span class="text-primary">Fatiha Rizku Nur Imansari</span> &mdash; Giwangan Tegal Turi UH.7 144 Sawunggaling, Wonokromo, Surabaya`,
+    dob: "19-01-2001",
+    hp: "087731221123",
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+    title: "LAA0007904",
+    subtitle: `<span class="text-primary">Stephan Wilson Mandala Putra Aditama</span> &mdash; Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
+    dob: "07-07-2002",
+    hp: "081234222126",
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+    title: "LAA0000035",
+    subtitle:
+      '<span class="text-primary">Ujang Taufik S.Sastramidjaja</span> &mdash; JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya?',
+    dob: "14-09-1988",
+    hp: "085111222129",
+    selected: true,
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+    title: "LAA0000072",
+    subtitle:
+      '<span class="text-primary">Santi Yuliana</span> &mdash; Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
+    dob: "11-10-2004",
+    hp: "0852343421900",
+    selected: false,
+  },
+
+  {
+    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+    title: "LAA0010689",
+    subtitle:
+      '<span class="text-primary">Cindy Tiara Hadianti</span> &mdash; Gunung Sari Indah OO-9 Sawunggaling, Wonokromo, Surabaya',
+    dob: "17-01-2001",
+    hp: "087734211126",
+    selected: false,
+  },
+];
+</script>
+<script>
+export default {
+  name: "leftcomp",
+  components: {},
+  mounted() {},
+  data() {
+    return {
+      selected: {},
+      type_card: 0,
+      value: "",
+      loading: false,
+      expanded: [],
+      headers: [
+        {
+          title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
+          align: "start",
+          key: "M_PatientNoReg",
+          sortable: true,
+          width: "15%",
+          value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Nama",
+          align: "start",
+          key: "M_PatientName",
+          sortable: true,
+          width: "35%",
+          value: "PatientFullName", // tambahkan 'value' untuk identifikasi
+        },
+        {
+          title: "Alamat",
+          align: "start",
+          key: "M_PatientAddress",
+          sortable: true,
+          value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
+        },
+      ],
+    };
+  },
+  computed: {
+    search: {
+      get() {
+        return this.$store.state.patient.search;
+      },
+      set(data) {
+        this.$store.commit("setSearch", data);
+      },
+    },
+    patients() {
+      return this.$store.state.patient.patients;
+    },
+    selected_patient: {
+      get() {
+        return this.$store.state.patient.selected_patient;
+      },
+      set(data) {
+        this.$store.commit("setSelectedPatient", data);
+      },
+    },
+    current_page: {
+      get() {
+        return this.$store.state.patient.current_page;
+      },
+      set(data) {
+        this.$store.commit("setCurrentPage", data);
+      },
+    },
+    loading: {
+      get() {
+        return this.$store.state.patient.loading;
+      },
+      set(data) {
+        this.$store.commit("setLoading", data);
+      },
+    },
+    loadmore: {
+      get() {
+        return this.$store.state.patient.loadmore;
+      },
+      set(data) {
+        this.$store.commit("setLoadMore", data);
+      },
+    },
+    itemsperpage: {
+      get() {
+        return this.$store.state.patient.itemsperpage;
+      },
+      set(data) {
+        this.$store.commit("setItemsPerPage", data);
+      },
+    },
+    sortby: {
+      get() {
+        return this.$store.state.patient.sortby;
+      },
+      set(data) {
+        this.$store.commit("setSortBy", data);
+      },
+    },
+  },
+  methods: {
+    handleSelect(item) {
+      console.log("Selected item:", item);
+      this.selected = item; // Simpan item yang dipilih
+    },
+    selectItem(data) {
+      this.selected_patient = data;
+    },
+    isItemSelected(data) {
+      return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
+    },
+    searchPat() {
+      this.current_page = 1;
+      this.searchPatients();
+    },
+    searchPatients() {
+      if (this.search != "") {
+        this.loading = true;
+        const formattedSortBy =
+          this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
+        if (this.search !== "") {
+          this.$store
+            .dispatch("searchPatients", {
+              current_page: this.current_page,
+              items_per_page: this.itemsperpage,
+              sort_by: formattedSortBy,
+              search: this.search,
+            })
+            .then(() => {
+              this.loading = false;
+            });
+        }
+      }
+    },
+    loadMore() {
+      this.current_page += 1;
+      this.searchPatients();
+    },
+    handleSort(sortBy) {
+      this.sortby = sortBy.map((sort) => ({
+        key: sort.key,
+        order: sort.order === "desc" ? "desc" : "asc",
+      }));
+      this.current_page = 1;
+      this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row-pointer >>> tbody tr :hover {
+  cursor: pointer;
+}
+</style>

registration/components/left.vue

@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <v-container class="pt-0" fluid>
+            <div class="rounded-lg pa-5 mb-5">
+                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
+            </div>
+            <v-data-table
+                v-model="selected_patients"
+                :items="patients"
+                :headers="headers"
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
+                        <td>
+                            <p class="font-weight-medium">{{ item.tanggal }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.noreg }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.nama }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.status }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {
+        
+    },
+    data() {
+        return {
+            menu: false,
+            visible: false,
+            selectedItems: [],
+            headers: [
+                {
+                    title: this.$t('message.tablePatient.date'),
+                    align: "start",
+                    sortable: false,
+                    key: "date",
+                    width: "15%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.noreg'),
+                    align: "start",
+                    sortable: false,
+                    key: "noreg",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.group'),
+                    align: "start",
+                    sortable: false,
+                    key: "group",
+                    width: "25%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.name'),
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "25%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.status'),
+                    align: "start",
+                    sortable: false,
+                    key: "status",
+                    width: "15%",
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        patients() {
+            return this.$store.state.collection.patients;
+        },
+        selected_patients: {
+            get() {
+                return this.$store.state.collection.selected_patients;
+            },
+            set(data) {
+                this.$store.commit("setSelectedPatients", data);
+            }
+        }
+    },
+    methods: {
+        selectItem(data) {
+            // this.$store.commit("setSelectedPatients", data);
+            this.selected_patients = data;
+        },
+        isItemSelected(data) {
+            return data.noreg === this.$store.state.collection.selected_patients.noreg
+        }
+    },
+};
+</script>
+
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>

registration/components/main.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-app style="background:#e8eaf6" >
+    <one-navbar></one-navbar>
+    <v-main class="pt-12">
+
+      <div class="ml-2 mr-2 mt-0 rounded h-100">
+        <one-tabs></one-tabs>
+        <v-row>
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
+            <one-left></one-left>
+          </v-col>
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
+            <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 Tabs from "./tabs.vue";
+export default {
+  name: "registration",
+  components: {
+    "one-navbar": NavbarComponent,
+    "one-tabs": Tabs,
+  },
+  mounted() {},
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>

registration/components/right.vue

@@ -0,0 +1,275 @@
+<template>
+    <div>
+        <v-container class="rounded-lg" fluid>
+            <div class="rounded-lg pa-5">
+                <v-row>
+                    <v-col cols="2">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
+                            <!-- placeholder photo -->
+                        </div>
+                    </v-col>
+                    <v-col cols="8">
+                        <h4>{{ selected.noreg }}</h4>
+                        <h4 class="text-grey-darken-1">{{ selected.nama }}</h4>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg pa-2 mr-2 bg-grey-lighten-5 pointer"
+                            v-show="selected.status === 'Call'"
+                        >
+                            <iconify-icon
+                                class="text-grey"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:arrow-previous-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-secondary-lighten pa-2 pointer"
+                            @click="setCall(selected)"
+                            v-show="selected.doneCall !== 'Y'"
+                        >
+                            <iconify-icon
+                                class="text-secondary-darken"
+                                style="font-size: 1.5rem;"
+                                :icon="setIconCall(selected.status)"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="10">
+                        <p class="font-weight-medium">PID</p>
+                    </v-col>
+                    <v-col cols="2" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">-</p>
+                    </v-col>
+                </v-row>
+                <v-row no-gutters>
+                    <v-col cols="4">
+                        <p class="font-weight-medium">{{ $t('message.dobage') }}</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">{{ selected.dob }}</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</p>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <v-row>
+                    <v-col cols="10" align-self="center">
+                        <h3 class="primary-lighten">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</h3>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2 pointer"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:note-add-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
+                        >
+                            <iconify-icon
+                                class="text-success-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:notepad-person-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+            </div>
+            <v-data-table
+                :items="details.specimen"
+                :headers="headers"
+                hide-default-footer
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="font-weight-medium">{{ item.specimen }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.barcode }}</p>
+                        </td>
+                        <td align="center">
+                            <div
+                                style="display: flex; align-items: center; justify-content: center;"
+                                class="rounded-lg pa-2"
+                                v-if="selected.doneCall === 'Y'"
+                            >
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        :class="{'text-error': item.requirement === 'N'}"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-12-filled"
+                                        @click="setReq(item, 'N')"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
+                                >
+                                    <iconify-icon
+                                        :class="{'text-success': item.requirement === 'Y'}"
+                                        style="font-size: 2rem;"
+                                        icon="fluent:checkmark-12-filled"
+                                        @click="setReq(item, 'Y')"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
+                        </td>
+                        <td align="center">
+                            <div v-if="selected.doneCall === 'Y'" class="py-1">
+                                <div class="bg-warning rounded-lg pa-1 text-white">
+                                    {{ formatDate(item.sDate) }}
+                                </div>
+                                <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
+                                    {{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
+                                </div>
+                            </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <div class="ml-3">
+                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5">
+                <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
+            </div>
+            <div>
+                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
+            </div>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "rightcomp",
+        components: {
+
+        },
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                headers: [
+                    {
+                        title: this.$t('message.tableDetail.speciment'),
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.barcode'),
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.requirement'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.action'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            selected: {
+                get() {
+                    return this.$store.state.collection.selected_patients;
+                },
+                set(data) {
+                    this.$store.commit("setSelectedPatients", data);
+                }
+            },
+            details: {
+                get() {
+                    return this.$store.state.collection.details;
+                },
+                set(data) {
+                    this.$store.commit("")
+                }
+            },
+            pemeriksaan() {
+                return this.$store.state.collection.pemeriksaan;
+            }
+        },
+        methods: {
+            setIconCall(status) {
+                switch (status.toLowerCase()) {
+                    case "call":
+                        return "fluent:arrow-sync-24-regular";
+                    default:
+                        return "fluent:speaker-2-24-regular";
+                }
+            },
+            setCall(data) {
+                if (data.status == "New") {
+                    data.status = "Call";    
+                } else if (data.status == "Call") {
+                    data.doneCall = "Y";
+                }
+            },
+            setReq(data, status) {
+                data.requirement = status;
+                data.eDate= new Date();
+            },
+            formatDate(date) {
+                if (!date) return null;
+
+                return moment(date).format("DD-MM-YYYY HH:mm");
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

registration/components/tabs.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <v-card class="mb-0 pa-2 mt-0 pt-0">
+      <v-tabs v-model="tab" align-tabs="center" color="primary" grow>
+        <v-tab :value="1">DEMOGRAFI</v-tab>
+        <v-tab :value="2">PEMERIKSAAN</v-tab>
+        <v-tab :value="3">KIRIM HASIL</v-tab>
+        <v-tab disabled :value="4">PEMBAYARAN</v-tab>
+      </v-tabs>
+    </v-card>
+
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item v-for="n in 3" :key="n" :value="n">
+        <v-row class="no-gutters">
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3 pr-1">
+            <datatable-patient v-if="tab === 1"></datatable-patient>
+          </v-col>
+          <v-col cols="12" md="6" sm="12" xs="12" class="pl-1 mt-3">
+            <form-patient v-if="tab === 1"></form-patient>
+          </v-col>
+        </v-row>
+      </v-tabs-window-item>
+    </v-tabs-window>
+  </div>
+</template>
+
+<script type="module">
+import DatatablePatient from "./datatable_patient.vue";
+import FormPatient from "./form_patient.vue";
+export default {
+  name: "filtercomp",
+  components: {
+    "datatable-patient": DatatablePatient,
+    "form-patient": FormPatient,
+  },
+  mounted() {},
+  data() {
+    return {
+      menu: false,
+      visible: false,
+      tab: null,
+    };
+  },
+  computed: {
+    date: {
+      get() {
+        return this.$store.state.collection.date;
+      },
+      set(val) {
+        this.$store.commit("setDate", val);
+      },
+    },
+    temp_dropdown: {
+      get() {
+        return this.$store.state.collection.temp_dropdown;
+      },
+    },
+  },
+  methods: {
+    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")}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pointer {
+  cursor: pointer;
+}
+</style>

registration/index.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>WESTONE - REGISTRATION</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>
+        <v-responsive class="border rounded" max-height="300">
+        <div id="app"></div>
+
+  </v-responsive>
+        <!-- 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>
+        <!-- Lodash -->
+        <script src="../libraries/lodash.min.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 system from "../globalstore/globalstore.js";
+            import patient from "./modules/patient.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);
+                },
+            };
+
+            const messages = CustomMessages;
+            const browserLocale = navigator.language || navigator.languages[0];
+            const i18n = VueI18n.createI18n({
+                locale: browserLocale.startsWith("id") ? "id" : "en",
+                fallbackLocale: "en",
+                messages,
+            });
+            window.i18n = i18n;
+
+            moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+            const store = Vuex.createStore({
+                modules: {
+                    system: system,
+                    patient: patient,
+                },
+            });
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        visible: false,
+                        bg_src: "",
+                        loading: false,
+                    };
+                },
+
+                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>

registration/language.js

@@ -0,0 +1,58 @@
+var CustomMessages = {
+    en: {
+        message: {
+            filter: {
+                date: "Date",
+                noreg: "No. Reg / Name",
+                group: "Customer Group",
+                station: "Station",
+                location: "Location",
+            },
+            tablePatient: {
+                title: "PATIENT",
+                date: "DATE",
+                noreg: "NO. REG",
+                group: "CUSTOMER GROUP",
+                name: "NAME",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAFF",
+                speciment: "SPECIMENT",
+                barcode: "BARCODE",
+                requirement: "REQUIREMENT",
+                action: "ACTION"
+            },
+            examination: "EXAMINATION",
+            dobage: "Date of Birth and Age",
+        },
+    },
+    id: {
+        message: {
+            filter: {
+                date: "Tanggal",
+                noreg: "No. Reg / Nama",
+                group: "Kel. Pelanggan",
+                station: "Station",
+                location: "Lokasi",
+            },
+            tablePatient: {
+                title: "PASIEN",
+                date: "TANGGAL",
+                noreg: "NO. REG",
+                group: "KEL. PELANGGAN",
+                name: "NAMA",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAF",
+                speciment: "SPECIMEN",
+                barcode: "BARCODE",
+                requirement: "PRASYARAT",
+                action: "AKSI"
+            },
+            examination: "PEMERIKSAAN",
+            dobage: "Tanggal Lahir dan Umur",
+        },
+    },
+};

registration/modules/patient.js

@@ -0,0 +1,94 @@
+const URL = "https://devcpone.aplikasi.web.id/one-api/mockup/fo/registration_v27/patient";
+const store = {
+    state() {
+        return {
+            loading:false,
+            patients: [],
+            selected_patient: {},
+            current_page:1,
+            search:'',
+            loadmore:true,
+            itemsperpage:10,
+            itemsperpageoptions: [10, 20, 50],
+            sortby: [{ key: 'M_PatientNoReg', order: 'asc' } ],  // Format: [ { key: 'value', order: 'asc' } ]
+        };
+    },
+    mutations: {
+        setLoading(state, data) {
+            state.loading = data
+        },
+        setPatients(state, data) {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setCurrentPage(state, data) {
+            state.current_page = data
+        },
+        setSearch(state, data) {
+            state.search = data
+        },
+        setLoadMore(state, data) {
+            state.loadmore = data
+        },
+        setItemsPerPage(state, data) {
+            state.itemsperpage = data
+        },
+        setItemPerPageOptions(state, data) {
+            state.itemsperpageoptions = data
+        },
+        setSortBy(state, data) {
+            state.sortby = data
+        }
+    },
+    actions: {
+        async searchPatients({ commit, state }, params) {
+            commit('setLoading', true);
+            try {
+              const formData = new URLSearchParams();
+              for (const key in params) {
+                formData.append(key, params[key]);
+              }
+          
+              const response = await axios.post(URL + '/search', formData, {
+                headers: {
+                  'Content-Type': 'application/x-www-form-urlencoded'
+                }
+              });
+          
+              if (response.status === 200) {
+                let respData = response.data;
+                if (respData.status === "OK") {
+                  commit('setLoadMore', true);
+                  let datas = respData.data.records;
+          
+                  if (datas.length === 0) {
+                    commit('setLoadMore', false);
+                  }
+          
+                  if (params.current_page === 1) {
+                    commit('setPatients', datas);
+                  } else {
+                    let bf_patients = state.patients;  // Gunakan state yang diterima dari parameter
+                    //console.log(bf_patients)
+                    let new_patients = _.concat(bf_patients, datas); // Pastikan lodash sudah terdefinisi
+                    //console.log(new_patients)
+                    commit('setPatients', new_patients);
+                  }
+                }
+              } else {
+                alert("err");
+              }
+          
+            } catch (error) {
+              console.error(error);
+            } finally {
+              commit('setLoading', false);
+            }
+        }
+          
+    }
+}
+
+export default store

result-entry/components/detailPatient.vue

@@ -0,0 +1,212 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-row>
+                <v-col cols="2">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.date')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.noreg')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.dob')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.sender')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+
+            <v-data-table
+                :headers="headers"
+                :items="xdetails"
+                return-object
+                hide-default-footer
+                class="pt-5"
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td class="text-left" v-if="item.is_result == 'N'" colspan="8">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="pt-3 pb-3">
+                                <v-text-field 
+                                    density="compact"
+                                    label="" 
+                                    variant="outlined"
+                                    hide-details
+                                    auto-grow
+                                ></v-text-field>
+                            </div>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p>{{ item.result_flag }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.normal_note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.unit_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="d-flex justify-space-between align-center">
+                                <div>
+                                    {{ item.methode_name }}
+                                </div>
+                                <v-btn
+                                    variant="text"
+                                    small
+                                    color="primary"
+                                    class="bg-primary-lightens ma-0 float-left">
+                                    <iconify-icon
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:edit-20-regular"
+                                    ></iconify-icon>
+                                </v-btn>
+                            </div>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="pt-3 pb-3">
+                                <v-text-field 
+                                    density="compact"
+                                    label="" 
+                                    variant="outlined"
+                                    hide-details
+                                    auto-grow
+                                ></v-text-field>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "DetailPatient",
+        data() {
+            return {
+                menu: false,
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.name'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "20%",
+                        title: this.$t('message.tableDetailPatient.header.result'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "5%",
+                        title: this.$t('message.tableDetailPatient.header.flag'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.unit'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "20%",
+                        title: this.$t('message.tableDetailPatient.header.method'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "20%",
+                        title: this.$t('message.tableDetailPatient.header.note'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xdetails() {
+                return this.$store.state.entry.details
+            },
+        },
+        methods: {
+            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")}`;
+            },
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-entry/components/listPatient.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
+
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+
+                <template v-slot:item="{ item }">
+                    <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.noreg'),
+                        class: "font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.name'),
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.entry.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.entry.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("entry/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+            isSelected(p) {
+                return p.id == this.$store.state.entry.selected_patient.id
+            },
+            selectMe(data) {
+                this.$store.commit("entry/setSelectedPatient", data)
+            }
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-entry/components/mainEntry.vue

@@ -0,0 +1,53 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <search-component></search-component>
+                <v-row>
+                    <v-col cols="12" md="3" sm="12" xs="12" class="mt-5">
+                        <list-patient-component></list-patient-component>
+                    </v-col>
+                    <v-col cols="12" md="9" sm="12" xs="12" class="mt-5">
+                        <detail-patient-component></detail-patient-component>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-main>
+    </v-app>
+
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import listPatientComponent from "./listPatient.vue";
+    import searchComponent from "./searchPatient.vue";
+    import detailComponent from "./detailPatient.vue";
+    export default {
+        name: "MainEntry",
+        components: {
+            "one-navbar": NavbarComponent,
+            "list-patient-component": listPatientComponent,
+            "search-component": searchComponent,
+            "detail-patient-component": detailComponent
+        },
+        data() {
+            return {
+
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-entry/components/searchPatient.vue

@@ -0,0 +1,178 @@
+<template>
+    <div>
+      <v-container class="bg-white rounded-lg" fluid>
+        <v-row>
+          <v-col cols="3">
+            <div class="d-flex align-center ga-2">
+              <v-menu
+                v-model="menuStartDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    :label="$t('message.search.startdate')"
+                    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="menuStartDate=false"
+                ></v-date-picker>
+              </v-menu>
+              <v-menu
+                v-model="menuEndDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    :label="$t('message.search.enddate')"
+                    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="menuEndDate=false"
+                ></v-date-picker>
+              </v-menu>
+            </div>
+          </v-col>
+          <v-col cols="2.5">
+            <v-text-field 
+              :label="$t('message.search.noreg')"
+              variant="outlined"
+              hide-details
+              append-inner-icon="mdi-magnify"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="2.5">
+            <v-autocomplete
+              :label="$t('message.search.group')"
+              variant="outlined"
+              hide-details
+              menu-icon="mdi-chevron-down"
+              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="1">
+            <v-btn 
+                variant="flat"
+                small
+                style="height: 100%;"
+                class="bg-primary rounded-lg">
+                <iconify-icon
+                    style="font-size: 2rem;"
+                    icon="fluent:search-20-regular"
+                ></iconify-icon>
+            </v-btn>
+          </v-col>
+          <v-col cols="3">
+            <div style="height: 100%;">
+              <v-row class="pt-4 justify-end ga-2">
+                <v-btn fab 
+                    variant="tonal"
+                    small
+                    style="height: auto;"
+                    color="secondary"
+                    class="bg-secondary-lighten rounded-lg">
+                    <iconify-icon
+                        style="font-size: 2rem;"
+                        icon="fluent:notepad-person-24-regular"
+                    ></iconify-icon>
+                </v-btn>
+
+                <div>
+                    <v-btn
+                        class="bg-primary-lighten"
+                        variant="tonal"
+                        color="primary"
+                        size="x-large"
+                    >
+                    {{ $t('message.search.history') }}
+                    </v-btn>
+                </div>
+                <div>
+                    <v-btn
+                        variant="flat"
+                        class="bg-primary text-white mr-2"
+                        size="x-large"
+                    >
+                    {{ $t('message.search.save') }}
+                    </v-btn>
+                </div>
+              </v-row>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </template>
+      
+  <style scoped>
+  
+  </style>
+      
+  <script type="module">
+    export default {
+      name: "SearchPatient",
+      data() {
+          return {
+            menuStartDate: false,
+            menuEndDate: false,
+            visible: false,
+          };
+      },
+      computed: {
+        date: {
+            get() {
+                return this.$store.state.entry.date;
+            },
+            set(val) {
+                console.log(val)
+                this.$store.commit("entry/setDate", val);
+            },
+        },
+      },
+      methods: {
+        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")}`;
+        },
+      },
+      wacth: {
+  
+      }
+    }
+  </script>

result-entry/index.html

@@ -0,0 +1,116 @@
+<!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>
+    <!-- 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 entry from "./modules/entry.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          entry: entry,
+        },
+      });
+      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
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-entry-component></main-entry-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-entry-component": "./components/mainEntry.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>

result-entry/language.js

@@ -0,0 +1,70 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search: {
+                startdate: "Start Date",
+                enddate: "End Date",
+                noreg: "No. Reg / Name",
+                group: "Examination Group",
+                history: "History",
+                save: "Save"
+            },
+            toolbalTitle: "PATIENT",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Date",
+                    noreg: "No. Reg / Name / Gender",
+                    dob: "DOB / Age",
+                    sender: "Sender"
+                },
+                header: {
+                    name: "EXAMINATION NAME",
+                    result: "RESULT",
+                    flag: "FLAG",
+                    normalvalue: "NORMAL VALUE",
+                    unit: "UNIT",
+                    method: "METHOD",
+                    note: "NOTE"
+                }
+            }
+        },
+    },
+    id: {
+        message: {
+            search: {
+                startdate: "Tanggal Mulai",
+                enddate: "Tanggal Selesai",
+                noreg: "No. Reg / Nama",
+                group: "Grup Pemeriksaan",
+                history: "Riwayat",
+                save: "Simpan"
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Tanggal",
+                    noreg: "No. Reg / Nama / Jenis Kelamin",
+                    dob: "DOB / Umur",
+                    sender: "Pengirim"
+                },
+                header: {
+                    name: "NAMA PEMERIKSAAN",
+                    result: "HASIL",
+                    flag: "FLAG",
+                    normalvalue: "NILAI NORMAL",
+                    unit: "UNIT",
+                    method: "METODE",
+                    note: "CATATAN"
+                }
+            }
+        },
+    },
+};

result-entry/modules/entry.js

@@ -0,0 +1,716 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02"
+                },
+                {
+                    id: 2,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+                {
+                    id: 3,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+            ],
+            selected_patient: {},
+            details: [
+                {
+                    "t_testid": "1",
+                    "t_testname": "Hematologi Lengkap",
+                    "result": null,
+                    "result_old": null,
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626279",
+                    "is_result": "N",
+                    "is_quantitative": "N",
+                    "result_flag": null,
+                    "normal_id": null,
+                    "normal_note": null,
+                    "unit_name": null,
+                    "methode_id": null,
+                    "methode_name": null,
+                    "nattest_id": "4095",
+                    "tx_id": "1",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "N",
+                    "sample_receive": null,
+                    "sample_processing": null,
+                    "sample_worklist_receive": null,
+                    "pre_analytic": null,
+                    "T_OrderDetailAddOnPreAnalytic": "N",
+                    "order_id": "132259",
+                    "test_sas_code": "10110100",
+                    "T_TestSasCode": "10110100",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "N",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "1"
+                },
+                {
+                    "t_testid": "2",
+                    "t_testname": "Hemoglobin",
+                    "result": null,
+                    "result_old": null,
+                    "note": "",
+                    "note_old": "",
+                    "id": "1626280",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "2105",
+                    "normal_note": "13,0 -18,0",
+                    "unit_name": "g/dL",
+                    "methode_id": "25",
+                    "methode_name": "SLS HEMOGLOBIN ",
+                    "nattest_id": "4098",
+                    "tx_id": "2",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "N",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010001",
+                    "T_TestSasCode": "1011010001",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "N",
+                    "validation": "Y",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "14",
+                    "t_testname": "Erytrosit",
+                    "result": "6",
+                    "result_old": "6",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626292",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6350",
+                    "normal_note": "4,20 - 6,00",
+                    "unit_name": "10?/µL",
+                    "methode_id": "101",
+                    "methode_name": "IMPEDANCE WITH HDFC ",
+                    "nattest_id": "4110",
+                    "tx_id": "14",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010002",
+                    "T_TestSasCode": "1011010002",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "13",
+                    "t_testname": "Hematokrit",
+                    "result": "45",
+                    "result_old": "45",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626291",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6138",
+                    "normal_note": "40 - 54",
+                    "unit_name": "%",
+                    "methode_id": "202",
+                    "methode_name": "RBC PULSE HEIGHT DETECTION",
+                    "nattest_id": "4109",
+                    "tx_id": "13",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010003",
+                    "T_TestSasCode": "1011010003",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "15",
+                    "t_testname": "MCV",
+                    "result": "90",
+                    "result_old": "90",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626293",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5586",
+                    "normal_note": "80 - 100",
+                    "unit_name": "fL",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4111",
+                    "tx_id": "15",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010004",
+                    "T_TestSasCode": "1011010004",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "16",
+                    "t_testname": "MCH",
+                    "result": "33",
+                    "result_old": "33",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626294",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5662",
+                    "normal_note": "26 - 34",
+                    "unit_name": "pg/cell",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4112",
+                    "tx_id": "16",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010005",
+                    "T_TestSasCode": "1011010005",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "17",
+                    "t_testname": "MCHC",
+                    "result": "33",
+                    "result_old": "33",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626295",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5716",
+                    "normal_note": "32 - 36",
+                    "unit_name": "g/dL",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4113",
+                    "tx_id": "17",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010006",
+                    "T_TestSasCode": "1011010006",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "18",
+                    "t_testname": "RDW",
+                    "result": "12",
+                    "result_old": "12",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626296",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6119",
+                    "normal_note": "11,5 - 14,5",
+                    "unit_name": "%",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4114",
+                    "tx_id": "18",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010007",
+                    "T_TestSasCode": "1011010007",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "3",
+                    "t_testname": "Leukosit",
+                    "result": "10000",
+                    "result_old": "10000",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626281",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "3063",
+                    "normal_note": "3.600 - 10.600",
+                    "unit_name": "/µL",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4099",
+                    "tx_id": "3",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010008",
+                    "T_TestSasCode": "1011010008",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "4",
+                    "t_testname": "Hitung Jenis",
+                    "result": null,
+                    "result_old": null,
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626282",
+                    "is_result": "N",
+                    "is_quantitative": "N",
+                    "result_flag": null,
+                    "normal_id": null,
+                    "normal_note": null,
+                    "unit_name": null,
+                    "methode_id": null,
+                    "methode_name": null,
+                    "nattest_id": "4100",
+                    "tx_id": "4",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": null,
+                    "sample_processing": null,
+                    "sample_worklist_receive": null,
+                    "pre_analytic": null,
+                    "T_OrderDetailAddOnPreAnalytic": "N",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010009",
+                    "T_TestSasCode": "1011010009",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-06 17:12:29",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "5",
+                    "t_testname": "Eosinofil (Hitung Jenis)",
+                    "result": "2",
+                    "result_old": "2",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626283",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6147",
+                    "normal_note": "0 - 3",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4101",
+                    "tx_id": "5",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000901",
+                    "T_TestSasCode": "101101000901",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "6",
+                    "t_testname": "Basofil (Hitung Jenis)",
+                    "result": "1",
+                    "result_old": "1",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626284",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6169",
+                    "normal_note": "0 - 2",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4102",
+                    "tx_id": "6",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000902",
+                    "T_TestSasCode": "101101000902",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "8",
+                    "t_testname": "Neutrofil Batang (Hitung Jenis)",
+                    "result": "4",
+                    "result_old": "4",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626286",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6208",
+                    "normal_note": "3 - 5",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4104",
+                    "tx_id": "8",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000903",
+                    "T_TestSasCode": "101101000903",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "7",
+                    "t_testname": "Neutrofil Segmen (Hitung Jenis)",
+                    "result": "56",
+                    "result_old": "56",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626285",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6195",
+                    "normal_note": "50 - 70 ",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4103",
+                    "tx_id": "7",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000904",
+                    "T_TestSasCode": "101101000904",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "9",
+                    "t_testname": "Limfosit (Hitung Jenis)",
+                    "result": "23",
+                    "result_old": "23",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626287",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6217",
+                    "normal_note": "18 - 42",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4105",
+                    "tx_id": "9",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000905",
+                    "T_TestSasCode": "101101000905",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "10",
+                    "t_testname": "Monosit (Hitung Jenis)",
+                    "result": "5",
+                    "result_old": "5",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626288",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6226",
+                    "normal_note": "2 - 11",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4106",
+                    "tx_id": "10",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000906",
+                    "T_TestSasCode": "101101000906",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "12",
+                    "t_testname": "Trombosit",
+                    "result": "200000",
+                    "result_old": "200000",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626290",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "3545",
+                    "normal_note": "150.000 - 450.000",
+                    "unit_name": "/µL",
+                    "methode_id": "101",
+                    "methode_name": "IMPEDANCE WITH HDFC ",
+                    "nattest_id": "4108",
+                    "tx_id": "12",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010010",
+                    "T_TestSasCode": "1011010010",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "11",
+                    "t_testname": "Laju Endap Darah (LED)",
+                    "result": "12",
+                    "result_old": "12",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626289",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "1537",
+                    "normal_note": "0 - 15",
+                    "unit_name": "mm/jam",
+                    "methode_id": "13",
+                    "methode_name": "WESTERGREEN",
+                    "nattest_id": "4107",
+                    "tx_id": "11",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010011",
+                    "T_TestSasCode": "1011010011",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                }
+            ]
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setDetails(state, data) {
+            state.details = data
+        }
+    },
+    actions: {
+
+    }
+};
+export default store

result-validation/components/detailPatient.vue

@@ -0,0 +1,237 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.date')"
+                        variant="outlined"
+                        v-model="order_date"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.noreg')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.dob')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.sender')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+
+            <v-data-table
+                :headers="headers"
+                :items="xdetails"
+                hide-default-footer
+                class="pt-5"
+                
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td class="text-left" v-if="item.is_result == 'N'" colspan="8">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p>{{ item.result_flag }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.normal_note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.unit_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.methode_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="d-flex justify-center">
+                                <div
+                                    :dark="item.validation_old != 'Y'"
+                                    :disabled="item.validation_old == 'Y'"
+                                    v-show="item.verification == 'Y'"
+                                    class="pointer bg-error-lighten rounded-lg"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-error"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    v-show="item.verification == 'Y'"
+                                    :class="item.validation=='Y'?'pointer bg-success-lighten rounded-lg ml-2':'pointer bg-success rounded-lg ml-2'" 
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        :class="item.validation=='Y'? 'text-success':'text-white'"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:checkmark-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "DetailPatient",
+        data() {
+            return {
+                menu: false,
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.name'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'result', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.result'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'flag', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.flag'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'nilai', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'unit', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.unit'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'metode', 
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.method'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'note', 
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.note'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'validasi', 
+                        sortable: false,
+                        width: "5%",
+                        title: this.$t('message.tableDetailPatient.header.validation'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xdetails() {
+                return this.$store.state.validation.details
+            },
+            selected_detail () {
+                let x = this.$store.state.validation.selected_detail
+                console.log(x)
+                if (x)
+                    return x
+                return {}
+            },
+            order_date() {
+                let d = this.selected_detail.T_OrderHeaderDate
+                let e = ''
+                try {
+                    e = d.substr(0,10).split('-').reverse().join('-')
+                } catch(e) { /*console.log(e.message)*/ }
+                
+                return e
+            },
+        },
+        methods: {
+            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")}`;
+            },
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-validation/components/listPatient.vue

@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
+
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+
+                <template v-slot:item="{ item }">
+                    <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.noreg'),
+                        class: "font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.name'),
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.validation.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.validation.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("validation/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+            isSelected(p) {
+                return p.id == this.$store.state.validation.selected_patient.id
+            },
+            selectMe(data) {
+                this.$store.commit("validation/setSelectedPatient", data)
+                this.$store.commit("validation/setSelectedDetail", data)
+            }
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-validation/components/mainValidation.vue

@@ -0,0 +1,53 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <search-component></search-component>
+                <v-row>
+                    <v-col cols="12" md="3" sm="12" xs="12" class="mt-5">
+                        <list-patient-component></list-patient-component>
+                    </v-col>
+                    <v-col cols="12" md="9" sm="12" xs="12" class="mt-5">
+                        <detail-patient-component></detail-patient-component>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-main>
+    </v-app>
+
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import listPatientComponent from "./listPatient.vue";
+    import searchComponent from "./searchPatient.vue";
+    import detailComponent from "./detailPatient.vue";
+    export default {
+        name: "MainValidation",
+        components: {
+            "one-navbar": NavbarComponent,
+            "list-patient-component": listPatientComponent,
+            "search-component": searchComponent,
+            "detail-patient-component": detailComponent
+        },
+        data() {
+            return {
+
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-validation/components/searchPatient.vue

@@ -0,0 +1,211 @@
+<template>
+    <div>
+      <v-container class="bg-white rounded-lg" fluid>
+        <v-row>
+          <v-col cols="3">
+            <div class="d-flex align-center ga-2">
+              <v-menu
+                v-model="menuStartDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    :label="$t('message.search.startdate')"
+                    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="menuStartDate=false"
+                ></v-date-picker>
+              </v-menu>
+              <v-menu
+                v-model="menuEndDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    :label="$t('message.search.enddate')"
+                    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="menuEndDate=false"
+                ></v-date-picker>
+              </v-menu>
+            </div>
+          </v-col>
+          <v-col cols="1.5">
+            <v-text-field 
+              :label="$t('message.search.noreg')"
+              variant="outlined"
+              hide-details
+              append-inner-icon="mdi-magnify"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="1.5">
+            <v-autocomplete
+              :label="$t('message.search.group')"
+              variant="outlined"
+              hide-details
+              menu-icon="mdi-chevron-down"
+              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="1">
+            <v-btn 
+                variant="flat"
+                small
+                style="height: 55px; width: 40px;"
+                class="bg-primary rounded-lg">
+                <iconify-icon
+                    style="font-size: 2rem;"
+                    icon="fluent:search-20-regular"
+                ></iconify-icon>
+            </v-btn>
+          </v-col>
+          <v-col cols="5">
+            <div style="height: 100%;">
+              <v-row class="d-flex pt-4 justify-end ga-2">
+                <v-btn fab 
+                    variant="tonal"
+                    small
+                    style="height: auto;"
+                    color="secondary"
+                    class="bg-secondary-lighten rounded-lg">
+                    <iconify-icon
+                        style="font-size: 2rem;"
+                        icon="fluent:notepad-person-24-regular"
+                    ></iconify-icon>
+                </v-btn>
+                <v-btn fab 
+                    variant="tonal"
+                    small
+                    style="height: auto;"
+                    color="success"
+                    class="bg-success-lighten rounded-lg">
+                    <iconify-icon
+                        style="font-size: 2rem;"
+                        icon="fluent:note-add-24-regular"
+                    ></iconify-icon>
+                </v-btn>
+                <v-btn fab 
+                    variant="tonal"
+                    small
+                    style="height: auto;"
+                    color="info"
+                    class="bg-info-lighten rounded-lg">
+                    <iconify-icon
+                        style="font-size: 2rem;"
+                        icon="fluent:eye-24-regular"
+                    ></iconify-icon>
+                </v-btn>
+
+                <div>
+                    <v-btn
+                        class="bg-primary-lighten"
+                        variant="tonal"
+                        color="primary"
+                        size="x-large"
+                    >
+                    {{ $t('message.search.history') }}
+                    </v-btn>
+                </div>
+                <div>
+                    <v-btn
+                        variant="flat"
+                        small
+                        class="bg-primary text-white"
+                        size="x-large"
+                    >
+                    {{ $t('message.search.save') }}
+                    </v-btn>
+                </div>
+                <div>
+                    <v-btn
+                        variant="flat"
+                        small
+                        class="bg-success text-white mr-2"
+                        size="x-large"
+                    >
+                    {{ $t('message.search.send') }}
+                    </v-btn>
+                </div>
+              </v-row>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </template>
+      
+  <style scoped>
+  
+  </style>
+      
+  <script type="module">
+    export default {
+      name: "SearchPatient",
+      data() {
+          return {
+            menuStartDate: false,
+            menuEndDate: false,
+            visible: false,
+          };
+      },
+      computed: {
+        date: {
+            get() {
+                return this.$store.state.validation.date;
+            },
+            set(val) {
+                console.log(val)
+                this.$store.commit("validation/setDate", val);
+            },
+        },
+      },
+      methods: {
+        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")}`;
+        },
+      },
+      wacth: {
+  
+      }
+    }
+  </script>

result-validation/index.html

@@ -0,0 +1,116 @@
+<!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>
+    <!-- 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 validation from "./modules/validation.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          validation: validation,
+        },
+      });
+      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
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-validation-component></main-validation-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-validation-component": "./components/mainValidation.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>

result-validation/language.js

@@ -0,0 +1,74 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search: {
+                startdate: "Start Date",
+                enddate: "End Date",
+                noreg: "No. Reg / Name",
+                group: "Examination Group",
+                history: "History",
+                save: "Save",
+                send: "Send ADM"
+            },
+            toolbalTitle: "PATIENT",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Date",
+                    noreg: "No. Reg / Name / Gender",
+                    dob: "DOB / Age",
+                    sender: "Sender"
+                },
+                header: {
+                    name: "EXAMINATION NAME",
+                    result: "RESULT",
+                    flag: "FLAG",
+                    normalvalue: "NORMAL VALUE",
+                    unit: "UNIT",
+                    method: "METHOD",
+                    note: "NOTE",
+                    validation: "VALIDATION"
+                }
+            }
+        },
+    },
+    id: {
+        message: {
+            search: {
+                startdate: "Tanggal Mulai",
+                enddate: "Tanggal Selesai",
+                noreg: "No. Reg / Nama",
+                group: "Grup Pemeriksaan",
+                history: "Riwayat",
+                save: "Simpan",
+                send: "Kirim ADM"
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Tanggal",
+                    noreg: "No. Reg / Nama / Jenis Kelamin",
+                    dob: "DOB / Umur",
+                    sender: "Pengirim"
+                },
+                header: {
+                    name: "NAMA PEMERIKSAAN",
+                    result: "HASIL",
+                    flag: "FLAG",
+                    normalvalue: "NILAI NORMAL",
+                    unit: "UNIT",
+                    method: "METODE",
+                    note: "CATATAN",
+                    validation: "VALIDASI"
+                }
+            }
+        },
+    },
+};

result-validation/modules/validation.js

@@ -0,0 +1,720 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02"
+                },
+                {
+                    id: 2,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+                {
+                    id: 3,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+            ],
+            selected_patient: {},
+            details: [
+                {
+                    "t_testid": "1",
+                    "t_testname": "Hematologi Lengkap",
+                    "result": null,
+                    "result_old": null,
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626279",
+                    "is_result": "N",
+                    "is_quantitative": "N",
+                    "result_flag": null,
+                    "normal_id": null,
+                    "normal_note": null,
+                    "unit_name": null,
+                    "methode_id": null,
+                    "methode_name": null,
+                    "nattest_id": "4095",
+                    "tx_id": "1",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "N",
+                    "sample_receive": null,
+                    "sample_processing": null,
+                    "sample_worklist_receive": null,
+                    "pre_analytic": null,
+                    "T_OrderDetailAddOnPreAnalytic": "N",
+                    "order_id": "132259",
+                    "test_sas_code": "10110100",
+                    "T_TestSasCode": "10110100",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "N",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "1"
+                },
+                {
+                    "t_testid": "2",
+                    "t_testname": "Hemoglobin",
+                    "result": null,
+                    "result_old": null,
+                    "note": "",
+                    "note_old": "",
+                    "id": "1626280",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "2105",
+                    "normal_note": "13,0 -18,0",
+                    "unit_name": "g/dL",
+                    "methode_id": "25",
+                    "methode_name": "SLS HEMOGLOBIN ",
+                    "nattest_id": "4098",
+                    "tx_id": "2",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "N",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010001",
+                    "T_TestSasCode": "1011010001",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "N",
+                    "validation": "Y",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "14",
+                    "t_testname": "Erytrosit",
+                    "result": "6",
+                    "result_old": "6",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626292",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6350",
+                    "normal_note": "4,20 - 6,00",
+                    "unit_name": "10?/µL",
+                    "methode_id": "101",
+                    "methode_name": "IMPEDANCE WITH HDFC ",
+                    "nattest_id": "4110",
+                    "tx_id": "14",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010002",
+                    "T_TestSasCode": "1011010002",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "13",
+                    "t_testname": "Hematokrit",
+                    "result": "45",
+                    "result_old": "45",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626291",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6138",
+                    "normal_note": "40 - 54",
+                    "unit_name": "%",
+                    "methode_id": "202",
+                    "methode_name": "RBC PULSE HEIGHT DETECTION",
+                    "nattest_id": "4109",
+                    "tx_id": "13",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010003",
+                    "T_TestSasCode": "1011010003",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "15",
+                    "t_testname": "MCV",
+                    "result": "90",
+                    "result_old": "90",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626293",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5586",
+                    "normal_note": "80 - 100",
+                    "unit_name": "fL",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4111",
+                    "tx_id": "15",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010004",
+                    "T_TestSasCode": "1011010004",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "16",
+                    "t_testname": "MCH",
+                    "result": "33",
+                    "result_old": "33",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626294",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5662",
+                    "normal_note": "26 - 34",
+                    "unit_name": "pg/cell",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4112",
+                    "tx_id": "16",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010005",
+                    "T_TestSasCode": "1011010005",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "17",
+                    "t_testname": "MCHC",
+                    "result": "33",
+                    "result_old": "33",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626295",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "5716",
+                    "normal_note": "32 - 36",
+                    "unit_name": "g/dL",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4113",
+                    "tx_id": "17",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010006",
+                    "T_TestSasCode": "1011010006",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "18",
+                    "t_testname": "RDW",
+                    "result": "12",
+                    "result_old": "12",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626296",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6119",
+                    "normal_note": "11,5 - 14,5",
+                    "unit_name": "%",
+                    "methode_id": "173",
+                    "methode_name": "CALCULATION ",
+                    "nattest_id": "4114",
+                    "tx_id": "18",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010007",
+                    "T_TestSasCode": "1011010007",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "3",
+                    "t_testname": "Leukosit",
+                    "result": "10000",
+                    "result_old": "10000",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626281",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "3063",
+                    "normal_note": "3.600 - 10.600",
+                    "unit_name": "/µL",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4099",
+                    "tx_id": "3",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010008",
+                    "T_TestSasCode": "1011010008",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "4",
+                    "t_testname": "Hitung Jenis",
+                    "result": null,
+                    "result_old": null,
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626282",
+                    "is_result": "N",
+                    "is_quantitative": "N",
+                    "result_flag": null,
+                    "normal_id": null,
+                    "normal_note": null,
+                    "unit_name": null,
+                    "methode_id": null,
+                    "methode_name": null,
+                    "nattest_id": "4100",
+                    "tx_id": "4",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": null,
+                    "sample_processing": null,
+                    "sample_worklist_receive": null,
+                    "pre_analytic": null,
+                    "T_OrderDetailAddOnPreAnalytic": "N",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010009",
+                    "T_TestSasCode": "1011010009",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-06 17:12:29",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "5",
+                    "t_testname": "Eosinofil (Hitung Jenis)",
+                    "result": "2",
+                    "result_old": "2",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626283",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6147",
+                    "normal_note": "0 - 3",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4101",
+                    "tx_id": "5",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000901",
+                    "T_TestSasCode": "101101000901",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "6",
+                    "t_testname": "Basofil (Hitung Jenis)",
+                    "result": "1",
+                    "result_old": "1",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626284",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6169",
+                    "normal_note": "0 - 2",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4102",
+                    "tx_id": "6",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000902",
+                    "T_TestSasCode": "101101000902",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "8",
+                    "t_testname": "Neutrofil Batang (Hitung Jenis)",
+                    "result": "4",
+                    "result_old": "4",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626286",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6208",
+                    "normal_note": "3 - 5",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4104",
+                    "tx_id": "8",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000903",
+                    "T_TestSasCode": "101101000903",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "7",
+                    "t_testname": "Neutrofil Segmen (Hitung Jenis)",
+                    "result": "56",
+                    "result_old": "56",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626285",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6195",
+                    "normal_note": "50 - 70 ",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4103",
+                    "tx_id": "7",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000904",
+                    "T_TestSasCode": "101101000904",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "9",
+                    "t_testname": "Limfosit (Hitung Jenis)",
+                    "result": "23",
+                    "result_old": "23",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626287",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6217",
+                    "normal_note": "18 - 42",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4105",
+                    "tx_id": "9",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000905",
+                    "T_TestSasCode": "101101000905",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "10",
+                    "t_testname": "Monosit (Hitung Jenis)",
+                    "result": "5",
+                    "result_old": "5",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626288",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "6226",
+                    "normal_note": "2 - 11",
+                    "unit_name": "%",
+                    "methode_id": "97",
+                    "methode_name": "LASER OPTICAL FLOWCYTOMETRY ",
+                    "nattest_id": "4106",
+                    "tx_id": "10",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "101101000906",
+                    "T_TestSasCode": "101101000906",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "3"
+                },
+                {
+                    "t_testid": "12",
+                    "t_testname": "Trombosit",
+                    "result": "200000",
+                    "result_old": "200000",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626290",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "3545",
+                    "normal_note": "150.000 - 450.000",
+                    "unit_name": "/µL",
+                    "methode_id": "101",
+                    "methode_name": "IMPEDANCE WITH HDFC ",
+                    "nattest_id": "4108",
+                    "tx_id": "12",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010010",
+                    "T_TestSasCode": "1011010010",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                },
+                {
+                    "t_testid": "11",
+                    "t_testname": "Laju Endap Darah (LED)",
+                    "result": "12",
+                    "result_old": "12",
+                    "note": null,
+                    "note_old": null,
+                    "id": "1626289",
+                    "is_result": "Y",
+                    "is_quantitative": "Y",
+                    "result_flag": "",
+                    "normal_id": "1537",
+                    "normal_note": "0 - 15",
+                    "unit_name": "mm/jam",
+                    "methode_id": "13",
+                    "methode_name": "WESTERGREEN",
+                    "nattest_id": "4107",
+                    "tx_id": "11",
+                    "result_instrument_n": "0",
+                    "T_OrderDetailVerification": "Y",
+                    "sample_receive": "Y",
+                    "sample_processing": "Y",
+                    "sample_worklist_receive": "Y",
+                    "pre_analytic": "Y",
+                    "T_OrderDetailAddOnPreAnalytic": "Y",
+                    "order_id": "132259",
+                    "test_sas_code": "1011010011",
+                    "T_TestSasCode": "1011010011",
+                    "resample": "N",
+                    "resample_status": "N",
+                    "ref": "N",
+                    "verification": "Y",
+                    "validation": "N",
+                    "T_OrderPromiseDateTime": "2024-08-08 17:00:00",
+                    "ResultGroupName": "LAB",
+                    "level": "2"
+                }
+            ],
+            selected_detail: {}
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setDetails(state, data) {
+            state.details = data
+        },
+        setSelectedDetail(state, data) {
+            state.selected_detail = data
+        }
+    },
+    actions: {
+
+    }
+};
+export default store

result-verification/components/detailPatient.vue

@@ -0,0 +1,220 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.date')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.noreg')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.dob')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        :label="$t('message.tableDetailPatient.navbar.sender')"
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+
+            <v-data-table
+                :headers="headers"
+                :items="xdetails"
+                return-object
+                hide-default-footer
+                class="pt-5"
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td class="text-left" v-if="item.is_result == 'N'" colspan="8">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p>{{ item.result_flag }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.normal_note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.unit_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.methode_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="d-flex justify-center">
+                                <div
+                                    :dark="item.validation_old != 'Y'"
+                                    :disabled="item.validation_old == 'Y'"
+                                    class="pointer bg-error-lighten rounded-lg"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-error"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    :disabled="item.validation == 'Y'"
+                                    class="pointer bg-success-lighten rounded-lg ml-2"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-success"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:checkmark-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+
+</style>
+    
+<script type="module">
+    export default {
+        name: "DetailPatient",
+        data() {
+            return {
+                menu: false,
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.name'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'result', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.result'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'flag', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.flag'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'nilai', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'unit', 
+                        sortable: false,
+                        width: "10%",
+                        title: this.$t('message.tableDetailPatient.header.unit'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'metode', 
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.method'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'note', 
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.tableDetailPatient.header.note'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'validasi', 
+                        sortable: false,
+                        width: "5%",
+                        title: this.$t('message.tableDetailPatient.header.verification'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xdetails() {
+                return this.$store.state.verification.details
+            },
+        },
+        methods: {
+            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")}`;
+            },
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-verification/components/listPatient.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
+
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+
+                <template v-slot:item="{ item }">
+                    <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.noreg'),
+                        class: "font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.name'),
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.verification.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.verification.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("verification/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+            isSelected(p) {
+                return p.id == this.$store.state.verification.selected_patient.id
+            },
+            selectMe(data) {
+                this.$store.commit("verification/setSelectedPatient", data)
+            }
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-verification/components/mainVerif.vue

@@ -0,0 +1,53 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <search-component></search-component>
+                <v-row>
+                    <v-col cols="12" md="3" sm="12" xs="12" class="mt-5">
+                        <list-patient-component></list-patient-component>
+                    </v-col>
+                    <v-col cols="12" md="9" sm="12" xs="12" class="mt-5">
+                        <detail-patient-component></detail-patient-component>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-main>
+    </v-app>
+
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import listPatientComponent from "./listPatient.vue";
+    import searchComponent from "./searchPatient.vue";
+    import detailComponent from "./detailPatient.vue";
+    export default {
+        name: "MainVerif",
+        components: {
+            "one-navbar": NavbarComponent,
+            "list-patient-component": listPatientComponent,
+            "search-component": searchComponent,
+            "detail-patient-component": detailComponent
+        },
+        data() {
+            return {
+
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-verification/components/searchPatient.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row>
+        <v-col cols="3">
+          <div class="d-flex align-center ga-2">
+          <v-menu
+            v-model="menuStartDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+            max-width="290px"
+          >
+            <template v-slot:activator="{ props  }">
+              <v-text-field
+                :model-value="formatDate()"
+                :label="$t('message.search.startdate')"
+                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="menuStartDate=false"
+            ></v-date-picker>
+          </v-menu>
+          <v-menu
+            v-model="menuEndDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+            max-width="290px"
+          >
+            <template v-slot:activator="{ props  }">
+              <v-text-field
+                :model-value="formatDate()"
+                :label="$t('message.search.enddate')"
+                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="menuEndDate=false"
+            ></v-date-picker>
+          </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.5">
+          <v-text-field 
+            :label="$t('message.search.noreg')"
+            variant="outlined"
+            hide-details
+            append-inner-icon="mdi-magnify"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2.5">
+          <v-autocomplete
+            :label="$t('message.search.group')"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="1">
+            <v-btn 
+                variant="flat"
+                small
+                style="height: 100%;"
+                class="bg-primary rounded-lg">
+                <iconify-icon
+                    style="font-size: 2rem;"
+                    icon="fluent:search-20-regular"
+                ></iconify-icon>
+            </v-btn>
+          </v-col>
+        <v-col cols="3">
+          <div style="height: 100%;">
+            <v-row class="pt-3 justify-end">
+              <div>
+                <v-btn
+                  class="bg-primary-lighten mr-2"
+                  variant="tonal"
+                  color="primary"
+                  size="x-large"
+                >
+                {{ $t('message.search.history') }}
+              </v-btn>
+              </div>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+  export default {
+    name: "SearchPatient",
+    data() {
+        return {
+          menuStartDate: false,
+          menuEndDate: false,
+          visible: false,
+        };
+    },
+    computed: {
+      date: {
+          get() {
+              return this.$store.state.verification.date;
+          },
+          set(val) {
+              console.log(val)
+              this.$store.commit("verification/setDate", val);
+          },
+      },
+    },
+    methods: {
+      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")}`;
+      },
+    },
+    wacth: {
+
+    }
+  }
+</script>

result-verification/index.html

@@ -0,0 +1,116 @@
+<!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>
+    <!-- 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 verification from "./modules/verification.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          verification: verification,
+        },
+      });
+      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
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-verif-component></main-verif-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-verif-component": "./components/mainVerif.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>

result-verification/language.js

@@ -0,0 +1,70 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search: {
+                startdate: "Start Date",
+                enddate: "End Date",
+                noreg: "No. Reg / Name",
+                group: "Examination Group",
+                history: "History",
+            },
+            toolbalTitle: "PATIENT",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Date",
+                    noreg: "No. Reg / Name / Gender",
+                    dob: "DOB / Age",
+                    sender: "Sender"
+                },
+                header: {
+                    name: "EXAMINATION NAME",
+                    result: "RESULT",
+                    flag: "FLAG",
+                    normalvalue: "NORMAL VALUE",
+                    unit: "UNIT",
+                    method: "METHOD",
+                    note: "NOTE",
+                    verification: "VERIFICATION"
+                }
+            }
+        },
+    },
+    id: {
+        message: {
+            search: {
+                startdate: "Tanggal Mulai",
+                enddate: "Tanggal Selesai",
+                noreg: "No. Reg / Nama",
+                group: "Grup Pemeriksaan",
+                history: "Riwayat",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+            },
+            tableDetailPatient: {
+                navbar: {
+                    date: "Tanggal",
+                    noreg: "No. Reg / Nama / Jenis Kelamin",
+                    dob: "DOB / Umur",
+                    sender: "Pengirim"
+                },
+                header: {
+                    name: "NAMA PEMERIKSAAN",
+                    result: "HASIL",
+                    flag: "FLAG",
+                    normalvalue: "NILAI NORMAL",
+                    unit: "UNIT",
+                    method: "METODE",
+                    note: "CATATAN",
+                    verification: "VERIFFIKASI"
+                }
+            }
+        },
+    },
+};

send-to-fo/components/filterfo.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-card>
+    <v-row class="pa-5">
+      <v-col cols="8">
+        <!-- Baris 1 -->
+        <v-row>
+          <!-- Input Search -->
+          <v-col cols="3" class="">
+            <v-menu v-model="menuDate" :close-on-content-click="false" transition="scale-transition" offset-y
+              min-width="auto" max-width="290px">
+              <template v-slot:activator="{ props }">
+                <v-text-field :model-value="formatDate()" :label="$t('message.search.date')"
+                  prepend-inner-icon="mdi-calendar" hide-details readonly density="compact" 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="menuDate = false"></v-date-picker>
+            </v-menu>
+            <!-- <v-text-field :label="$t('message.search.date')" variant="outlined" density="compact" min-width="auto"
+              hide-details single-line>
+            </v-text-field> -->
+          </v-col>
+          <v-col cols="4" class="">
+            <v-text-field :label="$t('message.search.noReg')" variant="outlined" density="compact" min-width="auto"
+              hide-details single-line>
+            </v-text-field>
+          </v-col>
+          <v-col cols="4" class="">
+            <v-autocomplete :label="$t('message.search.customerGroup')" variant="outlined" density="compact"
+              hide-details menu-icon="mdi-chevron-down"
+              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
+            <!-- <v-text-field :label="$t('message.search.customerGroup')" variant="outlined" density="compact"
+              min-width="auto" hide-details single-line>
+            </v-text-field> -->
+          </v-col>
+          <v-col cols="1">
+            <v-btn variant="flat" small style="height: 42px;" class="bg-primary rounded-lg">
+              <v-icon size="x-large">mdi-magnify</v-icon>
+            </v-btn>
+          </v-col>
+
+        </v-row>
+      </v-col>
+
+      <v-col cols="4">
+        <!-- Baris 2 -->
+        <v-row>
+          <!-- Input Search -->
+          <v-spacer></v-spacer>
+          <v-col cols="auto" class="">
+            <v-btn density="default" size='large' color="primary" @click="send">{{ $t('message.send') }}</v-btn>
+          </v-col>
+
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script type="module">
+export default {
+  name: "FilterFo",
+  data() {
+    return {
+      menuDate: false,
+    };
+  },
+  computed: {
+    date: {
+      get() {
+        return this.$store.state.sendtofo.date;
+      },
+      set(val) {
+        console.log(val)
+        this.$store.commit("sendtofo/setDate", val);
+      },
+    },
+  },
+  methods: {
+    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")}`;
+    },
+    send() {
+      console.log("Send Button Clicked");
+    }
+  },
+};
+</script>
+
+<style scoped></style>

send-to-fo/components/main.vue

@@ -0,0 +1,34 @@
+<template class="bg-primary-lighten">
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main class="bg-primary-lighten">
+            <v-row class="ma-5">
+                <v-col cols="12"><filter-fo></filter-fo></v-col>
+                <v-col cols="4"><pasien-component></pasien-component></v-col>
+                <v-col cols="8"><report-component></report-component></v-col>
+            </v-row>
+        </v-main>
+    </v-app>
+</template>
+
+<script type="module">
+import FilterFo from "./filterfo.vue";
+import PasienComponent from "./pasien.vue";
+import ReportComponent from "./report.vue";
+import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+export default {
+    name: "component2",
+    components: {
+        "filter-fo": FilterFo,
+        "one-navbar": NavbarComponent,
+        "pasien-component": PasienComponent,
+        "report-component": ReportComponent,
+    },
+    computed: {
+    },
+    methods: {
+    },
+};
+</script>
+
+<style scoped></style>

send-to-fo/components/pasien.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
+
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.noreg'),
+                        class: "font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.name'),
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.sendtofo.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.sendtofo.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("sendtofo/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+            isSelected(p) {
+                return p.id == this.$store.state.sendtofo.selected_patient.id
+            },
+            selectMe(data) {
+                this.$store.commit("sendtofo/setSelectedPatient", data)
+                this.$store.commit("sendtofo/setSelectedDetail", data)
+            }
+        },
+        wacth: {
+
+        }
+    }
+</script>

send-to-fo/components/report.vue

@@ -0,0 +1,74 @@
+<template>
+    <v-card>
+        <v-row class="pa-5">
+            <v-col cols="12">
+                <v-row>
+                    <v-spacer></v-spacer>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="selfService">{{
+                            $t('message.report.selfservice') }}</v-btn>
+                    </v-col>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="patientAddress">{{
+                            $t('message.report.patientAddress') }}</v-btn>
+                    </v-col>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="senderAddress">{{
+                            $t('message.report.senderAddress') }}</v-btn>
+                    </v-col>
+                </v-row>
+            </v-col>
+            <v-col cols="12">
+                <v-card-text>
+                    <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object>
+                </v-card-text>
+                <!-- <v-card-text> -->
+                <!-- <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object> -->
+                <!-- <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote"
+                        :urlprint="urlprintnote" @close-dialog-print="openprintnote = false"></one-dialog-print> -->
+
+                <!-- </v-card-text> -->
+                <!-- <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn color="primary" flat onClick="window.location.reload();" @click="savetutup()">
+                        TUTUP
+                    </v-btn>
+                </v-card-actions> -->
+            </v-col>
+        </v-row>
+    </v-card>
+</template>
+
+<script>
+export default {
+    name: "ReportComponent",
+    data() {
+        return {
+            xheight: 800,
+
+            printtitle: '',
+            printwidth: '90%',
+            urlprintnote: '',
+
+            xurl: "http://riau/birt/run?__report=report/one/rekap/executive_summary_mcu_001.rptdesign&__format=pdf&PID=12&username=Administrator"
+        };
+    },
+    methods: {
+        selfService() {
+            // Implementasi fungsi selfService
+            console.log("Self Service button clicked");
+        },
+        patientAddress() {
+            // Implementasi fungsi patientAddress
+            console.log("Patient Address button clicked");
+        },
+        senderAddress() {
+            // Implementasi fungsi senderAddress
+            console.log("Sender Address button clicked");
+        },
+    },
+};
+</script>
+
+<style scoped></style>

send-to-fo/index.html

@@ -0,0 +1,125 @@
+<!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>
+    <!-- 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 system from "../globalstore/globalstore.js";
+      import sendtofo from "./modules/sendtofo.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;
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          sendtofo: sendtofo,
+        },
+      });
+      // 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",
+        "filter-fo": "./components/filterfo.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>

send-to-fo/language.js

@@ -0,0 +1,42 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search:{
+                date: "Tanggal",
+                noReg: "No Reg / Nama",
+                customerGroup: "Kel. Pelanggan",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+            },
+            report:{
+                selfservice: "Ambil Sendiri",
+                patientAddress: "Alamat Pasien",
+                senderAddress: "Alamat Pengirim"
+            },
+            send:"Serahkan",
+        },
+    },
+    id: {
+        message: {
+            search:{
+                date: "Date",
+                noReg: "No Reg / Name",
+                customerGroup: "Customer Group",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+            },
+            report:{
+                selfservice: "SelfService",
+                patientAddress: "Patient Address",
+                senderAddress: "Sender Address",
+                send: "Send",
+            }
+        },
+    },
+};

send-to-fo/modules/sendtofo.js

@@ -0,0 +1,55 @@
+
+// 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: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02"
+                },
+                {
+                    id: 2,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+                {
+                    id: 3,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+            ],
+            selected_patient: {},
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setDetails(state, data) {
+            state.details = data
+        },
+        setSelectedDetail(state, data) {
+            state.selected_detail = data
+        }
+    },
+    actions: {
+
+    }
+};
+
+export default store

specimen-collection/components/filter.vue

@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2.2">
+                    <v-menu
+                        v-model="menu"
+                        :close-on-content-click="false"
+                        transition="scale-transition"
+                        offset-y
+                        min-width="auto"
+                        max-width="290px"
+                    >
+                        <template v-slot:activator="{ props }">
+                            <v-text-field
+                                :model-value="formatDate()"
+                                :label="$t('message.filter.date')"
+                                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-col>
+                <v-col cols="2.2">
+                    <v-text-field
+                        :label="$t('message.filter.noreg')"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        :label="$t('message.filter.group')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="temp_dropdown"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        :label="$t('message.filter.station')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="temp_dropdown"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        :label="$t('message.filter.location')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="temp_dropdown"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="1">
+                    <div
+                        style="height: 100%; display: flex; align-items: center; justify-content: center;"
+                        class="rounded-lg bg-primary pa-2 h-100 pointer"
+                    >
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:search-20-regular"
+                        ></iconify-icon>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "filtercomp",
+        components: {},
+        mounted() {
+            
+        },
+        data() {
+            return {
+                menu: false,
+                visible: false,
+            };
+        },
+        computed: {
+            date: {
+                get() {
+                    return this.$store.state.collection.date;
+                },
+                set(val) {
+                    this.$store.commit("setDate", val);
+                }
+            },
+            temp_dropdown: {
+                get() {
+                    return this.$store.state.collection.temp_dropdown;
+                },
+            }
+        },
+        methods: {
+            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")}`;
+            }
+        },
+    };
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

specimen-collection/components/left.vue

@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
+            </div>
+            <v-data-table
+                v-model="selected_patients"
+                :items="patients"
+                :headers="headers"
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
+                        <td>
+                            <p class="font-weight-medium">{{ item.tanggal }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.noreg }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.nama }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.status }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {
+        
+    },
+    data() {
+        return {
+            menu: false,
+            visible: false,
+            selectedItems: [],
+            headers: [
+                {
+                    title: this.$t('message.tablePatient.date'),
+                    align: "start",
+                    sortable: false,
+                    key: "date",
+                    width: "15%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.noreg'),
+                    align: "start",
+                    sortable: false,
+                    key: "noreg",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.group'),
+                    align: "start",
+                    sortable: false,
+                    key: "group",
+                    width: "25%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.name'),
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "25%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.status'),
+                    align: "start",
+                    sortable: false,
+                    key: "status",
+                    width: "15%",
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        patients() {
+            return this.$store.state.collection.patients;
+        },
+        selected_patients: {
+            get() {
+                return this.$store.state.collection.selected_patients;
+            },
+            set(data) {
+                this.$store.commit("setSelectedPatients", data);
+            }
+        }
+    },
+    methods: {
+        selectItem(data) {
+            // this.$store.commit("setSelectedPatients", data);
+            this.selected_patients = data;
+        },
+        isItemSelected(data) {
+            return data.noreg === this.$store.state.collection.selected_patients.noreg
+        }
+    },
+};
+</script>
+
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>

specimen-collection/components/main.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <one-filter></one-filter>
+                <v-row>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <one-left></one-left>
+                    </v-col>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <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 FilterComponent from "./filter.vue";
+    import LeftComponent from "./left.vue";
+    import RightComponent from "./right.vue";
+    export default {
+        name: "specimen collection",
+        components: {
+            "one-navbar": NavbarComponent,
+            "one-filter": FilterComponent,
+            "one-left": LeftComponent,
+            "one-right": RightComponent,
+        },
+        mounted() {},
+        data() {
+            return {
+                visible: false,
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    };
+</script>

specimen-collection/components/right.vue

@@ -0,0 +1,275 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-primary-lighten rounded-lg pa-5">
+                <v-row>
+                    <v-col cols="2">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
+                            <!-- placeholder photo -->
+                        </div>
+                    </v-col>
+                    <v-col cols="8">
+                        <h4>{{ selected.noreg }}</h4>
+                        <h4 class="text-grey-darken-1">{{ selected.nama }}</h4>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg pa-2 mr-2 bg-grey-lighten-5 pointer"
+                            v-show="selected.status === 'Call'"
+                        >
+                            <iconify-icon
+                                class="text-grey"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:arrow-previous-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-secondary-lighten pa-2 pointer"
+                            @click="setCall(selected)"
+                            v-show="selected.doneCall !== 'Y'"
+                        >
+                            <iconify-icon
+                                class="text-secondary-darken"
+                                style="font-size: 1.5rem;"
+                                :icon="setIconCall(selected.status)"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="10">
+                        <p class="font-weight-medium">PID</p>
+                    </v-col>
+                    <v-col cols="2" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">-</p>
+                    </v-col>
+                </v-row>
+                <v-row no-gutters>
+                    <v-col cols="4">
+                        <p class="font-weight-medium">{{ $t('message.dobage') }}</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">{{ selected.dob }}</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</p>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <v-row>
+                    <v-col cols="10" align-self="center">
+                        <h3 class="primary-lighten">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</h3>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2 pointer"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:note-add-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
+                        >
+                            <iconify-icon
+                                class="text-success-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:notepad-person-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+            </div>
+            <v-data-table
+                :items="details.specimen"
+                :headers="headers"
+                hide-default-footer
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="font-weight-medium">{{ item.specimen }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.barcode }}</p>
+                        </td>
+                        <td align="center">
+                            <div
+                                style="display: flex; align-items: center; justify-content: center;"
+                                class="rounded-lg pa-2"
+                                v-if="selected.doneCall === 'Y'"
+                            >
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        :class="{'text-error': item.requirement === 'N'}"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-12-filled"
+                                        @click="setReq(item, 'N')"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
+                                >
+                                    <iconify-icon
+                                        :class="{'text-success': item.requirement === 'Y'}"
+                                        style="font-size: 2rem;"
+                                        icon="fluent:checkmark-12-filled"
+                                        @click="setReq(item, 'Y')"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
+                        </td>
+                        <td align="center">
+                            <div v-if="selected.doneCall === 'Y'" class="py-1">
+                                <div class="bg-warning rounded-lg pa-1 text-white">
+                                    {{ formatDate(item.sDate) }}
+                                </div>
+                                <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
+                                    {{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
+                                </div>
+                            </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <div class="ml-3">
+                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5">
+                <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
+            </div>
+            <div>
+                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
+            </div>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "rightcomp",
+        components: {
+
+        },
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                headers: [
+                    {
+                        title: this.$t('message.tableDetail.speciment'),
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.barcode'),
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.requirement'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.tableDetail.action'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            selected: {
+                get() {
+                    return this.$store.state.collection.selected_patients;
+                },
+                set(data) {
+                    this.$store.commit("setSelectedPatients", data);
+                }
+            },
+            details: {
+                get() {
+                    return this.$store.state.collection.details;
+                },
+                set(data) {
+                    this.$store.commit("")
+                }
+            },
+            pemeriksaan() {
+                return this.$store.state.collection.pemeriksaan;
+            }
+        },
+        methods: {
+            setIconCall(status) {
+                switch (status.toLowerCase()) {
+                    case "call":
+                        return "fluent:arrow-sync-24-regular";
+                    default:
+                        return "fluent:speaker-2-24-regular";
+                }
+            },
+            setCall(data) {
+                if (data.status == "New") {
+                    data.status = "Call";    
+                } else if (data.status == "Call") {
+                    data.doneCall = "Y";
+                }
+            },
+            setReq(data, status) {
+                data.requirement = status;
+                data.eDate= new Date();
+            },
+            formatDate(date) {
+                if (!date) return null;
+
+                return moment(date).format("DD-MM-YYYY HH:mm");
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

specimen-collection/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Specimen Collection</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 system from "../globalstore/globalstore.js";
+            import collection from "./modules/collection.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);
+                },
+            };
+
+            const messages = CustomMessages;
+            const browserLocale = navigator.language || navigator.languages[0];
+            const i18n = VueI18n.createI18n({
+                locale: browserLocale.startsWith("id") ? "id" : "en",
+                fallbackLocale: "en",
+                messages,
+            });
+            window.i18n = i18n;
+
+            moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+            const store = Vuex.createStore({
+                modules: {
+                    system: system,
+                    collection: collection,
+                },
+            });
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        visible: false,
+                        bg_src: "",
+                        loading: false,
+                    };
+                },
+
+                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-collection/language.js

@@ -0,0 +1,58 @@
+var CustomMessages = {
+    en: {
+        message: {
+            filter: {
+                date: "Date",
+                noreg: "No. Reg / Name",
+                group: "Customer Group",
+                station: "Station",
+                location: "Location",
+            },
+            tablePatient: {
+                title: "PATIENT",
+                date: "DATE",
+                noreg: "NO. REG",
+                group: "CUSTOMER GROUP",
+                name: "NAME",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAFF",
+                speciment: "SPECIMENT",
+                barcode: "BARCODE",
+                requirement: "REQUIREMENT",
+                action: "ACTION"
+            },
+            examination: "EXAMINATION",
+            dobage: "Date of Birth and Age",
+        },
+    },
+    id: {
+        message: {
+            filter: {
+                date: "Tanggal",
+                noreg: "No. Reg / Nama",
+                group: "Kel. Pelanggan",
+                station: "Station",
+                location: "Lokasi",
+            },
+            tablePatient: {
+                title: "PASIEN",
+                date: "TANGGAL",
+                noreg: "NO. REG",
+                group: "KEL. PELANGGAN",
+                name: "NAMA",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAF",
+                speciment: "SPECIMEN",
+                barcode: "BARCODE",
+                requirement: "PRASYARAT",
+                action: "AKSI"
+            },
+            examination: "PEMERIKSAAN",
+            dobage: "Tanggal Lahir dan Umur",
+        },
+    },
+};

specimen-collection/modules/collection.js

@@ -0,0 +1,92 @@
+const store = {
+    state() {
+        return {
+            date: new Date(),
+            temp_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+            patients: [
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000037LA",
+                    kelpelanggan: "PASIEN MANDIRI",
+                    nama: "Tn. Alpha",
+                    age: "23 tahun 11 bulan 10 hari",
+                    dob: "10/10/2000",
+                    pid: "-",
+                    status: "New",
+                    doneCall: "N",
+                },
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000036LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Beta",
+                    age: "27 tahun 2 bulan 12 hari",
+                    dob: "08/06/1997",
+                    pid: "-",
+                    status: "New",
+                    doneCall: "N",
+                },
+                {
+                    tanggal: "30-07-2024",
+                    noreg: "055000035LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Gamma",
+                    age: "25 tahun 1 bulan 23 hari",
+                    dob: "27/06/1999",
+                    pid: "-",
+                    status: "New",
+                    doneCall: "N",
+                },
+            ],
+            selected_patients: {
+                tanggal: "-",
+                noreg: "-",
+                kelpelanggan: "-",
+                nama: "-",
+                age: "-",
+                dob: "-",
+                pid: "-",
+                status: "-",
+            },
+            details: {
+                staff: "NOVITA",
+                specimen: [
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "055000035LSE1A",
+                        requirement: "",
+                        sDate: new Date(),
+                        eDate: "",
+                    },
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "0550000AA223FF",
+                        requirement: "",
+                        sDate: new Date(),
+                        eDate: "",
+                    },
+                ],
+                jenis: ["DARAH", "SWAB/SEKRET" ]
+            },
+            pemeriksaan: [
+                "Hematologi Lengkap", "Golongan Darah Rhesus", "Kultur Usap Tenggorokan (Vitek)",
+            ]
+        };
+    },
+    mutations: {
+        setPatients(state, data) {
+            state.patients = data
+        },
+        setSelectedPatients(state, data) {
+            state.selected_patients = data
+        },
+        setDate(state, date) {
+            state.date = date;
+        }
+    },
+    actions: {
+
+    }
+}
+
+export default store

status-patient/components/content.vue

@@ -0,0 +1,116 @@
+<template>
+    <v-container fluid class="bg-white rounded-lg my-5">
+        <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+            <v-row>
+                <v-col cols="11">
+                    <h3>{{ $t('message.table.title') }}</h3>
+                </v-col>
+                <v-col cols="1" align="end">
+                    <h3>6</h3>
+                </v-col>
+            </v-row>
+        </div>
+        <v-data-table
+            :headers="headers"
+            hide-default-footer
+        >
+            <template v-slot:headers="{ columns }">
+                <tr>
+                    <template v-for="column in columns" :key="column.key">
+                        <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                            <span>{{ column.title }}</span>
+                        </td>
+                    </template>
+                </tr>
+            </template>
+        </v-data-table>
+    </v-container>
+</template>
+
+<script>
+    export default {
+        name: "contentcomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                headers : [
+                    {
+                        title: this.$t('message.table.h_no'),
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "5%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_orderr'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "15%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_pasien'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_status'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_sample'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_proces'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_resver'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_resval'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: this.$t('message.table.h_printt'),
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "10%",
+                        class: "font-weight-bold",
+                    },
+                ]
+            };
+        },
+    }
+</script>

status-patient/components/filter.vue

@@ -0,0 +1,114 @@
+<template>
+    <v-container fluid class="bg-white rounded-lg">
+        <v-row>
+            <v-col cols="2">
+                <v-menu
+                    v-model="menu"
+                    :close-on-content-click="false"
+                    transition="scale-transition"
+                    offset-y
+                    min-width="auto"
+                    max-width="290px"
+                >
+                    <template v-slot:activator="{ props }">
+                        <v-text-field
+                            :model-value="formatDate()"
+                            :label="$t('message.filter.date')"
+                            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-col>
+            <v-col cols="2">
+                <v-text-field
+                    :label="$t('message.filter.noreg')"
+                    variant="outlined"
+                    hide-details
+                    append-inner-icon="mdi-magnify"
+                ></v-text-field>
+            </v-col>
+            <v-col cols="2">
+                <v-autocomplete
+                        :label="$t('message.filter.group')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="temp_dropdown"
+                    ></v-autocomplete>
+            </v-col>
+            <v-col cols="5"></v-col>
+            <v-col cols="1">
+                <div
+                        style="height: 100%; display: flex; align-items: center; justify-content: center;"
+                        class="rounded-lg bg-primary pa-2 h-100 pointer"
+                    >
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:search-20-regular"
+                        ></iconify-icon>
+                    </div>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+    export default {
+        name: "filtercomponent",
+        components: {},
+        mounted() {
+            
+        },
+        data() {
+            return {
+                menu: false,
+                visible: false,
+            }
+        },
+        computed: {
+            date: {
+                get() {
+                    return this.$store.state.stored.date;
+                },
+                set(val) {
+                    this.$store.commit("setDate", val);
+                }
+            },
+            temp_dropdown: {
+                get() {
+                    return this.$store.state.stored.temp_dropdown;
+                }
+            }
+        },
+        methods: {
+            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")}`;
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

status-patient/components/main.vue

@@ -0,0 +1,42 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <quick-menu></quick-menu>
+            <div class="pa-5 bg-primary-lighten mx-2 rounded-xl" style="height: 100%;">
+                <one-filter></one-filter>
+                <one-content></one-content>
+            </div>
+        </v-main>
+    </v-app>
+</template>
+
+<script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import QuickMenu from "../../globalcomponent/quick-menu.vue";
+    import Content from "./content.vue";
+    import Filter from "./filter.vue";
+    export default {
+        name: "Status Pasien",
+        components: {
+            "one-navbar": NavbarComponent,
+            "quick-menu": QuickMenu,
+            "one-content": Content,
+            "one-filter": Filter,
+        },
+        mounted() {
+            
+        },
+        data() {
+            return {
+                visible: false
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>

status-patient/index.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Status Pasien</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 system from "../globalstore/globalstore.js";
+            import stored from "./modules/store.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);
+                },
+            };
+
+            const messages = CustomMessages;
+            const browserLocale = navigator.language || navigator.languages[0];
+            const i18n = VueI18n.createI18n({
+                locale: browserLocale.startsWith("id") ? "id" : "en",
+                fallbackLocale: "en",
+                messages,
+            });
+            window.i18n = i18n;
+
+            moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+            const store = Vuex.createStore({
+                modules: {
+                    system: system,
+                    stored: stored,
+                },
+            });
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        visible: false,
+                        bg_src: "",
+                        loading: false,
+                    };
+                },
+
+                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>

status-patient/language.js

@@ -0,0 +1,46 @@
+var CustomMessages = {
+    en: {
+        message: {
+            filter: {
+                date: "Date",
+                noreg: "No. Reg / Name",
+                group: "Customer Group",
+            },
+            table: {
+                title: "TOTAL PATIENTS",
+                h_no: "NO",
+                h_orderr: "ORDER/JANJI HASIL",
+                h_pasien: "PATIENT",
+                h_status: "STATUS ORDER",
+                h_sample: "SAMP. COLLECT",
+                h_proces: "PROCESS",
+                h_resver: "RESULT VERIF",
+                h_resval: "RESULT VALID",
+                h_printt: "PRINT",
+            },
+            dobage: "Date of Birth and Age",
+        },
+    },
+    id: {
+        message: {
+            filter: {
+                date: "Tanggal",
+                noreg: "No. Reg / Nama",
+                group: "Kel. Pelanggan",
+            },
+            table: {
+                title: "TOTAL PASIEN",
+                h_no: "NO",
+                h_orderr: "ORDER/JANJI HASIL",
+                h_pasien: "PASIEN",
+                h_status: "STATUS ORDER",
+                h_sample: "SAMP. COLLECT",
+                h_proces: "PROSES",
+                h_resver: "RESULT VERIF",
+                h_resval: "RESULT VALID",
+                h_printt: "PRINT",
+            },
+            dobage: "Tanggal Lahir dan Umur",
+        },
+    },
+};

status-patient/modules/store.js

@@ -0,0 +1,95 @@
+const store = {
+    state() {
+        return {
+            date: new Date(),
+            temp_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+            data: [
+                {
+                  "xno": 1,
+                  "xid": "132282",
+                  "order_date": "27-08-2024 19:32",
+                  "no_reg": "05600027LA",
+                  "patient_name": "Ny IMELDA JANICE",
+                  "company_name": "PASIEN KLINISI",
+                  "mou_name": "PASIEN UMUM 2021",
+                  "status_cito": "N",
+                  "order_promise": "28-08-2024 12:00",
+                  "details_order": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_sampling": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_verifications": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_process": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_result_verification": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_result_validation": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "details_print": [
+                    {
+                      "ids": "1626778,1626779",
+                      "group_name": "LAB",
+                      "group_id": "1",
+                      "flag_nonlab": "N",
+                      "status": "N"
+                    }
+                  ],
+                  "no_reg_ext": "056G3C17LA"
+                }
+            ]
+        }
+    },
+    mutations: {
+        setDate(state, date) {
+            state.date = date;
+        }
+    },
+    actions: {
+
+    }
+}
+
+export default store

worklist/components/filter.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+      <v-container class="bg-white rounded-lg" fluid>
+        <v-row>
+          <v-col cols="3">
+            <div class="d-flex align-center ga-2">
+            <v-menu
+              v-model="menuStartDate"
+              :close-on-content-click="false"
+              transition="scale-transition"
+              offset-y
+              min-width="auto"
+              max-width="290px"
+            >
+              <template v-slot:activator="{ props  }">
+                <v-text-field
+                  :model-value="formatDate()"
+                  :label="$t('message.filter.date')"
+                  prepend-inner-icon="mdi-calendar"
+                  hide-details
+                  readonly
+                  variant="outlined"
+                  density="compact"
+                  v-bind="props"
+                ></v-text-field>
+              </template>
+              <v-date-picker
+                hide-header
+                show-adjacent-months
+                rounded="lg"
+                color="primary"
+                v-model="date"
+                @update:modelValue="menuStartDate=false"
+              ></v-date-picker>
+            </v-menu>
+            </div>
+          </v-col>
+          <v-col cols="9">
+            <div class="d-flex justify-end ga-6">
+                <v-select
+                    :label="$t('message.filter.worklist')"
+                    variant="outlined"
+                    hide-details
+                    density="compact"
+                    menu-icon="mdi-chevron-down"
+                    :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                ></v-select>
+                <v-btn 
+                    variant="flat"
+                    style="height: auto; width: 40px;"
+                    class="bg-primary rounded-lg">
+                    <iconify-icon
+                        style="font-size: 1.5rem;"
+                        icon="fluent:search-20-regular"
+                    ></iconify-icon>
+                </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </template>
+      
+  <style scoped>
+  
+  </style>
+      
+  <script type="module">
+    export default {
+      name: "Filter",
+      data() {
+          return {
+            menuStartDate: false,
+            menuEndDate: false,
+            visible: false,
+          };
+      },
+      computed: {
+        date: {
+            get() {
+                return this.$store.state.worklist.date;
+            },
+            set(val) {
+                console.log(val)
+                this.$store.commit("worklist/setDate", val);
+            },
+        },
+      },
+      methods: {
+        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")}`;
+        },
+      },
+      wacth: {
+  
+      }
+    }
+  </script>

worklist/components/listWorklist.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>                        
+                        <td width="15%" class="pa-4 bg-secondary-lighten font-weight-bold">
+                            {{ $t('message.headerWorklist.test') }}
+                        </td>
+                        <td class="pa-1 bg-secondary-lighten font-weight-bold">
+                            <span class="position-relative" style="top:6px;">
+                                {{ $t('message.headerWorklist.patient') }}
+                            </span>
+                            <span class="text-black float-right mr-3" style="font-size:20px;">
+                                {{ staff }}
+                            </span>
+                        </td>
+                    </tr>
+                </template>
+
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="mt-2 font-weight-medium text-uppercase">{{ item.T_TestName }}</p>
+                            <p class="text-grey">{{ item.T_TestCode }}</p>
+                            <p class="mb-2 text-black">Total pasien : {{ item.patients.length }}</p>
+                        </td>
+                        <td>
+                            <v-row class="flex-wrap">
+                                <v-sheet v-for="(p, i) in item.patients" v-bind:key="i" class="pr-3 row-pointer">
+                                    <v-sheet :class="p.is_received == 'Y' ? 'text-uppercase bg-primary-lighten text-primary box-y':'text-uppercase text-black box-n'">
+                                        <p class="font-weight-medium">{{ p.name }}</p>
+                                        <p >{{ p.number }}</p>
+                                    </v-sheet>
+                                </v-sheet>
+                            </v-row>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer :hover {
+        cursor: pointer;
+    }
+
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+
+    .box-y {
+        display: flex;
+        width: 202px;
+        padding: 8px 12px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        border-radius: 4px;
+        border: 1px solid #E3F2FD;
+    }
+    .box-n {
+        display: flex;
+        width: 202px;
+        padding: 8px 12px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        border-radius: 4px;
+        border: 1px solid #E0E0E0;
+    }
+
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                staff: "BELUM ADA STAFF",
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'test',
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.headerWorklist.test'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'patient', 
+                        sortable: false,
+                        width: "85%",
+                        title: this.$t('message.headerWorklist.patient'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.worklist.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.worklist.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("worklist/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

worklist/components/mainWorklist.vue

@@ -0,0 +1,50 @@
+<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="12" sm="12" xs="12">
+                        <filter-component></filter-component>
+                    </v-col>
+                    <v-col cols="12" md="12" sm="12" xs="12">
+                        <list-worklist-component></list-worklist-component>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-main>
+    </v-app>
+
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import filterComponent from "./filter.vue";
+    import listWorklistComponent from "./listWorklist.vue";
+    export default {
+        name: "MainWorklist",
+        components: {
+            "one-navbar": NavbarComponent,
+            "filter-component": filterComponent,
+            "list-worklist-component": listWorklistComponent
+        },
+        data() {
+            return {
+
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

worklist/index.html

@@ -0,0 +1,116 @@
+<!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>
+    <!-- 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 worklist from "./modules/worklist.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          worklist: worklist,
+        },
+      });
+      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
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-worklist-component></main-worklist-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-worklist-component": "./components/mainWorklist.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>

worklist/language.js

@@ -0,0 +1,26 @@
+var CustomMessages = {
+    en: {
+        message: {
+            filter: {
+                date: "Date",
+                worklist: "Worklist",
+            },
+            headerWorklist: {
+                test: "EXAMINATION NAME",
+                patient: "PATIENT"
+            }
+        },
+    },
+    id: {
+        message: {
+            filter: {
+                date: "Tanggal",
+                worklist: "Daftar kerja",
+            },
+            headerWorklist: {
+                test: "NAMA PEMERIKSAAN",
+                patient: "PASIEN"
+            }
+        },
+    },
+};

worklist/modules/worklist.js

@@ -0,0 +1,162 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    "T_TestID": "4095",
+                    "Nat_TestID": "4095",
+                    "T_TestCode": "10110100",
+                    "T_TestName": "Hematologi Lengkap",
+                    "T_WorklistID": "40",
+                    "patients": [
+                        {
+                            "name": "Tn  COCOBA / 654545 ",
+                            "id": "132258",
+                            "did": "1626215",
+                            "number": "05600003LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 2,
+                            "speciment_receive": "N",
+                            "speciment_handling": "N",
+                            "is_cito": "N",
+                            "is_received": "N",
+                            "is_confirm": "N",
+                            "barcode": "05600003LAEL",
+                            "requirements": null
+                        },
+                        {
+                            "name": "Tn  COCOBA / 654545 ",
+                            "id": "132259",
+                            "did": "1626279",
+                            "number": "05600004LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 2,
+                            "speciment_receive": "Y",
+                            "speciment_handling": "Y",
+                            "is_cito": "N",
+                            "is_received": "Y",
+                            "is_confirm": "N",
+                            "barcode": "05600004LAEL",
+                            "requirements": null
+                        }
+                    ]
+                },
+                {
+                    "T_TestID": "4099",
+                    "Nat_TestID": "4099",
+                    "T_TestCode": "10110500",
+                    "T_TestName": "Leukosit",
+                    "T_WorklistID": "40",
+                    "patients": [
+                        {
+                            "name": "Tn  COCOBA / 654545 ",
+                            "id": "132258",
+                            "did": "1626217",
+                            "number": "05600003LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 2,
+                            "speciment_receive": "N",
+                            "speciment_handling": "N",
+                            "is_cito": "N",
+                            "is_received": "N",
+                            "is_confirm": "N",
+                            "barcode": "05600003LAEL",
+                            "requirements": null
+                        }
+                    ]
+                },
+                {
+                    "T_TestID": "4108",
+                    "Nat_TestID": "4108",
+                    "T_TestCode": "10110800",
+                    "T_TestName": "Trombosit",
+                    "T_WorklistID": "40",
+                    "patients": [
+                        {
+                            "name": "Tn  COCOBA / 654545 ",
+                            "id": "132258",
+                            "did": "1626226",
+                            "number": "05600003LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 2,
+                            "speciment_receive": "N",
+                            "speciment_handling": "N",
+                            "is_cito": "N",
+                            "is_received": "N",
+                            "is_confirm": "N",
+                            "barcode": "05600003LAEL",
+                            "requirements": null
+                        }
+                    ]
+                },
+                {
+                    "T_TestID": "4110",
+                    "Nat_TestID": "4110",
+                    "T_TestCode": "10111000",
+                    "T_TestName": "Erytrosit",
+                    "T_WorklistID": "40",
+                    "patients": [
+                        {
+                            "name": "Tn  COCOBA / 654545 ",
+                            "id": "132258",
+                            "did": "1626228",
+                            "number": "05600003LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 2,
+                            "speciment_receive": "N",
+                            "speciment_handling": "N",
+                            "is_cito": "N",
+                            "is_received": "N",
+                            "is_confirm": "N",
+                            "barcode": "05600003LAEL",
+                            "requirements": null
+                        }
+                    ]
+                },
+                {
+                    "T_TestID": "4633",
+                    "Nat_TestID": "4633",
+                    "T_TestCode": "10510100",
+                    "T_TestName": "SGOT",
+                    "T_WorklistID": "40",
+                    "patients": [
+                        {
+                            "name": "Ny  COBA HENY LAGI ",
+                            "id": "132261",
+                            "did": "1626344",
+                            "number": "05600006LA",
+                            "is_rujukan": "N",
+                            "T_SampleTypeID": 35,
+                            "speciment_receive": "N",
+                            "speciment_handling": "N",
+                            "is_cito": "N",
+                            "is_received": "N",
+                            "is_confirm": "N",
+                            "barcode": null,
+                            "requirements": null
+                        }
+                    ]
+                }
+            ],
+            selected_patient: {}
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        }
+    },
+    actions: {
+
+    }
+};
+export default store

x-page/components/filter.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2.2">
+                    <v-menu
+                        v-model="menu"
+                        :close-on-content-click="false"
+                        transition="scale-transition"
+                        offset-y
+                        min-width="auto"
+                        max-width="290px"
+                    >
+                        <template v-slot:activator="{ props }">
+                            <v-text-field
+                                :model-value="formatDate()"
+                                label="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-col>
+                <v-col cols="2.2">
+                    <v-text-field
+                        label="No Reg / Nama"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Kel Pelanggan"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Station"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Lokasi"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="1">
+                    <div
+                        style="height: 100%; display: flex; align-items: center; justify-content: center;"
+                        class="rounded-lg bg-primary pa-2 h-100"
+                    >
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:search-20-regular"
+                        ></iconify-icon>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "filtercomp",
+        components: {},
+        mounted() {
+            
+        },
+        data() {
+            return {
+                menu: false,
+                visible: false,
+            };
+        },
+        computed: {
+            date: {
+
+            },
+        },
+        methods: {
+            formatDate() {
+                if (!this.date) return null;
+
+                return moment(this.date).format("DD-MM-YYYY");
+            },
+        },
+    };
+</script>
+
+<style scoped></style>

x-page/components/left.vue

@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <h3 class="primary-lighten">PASIEN</h3>
+            </div>
+            <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.tanggal }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.noreg }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.nama }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.status }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {
+        
+    },
+    data() {
+        return {
+            menu: false,
+            visible: false,
+            items: [
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000035LA",
+                    kelpelanggan: "PASIEN MANDIRI",
+                    nama: "Tn. Alpha",
+                    status: "New",
+                },
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000036LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Beta",
+                    status: "New",
+                },
+            ],
+            selectedItems: [],
+            headers: [
+                {
+                    title: "TANGGAL",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NO. REG",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "KEL. PELANGGAN",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NAMA",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "STATUS",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+        
+    },
+};
+</script>
+
+<style scoped></style>

x-page/components/main.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <one-filter></one-filter>
+                <v-row>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <one-left></one-left>
+                    </v-col>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <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 FilterComponent from "./filter.vue";
+    import LeftComponent from "./left.vue";
+    import RightComponent from "./right.vue";
+    export default {
+        name: "x-page",
+        components: {
+            "one-navbar": NavbarComponent,
+            "one-filter": FilterComponent,
+            "one-left": LeftComponent,
+            "one-right": RightComponent,
+        },
+        mounted() {},
+        data() {
+            return {
+                visible: false,
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    };
+</script>

x-page/components/right.vue

@@ -0,0 +1,187 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-primary-lighten rounded-lg pa-5">
+                <v-row>
+                    <v-col cols="2">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;">
+                            <!-- placeholder photo -->
+                        </div>
+                    </v-col>
+                    <v-col cols="8">
+                        <h4>055000035LA</h4>
+                        <h4 style="color: slategray;">Tn. Alpha</h4>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-secondary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-secondary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:speaker-2-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="10">
+                        <p class="font-weight-medium">PID</p>
+                    </v-col>
+                    <v-col cols="2" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">asd</p>
+                    </v-col>
+                </v-row>
+                <v-row no-gutters>
+                    <v-col cols="4">
+                        <p class="font-weight-medium">Tanggal Lahir dan Umur</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">10-11-1999</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">24 Tahun 8 Bulan 21 Hari</p>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <v-row>
+                    <v-col cols="10" align-self="center">
+                        <h3 class="primary-lighten">STAF: NOVITA</h3>
+                    </v-col>
+                    <v-col cols="1" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:note-add-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                    <v-col cols="1" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:notepad-person-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+            </div>
+            <v-data-table
+                :items="items"
+                :headers="headers"
+                hide-default-footer
+            >
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="font-weight-medium">{{ item.specimen }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.barcode }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">-</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">-</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <div class="ml-5">
+                <v-chip class="mr-5 mt-5" color="primary">DARAH</v-chip>
+                <v-chip class="mr-5 mt-5" color="primary">SWAB/SEKRET</v-chip>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5">
+                <h3 class="primary-lighten">PEMERIKSAAN</h3>
+            </div>
+            <div>
+                <v-chip class="mr-5 mt-5" color="success">Hematologi Lengkap</v-chip>
+                <v-chip class="mr-5 mt-5" color="success">Golongan Darah Rhesus</v-chip>
+                <v-chip class="mr-5 mt-5" color="success">Kultur Usap Tenggorok (Vitek)</v-chip>
+            </div>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "rightcomp",
+        components: {
+
+        },
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                items: [
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "055000035LSE1A",
+                    },
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "0550000AA223FF",
+                    },
+                ],
+                headers: [
+                    {
+                        title: "SPECIMEN",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "BARCODE",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "REQUIREMENT",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "AKSI",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    }
+</script>
+
+<style scoped></style>

x-page/index.html

@@ -0,0 +1,122 @@
+<!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 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);
+                },
+            };
+
+            const messages = CustomMessages;
+            const browserLocale = navigator.language || navigator.languages[0];
+            const i18n = VueI18n.createI18n({
+                locale: browserLocale.startsWith("id") ? "id" : "en",
+                fallbackLocale: "en",
+                messages,
+            });
+            window.i18n = i18n;
+
+            moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+            const store = Vuex.createStore({
+                modules: {
+                    system: system,
+                },
+            });
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        visible: false,
+                        bg_src: "",
+                        loading: false,
+                    };
+                },
+
+                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>

x-page/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"
+        },
+    },
+};