Initial import

one-ui/system/one-inject-price/api/courier.js

@@ -0,0 +1,57 @@
+// http://devkedungdororaya.aplikasi.web.id/one-api/v1/courier/mdcourier/search
+const URL = "/one-api/v1/courier/mdcourier/";
+
+export async function search(prm) {
+    try {
+        var resp = await axios.post(URL + 'search', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function add(prm) {
+    try {
+        var resp = await axios.post(URL + 'add', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function deleteData(prm) {
+    try {
+        var resp = await axios.post(URL + 'delete', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-inject-price/api/holiday.js

@@ -0,0 +1,93 @@
+const URL = "/one-api/v1/masterdata/publicholiday/";
+// https://devbandungraya.aplikasi.web.id/one-api/v1/masterdata/publicholiday/gettype
+
+export async function gettype(prm) {
+    try {
+        var resp = await axios.post(URL + 'gettype', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function add(prm) {
+    try {
+        var resp = await axios.post(URL + 'add', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function edit(prm) {
+    try {
+        var resp = await axios.post(URL + 'edit', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function deleteData(prm) {
+    try {
+        var resp = await axios.post(URL + 'delete', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function search(prm) {
+    try {
+        var resp = await axios.post(URL + 'search', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-inject-price/api/patient.js

@@ -0,0 +1,74 @@
+// http://devbandungraya.aplikasi.web.id/one-api/mockup/injectprice/injectprice/getCompany/
+const URL = "/one-api/mockup/injectprice/injectprice/";
+
+export async function getCompany(prm) {
+    try {
+        var resp = await axios.post(URL + 'getCompany', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function getMou(prm) {
+    try {
+        var resp = await axios.post(URL + 'getMou', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function getTest(prm) {
+    try {
+        var resp = await axios.post(URL + 'getTest', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        return resp.data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function inject(prm) {
+    try {
+        var resp = await axios.post(URL + 'inject', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-inject-price/components/oneListConfirmCourier.vue

@@ -0,0 +1,292 @@
+<template>
+  <v-layout class="fill-height" column>
+    <!-- Alert dialog -->
+    <v-dialog v-model="dialog_delete" persistent max-width="290">
+      <v-card>
+        <!-- <v-card-title class="headline">Peringatan</v-card-title> -->
+        <v-card-text>
+          Apakah yakin anda akan membatalkan staff "{{ selected.staffName }}"
+          sebagai kurir ?</v-card-text
+        >
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="green darken-1" flat @click="dialog_delete = false"
+            >tidak</v-btn
+          >
+          <v-btn color="red darken-1" flat @click="delete_kurir">Ya</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <!-- End alert dialog -->
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+      color="success"
+      :value="snackbar"
+    >
+      {{ snackbar_msg }}
+      <v-btn flat @click="snackbar = false"> Tutup </v-btn>
+    </v-snackbar>
+    <!-- End Snackbar -->
+
+    <!-- ERROR DIALOG -->
+    <v-dialog v-model="error_dialog" max-width="500px">
+      <v-card>
+        <v-card-title>
+          <span>ERROR !</span>
+          <v-spacer></v-spacer>
+        </v-card-title>
+        <v-divider></v-divider>
+        <div class="ma-3 red--text">{{ error_msg }}</div>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" flat @click="error_dialog = false"
+            >Close</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <!-- END ERROR DIALOG -->
+
+    <v-card class="mb-2 pa-2 searchbox">
+      <v-layout>
+        <v-flex xs6>
+          <v-text-field
+            class="xs3 ma-1 mini-select"
+            v-model="name"
+            style="font-size: 14px;"
+            label="Cari"
+            placeholder="Masukkan nama atau username"
+            outline
+            hide-details
+          ></v-text-field>
+        </v-flex>
+      </v-layout>
+    </v-card>
+    <v-card>
+      <v-layout align-center row>
+        <v-flex
+          xs12
+          pl-2
+          style="max-height: 600px; overflow: auto;"
+          pr-2
+          pt-2
+          pb-2
+        >
+          <v-data-table
+            :headers="headers"
+            :items="couriers"
+            :loading="isLoading"
+            hide-actions
+            class="elevation-1"
+          >
+            <template v-slot:items="props">
+              <td class="text-xs-left pa-2">{{ props.item.staffName }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.username }}</td>
+              <td class="text-xs-center pa-2 d-flex justify-content-center">
+                <v-flex justify-center>
+                  <v-checkbox
+                    v-model="isCourier"
+                    :disabled="isLoading"
+                    @click="changeCourir(props.item.userID, props.item.staffID, props.item.courierID ?? 'new', props.item)"
+                    :value="props.item.userID ?? 'new'"
+                  ></v-checkbox>
+                </v-flex>
+              </td>
+            </template>
+          </v-data-table>
+          <v-divider></v-divider>
+          <v-layout>
+            <v-flex>
+              <v-pagination
+                style="margin-top: 10px; margin-bottom: 10px;"
+                v-model="curr_page"
+                :length="total_page"
+              >
+              </v-pagination>
+            </v-flex>
+          </v-layout>
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </v-layout>
+</template>
+
+<style scoped>
+  .searchbox .v-input.v-text-field .v-input__slot {
+    min-height: 60px;
+  }
+
+  .searchbox .v-btn {
+    min-height: 60px;
+  }
+
+  table.v-table tbody td,
+  table.v-table tbody th {
+    height: 40px;
+  }
+
+  table.v-table thead tr {
+    height: 40px;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        //dropdown courier
+        dialog_delete: false,
+        selected: {},
+        headers: [
+          {
+            text: "NAMA",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "50%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "USERNAME",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "45%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "AKSI",
+            align: "center",
+            sortable: false,
+            value: "lab",
+            width: "5%",
+            class: "text-xs-center pa-2 blue-grey white--text",
+          },
+        ],
+      };
+    },
+    mounted() {
+      this.$store.dispatch("courier/search");
+    },
+    computed: {
+      name: {
+        get() {
+          return this.$store.state.courier.name;
+        },
+        set(val) {
+          this.$store.commit("courier/update_name", val);
+        },
+      },
+      curr_page: {
+        get() {
+          return this.$store.state.courier.curr_page;
+        },
+        set(val) {
+          this.$store.commit("courier/update_curr_page", val);
+          this.$store.dispatch("courier/search");
+        },
+      },
+      isCourier: {
+        get() {
+          return this.$store.state.courier.is_courier;
+        },
+        // set(val) {
+        //     console.log("valllll :" + val)
+        //     // this.$store.commit("courier/update_is_courier", val)
+
+        // }
+      },
+      couriers() {
+        return this.$store.state.courier.couriers;
+      },
+      isLoading() {
+        return this.$store.state.courier.loading;
+      },
+      total_page: {
+        get() {
+          return this.$store.state.courier.total;
+        },
+        set(val) {
+          this.$store.commit("courier/update_total", val);
+        },
+      },
+      snackbar: {
+        get() {
+          return this.$store.state.courier.snackbar;
+        },
+        set(val) {
+          this.$store.commit("courier/update_snackbar", val);
+        },
+      },
+      error_dialog: {
+        get() {
+          return this.$store.state.courier.error_dialog;
+        },
+        set(val) {
+          this.$store.commit("courier/update_error_dialog", val);
+        },
+      },
+      snackbar_msg() {
+        return this.$store.state.courier.snackbar_msg;
+      },
+      error_msg() {
+        return this.$store.state.courier.error_message;
+      },
+    },
+    methods: {
+      changeCourir(userID, staffID, type, data) {
+        this.selected = data;
+        console.log("change courier" + userID + " " + staffID);
+        var tempCourrier = JSON.stringify(this.isCourier);
+        var arrCourier = JSON.parse(tempCourrier);
+        console.log(type);
+        if (type !== "new") {
+          this.dialog_delete = true;
+          // console.log("hapus kurir");
+          // this.$store.dispatch("courier/deleteData", {
+          //     "courierID": type
+          // });
+          // arrCourier.filter((e) => e === type);
+        } else {
+          var validation = arrCourier.includes(userID);
+          if (!validation) {
+            this.$store.dispatch("courier/add", {
+              staffID: staffID,
+              userID: userID,
+            });
+            console.log("add kurir");
+            arrCourier.push(userID);
+          }
+        }
+        console.log(arrCourier);
+        this.$store.commit("courier/update_is_courier", arrCourier);
+        this.$store.dispatch("courier/search");
+      },
+      delete_kurir() {
+        console.log("hapus kurir");
+        this.$store.dispatch("courier/deleteData", {
+          courierID: this.selected.courierID,
+        });
+        this.dialog_delete = false;
+      },
+
+      thr_search: _.debounce(function () {
+        this.$store.dispatch("courier/search");
+      }, 1000),
+    },
+
+    watch: {
+      name(val, old) {
+        this.name = val;
+        this.thr_search();
+      },
+    },
+  };
+</script>

one-ui/system/one-inject-price/components/onePublicHoliday.vue

@@ -0,0 +1,992 @@
+<template>
+  <v-layout class="fill-height" column>
+    <!-- Alert dialog -->
+    <v-dialog v-model="dialogForm" persistent max-width="500">
+      <v-card>
+        <v-card-title class="headline">FORM</v-card-title>
+        <v-card-text>
+          <v-text-field
+            class="xs3 mb-3 mini-select"
+            v-model="name"
+            :disabled="isLoading"
+            style="font-size: 14px;"
+            label="Nama"
+            placeholder="Masukkan nama"
+            outline
+            hide-details
+          ></v-text-field>
+          <v-menu
+            v-model="menuFormDateStart"
+            :close-on-content-click="false"
+            :nudge-right="40"
+            :disabled="isLoading"
+            lazy
+            transition="scale-transition"
+            offset-y
+            full-width
+            max-width="290px"
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                class=""
+                v-model="formatedStartDate"
+                label="Tanggal Awal"
+                outline
+                hide-details
+                readonly
+                v-on="on"
+                @blur="deFormatedDate(formatedStartDate)"
+              ></v-text-field>
+            </template>
+
+            <v-date-picker
+              v-model="date"
+              no-title
+              @input="menuFormDateStart = false"
+            ></v-date-picker>
+          </v-menu>
+          <v-select
+            :disabled="isLoading"
+            :items="yearList"
+            v-model="year"
+            class="mini-select mt-3"
+            label="Tahun"
+            hide-details
+            outline
+          ></v-select>
+          <v-text-field
+            :disabled="isLoading"
+            class="xs3 mt-3 mini-select"
+            v-model="desc"
+            style="font-size: 14px;"
+            label="Deskripsi"
+            outline
+            hide-details
+          ></v-text-field>
+          <v-select
+            :disabled="isLoading"
+            :items="type"
+            v-model="selectedType"
+            class="mini-select mt-3"
+            label="Tipe"
+            hide-details
+            outline
+          ></v-select>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color=" red darken-1"
+            :disabled="isLoading"
+            flat
+            @click="dialogForm = false"
+            >Batal</v-btn
+          >
+          <v-btn
+            color="green darken-1"
+            :disabled="isLoading"
+            flat
+            :loading="isLoading"
+            @click="saveHoliday()"
+            >Simpan</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="dialog_delete" persistent max-width="290">
+      <v-card>
+        <!-- <v-card-title class="headline">Peringatan</v-card-title> -->
+        <v-card-text>
+          Apakah yakin menghapus libur
+          {{ selectedHoliday.holiday_name }} ?</v-card-text
+        >
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            :disabled="isLoading"
+            color="green darken-1"
+            flat
+            @click="dialog_delete = false"
+            >tidak</v-btn
+          >
+          <v-btn
+            :loading="isLoading"
+            color="red darken-1"
+            flat
+            @click="deleteHoliday()"
+            >Ya</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <!-- End alert dialog -->
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+      color="success"
+      :value="snackbar"
+    >
+      {{ snackbar_msg }}
+      <v-btn flat @click="snackbar = false"> Tutup </v-btn>
+    </v-snackbar>
+    <!-- End Snackbar -->
+
+    <!-- ERROR DIALOG -->
+    <v-dialog v-model="error_dialog" max-width="500px">
+      <v-card>
+        <v-card-title>
+          <span>ERROR !</span>
+          <v-spacer></v-spacer>
+        </v-card-title>
+        <v-divider></v-divider>
+        <div class="ma-3 red--text" v-html="error_message"></div>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" flat @click="error_dialog = false"
+            >Close</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <!-- END ERROR DIALOG -->
+
+    <v-toolbar dark color="primary">
+      <v-toolbar-title class="white--text">INJECT HARGA AGREEMENT</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <!-- <v-btn icon @click="openAdd()">
+        <v-icon>add_box</v-icon>
+      </v-btn> -->
+      <v-btn
+        color="warning"
+        v-if="data_csv.length > 0"
+        :disabled="isLoading"
+        @click="inject()"
+        >Simpan</v-btn
+      >
+    </v-toolbar>
+    <v-card class="mb-2 pa-2 searchbox">
+      <v-layout>
+        <v-flex xs4 pa-2>
+          <v-autocomplete
+            v-model="selectedCompany"
+            :items="companyList"
+            :loading="isLoading"
+            :search-input.sync="searchCompany"
+            hide-no-data
+            hide-details
+            outline
+            item-text="M_CompanyName"
+            label="Pilih Company"
+            placeholder="Start typing to Search"
+            return-object
+          ></v-autocomplete>
+        </v-flex>
+        <v-flex xs4 pa-2>
+          <v-autocomplete
+            v-model="selectedMou"
+            :items="mouList"
+            :loading="isLoading"
+            :search-input.sync="searchMou"
+            hide-no-data
+            hide-details
+            outline
+            item-text="M_MouName"
+            label="Pilih Agreement"
+            placeholder="Start typing to Search"
+            return-object
+          ></v-autocomplete>
+        </v-flex>
+      </v-layout>
+      <v-layout>
+        <v-flex xs4 pa-2>
+          <p class="mb-0 mt-3 subheading">
+            silahkan download template di
+            <span
+              @click="downloadcsv()"
+              style="cursor: pointer;"
+              class="info--text lighten-3--text"
+              >sini</span
+            >
+          </p>
+        </v-flex>
+        <v-flex xs4 pa-2>
+          <v-divider class="my-2"></v-divider>
+            <input
+              accept=".xlsx"
+              type="file"
+              id="csv_file"
+              :disabled="isLoading"
+              name="csv_file"
+              class="form-control"
+              @change="loadCSV($event)"
+            />
+            <v-btn @click="resetInputFile()" :disabled="isLoading" icon>
+              <v-icon color="red">cancel</v-icon>
+            </v-btn>
+            <v-progress-circular
+              v-if="isLoading"
+              :indeterminate="true"
+              color="primary"
+            ></v-progress-circular>
+        </v-flex>
+      </v-layout>
+    </v-card>
+    <v-card>
+      <v-layout align-center row>
+        <v-flex
+          xs12
+          pl-2
+          style="max-height: 70vh; overflow: auto;"
+          pr-2
+          pt-2
+          pb-2
+        >
+          <!-- hide-actions -->
+          <v-data-table
+            :headers="headers"
+            :items="data_csv"
+            :loading="isLoading"
+            class="elevation-1"
+          >
+            <template v-slot:items="props">
+              <td class="text-xs-left pa-2">{{ props.item.TEST_CODE }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.TEST_NAME }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.HARGA }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.DISKON_PERSEN }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.DISKON_RUPIAH }}</td>
+              <td class="text-xs-left pa-2">{{ props.item.TOTAL }}</td>
+            </template>
+          </v-data-table>
+          <v-divider></v-divider>
+          <!-- <v-layout>
+            <v-flex>
+              <v-pagination
+                style="margin-top: 10px; margin-bottom: 10px;"
+                v-model="curr_page"
+                :length="total_page"
+              >
+              </v-pagination>
+            </v-flex>
+          </v-layout> -->
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </v-layout>
+</template>
+
+<style scoped>
+  .searchbox .v-input.v-text-field .v-input__slot {
+    min-height: 60px;
+  }
+
+  .searchbox .v-btn {
+    min-height: 60px;
+  }
+
+  table.v-table tbody td,
+  table.v-table tbody th {
+    height: 40px;
+  }
+
+  table.v-table thead tr {
+    height: 40px;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        //dropdown holiday
+        action: "add",
+        yearList: [],
+        menu: false,
+        yearTEST_NAME: new Date().getFullYear().toString(), // Set the initial year to current year
+        activePicker: "YEAR", // Display year picker directly
+        minYear: "1900", // Minimum selectable year
+        maxYear: new Date().getFullYear().toString(),
+        menuFormDateStart: false,
+        menuFormDateFilter: false,
+        menuFormDate: false,
+
+        selected: {},
+        headers: [
+          {
+            text: "TEST CODE",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "20%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "TEST NAME",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "30%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "HARGA",
+            align: "left",
+            sortable: false,
+            value: "lab",
+            width: "10%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "DISKON PERSEN",
+            align: "left",
+            sortable: false,
+            value: "lab",
+            width: "10%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "DISKON RUPIAH",
+            align: "left",
+            sortable: false,
+            value: "lab",
+            width: "10%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          },
+          {
+            text: "TOTAL",
+            align: "left",
+            sortable: false,
+            value: "lab",
+            width: "10%",
+            class: "text-xs-left pa-2 blue-grey white--text",
+          }
+        ],
+      };
+    },
+    mounted() {
+      // this.generateYear();
+      // console.log(this.yearList);
+      // this.$store.dispatch("patient/gettype");
+      // this.$store.dispatch("patient/search");
+    },
+    computed: {
+      formatedStartDate() {
+        return this.formatDate(this.date);
+      },
+      formatedEndDate() {
+        return this.formatDate(this.date);
+      },
+      data_csv: {
+        get() {
+          return this.$store.state.patient.data_csv;
+        },
+        set(val) {
+          this.$store.commit("patient/update_data_csv", val);
+        },
+      },
+      companyList: {
+        get() {
+          return this.$store.state.patient.companyList;
+        },
+        set(val) {
+          this.$store.commit("patient/update_companyList", val);
+        },
+      },
+      selectedCompany: {
+        get() {
+          return this.$store.state.patient.selectedCompany;
+        },
+        set(val) {
+          this.$store.commit("patient/update_selectedCompany", val);
+        },
+      },
+      searchCompany: {
+        get() {
+          return this.$store.state.patient.searchCompany;
+        },
+        set(val) {
+          this.$store.commit("patient/update_searchCompany", val);
+        },
+      },
+      mouList: {
+        get() {
+          return this.$store.state.patient.mouList;
+        },
+        set(val) {
+          this.$store.commit("patient/update_mouList", val);
+        },
+      },
+      selectedMou: {
+        get() {
+          return this.$store.state.patient.selectedMou;
+        },
+        set(val) {
+          this.$store.commit("patient/update_selectedMou", val);
+        },
+      },
+      searchMou: {
+        get() {
+          return this.$store.state.patient.searchMou;
+        },
+        set(val) {
+          this.$store.commit("patient/update_searchMou", val);
+        },
+      },
+      isLoading: {
+        get() {
+          return this.$store.state.patient.isLoading;
+        },
+        set(val) {
+          this.$store.commit("patient/update_isLoading", val);
+        },
+      },
+      dialogForm: {
+        get() {
+          return this.$store.state.patient.dialogForm;
+        },
+        set(val) {
+          this.$store.commit("patient/update_dialogForm", val);
+        },
+      },
+      dialog_delete: {
+        get() {
+          return this.$store.state.patient.dialog_delete;
+        },
+        set(val) {
+          this.$store.commit("patient/update_dialog_delete", val);
+        },
+      },
+      year: {
+        get() {
+          return this.$store.state.patient.year;
+        },
+        set(val) {
+          this.$store.commit("patient/update_year", val);
+        },
+      },
+      yearFilter: {
+        get() {
+          return this.$store.state.patient.yearFilter;
+        },
+        set(val) {
+          this.$store.commit("patient/update_yearFilter", val);
+          this.$store.dispatch("patient/search");
+        },
+      },
+      date: {
+        get() {
+          return this.$store.state.patient.date;
+        },
+        set(val) {
+          this.$store.commit("patient/update_date", val);
+        },
+      },
+      type: {
+        get() {
+          return this.$store.state.patient.type;
+        },
+        set(val) {
+          this.$store.commit("patient/update_type", val);
+        },
+      },
+      selectedType: {
+        get() {
+          return this.$store.state.patient.selectedType;
+        },
+        set(val) {
+          this.$store.commit("patient/update_selectedType", val);
+        },
+      },
+      name: {
+        get() {
+          return this.$store.state.patient.name;
+        },
+        set(val) {
+          this.$store.commit("patient/update_name", val);
+        },
+      },
+      curr_page: {
+        get() {
+          return this.$store.state.patient.curr_page;
+        },
+        set(val) {
+          this.$store.commit("patient/update_curr_page", val);
+          this.$store.dispatch("patient/search");
+        },
+      },
+      isholiday: {
+        get() {
+          return this.$store.state.patient.is_holiday;
+        },
+        // set(val) {
+        //     console.log("valllll :" + val)
+        //     // this.$store.commit("patient/update_is_holiday", val)
+
+        // }
+      },
+      holidays() {
+        return this.$store.state.patient.holidays;
+      },
+      total_page: {
+        get() {
+          return this.$store.state.patient.TOTAL;
+        },
+        set(val) {
+          this.$store.commit("patient/update_total", val);
+        },
+      },
+      snackbar: {
+        get() {
+          return this.$store.state.patient.snackbar;
+        },
+        set(val) {
+          this.$store.commit("patient/update_snackbar", val);
+        },
+      },
+      error_dialog: {
+        get() {
+          return this.$store.state.patient.error_dialog;
+        },
+        set(val) {
+          this.$store.commit("patient/update_error_dialog", val);
+        },
+      },
+      name: {
+        get() {
+          return this.$store.state.patient.name;
+        },
+        set(val) {
+          this.$store.commit("patient/update_name", val);
+        },
+      },
+      desc: {
+        get() {
+          return this.$store.state.patient.desc;
+        },
+        set(val) {
+          this.$store.commit("patient/update_desc", val);
+        },
+      },
+      selectedHoliday: {
+        get() {
+          return this.$store.state.patient.selectedHoliday;
+        },
+        set(val) {
+          this.$store.commit("patient/update_selectedHoliday", val);
+        },
+      },
+      error_message: {
+        get() {
+          return this.$store.state.patient.error_message;
+        },
+        set(val) {
+          this.$store.commit("patient/update_error_message", val);
+        },
+      },
+      snackbar_msg() {
+        return this.$store.state.patient.snackbar_msg;
+      },
+      formatedYearFilter() {
+        return this.formatDate(this.yearFilter);
+      },
+    },
+    methods: {
+      inject() {
+        this.$store.dispatch("patient/inject");
+      },
+      downloadcsvold() {
+        let url = "./Template_user_mitra.xlsx";
+        fetch(url)
+          .then((response) => response.blob())
+          .then((blob) => {
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.setAttribute("download", "Template_user_mitra.xlsx");
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode.removeChild(link);
+            window.URL.revokeObjectURL(url);
+          });
+      },
+      downloadcsv() {
+    this.$store.dispatch("patient/downloadcsv")
+  },
+      resetInputFile() {
+        this.data_csv = [];
+        document.getElementById("csv_file").value = null;
+      },
+      cekKTP(nik, tanggal, bulan, tahun) {
+        console.log("nik", nik);
+        console.log("tanggal", tanggal);
+        console.log("bulan", bulan);
+        console.log("tahun", tahun);
+        return true;
+        if (nik.length !== 16) {
+          console.log("nik length tidak valid");
+          return false;
+        }
+
+        let d = parseInt(nik.substr(6, 2));
+        let m = parseInt(nik.substr(8, 2));
+        let y = parseInt(nik.substr(10, 2));
+        console.log("d", d);
+        console.log("m", m);
+        console.log("y", y);
+
+        // Jika tahun full, ambil 2 digit terakhir
+        if (tahun.toString().length === 4) {
+          tahun = tahun.toString().substr(2, 2);
+        }
+
+        if (d > 40) {
+          // Wanita
+          d = d + 40;
+        }
+
+        if (parseInt(tanggal) !== d) {
+          console.log("tanggal tidak valid");
+          return false;
+        }
+
+        if (parseInt(bulan) !== m) {
+          console.log("bulan tidak valid");
+          return false;
+        }
+
+        if (parseInt(tahun) !== y) {
+          console.log("tahun tidak valid");
+          return false;
+        }
+
+        // Setelah berhasil melewati rintangan, berarti nomornya valid (tidak 100% valid)
+        return true;
+      },
+      cekDataJSON(data) {
+        console.log("data cek json", data);
+        let message = "";
+        // console.log("data json");
+        // console.log(data);
+
+        // NAMA
+        //TANGGAL_LAHIR
+        //KTP
+        // JENIS_KELAMIN
+        // JABATAN
+        //KEDUDUKAN
+        //LOKASI
+        // PEKERJAAN
+        var day = moment(data.TANGGAL_LAHIR, "DD-MM-YYYY").format("DD");
+        var month = moment(data.TANGGAL_LAHIR, "DD-MM-YYYY").format("MM");
+        var year = moment(data.TANGGAL_LAHIR, "DD-MM-YYYY").format("YYYY");
+        console.log("tanggal lahir", data.TANGGAL_LAHIR);
+        console.log("day", day);
+        console.log("month", month);
+        console.log("year", year);
+        // entry.KTP = .KTP;
+
+        if (data.NAMA === "" || data.NAMA === null || data.NAMA === undefined) {
+          console.log("NAMA Tidak boleh kosong " + data.NAMA);
+          message += "NAMA Tidak boleh kosong <br>";
+        }
+        if (
+          data.TANGGAL_LAHIR === "" ||
+          data.TANGGAL_LAHIR === null ||
+          data.TANGGAL_LAHIR === undefined
+        ) {
+          console.log("TANGGAL LAHIR Tidak boleh kosong " + data.TANGGAL_LAHIR);
+          message += "TANGGAL LAHIR Tidak boleh kosong <br>";
+        }
+        if (data.NIK !== "" && data.NIK !== null && data.NIK !== undefined) {
+          if (!this.cekKTP(data.NIK, day, month, year)) {
+            console.log("NIK '" + data.NIK + "'' Tidak Valid");
+            message += "NIK '" + data.NIK + "'' Tidak Valid <br>";
+          }
+        }
+        if (
+          data.JENIS_KELAMIN === "" ||
+          data.JENIS_KELAMIN === null ||
+          data.JENIS_KELAMIN === undefined
+        ) {
+          console.log("JENIS KELAMIN Tidak boleh kosong " + data.JENIS_KELAMIN);
+          message += "JENIS KELAMIN Tidak boleh kosong <br>";
+        } else {
+          const validGender = ["L", "P"];
+          if (!validGender.includes(data.JENIS_KELAMIN)) {
+            console.log("JENIS KELAMIN Tidak Valid " + data.JENIS_KELAMIN);
+            message += "JENIS KELAMIN Tidak Valid <br>";
+          }
+        }
+        if (
+          data.JABATAN === "" ||
+          data.JABATAN === null ||
+          data.JABATAN === undefined
+        ) {
+          console.log("JABATAN Tidak boleh kosong " + data.JABATAN);
+          message += "JABATAN Tidak boleh kosong <br>";
+        }
+        if (
+          data.KEDUDUKAN === "" ||
+          data.KEDUDUKAN === null ||
+          data.KEDUDUKAN === undefined
+        ) {
+          console.log("KEDUDUKAN Tidak boleh kosong " + data.KEDUDUKAN);
+          message += "KEDUDUKAN Tidak boleh kosong <br>";
+        }
+        if (
+          data.LOKASI === "" ||
+          data.LOKASI === null ||
+          data.LOKASI === undefined
+        ) {
+          console.log("LOKASI Tidak boleh kosong " + data.LOKASI);
+          message += "LOKASI Tidak boleh kosong <br>";
+        }
+        if (
+          data.PEKERJAAN === "" ||
+          data.PEKERJAAN === null ||
+          data.PEKERJAAN === undefined
+        ) {
+          console.log("PEKERJAAN Tidak boleh kosong " + data.PEKERJAAN);
+          message += "PEKERJAAN Tidak boleh kosong <br>";
+        }
+        if (message === "") {
+          return [true, message];
+        } else {
+          message += "Nama : " + data.NAMA + "<br>";
+          message += "Tanggal Lahir : " + data.TANGGAL_LAHIR + "<br>";
+          message += "NIK : " + data.NIK + "<br>";
+          message += "Jenis Kelamin : " + data.JENIS_KELAMIN + "<br>";
+          message += "Jabatan : " + data.JABATAN + "<br>";
+          message += "Kedudukan : " + data.KEDUDUKAN + "<br>";
+          message += "Lokasi : " + data.LOKASI + "<br>";
+          message += "Pekerjaan : " + data.PEKERJAAN + "<br>";
+          message += "NIP : " + data.NIP + "<br>";
+          message += "HP : " + data.HP + "<br>";
+          message += "Alamat : " + data.ALAMAT + "<br>";
+          message += "No RM : " + data.NO_RM + "<br>";
+          return [false, message];
+        }
+      },
+      loadCSV(e) {
+        var vm = this;
+        this.isLoading = true;
+        var files = e.target.files,
+          f = files[0];
+        var reader = new FileReader();
+        reader.onload = function (e) {
+          var data = new Uint8Array(e.target.result);
+          var workbook = XLSX.read(data, {
+            type: "array",
+            cellText: true,
+            cellDates: true,
+          });
+          let sheetName = workbook.SheetNames[0];
+          console.log(workbook);
+          let worksheet = workbook.Sheets[sheetName];
+          // console.log(XLSX.utils.sheet_to_json(worksheet));
+          //var xdata = XLSX.utils.sheet_to_json(worksheet,{ raw:false,  dateNF: 'FMT 22'})
+          var data_json = [];
+          // console.log(xdata)
+          var date_data = XLSX.utils.sheet_to_json(worksheet, {
+            raw: false,
+            dateNF: "22",
+          });
+          var data_harga = XLSX.utils.sheet_to_json(worksheet, {
+            cellText: true,
+          });
+          var error = [];
+          // console.log("data_harga", data_harga)
+          date_data.forEach(function (entry, iidx) {
+            if (iidx > 0) {
+              console.log("entry", entry);
+              entry.TEST_CODE = data_harga[iidx].TEST_CODE ?? "";
+              entry.TEST_NAME = data_harga[iidx].TEST_NAME ?? "";
+              entry.HARGA = data_harga[iidx].HARGA ?? "";
+              entry.DISKON_PERSEN = data_harga[iidx].DISKON_PERSEN ?? "";
+              entry.DISKON_RUPIAH = data_harga[iidx].DISKON_RUPIAH ?? "";
+              entry.TOTAL = data_harga[iidx].TOTAL ?? "";
+              
+              
+                if (entry.HARGA !== "" && entry.HARGA !== null && entry.HARGA !== undefined) {
+  data_json.push(entry);
+}
+              
+            }
+          });
+          // var prm = {
+          //   xid: vm.selected_mgmmcu.Mgm_McuID,
+          //   corporateID: vm.selected_mgmmcu.Mgm_McuCorporateID,
+          //   data: data_json,
+          // };
+          console.log("data json");
+          console.log(data_json);
+          // console.log("data prm",prm)
+          //XLSX.utils.sheet_to_json(ws, {dateNF:"YYYY-MM-DD"})
+          // if (error.length != 0) {
+          //   // console.log("error", error)
+          //   vm.$store.commit("patient/update_error_identifier", error);
+          //   vm.dialog_identifier = true;
+          // } else {
+          //   // console.log("prm",prm)
+          //   vm.$store.dispatch("patient/savecsv", prm);
+          // }
+          vm.data_csv = data_json;
+        };
+
+        this.isLoading = false;
+
+        reader.readAsArrayBuffer(f);
+      },
+      checkSelectedCompany() {
+        console.log(
+          "cek selected company",
+          Object.keys(this.selectedCompany || {}).length
+        );
+        if (Object.keys(this.selectedCompany || {}).length === 0) {
+          console.log("false");
+          return false;
+        }
+        if (!this.selectedCompany || this.selectedCompany === null) {
+          console.log("false");
+          return false;
+        }
+        console.log("true");
+        return true;
+      },
+      openAdd() {
+        this.action = "add";
+        this.name = "";
+        this.date = moment(new Date()).format("YYYY-MM-DD");
+        this.year = moment(new Date()).format("YYYY");
+        this.desc = "";
+        this.selectedType = "";
+        this.dialogForm = true;
+      },
+      openEdit(data) {
+        this.action = "edit";
+        this.name = data.holiday_name;
+        this.date = data.holiday_date;
+        this.year = data.holiday_year;
+        this.desc = data.description;
+        this.selectedType = data.holiday_type;
+        this.selectedHoliday = data;
+        this.dialogForm = true;
+      },
+      openDelete(data) {
+        this.action = "delete";
+        this.selectedHoliday = data;
+        this.dialog_delete = true;
+      },
+      saveHoliday() {
+        if (this.action == "add") {
+          this.$store.dispatch("patient/add");
+        }
+        if (this.action == "edit") {
+          this.$store.dispatch("patient/edit");
+        }
+      },
+      deleteHoliday() {
+        this.$store.dispatch("patient/deleteData");
+      },
+      generateYear() {
+        const currentYear = new Date().getFullYear();
+        const startYear = currentYear - 5; // 5 tahun sebelum tahun ini
+        const endYear = currentYear + 10; // 10 tahun setelah tahun ini
+        let years = [];
+
+        for (let year = startYear; year <= endYear; year++) {
+          years.push(year.toString());
+        }
+
+        this.yearList = years;
+      },
+      save(selectedYear) {
+        this.menu = false;
+        this.yearTEST_NAME = selectedYear;
+      },
+      formatDate(date) {
+        if (!date) return null;
+
+        const [year, month, day] = date.split("-");
+        return `${day}-${month}-${year}`;
+      },
+      deFormatedDate(date) {
+        if (!date) return null;
+
+        const [day, month, year] = date.split("-");
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+      },
+      changeCourir(userID, staffID, type, data) {
+        this.selected = data;
+        console.log("change holiday" + userID + " " + staffID);
+        var tempCourrier = JSON.stringify(this.isholiday);
+        var arrholiday = JSON.parse(tempCourrier);
+        console.log(type);
+        if (type !== "new") {
+          this.dialog_delete = true;
+          // console.log("hapus kurir");
+          // this.$store.dispatch("patient/deleteData", {
+          //     "holidayID": type
+          // });
+          // arrholiday.filter((e) => e === type);
+        } else {
+          var validation = arrholiday.includes(userID);
+          if (!validation) {
+            this.$store.dispatch("patient/add", {
+              staffID: staffID,
+              userID: userID,
+            });
+            console.log("add kurir");
+            arrholiday.push(userID);
+          }
+        }
+        console.log(arrholiday);
+        this.$store.commit("patient/update_is_holiday", arrholiday);
+        this.$store.dispatch("patient/search");
+      },
+      delete_kurir() {
+        console.log("hapus kurir");
+        this.$store.dispatch("patient/deleteData", {
+          holidayID: this.selected.holidayID,
+        });
+        this.dialog_delete = false;
+      },
+
+      thr_search: _.debounce(function () {
+        this.$store.dispatch("patient/search");
+      }, 1000),
+    },
+
+    watch: {
+      // menuFormDateStart(val) {
+      //   val && setTimeout(() => (this.$refs.picker.activePicker = "YEAR"));
+      // },
+      searchCompany(val, old) {
+        if (val === "") return;
+        if (val === null) return;
+        if (val === old) return;
+        if (val.length < 2) return;
+        this.$store.dispatch("patient/getCompany", val);
+      },
+      searchMou(val, old) {
+        if (val === "") return;
+        if (val === null) return;
+        if (val === old) return;
+        if (val.length < 2) return;
+        this.$store.dispatch("patient/getMou", {search : val, companyid : this.selectedCompany.M_CompanyID});
+      },
+      name(val, old) {
+        this.name = val;
+        this.thr_search();
+      },
+    },
+  };
+</script>

one-ui/system/one-inject-price/index.php

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>One</title>
+    <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+    <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+    <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body v-on:key="doSomething">
+    <div v-cloak id="app">
+        <v-app id="smartApp">
+            <one-navbar></one-navbar>
+            <v-content style="background:#F5E8DF!important">
+                <v-container fluid class="pl-1 pr-1 pt-1 pb-1">
+                    <v-layout wrap>
+                        <v-flex xs12 class="left" pa-1>
+                            <one-public-holiday></one-public-holiday>
+                        </v-flex>
+                    </v-layout>
+                </v-container>
+            </v-content>
+            <one-footer> </one-footer>
+        </v-app>
+    </div>
+
+    <!-- Vendor -->
+    <script src="../../libs/vendor/moment.min.js"></script>
+    <script src="../../libs/vendor/numeral.min.js"></script>
+    <script src="../../libs/vendor/moment-locale-id.js"></script>
+    <script src="../../libs/vendor/lodash.js"></script>
+    <script src="../../libs/vendor/axios.min.js"></script>
+    <script src="../../libs/vendor/vue.js"></script>
+    <script src="../../libs/vendor/vuex.js"></script>
+    <script src="../../libs/vendor/vuetify.js"></script>
+    <script src="../../libs/vendor/httpVueLoader.js"></script>
+    <script src="../../libs/one_global.js"></script>
+    <script src="../../libs/vendor/socket.io.js"></script>
+    <script src="../../libs/vendor/sheetjs-master/xlsx.full.min.js"></script>
+    <!--<script src="../../libs/one_print_barcode.js"></script>-->
+    <!-- App Script -->
+    <?php
+    $ts = "?ts=" . Date("ymdhis");
+    ?>
+    <script type="module">
+        window.calculate_age = function(inp_dob) {
+            var now = moment(new Date())
+            var dob = moment(new Date(inp_dob))
+            var year = now.diff(dob, 'years')
+            dob.add(year, 'years')
+            var month = now.diff(dob, 'months')
+            dob.add(month, 'months')
+            var day = now.diff(dob, 'days')
+            if (isNaN(year)) return ''
+            return `${year} tahun ${month} bulan ${day} hari`
+        }
+        var socketIoUrl = "http://" + window.location.host + ":9090/";
+
+        import {
+            store
+        } from './store.js<?php echo $ts ?>';
+        //for testing
+        window.store = store;
+        new Vue({
+            store,
+            el: '#app',
+            doctornted() {},
+            methods: {
+                tab_selected: function(tab) {
+                    return this.$store.state.tab_selected == tab
+                }
+            },
+            computed: {
+                showtests() {
+                    return this.$store.state.samplecall.showtests
+                }
+            },
+            components: {
+                'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponentNoMenu.vue'),
+                'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
+                'one-public-holiday': httpVueLoader('./components/onePublicHoliday.vue')
+            }
+        })
+    </script>
+    <style>
+        [v-cloak] {
+            display: none
+        }
+
+        .left {}
+
+        .right {}
+    </style>
+</body>
+
+</html>

one-ui/system/one-inject-price/modules/courier.js

@@ -0,0 +1,165 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/courier.js"
+
+export default {
+    namespaced: true,
+    state: {
+        couriers: [],
+        loading: false,
+        name: "",
+        curr_page: 1,
+        total: 0,
+        error_dialog: false,
+        error_message: "",
+        is_courier: [],
+        snackbar: false,
+        snackbar_msg: ""
+        // selected_courier: {},
+        // current_page: 1,
+        // last_id: -1,
+        // x_search: "",
+        // search_status: 0,
+
+        // // dropdown courier
+        // namecouriers: [],
+        // namecourier: {},
+
+        // autocomplete_status: 0,
+        // save_status: 0,
+        // error_message: "",
+        // dialog_error: false,
+        // alert_error: false,
+        // msg_success: "",
+        // alert_success: false,
+        // get_data_status:0,
+        // filter_branch: [],
+        // selected_filter_branch: {},
+        // filter_kurir: [],
+        // selected_filter_kurir: {},
+        // filter_status: [],
+        // selected_filter_status: {},
+    },
+    mutations: {
+        update_couriers(state, val) {
+            state.couriers = val
+        },
+        update_total(state, val) {
+            state.total = val;
+        },
+        update_loading(state, val) {
+            state.loading = val;
+        },
+        update_error_message(state, val) {
+            state.error_message = val;
+        },
+        update_name(state, val) {
+            state.name = val;
+        },
+        update_curr_page(state, val) {
+            state.curr_page = val;
+        },
+        update_is_courier(state, val) {
+            state.is_courier = val;
+        },
+        update_snackbar(state, val) {
+            state.snackbar = val;
+        },
+        update_snackbar_msg(state, val) {
+            state.snackbar_msg = val;
+        },
+        update_error_dialog(state, val) {
+            state.error_dialog = val;
+        },
+    },
+    actions: {
+        async search(context) {
+            context.commit("update_loading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "name": context.state.name,
+                    "page": context.state.curr_page,
+                    "token": one_token(),
+                }
+                let resp = await api.search(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_couriers", resp.data.records)
+                    context.commit("update_total", resp.data.total);
+                    let isCourier = [];
+                    for (let i = 0; i < resp.data.records.length; i++) {
+                        if (resp.data.records[i].flag !== "N") {
+                            isCourier.push(resp.data.records[i].userID)
+                        }
+                    }
+                    context.commit("update_is_courier", isCourier);
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async add(context, prm) {
+            context.commit("update_loading", true)
+            try {
+                prm.token = one_token();
+                // prm.userID = one_user();
+                let resp = await api.add(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_snackbar_msg", "Berhasil Menambahkan Kurir");
+                    console.log(resp.data);
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.push(prm.userID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        },
+        async deleteData(context, prm) {
+            context.commit("update_loading", true)
+            try {
+                prm.token = one_token();
+                // prm.userID = one_user();
+                let resp = await api.deleteData(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_snackbar_msg", "Berhasil Menghapus Kurir");
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.filter((e) => e === prm.courierID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        }
+    }
+}

one-ui/system/one-inject-price/modules/holiday.js

@@ -0,0 +1,272 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/holiday.js"
+
+export default {
+    namespaced: true,
+    state: {
+        couriers: [],
+        type: [],
+        selectedType: '',
+        loading: false,
+        date: moment(new Date()).format('YYYY-MM-DD'),
+        yearFilter: moment(new Date()).format('YYYY'),
+        year: moment(new Date()).format('YYYY'),
+        name: "",
+        curr_page: 1,
+        total: 0,
+        error_dialog: false,
+        error_message: "",
+        is_courier: [],
+        snackbar: false,
+        snackbar_msg: "",
+        holidays: [],
+        dialogForm: false,
+        name: '',
+        desc: '',
+        selectedHoliday: {},
+        dialog_delete: false
+        // selected_courier: {},
+        // current_page: 1,
+        // last_id: -1,
+        // x_search: "",
+        // search_status: 0,
+
+        // // dropdown courier
+        // namecouriers: [],
+        // namecourier: {},
+
+        // autocomplete_status: 0,
+        // save_status: 0,
+        // error_message: "",
+        // dialog_error: false,
+        // alert_error: false,
+        // msg_success: "",
+        // alert_success: false,
+        // get_data_status:0,
+        // filter_branch: [],
+        // selected_filter_branch: {},
+        // filter_kurir: [],
+        // selected_filter_kurir: {},
+        // filter_status: [],
+        // selected_filter_status: {},
+    },
+    mutations: {
+        update_selectedHoliday(state, val) {
+            state.selectedHoliday = val
+        },
+        update_dialog_delete(state, val) {
+            state.dialog_delete = val
+        },
+        update_desc(state, val) {
+            state.desc = val
+        },
+        update_dialogForm(state, val) {
+            state.dialogForm = val
+        },
+        update_year(state, val) {
+            state.year = val
+        },
+        update_yearFilter(state, val) {
+            state.yearFilter = val
+        },
+        update_date(state, val) {
+            state.date = val
+        },
+        update_type(state, val) {
+            state.type = val
+        },
+        update_selectedType(state, val) {
+            state.selectedType = val
+        },
+        update_couriers(state, val) {
+            state.couriers = val
+        },
+        update_total(state, val) {
+            state.total = val;
+        },
+        update_loading(state, val) {
+            state.loading = val;
+        },
+        update_error_message(state, val) {
+            state.error_message = val;
+        },
+        update_name(state, val) {
+            state.name = val;
+        },
+        update_curr_page(state, val) {
+            state.curr_page = val;
+        },
+        update_is_courier(state, val) {
+            state.is_courier = val;
+        },
+        update_snackbar(state, val) {
+            state.snackbar = val;
+        },
+        update_snackbar_msg(state, val) {
+            state.snackbar_msg = val;
+        },
+        update_error_dialog(state, val) {
+            state.error_dialog = val;
+        },
+        update_holidays(state, val) {
+            state.holidays = val;
+        },
+    },
+    actions: {
+        async gettype(context) {
+            context.commit("update_loading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "token": one_token(),
+                }
+                let resp = await api.gettype(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_type", resp.data)
+
+
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async search(context) {
+            context.commit("update_loading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "year": context.state.yearFilter,
+                    "token": one_token(),
+                }
+                let resp = await api.search(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_holidays", resp.data)
+
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async add(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {};
+
+                prm.token = one_token();
+                prm.name = context.state.name;
+                prm.year = context.state.year;
+                prm.date = context.state.date;
+                prm.type = context.state.selectedType;
+                prm.description = context.state.desc;
+
+                // prm.userID = one_user();
+                let resp = await api.add(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialogForm", false);
+                    context.commit("update_snackbar_msg", "Berhasil Menambahkan hari libur");
+                    console.log(resp.data);
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.push(prm.userID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        },
+        async edit(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {};
+
+                prm.token = one_token();
+                prm.name = context.state.name;
+                prm.year = context.state.year;
+                prm.date = context.state.date;
+                prm.type = context.state.selectedType;
+                prm.description = context.state.desc;
+                prm.id = context.state.selectedHoliday.id;
+
+                // prm.userID = one_user();
+                let resp = await api.edit(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialogForm", false);
+                    context.commit("update_snackbar_msg", "Berhasil edit hari libur");
+                    console.log(resp.data);
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.push(prm.userID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        },
+        async deleteData(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {}
+                prm.token = one_token();
+                prm.id = context.state.selectedHoliday.id;
+                // prm.userID = one_user();
+                let resp = await api.deleteData(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialog_delete", false);
+                    context.commit("update_snackbar_msg", "Berhasil Menghapus libur");
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.filter((e) => e === prm.courierID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        }
+    }
+}

one-ui/system/one-inject-price/modules/patient.js

@@ -0,0 +1,449 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/patient.js"
+
+export default {
+    namespaced: true,
+    state: {
+        couriers: [],
+        type: [],
+        selectedType: '',
+        loading: false,
+        date: moment(new Date()).format('YYYY-MM-DD'),
+        yearFilter: moment(new Date()).format('YYYY'),
+        year: moment(new Date()).format('YYYY'),
+        name: "",
+        curr_page: 1,
+        TOTAL: 0,
+        error_dialog: false,
+        error_message: "",
+        is_courier: [],
+        snackbar: false,
+        snackbar_msg: "",
+        holidays: [],
+        dialogForm: false,
+        name: '',
+        desc: '',
+        selectedHoliday: {},
+        dialog_delete: false,
+        companyList: [],
+        selectedCompany: null,
+        searchCompany: '',
+        mouList: [],
+selectedMou: null,
+searchMou: '',
+        isLoading: false,
+        data_csv: [],
+
+        // selected_courier: {},
+        // current_page: 1,
+        // last_id: -1,
+        // x_search: "",
+        // search_status: 0,
+
+        // // dropdown courier
+        // namecouriers: [],
+        // namecourier: {},
+
+        // autocomplete_status: 0,
+        // save_status: 0,
+        // error_message: "",
+        // dialog_error: false,
+        // alert_error: false,
+        // msg_success: "",
+        // alert_success: false,
+        // get_data_status:0,
+        // filter_branch: [],
+        // selected_filter_branch: {},
+        // filter_kurir: [],
+        // selected_filter_kurir: {},
+        // filter_status: [],
+        // selected_filter_status: {},
+    },
+    mutations: {
+        update_data_csv(state, val) {
+            state.data_csv = val
+        },
+        update_companyList(state, val) {
+            state.companyList = val
+        },
+        update_selectedCompany(state, val) {
+            state.selectedCompany = val
+        },
+        update_searchCompany(state, val) {
+            state.searchCompany = val
+        },
+        update_mouList(state, val) {
+            state.mouList = val
+        },
+        update_selectedMou(state, val) {
+            state.selectedMou = val
+        },
+        update_searchMou(state, val) {
+            state.searchMou = val
+        },
+        update_isLoading(state, val) {
+            state.isLoading = val
+        },
+        update_selectedHoliday(state, val) {
+            state.selectedHoliday = val
+        },
+        update_dialog_delete(state, val) {
+            state.dialog_delete = val
+        },
+        update_desc(state, val) {
+            state.desc = val
+        },
+        update_dialogForm(state, val) {
+            state.dialogForm = val
+        },
+        update_year(state, val) {
+            state.year = val
+        },
+        update_yearFilter(state, val) {
+            state.yearFilter = val
+        },
+        update_date(state, val) {
+            state.date = val
+        },
+        update_type(state, val) {
+            state.type = val
+        },
+        update_selectedType(state, val) {
+            state.selectedType = val
+        },
+        update_couriers(state, val) {
+            state.couriers = val
+        },
+        update_total(state, val) {
+            state.TOTAL = val;
+        },
+        update_loading(state, val) {
+            state.loading = val;
+        },
+        update_error_message(state, val) {
+            state.error_message = val;
+        },
+        update_name(state, val) {
+            state.name = val;
+        },
+        update_curr_page(state, val) {
+            state.curr_page = val;
+        },
+        update_is_courier(state, val) {
+            state.is_courier = val;
+        },
+        update_snackbar(state, val) {
+            state.snackbar = val;
+        },
+        update_snackbar_msg(state, val) {
+            state.snackbar_msg = val;
+        },
+        update_error_dialog(state, val) {
+            state.error_dialog = val;
+        },
+        update_holidays(state, val) {
+            state.holidays = val;
+        },
+    },
+    actions: {
+        async getCompany(context, search) {
+            context.commit("update_isLoading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "token": one_token(),
+                    "search": search
+                }
+
+                let resp = await api.getCompany(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_isLoading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_isLoading", false);
+                    console.log(resp.data);
+                    context.commit("update_companyList", resp.data)
+                }
+            } catch (error) {
+                context.commit("update_isLoading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async getMou(context, prm) {
+            context.commit("update_isLoading", true)
+            try {
+                prm.token = one_token();
+                let resp = await api.getMou(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_isLoading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_isLoading", false);
+                    console.log(resp.data);
+                    context.commit("update_mouList", resp.data)
+                }
+            } catch (error) {
+                context.commit("update_isLoading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async downloadcsv(context) {
+            context.commit("update_isLoading", true)
+            try {
+                // param sesuai standar kamu
+                const prm = {
+                    token: one_token()
+                }
+        
+                // call API
+                let resp = await api.getTest(prm)
+        
+                if (resp.status !== "OK") {
+                    context.commit("update_isLoading", false)
+                    context.commit("update_error_dialog", true)
+                    context.commit("update_error_message", resp)
+                    return
+                }
+        
+                const data = resp.data || []
+        
+                // mapping ke format Excel
+                let rows = data.map(item => ({
+                    "TEST_CODE": item.TEST_CODE || "",
+                    "TEST_NAME": item.TEST_NAME || "",
+                    "HARGA": item.HARGA || "",
+                    "DISKON_PERSEN": item.DISKON_PERSEN || "",
+                    "DISKON_RUPIAH": item.DISKON_RUPIAH || "",
+                    "TOTAL": item.TOTAL || ""
+                }))
+        
+                // jika kosong → tetap template
+                if (rows.length === 0) {
+                    rows = [{
+                        "TEST_CODE": "",
+                    "TEST_NAME": "",
+                    "HARGA": "",
+                    "DISKON_PERSEN": "",
+                    "DISKON_RUPIAH": "",
+                    "TOTAL": ""
+                    }]
+                }
+        
+                // buat worksheet
+                const ws = XLSX.utils.json_to_sheet(rows)
+        
+                // width kolom
+                ws["!cols"] = [
+                    { wch: 15 },
+                    { wch: 35 },
+                    { wch: 15 },
+                    { wch: 15 },
+                    { wch: 15 },
+                    { wch: 15 }
+                ]
+        
+                // freeze header
+                ws["!freeze"] = { ySplit: 1 }
+        
+                // workbook
+                const wb = XLSX.utils.book_new()
+                XLSX.utils.book_append_sheet(wb, ws, "Template Harga")
+        
+                // download
+                XLSX.writeFile(wb, "Template_Harga.xlsx")
+        
+                context.commit("update_isLoading", false)
+        
+            } catch (error) {
+                context.commit("update_isLoading", false)
+                context.commit("update_error_dialog", true)
+                context.commit("update_error_message", error)
+            }
+        },
+        
+        async inject(context) {
+            context.commit("update_isLoading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "token": one_token(),
+                    "company": context.state.selectedCompany,
+                    "mou": context.state.selectedMou,
+                    "data": context.state.data_csv
+                }
+
+                let resp = await api.inject(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_isLoading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_isLoading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_snackbar_msg", "Berhasil Menambahkan data");
+                }
+            } catch (error) {
+                context.commit("update_isLoading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async gettype(context) {
+            context.commit("update_loading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "token": one_token(),
+                }
+                let resp = await api.gettype(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_type", resp.data)
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async search(context) {
+            context.commit("update_loading", true)
+            try {
+                // prm.token = one_token();
+                var param = {
+                    "year": context.state.yearFilter,
+                    "token": one_token(),
+                }
+                let resp = await api.search(param);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_dialog", true);
+                    context.commit("update_error_message", resp);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_holidays", resp.data)
+
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_dialog", true);
+                context.commit("update_error_message", error);
+            }
+        },
+        async add(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {};
+
+                prm.token = one_token();
+                prm.name = context.state.name;
+                prm.year = context.state.year;
+                prm.date = context.state.date;
+                prm.type = context.state.selectedType;
+                prm.description = context.state.desc;
+
+                // prm.userID = one_user();
+                let resp = await api.add(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialogForm", false);
+                    context.commit("update_snackbar_msg", "Berhasil Menambahkan hari libur");
+                    console.log(resp.data);
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.push(prm.userID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        },
+        async edit(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {};
+
+                prm.token = one_token();
+                prm.name = context.state.name;
+                prm.year = context.state.year;
+                prm.date = context.state.date;
+                prm.type = context.state.selectedType;
+                prm.description = context.state.desc;
+                prm.id = context.state.selectedHoliday.id;
+
+                // prm.userID = one_user();
+                let resp = await api.edit(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialogForm", false);
+                    context.commit("update_snackbar_msg", "Berhasil edit hari libur");
+                    console.log(resp.data);
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.push(prm.userID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        },
+        async deleteData(context) {
+            context.commit("update_loading", true)
+            try {
+                let prm = {}
+                prm.token = one_token();
+                prm.id = context.state.selectedHoliday.id;
+                // prm.userID = one_user();
+                let resp = await api.deleteData(prm);
+                if (resp.status !== "OK") {
+                    context.commit("update_loading", false);
+                    context.commit("update_error_message", resp);
+                    context.commit("update_error_dialog", true);
+                } else {
+                    context.commit("update_loading", false);
+                    console.log(resp.data);
+                    context.commit("update_snackbar", true);
+                    context.commit("update_dialog_delete", false);
+                    context.commit("update_snackbar_msg", "Berhasil Menghapus libur");
+                    // var tempCourrier = JSON.stringify(context.state.is_courier);
+                    // var arrCourier = JSON.parse(tempCourrier);
+                    // arrCourier.filter((e) => e === prm.courierID);
+                    // context.commit("update_is_courier", arrCourier);
+                    context.dispatch("search");
+                }
+            } catch (error) {
+                context.commit("update_loading", false);
+                context.commit("update_error_message", error);
+                context.commit("update_error_dialog", true);
+            }
+        }
+    }
+}

one-ui/system/one-inject-price/store.js

@@ -0,0 +1,30 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import courier from "./modules/courier.js";
+import holiday from "./modules/holiday.js";
+import patient from "./modules/patient.js";
+import system from "../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        holiday: holiday,
+        system: system,
+        patient: patient,
+    },
+    state: {
+        tab_selected: 'admin-kurir'
+    },
+    mutations: {
+        change_tab(state, ntab) {
+            state.tab_selected = ntab
+        }
+    },
+    actions: {
+        change_tab(context, ntab) {
+            context.commit('change_tab', ntab)
+        }
+    }
+});

one-ui/system/one-md-menu/api.js

@@ -0,0 +1,31 @@
+// API :
+// search bank
+// paramater : query , page , rowPerPage
+const URL =
+  "http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
+
+export async function searchBank(query, page, rowPerPage = 15) {
+  try {
+    var resp = await axios.post(URL, {
+      query: query,
+      page: page,
+      rowPerPage: rowPerPage
+    });
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        query: query,
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    data.query = query;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      query: query,
+      message: e.message
+    };
+  }
+}

one-ui/system/one-md-menu/api/priviledge.js

@@ -0,0 +1,39 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(prm) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/lookuppriviledge_nas', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save(token,prm) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/save', {token:token,datas:prm});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-menu/api/usergroup.js

@@ -0,0 +1,20 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(token, search,all ) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/lookupusergroup', { token: token, search: search, all:all });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-menu/components/headerBox.vue

@@ -0,0 +1,43 @@
+<template>
+
+<div>
+<v-card>
+  <v-btn class= "button parallelogram"  color="success">Pasien Dokter</v-btn>
+    <v-btn class= "button parallelogram"  color="warning">MOU </v-btn>
+    <v-btn class= "button parallelogram"  color="error">Kirim Hasil </v-btn>
+    <v-btn class= "button parallelogram"  color="info"> Barcode</v-btn>
+</v-card>
+</div>
+
+</template>
+
+<style scoped>
+
+.v-card{
+ text-align: center;
+}
+.v-btn__content{
+margin-top : -10px;
+}
+.button {
+
+padding: 30px 16px;
+ width : 20%;
+  text-decoration:none;
+}
+
+.parallelogram{
+  transform: skew(-20deg);
+
+}
+
+.v-btn {
+ word-break: break-all;
+}
+
+</style>
+<script>
+module.exports = {
+
+}
+</script>

one-ui/system/one-md-menu/components/oneMdPriviledge.vue

@@ -0,0 +1,264 @@
+<template>
+<div>
+
+<v-layout>
+    <v-flex xs12>
+        <v-layout row wrap>
+            <v-flex  class="text-xs-center" xs3>
+                <v-card color="#5d7aaa" class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 0">
+                    <v-card-title
+                        dark
+                        class="headline text-xs-center pa-0 pb-1"
+                        primary-title
+                        style="color:white;background:#00000042"
+                    >
+                        <v-toolbar  class="text-xs-center" color="cyan" dark>
+                            
+
+                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
+                        </v-toolbar>
+                    </v-card-title>
+                    <v-card-text>
+                        <v-navigation-drawer
+                            class="blue lighten-3"
+                            dark
+                            permanent
+                            style="width:100%"
+                        >
+                            <v-list>
+                            <v-list-tile
+                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
+                                @click="changePriviledge(index,idx,p.status)"
+                            >
+                                <v-list-tile-content>
+                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
+                                </v-list-tile-content>
+                            </v-list-tile>
+                            </v-list>
+                        </v-navigation-drawer>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+            <v-flex xs3>
+                <v-card color="#5d7aaa"  class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 1">
+                    <v-card-title
+                        dark
+                        class="headline font-weight-black mono  pa-0 pb-1"
+                        primary-title
+                        style="color:white;background:#00000042"
+                    >
+                        <v-toolbar   class="text-xs-center" color="cyan" dark>
+                            
+
+                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
+                        </v-toolbar>
+                    </v-card-title>
+                   <v-card-text>
+                        <v-navigation-drawer
+                            class="blue lighten-3"
+                            dark
+                            permanent
+                            style="width:100%"
+                        >
+                            <v-list>
+                            <v-list-tile
+                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
+                                @click="changePriviledge(index,idx,p.status)"
+                            >
+                                <v-list-tile-content>
+                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
+                                </v-list-tile-content>
+                            </v-list-tile>
+                            </v-list>
+                        </v-navigation-drawer>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+            <v-flex xs3>
+                <v-card color="#5d7aaa"  class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 2">
+                    <v-card-title
+                        dark
+                        class="headline font-weight-black mono  pa-0 pb-1"
+                        primary-title
+                        style="color:white;background:#00000042"
+                    >
+                        <v-toolbar   class="text-xs-center" color="cyan" dark>
+                            
+
+                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
+                        </v-toolbar>
+                    </v-card-title>
+                    <v-card-text>
+                        <v-navigation-drawer
+                            class="blue lighten-3"
+                            dark
+                            permanent
+                            style="width:100%"
+                        >
+                            <v-list>
+                            <v-list-tile
+                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
+                                @click="changePriviledge(index,idx,p.status)"
+                            >
+                                <v-list-tile-content>
+                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
+                                </v-list-tile-content>
+                            </v-list-tile>
+                            </v-list>
+                        </v-navigation-drawer>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+             <v-flex xs3>
+                <v-card color="#5d7aaa"  class="mb-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 3">
+                    <v-card-title
+                        dark
+                        class="headline font-weight-black mono  pa-0 pb-1"
+                        primary-title
+                        style="color:white;background:#00000042"
+                    >
+                        <v-toolbar   class="text-xs-center" color="cyan" dark>
+                            
+
+                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
+                        </v-toolbar>
+                    </v-card-title>
+                    <v-card-text>
+                        <v-navigation-drawer
+                            class="blue lighten-3"
+                            dark
+                            permanent
+                            style="width:100%"
+                        >
+                            <v-list>
+                            <v-list-tile
+                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
+                                @click="changePriviledge(index,idx,p.status)"
+                            >
+                                <v-list-tile-content>
+                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
+                                </v-list-tile-content>
+                            </v-list-tile>
+                            </v-list>
+                        </v-navigation-drawer>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+        </v-layout>
+    </v-flex>
+</v-layout>
+</div>
+</template>
+
+<style scoped>
+    table, td, th {  
+    border: 1px solid #ddd;
+    text-align: left;
+    }
+
+    table {
+    border-collapse: collapse;
+    width: 100%;
+    }
+
+    th, td {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 8px;
+    padding-right: 5px;
+    }
+
+    .mini-input .v-input{
+        margin-top: 0px; 
+    }
+
+    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
+        margin-top: 0px; 
+        margin-bottom:0px;
+        margin-left:3px;
+    }
+    .mini-input .v-messages{
+        min-height:0px;
+    }
+    input.fhm-input{
+        border: 1px solid black; 
+        border-radius: 2px;
+        -webkit-box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        -moz-box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        padding: 2px 4px;
+        background: rgba(255,255,255,0.5);
+        margin: 0 0 1px 0;
+        width:30px;
+        text-align:center;
+    }
+</style>
+
+<script>
+module.exports = {
+    data: () => ({
+    
+    }),
+    mounted() {
+        var items = JSON.parse(localStorage.getItem('user'))
+        items.id = items.M_UserGroupID
+        console.log(items)
+        this.$store.dispatch("priviledge/lookup", items)
+    },
+    computed: {
+        xpriviledges() {
+            return this.$store.state.priviledge.priviledges
+        },
+        dialogsuccess: {
+            get() {
+                return this.$store.state.priviledge.dialog_success
+            },
+            set(val) {
+                this.$store.commit("priviledge/update_dialog_success",val)
+            }
+        },
+        msgsuccess(){
+            return this.$store.state.priviledge.msg_success
+        }
+    },
+    methods : {
+        rmod(idx){
+            return idx % 4
+        },
+        changePriviledge(idxpar,idxchild,val){
+            var arrx = this.$store.state.priviledge.priviledges
+            console.log(arrx[idxpar])
+            window.location.href = '/one-ui/'+arrx[idxpar]['childs'][idxchild].S_MenuUrl
+            /*arrx[idxpar]['childs'][idxchild].status = val === 'N'?'Y':'N'
+            arrx[idxpar]['childs'][idxchild].active = 'Y'
+
+            this.$store.commit("priviledge/update_priviledges",arrx)
+            this.$store.commit("usergroup/update_no_save",true)*/
+        },
+        changePriviledgeLevel2(idxpar,idxchild,idxchild2,val){
+            var arrx = this.$store.state.priviledge.priviledges
+            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].status = val === 'N'?'Y':'N'
+            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].active = 'Y'
+
+            this.$store.commit("priviledge/update_priviledges",arrx)
+            this.$store.commit("usergroup/update_no_save",true)
+        },
+        closeDialogSuccess(){
+            this.$store.commit("priviledge/update_dialog_success",false)
+            this.$store.dispatch("priviledge/lookup",{
+                id:this.$store.state.usergroup.selected_usergroup.id
+            })
+        },
+        save(){
+            var prm = this.$store.state.priviledge.priviledges
+            this.$store.dispatch("priviledge/save",prm)
+        }
+    }
+}
+</script>

one-ui/system/one-md-menu/components/oneMdUsergroupList.vue

@@ -0,0 +1,310 @@
+<template>
+ <v-layout>
+ <template>
+  
+    <v-dialog
+      v-model="dialogdeletealert"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalert}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout> 
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealert = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlert()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+  
+</template>
+
+
+ <v-flex xs12 >
+       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
+         <v-toolbar  color="blue lighten-3" dark height="50px">
+           <v-toolbar-title>USERGROUP</v-toolbar-title>
+           <v-spacer></v-spacer>
+           
+         </v-toolbar>
+         <v-snackbar
+      v-model="snackbar"
+      :color="color"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+      
+    >
+      {{msgsnackbar}}
+      <v-btn
+        flat
+        @click="updateAlert_success(false)"
+      >
+        Tutup
+      </v-btn>
+    </v-snackbar>
+<v-layout row  style="background:#bbdefb;padding-top:5px;" justify-center>
+          <v-list-tile >
+            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..."/>
+            </v-list-tile-content>
+          </v-list-tile>
+          </v-layout>
+          <v-divider></v-divider>
+          <div style="overflow: auto;max-height:550px">
+          <div v-for="(vs,index) in vusergroups">
+                <v-layout pa-2 v-if="isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxsolid"  xs12>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-on="on">{{subname(vs.name)}}</span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+                <v-layout pa-2 v-if="!isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxoutline"  xs12>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-on="on">{{subname(vs.name)}}</span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+          <v-divider></v-divider>
+          </div>
+          </div>
+          <v-layout row>
+            <v-flex class="text-xs-center" pt-3 xs12>
+              <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;" >Menampilkan <span class="red--text">{{xtotalfilterusergroups}}</span> dari <span class="red--text">{{xtotalusergroups}}</span> total data</p>
+              <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
+              <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
+            </v-flex>
+          </v-layout>
+       </v-card>
+     </v-flex>
+      <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
+</v-layout>
+</template>
+
+<style scoped>
+.textinput {
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: white;
+  background-position: 10px 10px; 
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  border: 1px solid #607d8b;
+
+}
+
+.textinput:focus {
+  width: 100%;
+}
+.textinput:focus::-webkit-input-placeholder  {color:transparent;}
+.textinput:focus::-moz-placeholder   {color:transparent;}
+.textinput:-moz-placeholder   {color:transparent;}
+.boxoutline{
+  color:red;border:1px solid red;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxoutline:hover{
+  background:rgba(0, 0, 0, 0.07)!important;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boxsolid{
+  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxsolid:hover{
+  background:#f44336de;
+  font-size: 15px;
+  font-weight: 700;
+}
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+::-webkit-scrollbar {
+      width: 7px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+      background-color: #73baf3;
+} /* the new scrollbar will have a flat appearance with the set background color */
+ 
+::-webkit-scrollbar-thumb {
+      background-color: #2196f3; 
+} /* this will style the thumb, ignoring the track */
+ 
+::-webkit-scrollbar-button {
+      background-color: #0079da;
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+ 
+::-webkit-scrollbar-corner {
+      background-color: black;
+} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+
+</style>
+
+<script>
+module.exports = {
+  components : {
+      'one-dialog-alert':httpVueLoader('../../../common/oneDialogAlert.vue')
+   },
+  data: () => ({
+      color:"success",
+      valid:false,
+      schedulename:'',
+      nameRules: [
+        v => !!v || 'Nama Schedule harus diisi'
+      ],
+      dialogdeletealert:false,
+      msgalert:"",
+      xid:0,
+      xsearch:"",
+      msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !"
+    }),
+  mounted() {
+      this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+  },
+  computed: {
+      xact() {
+          return this.$store.state.usergroup.act
+      },
+      xshowall() {
+          return this.$store.state.usergroup.show_all
+      },  
+      vusergroups() {
+          return this.$store.state.usergroup.usergroups
+      },
+      xtotalusergroups(){
+        return this.$store.state.usergroup.total_usergroups
+      },
+      xtotalfilterusergroups(){
+        return this.$store.state.usergroup.total_filter_usergroups
+      },
+      snackbar: {
+         get() {
+            return this.$store.state.usergroup.alert_success
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_alert_success",val)
+         }
+      },
+      msgsnackbar(){
+        return this.$store.state.usergroup.msg_success
+      },
+      openalertconfirmation: {
+         get() {
+            return this.$store.state.usergroup.open_alert_confirmation
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_open_alert_confirmation",val)
+         }
+      }
+  },
+  methods : {
+    updateShowAll(val){
+      this.$store.commit("usergroup/update_show_all",val)
+       this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },
+    isSelected(p) {
+        return p.id ==  this.$store.state.usergroup.selected_usergroup.id
+    },
+    subname(name){
+      var xname = name
+      if(xname.length > 15){
+        xname = xname.substring(0, 12)+'...'
+      }
+      return xname
+    },
+    selectMe(sc) {
+      var xnosave = this.$store.state.usergroup.no_save
+      if(!xnosave){
+        this.$store.commit("usergroup/update_selected_usergroup",sc)
+        this.$store.dispatch("priviledge/lookup",{
+            id:this.$store.state.usergroup.selected_usergroup.id
+          })
+      }
+      else{
+        this.$store.commit("usergroup/update_open_alert_confirmation",true)
+      }
+      
+       
+    },
+    closeAlertConfirmation(){
+        this.$store.commit("usergroup/update_open_alert_confirmation",false)
+    },
+    forgetAlertConfirmation(){
+        this.$store.commit("usergroup/update_no_save",0)
+        this.$store.commit("usergroup/update_open_alert_confirmation",false)
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    thr_search: _.debounce( function () {
+        this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },1000)
+  },
+  watch: {
+    xsearch(val,old) {
+      
+      if ( val !== old && this.lookupstatus !== 1){
+        console.log(val)
+        this.xsearch = val
+        this.thr_search()
+      }
+    }
+  }
+}
+</script>

one-ui/system/one-md-menu/index.php

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>One</title>
+  <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+  <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body>
+  <div v-cloak id="app">
+    <v-app id="smartApp" >
+     <one-navbar></one-navbar>
+      <v-content class="blue lighten-5" >
+         <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+            <v-layout row wrap >
+                <v-flex xs12 class="right" fill-height pa-1>
+                <one-md-priviledge></one-md-priviledge>
+
+
+                 </v-flex>
+               </v-layout>
+            </v-container>
+         </v-content>
+      <one-footer> </one-footer>
+    </v-app>
+  </div>
+
+  <!-- Vendor -->
+  <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+  <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+// window.store = store;
+new Vue({
+store,
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponentNoMenu.vue'),
+      'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
+        'one-md-usergroup-list': httpVueLoader('./components/oneMdUsergroupList.vue'),
+        'one-md-priviledge': httpVueLoader('./components/oneMdPriviledge.vue')
+      }
+    })
+    </script>
+  <style>
+    [v-cloak] {
+      display: none
+    }
+   .left {
+   }
+   .right {
+   }
+  </style>
+</body>
+
+</html>

one-ui/system/one-md-menu/modules/priviledge.js

@@ -0,0 +1,112 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/priviledge.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_priviledge: 0,
+        lookup_error_message: '',
+        priviledges: [],
+        save_status: 0,
+        save_error_message: '',
+        dialog_success: false,
+        msg_success: ""
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_priviledge(state, status) {
+            state.lookup_priviledge = status
+        },
+        update_priviledges(state, data) {
+            state.priviledges = data
+        },
+        update_selected_priviledge(state, val) {
+            state.selected_priviledge = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_success(state, val) {
+            state.dialog_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        }
+    },
+    actions: {
+        async getmenu(context, prm) {
+            context.commit("update_lookup_priviledge", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.getmenu(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_priviledge", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_priviledge", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records
+                    }
+                    //context.commit("update_priviledges", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_priviledge", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async lookup(context, prm) {
+            context.commit("update_lookup_priviledge", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.lookup(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_priviledge", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_priviledge", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records
+                    }
+                    context.commit("update_priviledges", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_priviledge", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.save(one_token(),prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", "")
+                    
+                    context.commit("update_dialog_success", true)
+                    var msg = "Data sudah terupdate dong ..."
+                    context.commit("update_msg_success", msg)
+                    context.commit("usergroup/update_no_save", false, { root: true })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+            }
+        }
+    }
+}

one-ui/system/one-md-menu/modules/usergroup.js

@@ -0,0 +1,98 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/usergroup.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_usergroup: 0,
+        lookup_error_message: '',
+        usergroups: [],
+        total_usergroups: 0,
+        total_filter_usergroups: 0,
+        selected_usergroup: { name: "[ Belum memilih Grup User ]" },
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_usergroup: false,
+        dialog_edit_form_usergroup:false,
+        alert_success: false,
+        msg_success: "",
+        show_all:'N',
+        no_save:false,
+        open_alert_confirmation:false
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_show_all(state, val) {
+            state.show_all = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_usergroup(state, status) {
+            state.lookup_usergroup = status
+        },
+        update_usergroups(state, data) {
+            state.usergroups = data.records
+            state.total_usergroups = data.total
+            state.total_filter_usergroups = data.total_filter
+        },
+        update_selected_usergroup(state, val) {
+            state.selected_usergroup = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_usergroup(state, val) {
+            state.dialog_form_usergroup = val
+        },
+        update_dialog_edit_form_usergroup(state, val) {
+            state.dialog_edit_form_usergroup = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_no_save(state, val) {
+            state.no_save = val
+        },
+        update_open_alert_confirmation(state, val) {
+            state.open_alert_confirmation = val
+        }
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.search, prm.all)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+                    context.commit("update_usergroups", data)
+                    context.commit("update_selected_usergroup", data.records[0])
+                    context.dispatch("priviledge/lookup",{id:data.records[0].id}, { root: true })
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        }
+    }
+}

one-ui/system/one-md-menu/store.js

@@ -0,0 +1,25 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import usergroup from "./modules/usergroup.js";
+import priviledge from "./modules/priviledge.js";
+import system from "../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        usergroup: usergroup,
+        priviledge:priviledge,
+        system: system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});

one-ui/system/one-md-priviledge/api.js

@@ -0,0 +1,31 @@
+// API :
+// search bank
+// paramater : query , page , rowPerPage
+const URL =
+  "http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
+
+export async function searchBank(query, page, rowPerPage = 15) {
+  try {
+    var resp = await axios.post(URL, {
+      query: query,
+      page: page,
+      rowPerPage: rowPerPage
+    });
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        query: query,
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    data.query = query;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      query: query,
+      message: e.message
+    };
+  }
+}

one-ui/system/one-md-priviledge/api/priviledge.js

@@ -0,0 +1,39 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(prm) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/lookuppriviledge', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save(token,prm) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/save', {token:token,datas:prm});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-priviledge/api/usergroup.js

@@ -0,0 +1,20 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(token, search,all ) {
+    try {
+        var resp = await axios.post(URL + 'priviledge/lookupusergroup', { token: token, search: search, all:all });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-priviledge/components/headerBox.vue

@@ -0,0 +1,43 @@
+<template>
+
+<div>
+<v-card>
+  <v-btn class= "button parallelogram"  color="success">Pasien Dokter</v-btn>
+    <v-btn class= "button parallelogram"  color="warning">MOU </v-btn>
+    <v-btn class= "button parallelogram"  color="error">Kirim Hasil </v-btn>
+    <v-btn class= "button parallelogram"  color="info"> Barcode</v-btn>
+</v-card>
+</div>
+
+</template>
+
+<style scoped>
+
+.v-card{
+ text-align: center;
+}
+.v-btn__content{
+margin-top : -10px;
+}
+.button {
+
+padding: 30px 16px;
+ width : 20%;
+  text-decoration:none;
+}
+
+.parallelogram{
+  transform: skew(-20deg);
+
+}
+
+.v-btn {
+ word-break: break-all;
+}
+
+</style>
+<script>
+module.exports = {
+
+}
+</script>

one-ui/system/one-md-priviledge/components/oneMdPriviledge.vue

@@ -0,0 +1,235 @@
+<template>
+<div>
+<v-layout>
+    <v-flex xs12 mb-2  style="width:100%">
+        <v-card>
+            <v-card-text>
+                <v-layout row>
+                    <v-flex xs6>
+                        <h4 class="headline">HAK AKSES HALAMAN</h4>
+                    </v-flex>
+                    <v-flex class="text-sm-right" xs6>
+                        <v-btn  @click="save()" color="primary">Simpan</v-btn>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+        </v-card>
+    </v-flex>
+</v-layout>
+<v-layout>
+    <v-dialog v-model="dialogsuccess" persistent  max-width="290">
+        <v-card>
+            <v-card-title color="success"  class="headline">Berhasil !</v-card-title>
+            <v-card-text>
+                {{msgsuccess}}
+            </v-card-text>
+            <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+    <v-flex xs12>
+        <v-layout row wrap>
+            <v-flex  xs3>
+                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 0">
+                    <v-card-title
+                        dark
+                        class="headline info pt-2 pb-2"
+                        primary-title
+                        style="color:white"
+                    >
+                        <h5 dark>{{mp.name}}</h5>
+                    </v-card-title>
+                    <v-card-text>
+                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
+                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
+                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
+                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
+                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
+                            </div>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+            <v-flex xs3>
+                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 1">
+                    <v-card-title
+                        dark
+                        class="headline info pt-2 pb-2"
+                        primary-title
+                        style="color:white"
+                    >
+                        <h5 dark>{{mp.name}}</h5>
+                    </v-card-title>
+                   <v-card-text>
+                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
+                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
+                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
+                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
+                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
+                            </div>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+            <v-flex xs3>
+                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 2">
+                    <v-card-title
+                        dark
+                        class="headline info pt-2 pb-2"
+                        primary-title
+                        style="color:white"
+                    >
+                        <h5 dark>{{mp.name}}</h5>
+                    </v-card-title>
+                    <v-card-text>
+                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
+                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
+                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
+                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
+                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
+                            </div>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+             <v-flex xs3>
+                <v-card class="mb-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 3">
+                    <v-card-title
+                        dark
+                        class="headline info pt-2 pb-2"
+                        primary-title
+                        style="color:white"
+                    >
+                        <h5 dark>{{mp.name}}</h5>
+                    </v-card-title>
+                    <v-card-text>
+                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
+                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
+                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
+                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
+                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
+                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
+                            </div>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-flex>
+        </v-layout>
+    </v-flex>
+</v-layout>
+</div>
+</template>
+
+<style scoped>
+    table, td, th {  
+    border: 1px solid #ddd;
+    text-align: left;
+    }
+
+    table {
+    border-collapse: collapse;
+    width: 100%;
+    }
+
+    th, td {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 8px;
+    padding-right: 5px;
+    }
+
+    .mini-input .v-input{
+        margin-top: 0px; 
+    }
+
+    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
+        margin-top: 0px; 
+        margin-bottom:0px;
+        margin-left:3px;
+    }
+    .mini-input .v-messages{
+        min-height:0px;
+    }
+    input.fhm-input{
+        border: 1px solid black; 
+        border-radius: 2px;
+        -webkit-box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        -moz-box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        box-shadow: 
+        inset 0 0 2px  rgba(0,0,0,0.1),
+                0 0 4px rgba(0,0,0,0.1); 
+        padding: 2px 4px;
+        background: rgba(255,255,255,0.5);
+        margin: 0 0 1px 0;
+        width:30px;
+        text-align:center;
+    }
+</style>
+
+<script>
+module.exports = {
+    data: () => ({
+    
+    }),
+    computed: {
+        xpriviledges() {
+            return this.$store.state.priviledge.priviledges
+        },
+        dialogsuccess: {
+            get() {
+                return this.$store.state.priviledge.dialog_success
+            },
+            set(val) {
+                this.$store.commit("priviledge/update_dialog_success",val)
+            }
+        },
+        msgsuccess(){
+            return this.$store.state.priviledge.msg_success
+        }
+    },
+    methods : {
+        rmod(idx){
+            return idx % 4
+        },
+        changePriviledge(idxpar,idxchild,val){
+            var arrx = this.$store.state.priviledge.priviledges
+            arrx[idxpar]['childs'][idxchild].status = val === 'N'?'Y':'N'
+            arrx[idxpar]['childs'][idxchild].active = 'Y'
+
+            this.$store.commit("priviledge/update_priviledges",arrx)
+            this.$store.commit("usergroup/update_no_save",true)
+        },
+        changePriviledgeLevel2(idxpar,idxchild,idxchild2,val){
+            var arrx = this.$store.state.priviledge.priviledges
+            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].status = val === 'N'?'Y':'N'
+            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].active = 'Y'
+
+            this.$store.commit("priviledge/update_priviledges",arrx)
+            this.$store.commit("usergroup/update_no_save",true)
+        },
+        closeDialogSuccess(){
+            this.$store.commit("priviledge/update_dialog_success",false)
+            this.$store.dispatch("priviledge/lookup",{
+                id:this.$store.state.usergroup.selected_usergroup.id
+            })
+        },
+        save(){
+            var prm = this.$store.state.priviledge.priviledges
+            this.$store.dispatch("priviledge/save",prm)
+        }
+    }
+}
+</script>

one-ui/system/one-md-priviledge/components/oneMdUsergroupList.vue

@@ -0,0 +1,310 @@
+<template>
+ <v-layout>
+ <template>
+  
+    <v-dialog
+      v-model="dialogdeletealert"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalert}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout> 
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealert = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlert()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+  
+</template>
+
+
+ <v-flex xs12 >
+       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
+         <v-toolbar  color="blue lighten-3" dark height="50px">
+           <v-toolbar-title>USERGROUP</v-toolbar-title>
+           <v-spacer></v-spacer>
+           
+         </v-toolbar>
+         <v-snackbar
+      v-model="snackbar"
+      :color="color"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+      
+    >
+      {{msgsnackbar}}
+      <v-btn
+        flat
+        @click="updateAlert_success(false)"
+      >
+        Tutup
+      </v-btn>
+    </v-snackbar>
+<v-layout row  style="background:#bbdefb;padding-top:5px;" justify-center>
+          <v-list-tile >
+            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..."/>
+            </v-list-tile-content>
+          </v-list-tile>
+          </v-layout>
+          <v-divider></v-divider>
+          <div style="overflow: auto;max-height:550px">
+          <div v-for="(vs,index) in vusergroups">
+                <v-layout pa-2 v-if="isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxsolid"  xs12>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-on="on">{{subname(vs.name)}}</span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+                <v-layout pa-2 v-if="!isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxoutline"  xs12>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-on="on">{{subname(vs.name)}}</span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+          <v-divider></v-divider>
+          </div>
+          </div>
+          <v-layout row>
+            <v-flex class="text-xs-center" pt-3 xs12>
+              <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;" >Menampilkan <span class="red--text">{{xtotalfilterusergroups}}</span> dari <span class="red--text">{{xtotalusergroups}}</span> total data</p>
+              <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
+              <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
+            </v-flex>
+          </v-layout>
+       </v-card>
+     </v-flex>
+      <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
+</v-layout>
+</template>
+
+<style scoped>
+.textinput {
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: white;
+  background-position: 10px 10px; 
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  border: 1px solid #607d8b;
+
+}
+
+.textinput:focus {
+  width: 100%;
+}
+.textinput:focus::-webkit-input-placeholder  {color:transparent;}
+.textinput:focus::-moz-placeholder   {color:transparent;}
+.textinput:-moz-placeholder   {color:transparent;}
+.boxoutline{
+  color:red;border:1px solid red;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxoutline:hover{
+  background:rgba(0, 0, 0, 0.07)!important;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boxsolid{
+  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxsolid:hover{
+  background:#f44336de;
+  font-size: 15px;
+  font-weight: 700;
+}
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+::-webkit-scrollbar {
+      width: 7px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+      background-color: #73baf3;
+} /* the new scrollbar will have a flat appearance with the set background color */
+ 
+::-webkit-scrollbar-thumb {
+      background-color: #2196f3; 
+} /* this will style the thumb, ignoring the track */
+ 
+::-webkit-scrollbar-button {
+      background-color: #0079da;
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+ 
+::-webkit-scrollbar-corner {
+      background-color: black;
+} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+
+</style>
+
+<script>
+module.exports = {
+  components : {
+      'one-dialog-alert':httpVueLoader('../../../common/oneDialogAlert.vue')
+   },
+  data: () => ({
+      color:"success",
+      valid:false,
+      schedulename:'',
+      nameRules: [
+        v => !!v || 'Nama Schedule harus diisi'
+      ],
+      dialogdeletealert:false,
+      msgalert:"",
+      xid:0,
+      xsearch:"",
+      msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !"
+    }),
+  mounted() {
+      this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+  },
+  computed: {
+      xact() {
+          return this.$store.state.usergroup.act
+      },
+      xshowall() {
+          return this.$store.state.usergroup.show_all
+      },  
+      vusergroups() {
+          return this.$store.state.usergroup.usergroups
+      },
+      xtotalusergroups(){
+        return this.$store.state.usergroup.total_usergroups
+      },
+      xtotalfilterusergroups(){
+        return this.$store.state.usergroup.total_filter_usergroups
+      },
+      snackbar: {
+         get() {
+            return this.$store.state.usergroup.alert_success
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_alert_success",val)
+         }
+      },
+      msgsnackbar(){
+        return this.$store.state.usergroup.msg_success
+      },
+      openalertconfirmation: {
+         get() {
+            return this.$store.state.usergroup.open_alert_confirmation
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_open_alert_confirmation",val)
+         }
+      }
+  },
+  methods : {
+    updateShowAll(val){
+      this.$store.commit("usergroup/update_show_all",val)
+       this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },
+    isSelected(p) {
+        return p.id ==  this.$store.state.usergroup.selected_usergroup.id
+    },
+    subname(name){
+      var xname = name
+      if(xname.length > 15){
+        xname = xname.substring(0, 12)+'...'
+      }
+      return xname
+    },
+    selectMe(sc) {
+      var xnosave = this.$store.state.usergroup.no_save
+      if(!xnosave){
+        this.$store.commit("usergroup/update_selected_usergroup",sc)
+        this.$store.dispatch("priviledge/lookup",{
+            id:this.$store.state.usergroup.selected_usergroup.id
+          })
+      }
+      else{
+        this.$store.commit("usergroup/update_open_alert_confirmation",true)
+      }
+      
+       
+    },
+    closeAlertConfirmation(){
+        this.$store.commit("usergroup/update_open_alert_confirmation",false)
+    },
+    forgetAlertConfirmation(){
+        this.$store.commit("usergroup/update_no_save",0)
+        this.$store.commit("usergroup/update_open_alert_confirmation",false)
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    thr_search: _.debounce( function () {
+        this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },1000)
+  },
+  watch: {
+    xsearch(val,old) {
+      
+      if ( val !== old && this.lookupstatus !== 1){
+        console.log(val)
+        this.xsearch = val
+        this.thr_search()
+      }
+    }
+  }
+}
+</script>

one-ui/system/one-md-priviledge/index.php

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>One</title>
+  <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+  <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body>
+  <div v-cloak id="app">
+    <v-app id="smartApp" >
+      <one-navbar></one-navbar>
+      <v-content class="blue lighten-5" >
+         <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+            <v-layout row wrap >
+               <v-flex xs2 class="left" fill-height pa-1>
+                    <!-- komponen kiri -->
+                    <one-md-usergroup-list></one-md-usergroup-list>
+                </v-flex>
+
+                <v-flex xs10 class="right" fill-height pa-1>
+                <one-md-priviledge></one-md-priviledge>
+
+
+                 </v-flex>
+               </v-layout>
+            </v-container>
+         </v-content>
+      <one-footer> </one-footer>
+    </v-app>
+  </div>
+
+  <!-- Vendor -->
+  <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+  <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+// window.store = store;
+new Vue({
+store,
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponentNoMenu.vue'),
+      'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
+        'one-md-usergroup-list': httpVueLoader('./components/oneMdUsergroupList.vue'),
+        'one-md-priviledge': httpVueLoader('./components/oneMdPriviledge.vue')
+      }
+    })
+    </script>
+  <style>
+    [v-cloak] {
+      display: none
+    }
+   .left {
+   }
+   .right {
+   }
+  </style>
+</body>
+
+</html>

one-ui/system/one-md-priviledge/modules/priviledge.js

@@ -0,0 +1,91 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/priviledge.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_priviledge: 0,
+        lookup_error_message: '',
+        priviledges: [],
+        save_status: 0,
+        save_error_message: '',
+        dialog_success: false,
+        msg_success: ""
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_priviledge(state, status) {
+            state.lookup_priviledge = status
+        },
+        update_priviledges(state, data) {
+            state.priviledges = data
+        },
+        update_selected_priviledge(state, val) {
+            state.selected_priviledge = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_success(state, val) {
+            state.dialog_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        }
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_priviledge", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.lookup(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_priviledge", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_priviledge", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records
+                    }
+                    context.commit("update_priviledges", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_priviledge", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.save(one_token(),prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", "")
+                    
+                    context.commit("update_dialog_success", true)
+                    var msg = "Data sudah terupdate dong ..."
+                    context.commit("update_msg_success", msg)
+                    context.commit("usergroup/update_no_save", false, { root: true })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+            }
+        }
+    }
+}

one-ui/system/one-md-priviledge/modules/usergroup.js

@@ -0,0 +1,98 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/usergroup.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_usergroup: 0,
+        lookup_error_message: '',
+        usergroups: [],
+        total_usergroups: 0,
+        total_filter_usergroups: 0,
+        selected_usergroup: { name: "[ Belum memilih Grup User ]" },
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_usergroup: false,
+        dialog_edit_form_usergroup:false,
+        alert_success: false,
+        msg_success: "",
+        show_all:'N',
+        no_save:false,
+        open_alert_confirmation:false
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_show_all(state, val) {
+            state.show_all = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_usergroup(state, status) {
+            state.lookup_usergroup = status
+        },
+        update_usergroups(state, data) {
+            state.usergroups = data.records
+            state.total_usergroups = data.total
+            state.total_filter_usergroups = data.total_filter
+        },
+        update_selected_usergroup(state, val) {
+            state.selected_usergroup = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_usergroup(state, val) {
+            state.dialog_form_usergroup = val
+        },
+        update_dialog_edit_form_usergroup(state, val) {
+            state.dialog_edit_form_usergroup = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_no_save(state, val) {
+            state.no_save = val
+        },
+        update_open_alert_confirmation(state, val) {
+            state.open_alert_confirmation = val
+        }
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.search, prm.all)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+                    context.commit("update_usergroups", data)
+                    context.commit("update_selected_usergroup", data.records[0])
+                    context.dispatch("priviledge/lookup",{id:data.records[0].id}, { root: true })
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        }
+    }
+}

one-ui/system/one-md-priviledge/store.js

@@ -0,0 +1,25 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import usergroup from "./modules/usergroup.js";
+import priviledge from "./modules/priviledge.js";
+import system from "../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        usergroup: usergroup,
+        priviledge:priviledge,
+        system: system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});

one-ui/system/one-md-usergroup-user-v2/api.js

@@ -0,0 +1,31 @@
+// API :
+// search bank
+// paramater : query , page , rowPerPage
+const URL =
+  "http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
+
+export async function searchBank(query, page, rowPerPage = 15) {
+  try {
+    var resp = await axios.post(URL, {
+      query: query,
+      page: page,
+      rowPerPage: rowPerPage
+    });
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        query: query,
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    data.query = query;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      query: query,
+      message: e.message
+    };
+  }
+}

one-ui/system/one-md-usergroup-user-v2/api/user.js

@@ -0,0 +1,78 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function save(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/addnewuser', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save_edit(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/edituser', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/deleteuser', { id: id ,token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function lookup(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/lookupuser', { id: id, token:token });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-usergroup-user-v2/api/usergroup.js

@@ -0,0 +1,98 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(token, search,all ) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/lookup', { token: token, search: search, all:all });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function getreportsample(token) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/getreportsample',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/addnewusergroup', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function update(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/editusergroup', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv2/deleteusergroup', { id: id, token:token });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-usergroup-user-v2/components/oneMdUserGroupList.vue

@@ -0,0 +1,417 @@
+<template>
+ <v-layout>
+ <template>
+
+    <v-dialog
+      v-model="dialogdeletealert"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalert}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealert = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlert()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+
+ <v-flex xs12 >
+       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
+         <v-toolbar  color="blue lighten-3" dark height="50px">
+           <v-toolbar-title>USER GROUP</v-toolbar-title>
+           <v-spacer></v-spacer>
+           <v-btn @click="openFormUsergroup()" icon>
+             <v-icon>library_add</v-icon>
+           </v-btn>
+         </v-toolbar>
+         <v-snackbar
+      v-model="snackbar"
+      :color="color"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+
+    >
+      {{msgsnackbar}}
+      <v-btn
+        flat
+        @click="updateAlert_success(false)"
+      >
+        Tutup
+      </v-btn>
+    </v-snackbar>
+<v-layout row  style="background:#bbdefb;padding-top:5px;" justify-left>
+          <v-list-tile >
+            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..."/>
+            </v-list-tile-content>
+          </v-list-tile>
+          </v-layout>
+          <v-divider></v-divider>
+          <div  v-for="(vs,index) in vusergroups" >
+
+                <v-layout pa-2 v-if="isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxsolid"  xs10>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-html="subname(vs.description)" v-on="on"></span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                    <v-flex class="boxsolid text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                      <v-layout row align-center justify-space-between>
+                        <v-icon style="color:#ffffff" @click="editUsergroup(vs)">edit</v-icon>
+                        <v-icon style="color:#ffffff" @click="deleteUsergroup(vs)">clear</v-icon>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+
+
+
+                <v-layout pa-2 v-if="!isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxoutline"  xs10>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-html="subname(vs.description)" v-on="on"></span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                    <v-flex class="boxoutline text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                      <v-layout row align-center justify-space-between>
+                        <v-icon style="color:red" @click="editUsergroup(vs)">edit</v-icon>
+                        <v-icon style="color:red" @click="deleteUsergroup(vs)">clear</v-icon>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+          <v-divider></v-divider>
+          </div>
+          <v-layout row>
+            <v-flex class="text-xs-center" pt-3 xs12>
+              <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;" >Menampilkan <span class="red--text">{{xtotalfilterusergroups}}</span> dari <span class="red--text">{{xtotalusergroups}}</span> total data</p>
+              <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
+              <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
+            </v-flex>
+          </v-layout>
+
+
+          <template>
+            <v-layout row justify-center>
+              <v-dialog v-model="dialogusergroup" persistent max-width="600px">
+                <v-card>
+                  <v-card-title>
+                    <span class="headline">Form User Group</span>
+                  </v-card-title>
+                  <v-card-text class="pt-0 pb-0">
+                  <v-form
+                      ref="formusergroup"
+                      v-model="valid"
+                      lazy-validation
+                    >
+                    <v-layout wrap>
+                        <v-flex xs12>
+                          <v-text-field v-model="usergroupname" label="Nama User Group" :rules="nameRules" required></v-text-field>
+                        </v-flex>
+                        <v-flex xs12>
+                          <v-text-field v-model="usergroupdashboard" label="Nama Dashboard" :rules="dashboardRules" required></v-text-field>
+                        </v-flex>
+                        <v-flex xs12>
+                         <v-checkbox  true-value="Y" false-value="N"  v-model="usergroupclinic"           label="Is Clinic"  :rules="clinicRules" required></v-checkbox>
+                         </v-flex>
+                        <v-flex>
+                          <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                        </v-flex>
+                    </v-layout>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue darken-1" flat @click="updateDialogFormUsergroup()">Tutup</v-btn>
+                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormUsergroup()">Simpan</v-btn>
+                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormUsergroup()">Simpan Perubahan</v-btn>
+                  </v-card-actions>
+                  </v-form>
+                </v-card>
+              </v-dialog>
+            </v-layout>
+          </template>
+
+       </v-card>
+     </v-flex>
+</v-layout>
+</template>
+
+<style scoped>
+.textinput {
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: white;
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  border: 1px solid #607d8b;
+
+}
+
+.textinput:focus {
+  width: 100%;
+}
+.textinput:focus::-webkit-input-placeholder  {color:transparent;}
+.textinput:focus::-moz-placeholder   {color:transparent;}
+.textinput:-moz-placeholder   {color:transparent;}
+.boxoutline{
+  color:red;border:1px solid red;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxoutline:hover{
+  background:rgba(0, 0, 0, 0.07)!important;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boxsolid{
+  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxsolid:hover{
+  background:#f44336de;
+  font-size: 15px;
+  font-weight: 700;
+}
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+::-webkit-scrollbar {
+      width: 7px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+      background-color: #73baf3;
+} /* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+      background-color: #2196f3;
+} /* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+      background-color: #0079da;
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+      background-color: black;
+} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+
+</style>
+
+<script>
+module.exports = {
+  data: () => ({
+      color:"success",
+      valid:false,
+      usergroupname:'',
+      usergroupdashboard:'',
+      usergroupclinic:'N',
+      nameRules: [
+        v => !!v || 'Nama User Group harus diisi'
+      ],
+      dashboardRules: [
+        v => !!v || 'Dashboard harus diisi'
+      ],
+      clinicRules: [
+        v => !!v || 'Clinic harus diPilih'
+      ],
+      dialogdeletealert:false,
+      msgalert:"",
+      xid:0,
+      xsearch:""
+    }),
+  mounted() {
+     this.$store.dispatch("usergroup/getreportsample")
+      this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+  },
+  computed: {
+      xact() {
+          return this.$store.state.usergroup.act
+      },
+      xerrors() {
+          return this.$store.state.usergroup.errors
+      },
+      xshowall() {
+          return this.$store.state.usergroup.show_all
+      },
+      vusergroups() {
+          return this.$store.state.usergroup.usergroups
+      },
+      xtotalusergroups(){
+        return this.$store.state.usergroup.total_usergroups
+      },
+      xtotalfilterusergroups(){
+        return this.$store.state.usergroup.total_filter_usergroups
+      },
+      dialogusergroup(){
+        return this.$store.state.usergroup.dialog_form_usergroup
+      },
+      snackbar: {
+         get() {
+            return this.$store.state.usergroup.alert_success
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_alert_success",val)
+         }
+      },
+      msgsnackbar(){
+        return this.$store.state.usergroup.msg_success
+      },
+      lookupstatus(){
+        return this.$store.state.usergroup.lookup_usergroup
+      }
+
+  },
+  methods : {
+    updateShowAll(val){
+      this.$store.commit("usergroup/update_show_all",val)
+       this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },
+    isSelected(p) {
+        return p.id ==  this.$store.state.usergroup.selected_usergroup.id
+    },
+    subname(name){
+      var xname = name
+      if(xname.length > 18){
+        xname = xname.substring(0, 18)+'...'
+      }
+      return xname
+    },
+    selectMe(sc) {
+        this.$store.commit("usergroup/update_selected_usergroup",sc)
+        this.$store.dispatch("user/lookup",{
+          id:this.$store.state.usergroup.selected_usergroup.id
+        })
+    },
+    updateDialogFormUsergroup(){
+       this.$store.commit("usergroup/update_dialog_form_usergroup",false)
+    },
+    openFormUsergroup(){
+      this.$refs.formusergroup.reset()
+      this.$refs.formusergroup.resetValidation()
+      this.$store.commit("usergroup/update_act",'new')
+      this.$store.commit("usergroup/update_error_code",false)
+      this.$store.commit("usergroup/update_error_name",false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup",true)
+    },
+    saveFormUsergroup(){
+      if (this.$refs.formusergroup.validate()) {
+          this.$store.dispatch("usergroup/save",{
+
+            name:this.usergroupname,
+            dashboard:this.usergroupdashboard,
+            clinic:this.usergroupclinic,
+
+         })
+      }
+    },
+    updateFormUsergroup(){
+      if (this.$refs.formusergroup.validate()) {
+          this.$store.dispatch("usergroup/update",{
+            id:this.xid,
+            name:this.usergroupname,
+            dashboard:this.usergroupdashboard,
+            clinic:this.usergroupclinic
+         })
+
+      }
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    editUsergroup(data){
+      this.xid = data.id
+
+      this.usergroupname = data.name
+      this.usergroupdashboard = data.dashboard
+      this.usergroupclinic = data.clinic
+      this.$store.commit("usergroup/update_act",'edit')
+      this.$store.commit("usergroup/update_error_name",false)
+      this.$store.commit("usergroup/update_error_dashboard",false)
+      this.$store.commit("usergroup/update_error_clinic",false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup",true)
+    },
+    deleteUsergroup(data){
+      this.xid = data.id
+      var xdata = {id:data.id,name:data.name,users:'xxx'}
+      this.$store.commit("usergroup/update_selected_usergroup",xdata)
+      this.msgalert =  "Yakin, mau hapus user group "+data.name+"  ?"
+      this.dialogdeletealert = true
+    },
+    closeDeleteAlert(){
+      this.$store.dispatch("usergroup/delete",{
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name
+          })
+      this.dialogdeletealert = false
+    },
+    thr_search: _.debounce( function () {
+        this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },1000)
+  },
+  watch: {
+      xsearch(val,old) {
+        if ( val !== old && this.lookupstatus !== 1){
+          console.log(val)
+          this.xsearch = val
+          this.thr_search()
+        }
+      }
+   }
+}
+</script>

one-ui/system/one-md-usergroup-user-v2/components/oneMdUserList.vue

@@ -0,0 +1,485 @@
+<template>
+ <v-layout >
+ <v-flex xs12 >
+ <v-card  class="mb-2" color="white"  >
+    <v-toolbar  color="blue lighten-3" dark height="50px">
+    <v-toolbar-title>User Group : {{xusergroup.name}}</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn @click="openFormUser(0)" icon>
+      <v-icon>library_add</v-icon>
+    </v-btn>
+  </v-toolbar>
+
+  <v-layout row wrap>
+    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+          <table>
+              <tr>
+                <th width="25%" class="text-md-center pt-2 pb-2">USERNAME</th>
+                <th  width="35%" class="text-md-center pt-2 pb-2">STAFF NAME</th>
+                <th  class="text-md-center pt-2 pb-2">AKSI</th>
+              </tr>
+              <tr v-if="users.length > 0 " v-for="(user,idx) in users">
+                <td class="text-md-left pl-3">{{user.username}}</td>
+                <td class="text-md-center">{{user.staffname}}</td>
+
+                <td align="center" class="text-md-center">
+                  <v-btn @click="editFormUser(user)" depressed small color="primary"><v-icon>edit</v-icon></v-btn>
+                  <v-btn @click="deleteUser(user)" depressed small color="error"><v-icon>delete</v-icon></v-btn>
+                </td>
+              </tr>
+              <tr v-if="users.length === 0"><td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td> </tr>
+          </table>
+    </v-flex>
+  </v-layout>
+   <template>
+
+    <v-dialog
+      v-model="dialogdeletealertuser"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalertuser}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealertuser = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlertUser()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+
+  <template>
+    <v-layout row justify-center>
+      <v-dialog v-model="dialoguser" persistent max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="headline">Form User</span>
+          </v-card-title>
+          <v-card-text class="pt-0 pb-0">
+          <v-form
+              ref="formusergroupuser"
+              v-model="validuser"
+              lazy-validation
+            >
+            <v-layout wrap>
+                <v-flex xs12>
+                  USER GROUP : {{xusergroup.name}}
+                </v-flex>
+                <v-flex xs12>
+                  <v-text-field label="User Name" v-model="username"   ></v-text-field>
+                </v-flex>
+
+
+
+                <v-flex xs12>
+                   <v-text-field   label="Password" v-model="password" type="password" ></v-text-field>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select :search-input.sync="searchStaff" item-text="Nat_StaffName" return-object :items="xstaffs" autocomplete  v-model="xstaff" label="Staff Name" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="T_SampleStationName" return-object :items="xsamplestationes"  v-model="xsamplestation" label="Sample Station" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="R_ReportGroupName" return-object :items="xreportes"  v-model="xreport" label="Report Group" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-checkbox v-model="iscoordinator" label="Coordinator ?"></v-checkbox>
+                 </v-flex>
+
+                <v-flex>
+                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                </v-flex>
+            </v-layout>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" flat @click="updateDialogFormUser()">Tutup</v-btn>
+            <v-btn color="blue darken-1" flat @click="saveFormUser()">Simpan</v-btn>
+          </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-layout>
+  </template>
+
+  <template>
+    <v-layout row justify-center>
+      <v-dialog v-model="dialoguseredit" persistent max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="headline">Form User</span>
+          </v-card-title>
+          <v-card-text class="pt-0 pb-0">
+          <v-form
+              ref="formusergroupuser"
+              v-model="validuser"
+              lazy-validation
+            >
+            <v-layout wrap>
+
+                <v-flex xs12>
+                <v-select item-text= "M_UserGroupName" return-object :items="xusergroupnames"
+                          item-value= "M_UserGroupID"
+                   v-model="xusergroupname" label="User Group" ></v-select>
+                </v-flex>
+                <v-flex xs12>
+                  <v-text-field label="User Name" v-model="username"   ></v-text-field>
+                </v-flex>
+
+
+
+                <v-flex xs12>
+                <v-select item-text="Nat_StaffName" return-object :items="xstaffs"  v-model="xstaff" label="Staff Name" ></v-select>
+                </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="T_SampleStationName" return-object :items="xsamplestationes"  v-model="xsamplestation" label="Sample Station" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="R_ReportGroupName" return-object :items="xreportes"  v-model="xreport" label="Report Group" ></v-select>
+                 </v-flex>
+
+
+
+                 <v-flex xs12>
+                 <v-checkbox v-model="iscoordinator" label="Coordinator ?"></v-checkbox>
+                 </v-flex>
+
+                <v-flex>
+                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                </v-flex>
+            </v-layout>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" flat @click="closeDialogEditUser()">Tutup</v-btn>
+            <v-btn color="blue darken-1" flat @click="saveEditUser()">Simpan</v-btn>
+          </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-layout>
+  </template>
+
+
+
+ </v-card>
+ </v-flex>
+
+
+
+</v-layout>
+</template>
+
+<style scoped>
+.searchbox .v-input.v-text-field .v-input__slot{
+   min-height:60px;
+}
+.searchbox .v-btn {
+   min-height:60px;
+}
+
+
+table {
+   font-family: arial, sans-serif;
+   border-collapse: collapse;
+   width: 100%;
+   background:white;
+   border: 0px;
+}
+
+th, td {
+   border: 1px solid black;
+   border-collapse: collapse;
+   padding-top: 2px;
+   padding-bottom: 2px;
+}
+table>tr>td {
+   padding: 8px;
+}
+table>tr>td:first {
+   padding-left:15px!important;
+}
+
+</style>
+
+<script>
+module.exports = {
+   data() {
+      return {
+         query: "",
+         items: [],
+         headers: [
+            {
+               text: "USER NAME",
+               align: "Center",
+               sortable: false,
+               value: "username",
+               width: "30%",
+               class: " blue lighten-4"
+            },
+            {
+               text: "STAFF NAME",
+               align: "Center",
+               sortable: false,
+               value: "staffname",
+               width: "30%",
+               class: "blue lighten-4"
+            },
+            {
+               text: "PASSWORD",
+               align: "Center",
+               sortable: false,
+               value: "password",
+               width: "30%",
+               class: "blue lighten-4"
+            },
+
+            {
+               text: "Action",
+               align: "Center",
+               sortable: false,
+               value: "status",
+               width: "15%",
+               class: "blue lighten-4"
+            }
+         ],
+          isLoading: false,
+          color:"success",
+          validuser:false,
+          xid:0,
+          username:"",
+          searchStaff: '',
+          staffname:"",
+          password:"",
+          iscoordinator:"",
+          dialogdeletealertuser:false,
+          msgalertuser:""
+      };
+   },
+   computed: {
+      dialoguseredit() {
+          return this.$store.state.user.dialog_form_user_edit
+      },
+      users() {
+          return this.$store.state.user.users
+      },
+      xusergroup(){
+        return this.$store.state.usergroup.selected_usergroup
+      },
+       dialoguser(){
+        return this.$store.state.user.dialog_form_user
+      },
+      xerrors() {
+          return this.$store.state.user.errors
+      },
+      xsamplestationes() {
+          return  this.$store.state.usergroup.samplestations
+      },
+      xsamplestation:{
+          get() {
+              return this.$store.state.user.selected_samplestation
+          },
+          set(val) {
+              var xval = val
+              if ( val.T_SampleStationID == undefined ) {
+                 for(var i=0; i< this.xsamplestationes.length ; i++ ) {
+                    var xs = this.xsamplestationes[i]
+                    if (xs.T_SampleStationID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("user/update_selected_samplestation",xval)
+          }
+      },
+      xstaffs() {
+          return  this.$store.state.usergroup.staffs
+      },
+      xstaff:{
+          get() {
+              return this.$store.state.user.selected_staff
+          },
+          set(val) {
+              var xval = val
+              if ( val.Nat_StaffID == undefined ) {
+                 for(var i=0; i< this.xstaffs.length ; i++ ) {
+                    var xs = this.xstaffs[i]
+                    if (xs.Nat_StaffID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("user/update_selected_staff",xval)
+          }
+      },
+      xusergroupnames() {
+          return  this.$store.state.usergroup.usergroupnames
+      },
+      xusergroupname:{
+          get() {
+              return this.$store.state.user.selected_usergroupname
+          },
+          set(val) {
+              var xval = val
+              if ( val.M_UserGroupID == undefined ) {
+                 for(var i=0; i< this.xusergroupnames.length ; i++ ) {
+                    var xs = this.xusergroupnames[i]
+                    if (xs.M_UserGroupID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+             this.$store.commit("user/update_selected_usergroupname",xval)
+          }
+      },
+      xreportes() {
+          return  this.$store.state.usergroup.reports
+      },
+      xreport:{
+          get() {
+              return this.$store.state.usergroup.selected_report
+          },
+          set(val) {
+              var xval = val
+              if ( val.R_ReportGroupID== undefined ) {
+                 for(var i=0; i< this.xreportes.length ; i++ ) {
+                    var xs = this.xreportes[i]
+                    if (xs.R_ReportGroupID== val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("usergroup/update_selected_report",xval)
+          }
+      }
+
+
+  },
+  methods : {
+    updateDialogFormUser(){
+       this.$store.commit("user/update_dialog_form_user",false)
+    },
+    openFormUser(val){
+      this.xid = val
+      this.username = ''
+
+      this.password = ''
+      this.xstaff = ''
+      this.xsamplestation = ''
+      this.xreport = ''
+      this.iscoordinator = ''
+      this.$store.commit("user/update_dialog_form_user",true)
+    },
+    editFormUser(val){
+      this.$store.commit("user/update_error_username",false)
+
+      this.$store.commit("user/update_error_password",false)
+      this.$store.commit("user/update_error_xstaff",false)
+      this.$store.commit("user/update_error_xsamplestation",false)
+      this.$store.commit("user/update_error_xreport",false)
+      this.$store.commit("user/update_error_xusergroupname",false)
+      this.$store.commit("user/update_error_iscoordinator",false)
+      this.xid = val.id
+      this.username = val.username
+
+      this.password = val.password
+      this.xstaff = val.xstaff
+      this.xsamplestation = val.xsamplestation
+      this.xreport = val.xreport
+      this.xusergroupname = val.usergroupid
+      this.iscoordinator = val.iscoordinator === 'N'?false:true
+      this.$store.commit("user/update_dialog_form_user_edit",true)
+    },
+    closeDialogEditUser() {
+      this.$store.commit("user/update_dialog_form_user_edit",false)
+    },
+    saveEditUser() {
+      this.$store.dispatch("user/save_edit",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username,
+
+            xstaff:this.xstaff,
+            xsamplestation:this.xsamplestation,
+            xreport:this.xreport,
+            xusergroupname:this.xusergroupname,
+            iscoordinator: this.iscoordinator === true ?"Y":"N"
+          })
+    },
+    saveFormUser(){
+      this.$store.dispatch("user/save",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username,
+
+            password:this.password,
+            xstaff:this.xstaff,
+            xsamplestation:this.xsamplestation,
+            xreport:this.xreport,
+            iscoordinator: this.iscoordinator === true ?"Y":"N"
+          })
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    deleteUser(data){
+      this.xid = data.id
+      this.msgalertuser = "Yakin, mau hapus user ?"
+      this.dialogdeletealertuser = true
+    },
+    closeDeleteAlertUser(){
+      this.$store.dispatch("user/delete",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username
+          })
+      this.dialogdeletealertuser = false
+    }
+  }
+}
+</script>

one-ui/system/one-md-usergroup-user-v2/index.php

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>One</title>
+  <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+  <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body>
+  <div v-cloak id="app">
+    <v-app id="smartApp" >
+      <one-navbar></one-navbar>
+      <v-content class="blue lighten-5" >
+         <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+            <v-layout row wrap >
+               <v-flex xs4 class="left" fill-height pa-1>
+                    <!-- komponen kiri -->
+                    <one-md-user-group-list></one-md-user-group-list>
+                </v-flex>
+                <v-flex xs8 class="right" fill-height pa-1>
+                     <!-- komponen kanan -->
+                    <one-md-user-list></one-md-user-list>
+                 </v-flex>
+               </v-layout>
+            </v-container>
+         </v-content>
+      <one-footer> </one-footer>
+    </v-app>
+  </div>
+
+  <!-- Vendor -->
+  <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+  <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponentNoMenu.vue'),
+        'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
+        'one-md-user-group-list': httpVueLoader('./components/oneMdUserGroupList.vue'),
+        'one-md-user-list' : httpVueLoader('./components/oneMdUserList.vue')
+      }
+    })
+    </script>
+  <style>
+    [v-cloak] {
+      display: none
+    }
+   .left {
+   }
+   .right {
+   }
+  </style>
+</body>
+
+</html>

one-ui/system/one-md-usergroup-user-v2/modules/user.js

@@ -0,0 +1,224 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/user.js"
+
+export default {
+    namespaced: true,
+    state: {
+        users: [],
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_user: false,
+        dialog_form_user_edit : false,
+        lookup_user: 0,
+        error_username: false,
+
+        error_password: false,
+        error_xreport: false,
+        error_xusergroupname: false,
+        error_xstaff: false,
+        error_xsamplestation: false,
+        error_iscoordinator: false,
+        update_error_xusergroup: false,
+        show_all:'N',
+        reports:[],
+        selected_report:{},
+        staffs:[],
+        selected_staff:{},
+        samplestations:[],
+        selected_samplestation:{},
+        usergroupnames:[],
+        selected_usergroupname:{},
+
+        errors:[]
+    },
+    mutations: {
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_error_username(state, val) {
+           state.error_username = val
+        },
+        update_error_password(state, val) {
+           state.error_password = val
+        },
+        update_error_xreport(state, val) {
+           state.error_xreport = val
+        },
+        update_error_xstaff(state, val) {
+           state.error_xstaff = val
+        },
+        update_error_xusergroupname(state, val) {
+           state.error_xusergroupname = val
+        },
+        update_error_xsamplestation(state, val) {
+           state.error_xsamplestation = val
+        },
+        update_error_iscoordinator(state, val) {
+           state.error_iscoordinator = val
+        },
+        update_error_xusergroup(state, val) {
+           state.error_xusergroup = val
+        },
+        update_users(state, data) {
+            state.users = data
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_user(state, val) {
+            state.dialog_form_user = val
+        },
+        update_dialog_form_user_edit(state, val) {
+            state.dialog_form_user_edit = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_lookup_user(state, val) {
+            state.lookup_user = val
+        }
+    },
+    actions: {
+        async save_edit(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save_edit(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if(data.total !== -1){
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user_edit", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if(data.total !== -1){
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async lookup(context, prm) {
+            context.commit("update_lookup_user", 1)
+            try {
+                let resp = await api.lookup(one_token(),prm.id)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_user", 3)
+                } else {
+                    context.commit("update_lookup_user", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_users", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_user", 3)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(),prm.xid)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    context.commit("usergroup/update_save_status", 2, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+
+                    //context.commit("update_dialog_form_schedule_promise", false)
+                    var msg = "User "+prm.username+" dari usergroup " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("usergroup/update_msg_success", msg, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+                    context.dispatch("lookup", {
+                        id: prm.usergroupid
+                    })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        }
+    }
+}

one-ui/system/one-md-usergroup-user-v2/modules/usergroup.js

@@ -0,0 +1,274 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/usergroup.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_usergroup: 0,
+		 get_data_status:0,
+        lookup_error_message: '',
+        usergroups: [],
+        total_usergroups: 0,
+        total_filter_usergroups: 0,
+        selected_usergroup: { name: "[ Belum memilih User Group ]" },
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_usergroup: false,
+        dialog_edit_form_usergroup:false,
+        alert_success: false,
+        msg_success: "",
+        error_clinic: false,
+        error_name: false,
+        error_dashboard: false,
+        reports:[],
+        selected_report:{},
+        staffs:[],
+        selected_staff:{},
+        usergroupnames:[],
+        selected_usergroupname:{},
+        samplestations:[],
+        selected_samplestation:{},
+
+        show_all:'N',
+        errors:[]
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_error_name(state, val) {
+           state.error_name = val
+        },
+        update_error_clinic(state, val) {
+           state.error_clinic = val
+        },
+        update_error_dashboard(state, val) {
+           state.error_dashboard = val
+        },
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_show_all(state, val) {
+            state.show_all = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_usergroup(state, status) {
+            state.lookup_usergroup = status
+        },
+        update_usergroups(state, data) {
+            state.usergroups = data.records
+            state.total_usergroups = data.total
+            state.total_filter_usergroups = data.total_filter
+        },
+        update_selected_usergroup(state, val) {
+            state.selected_usergroup = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_usergroup(state, val) {
+            state.dialog_form_usergroup = val
+        },
+        update_dialog_edit_form_usergroup(state, val) {
+            state.dialog_edit_form_usergroup = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+
+		update_get_data_status(state, val) {
+            state.get_data_status = val
+        }
+
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.search, prm.all)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+                    context.commit("update_usergroups", data)
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if(data.total !== -1){
+                        context.commit("update_errors",[])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah tersimpan dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "" , all:context.show_all})
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async update(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.update(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if(data.total !== -1){
+                        context.commit("update_error_name", false)
+                        context.commit("update_error_dashboard", false)
+                        context.commit("update_error_clinic", false)
+
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah terupdate dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "" , all:context.show_all})
+                    }else{
+                        if(resp.data.errorcode === 'Y'){
+                            context.commit("update_error_code", true)
+                        }
+                        if(resp.data.errorname === 'Y'){
+                            context.commit("update_error_name", true)
+                        }
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(),prm.usergroupid)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_alert_success", true)
+
+                    var msg = "Schedule " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("update_msg_success", msg)
+                    context.commit("update_alert_success", true)
+                    context.commit("update_selected_usergroup", {})
+                    context.dispatch("lookup", { search: "" })
+                    context.commit("user/update_usergroup_user", [], { root: true })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                console.log(e)
+            }
+        },
+		async getreportsample(context) {
+            context.commit("update_get_data_status",1)
+            try {
+                let resp= await api.getreportsample(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_get_data_status",3)
+                } else {
+                    context.commit("update_get_data_status",2)
+                    let data = {
+                        records : resp.data.records,
+                        total: resp.data.total
+                    }
+                      context.commit("update_staffs",data.records.staffs)
+                    context.commit("update_reports",data.records.reports)
+                    context.commit("update_samplestations",data.records.samplestations)
+                    context.commit("update_usergroupnames",data.records.usergroupnames)
+                }
+            } catch(e) {
+            context.commit("update_get_data_status",3)
+            }
+        }
+    }
+}

one-ui/system/one-md-usergroup-user-v2/store.js

@@ -0,0 +1,25 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import usergroup from "./modules/usergroup.js";
+import user from "./modules/user.js";
+import system from "../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        usergroup: usergroup,
+        user: user,
+        system:system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});

one-ui/system/one-md-usergroup-user/api.js

@@ -0,0 +1,31 @@
+// API :
+// search bank
+// paramater : query , page , rowPerPage
+const URL =
+  "http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
+
+export async function searchBank(query, page, rowPerPage = 15) {
+  try {
+    var resp = await axios.post(URL, {
+      query: query,
+      page: page,
+      rowPerPage: rowPerPage
+    });
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        query: query,
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    data.query = query;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      query: query,
+      message: e.message
+    };
+  }
+}

one-ui/system/one-md-usergroup-user/api/user.js

@@ -0,0 +1,78 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function save(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/addnewuser', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save_edit(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/edituser', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/deleteuser', { id: id ,token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function lookup(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/lookupuser', { id: id, token:token });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-usergroup-user/api/usergroup.js

@@ -0,0 +1,98 @@
+const URL = "/one-api/v1/masterdata/";
+
+export async function lookup(token, search,all ) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/lookup', { token: token, search: search, all:all });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function getreportsample(token) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/getreportsample',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function save(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/addnewusergroup', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function update(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/editusergroup', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroup/deleteusergroup', { id: id, token:token });
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-md-usergroup-user/components/oneMdUserGroupList.vue

@@ -0,0 +1,417 @@
+<template>
+ <v-layout>
+ <template>
+
+    <v-dialog
+      v-model="dialogdeletealert"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalert}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealert = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlert()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+
+ <v-flex xs12 >
+       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
+         <v-toolbar  color="blue lighten-3" dark height="50px">
+           <v-toolbar-title>USER GROUP</v-toolbar-title>
+           <v-spacer></v-spacer>
+           <v-btn @click="openFormUsergroup()" icon>
+             <v-icon>library_add</v-icon>
+           </v-btn>
+         </v-toolbar>
+         <v-snackbar
+      v-model="snackbar"
+      :color="color"
+      :timeout="5000"
+      :multi-line="false"
+      :vertical="false"
+      :top="true"
+
+    >
+      {{msgsnackbar}}
+      <v-btn
+        flat
+        @click="updateAlert_success(false)"
+      >
+        Tutup
+      </v-btn>
+    </v-snackbar>
+<v-layout row  style="background:#bbdefb;padding-top:5px;" justify-left>
+          <v-list-tile >
+            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..."/>
+            </v-list-tile-content>
+          </v-list-tile>
+          </v-layout>
+          <v-divider></v-divider>
+          <div  v-for="(vs,index) in vusergroups" >
+
+                <v-layout pa-2 v-if="isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxsolid"  xs10>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-html="subname(vs.description)" v-on="on"></span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                    <v-flex class="boxsolid text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                      <v-layout row align-center justify-space-between>
+                        <v-icon style="color:#ffffff" @click="editUsergroup(vs)">edit</v-icon>
+                        <v-icon style="color:#ffffff" @click="deleteUsergroup(vs)">clear</v-icon>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+
+
+
+                <v-layout pa-2 v-if="!isSelected(vs)" row>
+                <v-flex xs12 @click="selectMe(vs)"  >
+                  <v-layout row>
+                    <v-flex class="boxoutline"  xs10>
+                      <v-tooltip right>
+                        <template v-slot:activator="{ on }">
+                          <span v-html="subname(vs.description)" v-on="on"></span>
+                        </template>
+                        <span>{{vs.name}}</span>
+                      </v-tooltip>
+                    </v-flex>
+                    <v-flex class="boxoutline text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                      <v-layout row align-center justify-space-between>
+                        <v-icon style="color:red" @click="editUsergroup(vs)">edit</v-icon>
+                        <v-icon style="color:red" @click="deleteUsergroup(vs)">clear</v-icon>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+                </v-layout>
+          <v-divider></v-divider>
+          </div>
+          <v-layout row>
+            <v-flex class="text-xs-center" pt-3 xs12>
+              <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;" >Menampilkan <span class="red--text">{{xtotalfilterusergroups}}</span> dari <span class="red--text">{{xtotalusergroups}}</span> total data</p>
+              <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
+              <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
+            </v-flex>
+          </v-layout>
+
+
+          <template>
+            <v-layout row justify-center>
+              <v-dialog v-model="dialogusergroup" persistent max-width="600px">
+                <v-card>
+                  <v-card-title>
+                    <span class="headline">Form User Group</span>
+                  </v-card-title>
+                  <v-card-text class="pt-0 pb-0">
+                  <v-form
+                      ref="formusergroup"
+                      v-model="valid"
+                      lazy-validation
+                    >
+                    <v-layout wrap>
+                        <v-flex xs12>
+                          <v-text-field v-model="usergroupname" label="Nama User Group" :rules="nameRules" required></v-text-field>
+                        </v-flex>
+                        <v-flex xs12>
+                          <v-text-field v-model="usergroupdashboard" label="Nama Dashboard" :rules="dashboardRules" required></v-text-field>
+                        </v-flex>
+                        <v-flex xs12>
+                         <v-checkbox  true-value="Y" false-value="N"  v-model="usergroupclinic"           label="Is Clinic"  :rules="clinicRules" required></v-checkbox>
+                         </v-flex>
+                        <v-flex>
+                          <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                        </v-flex>
+                    </v-layout>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue darken-1" flat @click="updateDialogFormUsergroup()">Tutup</v-btn>
+                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormUsergroup()">Simpan</v-btn>
+                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormUsergroup()">Simpan Perubahan</v-btn>
+                  </v-card-actions>
+                  </v-form>
+                </v-card>
+              </v-dialog>
+            </v-layout>
+          </template>
+
+       </v-card>
+     </v-flex>
+</v-layout>
+</template>
+
+<style scoped>
+.textinput {
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: white;
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  border: 1px solid #607d8b;
+
+}
+
+.textinput:focus {
+  width: 100%;
+}
+.textinput:focus::-webkit-input-placeholder  {color:transparent;}
+.textinput:focus::-moz-placeholder   {color:transparent;}
+.textinput:-moz-placeholder   {color:transparent;}
+.boxoutline{
+  color:red;border:1px solid red;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxoutline:hover{
+  background:rgba(0, 0, 0, 0.07)!important;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boxsolid{
+  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
+  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
+    font-weight: 500;border-radius:1px
+}
+.boxsolid:hover{
+  background:#f44336de;
+  font-size: 15px;
+  font-weight: 700;
+}
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+::-webkit-scrollbar {
+      width: 7px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+      background-color: #73baf3;
+} /* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+      background-color: #2196f3;
+} /* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+      background-color: #0079da;
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+      background-color: black;
+} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+
+</style>
+
+<script>
+module.exports = {
+  data: () => ({
+      color:"success",
+      valid:false,
+      usergroupname:'',
+      usergroupdashboard:'',
+      usergroupclinic:'N',
+      nameRules: [
+        v => !!v || 'Nama User Group harus diisi'
+      ],
+      dashboardRules: [
+        v => !!v || 'Dashboard harus diisi'
+      ],
+      clinicRules: [
+        v => !!v || 'Clinic harus diPilih'
+      ],
+      dialogdeletealert:false,
+      msgalert:"",
+      xid:0,
+      xsearch:""
+    }),
+  mounted() {
+     this.$store.dispatch("usergroup/getreportsample")
+      this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+  },
+  computed: {
+      xact() {
+          return this.$store.state.usergroup.act
+      },
+      xerrors() {
+          return this.$store.state.usergroup.errors
+      },
+      xshowall() {
+          return this.$store.state.usergroup.show_all
+      },
+      vusergroups() {
+          return this.$store.state.usergroup.usergroups
+      },
+      xtotalusergroups(){
+        return this.$store.state.usergroup.total_usergroups
+      },
+      xtotalfilterusergroups(){
+        return this.$store.state.usergroup.total_filter_usergroups
+      },
+      dialogusergroup(){
+        return this.$store.state.usergroup.dialog_form_usergroup
+      },
+      snackbar: {
+         get() {
+            return this.$store.state.usergroup.alert_success
+         },
+         set(val) {
+            this.$store.commit("usergroup/update_alert_success",val)
+         }
+      },
+      msgsnackbar(){
+        return this.$store.state.usergroup.msg_success
+      },
+      lookupstatus(){
+        return this.$store.state.usergroup.lookup_usergroup
+      }
+
+  },
+  methods : {
+    updateShowAll(val){
+      this.$store.commit("usergroup/update_show_all",val)
+       this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },
+    isSelected(p) {
+        return p.id ==  this.$store.state.usergroup.selected_usergroup.id
+    },
+    subname(name){
+      var xname = name
+      if(xname.length > 18){
+        xname = xname.substring(0, 18)+'...'
+      }
+      return xname
+    },
+    selectMe(sc) {
+        this.$store.commit("usergroup/update_selected_usergroup",sc)
+        this.$store.dispatch("user/lookup",{
+          id:this.$store.state.usergroup.selected_usergroup.id
+        })
+    },
+    updateDialogFormUsergroup(){
+       this.$store.commit("usergroup/update_dialog_form_usergroup",false)
+    },
+    openFormUsergroup(){
+      this.$refs.formusergroup.reset()
+      this.$refs.formusergroup.resetValidation()
+      this.$store.commit("usergroup/update_act",'new')
+      this.$store.commit("usergroup/update_error_code",false)
+      this.$store.commit("usergroup/update_error_name",false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup",true)
+    },
+    saveFormUsergroup(){
+      if (this.$refs.formusergroup.validate()) {
+          this.$store.dispatch("usergroup/save",{
+
+            name:this.usergroupname,
+            dashboard:this.usergroupdashboard,
+            clinic:this.usergroupclinic,
+
+         })
+      }
+    },
+    updateFormUsergroup(){
+      if (this.$refs.formusergroup.validate()) {
+          this.$store.dispatch("usergroup/update",{
+            id:this.xid,
+            name:this.usergroupname,
+            dashboard:this.usergroupdashboard,
+            clinic:this.usergroupclinic
+         })
+
+      }
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    editUsergroup(data){
+      this.xid = data.id
+
+      this.usergroupname = data.name
+      this.usergroupdashboard = data.dashboard
+      this.usergroupclinic = data.clinic
+      this.$store.commit("usergroup/update_act",'edit')
+      this.$store.commit("usergroup/update_error_name",false)
+      this.$store.commit("usergroup/update_error_dashboard",false)
+      this.$store.commit("usergroup/update_error_clinic",false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup",true)
+    },
+    deleteUsergroup(data){
+      this.xid = data.id
+      var xdata = {id:data.id,name:data.name,users:'xxx'}
+      this.$store.commit("usergroup/update_selected_usergroup",xdata)
+      this.msgalert =  "Yakin, mau hapus user group "+data.name+"  ?"
+      this.dialogdeletealert = true
+    },
+    closeDeleteAlert(){
+      this.$store.dispatch("usergroup/delete",{
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name
+          })
+      this.dialogdeletealert = false
+    },
+    thr_search: _.debounce( function () {
+        this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
+    },1000)
+  },
+  watch: {
+      xsearch(val,old) {
+        if ( val !== old && this.lookupstatus !== 1){
+          console.log(val)
+          this.xsearch = val
+          this.thr_search()
+        }
+      }
+   }
+}
+</script>

one-ui/system/one-md-usergroup-user/components/oneMdUserList.vue

@@ -0,0 +1,485 @@
+<template>
+ <v-layout >
+ <v-flex xs12 >
+ <v-card  class="mb-2" color="white"  >
+    <v-toolbar  color="blue lighten-3" dark height="50px">
+    <v-toolbar-title>User Group : {{xusergroup.name}}</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn @click="openFormUser(0)" icon>
+      <v-icon>library_add</v-icon>
+    </v-btn>
+  </v-toolbar>
+
+  <v-layout row wrap>
+    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+          <table>
+              <tr>
+                <th width="25%" class="text-md-center pt-2 pb-2">USERNAME</th>
+                <th  width="35%" class="text-md-center pt-2 pb-2">STAFF NAME</th>
+                <th  class="text-md-center pt-2 pb-2">AKSI</th>
+              </tr>
+              <tr v-if="users.length > 0 " v-for="(user,idx) in users">
+                <td class="text-md-left pl-3">{{user.username}}</td>
+                <td class="text-md-center">{{user.staffname}}</td>
+
+                <td align="center" class="text-md-center">
+                  <v-btn @click="editFormUser(user)" depressed small color="primary"><v-icon>edit</v-icon></v-btn>
+                  <v-btn @click="deleteUser(user)" depressed small color="error"><v-icon>delete</v-icon></v-btn>
+                </td>
+              </tr>
+              <tr v-if="users.length === 0"><td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td> </tr>
+          </table>
+    </v-flex>
+  </v-layout>
+   <template>
+
+    <v-dialog
+      v-model="dialogdeletealertuser"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                       {{msgalertuser}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="dialogdeletealertuser = false"
+                >
+                Tutup
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeDeleteAlertUser()"
+                >
+                Yakin lah
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+
+  <template>
+    <v-layout row justify-center>
+      <v-dialog v-model="dialoguser" persistent max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="headline">Form User</span>
+          </v-card-title>
+          <v-card-text class="pt-0 pb-0">
+          <v-form
+              ref="formusergroupuser"
+              v-model="validuser"
+              lazy-validation
+            >
+            <v-layout wrap>
+                <v-flex xs12>
+                  USER GROUP : {{xusergroup.name}}
+                </v-flex>
+                <v-flex xs12>
+                  <v-text-field label="User Name" v-model="username"   ></v-text-field>
+                </v-flex>
+
+
+
+                <v-flex xs12>
+                   <v-text-field   label="Password" v-model="password" type="password" ></v-text-field>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="M_StaffName" return-object :items="xstaffs"  v-model="xstaff" label="Staff Name" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="T_SampleStationName" return-object :items="xsamplestationes"  v-model="xsamplestation" label="Sample Station" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="R_ReportGroupName" return-object :items="xreportes"  v-model="xreport" label="Report Group" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-checkbox v-model="iscoordinator" label="Coordinator ?"></v-checkbox>
+                 </v-flex>
+
+                <v-flex>
+                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                </v-flex>
+            </v-layout>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" flat @click="updateDialogFormUser()">Tutup</v-btn>
+            <v-btn color="blue darken-1" flat @click="saveFormUser()">Simpan</v-btn>
+          </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-layout>
+  </template>
+
+  <template>
+    <v-layout row justify-center>
+      <v-dialog v-model="dialoguseredit" persistent max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="headline">Form User</span>
+          </v-card-title>
+          <v-card-text class="pt-0 pb-0">
+          <v-form
+              ref="formusergroupuser"
+              v-model="validuser"
+              lazy-validation
+            >
+            <v-layout wrap>
+
+                <v-flex xs12>
+                <v-select item-text= "M_UserGroupName" return-object :items="xusergroupnames"
+                          item-value= "M_UserGroupID"
+                   v-model="xusergroupname" label="User Group" ></v-select>
+                </v-flex>
+                <v-flex xs12>
+                  <v-text-field label="User Name" v-model="username"   ></v-text-field>
+                </v-flex>
+
+
+
+                <v-flex xs12>
+                <v-select item-text="M_StaffName" return-object :items="xstaffs"  v-model="xstaff" label="Staff Name" ></v-select>
+                </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="T_SampleStationName" return-object :items="xsamplestationes"  v-model="xsamplestation" label="Sample Station" ></v-select>
+                 </v-flex>
+
+                 <v-flex xs12>
+                 <v-select item-text="R_ReportGroupName" return-object :items="xreportes"  v-model="xreport" label="Report Group" ></v-select>
+                 </v-flex>
+
+
+
+                 <v-flex xs12>
+                 <v-checkbox v-model="iscoordinator" label="Coordinator ?"></v-checkbox>
+                 </v-flex>
+
+                <v-flex>
+                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
+                </v-flex>
+            </v-layout>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" flat @click="closeDialogEditUser()">Tutup</v-btn>
+            <v-btn color="blue darken-1" flat @click="saveEditUser()">Simpan</v-btn>
+          </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-layout>
+  </template>
+
+
+
+ </v-card>
+ </v-flex>
+
+
+
+</v-layout>
+</template>
+
+<style scoped>
+.searchbox .v-input.v-text-field .v-input__slot{
+   min-height:60px;
+}
+.searchbox .v-btn {
+   min-height:60px;
+}
+
+
+table {
+   font-family: arial, sans-serif;
+   border-collapse: collapse;
+   width: 100%;
+   background:white;
+   border: 0px;
+}
+
+th, td {
+   border: 1px solid black;
+   border-collapse: collapse;
+   padding-top: 2px;
+   padding-bottom: 2px;
+}
+table>tr>td {
+   padding: 8px;
+}
+table>tr>td:first {
+   padding-left:15px!important;
+}
+
+</style>
+
+<script>
+module.exports = {
+   data() {
+      return {
+         query: "",
+         items: [],
+         headers: [
+            {
+               text: "USER NAME",
+               align: "Center",
+               sortable: false,
+               value: "username",
+               width: "30%",
+               class: " blue lighten-4"
+            },
+            {
+               text: "STAFF NAME",
+               align: "Center",
+               sortable: false,
+               value: "staffname",
+               width: "30%",
+               class: "blue lighten-4"
+            },
+            {
+               text: "PASSWORD",
+               align: "Center",
+               sortable: false,
+               value: "password",
+               width: "30%",
+               class: "blue lighten-4"
+            },
+
+            {
+               text: "Action",
+               align: "Center",
+               sortable: false,
+               value: "status",
+               width: "15%",
+               class: "blue lighten-4"
+            }
+         ],
+          isLoading: false,
+          color:"success",
+          validuser:false,
+          xid:0,
+          username:"",
+
+          staffname:"",
+          password:"",
+          iscoordinator:"",
+          dialogdeletealertuser:false,
+          msgalertuser:""
+      };
+   },
+   computed: {
+      dialoguseredit() {
+          return this.$store.state.user.dialog_form_user_edit
+      },
+      users() {
+          return this.$store.state.user.users
+      },
+      xusergroup(){
+        return this.$store.state.usergroup.selected_usergroup
+      },
+       dialoguser(){
+        return this.$store.state.user.dialog_form_user
+      },
+      xerrors() {
+          return this.$store.state.user.errors
+      },
+      xsamplestationes() {
+          return  this.$store.state.usergroup.samplestations
+      },
+      xsamplestation:{
+          get() {
+              return this.$store.state.user.selected_samplestation
+          },
+          set(val) {
+              var xval = val
+              if ( val.T_SampleStationID == undefined ) {
+                 for(var i=0; i< this.xsamplestationes.length ; i++ ) {
+                    var xs = this.xsamplestationes[i]
+                    if (xs.T_SampleStationID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("user/update_selected_samplestation",xval)
+          }
+      },
+      xstaffs() {
+          return  this.$store.state.usergroup.staffs
+      },
+      xstaff:{
+          get() {
+              return this.$store.state.user.selected_staff
+          },
+          set(val) {
+              var xval = val
+              if ( val.M_StaffID == undefined ) {
+                 for(var i=0; i< this.xstaffs.length ; i++ ) {
+                    var xs = this.xstaffs[i]
+                    if (xs.M_StaffID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("user/update_selected_staff",xval)
+          }
+      },
+      xusergroupnames() {
+          return  this.$store.state.usergroup.usergroupnames
+      },
+      xusergroupname:{
+          get() {
+              return this.$store.state.user.selected_usergroupname
+          },
+          set(val) {
+              var xval = val
+              if ( val.M_UserGroupID == undefined ) {
+                 for(var i=0; i< this.xusergroupnames.length ; i++ ) {
+                    var xs = this.xusergroupnames[i]
+                    if (xs.M_UserGroupID == val ) {
+                       xval = xs
+                    }
+                 }
+              }
+             this.$store.commit("user/update_selected_usergroupname",xval)
+          }
+      },
+      xreportes() {
+          return  this.$store.state.usergroup.reports
+      },
+      xreport:{
+          get() {
+              return this.$store.state.usergroup.selected_report
+          },
+          set(val) {
+              var xval = val
+              if ( val.R_ReportGroupID== undefined ) {
+                 for(var i=0; i< this.xreportes.length ; i++ ) {
+                    var xs = this.xreportes[i]
+                    if (xs.R_ReportGroupID== val ) {
+                       xval = xs
+                    }
+                 }
+              }
+              this.$store.commit("usergroup/update_selected_report",xval)
+          }
+      }
+
+
+  },
+  methods : {
+    updateDialogFormUser(){
+       this.$store.commit("user/update_dialog_form_user",false)
+    },
+    openFormUser(val){
+      this.xid = val
+      this.username = ''
+
+      this.password = ''
+      this.xstaff = ''
+      this.xsamplestation = ''
+      this.xreport = ''
+      this.iscoordinator = ''
+      this.$store.commit("user/update_dialog_form_user",true)
+    },
+    editFormUser(val){
+      this.$store.commit("user/update_error_username",false)
+
+      this.$store.commit("user/update_error_password",false)
+      this.$store.commit("user/update_error_xstaff",false)
+      this.$store.commit("user/update_error_xsamplestation",false)
+      this.$store.commit("user/update_error_xreport",false)
+      this.$store.commit("user/update_error_xusergroupname",false)
+      this.$store.commit("user/update_error_iscoordinator",false)
+      this.xid = val.id
+      this.username = val.username
+
+      this.password = val.password
+      this.xstaff = val.xstaff
+      this.xsamplestation = val.xsamplestation
+      this.xreport = val.xreport
+      this.xusergroupname = val.usergroupid
+      this.iscoordinator = val.iscoordinator === 'N'?false:true
+      this.$store.commit("user/update_dialog_form_user_edit",true)
+    },
+    closeDialogEditUser() {
+      this.$store.commit("user/update_dialog_form_user_edit",false)
+    },
+    saveEditUser() {
+      this.$store.dispatch("user/save_edit",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username,
+
+            xstaff:this.xstaff,
+            xsamplestation:this.xsamplestation,
+            xreport:this.xreport,
+            xusergroupname:this.xusergroupname,
+            iscoordinator: this.iscoordinator === true ?"Y":"N"
+          })
+    },
+    saveFormUser(){
+      this.$store.dispatch("user/save",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username,
+
+            password:this.password,
+            xstaff:this.xstaff,
+            xsamplestation:this.xsamplestation,
+            xreport:this.xreport,
+            iscoordinator: this.iscoordinator === true ?"Y":"N"
+          })
+    },
+    updateAlert_success(val){
+      this.$store.commit("usergroup/update_alert_success",val)
+    },
+    deleteUser(data){
+      this.xid = data.id
+      this.msgalertuser = "Yakin, mau hapus user ?"
+      this.dialogdeletealertuser = true
+    },
+    closeDeleteAlertUser(){
+      this.$store.dispatch("user/delete",{
+            xid:this.xid,
+            usergroupid:this.$store.state.usergroup.selected_usergroup.id,
+            usergroupname:this.$store.state.usergroup.selected_usergroup.name,
+            username:this.username
+          })
+      this.dialogdeletealertuser = false
+    }
+  }
+}
+</script>

one-ui/system/one-md-usergroup-user/index.php

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>One</title>
+  <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+  <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body>
+  <div v-cloak id="app">
+    <v-app id="smartApp" >
+      <one-navbar></one-navbar>
+      <v-content class="blue lighten-5" >
+         <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+            <v-layout row wrap >
+               <v-flex xs4 class="left" fill-height pa-1>
+                    <!-- komponen kiri -->
+                    <one-md-user-group-list></one-md-user-group-list>
+                </v-flex>
+                <v-flex xs8 class="right" fill-height pa-1>
+                     <!-- komponen kanan -->
+                    <one-md-user-list></one-md-user-list>
+                 </v-flex>
+               </v-layout>
+            </v-container>
+         </v-content>
+      <one-footer> </one-footer>
+    </v-app>
+  </div>
+
+  <!-- Vendor -->
+  <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+  <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponent.vue'),
+        'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
+        'one-md-user-group-list': httpVueLoader('./components/oneMdUserGroupList.vue'),
+        'one-md-user-list' : httpVueLoader('./components/oneMdUserList.vue')
+      }
+    })
+    </script>
+  <style>
+    [v-cloak] {
+      display: none
+    }
+   .left {
+   }
+   .right {
+   }
+  </style>
+</body>
+
+</html>

one-ui/system/one-md-usergroup-user/modules/user.js

@@ -0,0 +1,224 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/user.js"
+
+export default {
+    namespaced: true,
+    state: {
+        users: [],
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_user: false,
+        dialog_form_user_edit : false,
+        lookup_user: 0,
+        error_username: false,
+
+        error_password: false,
+        error_xreport: false,
+        error_xusergroupname: false,
+        error_xstaff: false,
+        error_xsamplestation: false,
+        error_iscoordinator: false,
+        update_error_xusergroup: false,
+        show_all:'N',
+        reports:[],
+        selected_report:{},
+        staffs:[],
+        selected_staff:{},
+        samplestations:[],
+        selected_samplestation:{},
+        usergroupnames:[],
+        selected_usergroupname:{},
+
+        errors:[]
+    },
+    mutations: {
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_error_username(state, val) {
+           state.error_username = val
+        },
+        update_error_password(state, val) {
+           state.error_password = val
+        },
+        update_error_xreport(state, val) {
+           state.error_xreport = val
+        },
+        update_error_xstaff(state, val) {
+           state.error_xstaff = val
+        },
+        update_error_xusergroupname(state, val) {
+           state.error_xusergroupname = val
+        },
+        update_error_xsamplestation(state, val) {
+           state.error_xsamplestation = val
+        },
+        update_error_iscoordinator(state, val) {
+           state.error_iscoordinator = val
+        },
+        update_error_xusergroup(state, val) {
+           state.error_xusergroup = val
+        },
+        update_users(state, data) {
+            state.users = data
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_user(state, val) {
+            state.dialog_form_user = val
+        },
+        update_dialog_form_user_edit(state, val) {
+            state.dialog_form_user_edit = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_lookup_user(state, val) {
+            state.lookup_user = val
+        }
+    },
+    actions: {
+        async save_edit(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save_edit(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if(data.total !== -1){
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user_edit", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if(data.total !== -1){
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async lookup(context, prm) {
+            context.commit("update_lookup_user", 1)
+            try {
+                let resp = await api.lookup(one_token(),prm.id)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_user", 3)
+                } else {
+                    context.commit("update_lookup_user", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_users", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_user", 3)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(),prm.xid)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    context.commit("usergroup/update_save_status", 2, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+
+                    //context.commit("update_dialog_form_schedule_promise", false)
+                    var msg = "User "+prm.username+" dari usergroup " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("usergroup/update_msg_success", msg, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+                    context.dispatch("lookup", {
+                        id: prm.usergroupid
+                    })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        }
+    }
+}

one-ui/system/one-md-usergroup-user/modules/usergroup.js

@@ -0,0 +1,274 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/usergroup.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act:'new',
+        lookup_usergroup: 0,
+		 get_data_status:0,
+        lookup_error_message: '',
+        usergroups: [],
+        total_usergroups: 0,
+        total_filter_usergroups: 0,
+        selected_usergroup: { name: "[ Belum memilih User Group ]" },
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_usergroup: false,
+        dialog_edit_form_usergroup:false,
+        alert_success: false,
+        msg_success: "",
+        error_clinic: false,
+        error_name: false,
+        error_dashboard: false,
+        reports:[],
+        selected_report:{},
+        staffs:[],
+        selected_staff:{},
+        usergroupnames:[],
+        selected_usergroupname:{},
+        samplestations:[],
+        selected_samplestation:{},
+
+        show_all:'N',
+        errors:[]
+    },
+    mutations: {
+        update_act(state, val) {
+            state.act = val
+        },
+        update_error_name(state, val) {
+           state.error_name = val
+        },
+        update_error_clinic(state, val) {
+           state.error_clinic = val
+        },
+        update_error_dashboard(state, val) {
+           state.error_dashboard = val
+        },
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_show_all(state, val) {
+            state.show_all = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_usergroup(state, status) {
+            state.lookup_usergroup = status
+        },
+        update_usergroups(state, data) {
+            state.usergroups = data.records
+            state.total_usergroups = data.total
+            state.total_filter_usergroups = data.total_filter
+        },
+        update_selected_usergroup(state, val) {
+            state.selected_usergroup = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_usergroup(state, val) {
+            state.dialog_form_usergroup = val
+        },
+        update_dialog_edit_form_usergroup(state, val) {
+            state.dialog_edit_form_usergroup = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+
+		update_get_data_status(state, val) {
+            state.get_data_status = val
+        }
+
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.search, prm.all)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+                    context.commit("update_usergroups", data)
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if(data.total !== -1){
+                        context.commit("update_errors",[])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah tersimpan dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "" , all:context.show_all})
+                    }else{
+                        context.commit("update_errors", resp.data.errors)
+
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async update(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.update(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if(data.total !== -1){
+                        context.commit("update_error_name", false)
+                        context.commit("update_error_dashboard", false)
+                        context.commit("update_error_clinic", false)
+
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah terupdate dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "" , all:context.show_all})
+                    }else{
+                        if(resp.data.errorcode === 'Y'){
+                            context.commit("update_error_code", true)
+                        }
+                        if(resp.data.errorname === 'Y'){
+                            context.commit("update_error_name", true)
+                        }
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(),prm.usergroupid)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_alert_success", true)
+
+                    var msg = "Schedule " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("update_msg_success", msg)
+                    context.commit("update_alert_success", true)
+                    context.commit("update_selected_usergroup", {})
+                    context.dispatch("lookup", { search: "" })
+                    context.commit("user/update_usergroup_user", [], { root: true })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                console.log(e)
+            }
+        },
+		async getreportsample(context) {
+            context.commit("update_get_data_status",1)
+            try {
+                let resp= await api.getreportsample(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_get_data_status",3)
+                } else {
+                    context.commit("update_get_data_status",2)
+                    let data = {
+                        records : resp.data.records,
+                        total: resp.data.total
+                    }
+                      context.commit("update_staffs",data.records.staffs)
+                    context.commit("update_reports",data.records.reports)
+                    context.commit("update_samplestations",data.records.samplestations)
+                    context.commit("update_usergroupnames",data.records.usergroupnames)
+                }
+            } catch(e) {
+            context.commit("update_get_data_status",3)
+            }
+        }
+    }
+}

one-ui/system/one-md-usergroup-user/store.js

@@ -0,0 +1,25 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import usergroup from "./modules/usergroup.js";
+import user from "./modules/user.js";
+import system from "../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        usergroup: usergroup,
+        user: user,
+        system:system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});

one-ui/system/one-replication/api/replication.js

@@ -0,0 +1,20 @@
+const URL = "/one-api/tools/";
+
+export async function load(prm) {
+    try {
+        var resp = await axios.post(URL + 'replication/monitor', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-replication/api/sales.js

@@ -0,0 +1,401 @@
+const URL = "/one-api/v1/management/";
+
+export async function search(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/search', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function searchconfirm(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/searchconfirm', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function getsexreg(token) {
+    try {
+        var resp = await axios.post(URL + 'sales/getsexreg',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function getdatas_riau(prm) {
+    try {
+        var resp = await axios.post('http://riau.aplikasi.web.id/one-api/tools/management/sales/getdatas',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function getdatas_pajajaran(prm) {
+    try {
+        var resp = await axios.post('http://pajajaran.aplikasi.web.id/one-api/tools/management/sales/getdatas',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function getdatas_toha(prm) {
+    try {
+        var resp = await axios.post('http://toha.aplikasi.web.id/one-api/tools/management/sales/getdatas',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function getdatas_cimahi(prm) {
+    try {
+        var resp = await axios.post('http://cimahi.aplikasi.web.id/one-api/tools/management/sales/getdatas',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function removecode(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/removecode',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function attachdoctor(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/attachdoctor',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+export async function save(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/save',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function newdoctor(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/newdoctor',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function xdelete(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/deletedoctor',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function getaddress(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/getaddress',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function searchcity(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'sales/searchcity',{token:token,search:prm});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ 
+ export async function searchstaff(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'sales/searchstaff',{token:token,name:prm});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ export async function getdistrict(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'sales/getdistrict',{id:prm.M_CityID,token:token});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ export async function getkelurahan(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'sales/getkelurahan',{token:token,id:prm.M_DistrictID});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ export async function getjpa(token) {
+    try {
+       var resp = await axios.post(URL + 'sales/getjpa',{token:token});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+
+
+export async function savenewaddress(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/savenewaddress',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function saveeditaddress(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/saveeditaddress',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function deleteaddress(prm) {
+    try {
+        var resp = await axios.post(URL + 'sales/deleteaddress',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/system/one-replication/components/oneChart.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="example">
+    <apexcharts width="500" height="350" type="bar" :options="chartOptions" :series="series"></apexcharts>
+  </div>
+</template>
+
+<script>
+import Chart from './components/oneChart.vue'
+
+export default {
+  name: 'Chart',
+  components: {
+    apexcharts: VueApexCharts,
+  },
+  data: function() {
+    return {
+      chartOptions: {
+        chart: {
+          id: 'basic-bar'
+        },
+        xaxis: {
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
+        }
+      },
+      series: [{
+        name: 'series-1',
+        data: [30, 40, 45, 50, 49, 60, 70, 91]
+      }]
+    }
+  },
+}
+</script>

one-ui/system/one-replication/components/oneSales.vue

@@ -0,0 +1,159 @@
+<template>
+    <v-layout wrap>
+        <v-flex xs12 and-down>
+            <v-layout row>
+                <v-flex sm12 and-down>
+                    <v-card color="#C8DFC3">
+                        <v-card-title class="pa-1" style="background:#3F848F" >
+
+                        </v-card-title>
+                        <v-card-text class="pt-1">
+                            <v-layout row>
+                                <v-flex class="text-xs-left" sm6 and-down>
+                                    <p class="mb-0 caption mono" style="color:#616161">PASIEN</p>
+                                    <p class="mb-1 text--primary"><span class="display-1 font-weight-black">3.500</span> <span class="subtitle-2 font-weight-light">org</span></p>
+                                </v-flex>
+                                <v-flex class="text-xs-right" sm6 and-down>
+                                    <p class="mb-0 caption mono" style="color:#616161">PENJUALAN</p>
+                                    <p class="mb-1 text--primary"><span class="display-1 font-weight-black">1.500</span> <span class="subtitle-2 font-weight-light">jt</span></p>
+                                </v-flex>
+                            </v-layout>
+                            <v-divider style="border-color:#0D7F8B"></v-divider>
+                            <v-layout mt-2 align-center row>
+                                <v-flex sm6 d-flex>
+                                    <p class="mb-0">bandung raya</p>
+                                </v-flex>
+                                <v-flex sm6 class="text-xs-right" d-flex>
+                                    <p class="mb-0">april 2020</p>
+                                </v-flex>
+                            </v-layout>
+                        </v-card-text>
+                    </v-card>
+                </v-flex>
+            </v-layout>
+            <v-layout row>
+                <v-flex sm12 and-down>
+                    <v-card color="#C8DFC3">
+                        <v-card-title class="pa-1" style="background:#3F848F" >
+
+                        </v-card-title>
+                        <v-card-text class="pt-1">
+                            <v-layout row>
+                                <v-flex class="text-xs-left" sm12 and-down>
+                                  <div id="chart">
+      <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+    </div>
+                                </v-flex>
+                            </v-layout>
+                            
+                        </v-card-text>
+                    </v-card>
+                </v-flex>
+            </v-layout>
+        </v-flex>
+    </v-layout>
+</template>
+
+<style scoped>
+    .searchbox .v-input.v-text-field .v-input__slot {
+        min-height: 60px;
+    }
+
+    .searchbox .v-btn {
+        min-height: 60px;
+    }
+
+    table.v-table tbody td,
+    table.v-table tbody th {
+        height: 40px;
+    }
+
+    table.v-table thead tr {
+        height: 40px;
+    }
+</style>
+<script>
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
+        )
+    </script>
+
+    
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
+<script>
+
+    module.exports = {
+
+        components: {
+            'apexchart': VueApexCharts,
+            'one-dialog-info': httpVueLoader('../../../common/oneDialogInfo.vue'),
+            'one-dialog-alert': httpVueLoader('../../../common/oneDialogAlert.vue')
+        },
+        mounted() {
+            
+        },
+        methods: {
+            reHTMLAddress(xxaddresses){
+                var rtn = ''
+                if(xxaddresses && xxaddresses !== ''){
+                    var peraddress = xxaddresses.split("+")
+                    peraddress.forEach(function(entry) {
+                        var perpart = entry.split("^")
+                        rtn += "<p class='mb-0 font-weight-black' style='font-size:11px'>"+perpart[0].toUpperCase()+"</p>"
+                        rtn += "<p class='mb-1 caption mono'>"+perpart[1]+"</p>"
+                    })
+                }
+                
+                return rtn
+            }
+        },
+        computed: {
+             in_saving: {
+                get() {
+                    return this.$store.state.sales.in_saving
+                },
+                set(val) {
+                    this.$store.commit("sales/update_in_saving", val)
+                }
+            }
+        },
+           data: {
+          
+          series: [{
+            data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
+          }],
+          chartOptions: {
+            chart: {
+              type: 'bar',
+              height: 350
+            },
+            plotOptions: {
+              bar: {
+                horizontal: true,
+              }
+            },
+            dataLabels: {
+              enabled: false
+            },
+            xaxis: {
+              categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
+                'United States', 'China', 'Germany'
+              ],
+            }
+          },
+          
+          
+        },
+    }
+</script>

one-ui/system/one-replication/index.php

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content 
+               style="max-height: 1000px;background:#fcfcfc!important" >
+                  <v-layout class="align-center pr-2" row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">Replication Status</p>
+                     </v-flex>
+		     <v-flex class="text-xs-right mt-2" xs6>
+			<v-icon @click="reload">autorenew</v-icon>
+		     </v-flex>
+		  </v-layout>
+		  <v-progress-linear v-if="is_loading" :indeterminate="true" :active="is_loading"></v-progress-linear>
+               <v-container fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                  <v-layout row wrap >
+                     <v-flex xs12 fill-height pa-1>
+                     <v-layout row>
+                        <v-flex sm12 and-down>
+                           <v-card tile color="#C8DFC3">
+                                 <v-card-title class="pa-1" style="background:#3F848F" >
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+                                       <v-flex class="text-xs-left" sm6 and-down>
+                                             <p class="mb-0 caption mono" style="color:#616161">Master</p>
+                                       </v-flex>
+                                       <v-flex class="text-xs-right" sm6 and-down>
+                                             <p class="mb-0 caption mono" style="color:#616161">Status</p>
+					     <p class="mb-1 text--primary">
+						<span class="font-weight-black">{{master.status}}</span> 
+					     </p>
+                                       </v-flex>
+                                    </v-layout>
+                                    <v-divider style="border-color:#0D7F8B"></v-divider>
+                                    <v-layout mt-2 align-center row>
+                                       <v-flex sm6 d-flex>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                     <v-layout class="pb-3" row>
+                        <v-flex sm12 and-down>
+                           <v-card v-for="slave in slaves" tile color="#F0EACF" style="margin-bottom:10px; margin-top:5px;">
+				 <v-card-title class="pa-1 white--text" style="background:#3F848F" >
+					&nbsp;{{slave.name}}
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+				       <v-flex class="text-xs-left pr-2" sm6 and-down>
+					Status 
+                                       </v-flex>
+				       <v-flex class="text-xs-left" sm6 and-down>
+					{{slave.status}}
+                                       </v-flex>
+                                    </v-layout>
+                                    <v-layout v-if="slave.status=='Running'" row>
+				       <v-flex class="text-xs-left pr-2" sm6 and-down>
+					Behind
+                                       </v-flex>
+				       <v-flex class="text-xs-left" sm6 and-down>
+					{{slave.Behind}}
+                                       </v-flex>
+                                    </v-layout>
+                                    <v-layout v-if="slave.status=='Running'"  row>
+				       <v-flex class="text-xs-left pr-2" sm6 and-down>
+					Tables	
+                                       </v-flex>
+				       <v-flex class="text-xs-left" sm6 and-down>
+					 <br/>
+					 <span style="block" v-for="(tb,idx) in slave.Table">
+						<span v-if="idx > 0">,</span>&nbsp;{{tb}}
+					  </span>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                        
+                     </v-flex>
+                  </v-layout>
+               </v-container>
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script> </script>
+
+    
+
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+window.store = store;
+
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   	reload: function(event){
+   	 this.$store.dispatch('replication/load')
+	}
+   },
+   mounted() {
+   	let self = this
+	self.$store.dispatch('replication/load')
+   }, 
+   computed: {
+   is_loading() {
+      return this.$store.state.replication.loading
+   },
+   master() {
+   let master = this.$store.state.replication.master;
+   return master
+      },
+      slaves() {
+      let slaves = this.$store.state.replication.slave
+	      return slaves
+	}
+   },
+    })
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }
+   .v-toolbar__content, .v-toolbar__extension {
+    align-items: center;
+    display: flex;
+    padding: 0 ;
+}
+    </style>
+   </body>
+
+</html>

one-ui/system/one-replication/modules/replication.js

@@ -0,0 +1,55 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/replication.js"
+
+export default {
+    namespaced: true,
+    state: {
+	    error: "",
+	    loading: false,
+	    master: {},
+	    slave: []
+    },
+    mutations: {
+	update_loading(state,val) {
+	    state.loading = val
+	},
+        update_master(state, val) {
+            state.master = val
+        },
+        update_slave(state, val) {
+            state.slave= val
+        },
+	update_error(state, val) {
+	    state.error = val
+	}
+    },
+    actions: {
+        async load(context) {
+            context.commit("update_loading", true)
+            context.commit("update_error", "")
+            try {
+		    context.commit("update_slave",[])
+                let resp = await api.load()
+                if (resp.status != "OK") {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", resp.message)
+                } else {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", "")
+		    for(let idx=0;idx < resp.slave.length; idx++) {
+			    for(let j=0;j<resp.slave[idx].Table.length; j++) {
+				    resp.slave[idx].Table[j] = resp.slave[idx].Table[j].replace('one.','')
+			    }
+		    }
+                    context.commit("update_master", resp.master)
+                    context.commit("update_slave", resp.slave)
+                }
+            } catch (e) {
+                context.commit("update_loading", false)
+                context.commit("update_error", e.message )
+            }
+        },
+    }
+}

one-ui/system/one-replication/store.js

@@ -0,0 +1,20 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import replication from "./modules/replication.js"
+import system from "../../apps/modules/system/system.js" 
+export const store = new Vuex.Store({
+    modules: {
+        replication: replication,
+        system: system
+    },
+    state: {
+    },
+    mutations: {
+    },
+    actions: {
+    }
+});