feature slicing menu radiodiagnostik dokumentasi hasil

auth-code/api/api.js

@@ -0,0 +1,22 @@
+const URL = "";
+
+export async function callApi(fn_url, params, headers) {
+    try {
+        console.log("API CALL")
+        var url = URL + fn_url
+        var resp = await axios.post(url, params, headers)
+        if (resp != 'OK') {
+            return  {
+                status: 'ERR',
+                message: resp.message
+            }
+        } else {
+            
+        }
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        }
+    }
+}

auth-code/components/authentication.vue

@@ -0,0 +1,32 @@
+<template>
+    <v-app id="inspire">
+        <div class="hidden-md-and-up">
+            <mobile-component></mobile-component>
+        </div>
+        <div class="hidden-md-and-down">
+            <dekstop-component></dekstop-component>
+        </div>
+    </v-app>
+</template>
+
+<script type="module">
+    import dekstop from './dekstop.vue';
+    import mobile from './mobile.vue';
+    export default {
+        name: "authentication",
+        components: {
+            "dekstop-component": dekstop,
+            "mobile-component": mobile,
+        },
+        mounted() {},
+        data() {
+            return {
+                visible: false,
+            };
+        },
+        computed: {},
+        methods: {},
+    }
+</script>
+
+<style scoped></style>

auth-code/components/dekstop.vue

@@ -0,0 +1,100 @@
+<template>
+    <v-app id="inspire">
+        <v-row no-gutters>
+            <v-col lg="8" md="7">
+                <v-img
+                    min-height="100vh"
+                    cover
+                    style="background-repeat: repeat-y;"
+                    class="bg-white"
+                    src="./images/bg-left.jpg"
+                ></v-img>
+            </v-col>
+            <v-col lg="4" md="5">
+                <v-container class="fill-height" fluid>
+                    <v-col align-self="center">
+                        <v-card
+                            class="mx-auto px-5 py-12"
+                            elevation="0"
+                            rounded="lg"
+                            width="75%"
+                        >
+                            <div class="d-flex justify-center mb-16 bg-surface-variant">
+                                <v-img
+                                    class="bg-white"
+                                    height="86px"
+                                    aspect-ratio="16/9"
+                                    src="../globalimages/logo.png"
+                                ></v-img>
+                            </div>
+                            <v-alert
+                                density="compact"
+                                :text="alert.message"
+                                :type="alert.type"
+                                class="mt-4 mb-3 w-100"
+                                variant="tonal"
+                            >
+                            </v-alert>
+                            <v-text-field
+                                :label="$t('message.authtext')"
+                                v-model="password"
+                                :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                                :type="visible ? 'text' : 'password'"
+                                :placeholder="$t('message.authtext')"
+                                variant="outlined"
+                                @click:append-inner="visible = !visible"
+                            ></v-text-field>
+                            <div class="text-center">
+                                <v-btn
+                                    :loading="loading"
+                                    @click="login"
+                                    class="mt-5 text-none"
+                                    color="blue"
+                                    size="large"
+                                    variant="elevated"
+                                    block
+                                >
+                                    SUBMIT
+                                    <template v-slot:loader>
+                                        <v-progress-circular indeterminate></v-progress-circular>
+                                    </template>
+                                </v-btn>
+                            </div>
+                        </v-card>
+                    </v-col>
+                </v-container>
+            </v-col>
+        </v-row>
+    </v-app>
+</template>
+
+<script type="module">
+    export default {
+        name: "dekstop",
+        data() {
+            return {
+                visible: false
+            };
+        },
+        computed: {
+            alert() {
+                return this.$store.state.auth.alert
+            },
+            authcode: {
+                get() {
+                    return this.$store.state.auth.authcode;
+                },
+                set(val) {
+                    this.$store.commit("auth/setAuthcode", val);
+                }
+            }
+        },
+        methods: {
+            submit() {
+                this.$store.dispatch("auth/submit")
+            }
+        },
+    };
+</script>
+
+<style scoped></style>

auth-code/components/mobile.vue

@@ -0,0 +1,87 @@
+<template>
+    <div style="background-image: url(./images/bg-left.jpg); height: 100vh;">
+        <v-container class="fill-height" fluid>
+            <v-col align-self="center">
+                <v-card
+                    class="mx-auto px-5 py-12"
+                    elevation="0"
+                    rounded="lg"
+                    width="90%"
+                >
+                    <div class="d-flex justify-center mb-16 bg-surface-variant">
+                        <v-img
+                            class="bg-white"
+                            height="86px"
+                            aspect-ratio="16/9"
+                            src="../globalimages/logo.png"
+                        ></v-img>
+                    </div>
+                    <v-alert
+                        density="compact"
+                        :text="alert.message"
+                        :type="alert.type"
+                        class="mt-4 mb-3 w-100"
+                        variant="tonal"
+                    >
+                    </v-alert>
+                    <v-text-field
+                        :label="$t('message.authtext')"
+                        v-model="password"
+                        :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                        :type="visible ? 'text' : 'password'"
+                        :placeholder="$t('message.authtext')"
+                        variant="outlined"
+                        @click:append-inner="visible = !visible"
+                    ></v-text-field>
+                    <div class="text-center">
+                        <v-btn
+                            :loading="loading"
+                            @click="login"
+                            class="mt-5 text-none"
+                            color="blue"
+                            size="large"
+                            variant="elevated"
+                            block
+                        >
+                            SUBMIT
+                            <template v-slot:loader>
+                                <v-progress-circular indeterminate></v-progress-circular>
+                            </template>
+                        </v-btn>
+                    </div>
+                </v-card>
+            </v-col>
+        </v-container>
+    </div>
+</template>
+
+<script type="module">
+    export default {
+        name: "mobile",
+        data() {
+            return {
+                visible: false
+            };
+        },
+        computed: {
+            alert() {
+                return this.$store.state.auth.alert
+            },
+            authcode: {
+                get() {
+                    return this.$store.state.auth.authcode;
+                },
+                set(val) {
+                    this.$store.commit("auth/setAuthcode", val);
+                }
+            }
+        },
+        methods: {
+            submit() {
+                
+            }
+        },
+    };
+</script>
+
+<style scoped></style>

auth-code/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Authentication</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 auth from "./modules/auth.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)
+                },
+            };
+
+            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,
+                    auth: auth,
+                },
+            });
+
+            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/authentication.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.log("Error loading components: ", error);
+            });
+        </script>
+    </body>
+</html>

auth-code/language.js

@@ -0,0 +1,14 @@
+var CustomMessages = {
+    en: {
+        message: {
+            authtext: 'Enter the authentication code',
+            msgInfo: 'Contact Administrator to get the authentication code',
+        },
+    },
+    id: {
+        message: {
+            authtext: 'Masukan kode autentifikasi',
+            msgInfo: "Hubungi Administrator untuk mendapatkan kode autentifikasi",
+        },
+    },
+};

auth-code/modules/auth.js

@@ -0,0 +1,55 @@
+import * as api from "../api/api.js"
+
+const Store = {
+    state() {
+        return {
+            alert: {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            },
+            authcode: "",
+            loading: false,
+        }
+    },
+    mutations: {
+        setAuthcode(state, data) {
+            state.authcode = data
+        },
+        setAlert(state, data) {
+            state.alert = data
+        },
+        setLoading(state, data) {
+            state.loading = data
+        }
+    },
+    actions: {
+        async submit({state, commit}) {
+            commit('setLoading', true)
+            try {
+                let fn = "linking"
+                let params = {
+                    AuthCodeCode: state.authcode
+                }
+                let headers = {}
+
+                let resp = await api.callApi(fn, params, headers)
+                if (resp.data.status != 'OK') {
+                    commit('setLoading', false);
+                } else {
+                    commit('setLoading', false);
+                    
+                    localStorage.setItem("token", resp.data.token)
+                    localStorage.setItem("user", JSON.stringify(resp.data.data))
+
+                    window.location.replace("")
+                }
+            } catch (error) {
+                console.log(error);
+                commit('setLoading', false);
+            }
+        }
+    }
+}
+
+export default Store

globalcomponent/one-dialog.vue

@@ -0,0 +1,71 @@
+<!-- SimpleSnackbar.vue -->
+<template>
+  <v-dialog persistent :max-width="width" v-model="localVisible">
+    <v-card>
+      <v-toolbar elevation="4" :title="title" :color="color"></v-toolbar>
+      <v-card-text v-html="message"></v-card-text>
+
+      <v-card-actions class="px-5">
+        <v-spacer></v-spacer>
+
+        <v-btn
+          color="error"
+          size="large"
+          :text="$t('message.close')??'TUTUP'"
+          @click="closeDialog()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      modelValue: {
+        type: Boolean,
+        default: false,
+      },
+      message: {
+        type: String,
+        default: "",
+      },
+      title: {
+        type: String,
+        default: "",
+      },
+      color: {
+        type: String,
+        default: "success",
+      },
+      width: {
+        type: String,
+        default: "500",
+      },
+      onClose: {
+        type: Function,
+        default: () => {},
+      },
+    },
+    computed: {
+      localVisible: {
+        get() {
+          return this.modelValue;
+        },
+        set(value) {
+          if (!value) {
+            // console.log("aksjdhs");
+            this.onClose(); // Panggil hanya saat dialog ditutup
+          }
+          this.$emit("update:modelValue", value);
+        },
+      },
+    },
+    methods: {
+      closeDialog() {
+        // this.onClose;
+        this.localVisible = false;
+      },
+    },
+  };
+</script>

globalcomponent/one-snackbar.vue

@@ -0,0 +1,63 @@
+<!-- SimpleSnackbar.vue -->
+<template>
+  <v-snackbar
+    v-model="localVisible"
+    :multi-line="multiLine"
+    :color="color"
+    :timeout="timeout"
+    :location="location"
+    variant="elevated"
+    z-index="999999999999999999999999999999"
+  >
+    {{ message }}
+    <template v-slot:actions>
+      <v-btn text @click="closeSnackbar">Tutup</v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+  export default {
+    props: {
+      multiLine: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: Boolean,
+        default: false,
+      },
+      message: {
+        type: String,
+        default: "",
+      },
+      color: {
+        type: String,
+        default: "success",
+      },
+      location: {
+        type: String,
+        default: "top",
+      },
+      timeout: {
+        type: Number,
+        default: 3000,
+      },
+    },
+    computed: {
+      localVisible: {
+        get() {
+          return this.modelValue;
+        },
+        set(value) {
+          this.$emit("update:modelValue", value);
+        },
+      },
+    },
+    methods: {
+      closeSnackbar() {
+        this.localVisible = false;
+      },
+    },
+  };
+</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"
         },

globaltranslation/language.js

@@ -0,0 +1,18 @@
+var GlobalTranslation = {
+    en: {
+        message: {
+            close: "Close",
+            save: "Save",
+            saveChange: "Save Change",
+            delete: "Delete",
+        },
+    },
+    id: {
+        message: {
+            close: "Tutup",
+            save: "Simpan",
+            saveChange: "Simpan Perubahan",
+            delete: "Hapus",
+        },
+    },
+};

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;

loginv3/components/dekstop.vue

@@ -10,23 +10,22 @@
           style="background-repeat: repeat-y"
           class="bg-white"
           src="./images/bg-left.jpg"
-          cover
         ></v-img>
       </v-col>
       <v-col lg="4" md="5">
-        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
-          <v-img
-            class="bg-white"
-            height="12px"
-            aspect-ratio="1"
-            src="../globalimages/logo.png"
-          ></v-img>
-        </div>
-        <v-container class="mt-16">
+        <v-container class="fill-height" fluid>
           <v-row no-gutters justify="center">
             <v-col>
               <div class="d-flex justify-center">
                 <v-card class="mx-auto px-12" elevation="0" rounded="lg">
+                  <div class="d-flex justify-center mb-16 bg-surface-variant">
+                      <v-img
+                          class="bg-white"
+                          height="86px"
+                          aspect-ratio="16/9"
+                          src="../globalimages/logo.png"
+                      ></v-img>
+                  </div>
                   <div class="d-flex mb-6">
                     <v-sheet class="">
                       <h2 class="text-h6 font-weight-black">
@@ -55,19 +54,6 @@
                     :placeholder="$t('message.placeholderEmail')"
                     variant="outlined"
                   ></v-text-field>
-                  <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
                   <v-text-field
                     :label="$t('message.password')"
                     v-model="password"
@@ -93,6 +79,16 @@
                         <v-progress-circular indeterminate></v-progress-circular>
                       </template>
                     </v-btn>
+                    <v-btn
+                      class="my-5 text-none"
+                      size="large"
+                      @click="loginGoogle"
+                      variant="outlined"
+                      block
+                    >
+                      <v-img class="mr-2" src="./images/logo_google.svg" width="20px" height="20px"></v-img>
+                      SIGN IN WITH GOOGLE
+                    </v-btn>
                   </div>
                 </v-card>
               </div>
@@ -135,6 +131,9 @@ export default {
       set(val) {
         this.$store.commit("login/setPassword", val);
       },
+      loginGoogle() {
+        this.$store.dispatch("login/loginGoogle")
+      }
     },
   },
   methods: {

loginv3/components/mobile.vue

@@ -1,86 +1,95 @@
 <template>
-  <div style="background-image: url(./images/bg-left.jpg);">
-    <v-container class="h-100 w-100">
-      <v-col align-self="center">
-        <v-card
-          class="mx-auto px-5 py-12"
-          elevation="0"
-          rounded="lg"
-          width="90%"
-        >
-          <div class="d-flex justify-center mb-6 bg-surface-variant">
-            <v-img
-              class="bg-white"
-              height="86px"
-              aspect-ratio="16/9"
-              src="../globalimages/logo.png"
-            ></v-img>
-          </div>
-          <div class="d-flex mb-6">
-            <v-sheet class="">
-              <h2 class="text-h6 font-weight-black">
-                {{ $t("message.title") }}
-              </h2>
-              <p class="text-subtitle-1" style="color: #637381;">
-                {{ $t("message.sublogin") }}
-              </p>
-            </v-sheet>
-          </div>
-          <v-alert
-            density="compact"
-            :text="alert.message"
-            :type="alert.type"
-            class="mt-4 mb-3 w-100"
-            variant="tonal"
+  <div style="background-image: url(./images/bg-left.jpg); height: 100vh;">
+    <v-container class="fill-height" fluid>
+        <v-col align-self="center">
+          <v-card
+            class="mx-auto px-5 py-12"
+            elevation="0"
+            rounded="lg"
+            width="90%"
           >
-          </v-alert>
-          <v-text-field
-            class="mt-3"
-            v-model="email"
-            :label="$t('message.email')"
-            :placeholder="$t('message.placeholderEmail')"
-            variant="outlined"
-          ></v-text-field>
-          <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
-          <v-text-field
-            :label="$t('message.password')"
-            v-model="password"
-            :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
-            :type="visible ? 'text' : 'password'"
-            :placeholder="$t('message.placeholderPassword')"
-            variant="outlined"
-            @click:append-inner="visible = !visible"
-          ></v-text-field>
-          <div class="text-center">
-            <v-btn
-              :loading="loading"
-              @click="login"
-              class="mt-5 text-none"
-              color="blue"
-              size="large"
-              variant="elevated"
-              block
+            <div class="d-flex justify-center mb-6 bg-surface-variant">
+              <v-img
+                class="bg-white"
+                height="86px"
+                aspect-ratio="16/9"
+                src="../globalimages/logo.png"
+              ></v-img>
+            </div>
+            <div class="d-flex mb-6">
+              <v-sheet class="">
+                <h2 class="text-h6 font-weight-black">
+                  {{ $t("message.title") }}
+                </h2>
+                <p class="text-subtitle-1" style="color: #637381;">
+                  {{ $t("message.sublogin") }}
+                </p>
+              </v-sheet>
+            </div>
+            <v-alert
+              density="compact"
+              :text="alert.message"
+              :type="alert.type"
+              class="mt-4 mb-3 w-100"
+              variant="tonal"
             >
-              {{ $t("message.login") }}
-              <template v-slot:loader>
-                <v-progress-circular indeterminate></v-progress-circular>
-              </template>
-            </v-btn>
-          </div>
-        </v-card>
-      </v-col>
+            </v-alert>
+            <v-text-field
+              class="mt-3"
+              v-model="email"
+              :label="$t('message.email')"
+              :placeholder="$t('message.placeholderEmail')"
+              variant="outlined"
+            ></v-text-field>
+            <!-- <div
+                  class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                >
+                  {{ $t("message.password") }}
+                  <a
+                    class="text-caption text-decoration-none text-blue"
+                    href="#"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    {{ $t("message.forgotPassword") }}</a
+                  >
+                </div> -->
+            <v-text-field
+              :label="$t('message.password')"
+              v-model="password"
+              :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+              :type="visible ? 'text' : 'password'"
+              :placeholder="$t('message.placeholderPassword')"
+              variant="outlined"
+              @click:append-inner="visible = !visible"
+            ></v-text-field>
+            <div class="text-center">
+              <v-btn
+                :loading="loading"
+                @click="login"
+                class="mt-5 text-none"
+                color="blue"
+                size="large"
+                variant="elevated"
+                block
+              >
+                {{ $t("message.login") }}
+                <template v-slot:loader>
+                  <v-progress-circular indeterminate></v-progress-circular>
+                </template>
+              </v-btn>
+              <v-btn
+                class="my-5 text-none"
+                size="large"
+                variant="outlined"
+                block
+              >
+                <v-img class="mr-2" src="./images/logo_google.svg" width="20px" height="20px"></v-img>
+                SIGN IN WITH GOOGLE
+              </v-btn>
+            </div>
+          </v-card>
+        </v-col>
     </v-container>
   </div>
 </template>

loginv3/images/logo_google.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>

loginv3/index.html

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

loginv3/modules/login.js

@@ -1,7 +1,7 @@
 
 // const URL = "/westone-api/v1/system/auth";
-
-const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+// const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth";
+const apiURL = "http://localhost:8080/api/v1/auth";
 
 const store = {
     namespaced: true,
@@ -63,12 +63,12 @@ const store = {
                 message: window.i18n.global.t('message.msgInfo')
             }
             let params = {
-                username: state.email,
+                email: state.email,
                 password: state.password
             };
-            console.log(params);
+            
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 console.log(response.data)
                 if (response.data.status != 'OK') {
                     commit('setLoading', false);
@@ -81,13 +81,19 @@ const store = {
                 } else {
                     commit('setLoading', false);
                     commit('setData', response.data.data);
-                    localStorage.setItem("token", response.data.data.token)
-                    localStorage.setItem('user', JSON.stringify(response.data.data.user))
+                    localStorage.setItem("token", response.data.token)
+                    localStorage.setItem('user', JSON.stringify(response.data.data))
                     //console.log(localStorage.getItem("token"))
                     // if (data.user.is_courier === 'Y' && window.innerWidth < 600)
                     //     window.location = "/one-ui/test/vuex/one-courier-mobile/";
                     // else
                     // window.location = "/" + response.data.data.user.M_UserGroupDashboard;
+                    
+                    if (response.data.type === 'westone') {
+
+                    } else {
+                        window.location.href = "/auth-code";
+                    }
 
                 }
                 commit('setAlert', alert)
@@ -97,6 +103,9 @@ const store = {
 
             }
         },
+        async loginGoogle() {
+            window.location.href = apiURL + "/google/login"
+        },
         async loginState({ state, commit }) {
             commit('setLoading', true);
             const params = {
@@ -105,7 +114,7 @@ const store = {
             };
 
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 if (response.status != 'OK') {
                     commit('setLoading', false);
 
@@ -121,7 +130,7 @@ const store = {
         },
         async LoginParam({ commit }, params) {
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 commit('setData', response.data);
             } catch (error) {
                 commit('setError', error);

md-lokasi/components/filter.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-card class="rounded-lg">
+    <v-row class="pa-5">
+      <v-col cols="12">
+        <!-- Baris 1 -->
+        <v-row>
+          <!-- Input Search -->
+
+          <v-col cols="11" class="">
+            <v-text-field
+              v-model="search"
+              :label="$t('message.search.keyword')"
+              variant="outlined"
+              min-width="auto"
+              hide-details
+            >
+            </v-text-field>
+          </v-col>
+
+          <v-col cols="1" class="d-flex justify-space-between">
+            <v-btn
+              variant="flat"
+              width="50px"
+              min-width="50px"
+              size="x-large"
+              class="bg-primary rounded"
+            >
+              <v-icon size="large">mdi-magnify</v-icon>
+            </v-btn>
+            <v-btn
+              @click="openDialogadd()"
+              variant="flat"
+              width="50px"
+              min-width="50px"
+              size="x-large"
+              class="bg-secondary text-white rounded"
+            >
+              <v-icon size="large">mdi-plus</v-icon>
+            </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: {
+      search: {
+        get() {
+          return this.$store.state.lokasi.search;
+        },
+        set(val) {
+          console.log(val);
+          this.$store.commit("lokasi/update_search", val);
+        },
+      },
+      dialogForm: {
+        get() {
+          return this.$store.state.lokasi.dialogForm;
+        },
+        set(val) {
+          console.log(val);
+          this.$store.commit("lokasi/update_dialogForm", val);
+        },
+      },
+      inpLocation: {
+        get() {
+          return this.$store.state.lokasi.inpLocation;
+        },
+        set(val) {
+          console.log(val);
+          this.$store.commit("lokasi/update_inpLocation", val);
+        },
+      },
+      inpPriority: {
+        get() {
+          return this.$store.state.lokasi.inpPriority;
+        },
+        set(val) {
+          console.log(val);
+          this.$store.commit("lokasi/update_inpPriority", val);
+        },
+      },
+      selectedStation: {
+        get() {
+          return this.$store.state.lokasi.selectedStation;
+        },
+        set(val) {
+          console.log(val);
+          this.$store.commit("lokasi/update_selectedStation", val);
+        },
+      },
+    },
+    methods: {
+      openDialogadd() {
+        this.action = "add";
+        this.dialogForm = true;
+        this.inpLocation = "";
+        this.inpPriority = "";
+        this.selectedStation = null;
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

md-lokasi/components/lokasi.vue

@@ -0,0 +1,439 @@
+<template>
+  <div>
+    <v-dialog persistent max-width="500" v-model="dialogDelete">
+      <v-card>
+        <v-toolbar
+          elevation="4"
+          :title="$t('message.deleteTitle')"
+          color="primary"
+        ></v-toolbar>
+        <v-card-text>
+          {{ $t("message.deleteMsg") }}
+          {{ this.selectedLocation.locationName }} ?</v-card-text
+        >
+
+        <v-card-actions class="px-5">
+          <v-spacer></v-spacer>
+
+          <v-btn
+            color="error"
+            size="large"
+            :text="$t('message.form.close')"
+            @click="dialogDelete = false"
+          ></v-btn>
+          <v-btn
+            size="large"
+            color="primary"
+            :text="$t('message.form.deleteBtn')"
+            @click="dialogDelete = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog persistent max-width="500" v-model="dialogForm">
+      <v-card>
+        <v-toolbar
+          elevation="4"
+          :title="action === 'add'? $t('message.form.add'):$t('message.form.edit')"
+          color="primary"
+        ></v-toolbar>
+        <v-card-text>
+          <v-text-field
+            v-model="inpLocation"
+            :label="$t('message.form.lokasi')"
+            variant="outlined"
+          ></v-text-field>
+          <v-autocomplete
+            :label="$t('message.form.station')"
+            :items="stationList"
+            item-title="name"
+            return-object
+            v-model="selectedStation"
+            item-value="name"
+            variant="outlined"
+          ></v-autocomplete>
+          <v-text-field
+            v-model="inpPriority"
+            type="number"
+            :label="$t('message.form.prioritas')"
+            variant="outlined"
+          ></v-text-field>
+        </v-card-text>
+
+        <v-card-actions class="px-5">
+          <v-spacer></v-spacer>
+
+          <v-btn
+            color="error"
+            size="large"
+            :text="$t('message.form.close')"
+            @click="dialogForm = false"
+          ></v-btn>
+
+          <v-btn
+            size="large"
+            color="primary"
+            :text="action === 'add'? $t('message.form.save'): $t('message.form.saveEdit')"
+            @click="saveData()"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-data-table-server
+        :items-per-page-options="itemsPerPageOption"
+        v-model:items-per-page="itemsPerPage"
+        :headers="headers"
+        :items="locationList"
+        height="63vh"
+        :items-length="totalItems"
+        :loading="loading"
+        :search="search"
+        @update:options="coba"
+      >
+        <template v-slot:item="{ item }">
+          <tr
+            @click="selectMe(item)"
+            v-bind:class="{'bg-secondary-lighten':isSelected(item)}"
+          >
+            <td>{{ item.locationName }}</td>
+            <td>{{ item.stationName }}</td>
+            <td>{{ item.priority }}</td>
+            <td class="text-center">
+              <v-btn
+                :disabled="loading"
+                variant="plain"
+                width="40px"
+                @click="openDialogEdit(item)"
+                min-width="40px"
+                color="primary"
+              >
+                <span
+                  class="iconify secondary"
+                  data-icon="fluent:edit-24-regular"
+                  data-inline="false"
+                  style="font-size: 24px;"
+                ></span>
+              </v-btn>
+              <!-- <v-btn
+                color="error"
+                size="large"
+                :text="$t('message.form.close')"
+                @click="openDialogInfo()"
+              ></v-btn> -->
+              <v-btn
+                @click="openDialogDelete(item)"
+                :disabled="loading"
+                variant="plain"
+                width="40px"
+                min-width="40px"
+                color="error"
+              >
+                <span
+                  class="iconify error"
+                  data-icon="fluent:delete-24-regular"
+                  style="font-size: 24px;"
+                ></span>
+              </v-btn>
+            </td>
+          </tr>
+        </template>
+      </v-data-table-server>
+    </v-container>
+  </div>
+</template>
+
+<style scoped>
+  .row-pointer >>> tbody tr :hover {
+    cursor: pointer;
+  }
+</style>
+
+<script type="module">
+  export default {
+    name: "ListPatient",
+    data() {
+      return {
+        cobaHtml: "coba",
+        itemsPerPageOption: [
+          { value: 2, title: "2" },
+          { value: 5, title: "5" },
+          { value: 10, title: "10" },
+          { value: 25, title: "25" },
+          { value: 50, title: "50" },
+        ],
+        headers: [
+          {
+            align: "start",
+            key: "locationName",
+            sortable: true,
+            width: "35%",
+            title: this.$t("message.tableListPatient.lokasi"),
+            class: "font-weight-bold",
+          },
+          {
+            align: "start",
+            key: "stationName",
+            sortable: true,
+            width: "35%",
+            title: this.$t("message.tableListPatient.station"),
+            class: "font-weight-bold",
+          },
+          {
+            align: "start",
+            key: "priority",
+            sortable: true,
+            width: "20%",
+            title: this.$t("message.tableListPatient.prioritas"),
+            class: "font-weight-bold",
+          },
+          {
+            align: "center",
+            key: "name",
+            sortable: false,
+            width: "10%",
+            title: this.$t("message.tableListPatient.aksi"),
+            class: "font-weight-bold",
+          },
+        ],
+      };
+    },
+    mounted() {
+      //   Iconify.scan();
+      this.$store.dispatch("lokasi/search");
+    },
+    computed: {
+      dialogInfo: {
+        get() {
+          return this.$store.state.lokasi.dialogInfo;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_dialogInfo", val);
+        },
+      },
+      snackbar: {
+        get() {
+          return this.$store.state.lokasi.snackbar;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_snackbar", val);
+        },
+      },
+      dialogDelete: {
+        get() {
+          return this.$store.state.lokasi.dialogDelete;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_dialogDelete", val);
+        },
+      },
+      action: {
+        get() {
+          return this.$store.state.lokasi.action;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_action", val);
+        },
+      },
+      stationList: {
+        get() {
+          return this.$store.state.lokasi.stationList;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_stationList", val);
+        },
+      },
+      selectedStation: {
+        get() {
+          return this.$store.state.lokasi.selectedStation;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_selectedStation", val);
+        },
+      },
+      dialogForm: {
+        get() {
+          return this.$store.state.lokasi.dialogForm;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_dialogForm", val);
+        },
+      },
+      sortBy: {
+        get() {
+          return this.$store.state.lokasi.sortBy;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_sortBy", val);
+        },
+      },
+      orderBy: {
+        get() {
+          return this.$store.state.lokasi.orderBy;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_orderBy", val);
+        },
+      },
+      locationListTmp: {
+        get() {
+          return this.$store.state.lokasi.locationListTmp;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_locationListTmp", val);
+        },
+      },
+      locationList: {
+        get() {
+          return this.$store.state.lokasi.locationList;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_locationList", val);
+        },
+      },
+      totalItems: {
+        get() {
+          return this.$store.state.lokasi.totalItems;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_totalItems", val);
+        },
+      },
+      loading: {
+        get() {
+          return this.$store.state.lokasi.loading;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_loading", val);
+        },
+      },
+      search: {
+        get() {
+          return this.$store.state.lokasi.search;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_search", val);
+        },
+      },
+      itemsPerPage: {
+        get() {
+          return this.$store.state.lokasi.itemsPerPage;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_itemsPerPage", val);
+        },
+      },
+      page: {
+        get() {
+          return this.$store.state.lokasi.page;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_page", val);
+        },
+      },
+      xpatients() {
+        return this.$store.state.sendtofo.patients;
+      },
+      selectedLocation: {
+        get() {
+          return this.$store.state.lokasi.selectedLocation;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_selectedLocation", val);
+        },
+      },
+      inpLocation: {
+        get() {
+          return this.$store.state.lokasi.inpLocation;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_inpLocation", val);
+        },
+      },
+      inpPriority: {
+        get() {
+          return this.$store.state.lokasi.inpPriority;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_inpPriority", val);
+        },
+      },
+    },
+    methods: {
+      saveData() {
+        this.dialogForm = false;
+        let snackbar = {
+          model: true,
+          type: "success",
+          message: "coba",
+          multiLine: true,
+          location: "top",
+          timeout: 1500,
+        };
+        this.snackbar = snackbar;
+        let df = {
+          title: "INFORMATION",
+          model: true,
+          color: "primary",
+          message: "information",
+        };
+        this.dialogInfo = df;
+      },
+      openDialogInfo() {
+        let df = {
+          title: "INFORMATION",
+          model: true,
+          color: "primary",
+          message: "information",
+        };
+        this.dialogInfo = df;
+      },
+      openDialogDelete(data) {
+        this.selectMe(data);
+        this.dialogDelete = true;
+        let snackbar = {
+          model: true,
+          type: "success",
+          message: "coba",
+          multiLine: true,
+          location: "top",
+          timeout: 1500,
+        };
+        this.snackbar = snackbar;
+      },
+      openDialogEdit(data) {
+        this.action = "edit";
+        this.dialogForm = true;
+        this.inpLocation = data.locationName;
+        this.inpPriority = data.priority;
+        this.selectedStation = {
+          id: 2,
+          name: data.stationName,
+        };
+      },
+      getIcon(iconName) {
+        return `<span class="iconify" data-icon="${iconName}" data-inline="false"></span>`;
+      },
+      selectMe(item) {
+        if (this.loading == true) return;
+        this.selectedLocation = item;
+      },
+      async coba({ page, itemsPerPage, sortBy, search }) {
+        this.page = page;
+        if (sortBy[0] != undefined) {
+          this.sortBy = sortBy[0]["key"];
+          this.orderBy = sortBy[0]["order"];
+        }
+        this.$store.dispatch("lokasi/search");
+      },
+      isSelected(p) {
+        return p.id == this.$store.state.lokasi.selectedLocation.id;
+      },
+      //   selectMe(data) {
+      //     this.$store.commit("sendtofo/setSelectedPatient", data);
+      //     this.$store.commit("sendtofo/setSelectedDetail", data);
+      //   },
+    },
+    wacth: {},
+  };
+</script>

md-lokasi/components/main.vue

@@ -0,0 +1,88 @@
+<template class="bg-primary-lighten">
+  <v-app id="inspire">
+    <one-snackbar
+      v-model="snackbar.model"
+      :multi-line="snackbar.multiLine"
+      :message="snackbar.message"
+      :timeout="snackbar.timeout"
+      :location="snackbar.location"
+      :color="snackbar.type"
+    ></one-snackbar>
+
+    <one-dialog
+      v-model="dialogInfo.model"
+      :title="dialogInfo.title"
+      :color="dialogInfo.color"
+      :message="dialogInfo.message"
+      :onClose="cobaFunction"
+      :width="'50vw'"
+    ></one-dialog>
+
+    <one-navbar></one-navbar>
+    <v-main class="mt-3 mb-3 mx-2">
+      <div class="pa-4 bg-primary-lighten rounded-xl h-100">
+        <v-row class="">
+          <v-col cols="12"><filter-fo></filter-fo></v-col>
+          <v-col cols="12"> <location-component></location-component></v-col>
+        </v-row>
+      </div>
+    </v-main>
+  </v-app>
+</template>
+
+<script type="module">
+  import FilterFo from "./filter.vue";
+  import LocationComponent from "./lokasi.vue";
+
+  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+  import SnackbarComponent from "../../globalcomponent/one-snackbar.vue";
+  import dialogComponent from "../../globalcomponent/one-dialog.vue";
+
+  export default {
+    name: "component2",
+    components: {
+      "filter-fo": FilterFo,
+      "one-navbar": NavbarComponent,
+      "location-component": LocationComponent,
+      "one-snackbar": SnackbarComponent,
+      "one-dialog": dialogComponent,
+    },
+    mounted() {
+      if (typeof Iconify !== "undefined") {
+        Iconify.scan(); // Render ikon setelah komponen Vue dimuat
+      } else {
+        console.error("Iconify is not loaded.");
+      }
+    },
+    updated() {
+      if (typeof Iconify !== "undefined") {
+        Iconify.scan(); // Render ikon setelah komponen diperbarui
+      }
+    },
+    computed: {
+      dialogInfo: {
+        get() {
+          return this.$store.state.lokasi.dialogInfo;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_dialogInfo", val);
+        },
+      },
+      snackbar: {
+        get() {
+          return this.$store.state.lokasi.snackbar;
+        },
+        set(val) {
+          this.$store.commit("lokasi/update_snackbar", val);
+        },
+      },
+    },
+    methods: {
+      cobaFunction() {
+        console.log("coba function");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

md-lokasi/index.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</title>
+    <!-- <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script> -->
+
+    <!-- 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>
+    <!-- <script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script> -->
+    <!-- Moment -->
+    <script src="../libraries/moment.js"></script>
+    <script src="../libraries/iconify.min.js"></script>
+    <!-- Vue.js -->
+    <!-- DEV -->
+    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
+    <script src="../libraries/vue.dev.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="../globaltranslation/language.js"></script>
+    <script src="./language.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+
+      import system from "../globalstore/globalstore.js";
+
+      import lokasi from "./modules/lokasi.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)
+          );
+        },
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "iconify-icon",
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      console.log(GlobalTranslation);
+      // Locale messages
+
+      let en = {
+        ...CustomMessages.en.message,
+        ...GlobalTranslation.en.message,
+      };
+      let id = {
+        ...CustomMessages.id.message,
+        ...GlobalTranslation.id.message,
+      };
+      const combinedMessages = {
+        en: {
+          message: en,
+        },
+        id: {
+          message: id,
+        },
+      };
+
+      // console.log(cobaaaa.en.message.search.keyword);
+      // console.log(CustomMessages);
+      // console.log(combinedMessages);
+      // console.log(combinedMessages);
+      // let 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: combinedMessages, // Set locale messages
+      });
+      window.i18n = i18n;
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+
+          lokasi: lokasi,
+        },
+      });
+      // 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>

md-lokasi/language.js

@@ -0,0 +1,57 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search: {
+                keyword: 'Location Name/Station Name'
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                lokasi: "LOCATION NAME",
+                station: "STATION NAME",
+                prioritas: "PRIORITY",
+                aksi: "ACTION",
+            },
+            form: {
+                add: "NEW LOCATION",
+                edit: "CHANGE LOCATION",
+                lokasi: "LOCATION NAME",
+                station: "STATION NAME",
+                prioritas: "PRIORITY",
+                save: "SAVE",
+                saveEdit: "SAVE CHANGE",
+                close: "CLOSE",
+                deleteBtn: "Delete",
+            },
+            deleteTitle: "DELETE LOCATION",
+            deleteMsg: "Are you sure you want to delete this location",
+        },
+    },
+    id: {
+        message: {
+            search: {
+                keyword: 'Nama Lokasi/Nama Station'
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+
+                lokasi: "NAMA LOKASI",
+                station: "NAMA STATION",
+                prioritas: "PRIORITAS",
+                aksi: "AKSI",
+            },
+            form: {
+                add: "LOKASI BARU",
+                edit: "UBAH LOKASI",
+                lokasi: "NAMA LOKASI",
+                station: "NAMA STATION",
+                prioritas: "PRIORITAS",
+                save: "SIMPAN",
+                saveEdit: "SIMPAN PERUBAHAN",
+                close: "TUTUP",
+                deleteBtn: "Hapus",
+            },
+            deleteTitle: "HAPUS LOCATION",
+            deleteMsg: "Apakah Anda yakin ingin menghapus lokasi ",
+        },
+    },
+};

md-lokasi/modules/lokasi.js

@@ -0,0 +1,247 @@
+
+// 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 {
+            itemsPerPage: 5,
+            page: 1,
+            sortBy: 'id',
+            orderBy: 'asc',
+            search: '',
+            loading: false,
+            totalItems: 0,
+            action: 'add',
+            stationList: [
+                {
+                    id: 1,
+                    name: 'Station A'
+                },
+                {
+                    id: 2,
+                    name: 'Station B'
+                },
+                {
+                    id: 3,
+                    name: 'Station C'
+                },
+            ],
+            selectedStation: null,
+            inpLocation: '',
+            inpPriority: '',
+            locationList: [],
+            locationListTmp: [
+                {
+                    id: 1,
+                    locationName: "R. 214-BMD",
+                    stationName: "Sample Station BMD",
+                    priority: "1",
+                },
+                {
+                    id: 2,
+                    locationName: "R. 333 Sample 12",
+                    stationName: "Sample Station LAB",
+                    priority: "2",
+                },
+                {
+                    id: 3,
+                    locationName: "R. 103 - Sampling 1",
+                    stationName: "Sample Station LAB",
+                    priority: "1",
+                },
+                {
+                    id: 4,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 5,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 6,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 7,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 8,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 9,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 10,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 11,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+                {
+                    id: 12,
+                    locationName: "R. 103 Sampling 2",
+                    stationName: "Sample Station LAB",
+                    priority: "3",
+                },
+            ],
+            selectedLocation: {},
+            dialogForm: false,
+            dialogDelete: false,
+            snackbar: {
+                model: false,
+                type: "success",
+                message: "coba",
+                "multiLine": false,
+                "location": "top",
+                timeout: 1500
+            },
+            dialogInfo: {
+                title: 'INFORMATION',
+                model: false,
+                color: 'primary',
+                message: "information"
+            },
+
+
+        };
+    },
+    mutations: {
+        update_dialogInfo(state, data) {
+            state.dialogInfo = data
+        },
+        update_snackbar(state, data) {
+            state.snackbar = data
+        },
+        update_dialogDelete(state, data) {
+            state.dialogDelete = data
+        },
+        update_action(state, data) {
+            state.action = data
+        },
+        update_inpLocation(state, data) {
+            state.inpLocation = data
+        },
+        update_inpPriority(state, data) {
+            state.inpPriority = data
+        },
+        update_stationList(state, data) {
+            state.stationList = data
+        },
+        update_selectedStation(state, data) {
+            state.selectedStation = data
+        },
+        update_dialogForm(state, data) {
+            state.dialogForm = data
+        },
+        update_dialogForm(state, data) {
+            state.dialogForm = data
+        },
+        update_sortBy(state, data) {
+            state.sortBy = data
+        },
+        update_page(state, data) {
+            state.page = data
+        },
+        update_orderBy(state, data) {
+            state.orderBy = data
+        },
+        update_locationListTmp(state, data) {
+            state.locationListTmp = data
+        },
+        update_totalItems(state, data) {
+            state.totalItems = data
+        },
+        update_loading(state, data) {
+            state.loading = data
+        },
+        update_search(state, data) {
+            state.search = data
+        },
+        update_itemsPerPage(state, data) {
+            state.itemsPerPage = data
+        },
+        update_locationList(state, data) {
+            state.locationList = data
+        },
+        update_selectedLocation(state, data) {
+            state.selectedLocation = data
+        },
+
+    },
+    actions: {
+        async search(context) {
+            context.commit('update_loading', true)
+            try {
+                let result = context.state.locationListTmp;
+                let sortBy = context.state.sortBy
+                let orderBy = context.state.orderBy
+                let search = context.state.search
+                let page = context.state.page
+                let itemsPerPage = context.state.itemsPerPage
+                context.commit('update_totalItems', result.length)
+
+                // Pencarian
+                result = result.filter(item =>
+                    item.locationName.toLowerCase().includes(search.toLowerCase()) ||
+                    item.stationName.toLowerCase().includes(search.toLowerCase())
+                );
+
+                // Sorting
+                result = result.slice().sort((a, b) => {
+                    if (a[sortBy] < b[sortBy]) return orderBy === 'asc' ? -1 : 1;
+                    if (a[sortBy] > b[sortBy]) return orderBy === 'asc' ? 1 : -1;
+                    return 0;
+                });
+
+                // Pagination
+                const startIndex = (page - 1) * itemsPerPage;
+                result = result.slice(startIndex, startIndex + itemsPerPage);
+                console.log(result)
+                // this.locationList = result;
+
+                context.commit('update_locationList', result)
+                // return result;
+
+            } catch (error) {
+                console.log(error);
+            }
+            setTimeout(() => {
+                // let snackbar = {
+                //     model: false,
+                //     type: "success",
+                //     message: "ini-coba",
+                //     "multi-line": false,
+                //     "location": "top",
+                //     timeout: 1500
+                // }
+                // context.commit('update_snackbar', snackbar)
+
+                context.commit('update_loading', false)
+            }, 100);
+        }
+    }
+};
+
+export default store

patient-handling/components/filter.vue

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

patient-handling/components/left.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <v-container class="pt-0" fluid>
-            <div class="rounded-lg pa-5 mb-5">
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                 <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
             </div>
             <v-data-table
@@ -102,11 +102,11 @@ export default {
     },
     computed: {
         patients() {
-            return this.$store.state.collection.patients;
+            return this.$store.state.patient.patients;
         },
         selected_patients: {
             get() {
-                return this.$store.state.collection.selected_patients;
+                return this.$store.state.patient.selected_patients;
             },
             set(data) {
                 this.$store.commit("setSelectedPatients", data);
@@ -119,7 +119,7 @@ export default {
             this.selected_patients = data;
         },
         isItemSelected(data) {
-            return data.noreg === this.$store.state.collection.selected_patients.noreg
+            return data.noreg === this.$store.state.patient.selected_patients.noreg
         }
     },
 };

patient-handling/components/main.vue

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

patient-handling/components/right.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <v-container class="rounded-lg" fluid>
-            <div class="rounded-lg pa-5">
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-primary-lighten rounded-lg pa-5">
                 <v-row>
                     <v-col cols="2">
                         <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
@@ -90,7 +90,7 @@
                 </v-row>
             </div>
             <v-data-table
-                :items="details.specimen"
+                :items="details.handling"
                 :headers="headers"
                 hide-default-footer
             >
@@ -106,7 +106,7 @@
                 <template v-slot:item="{ item }">
                     <tr>
                         <td>
-                            <p class="font-weight-medium">{{ item.specimen }}</p>
+                            <p class="font-weight-medium">{{ item.handling }}</p>
                         </td>
                         <td>
                             <p class="font-weight-medium">{{ item.barcode }}</p>
@@ -165,7 +165,7 @@
                 <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
             </div>
             <div>
-                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
+                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="primary">{{ x }}</v-chip>
             </div>
         </v-container>
     </div>
@@ -221,7 +221,7 @@
         computed: {
             selected: {
                 get() {
-                    return this.$store.state.collection.selected_patients;
+                    return this.$store.state.patient.selected_patients;
                 },
                 set(data) {
                     this.$store.commit("setSelectedPatients", data);
@@ -229,14 +229,14 @@
             },
             details: {
                 get() {
-                    return this.$store.state.collection.details;
+                    return this.$store.state.patient.details;
                 },
                 set(data) {
                     this.$store.commit("")
                 }
             },
             pemeriksaan() {
-                return this.$store.state.collection.pemeriksaan;
+                return this.$store.state.patient.pemeriksaan;
             }
         },
         methods: {

patient-handling/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-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>

patient-handling/language.js

@@ -0,0 +1,56 @@
+var CustomMessages = {
+    en: {
+        message: {
+            filter: {
+                date: "Date",
+                noreg: "No. Reg / Name",
+                group: "Customer Group",
+                station: "Station",
+            },
+            tablePatient: {
+                title: "PATIENT",
+                date: "DATE",
+                noreg: "NO. REG",
+                group: "CUSTOMER GROUP",
+                name: "NAME",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAFF",
+                speciment: "SPECIMENT",
+                barcode: "BARCODE",
+                requirement: "REQUIREMENT",
+                action: "ACTION"
+            },
+            examination: "EXAMINATION",
+            dobage: "Date of Birth and Age",
+        },
+    },
+    id: {
+        message: {
+            filter: {
+                date: "Tanggal",
+                noreg: "No. Reg / Nama",
+                group: "Kel. Pelanggan",
+                station: "Station",
+            },
+            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",
+        },
+    },
+};

patient-handling/modules/patient.js

@@ -0,0 +1,74 @@
+const store = {
+    state() {
+        return {
+            date: new Date(),
+            temp_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+            patients: [
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000035LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. COCOBA",
+                    age: "23 tahun 11 bulan 10 hari",
+                    dob: "10/10/2000",
+                    pid: "-",
+                    status: "New",
+                    doneCall: "N",
+                },
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000034LA",
+                    kelpelanggan: "PASIEN MANDIRI",
+                    nama: "Tn. YACOBA",
+                    age: "27 tahun 2 bulan 12 hari",
+                    dob: "08/06/1997",
+                    pid: "-",
+                    status: "New",
+                    doneCall: "N",
+                },
+            ],
+            selected_patients: {
+                tanggal: "-",
+                noreg: "-",
+                kelpelanggan: "-",
+                nama: "-",
+                age: "-",
+                dob: "-",
+                pid: "-",
+                status: "-",
+            },
+            details: {
+                staff: "NOVITA",
+                handling: [
+                    {
+                        handling: "EDTA Rutin",
+                        barcode: "055000035LSE1A",
+                        requirement: "",
+                        sDate: new Date(),
+                        eDate: "",
+                    },
+                ],
+                jenis: ["USG"]
+            },
+            pemeriksaan: [
+                "USG Upp  & Low Abdomen",
+            ]
+        };
+    },
+    mutations: {
+        setPatients(state, data) {
+            state.patients = data
+        },
+        setSelectedPatients(state, data) {
+            state.selected_patients = data
+        },
+        setDate(state, date) {
+            state.date = date;
+        }
+    },
+    actions: {
+
+    }
+}
+
+export default store

registration/components/datatable_patient.vue

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

registration/components/detail_order.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">DETAIL ORDER</v-toolbar-title>
+            </v-toolbar>
+            
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "detailordercomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                kelpelanggan: [
+                    { id: 1, name: "sasone 2024" },
+                    { id: 2, name: "sasone 2023" },
+                ],
+                agreement: [
+                    { id: 1, name: "mcu karyawan 2024" },
+                    { id: 2, name: "mcu karyawan 2023" }
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>

registration/components/form_patient.vue

@@ -1,23 +1,15 @@
 <template>
   <div>
-    <v-card class="scroll-container pa-2" style="height: 70vh">
-      <v-toolbar color="amber-lighten-5" density="compact">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium"
-          >DATA PASIEN</v-toolbar-title
-        >
-
-        <v-spacer></v-spacer>
-
-        <v-btn icon>
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
+    <v-card class="scroll-container pa-4 rounded-lg" elevation="0">
+      <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+        <v-toolbar-title class="text-title-1 font-weight-bold">DATA PASIEN</v-toolbar-title>
       </v-toolbar>
-      <v-row no-gutters class="mt-2">
-        <v-col cols="3">
+      <v-row no-gutters class="mt-4">
+        <v-col cols="2">
           <div class="d-flex mb-2">
             <v-img
               :aspect-ratio="1"
-              class="bg-white"
+              class="bg-grey"
               src="https://cdn.vuetifyjs.com/images/lists/4.jpg"
               width="250"
               rounded
@@ -45,80 +37,52 @@
           <div class="d-flex mb-2">
             <v-btn
               color="primary"
-              text="Riwayat Order"
+              text="Riwayat"
               class="flex-grow-1"
               variant="tonal"
               flat
             ></v-btn>
           </div>
         </v-col>
-        <v-col class="pl-2" cols="9">
-          <v-row no-gutters class="mt-0">
-            <v-col cols="12">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                density="compact"
-                label="PID"
-                hide-details="auto"
-                variant="underlined"
-              ></v-text-field>
-            </v-col>
-          </v-row>
-          <v-row no-gutters class="mt-3">
-            <v-col cols="3" class="pr-2">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Awalan"
-                variant="underlined"
-              ></v-text-field>
+        <v-col class="pl-4" cols="10">
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="PID"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Nama"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Tanggal Lahir"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Umur"
+          ></v-text-field>
+          <v-row no-gutters class="mb-2">
+            <v-col cols="6">
+              <v-select
+              :items="genders" return-object class="pr-1" hide-details="auto"
+              density="compact" label="Kartu Identitas" color="primary"
+              item-title="name" variant="outlined"
+              ></v-select>
             </v-col>
             <v-col cols="6">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Nama"
-                variant="underlined"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="3" class="pl-2">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Akhiran"
-                variant="underlined"
+              <v-text-field class="pl-1" variant="outlined" density="compact" hide-details="auto"
+                color="primary" v-model="first" label="Nomor ID"
               ></v-text-field>
             </v-col>
           </v-row>
-          <v-row no-gutters class="mt-3">
-            <v-col cols="6" class="pr2">
-              <v-select
-                :items="genders"
-                density="compact"
-                label="Jenis Kelamin"
-                return-object
-                item-title="name"
-                variant="underlined"
-              ></v-select>
-            </v-col>
-            <v-col cols="6" class="pl-2">
-              <v-select
-                :items="titles"
-                density="compact"
-                label="Sapaan"
-                return-object
-                item-title="name"
-                variant="underlined"
-              ></v-select>
-            </v-col>
-          </v-row>
+          <v-textarea class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Alamat" rows="3"
+          ></v-textarea>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Diagnosa"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Catatan Pasien"
+          ></v-text-field>
+          <v-text-field variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Catatan FO"
+          ></v-text-field>
         </v-col>
       </v-row>
     </v-card>

registration/components/form_pemeriksaan.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">PEMERIKSAAN</v-toolbar-title>
+            </v-toolbar>
+            <v-text-field 
+                append-inner-icon="mdi-magnify" hide-details="auto" variant="outlined"
+                class="my-4" density="compact" label="Pemeriksaan" color="primary"
+            ></v-text-field>
+            <v-row no-gutters class="mt-2">
+                <v-col v-for="x in pemeriksaan" cols="6" class="pa-1">
+                    <v-btn block color="primary" variant="tonal" style="justify-content: start;">
+                        {{ x.name }}
+                    </v-btn>
+                </v-col>
+            </v-row>
+            <v-divider class="mt-4 border-opacity-25"></v-divider>
+            <v-row no-gutters class="mt-4">
+                <v-col cols="10" align-self="center">
+                    <p class="text-secondary-darken font-weight-medium">Apakah persyaratan dipenuhi?</p>
+                </v-col>
+                <v-col cols="2" class="d-flex">
+                    <v-spacer/>
+                    <v-btn color="error" variant="tonal" class="mr-2">
+                        <iconify-icon style="font-size: 1.5rem;" icon="fluent:dismiss-24-regular"></iconify-icon>
+                    </v-btn>
+                    <v-btn color="success" variant="tonal">
+                        <iconify-icon style="font-size: 1.5rem;" icon="fluent:checkmark-24-regular"></iconify-icon>
+                    </v-btn>
+                </v-col>
+            </v-row>
+            <v-row no-gutters class="mt-4">
+                <v-col class="pa-1" cols="6" v-for="syarat in persyaratan">
+                    <p class="font-weight-medium">{{ syarat.name }}</p>
+                </v-col>
+            </v-row>
+            <v-switch inset color="success" label="Hanya terima sample" class="mt-2"></v-switch>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "formpemeriksaancomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                pemeriksaan: [
+                    { id: 1, name: "SGOT" },
+                    { id: 2, name: "SGPT" },
+                    { id: 3, name: "Asam Urat" },
+                    { id: 4, name: "Panel Creatinin" },
+                ],
+                persyaratan: [
+                    { id: 1, name: "Aktifitas Fisik" },
+                    { id: 2, name: "Hamil" },
+                    { id: 3, name: "Vitamin C" },
+                    { id: 4, name: "Alkohol" },
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>

registration/components/form_pengirim.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">PENGIRIM DAN BAHASA</v-toolbar-title>
+            </v-toolbar> 
+            <v-row no-gutters class="mt-4">
+                <v-col cols="6">
+                    <v-select
+                        :items="pengirim" return-object class="pr-1 mb-2" hide-details="auto"
+                        density="compact" label="Pengirim"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                    <v-select
+                        :items="bahasa" return-object class="pr-1" hide-details="auto"
+                        density="compact" label="Bahasa 1"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                </v-col>
+                <v-col cols="6">
+                    <v-select
+                        :items="alamat" return-object class="pl-1 mb-2" hide-details="auto"
+                        density="compact" label="Alamat"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                    <v-select
+                        :items="bahasa" return-object class="pl-1" hide-details="auto"
+                        density="compact" label="Bahasa 2"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                </v-col>
+            </v-row>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "pengirimcomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                pengirim: [
+                    { id: 1, name: "Dr. Andra" },
+                    { id: 2, name: "Dr. Reffi" },
+                ],
+                bahasa: [
+                    { id: 1, name: "Indonesia" },
+                    { id: 2, name: "Inggris" },
+                ],
+                alamat: [
+                    { id: 1, name: "Malang" },
+                    { id: 2, name: "Surabaya" },
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>

registration/components/kelpelanggan_agreement.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">KEL. PELANGGAN DAN AGREEMENT</v-toolbar-title>
+            </v-toolbar>
+            <div class="mt-4">
+                <v-select 
+                    :items="kelpelanggan" return-object class="mb-2" hide-details="auto" color="primary"
+                    density="compact" label="Kel. Pelanggan" item-title="name" variant="outlined"
+                ></v-select>
+                <v-select 
+                    :items="agreement" return-object hide-details="auto" color="primary"
+                    density="compact" label="Agreement" item-title="name" variant="outlined"
+                ></v-select>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "pelangganagreementcomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                kelpelanggan: [
+                    { id: 1, name: "sasone 2024" },
+                    { id: 2, name: "sasone 2023" },
+                ],
+                agreement: [
+                    { id: 1, name: "mcu karyawan 2024" },
+                    { id: 2, name: "mcu karyawan 2023" }
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>

registration/components/main.vue

@@ -1,40 +1,31 @@
 <template>
-  <v-app style="background:#e8eaf6" >
+  <v-app id="inspire">
     <one-navbar></one-navbar>
-    <v-main class="pt-12">
-
-      <div class="ml-2 mr-2 mt-0 rounded h-100">
+    <v-main class="mt-3 mb-3 mx-2">
+      <div class="pa-4 bg-primary-lighten rounded-xl h-100">
         <one-tabs></one-tabs>
-        <v-row>
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
-            <one-left></one-left>
-          </v-col>
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
-            <one-right></one-right>
-          </v-col>
-        </v-row>
       </div>
     </v-main>
   </v-app>
 </template>
 
 <script type="module">
-import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+  import Tabs from "./tabs.vue";
 
-import Tabs from "./tabs.vue";
-export default {
-  name: "registration",
-  components: {
-    "one-navbar": NavbarComponent,
-    "one-tabs": Tabs,
-  },
-  mounted() {},
-  data() {
-    return {
-      visible: false,
-    };
-  },
-  computed: {},
-  methods: {},
-};
+  export default {
+    name: "registration",
+    components: {
+      "one-navbar": NavbarComponent,
+      "one-tabs": Tabs,
+    },
+    mounted() {},
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {},
+    methods: {},
+  };
 </script>

registration/components/tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="mb-0 pa-2 mt-0 pt-0">
+    <v-card class="pa-4 rounded-lg" elevation="0">
       <v-tabs v-model="tab" align-tabs="center" color="primary" grow>
         <v-tab :value="1">DEMOGRAFI</v-tab>
         <v-tab :value="2">PEMERIKSAAN</v-tab>
@@ -10,13 +10,25 @@
     </v-card>
 
     <v-tabs-window v-model="tab">
-      <v-tabs-window-item v-for="n in 3" :key="n" :value="n">
-        <v-row class="no-gutters">
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3 pr-1">
+      <v-tabs-window-item v-for="n in 4" :key="n" :value="n">
+        <v-row no-gutters>
+          
+          <!-- left side-->
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
             <datatable-patient v-if="tab === 1"></datatable-patient>
+            <div v-else-if="tab === 2">
+              <form-agreement></form-agreement>
+              <form-pemeriksaan class="mt-4"></form-pemeriksaan>
+            </div>
+            <div v-else-if="tab === 3">KIRIM HASIL</div>
+            <div v-else>PEMBAYARAN</div>
           </v-col>
-          <v-col cols="12" md="6" sm="12" xs="12" class="pl-1 mt-3">
+          
+          <!-- right side -->
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
             <form-patient v-if="tab === 1"></form-patient>
+            <form-pengirim class="mt-4" v-if="tab === 1"></form-pengirim>
+            <detail-order v-if="tab === 2"></detail-order>
           </v-col>
         </v-row>
       </v-tabs-window-item>
@@ -26,12 +38,20 @@
 
 <script type="module">
 import DatatablePatient from "./datatable_patient.vue";
+import Detail_order from "./detail_order.vue";
 import FormPatient from "./form_patient.vue";
+import Form_pemeriksaan from "./form_pemeriksaan.vue";
+import FormPengirim from "./form_pengirim.vue";
+import Kelpelanggan_agreement from "./kelpelanggan_agreement.vue";
 export default {
   name: "filtercomp",
   components: {
     "datatable-patient": DatatablePatient,
     "form-patient": FormPatient,
+    "form-pengirim": FormPengirim,
+    "form-agreement": Kelpelanggan_agreement,
+    "form-pemeriksaan": Form_pemeriksaan,
+    "detail-order": Detail_order,
   },
   mounted() {},
   data() {
@@ -72,7 +92,7 @@ export default {
 </script>
 
 <style scoped>
-.pointer {
-  cursor: pointer;
-}
+  .pointer {
+    cursor: pointer;
+  }
 </style>

registration/index.html

@@ -12,10 +12,7 @@
         <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
     </head>
     <body>
-        <v-responsive class="border rounded" max-height="300">
         <div id="app"></div>
-
-  </v-responsive>
         <!-- Moment -->
         <script src="../libraries/moment.js"></script>
         <!-- Vue.js -->

result-documentation-radiodiagnostik/components/detailPatient.vue

@@ -0,0 +1,312 @@
+<template>
+    <div v-if="xselected_patient?.details">
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row class="justify-space-between">
+                <v-col cols="6">
+                    <p class="text-h6"><strong>{{ xselected_patient.noreg }}</strong></p>
+                </v-col>
+                <v-col cols="6" class="text-right">
+                    <v-chip class="rounded-lg px-4 py-2">
+                        {{ xselected_patient.statusresult }}
+                    </v-chip>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col cols="5">
+                    <v-text-field :label="$t('message.tableDetailPatient.navbar.name')" variant="outlined" hide-details
+                        :model-value="xselected_patient.patient_fullname && xselected_patient.gender ? `${xselected_patient.name} / ${xselected_patient.gender}` : ''"
+                        readonly>
+                    </v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field :label="$t('message.tableDetailPatient.navbar.age')" variant="outlined"
+                        :model-value="xselected_patient.age ? `${xselected_patient.age}` : ''"
+                        hide-details></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field :label="$t('message.tableDetailPatient.navbar.sender')"
+                        :model-value="xselected_patient.sender ? `${xselected_patient.sender}` : ''" variant="outlined"
+                        hide-details></v-text-field>
+                </v-col>
+            </v-row>
+            <v-row class="bg-secondary-lighten rounded-lg mx-1 h-100 my-2">
+                <v-col cols="7" class="d-flex align-center space-between">
+                    <div><v-chip class="bg-grey-lighten-3 text-black rounded-lg px-4" style="height: 40px;">{{
+                        xselected_patient.test_name
+                            }}</v-chip></div>
+                    <div><v-chip class="bg-cyan-lighten-5 text-cyan-darken-1 rounded-lg px-4 mx-2"
+                            style="height: 40px;">
+                            {{ xselected_patient.details ? xselected_patient.details.doctor_fullname : '' }}
+                        </v-chip></div>
+                    <div>
+                        <v-menu close-on-content-click offset-y transition="scale-transition">
+                            <template #activator="{ props }">
+                                <v-chip v-bind="props"
+                                    class="bg-blue-lighten-5 text-blue-darken-2 rounded-lg px-4 cursor-pointer"
+                                    style="height: 40px;">
+                                    {{ selectedLang }}
+                                </v-chip>
+                            </template>
+                            <v-list>
+                                <v-list-item v-for="lang in xselected_patient.details.langs" :key="lang"
+                                    @click="selectLanguage(lang)">
+                                    <v-list-item-title>{{ lang.name }}</v-list-item-title>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </div>
+                    <div class="px-2">
+                        <v-btn fab small style="height: 2.5rem;" class="bg-info rounded-lg ">
+                            <iconify-icon style="font-size:  2rem; color: #FFF;"
+                                icon="fluent:clipboard-3-day-24-regular"></iconify-icon>
+                        </v-btn>
+                    </div>
+                </v-col>
+                <v-col cols="5">
+                    <div class="d-flex justify-end">
+                        <div v-if="xselected_patient.details.status == 'NEW'">
+                            <v-btn fab small style="height: 2.5rem;" class="bg-warning rounded-lg mr-2"
+                                @click="confirmDialog = true">
+                                <iconify-icon style="font-size:  2rem; color: #FFF;"
+                                    icon="fluent:clipboard-task-24-regular"></iconify-icon></v-btn>
+                            <v-btn fab small style="height: 2.5rem;" class="bg-primary rounded-lg"
+                                @click="save"><iconify-icon style="font-size:  2rem; color: #FFF;"
+                                    icon="fluent:save-32-regular"></iconify-icon></v-btn>
+                        </div>
+                        <div v-if="xselected_patient.details.status == 'VAL1'">
+                            <v-btn fab small style="height: 2.5rem;" class="bg-warning rounded-lg mr-2"
+                                @click="confirm('yes')">
+                                <iconify-icon style="font-size:  2rem; color: #FFF;"
+                                    icon="fluent:print-24-regular"></iconify-icon></v-btn>
+                            <v-btn fab small style="height: 2.5rem;" class="bg-error rounded-lg mr-2"
+                                @click="cancelDialog = true">
+                                <iconify-icon style="font-size:  2rem; color: #FFF;"
+                                    icon="fluent:dismiss-24-filled"></iconify-icon></v-btn>
+                        </div>
+                        <div v-if="xselected_patient.details.status == 'VAL2'">
+                            <v-btn fab small style="height: 2.5rem;" class="bg-warning rounded-lg mr-2"
+                                @click="confirm('yes')">
+                                <iconify-icon style="font-size:  2rem; color: #FFF;"
+                                    icon="fluent:print-24-regular"></iconify-icon></v-btn>
+                        </div>
+                        <v-dialog v-model="confirmDialog" max-width="400">
+                            <v-card>
+                                <v-card-title>Konfirmasi</v-card-title>
+                                <v-card-text>Apakah Anda yakin?</v-card-text>
+                                <v-card-actions>
+                                    <v-btn color="primary" text @click="confirm('yes')">Ya</v-btn>
+                                    <v-btn color="error" text @click="confirm('no')">Tidak</v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-dialog>
+                        <v-dialog v-model="cancelDialog" max-width="400">
+                            <v-card>
+                                <v-card-title>Batal Validasi</v-card-title>
+                                <v-card-text>Apakah Anda yakin?</v-card-text>
+                                <v-card-actions>
+                                    <v-btn color="primary" text @click="cancelValidate('yes')">Ya</v-btn>
+                                    <v-btn color="error" text @click="cancelValidate('no')">Tidak</v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-dialog>
+                        <!-- Dialog Save -->
+                        <v-dialog v-model="saveDialog" max-width="400">
+                            <v-card>
+                                <v-card-title>Berhasil</v-card-title>
+                                <v-card-text>Data berhasil disimpan.</v-card-text>
+                                <v-card-actions>
+                                    <v-btn color="primary" text @click="saveDialog = false">Tutup</v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-dialog>
+                    </div>
+                </v-col>
+            </v-row>
+            <v-list>
+                <v-list-item v-for="(result, idxresult) in xselected_patient.details.details" :key="idxresult">
+                    <v-list-item-content>
+                        <v-row>
+                            <v-col cols="1" class="d-flex align-center justify-center">
+                                <v-switch :model-value="flagPrintBoolean(result.flag_print)"
+                                    @click="changeFlagPrint(result, idxresult)" color="primary">
+                                </v-switch>
+
+                            </v-col>
+                            <v-col cols="11">
+                                <v-textarea filled outline hide-details :label="result.result_label" auto-grow
+                                    @change="changeResult(result.result_value, idxresult, index)"
+                                    :disabled="xselected_patient.details.status !== 'NEW' || xselected_patient.details.doctor_id === '0'"
+                                    v-model="result.result_value" rows="3">
+                                </v-textarea>
+                            </v-col>
+
+                        </v-row>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list>
+
+        </v-container>
+    </div>
+</template>
+
+<style scoped>
+.pointer {
+    cursor: pointer;
+}
+
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
+.v-table .v-table__wrapper>table>thead>tr>th {
+    border-bottom: dashed 1px #EEEEEE;
+}
+</style>
+
+<script type="module">
+export default {
+    name: "DetailPatient",
+    data() {
+        return {
+            menu: false,
+            selectedLang: '',
+            cancelDialog: false,
+            confirmDialog: false,
+            saveDialog: false,
+            isValidated: false,
+            Validation: false,
+            headers: [
+                {
+                    align: 'start',
+                    key: 'name',
+                    sortable: false,
+                    width: "15%",
+                    title: this.$t('message.tableDetailPatient.header.name'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'result',
+                    sortable: false,
+                    width: "10%",
+                    title: this.$t('message.tableDetailPatient.header.result'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'flag',
+                    sortable: false,
+                    width: "10%",
+                    title: this.$t('message.tableDetailPatient.header.flag'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'nilai',
+                    sortable: false,
+                    width: "10%",
+                    title: this.$t('message.tableDetailPatient.header.normalvalue'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'unit',
+                    sortable: false,
+                    width: "10%",
+                    title: this.$t('message.tableDetailPatient.header.unit'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'metode',
+                    sortable: false,
+                    width: "15%",
+                    title: this.$t('message.tableDetailPatient.header.method'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'note',
+                    sortable: false,
+                    width: "15%",
+                    title: this.$t('message.tableDetailPatient.header.note'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'validasi',
+                    sortable: false,
+                    width: "5%",
+                    title: this.$t('message.tableDetailPatient.header.documentation'),
+                    class: "bg-secondary-lighten font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        isFlagPrintActive() {
+            return this.$store.state.documentation.selected_patient === 'Y';
+        },
+        xselected_patient() {
+            // Ambil data pasien dari Vuex store
+            const selectedPatient = this.$store.state.documentation.selected_patient;
+            return selectedPatient;
+        },
+        xdetails() {
+            return this.$store.state.documentation.details
+        },
+    },
+    mounted() {
+    },
+    methods: {
+        flagPrintBoolean(flag) {
+            return flag === 'Y';
+        },
+        changeFlagPrint(result, idxresult) {
+            // Toggle antara 'Y' dan 'N'
+            result.flag_print = result.flag_print === 'Y' ? 'N' : 'Y';
+            this.$store.state.documentation.selected_patient.details.details[idxresult].flag_print = result.flag_print
+            // Misalnya, Anda dapat mengirim perubahan ke backend atau melakukan update state lainnya.
+        },
+        cancelValidate(action) {
+            if (action === "yes") {
+                console.log("batal validasi");
+                this.isValidated = false;
+            }
+            this.cancelDialog = false;
+        },
+        confirm(action) {
+            if (action === "yes") {
+                console.log("ya");
+                this.isValidated = true;
+            }
+            this.confirmDialog = false;
+        },
+        save() {
+            this.saveDialog = true;
+        },
+        selectLanguage(lang) {
+            this.selectedLang = lang.name;
+        },
+        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")}`;
+        },
+    },
+    watch: {
+        xselected_patient(newVal) {
+            console.log("ini new val", newVal)
+            if (newVal && newVal.details && newVal.details.langs && newVal.details.langs.length > 0) {
+                this.selectedLang = newVal.details.langs[0].name;
+            } else {
+                this.selectedLang = '';
+            }
+        },
+    }
+}
+</script>

result-documentation-radiodiagnostik/components/listPatient.vue

@@ -0,0 +1,112 @@
+<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>
+                        <td>
+                            <p>{{ item.group }}</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: "20%",
+                    title: this.$t('message.tableListPatient.noreg'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'name',
+                    sortable: false,
+                    width: "40%",
+                    title: this.$t('message.tableListPatient.name'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'start',
+                    key: 'group',
+                    sortable: false,
+                    width: "40%",
+                    title: this.$t('message.tableListPatient.group'),
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        xpatients() {
+            return this.$store.state.documentation.patients
+        },
+        selected_patient: {
+            get() {
+                return this.$store.state.documentation.selected_patient
+            },
+            set(val) {
+                this.$store.commit("documentation/setSelectedPatient", val)
+            }
+        }
+    },
+    methods: {
+        isSelected(p) {
+            return p.id == this.$store.state.documentation.selected_patient.id
+        },
+        selectMe(data) {
+            this.$store.commit("documentation/setSelectedPatient", data)
+        }
+    },
+    wacth: {
+
+    }
+}
+</script>

result-documentation-radiodiagnostik/components/mainDocumentation.vue

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

result-documentation-radiodiagnostik/components/searchPatient.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row>
+        <v-col cols="3">
+          <v-autocomplete :label="$t('message.search.resulttype')" variant="outlined" hide-details
+            menu-icon="mdi-chevron-down" :items="['Radiodiagnostik', 'Ultrasonografi', 'BMD', 'MRI']"></v-autocomplete>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field :label="$t('message.search.noreg')" variant="outlined" hide-details
+            append-inner-icon="mdi-magnify"></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <div class="d-flex align-center ga-2">
+            <v-menu v-model="actionDate" :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.actionDate')"
+                  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="actionDate = false"></v-date-picker>
+            </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.5">
+          <v-autocomplete :label="$t('message.search.group')" variant="outlined" hide-details
+            menu-icon="mdi-chevron-down"
+            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
+        </v-col>
+
+        <v-col cols="1">
+          <v-btn variant="flat" small style="height: 55px; width: 40px;" class="bg-primary rounded-lg">
+            <iconify-icon style="font-size: 2rem;" icon="fluent:search-20-regular"></iconify-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script type="module">
+export default {
+  name: "SearchPatient",
+  data() {
+    return {
+      actionDate: false,
+      visible: false,
+    };
+  },
+  computed: {
+    date: {
+      get() {
+        return this.$store.state.documentation.date;
+      },
+      set(val) {
+        console.log(val)
+        this.$store.commit("documentation/setDate", val);
+      },
+    },
+  },
+  methods: {
+    formatDate() {
+      if (!this.date) return null;
+
+      return moment(this.date).format("DD-MM-YYYY");
+    },
+    deFormatedDate(date) {
+      if (!date) return null;
+
+      const [day, month, year] = date.split("-");
+      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    },
+  },
+  wacth: {
+
+  }
+}
+</script>

result-documentation-radiodiagnostik/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 documentation from "./modules/documentation.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          documentation: documentation,
+        },
+      });
+      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-documentation-component></main-documentation-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-documentation-component": "./components/mainDocumentation.vue",
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>

result-documentation-radiodiagnostik/language.js

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

result-documentation-radiodiagnostik/modules/documentation.js

@@ -0,0 +1,729 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02",
+                    group: 'Pasien Klinisi',
+                    statusresult: 'Ambil Sendiri',
+                    gender: "Laki-laki",
+                    age: "30 Tahun 4 Bulan 5 Hari",
+                    sender: "dr. Coba Mencoba",
+                    test_name: "ECG",
+                    details:
+                    {
+                        "trx_id": "54",
+                        "orderid": "1355",
+                        "patientid": "5334",
+                        "sampletypeid": "162",
+                        "is_mcu": "N",
+                        "status_result": {
+                            "id": "X",
+                            "name": "Belum ditentukan"
+                        },
+                        "test_name": "ECG",
+                        "test_id": "443",
+                        "language_id": "1",
+                        "template_id": "12",
+                        "status_name": "BARU",
+                        "type": "electromedis",
+                        "langs": [
+                            {
+                                "id": "1",
+                                "code": "ID",
+                                "name": "Bahasa Indonesia",
+                                "chex": "N"
+                            },
+                            {
+                                "id": "2",
+                                "code": "EN",
+                                "name": "Bahasa Inggris",
+                                "chex": "N"
+                            }
+                        ],
+                        "status": "NEW",
+                        "language_name": "Bahasa Indonesia",
+                        "doctor_id": "5701",
+                        "doctor_fullname": "Prof.Dr.dr. MOHAMMAD YOGIARTO...",
+                        "details": [
+                            {
+                                "trx_id": "629",
+                                "template_detail_id": "221",
+                                "result_label": "Hasil",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "630",
+                                "template_detail_id": "222",
+                                "result_label": "Liver",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "631",
+                                "template_detail_id": "223",
+                                "result_label": "Gall Bladder",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "632",
+                                "template_detail_id": "224",
+                                "result_label": "Pankreas",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "633",
+                                "template_detail_id": "225",
+                                "result_label": "Lien",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "634",
+                                "template_detail_id": "226",
+                                "result_label": "Paraaorta",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "635",
+                                "template_detail_id": "227",
+                                "result_label": "Renal ",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "636",
+                                "template_detail_id": "228",
+                                "result_label": "Renal Dextra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "637",
+                                "template_detail_id": "229",
+                                "result_label": "Renal Sinistra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "638",
+                                "template_detail_id": "230",
+                                "result_label": "Vesica Urinaria",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "639",
+                                "template_detail_id": "231",
+                                "result_label": "Kantung Kemih",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "640",
+                                "template_detail_id": "232",
+                                "result_label": "Prostat",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "642",
+                                "template_detail_id": "234",
+                                "result_label": "Uterus",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "643",
+                                "template_detail_id": "235",
+                                "result_label": "Cavum Douglasi",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "644",
+                                "template_detail_id": "236",
+                                "result_label": "Adnexa",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "645",
+                                "template_detail_id": "237",
+                                "result_label": "Adnexa Kanan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "646",
+                                "template_detail_id": "238",
+                                "result_label": "Adnexa Kiri",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "647",
+                                "template_detail_id": "239",
+                                "result_label": "Ovarium",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "648",
+                                "template_detail_id": "240",
+                                "result_label": "Gynaecologis",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "641",
+                                "template_detail_id": "233",
+                                "result_label": "Appendiks",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "649",
+                                "template_detail_id": "241",
+                                "result_label": "Catatan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "650",
+                                "template_detail_id": "242",
+                                "result_label": "Kesan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "651",
+                                "template_detail_id": "243",
+                                "result_label": "Saran",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            }
+                        ],
+                        "photos": []
+                    },
+                },
+                {
+                    id: 2,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32",
+                    group: 'Pasien Klinisi',
+                    statusresult: 'Ambil Sendiri',
+                    gender: "Perempuan",
+                    age: "24 Tahun 4 Bulan 5 Hari",
+                    sender: "dr. Jimmy",
+                    test_name: "ECG",
+                    details:
+                    {
+                        "trx_id": "53",
+                        "orderid": "1354",
+                        "patientid": "101421",
+                        "sampletypeid": "162",
+                        "is_mcu": "N",
+                        "status_result": {
+                            "id": "X",
+                            "name": "Belum ditentukan"
+                        },
+                        "test_name": "ECG",
+                        "test_id": "443",
+                        "language_id": "1",
+                        "template_id": "12",
+                        "status_name": "BARU",
+                        "type": "electromedis",
+                        "langs": [
+                            {
+                                "id": "1",
+                                "code": "ID",
+                                "name": "Bahasa Indonesia",
+                                "chex": "N"
+                            }
+                        ],
+                        "status": "NEW",
+                        "language_name": "Bahasa Indonesia",
+                        "doctor_id": "5701",
+                        "doctor_fullname": "Prof.Dr.dr. MOHAMMAD YOGIARTO...",
+                        "details": [
+                            {
+                                "trx_id": "629",
+                                "template_detail_id": "221",
+                                "result_label": "Hasil",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "630",
+                                "template_detail_id": "222",
+                                "result_label": "Liver",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "631",
+                                "template_detail_id": "223",
+                                "result_label": "Gall Bladder",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "632",
+                                "template_detail_id": "224",
+                                "result_label": "Pankreas",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "633",
+                                "template_detail_id": "225",
+                                "result_label": "Lien",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "634",
+                                "template_detail_id": "226",
+                                "result_label": "Paraaorta",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "635",
+                                "template_detail_id": "227",
+                                "result_label": "Renal ",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "636",
+                                "template_detail_id": "228",
+                                "result_label": "Renal Dextra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "637",
+                                "template_detail_id": "229",
+                                "result_label": "Renal Sinistra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "638",
+                                "template_detail_id": "230",
+                                "result_label": "Vesica Urinaria",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "639",
+                                "template_detail_id": "231",
+                                "result_label": "Kantung Kemih",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "640",
+                                "template_detail_id": "232",
+                                "result_label": "Prostat",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "642",
+                                "template_detail_id": "234",
+                                "result_label": "Uterus",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "643",
+                                "template_detail_id": "235",
+                                "result_label": "Cavum Douglasi",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "644",
+                                "template_detail_id": "236",
+                                "result_label": "Adnexa",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "645",
+                                "template_detail_id": "237",
+                                "result_label": "Adnexa Kanan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "646",
+                                "template_detail_id": "238",
+                                "result_label": "Adnexa Kiri",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "647",
+                                "template_detail_id": "239",
+                                "result_label": "Ovarium",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "648",
+                                "template_detail_id": "240",
+                                "result_label": "Gynaecologis",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "641",
+                                "template_detail_id": "233",
+                                "result_label": "Appendiks",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "649",
+                                "template_detail_id": "241",
+                                "result_label": "Catatan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "650",
+                                "template_detail_id": "242",
+                                "result_label": "Kesan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "651",
+                                "template_detail_id": "243",
+                                "result_label": "Saran",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            }
+                        ],
+                        "photos": []
+                    }
+                },
+                {
+                    id: 3,
+                    name: "Ny. RINAS MARKOLOPO",
+                    noreg: "055000033LA",
+                    orderdate: "01-08-2024 14:32",
+                    group: 'Pasien Mandiri',
+                    statusresult: 'Kirim Email',
+                    gender: "Laki-laki",
+                    age: "41 Tahun 4 Bulan 5 Hari",
+                    sender: "dr. Risosiki",
+                    test_name: "EKG",
+                    details:
+                    {
+                        "trx_id": "52",
+                        "orderid": "1353",
+                        "patientid": "101421",
+                        "sampletypeid": "162",
+                        "is_mcu": "N",
+                        "status_result": {
+                            "id": "X",
+                            "name": "Belum ditentukan"
+                        },
+                        "test_name": "ECG",
+                        "test_id": "443",
+                        "language_id": "1",
+                        "template_id": "12",
+                        "status_name": "VALIDASI 1",
+                        "type": "electromedis",
+                        "langs": [
+                            {
+                                "id": "1",
+                                "code": "ID",
+                                "name": "Bahasa Indonesia",
+                                "chex": "N"
+                            },
+                            {
+                                "id": "2",
+                                "code": "EN",
+                                "name": "Bahasa Inggris",
+                                "chex": "N"
+                            }
+                        ],
+                        "status": "VAL1",
+                        "language_name": "Bahasa Indonesia",
+                        "doctor_id": "5701",
+                        "doctor_fullname": "Prof.Dr.dr. MOHAMMAD YOGIARTO...",
+                        "details": [
+                            {
+                                "trx_id": "629",
+                                "template_detail_id": "221",
+                                "result_label": "Hasil",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "630",
+                                "template_detail_id": "222",
+                                "result_label": "Liver",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "631",
+                                "template_detail_id": "223",
+                                "result_label": "Gall Bladder",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "632",
+                                "template_detail_id": "224",
+                                "result_label": "Pankreas",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "633",
+                                "template_detail_id": "225",
+                                "result_label": "Lien",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "634",
+                                "template_detail_id": "226",
+                                "result_label": "Paraaorta",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "635",
+                                "template_detail_id": "227",
+                                "result_label": "Renal ",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "636",
+                                "template_detail_id": "228",
+                                "result_label": "Renal Dextra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "637",
+                                "template_detail_id": "229",
+                                "result_label": "Renal Sinistra",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "638",
+                                "template_detail_id": "230",
+                                "result_label": "Vesica Urinaria",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "639",
+                                "template_detail_id": "231",
+                                "result_label": "Kantung Kemih",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "640",
+                                "template_detail_id": "232",
+                                "result_label": "Prostat",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "642",
+                                "template_detail_id": "234",
+                                "result_label": "Uterus",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "643",
+                                "template_detail_id": "235",
+                                "result_label": "Cavum Douglasi",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "644",
+                                "template_detail_id": "236",
+                                "result_label": "Adnexa",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "645",
+                                "template_detail_id": "237",
+                                "result_label": "Adnexa Kanan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "646",
+                                "template_detail_id": "238",
+                                "result_label": "Adnexa Kiri",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "647",
+                                "template_detail_id": "239",
+                                "result_label": "Ovarium",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "648",
+                                "template_detail_id": "240",
+                                "result_label": "Gynaecologis",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "641",
+                                "template_detail_id": "233",
+                                "result_label": "Appendiks",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "649",
+                                "template_detail_id": "241",
+                                "result_label": "Catatan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "650",
+                                "template_detail_id": "242",
+                                "result_label": "Kesan",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            },
+                            {
+                                "trx_id": "651",
+                                "template_detail_id": "243",
+                                "result_label": "Saran",
+                                "result_value": "Normal",
+                                "flag_print": "Y",
+                                "result_value_before": "Normal"
+                            }
+                        ],
+                        "photos": []
+                    }
+                },
+            ],
+            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
+        }
+    },
+    actions: {
+
+    }
+};
+export default store

specimen-collection/components/main.vue

@@ -1,14 +1,14 @@
 <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-main class="mt-3 mb-3 mx-2">
+            <div class="pa-4 bg-primary-lighten rounded-xl h-100">
                 <one-filter></one-filter>
-                <v-row>
-                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                <v-row no-gutters>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
                         <one-left></one-left>
                     </v-col>
-                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
                         <one-right></one-right>
                     </v-col>
                 </v-row>

specimen-collection/components/right.vue

@@ -59,7 +59,7 @@
                 </v-row>
             </div>
         </v-container>
-        <v-container class="bg-white rounded-lg mt-5" fluid>
+        <v-container class="bg-white rounded-lg mt-4" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                 <v-row>
                     <v-col cols="10" align-self="center">
@@ -160,7 +160,7 @@
                 <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>
+        <v-container class="bg-white rounded-lg mt-4" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5">
                 <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
             </div>

status-patient/components/content.vue

@@ -6,11 +6,12 @@
                     <h3>{{ $t('message.table.title') }}</h3>
                 </v-col>
                 <v-col cols="1" align="end">
-                    <h3>6</h3>
+                    <h3>{{ datax.length }}</h3>
                 </v-col>
             </v-row>
         </div>
         <v-data-table
+            :items="datax"
             :headers="headers"
             hide-default-footer
         >
@@ -23,14 +24,94 @@
                     </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: {},
+        components: {
+            "sp-dialog": Sp_dialog,
+            "print-dialog": PrintDialog,
+        },
         mounted() {},
         data() {
             return {
@@ -39,7 +120,7 @@
                 headers : [
                     {
                         title: this.$t('message.table.h_no'),
-                        align: "start",
+                        align: "center",
                         sortable: false,
                         key: "name",
                         width: "5%",
@@ -112,5 +193,53 @@
                 ]
             };
         },
+        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>
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>

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/modules/store.js

@@ -78,13 +78,125 @@ const store = {
                     }
                   ],
                   "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: {