add slicing image verification

Reviewed-on: #2

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) {
-      console.log("menuju ke- ", url)
+    goto(item) {
+      console.log("menuju ke- ", item.url);
+      this.active_menu = item;
     }
   },
 };

globalcomponent/one-navbar.vue

@@ -19,8 +19,7 @@ export default {
     "one-menu": MenuComponent,
   },
   mounted() {
-    console.log("drawer");
-    console.log(this.$store.state.system.drawer);
+    // console.log(this.$store.state.system.drawer);
   },
   data() {
     return {};

globalcomponent/quick-menu.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="rounded-xl bg-primary-lighten mx-2 my-2">
+        <v-container fluid style="overflow-x: auto; white-space: nowrap">
+            <v-btn
+                class="mr-2"
+                size="small"
+                :variant="active_menu.id === qmenu.id ? 'elevated' : 'outlined'"
+                rounded="xl"
+                color="primary-darken"
+                v-for="qmenu in qmenus"
+                @click="redirect(qmenu)"
+            >
+                {{ qmenu.name }}
+            </v-btn>
+        </v-container>
+    </div>
+</template>
+
+<script type="module">
+    export default {
+        name: "QuickAccessComponent",
+        mounted() {
+            this.$store.dispatch('system/loadQuickMenu');
+        },
+        data() {
+            return {
+                pressed: 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);
+                }
+            }
+        },
+        methods: {
+            redirect(item) {
+                this.active_menu = item;
+                console.log("redirect url ", item.url);
+            }
+        },
+    }
+</script>

globalscript/theme.js

@@ -19,6 +19,7 @@ var CustomTheme = {
             "success-darken": "#1B5E20",
             white: "#FFFFFF",
             grey: "#9E9E9E",
+            "grey-lighten-2": "#E0E0E0",
             "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

image-verification/components/left.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+      <v-row>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="3">
+                    <v-text-field
+                        :label="$t('message.left.noreg')"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                        ></v-text-field
+                    >
+                </v-col>
+                <v-col cols="3">
+                        <v-autocomplete
+                        :label="$t('message.left.station')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                        ></v-autocomplete>
+                </v-col>
+                <v-col cols="5"></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-row>
+          </v-container>
+        </v-col>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-data-table
+              :items="xpatients"
+              :headers="headers"
+              return-object
+              hide-default-footer
+            >
+              <template
+                v-slot:item="{ item }"
+              >
+                <tr>
+                  <td class="text-center">
+                    <p class="font-weight-medium mt-2 mb-1">{{ item.noreg }}</p>
+                    <p class="mb-2">
+                        <v-chip class="ma-1" size="small" label>
+                            {{ item.orderdate }}
+                        </v-chip>
+                    </p>
+                  </td>
+                  <td class="text-left">
+                    <p>{{ item.name }}</p>
+                  </td>
+                  <td class="text-left">
+                    <p>{{ item.test }}</p>
+                    <p>{{ item.doctorname }}</p>
+                  </td>
+                  <td class="text-center">
+                    <div class="d-flex justify-center">
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-primary"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:edit-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            class="pointer"
+                            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
+                            class="pointer"
+                            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>
+                  <td class="text-center">
+                    <div class="d-flex justify-center">
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-grey"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:arrow-hook-up-left-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-green"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:checkmark-starburst-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-container>
+        </v-col>
+      </v-row>
+    </div>
+  </template>
+  
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
+
+  <script type="module">
+    export default {
+      name: "LeftComponent",
+      components: {},
+      mounted() {},
+      data() {
+        return {
+          menu: false,
+          visible: false,
+          headers: [
+            {
+              title: this.$t('message.left.table.noreg'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "15%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.name'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.test'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.requirement'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.action'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "10%",
+              class: "font-weight-bold",
+            }
+          ],
+        };
+      },
+      computed: {
+        // Akses state dari store
+        xpatients() {
+            return this.$store.state.patient.patients
+        },
+        selected_patient: {
+            get() {
+                return this.$store.state.patient.selected_patient
+            },
+            set(val) {
+                this.$store.commit("patient/setSelectedPatient", val)
+            }
+        }
+      },
+      methods: {
+        // Dispatch action ke store
+        formatDate() {
+          if (!this.date) return null;
+  
+          return moment(this.date).format("DD-MM-YYYY");
+        },
+        deFormatedDate(date) {
+          if (!date) return null;
+  
+          const [day, month, year] = date.split("-");
+          return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        },
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

image-verification/components/main.vue

@@ -0,0 +1,68 @@
+<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="8" sm="12" xs="12">
+              <one-left></one-left>
+            </v-col>
+            <v-col cols="12" md="4" sm="12" xs="12">
+              <one-right></one-right>
+            </v-col>
+          </v-row>
+        </div>
+      </v-main>
+    </v-app>
+  </template>
+  
+  <script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import LeftComponent from "./left.vue";
+    import RightComponent from "./right.vue";
+    export default {
+      name: "Specimen",
+      components: {
+        "one-navbar": NavbarComponent,
+        "one-left": LeftComponent,
+        "one-right": RightComponent,
+      },
+      mounted() {},
+      data() {
+        return {
+          visible: false,
+        };
+      },
+      computed: {
+        // Akses state dari store
+        count() {
+          return this.$store.state.login.count;
+        },
+        email: {
+          get() {
+            return this.$store.state.login.email;
+          },
+          set(val) {
+            this.$store.commit("login/setEmail", val);
+          },
+        },
+        password: {
+          get() {
+            return this.$store.state.login.password;
+          },
+          set(val) {
+            this.$store.commit("login/setPassword", val);
+          },
+        },
+      },
+      methods: {
+        // Dispatch action ke store
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

image-verification/components/right.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+      <v-row>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="5">
+                    <v-text-field
+                        :label="$t('message.right.noreg')"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                        ></v-text-field
+                    >
+                </v-col>
+                <v-col cols="5">
+                        <v-autocomplete
+                        :label="$t('message.right.station')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                        ></v-autocomplete>
+                </v-col>
+                <v-col cols="2">
+                    <v-btn 
+                        variant="flat"
+                        small
+                        style="height: 100%;"
+                        class="bg-primary rounded-lg">
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:send-24-regular"
+                        ></iconify-icon>
+                    </v-btn>
+                </v-col>
+            </v-row>
+          </v-container>
+        </v-col>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-data-table
+                v-model="selectedItems"
+                :items="xpatientright"
+                :headers="headers"
+                return-object
+                hide-default-footer
+            >
+              <template
+                v-slot:item="{ item, isSelected, toggleSelect, internalItem }"
+              >
+                <tr>
+                    <td class="px-2">
+                        <v-checkbox-btn
+                        :model-value="isSelected(internalItem)"
+                        color="primary"
+                        @update:model-value="toggleSelect(internalItem)"
+                        ></v-checkbox-btn>
+                    </td>
+                  <td class="text-center">
+                    <p class="font-weight-medium mt-2 mb-1">{{ item.noreg }}</p>
+                    <p class="mb-2">
+                        <v-chip class="ma-1" size="small" label>
+                            {{ item.orderdate }}
+                        </v-chip>
+                    </p>
+                  </td>
+                  <td class="text-center">
+                    <p>{{ item.name }}</p>
+                  </td>
+                  <td class="text-center">
+                    <p>{{ item.test }}</p>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-container>
+        </v-col>
+      </v-row>
+    </div>
+  </template>
+  
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
+
+  <script type="module">
+    export default {
+      name: "RightComponent",
+      components: {},
+      mounted() {},
+      data() {
+        return {
+          menu: false,
+          visible: false,
+          selectedItems: [],
+          headers: [
+            {
+              title: "",
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "15%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.noreg'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.name'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "30%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.test'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "30%",
+              class: "font-weight-bold",
+            }
+          ],
+        };
+      },
+      computed: {
+        // Akses state dari store
+        xpatientright() {
+            return this.$store.state.patient.patientright
+        },
+        selected_patientright: {
+            get() {
+                return this.$store.state.patient.selected_patientright
+            },
+            set(val) {
+                this.$store.commit("patient/setSelectedPatientRight", val)
+            }
+        }
+      },
+      methods: {
+        // Dispatch action ke store
+        formatDate() {
+          if (!this.date) return null;
+  
+          return moment(this.date).format("DD-MM-YYYY");
+        },
+        deFormatedDate(date) {
+          if (!date) return null;
+  
+          const [day, month, year] = date.split("-");
+          return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        },
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

image-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 patient from "./modules/patient.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          patient: patient,
+        },
+      });
+      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/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>

image-verification/language.js

@@ -0,0 +1,50 @@
+var CustomMessages = {
+    en: {
+        message: {
+            left: {
+                noreg: "No. Reg/Name",
+                station: "Station",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAME",
+                    test: "TEST",
+                    requirement: "REQUIREMENT",
+                    action: "ACTION"
+                }
+            },
+            right: {
+                noreg: "No. Reg/Name",
+                station: "Station",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAME",
+                    test: "TEST"
+                }
+            }
+        },
+    },
+    id: {
+        message: {
+            left: {
+                noreg: "No. Reg/Nama",
+                station: "Stasiun",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAMA",
+                    test: "PEMERIKSAAN",
+                    requirement: "PERSYARATAN",
+                    action: "ACTION"
+                }
+            },
+            right: {
+                noreg: "No. Reg/Nama",
+                station: "Stasiun",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAMA",
+                    test: "PEMERIKSAAN"
+                }
+            }
+        },
+    },
+};

image-verification/modules/patient.js

@@ -0,0 +1,62 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02",
+                    test: "USG UPP & LOW ABDOMEN",
+                    doctorname: "-"
+                },
+                {
+                    id: 2,
+                    name: "Tn. YACOBA",
+                    noreg: "055000036LA",
+                    orderdate: "01-08-2024 15:10",
+                    test: "USG UPP & LOW ABDOMEN",
+                    doctorname: "A. A. AYU KUSUMAYANTI, dr."
+                }
+            ],
+            selected_patient: {},
+            patientright: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02",
+                    test: "USG UPP & LOW ABDOMEN",
+                    doctorname: "-",
+                    flag: true
+                },
+            ],
+            selected_patientright: {},
+
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setPatientRight(state, data)  {
+            state.patientright = data
+        },
+        setSelectedPatientRight(state, data) {
+            state.selected_patientright = data
+        },
+    },
+    actions: {
+
+    }
+};
+export default store

list-patient/components/barcodeDialog.vue

@@ -0,0 +1,166 @@
+<template>
+  <v-dialog v-model="menuBarcode" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.barcode.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text class="pt-5">
+        <v-data-table
+          :headers="headers"
+          :items="printItem"
+          hide-default-footer
+          height="200"
+        >
+          <template v-slot:headers="{ columns }">
+            <tr>
+              <template v-for="column in columns" :key="column.key">
+                <td
+                  :class="[
+                    'bg-primary-lighten',
+                    column.class,
+                    { 'd-flex justify-center': column.key === 'checkbox' },
+                  ]"
+                  :style="{ minWidth: column.width, textAlign: column.align }"
+                >
+                  <template v-if="column.key === 'checkbox'">
+                    <v-checkbox
+                      v-model="allSelected"
+                      color="primary"
+                      :indeterminate="someSelected"
+                      @update:modelValue="selectAll(!allSelected)"
+                    ></v-checkbox>
+                  </template>
+                  <template v-else>
+                    <span>{{ column.title }}</span>
+                  </template>
+                </td>
+              </template>
+            </tr>
+          </template>
+          <template v-slot:item="{ item }">
+            <tr>
+              <td class="d-flex justify-center">
+                <v-checkbox
+                  v-model="selected"
+                  color="primary"
+                  :value="item"
+                  @update:modelValue="onSomeSelected()"
+                ></v-checkbox>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.specimen }}</p>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.barcode }}</p>
+              </td>
+              <td>
+                <p class="w-100 d-flex justify-center cursor-pointer">
+                  <iconify-icon
+                    style="font-size: 1.5rem; color: #00bcd4"
+                    icon="fluent:print-48-regular"
+                  ></iconify-icon>
+                </p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-card-text>
+
+      <v-card-actions class="d-flex justify-space-between px-7">
+        <v-btn
+          :text="$t('message.barcode.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuBarcode()"
+        ></v-btn>
+        <div>
+          <v-btn
+            :text="$t('message.barcode.printRobo')"
+            variant="flat"
+            class="bg-info text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.barcode.printSelected')"
+            variant="flat"
+            class="bg-secondary-darken text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "BarcodeDialog",
+  data() {
+    return {
+      selected: [],
+      allSelected: false,
+      someSelected: false,
+      headers: [
+        {
+          title: "",
+          key: "checkbox",
+          align: "center",
+          sortable: false,
+          width: "10%",
+          class: "",
+        },
+        {
+          title: this.$t("message.barcode.specimen"),
+          key: "specimen",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.barcode"),
+          key: "barcode",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.action"),
+          key: "action",
+          align: "center",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+      ],
+    };
+  },
+  computed: {
+    menuBarcode() {
+      return this.$store.state.collection.menuBarcode;
+    },
+    printItem() {
+      return this.$store.state.collection.printItem;
+    },
+  },
+  methods: {
+    onCloseMenuBarcode() {
+      this.$store.commit("setMenuBarcode", false);
+    },
+    selectAll(boolean) {
+      if (!boolean) this.selected = this.printItem;
+      else this.selected = [];
+    },
+    onSomeSelected() {
+      this.someSelected =
+        this.selected.length !== 0 &&
+        this.selected.length !== this.printItem.length;
+      if (this.selected.length === this.printItem.length)
+        this.allSelected = true;
+    },
+  },
+};
+</script>

list-patient/components/changeBirthdayDialog.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="menuChangeBirthday" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.changeBirthday.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text
+        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
+      >
+        <v-menu
+          v-model="menuBirthday"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          min-width="330px"
+          max-width="290px"
+        >
+          <template v-slot:activator="{ props }">
+            <v-text-field
+              :model-value="formatBirthday()"
+              :label="$t('message.changeBirthday.datePicker')"
+              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="birthday"
+            @update:modelValue="menuBirthday = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-card-text>
+
+      <v-card-actions class="px-7">
+        <v-btn
+          :text="$t('message.changeBirthday.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuChangeBirthday()"
+        ></v-btn>
+        <v-btn
+          :text="$t('message.changeBirthday.save')"
+          variant="text"
+          class="text-primary"
+          @click="onSaveChangeBirthday()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "ChangeBirthdayDialog",
+  data() {
+    return {
+      menuBirthday: false,
+    };
+  },
+  computed: {
+    menuChangeBirthday() {
+      return this.$store.state.collection.menuChangeBirthday;
+    },
+    birthday: {
+      get() {
+        return this.$store.state.collection.birthday;
+      },
+      set(val) {
+        this.$store.commit("setBirthday", val);
+      },
+    },
+  },
+  methods: {
+    onCloseMenuChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+    formatBirthday() {
+      if (!this.birthday) return null;
+
+      return moment(this.birthday).format("DD-MM-YYYY");
+    },
+    onSaveChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+  },
+};
+</script>

list-patient/components/filter.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row>
+        <v-col cols="2.2">
+          <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="formatStartDate()"
+                  :label="$t('message.filter.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="startDate"
+                @update:modelValue="menuStartDate = false"
+              ></v-date-picker>
+            </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.2">
+          <div class="d-flex align-center ga-2">
+            <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="formatEndDate()"
+                  :label="$t('message.filter.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="endDate"
+                @update:modelValue="menuEndDate = false"
+              ></v-date-picker>
+            </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.2">
+          <v-text-field
+            :label="$t('message.filter.noRegOrName')"
+            append-inner-icon="mdi-magnify"
+            hide-details
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2.2">
+          <v-autocomplete
+            :label="$t('message.filter.doctor')"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="doctor_dropdown"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="2.2">
+          <v-autocomplete
+            :label="$t('message.filter.customerComplaint')"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="cust_complaint_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 type="module">
+export default {
+  name: "Filter",
+  data() {
+    return {
+      menuStartDate: false,
+      menuEndDate: false,
+    };
+  },
+  computed: {
+    startDate: {
+      get() {
+        return this.$store.state.collection.startDate;
+      },
+      set(val) {
+        this.$store.commit("setStartDate", val);
+      },
+    },
+    endDate: {
+      get() {
+        return this.$store.state.collection.endDate;
+      },
+      set(val) {
+        this.$store.commit("setEndDate", val);
+      },
+    },
+    doctor_dropdown: {
+      get() {
+        return this.$store.state.collection.doctor_dropdown;
+      },
+    },
+    cust_complaint_dropdown: {
+      get() {
+        return this.$store.state.collection.cust_complaint_dropdown;
+      },
+    },
+  },
+  methods: {
+    formatStartDate() {
+      if (!this.startDate) return null;
+
+      return moment(this.startDate).format("DD-MM-YYYY");
+    },
+    formatEndDate() {
+      if (!this.endDate) return null;
+
+      return moment(this.endDate).format("DD-MM-YYYY");
+    },
+  },
+};
+</script>

list-patient/components/infoDialog.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-dialog v-model="menuSelectedPatient" max-width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3">
+        <v-card-title>
+          {{ $t("message.infoDialog.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text
+        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
+      >
+        <p>{{ selectedPatient.noReg1 }}</p>
+        <p>/</p>
+        <p v-if="selectedPatient.noReg2" class="text-error">
+          {{ selectedPatient.noReg2 }}
+        </p>
+      </v-card-text>
+      <v-card-actions class="d-flex justify-space-between px-7">
+        <div>
+          <v-btn
+            v-if="selectedPatient.process"
+            :text="$t('message.infoDialog.material')"
+            variant="flat"
+            class="bg-primary text-white"
+            @click="onMenuMaterial()"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.infoDialog.barcode')"
+            variant="flat"
+            class="bg-info text-white"
+            @click="onMenuBarcode(selectedPatient.noReg2)"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.infoDialog.changeBirthday')"
+            variant="flat"
+            class="bg-secondary-darken text-white"
+            @click="onMenuChangeBirthday(selectedPatient.birthday)"
+          ></v-btn>
+        </div>
+        <v-btn
+          :text="$t('message.infoDialog.close')"
+          variant="text"
+          class="text-error"
+          @click="onDiselectPatient()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "InfoDialog",
+  computed: {
+    menuSelectedPatient() {
+      return this.$store.state.collection.menuSelectedPatient;
+    },
+    selectedPatient() {
+      return this.$store.state.collection.selectedPatient;
+    },
+    menuMaterial() {
+      return this.$store.state.collection.menuMaterial;
+    },
+    menuBarcode() {
+      return this.$store.state.collection.menuBarcode;
+    },
+    menuChangeBirthday() {
+      return this.$store.state.collection.menuChangeBirthday;
+    },
+  },
+  methods: {
+    onDiselectPatient() {
+      this.$store.commit("setMenuSelectedPatient", false);
+      setTimeout(() => this.$store.commit("setSelectedPatient", {}), 1000);
+    },
+    onMenuChangeBirthday(birthday) {
+      this.$store.commit("setMenuChangeBirthday", true);
+      const time = birthday.split("-");
+      this.$store.commit(
+        "setBirthday",
+        new Date(Date.parse(`${time[1]}/${time[0]}/${time[2]}`))
+      );
+    },
+    onMenuBarcode(noReg) {
+      this.$store.commit("setMenuBarcode", true);
+      this.$store.commit("setPrintItem", [
+        {
+          specimen: this.$t("message.barcode.form"),
+          barcode: noReg,
+        },
+        {
+          specimen: this.$t("message.barcode.label"),
+          barcode: noReg,
+        },
+      ]);
+    },
+    onMenuMaterial() {
+      this.$store.commit("setMenuMaterial", true);
+    },
+  },
+};
+</script>

list-patient/components/lists.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <div
+        class="bg-secondary-lighten rounded-lg d-flex justify-space-between pa-5 mb-5"
+      >
+        <h3 class="primary-lighten">
+          {{ $t("message.tableListPatient.title") }}
+        </h3>
+        <h3 class="primary-lighten">{{ patients.length }}</h3>
+      </div>
+      <v-data-table
+        v-model:page="page"
+        height="275px"
+        :items="patients"
+        :headers="headers"
+        :items-per-page="itemsPerPage"
+        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>
+            <td>
+              <v-btn
+                icon="mdi-pencil"
+                variant="flat"
+                :class="[
+                  'rounded-0 w-100 h-100 pa-2 text-white',
+                  { 'bg-info': item.process },
+                  { 'bg-secondary': !item.process },
+                ]"
+                @click="onSelectPatient(item)"
+              ></v-btn>
+            </td>
+            <td>
+              <p class="font-weight-medium">{{ item.no }}</p>
+            </td>
+            <td>
+              <div>
+                <p class="font-weight-medium mt-2">{{ item.noReg1 }}</p>
+                <p
+                  v-if="item.noReg2"
+                  class="font-weight-medium text-error mb-2"
+                >
+                  {{ item.noReg2 }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p class="mt-2 mb-2" style="font-size: 12px">{{ item.name }}</p>
+                <p class="mb-2">
+                  <v-chip label size="small">
+                    {{ item.staff }}
+                  </v-chip>
+                </p>
+                <p class="mb-2">
+                  <v-chip label size="small">
+                    {{ item.orderTime }}
+                  </v-chip>
+                </p>
+              </div>
+            </td>
+            <td>
+              <p style="font-size: 12px">{{ item.agreement }}</p>
+            </td>
+            <td>
+              <div>
+                <p class="mt-2" style="font-size: 12px">{{ item.doctor.no }}</p>
+                <p class="mb-2" style="font-size: 12px">
+                  {{ item.doctor.name }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p
+                  v-for="result in item.result"
+                  :key="result"
+                  style="font-size: 12px"
+                >
+                  {{ result }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p
+                  v-for="inspection in item.inspection"
+                  :key="inspection"
+                  style="font-size: 12px"
+                >
+                  {{ inspection }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p v-for="delivery in item.delivery">
+                  <v-chip variant="flat" color="primary" class="rounded">{{
+                    delivery
+                  }}</v-chip>
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p class="font-weight-medium">{{ item.total.all }}</p>
+                <p v-if="item.total.disc" class="font-weight-medium text-error">
+                  {{ item.total.disc }}
+                </p>
+              </div>
+            </td>
+          </tr>
+        </template>
+
+        <template v-slot:bottom>
+          <div class="text-center pt-2">
+            <v-pagination v-model="page" :length="pageCount"></v-pagination>
+          </div>
+        </template>
+      </v-data-table>
+    </v-container>
+  </div>
+
+  <info-dialog></info-dialog>
+  <change-birthday-dialog></change-birthday-dialog>
+  <barcode-dialog></barcode-dialog>
+  <material-dialog></material-dialog>
+</template>
+
+<script>
+import InfoDialogComponent from "./infoDialog.vue";
+import ChangeBirthdayDialogComponent from "./changeBirthdayDialog.vue";
+import BarcodeDialogComponent from "./barcodeDialog.vue";
+import MaterialDialogComponent from "./materialDialog.vue";
+
+export default {
+  name: "MainLists",
+  components: {
+    "info-dialog": InfoDialogComponent,
+    "change-birthday-dialog": ChangeBirthdayDialogComponent,
+    "barcode-dialog": BarcodeDialogComponent,
+    "material-dialog": MaterialDialogComponent,
+  },
+  mounted() {},
+  data() {
+    return {
+      page: 1,
+      itemsPerPage: 3,
+      headers: [
+        {
+          title: "",
+          align: "start",
+          sortable: false,
+          key: "actionButton",
+          width: "4%",
+          class: "",
+        },
+        {
+          title: this.$t("message.tableListPatient.no"),
+          align: "center",
+          sortable: false,
+          key: "no",
+          width: "4%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.noreg"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.name"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.agreement"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "14%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.doctor"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.result"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "14%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.inspection"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.delivery"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.total"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "4%",
+          class: "font-weight-bold",
+        },
+      ],
+    };
+  },
+  computed: {
+    patients() {
+      return this.$store.state.collection.patients;
+    },
+    pageCount() {
+      return Math.ceil(this.patients.length / this.itemsPerPage);
+    },
+  },
+  methods: {
+    onSelectPatient(patient) {
+      this.$store.commit("setMenuSelectedPatient", true);
+      this.$store.commit("setSelectedPatient", patient);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row-pointer >>> tbody tr :hover {
+  cursor: pointer;
+}
+</style>

list-patient/components/main.vue

@@ -0,0 +1,40 @@
+<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-row>
+        <v-row>
+          <v-col cols="12" md="12" sm="12" xs="12">
+            <list-component></list-component>
+          </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 ListComponent from "./lists.vue";
+
+export default {
+  name: "ListPatient",
+  components: {
+    "one-navbar": NavbarComponent,
+    "filter-component": FilterComponent,
+    "list-component": ListComponent,
+  },
+  mountend() {},
+  data() {
+    return {
+      visible: false,
+    };
+  },
+};
+</script>

list-patient/components/materialDialog.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-dialog v-model="menuMaterial" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3">
+        <v-card-title>
+          {{ $t("message.material.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text class="pt-5">
+        <div>
+          <h3 class="mb-4">{{ $t("message.material.materialYet") }}</h3>
+          <v-chip variant="flat" color="error" class="rounded">{{
+            $t("message.material.blood")
+          }}</v-chip>
+        </div>
+      </v-card-text>
+
+      <v-card-actions class="px-7">
+        <v-btn
+          :text="$t('message.material.correct')"
+          variant="text"
+          class="text-primary"
+          @click="onCorrectMenuMaterial()"
+        ></v-btn>
+        <v-btn
+          :text="$t('message.material.cancel')"
+          variant="text"
+          class="text-error"
+          @click="onCancelMenuMaterial()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "MaterialDialog",
+  computed: {
+    menuMaterial() {
+      return this.$store.state.collection.menuMaterial;
+    },
+  },
+  methods: {
+    onCancelMenuMaterial() {
+      this.$store.commit("setMenuMaterial", false);
+    },
+    onCorrectMenuMaterial() {
+      this.$store.commit("setMenuMaterial", false);
+    },
+  },
+};
+</script>

list-patient/index.html

@@ -0,0 +1,120 @@
+<!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 -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.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";
+
+      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,
+          collection: collection,
+        },
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {
+            visible: false,
+            bg_src: "",
+            loading: false, // Initialize loading state
+          };
+        },
+
+        template: `
+            <main-component></main-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-component": "./components/main.vue",
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>

list-patient/language.js

@@ -0,0 +1,110 @@
+var CustomMessages = {
+  en: {
+    message: {
+      barcode: {
+        action: "ACTION",
+        barcode: "BARCODE",
+        close: "Close",
+        form: "Form",
+        label: "Special Labels",
+        printRobo: "Robo Print",
+        printSelected: "Selected Print",
+        specimen: "SPECIMEN",
+        title: "Barcode Print",
+      },
+      changeBirthday: {
+        close: "Close",
+        datePicker: "Birthday",
+        save: "Save",
+        title: "Change Birthday",
+      },
+      filter: {
+        customerComplaint: "Cust. Complaint",
+        doctor: "Doctor",
+        endDate: "End Date",
+        noRegOrName: "Registration No./Name",
+        startDate: "Start Date",
+      },
+      infoDialog: {
+        barcode: "Barcode",
+        changeBirthday: "Change Birthday",
+        close: "Close",
+        material: "Materials arrived",
+        title: "INFORMATION",
+      },
+      material: {
+        blood: "BLOOD",
+        cancel: "Cancel",
+        correct: "Correct",
+        materialYet: "MATERIAL YET:",
+        title: "WARNING",
+      },
+      tableListPatient: {
+        agreement: "AGREEMENT",
+        delivery: "DELIVERY",
+        doctor: "DOCTOR",
+        inspection: "INSPECTION",
+        name: "NAME",
+        no: "NO.",
+        noreg: "REGISTRATION NO",
+        result: "SCHEDULE",
+        title: "LIST PATIENT",
+        total: "TOTAL",
+      },
+    },
+  },
+  id: {
+    message: {
+      barcode: {
+        action: "AKSI",
+        barcode: "BARCODE",
+        close: "Tutup",
+        form: "Formulir",
+        label: "Label Khusus",
+        printRobo: "Cetak Robo",
+        printSelected: "Cetak Terpilih",
+        specimen: "SPECIMEN",
+        title: "Cetak Barcode",
+      },
+      changeBirthday: {
+        close: "Tutup",
+        datePicker: "Tanggal Lahir",
+        save: "Simpan",
+        title: "Revisi Tanggal Lahir",
+      },
+      filter: {
+        customerComplaint: "Kel. Pelanggan",
+        doctor: "Dokter",
+        endDate: "Tanggal Akhir",
+        noRegOrName: "No Reg/Nama",
+        startDate: "Tanggal Awal",
+      },
+      infoDialog: {
+        barcode: "Barcode",
+        changeBirthday: "Revisi Tanggal Lahir",
+        close: "Tutup",
+        material: "Bahan Datang",
+        title: "INFO",
+      },
+      material: {
+        blood: "DARAH",
+        cancel: "Tidak Jadi",
+        correct: "Benar",
+        materialYet: "BAHAN BELUM:",
+        title: "PERINGATAN",
+      },
+      tableListPatient: {
+        agreement: "AGREEMENT",
+        delivery: "PENGIRIMAN",
+        doctor: "DOKTER",
+        inspection: "PEMERIKSAAN",
+        name: "NAMA",
+        no: "NO.",
+        noreg: "NO REG",
+        result: "JANJI HASIL",
+        title: "LIST PASIEN",
+        total: "TOTAL",
+      },
+    },
+  },
+};

list-patient/modules/collection.js

@@ -0,0 +1,148 @@
+const store = {
+  state() {
+    return {
+      startDate: new Date(),
+      endDate: new Date(),
+      birthday: null,
+      doctor_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+      cust_complaint_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+      selectedPatient: {},
+      menuSelectedPatient: false,
+      menuMaterial: false,
+      menuBarcode: false,
+      menuChangeBirthday: false,
+      patients: [
+        {
+          no: 1,
+          process: false,
+          noReg1: "05600011LA",
+          noReg2: "056M3T65LA",
+          name: "Tn. ARI ANTONI KALBUADI",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "19-08-2024 09:46",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "drg. A. B. DARMADI", no: "3101004815" },
+          result: [
+            "19-08-2024 13:46:39",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: ["Hermatologi Lengkap", "Urine Lengkap", "SGOT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "359.000" },
+        },
+        {
+          no: 2,
+          process: true,
+          noReg1: "05600012LA",
+          noReg2: "056R9G95LA",
+          name: "Tn. HANDOYO",
+          birthday: "07-06-1989",
+          staff: "adminsas",
+          orderTime: "19-08-2024 12:32",
+          agreement: "PASIEN KLINISI - PASIEN UMUM 2021",
+          doctor: { name: "-", no: "3101006048" },
+          result: [
+            "",
+            "19-08-2024 16:32:49",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: [
+            "SGOT",
+            "Glukosa Darah Puasa",
+            "Hermatologi Lengkap",
+            "Home Sevice Zone 1 (sekali kedatangan)",
+          ],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "339.000" },
+        },
+        {
+          no: 3,
+          process: false,
+          noReg1: "05600013LA",
+          noReg2: "056P8M39LA",
+          name: "Tn. COCOBA",
+          birthday: "06-1-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 08:57",
+          agreement: "SASONE - MCU KARYAWAN 2024",
+          doctor: { name: "ASEP TRI HANDOKO, dr.", no: "3104129" },
+          result: [
+            "19-08-2024 13:57:04",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: ["Cholesterol", "SGOT", "Hermatologi Lengkap"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "279.000", disc: "279.000" },
+        },
+        {
+          no: 4,
+          process: false,
+          noReg1: "05600014LA",
+          noReg2: "056U7H2BLA",
+          name: "Tn. HAYASHI SHIDEKI",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 09:25",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "ASEP TRI HANDOKO, dr.", no: "3104129" },
+          result: ["20-08-2024 13:25:44", "21-08-2024 12:00:00"],
+          inspection: ["SGPT", "SGOT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "176.000", disc: "176.000" },
+        },
+        {
+          no: 5,
+          process: false,
+          noReg1: "05600015LA",
+          noReg2: "056U7U56LA",
+          name: "Tn. KUSTIRAONO SUJIMAN",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 11:00",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "dr. A BENY SETIAWAN", no: "3101210939" },
+          result: ["20-08-2024 15:00:30", "22-08-2024 12:00:00"],
+          inspection: ["SGOT", "SGPT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "176.000" },
+        },
+      ],
+      printItem: [],
+    };
+  },
+  mutations: {
+    setStartDate(state, date) {
+      state.startDate = date;
+    },
+    setEndDate(state, date) {
+      state.endDate = date;
+    },
+    setSelectedPatient(state, item) {
+      state.selectedPatient = item;
+    },
+    setMenuSelectedPatient(state, val) {
+      state.menuSelectedPatient = val;
+    },
+    setMenuMaterial(state, val) {
+      state.menuMaterial = val;
+    },
+    setMenuBarcode(state, val) {
+      state.menuBarcode = val;
+    },
+    setMenuChangeBirthday(state, val) {
+      state.menuChangeBirthday = val;
+    },
+    setBirthday(state, birthday) {
+      state.birthday = birthday;
+    },
+    setPrintItem(state, items) {
+      state.printItem = items;
+    },
+  },
+};
+
+export default store;

result-entry/components/detailPatient.vue

@@ -4,52 +4,29 @@
 
             <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="Tanggal Mulai"
-                            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-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="No Reg / Nama / Jenis Kelamin" 
+                        :label="$t('message.tableDetailPatient.navbar.noreg')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
                 </v-col>
                 <v-col cols="2.5">
                     <v-text-field 
-                        label="DOB / Umur" 
+                        :label="$t('message.tableDetailPatient.navbar.dob')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
                 </v-col>
                 <v-col cols="2.5">
                     <v-text-field 
-                        label="Pengirim" 
+                        :label="$t('message.tableDetailPatient.navbar.sender')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
@@ -63,6 +40,15 @@
                 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">
@@ -147,7 +133,7 @@
                         key: 'name',
                         sortable: false,
                         width: "15%",
-                        title: "NAMA PEMERIKSAAN",
+                        title: this.$t('message.tableDetailPatient.header.name'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -155,7 +141,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "20%",
-                        title: "HASIL",
+                        title: this.$t('message.tableDetailPatient.header.result'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -163,7 +149,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "5%",
-                        title: "FLAG",
+                        title: this.$t('message.tableDetailPatient.header.flag'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -171,7 +157,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "10%",
-                        title: "NILAI NORMAL",
+                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -179,7 +165,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "10%",
-                        title: "UNIT",
+                        title: this.$t('message.tableDetailPatient.header.unit'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -187,7 +173,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "20%",
-                        title: "METODE",
+                        title: this.$t('message.tableDetailPatient.header.method'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
@@ -195,7 +181,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "20%",
-                        title: "CATATAN",
+                        title: this.$t('message.tableDetailPatient.header.note'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                 ],

result-entry/components/listPatient.vue

@@ -15,6 +15,16 @@
                     </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>
@@ -54,7 +64,7 @@
                         key: 'name',
                         sortable: false,
                         width: "50%",
-                        title: this.$t('message.table.noreg'),
+                        title: this.$t('message.tableListPatient.noreg'),
                         class: "font-weight-bold",
                     },
                     { 
@@ -62,7 +72,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "50%",
-                        title: this.$t('message.table.name'),
+                        title: this.$t('message.tableListPatient.name'),
                         class: "font-weight-bold",
                     },
                 ],

result-entry/components/searchPatient.vue

@@ -15,7 +15,7 @@
                 <template v-slot:activator="{ props  }">
                   <v-text-field
                     :model-value="formatDate()"
-                    label="Tanggal Mulai"
+                    :label="$t('message.search.startdate')"
                     prepend-inner-icon="mdi-calendar"
                     hide-details
                     readonly
@@ -43,7 +43,7 @@
                 <template v-slot:activator="{ props  }">
                   <v-text-field
                     :model-value="formatDate()"
-                    label="Tanggal Selesai"
+                    :label="$t('message.search.enddate')"
                     prepend-inner-icon="mdi-calendar"
                     hide-details
                     readonly
@@ -64,7 +64,7 @@
           </v-col>
           <v-col cols="2.5">
             <v-text-field 
-              label="No Reg / Nama" 
+              :label="$t('message.search.noreg')"
               variant="outlined"
               hide-details
               append-inner-icon="mdi-magnify"
@@ -72,7 +72,7 @@
           </v-col>
           <v-col cols="2.5">
             <v-autocomplete
-              label="Grup Pemeriksaan"
+              :label="$t('message.search.group')"
               variant="outlined"
               hide-details
               menu-icon="mdi-chevron-down"
@@ -93,40 +93,36 @@
           </v-col>
           <v-col cols="3">
             <div style="height: 100%;">
-              <v-row class="pt-3 justify-end">
+              <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 mr-2">
+                    class="bg-secondary-lighten rounded-lg">
                     <iconify-icon
                         style="font-size: 2rem;"
                         icon="fluent:notepad-person-24-regular"
                     ></iconify-icon>
                 </v-btn>
 
-                <div
-                  class="pt-3 pa-3"
-                >
+                <div>
                     <v-btn
-                        small
                         class="bg-primary-lighten"
                         variant="tonal"
                         color="primary"
+                        size="x-large"
                     >
-                        HISTORY
+                    {{ $t('message.search.history') }}
                     </v-btn>
                 </div>
-                <div
-                  class="pt-3 pa-3"
-                >
+                <div>
                     <v-btn
                         variant="flat"
-                        small
-                        class="bg-primary text-white"
+                        class="bg-primary text-white mr-2"
+                        size="x-large"
                     >
-                        SIMPAN
+                    {{ $t('message.search.save') }}
                     </v-btn>
                 </div>
               </v-row>

result-entry/language.js

@@ -1,20 +1,70 @@
 var CustomMessages = {
     en: {
         message: {
-        toolbalTitle: "PATIENT",
-        table: {
-            noreg: "NO. REG",
-            name: "NAME",
-        },
+            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: {
-        toolbalTitle: "PASIEN",
-        table: {
-            noreg: "NO. REG",
-            name: "NAMA",
-        },
+            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-verification/components/detailPatient.vue

@@ -3,52 +3,29 @@
         <v-container class="bg-white rounded-lg" fluid>
             <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="Tanggal Mulai"
-                            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-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="No Reg / Nama / Jenis Kelamin" 
+                        :label="$t('message.tableDetailPatient.navbar.noreg')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
                 </v-col>
                 <v-col cols="2.5">
                     <v-text-field 
-                        label="DOB / Umur" 
+                        :label="$t('message.tableDetailPatient.navbar.dob')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
                 </v-col>
                 <v-col cols="2.5">
                     <v-text-field 
-                        label="Pengirim" 
+                        :label="$t('message.tableDetailPatient.navbar.sender')"
                         variant="outlined"
                         hide-details
                     ></v-text-field>
@@ -62,7 +39,15 @@
                 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">
@@ -92,7 +77,9 @@
                         <td class="text-left" v-if="item.is_result == 'Y'">
                             <div class="d-flex justify-center">
                                 <div
-                                    class="pointer bg-error-lighten"
+                                    :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
@@ -102,7 +89,8 @@
                                     ></iconify-icon>
                                 </div>
                                 <div
-                                    class="pointer bg-success-lighten ml-2"
+                                    :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
@@ -145,63 +133,63 @@
                         key: 'name',
                         sortable: false,
                         width: "15%",
-                        title: "NAMA PEMERIKSAAN",
+                        title: this.$t('message.tableDetailPatient.header.name'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'result', 
                         sortable: false,
                         width: "10%",
-                        title: "HASIL",
+                        title: this.$t('message.tableDetailPatient.header.result'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'flag', 
                         sortable: false,
                         width: "10%",
-                        title: "FLAG",
+                        title: this.$t('message.tableDetailPatient.header.flag'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'nilai', 
                         sortable: false,
                         width: "10%",
-                        title: "NILAI NORMAL",
+                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'unit', 
                         sortable: false,
                         width: "10%",
-                        title: "UNIT",
+                        title: this.$t('message.tableDetailPatient.header.unit'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'metode', 
                         sortable: false,
                         width: "15%",
-                        title: "METODE",
+                        title: this.$t('message.tableDetailPatient.header.method'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'note', 
                         sortable: false,
                         width: "15%",
-                        title: "CATATAN",
+                        title: this.$t('message.tableDetailPatient.header.note'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                     { 
                         align: 'start',
-                        key: 'name', 
+                        key: 'validasi', 
                         sortable: false,
                         width: "5%",
-                        title: "VALIDASI",
+                        title: this.$t('message.tableDetailPatient.header.verification'),
                         class: "bg-secondary-lighten font-weight-bold",
                     },
                 ],

result-verification/components/listPatient.vue

@@ -15,6 +15,16 @@
                     </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>
@@ -54,7 +64,7 @@
                         key: 'name',
                         sortable: false,
                         width: "50%",
-                        title: this.$t('message.table.noreg'),
+                        title: this.$t('message.tableListPatient.noreg'),
                         class: "font-weight-bold",
                     },
                     { 
@@ -62,7 +72,7 @@
                         key: 'name', 
                         sortable: false,
                         width: "50%",
-                        title: this.$t('message.table.name'),
+                        title: this.$t('message.tableListPatient.name'),
                         class: "font-weight-bold",
                     },
                 ],

result-verification/components/searchPatient.vue

@@ -15,7 +15,7 @@
             <template v-slot:activator="{ props  }">
               <v-text-field
                 :model-value="formatDate()"
-                label="Tanggal Mulai"
+                :label="$t('message.search.startdate')"
                 prepend-inner-icon="mdi-calendar"
                 hide-details
                 readonly
@@ -43,7 +43,7 @@
             <template v-slot:activator="{ props  }">
               <v-text-field
                 :model-value="formatDate()"
-                label="Tanggal Selesai"
+                :label="$t('message.search.enddate')"
                 prepend-inner-icon="mdi-calendar"
                 hide-details
                 readonly
@@ -64,7 +64,7 @@
         </v-col>
         <v-col cols="2.5">
           <v-text-field 
-            label="No Reg / Nama" 
+            :label="$t('message.search.noreg')"
             variant="outlined"
             hide-details
             append-inner-icon="mdi-magnify"
@@ -72,7 +72,7 @@
         </v-col>
         <v-col cols="2.5">
           <v-autocomplete
-            label="Grup Pemeriksaan"
+            :label="$t('message.search.group')"
             variant="outlined"
             hide-details
             menu-icon="mdi-chevron-down"
@@ -94,15 +94,14 @@
         <v-col cols="3">
           <div style="height: 100%;">
             <v-row class="pt-3 justify-end">
-              <div
-                class="pt-3 pa-3"
-              >
+              <div>
                 <v-btn
-                  class="bg-primary-lighten"
+                  class="bg-primary-lighten mr-2"
                   variant="tonal"
                   color="primary"
+                  size="x-large"
                 >
-                HISTORY
+                {{ $t('message.search.history') }}
               </v-btn>
               </div>
             </v-row>

result-verification/language.js

@@ -1,20 +1,70 @@
 var CustomMessages = {
     en: {
         message: {
-        toolbalTitle: "PATIENT",
-        table: {
-            noreg: "NO. REG",
-            name: "NAME",
-        },
+            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: {
-        toolbalTitle: "PASIEN",
-        table: {
-            noreg: "NO. REG",
-            name: "NAMA",
-        },
+            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

@@ -14,7 +14,7 @@
                         <template v-slot:activator="{ props }">
                             <v-text-field
                                 :model-value="formatDate()"
-                                label="Tanggal"
+                                :label="$t('message.filter.date')"
                                 prepend-inner-icon="mdi-calendar"
                                 hide-details
                                 readonly
@@ -34,7 +34,7 @@
                 </v-col>
                 <v-col cols="2.2">
                     <v-text-field
-                        label="No Reg / Nama"
+                        :label="$t('message.filter.noreg')"
                         variant="outlined"
                         hide-details
                         append-inner-icon="mdi-magnify"
@@ -42,29 +42,29 @@
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Kel Pelanggan"
+                        :label="$t('message.filter.group')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Station"
+                        :label="$t('message.filter.station')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Lokasi"
+                        :label="$t('message.filter.location')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="1">
@@ -98,8 +98,18 @@
         },
         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() {
@@ -107,6 +117,11 @@
 
                 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>

specimen-collection/components/left.vue

@@ -2,7 +2,7 @@
     <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>
+                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
             </div>
             <v-data-table
                 v-model="selected_patients"
@@ -11,6 +11,15 @@
                 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>
@@ -49,43 +58,43 @@ export default {
             selectedItems: [],
             headers: [
                 {
-                    title: "TANGGAL",
+                    title: this.$t('message.tablePatient.date'),
                     align: "start",
                     sortable: false,
-                    key: "name",
+                    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: "NO. REG",
+                    title: this.$t('message.tablePatient.group'),
                     align: "start",
                     sortable: false,
-                    key: "name",
-                    width: "20%",
+                    key: "group",
+                    width: "25%",
                     class: "font-weight-bold",
                 },
                 {
-                    title: "KEL. PELANGGAN",
+                    title: this.$t('message.tablePatient.name'),
                     align: "start",
                     sortable: false,
                     key: "name",
-                    width: "20%",
+                    width: "25%",
                     class: "font-weight-bold",
                 },
                 {
-                    title: "NAMA",
+                    title: this.$t('message.tablePatient.status'),
                     align: "start",
                     sortable: false,
-                    key: "name",
-                    width: "20%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: "STATUS",
-                    align: "start",
-                    sortable: false,
-                    key: "name",
-                    width: "20%",
+                    key: "status",
+                    width: "15%",
                     class: "font-weight-bold",
                 },
             ],
@@ -93,20 +102,21 @@ export default {
     },
     computed: {
         patients() {
-            return this.$store.state.collection.patients
+            return this.$store.state.collection.patients;
         },
         selected_patients: {
             get() {
-                return this.$store.state.collection.selected_patients
+                return this.$store.state.collection.selected_patients;
             },
             set(data) {
-                this.$store.commit("setSelectedPatients", data)
+                this.$store.commit("setSelectedPatients", data);
             }
         }
     },
     methods: {
         selectItem(data) {
-            this.$store.commit("setSelectedPatients", data);
+            // this.$store.commit("setSelectedPatients", data);
+            this.selected_patients = data;
         },
         isItemSelected(data) {
             return data.noreg === this.$store.state.collection.selected_patients.noreg

specimen-collection/components/right.vue

@@ -4,7 +4,7 @@
             <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;">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
                             <!-- placeholder photo -->
                         </div>
                     </v-col>
@@ -16,6 +16,7 @@
                         <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"
@@ -26,12 +27,13 @@
                         <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="fluent:speaker-2-24-regular"
-                                icon="fluent:arrow-sync-24-regular"
+                                :icon="setIconCall(selected.status)"
                             ></iconify-icon>
                         </div>
                     </v-col>
@@ -41,18 +43,18 @@
                         <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>
+                        <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">Tanggal Lahir dan Umur</p>
+                        <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;">10-11-1999</p>
+                        <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;">24 Tahun 8 Bulan 21 Hari</p>
+                        <p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</p>
                     </v-col>
                 </v-row>
             </div>
@@ -61,7 +63,7 @@
             <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>
+                        <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
@@ -88,10 +90,19 @@
                 </v-row>
             </div>
             <v-data-table
-                :items="items"
+                :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>
@@ -104,15 +115,17 @@
                             <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-grey"
+                                        :class="{'text-error': item.requirement === 'N'}"
                                         style="font-size: 1.5rem;"
-                                        icon="fluent:dismiss-24-regular"
+                                        icon="fluent:dismiss-12-filled"
+                                        @click="setReq(item, 'N')"
                                     ></iconify-icon>
                                 </div>
                                 <div
@@ -120,37 +133,39 @@
                                     style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
                                 >
                                     <iconify-icon
-                                        class="text-grey"
-                                        style="font-size: 1.5rem;"
-                                        icon="fluent:checkmark-24-regular"
+                                        :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" class="py-1">
-                            <div class="bg-warning rounded-lg pa-1 text-white">
-                                06-08-2024 14:17
-                            </div>
-                            <div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
-                                00-00-0000 00:00
+                        <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 class="mr-5 mt-2" color="primary">DARAH</v-chip>
-                <v-chip class="mr-5 mt-2" color="primary">SWAB/SEKRET</v-chip>
+                <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">PEMERIKSAAN</h3>
+                <h3 class="primary-lighten">{{ $t('message.examination') }}</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>
+                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
             </div>
         </v-container>
     </div>
@@ -167,19 +182,9 @@
             return {
                 menu: false,
                 visible: false,
-                items: [
-                    {
-                        specimen: "EDTA Rutin",
-                        barcode: "055000035LSE1A",
-                    },
-                    {
-                        specimen: "EDTA Rutin",
-                        barcode: "0550000AA223FF",
-                    },
-                ],
                 headers: [
                     {
-                        title: "SPECIMEN",
+                        title: this.$t('message.tableDetail.speciment'),
                         align: "start",
                         sortable: false,
                         key: "name",
@@ -187,7 +192,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "BARCODE",
+                        title: this.$t('message.tableDetail.barcode'),
                         align: "start",
                         sortable: false,
                         key: "name",
@@ -195,7 +200,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "REQUIREMENT",
+                        title: this.$t('message.tableDetail.requirement'),
                         align: "center",
                         sortable: false,
                         key: "name",
@@ -203,7 +208,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "AKSI",
+                        title: this.$t('message.tableDetail.action'),
                         align: "center",
                         sortable: false,
                         key: "name",
@@ -214,12 +219,51 @@
             };
         },
         computed: {
-            selected() {
-                return this.$store.state.collection.selected_patients;
+            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>

specimen-collection/language.js

@@ -1,32 +1,58 @@
 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"
+            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: {
-            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"
+            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

@@ -1,27 +1,41 @@
 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",
-                    status: "call",
+                    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: {
@@ -29,8 +43,34 @@ const store = {
                 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: {
@@ -40,11 +80,12 @@ const store = {
         setSelectedPatients(state, data) {
             state.selected_patients = data
         },
+        setDate(state, date) {
+            state.date = date;
+        }
     },
     actions: {
-        selectPatient({ commit, data }) {
-            commit('setSelectedPatients', data);
-        }
+
     }
 }
 

status-patient/components/content.vue

@@ -0,0 +1,245 @@
+<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>{{ datax.length }}</h3>
+                </v-col>
+            </v-row>
+        </div>
+        <v-data-table
+            :items="datax"
+            :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 align="center" class="pa-2">
+                        <p class="font-weight-medium">{{ item.xno }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p class="font-weight-medium">{{ item.order_date }}</p>
+                        <p class="font-weight-medium rounded-lg bg-grey-lighten-2 px-4" style="display: inline-block;">{{ item.order_promise }}</p>
+                    </td>
+                    <td align="start" class="pa-2">
+                        <v-row>
+                            <v-col cols="5" align="start">
+                                <p class="font-weight-medium">{{ item.no_reg }}</p>
+                            </v-col>
+                            <v-col cols="7" align="end">
+                                <p class="font-weight-bold text-blue">{{ item.no_reg_ext }}</p>
+                            </v-col>
+                        </v-row>
+                        <p class="font-weight-bold">{{ item.patient_name }}</p>
+                        <v-row>
+                            <v-col cols="5" align="start">
+                                <p class="font-weight-medium">{{ item.company_name }}</p>
+                            </v-col>
+                            <v-col cols="7" align="end">
+                                <p class="font-weight-medium text-grey">{{ item.mou_name }}</p>
+                            </v-col>
+                        </v-row>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_order[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'order')"
+                        >{{ item.details_order[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_sampling[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'sample')"
+                        >{{ item.details_sampling[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_process[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'process')"
+                        >{{ item.details_process[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_result_verification[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'verif')"
+                        >{{ item.details_result_verification[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_result_validation[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'valid')"
+                        >{{ item.details_result_validation[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_print[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="print_dialog=true"
+                        >{{ item.details_print[0].group_name }}</p>
+                    </td>
+                </tr>
+            </template>
+        </v-data-table>
+        <v-pagination :length="total_page"></v-pagination>
+        <sp-dialog></sp-dialog>
+        <print-dialog></print-dialog>
+    </v-container>
+</template>
+
+<script>
+    import PrintDialog from './print-dialog.vue';
+    import Sp_dialog from './sp_dialog.vue';
+    export default {
+        name: "contentcomp",
+        components: {
+            "sp-dialog": Sp_dialog,
+            "print-dialog": PrintDialog,
+        },
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                headers : [
+                    {
+                        title: this.$t('message.table.h_no'),
+                        align: "center",
+                        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",
+                    },
+                ]
+            };
+        },
+        computed: {
+            datax: {
+                get() {
+                    return this.$store.state.stored.data;
+                }
+            },
+            total_page: {
+                get() {
+                    return this.$store.state.stored.total_page;
+                }
+            },
+            dialog: {
+                get() {
+                    return this.$store.state.stored.sp_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setDialog", bool);
+                }
+            },
+            multi_dialog: {
+                get() {
+                    return this.$store.state.stored.multi_dialog;
+                },
+                set(bool, nama) {
+                    this.$store.commit("setMultiDialog", bool, nama)
+                }
+            },
+            print_dialog: {
+                get() {
+                    return this.$store.state.stored.print_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setPrintDialog", bool);
+                }
+            }
+        },
+        methods: {
+            openMultiDialog(bool, nama) {
+                this.multi_dialog.open = bool;
+                this.multi_dialog.name = nama;
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

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

@@ -0,0 +1,196 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+                dot-color="white"
+                :fill-dot="true"
+                icon="mdi-check-circle"
+                icon-color="primary"
+                size="small"
+            >
+                <div style="min-width: 600px; max-width: 750px;">
+                    <v-row>
+                        <v-col cols="7" align="start">
+                            <h4 class="font-weight-medium">Order diterima oleh ADMIN</h4>
+                        </v-col>
+                        <v-col cols="5" align="end">
+                            <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                        </v-col>
+                    </v-row>
+                    <v-row no-gutters class="ml-2 mb-4 mt-2">
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Kel. Pelanggan</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Pengirim</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">dr. A. B. WARDOYO, Sp. PD.</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">JL. MH. THAMRIN NO. 1 BINTARO JAYA</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Catatan</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">-</h5>
+                        </v-col>
+                    </v-row>
+                    
+                    <div class="bg-secondary-lighten rounded-lg pa-2 mb-2">
+                        <v-row>
+                            <v-col cols="4">
+                                <h4>Janji Hasil</h4>
+                            </v-col>
+                            <v-col cols="8" align="end">
+                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2 mr-2" style="display: inline-block; font-size: 12px;">21-08-2024 16:53</p>
+                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">21-08-2024 20:53</p>
+                            </v-col>
+                        </v-row>
+                    </div>
+                    <v-data-table
+                        :items="orderdata"
+                        :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 :class="[item.pemeriksaan === 'TOTAL' ? 'bg-primary-lighten' : '']">
+                                <td align="start">
+                                    <p class="font-weight-medium">{{ item.pemeriksaan }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.bruto }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.diskon }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.total }}</p>
+                                </td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                    <v-row no-gutters class="ml-2 mb-4 mt-2">
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat Sendiri</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat Pasien</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">HRC 05/TELKOM MOJOKERTO Sawunggalung, Wonokromo, Surabaya</h5>
+                        </v-col>
+                    </v-row>
+                </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"   
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pembayaran diterima oleh ADMIN</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-secondary-lighten rounded-lg pa-2 mt-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Janji Hasil</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <h4>176.000</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <div class="bg-primary-lighten rounded-lg pa-2 mt-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>TOTAL</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <h4>176.000</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "orderdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                headers: [
+                    {
+                        title: 'PEMERIKSAAN',
+                        align: "start",
+                        sortable: false,
+                        key: "pemeriksaan",
+                        width: "40%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'BRUTO',
+                        align: "center",
+                        sortable: false,
+                        key: "bruto",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'DISKON',
+                        align: "center",
+                        sortable: false,
+                        key: "diskon",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'TOTAL',
+                        align: "center",
+                        sortable: false,
+                        key: "total",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ]
+            };
+        },
+        computed: {
+            orderdata: {
+                get() {
+                    return this.$store.state.stored.data_order;
+                }
+            }
+        },
+    }
+</script>

status-patient/components/print-dialog.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <v-dialog v-model="print_dialog" width="auto">
+            <v-card min-width="600" max-width="750" class="rounded-lg">
+                <v-card-item class="bg-primary mb-4">
+                    <v-card-title>TIMELINE</v-card-title>
+                </v-card-item>
+                <v-card-text>
+                    <div style="min-width: 600px; max-width: 750px;">
+                        <v-row no-gutters class="ml-2 mb-4 mt-2">
+                            <v-col cols="3" align="start">
+                                <h4 class="font-weight-medium">No Lab</h4>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h4 class="font-weight-medium text-grey">05600028LAB</h4>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h4 class="font-weight-medium">Nama Pasien</h4>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h4 class="font-weight-medium text-grey">Ny IMELDA JANICE</h4>
+                            </v-col>
+                        </v-row>
+                        <div class="bg-secondary-lighten rounded-lg pa-2 my-2">
+                            <v-row>
+                                <v-col cols="12">
+                                    <h4>SERAH TERIMA INTERNAL</h4>
+                                </v-col>
+                            </v-row>
+                        </div>
+                        <v-row no-gutters class="ml-2 mb-4 mt-2 pa-2">
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Group</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5>
+                                    <span class="font-weight-medium text-grey">LAB</span>
+                                    <span class="font-weight-medium text-primary"> PICK UP</span>
+                                </h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Janji Hasil</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:13</h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Diserahkan oleh</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:35</h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Diterima oleh</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:53</h5>
+                            </v-col>
+                        </v-row>
+                    </div>
+                </v-card-text>
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto text-primary font-weight-medium"
+                        text="TUTUP"
+                        @click="print_dialog=false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "printdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {
+            print_dialog: {
+                get() {
+                    return this.$store.state.stored.print_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setPrintDialog", bool);
+                }
+            }
+        },
+    }
+</script>

status-patient/components/process-dialog.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="12" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "processdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>

status-patient/components/sample-dialog.vue

@@ -0,0 +1,100 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pembuatan barcode oleh system</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-primary-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Proses oleh admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 20:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-secondary-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pengambilan sample</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "samplecolldialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>

status-patient/components/sp_dialog.vue

@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <v-dialog v-model="multi_dialog.open" width="auto">
+            <v-card min-width="600" max-width="750" class="rounded-lg">
+                <v-card-item class="bg-primary mb-8">
+                    <v-card-title>{{ titleDialog(multi_dialog.name) }}</v-card-title>
+                </v-card-item>
+                <v-card-text>
+                    <v-row class="ga-4 mb-5">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
+                        <div>
+                            <h4 class="font-weight-medium">05600027LA</h4>
+                            <h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
+                        </div>
+                    </v-row>
+                    <div v-if="multi_dialog.name === 'order'">
+                        <status-order-dialog></status-order-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'sample'">
+                        <sampl-collec-dialog></sampl-collec-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'process'">
+                        <process-dialog></process-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'verif'">
+                        <verification-dialog></verification-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'valid'">
+                        <validation-dialog></validation-dialog>
+                    </div>
+                </v-card-text>
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto text-primary font-weight-medium"
+                        text="TUTUP"
+                        @click="multi_dialog.open=false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+    import OrderDialog from './order-dialog.vue';
+    import ProcessDialog from './process-dialog.vue';
+    import SampleDialog from './sample-dialog.vue';
+    import ValidDialog from './valid-dialog.vue';
+    import VerifDialog from './verif-dialog.vue';
+    export default {
+        name: "statuspasiendialog",
+        components: {
+            "status-order-dialog": OrderDialog,
+            "sampl-collec-dialog": SampleDialog,
+            "process-dialog": ProcessDialog,
+            "verification-dialog": VerifDialog,
+            "validation-dialog": ValidDialog,
+        },
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {
+            dialog: {
+                get() {
+                    return this.$store.state.stored.sp_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setDialog", bool);
+                }
+            },
+            multi_dialog: {
+                get() {
+                    return this.$store.state.stored.multi_dialog;
+                },
+                set(bool, nama) {
+                    this.$store.commit("setMultiDialog", bool, nama)
+                }
+            },
+        },
+        methods: {
+            titleDialog(name) {
+                switch (name) {
+                    case 'order':
+                        return "TIMELINE ORDER"
+                    case 'sample':
+                        return "TIMELINE SAMPLING"
+                    case 'process':
+                        return "TIMELINE PROCESS"
+                    case 'verif':
+                        return "TIMELINE VERIFICATION"
+                    case 'valid':
+                        return "TIMELINE VALIDATION"
+                    default:
+                        return "TIMELINE"
+                }
+            }
+        },
+    }
+</script>

status-patient/components/valid-dialog.vue

@@ -0,0 +1,56 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGOT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 17:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGPT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "validationdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>

status-patient/components/verif-dialog.vue

@@ -0,0 +1,56 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGOT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 17:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGPT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "verficationdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</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,207 @@
+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"
+                },
+                {
+                  "xno": 2,
+                  "xid": "132283",
+                  "order_date": "28-08-2024 15:51",
+                  "no_reg": "05600028LA",
+                  "patient_name": "Ny COBA HENY",
+                  "company_name": "PASIEN MANDIRI",
+                  "mou_name": "PRAMITA PROMO PAKET IMLEK 2024",
+                  "status_cito": "N",
+                  "order_promise": "29-08-2024 12:00",
+                  "details_order": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_sampling": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_verifications": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_process": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_result_verification": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_result_validation": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_print": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "no_reg_ext": "056R2H68LA"
+                }
+            ],
+            total_page: 1,
+            sp_dialog: false,
+            print_dialog: false,
+            multi_dialog: {
+              open: false,
+              name: "",
+            },
+            data_order: [
+              {
+                "pemeriksaan": "SGOT",
+                "bruto": 88000,
+                "diskon": 0,
+                "total": 88000,
+              },
+              {
+                "pemeriksaan": "SGPT",
+                "bruto": 88000,
+                "diskon": 0,
+                "total": 88000,
+              },
+              {
+                "pemeriksaan": "TOTAL",
+                "bruto": 176000,
+                "diskon": 0,
+                "total": 176000,
+              },
+            ]
+        }
+    },
+    mutations: {
+        setDate(state, date) {
+            state.date = date;
+        },
+        setDialog(state, bool) {
+          state.sp_dialog = bool;
+        },
+        setPrintDialog(state, bool) {
+          state.print_dialog = bool;
+        },
+        setMultiDialog(state, bool, name) {
+          state.multi_dialog.open = bool;
+          state.multi_dialog.name = name;
+        }
+    },
+    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