New Feature menu Radiodiagnostik verifikasi Hasil

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>

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

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

result-verification-radiodiagnostik/components/mainVerif.vue

@@ -0,0 +1,62 @@
+<template>
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main>
+            <div class=" bg-primary-lighten ml-2 rounded-xl h-100">
+                <v-row>
+                    <v-col cols="12" md="7" sm="12" xs="12" class="mt-5"> 
+                        <search-component-left></search-component-left>
+                    </v-col>
+                    <v-col cols="12" md="5" sm="12" xs="12" class="mt-5"> 
+                        <search-component-right></search-component-right>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="12" md="7" sm="12" xs="12" class="mt-1">
+                        <list-verif-left-component></list-verif-left-component>
+                    </v-col>
+                    <v-col cols="12" md="5" sm="12" xs="12" class="mt-1">
+                        <list-verif-right-component></list-verif-right-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 listVerifLeftComponent from "./verificationLeftList.vue";
+    import searchComponentLeft from "./searchVerificationtLeft.vue";
+    import searchComponentRight from "./searchVerificationRight.vue";
+    import listVerifRightComponent from "./verificationRightList.vue";
+    export default {
+        name: "MainVerif",
+        components: {
+            "one-navbar": NavbarComponent,
+            "search-component-left": searchComponentLeft,
+            "search-component-right": searchComponentRight,
+            "list-verif-left-component": listVerifLeftComponent,
+            "list-verif-right-component": listVerifRightComponent
+        },
+        data() {
+            return {
+
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>

result-verification-radiodiagnostik/components/searchVerificationRight.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row class="pa-0">
+        <v-col cols="4" class="pl-0">
+          <v-autocomplete :label="$t('message.search.resultcollection')" variant="outlined" hide-details
+            menu-icon="mdi-chevron-down"
+            :items="['Semua', 'Ambil Sendiri', 'dikirim WA', 'Dari kurir']"></v-autocomplete>
+        </v-col>
+        <v-col cols="7" class="pl-0">
+          <v-text-field :label="$t('message.search.noreg')" variant="outlined" hide-details
+            append-inner-icon="mdi-magnify"></v-text-field>
+        </v-col>
+        <v-col cols="1" class="pl-0 pr-2">
+          <v-btn variant="flat" small style="height: 100%;" class="bg-primary rounded-lg" v-if="btn_hide === false">
+            <iconify-icon style="font-size: 2rem;" icon="fluent:send-20-regular" @click="doSend"></iconify-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script type="module">
+export default {
+  name: "SearchVerificationRight",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {
+    btn_hide: {
+      get() {
+        return this.$store.state.verification.btn_hide
+      },
+      set(val) {
+        this.$store.commit("verification/update_btn_hide", val)
+      }
+    },
+    selected_transaction() {
+      // Akses selected_transaction dari Vuex atau beri nilai default
+      return this.$store.state.verification.selected_transaction || [];
+    }
+  },
+  methods: {
+    doSend() {
+      this.btn_hide = true;
+
+      // Filter untuk mendapatkan item yang dipilih berdasarkan nilai 'chex'
+      const selectedItems = this.selected_transaction
+      // Periksa jika ada item yang dipilih
+      if (selectedItems.length > 0) {
+        console.log({
+          selected: selectedItems // Daftar item yang dipilih
+        });
+      } else {
+        console.log("Tidak ada item yang dipilih");
+      }
+
+      this.btn_hide = false;
+    }
+  },
+  wacth: {
+
+  }
+}
+</script>

result-verification-radiodiagnostik/components/searchVerificationtLeft.vue

@@ -0,0 +1,54 @@
+<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="resulttype"></v-autocomplete>
+        </v-col>
+        <v-col cols="3">
+          <v-autocomplete :label="$t('message.search.examination')" variant="outlined" hide-details
+            menu-icon="mdi-chevron-down"
+            :items="['Ultrasonografi', 'Biopsi', 'Spirometri', 'CT Scan (Computed Tomography)', 'Rontgen (X-ray)', 'Endoskopi']"></v-autocomplete>
+        </v-col>
+        <v-col cols="2.5">
+          <v-text-field :label="$t('message.search.noreg')" variant="outlined" hide-details
+            append-inner-icon="mdi-magnify"></v-text-field>
+        </v-col>
+        <v-col cols="2.5">
+          <v-autocomplete :label="$t('message.search.status')" variant="outlined" hide-details
+            menu-icon="mdi-chevron-down" :items="['belum verifikasi', 'sudah verifikasi',]"></v-autocomplete>
+        </v-col>
+        <v-col cols="1">
+          <v-btn variant="flat" small style="height: 100%;" class="bg-primary rounded-lg">
+            <iconify-icon style="font-size: 2rem;" icon="fluent:search-20-regular"></iconify-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script type="module">
+export default {
+  name: "SearchVerificationLeft",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {
+    resulttype() {
+      return this.$store.state.verification.result_type;
+    }
+  },
+  methods: {
+    
+  },
+  wacth: {
+
+  }
+}
+</script>

result-verification-radiodiagnostik/components/verificationLeftList.vue

@@ -0,0 +1,129 @@
+<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: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 class="text-center">
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.ordernumber }}</p>
+                                <p class="mb-2">
+                                    <v-chip label size="small">
+                                        {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td >
+                            <p>{{ item.patient_fullname }}</p>
+                        </td>
+                        <td >
+                            <p class="font-weight-medium">{{ item.test_name }}</p>
+                        </td>
+                        <td class="text-center" >
+                            <div class="d-flex justify-center">
+                                <div :dark="item.validation_old != 'Y'"
+                                    class="pointer bg-error-lighten rounded-lg"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
+                                    <iconify-icon class="text-error" style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-24-regular"></iconify-icon>
+                                </div>
+                                <div :disabled="item.validation == 'Y'"
+                                    class="pointer bg-success-lighten rounded-lg ml-2"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
+                                    <iconify-icon class="text-success" style="font-size: 1.5rem;"
+                                        icon="fluent:checkmark-24-regular"></iconify-icon>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<style scoped>
+.row-pointer>>>tbody tr :hover {
+    cursor: pointer;
+}
+</style>
+
+<script type="module">
+export default {
+    name: "verificationLeftList",
+    data() {
+        return {
+            headers: [
+                {
+                    align: 'center',
+                    key: 'name',
+                    sortable: false,
+                    width: "10%",
+                    title: this.$t('message.tableListPatient.noreg'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'name',
+                    sortable: false,
+                    width: "40%",
+                    title: this.$t('message.tableListPatient.name'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'left',
+                    key: 'name',
+                    sortable: false,
+                    width: "45%",
+                    title: this.$t('message.tableListPatient.examination'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'validasi',
+                    sortable: false,
+                    width: "5%",
+                    title: this.$t('message.tableListPatient.verification'),
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        xpatients() {
+            return this.$store.state.verification.patients
+        },
+        selected_patient: {
+            get() {
+                return this.$store.state.verification.selected_patient
+            },
+            set(val) {
+                this.$store.commit("verification/setSelectedPatient", val)
+            }
+        }
+    },
+    methods: {
+        isSelected(p) {
+            return p.trx_id == this.$store.state.verification.selected_patient.trx_id
+        },
+        selectMe(data) {
+            this.$store.commit("verification/setSelectedPatient", data)
+        }
+    },
+    wacth: {
+
+    }
+}
+</script>

result-verification-radiodiagnostik/components/verificationRightList.vue

@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-data-table :headers="headers" :items="xdetails" return-object hide-default-footer class="pt-5">
+                <template v-slot:headers="{ columns }">
+                    <tr>
+                        <template v-for="column in columns" :key="column.key">
+                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                <span>{{ column.title }}</span>
+                            </td>
+                        </template>
+                    </tr>
+                </template>
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td class="text-center">
+                            <v-checkbox v-model="item.chex" @change="selectMe()" />
+                        </td>
+                        <td class="text-center">
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.ordernumber }}</p>
+                                <p class="mb-2">
+                                    <v-chip label size="small">
+                                        {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            <p class="font-weight-medium">{{ item.patient_fullname }}</p>
+                        </td>
+                        <td class="text-center">
+                            <p class="mt-2 mb-2">{{ item.group_name }}</p>
+                            <p class="mb-2">
+                                <v-chip label size="small">
+                                    {{ item.delivery }}
+                                </v-chip>
+                            </p>
+                        </td>
+                        <td class="text-center">
+                            <p>{{ item.test_name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<style scoped>
+.pointer {
+    cursor: pointer;
+}
+
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
+.v-table .v-table__wrapper>table>thead>tr>th {
+    border-bottom: dashed 1px #EEEEEE;
+}
+</style>
+
+<script type="module">
+export default {
+    name: "verificationRightList",
+    data() {
+        return {
+            menu: false,
+            headers: [
+                {
+                    align: 'center',
+                    key: 'select',
+                    sortable: false,
+                    width: "5%",
+                    title: "",  // kolom untuk checkbox
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'noreg',
+                    sortable: false,
+                    width: "25%",
+                    title: this.$t('message.tableDetailPatient.noreg'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'name',
+                    sortable: false,
+                    width: "25%",
+                    title: this.$t('message.tableDetailPatient.name'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'group',
+                    sortable: false,
+                    width: "25%",
+                    title: this.$t('message.tableDetailPatient.group'),
+                    class: "font-weight-bold",
+                },
+                {
+                    align: 'center',
+                    key: 'examination',
+                    sortable: false,
+                    width: "25%",
+                    title: this.$t('message.tableDetailPatient.examination'),
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        xdetails() {
+            return this.$store.state.verification.details
+        },
+        btn_hide: {
+            get() {
+                return this.$store.state.verification.btn_hide
+            },
+            set(val) {
+                this.$store.commit("verification/update_btn_hide", val)
+            }
+        },
+    },
+    methods: {
+        selectMe() {
+            this.btn_hide = true
+            // Ambil item yang dipilih
+            var selectedItems = this.xdetails.filter(item => item.chex);
+            console.log("Selected items:", selectedItems);
+            if (selectedItems.length > 0) {
+                this.btn_hide = false
+            }
+
+            // Kirim data yang dipilih ke store
+            this.$store.commit("verification/setSelectedTransaction", selectedItems);
+        }
+    },
+    wacth: {
+
+    }
+}
+</script>

result-verification-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 verification from "./modules/verification.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          verification: verification,
+        },
+      });
+      const options = {
+        moduleCache: {
+          vue: Vue,
+        },
+        getFile(url) {
+          return fetch(url).then((response) =>
+            response.ok ? response.text() : Promise.reject(response)
+          );
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      // Locale messages
+      const messages = CustomMessages;
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback locale
+        messages, // Set locale messages
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-verif-component></main-verif-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-verif-component": "./components/mainVerif.vue",
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>

result-verification-radiodiagnostik/language.js

@@ -0,0 +1,51 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search: {
+                resulttype: "Result Type",
+                examination:"Examination",
+                noreg: "No. Reg / Name",
+                status: "Status",
+                resultcollection: "Result Collection",
+            },
+            toolbalTitle: "PATIENT",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+                examination: "EXAMINATION",
+                verification: "VERIFICATION",
+            },
+            tableDetailPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+                group: "GROUP",
+                examination: "EXAMINATION"
+            }
+        },
+    },
+    id: {
+        message: {
+            search: {
+                resulttype: "Tipe Hasil",
+                examination:"Pemeriksaan",
+                noreg: "No. Reg / Nama",
+                status: "Status",
+                resultcollection: "Pengambilan Hasil",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+                examination: "PEMERIKSAAN",
+                verification: "VERIFIKASI",
+            },
+            tableDetailPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+                group:"GROUP",
+                examination: "PEMERIKSAAN"
+
+            }
+        },
+    },
+};

result-verification-radiodiagnostik/modules/verification.js

@@ -0,0 +1,242 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            startdateleft: new Date(),
+            enddateleft: new Date(),
+            patients: [
+                {
+                    "trx_id": "29144",
+                    "status_val2": "N",
+                    "orderid": "130716",
+                    "ids": "1587254",
+                    "status": "X",
+                    "ordernumber": "02300010DB",
+                    "ordernumber_ext": "023M4M36DB",
+                    "patient_fullname": "NY SAFINA",
+                    "sexname": "PEREMPUAN.",
+                    "orderdate": "30-11-2021 11:35",
+                    "dob": "19-03-1947",
+                    "umur": "74 TAHUN 8 BULAN 11 HARI",
+                    "languange_name": "Bahasa Indonesia",
+                    "test_name": "Thorax PA (CR)",
+                    "details": "",
+                    "verifications": [
+                        {
+                            "id": "1",
+                            "xid": "0",
+                            "chex": false,
+                            "note": "",
+                            "label": "Hasil , image, dan amplop belum sesuai"
+                        }
+                    ],
+                    "iscito": "N",
+                    "type": "xray"
+                },
+                {
+                    "trx_id": "29165",
+                    "status_val2": "N",
+                    "orderid": "130806",
+                    "ids": "1589374",
+                    "status": "X",
+                    "ordernumber": "02900018DB",
+                    "ordernumber_ext": "029G4P36DB",
+                    "patient_fullname": "TN NANANG RUDY U",
+                    "sexname": "LAKI - LAKI ",
+                    "orderdate": "28-05-2022 11:08",
+                    "dob": "06-05-1979",
+                    "umur": "43 TAHUN 0 BULAN 22 HARI",
+                    "languange_name": "Bahasa Indonesia",
+                    "test_name": "Thorax PA (CR)",
+                    "details": "",
+                    "verifications": [
+                        {
+                            "id": "1",
+                            "xid": "0",
+                            "chex": false,
+                            "note": "",
+                            "label": "Hasil , image, dan amplop belum sesuai"
+                        }
+                    ],
+                    "iscito": "N",
+                    "type": "xray"
+                },
+                {
+                    "trx_id": "29340",
+                    "status_val2": "N",
+                    "orderid": "131898",
+                    "ids": "1618084",
+                    "status": "X",
+                    "ordernumber": "04700009LA",
+                    "ordernumber_ext": "047U9S92LA",
+                    "patient_fullname": "TN ALBINUS SUIPNO",
+                    "sexname": "LAKI - LAKI ",
+                    "orderdate": "02-11-2023 08:26",
+                    "dob": "04-02-1990",
+                    "umur": "33 TAHUN 8 BULAN 28 HARI",
+                    "languange_name": "Bahasa Indonesia",
+                    "test_name": "Thorax PA (CR)",
+                    "details": "",
+                    "verifications": [
+                        {
+                            "id": "1",
+                            "xid": "0",
+                            "chex": false,
+                            "note": "",
+                            "label": "Hasil , image, dan amplop belum sesuai"
+                        }
+                    ],
+                    "iscito": "N",
+                    "type": "xray"
+                },
+                {
+                    "trx_id": "29421",
+                    "status_val2": "N",
+                    "orderid": "132157",
+                    "ids": "1622402",
+                    "status": "X",
+                    "ordernumber": "05300003LA",
+                    "ordernumber_ext": "053N4G33LA",
+                    "patient_fullname": "SDRI YACOBA",
+                    "sexname": "PEREMPUAN.",
+                    "orderdate": "03-05-2024 11:04",
+                    "dob": "27-05-1950",
+                    "umur": "73 TAHUN 11 BULAN 6 HARI",
+                    "languange_name": "Bahasa Indonesia",
+                    "test_name": "Thorax PA (CR)",
+                    "details": "",
+                    "verifications": [
+                        {
+                            "id": "1",
+                            "xid": "0",
+                            "chex": false,
+                            "note": "",
+                            "label": "Hasil , image, dan amplop belum sesuai"
+                        }
+                    ],
+                    "iscito": "N",
+                    "type": "xray"
+                },
+            ],
+            result_type: [
+                "Ultrasonografi", "Biopsi", "Spirometri", "Rontgen (X-ray)"
+            ],
+            selected_patient: {},
+            selected_transaction: [],
+            btn_hide: true,
+            details: [
+                {
+                    "xid": "31",
+                    "ids": "411",
+                    "deliveries_id": "24^1^1",
+                    "deliveries_name": "Ambil Sendiri",
+                    "patient_fullname": "Mr COBA",
+                    "orderdate": "09-09-2020 17:23",
+                    "promise_datetime": "10-09-2020 13:00",
+                    "orderid": "13",
+                    "ordernumber": "00900013LA",
+                    "ordernumber_ext": "009P8M39LA",
+                    "group_id": "4",
+                    "group_name": "Rontgen",
+                    "delivery": "Ambil Sendiri",
+                    "chex": false,
+                    "test_name": "Thorax PA (CR)",
+                    "test_id": "2146",
+                    "group_flag_test": "N",
+                    "promise_id": "39"
+                },
+                {
+                    "xid": "31",
+                    "ids": "411",
+                    "deliveries_id": "25^3^3",
+                    "deliveries_name": "Email Pasien",
+                    "patient_fullname": "Mr COBA",
+                    "orderdate": "09-09-2020 17:23",
+                    "promise_datetime": "10-09-2020 13:00",
+                    "orderid": "13",
+                    "ordernumber": "00900013LA",
+                    "ordernumber_ext": "009P8M39LA",
+                    "group_id": "4",
+                    "group_name": "Rontgen",
+                    "delivery": "Email Pasien",
+                    "chex": false,
+                    "test_name": "Thorax PA (CR)",
+                    "test_id": "2146",
+                    "group_flag_test": "N",
+                    "promise_id": "39"
+                },
+                {
+                    "xid": "31",
+                    "ids": "411",
+                    "deliveries_id": "26^4^6",
+                    "deliveries_name": "Whatsapp Pasien",
+                    "patient_fullname": "Mr COBA",
+                    "orderdate": "09-09-2020 17:23",
+                    "promise_datetime": "10-09-2020 13:00",
+                    "orderid": "13",
+                    "ordernumber": "00900013LA",
+                    "ordernumber_ext": "009P8M39LA",
+                    "group_id": "4",
+                    "group_name": "Rontgen",
+                    "delivery": "Whatsapp Pasien",
+                    "chex": false,
+                    "test_name": "Thorax PA (CR)",
+                    "test_id": "2146",
+                    "group_flag_test": "N",
+                    "promise_id": "39"
+                },
+                {
+                    "xid": "35312",
+                    "ids": "1628590",
+                    "deliveries_id": "180534^2^2",
+                    "deliveries_name": "Alamat Pasien",
+                    "patient_fullname": "Tn COCOBA / 654545",
+                    "orderdate": "11-09-2024 15:08",
+                    "promise_datetime": "11-09-2024 20:30",
+                    "orderid": "132338",
+                    "ordernumber": "05700053LA",
+                    "ordernumber_ext": "057N9U96LA",
+                    "group_id": "6",
+                    "group_name": "USG",
+                    "delivery": "Alamat Pasien",
+                    "chex": false,
+                    "test_name": "USG Leher",
+                    "test_id": "2915",
+                    "group_flag_test": "Y",
+                    "promise_id": "226948"
+                }
+            ]
+        };
+    },
+    mutations: {
+        setStartDateLeft(state, data) {
+            state.startdateleftdate = data;
+        },
+        setEndDateLeft(state, data) {
+            state.enddateleft = data;
+        },
+        setPatients(state, data) {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setSelectedTransaction(state, data) {
+            state.selected_transaction = data
+        },
+        setDetails(state, data) {
+            state.details = data
+        },
+        setResultTypes(state, data) {
+            state.result_type = data
+        },
+        update_btn_hide(state, val) {
+            state.btn_hide = val
+        },
+    },
+    actions: {
+
+    }
+};
+export default store