first commit + add fe component vue accone

apps/components/MoneyInput.vue

@@ -0,0 +1,49 @@
+<!-- MoneyInput.vue -->
+<template>
+    <v-text-field
+      :value="formattedValue"
+      @input="handleInput"
+      @blur="handleBlur"
+      v-bind="$attrs"
+      v-on="$listeners"
+    ></v-text-field>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      formattedValue() {
+        if (!this.value) return '';
+        
+        const parts = this.value.toString().split('.');
+        const integerPart = parts[0];
+        const decimalPart = parts.length > 1 ? parts[1] : '';
+        
+        const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+        
+        return decimalPart ? `${formattedInteger},${decimalPart}` : formattedInteger;
+      }
+    },
+    methods: {
+      handleInput(value) {
+        if (!value) {
+          this.$emit('input', '');
+          return;
+        }
+        
+        let processedValue = value.replace(/\./g, '').replace(',', '.');
+        this.$emit('input', processedValue);
+      },
+      
+      handleBlur() {
+        // Format ulang jika perlu
+      }
+    }
+  }
+  </script>

apps/components/oneAutoVerifValid.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="auto-verif-valid">
+    <img :src="verifImg"  class="icon"  :style="styleVerif" @click="showVerif()" />
+    <img :src="validImg" class="icon" :style="styleValid" @click="showValid()" />
+  </div>
+</template>
+<script>
+module.exports = {
+  components : {
+  },
+  data () {
+    return {
+      dialog_autovrvf:false,
+      title:'',
+      isLoading: false
+    }
+  },
+  methods : {
+    showValid() {
+      this.$store.dispatch("autoVerifValid/showValid",{title: "Informasi AutoValid", detailID: this.detailId}); 
+    },
+    showVerif() {
+      this.$store.dispatch("autoVerifValid/showVerif",{title: "Informasi AutoVerif", detailID: this.detailId}); 
+    }
+  },
+  computed: {
+    styleVerif() {
+      let av = this.$store.state.autoVerifValid.autoVerif;
+      let detId = this.detailId;
+      let idx = _.findIndex(av,function(v) { 
+        let xid = parseInt(v.id);
+        return xid == detId;
+      });
+      if (idx > -1) {
+        return {
+          cursor: 'pointer'
+        };
+      }
+      return {};
+    },
+    styleValid() {
+      let av = this.$store.state.autoVerifValid.autoValid;
+      let detId = this.detailId;
+      let idx = _.findIndex(av,function(v) { 
+        let xid = parseInt(v.id);
+        return xid == detId;
+      });
+      if (idx > -1) {
+        return {
+          cursor: 'pointer'
+        };
+      }
+      return {};
+    },
+    verifImg() {
+      let av = this.$store.state.autoVerifValid.autoVerif;
+      let detId = this.detailId;
+      let idx = _.findIndex(av,function(v) { 
+        let xid = parseInt(v.id);
+        return xid == detId;
+      });
+      if (idx > -1) {
+        if (av[idx].status) {
+          return "/one-ui/apps/image/vr-green.png";
+        } else {
+          return "/one-ui/apps/image/vr-red.png";
+        }
+      } else {
+        return "/one-ui/apps/image/vr-grey.png";
+      }
+    },
+    validImg() {
+      let av = this.$store.state.autoVerifValid.autoValid;
+      let detId = this.detailId;
+      let idx = _.findIndex(av,function(v) { 
+        let xid = parseInt(v.id);
+        return xid == detId;
+      });
+      if (idx > -1) {
+        if (av[idx].status) {
+          return "/one-ui/apps/image/vl-green.png";
+        } else {
+          return "/one-ui/apps/image/vl-red.png";
+        }
+      } else {
+        return "/one-ui/apps/image/vl-grey.png";
+      }
+    },
+  },
+  props:["headerId","detailId"],
+}
+</script>
+<style scoped>
+  div.auto-verif-valid  {
+    padding: 0px 5px;
+    padding-top: 4px;
+    border-radius: 5px;
+    border: solid 1px #383838;
+    max-width: 70px;
+  }
+  div.auto-verif-valid  img.icon {
+    width:22px;
+    height:22px;
+    margin-right:5px;
+  }
+</style>

apps/components/oneChangePassword.vue

@@ -0,0 +1,95 @@
+<template>
+      <v-dialog v-model="showdialog" persistent  max-width="400">
+        <v-card>
+            <v-card-title style="color:#fff" class="headline grey darken-1">Ganti Password</v-card-title>
+            <v-card-text>
+               <v-layout pa-2 class="grey lighten-2" row>
+               <v-flex xs12>
+                   <v-text-field :append-icon="show_saat_ini ? 'mdi-eye' : 'mdi-eye-off'"
+                     :type="show_saat_ini ? 'text' : 'password'"
+                     label="Password saat ini :"
+                     v-model="current_password"
+                     class="input-group--focused"
+                     @click:append="show_saat_ini = !show_saat_ini"
+                     ></v-text-field>
+
+                   <v-text-field :append-icon="show_new ? 'mdi-eye' : 'mdi-eye-off'"
+                     :type="show_new ? 'text' : 'password'"
+                     label="Password baru :"
+                     v-model="new_password"
+                     class="input-group--focused"
+                     @click:append="show_new= !show_new"
+                     ></v-text-field>
+                   <v-text-field :append-icon="show_re_new ? 'mdi-eye' : 'mdi-eye-off'"
+                     :type="show_re_new ? 'text' : 'password'"
+                     label="Konfirmasi Password baru :"
+                     v-model="re_new_password"
+                     class="input-group--focused"
+                     @click:append="show_re_new= !show_re_new"
+                     ></v-text-field>
+                  <v-alert v-show="message != ''" :type="type">
+                     {{message}}
+                  </v-alert>
+               </v-flex>
+               </v-layout>
+
+            </v-card-text>
+            <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="grey darken-1" flat @click="showdialog = false">Tutup</v-btn>
+            <v-btn dark color="grey darken-1"  @click="update_password()">Ganti Password</v-btn>
+            
+            </v-card-actions>
+        </v-card>
+      </v-dialog>
+</template>
+<style scoped>
+</style>
+<script>
+
+module.exports = {
+   data() {
+      return {
+         current_password : ''
+         ,new_password : ''
+         ,re_new_password : ''
+         ,show_saat_ini : false
+         ,show_new: false
+         ,show_re_new: false
+         ,type : 'error'
+      }
+   }
+   ,methods : {
+      async update_password() {
+         if (this.current_password == this.new_password) {
+            this.message = "Password lama dan Password baru masih sama."      
+            return
+         }
+         if (this.re_new_password != this.new_password) {
+            this.message = "Password dan Konfirmasi Password tidak sama."      
+            return
+         }
+         let prm = { token: window.one_token(), old : this.current_password ,new : this.new_password } 
+         await this.$store.dispatch("system/change_password",prm)
+         if (this.message == "" ) {
+            this.type = "success"
+            this.message = "Password berhasil diubah, silahkan login lagi."
+            let self = this
+            setTimeout(function() {
+               window.one_logout('/one-ui/test/vuex/one-login')
+            },1000)
+         }
+      }
+   }
+   ,computed: {
+      message : {
+         get(){ return this.$store.state.system.change_password_error }
+         ,set(v) { this.$store.commit("system/update_change_password_error",v) }
+      }
+      ,showdialog : {
+         get(){ return this.$store.state.system.change_password_dialog }
+         ,set(v) { this.$store.commit("system/update_change_password_dialog",v) }
+      }
+   }
+}
+</script>

apps/components/oneDialogNotification.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-layout>
+    <v-dialog
+      v-model="dialogNotification"
+      max-width="50vw"
+    >
+
+    <v-card>
+        <v-toolbar color="pink" dark>
+        <v-toolbar-title>Task List Notification</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-icon>notifications</v-icon>
+        </v-toolbar>
+        <v-list two-line>
+        <template v-for="(item, index) in notification_list">
+            <v-list-tile :key="index" avatar ripple @click="updateNotification(item)">
+            <v-list-tile-content>
+                <v-list-tile-title>{{ item.NotificationType }}</v-list-tile-title>
+                <!-- <v-list-tile-sub-title class="text--primary">{{ item.headline }}</v-list-tile-sub-title> -->
+                <v-list-tile-sub-title v-html="item.NotificationDescription"
+                  :style="{
+                        whiteSpace: 'normal',
+                        wordBreak: 'break-word',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden'
+                    }"></v-list-tile-sub-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+                <v-list-tile-action-text>{{ item.time_ago }}</v-list-tile-action-text>
+                <!-- <v-icon color="grey lighten-1">star_border</v-icon> -->
+            </v-list-tile-action>
+            </v-list-tile>
+            <v-divider v-if="index + 1 < notification_list.length" :key="`divider-${index}`"></v-divider>
+        </template>
+        </v-list>
+    </v-card>
+
+    </v-dialog>
+  </v-layout>
+</template>
+
+<style scoped>
+.wrap-text {
+  white-space: normal !important;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* jumlah baris maksimum */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bread-crumb {
+  margin-left: 20px;
+  font-weight: normal !important;
+}
+.v-badge__badge {
+  top: 0px;
+  right: 0px;
+}
+#topbar{
+  background-color: #F2E5D3;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+
+  },
+
+  data: function () {
+    return {
+
+    };
+  },
+  mounted() {
+    this.$store.dispatch("system/getlistnotif")
+  },
+  computed: {
+    notification_list() {
+      return this.$store.state.system.notification_list;
+    },
+    dialogNotification: {
+        get() {
+            return this.$store.state.system.dialogNotification
+        },
+        set(val) {
+            this.$store.commit("system/update_dialogNotification",val)
+        }
+    },
+  },
+  methods: {
+    updateNotification(item) {
+        let prm = {
+            notif_id: item.NotificationID,
+            url: item.NotificationUrl,
+            type: item.NotificationType,
+            approve_level_id: item.NotificationDetailM_ApproveLevelID
+        }
+        this.$store.dispatch("system/readnotif", prm);
+    }
+  },
+  watch: {
+
+  },
+};
+</script>

apps/components/oneFooter.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-footer style="color: white!important" color="grey darken-3 " app>
+    <one-clock></one-clock>
+    <v-spacer></v-spacer>
+    <span  class="one-footer"
+      ><p class="mb-0" style="color: white!important"
+        >Auto logged out in <span id="SecondsUntilExpire"></span> seconds</p
+      ></span
+    >
+  </v-footer>
+</template>
+
+<style>
+span.one-footer {
+  margin-right: 30px;
+}
+</style>
+<script>
+module.exports = {
+  mounted() {
+    var IDLE_TIMEOUT = 5 * 60; //seconds
+    if (localStorage.getItem("user")) {
+      var retrievedObject = localStorage.getItem("user");
+      var dtuser = JSON.parse(retrievedObject);
+      if (dtuser.time_autologout && parseInt(dtuser.time_autologout) > 0)
+        IDLE_TIMEOUT = parseInt(dtuser.time_autologout) * 60;
+    }
+    var _idleSecondsTimer = null;
+    if (localStorage.getItem("autologout") === null) {
+      localStorage.setItem("autologout", 0);
+    }
+
+    document.onclick = function () {
+      localStorage.setItem("autologout", 0);
+    };
+
+    document.onmousemove = function () {
+      localStorage.setItem("autologout", 0);
+    };
+
+    document.onkeypress = function () {
+      localStorage.setItem("autologout", 0);
+    };
+
+    _idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);
+
+    function CheckIdleTime() {
+      let xcounter = parseInt(localStorage.getItem("autologout"));
+      xcounter++;
+      localStorage.setItem("autologout", xcounter);
+      //this.show_autologout = false
+
+      var oPanel = document.getElementById("SecondsUntilExpire");
+      if (oPanel)
+        oPanel.innerHTML =
+          IDLE_TIMEOUT - parseInt(localStorage.getItem("autologout")) + "";
+      if (parseInt(localStorage.getItem("autologout")) >= IDLE_TIMEOUT) {
+        window.clearInterval(_idleSecondsTimer);
+        localStorage.removeItem("autologout");
+        window.one_logout("/one-ui/test/vuex/one-login");
+      }
+    }
+  },
+  components: {
+    "one-clock": httpVueLoader("./oneTanggal.vue"),
+  },
+};
+function one_verif() {
+  let url_redir = "/one-ui/";
+  let verif = async function (token) {
+    try {
+      var resp = await axios.post("/one-api/v1/system/verify/do", {
+        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,
+      };
+    }
+  };
+
+  let x = async () => {
+    let url_redir = "/one-ui/";
+    try {
+      let resp = await verif(window.one_token());
+      console.log("Response", resp);
+      return;
+
+      if (resp.status != "OK") {
+        window.localStorage.removeItem("token");
+        window.localStorage.removeItem("user");
+        location.replace(url_redir);
+      }
+    } catch (e) {}
+  };
+  x();
+}
+
+//one_verif();
+</script>

apps/components/oneFooter.vue-170123

@@ -0,0 +1,100 @@
+<template>
+   <v-footer color="blue lighten-2" app>
+       <one-clock></one-clock>
+       <v-spacer></v-spacer>
+       <span class="one-footer white--text"><code class="mb-0">Auto logged out in <span id="SecondsUntilExpire"></span> seconds</code></span>
+
+    </v-footer>
+</template>
+
+<style>
+  span.one-footer {
+     margin-right:30px;
+  }
+</style>
+<script>
+module.exports = {
+  mounted() {
+    var IDLE_TIMEOUT = 5*60; //seconds
+    if(localStorage.getItem("user")){
+            var retrievedObject = localStorage.getItem('user')
+            var dtuser = JSON.parse(retrievedObject)
+            if(dtuser.time_autologout && parseInt(dtuser.time_autologout) > 0)
+            IDLE_TIMEOUT = parseInt(dtuser.time_autologout) * 60
+          }
+var _idleSecondsTimer = null;
+var _idleSecondsCounter = 0;
+
+document.onclick = function() {
+    _idleSecondsCounter = 0;
+};
+
+document.onmousemove = function() {
+    _idleSecondsCounter = 0;
+};
+
+document.onkeypress = function() {
+    _idleSecondsCounter = 0;
+};
+
+_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);
+
+function CheckIdleTime() {
+     _idleSecondsCounter++;
+     //this.show_autologout = false
+
+     var oPanel = document.getElementById("SecondsUntilExpire");
+     if (oPanel)
+         oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
+    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
+        window.clearInterval(_idleSecondsTimer);
+        window.one_logout('/one-ui/test/vuex/one-login')
+    }
+}
+   },
+   components: {
+    'one-clock' : httpVueLoader('./oneTanggal.vue')
+  }
+}
+function one_verif() {
+  let url_redir = "/one-ui/";
+  let verif = async function (token) {
+    try {
+      var resp = await axios.post("/one-api/v1/system/verify/do", {
+        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,
+      };
+    }
+  };
+
+  let x = async () => {
+    let url_redir = "/one-ui/";
+    try {
+      let resp = await verif(window.one_token());
+      console.log('Response',resp);
+      return;
+
+      if (resp.status != "OK") {
+        window.localStorage.removeItem("token");
+        window.localStorage.removeItem("user");
+        location.replace(url_redir);
+      }
+    } catch (e) {}
+  };
+  x();
+}
+
+//one_verif();
+</script>

apps/components/oneFooterlogin.vue

@@ -0,0 +1,35 @@
+<template>
+<v-footer color="blue lighten-2" app>
+
+       <span class="one-footer white--text" >
+       SURABAYA -
+       JAKARTA -
+       BANDUNG -
+       CIMAHI -
+       CIREBON -
+       MEDAN -
+       PADANG -
+       PALEMBANG -
+       SEMARANG -
+       YOGYAKARTA -
+       MADIUN -
+       BALIKPAPAN -
+       PEKANBARU -
+       MAGELANG -
+       MAKASSAR -
+       TEGAL -
+       SALATIGA -
+       MANADO</span>
+    </v-footer>
+</template>
+
+<style>
+  span.one-footer {
+  text-align: center;
+   font-size: 12px;
+  }
+</style>
+<script>
+module.exports = {
+}
+</script>

apps/components/oneFpp.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+  <v-btn
+    color="primary"
+    :disabled="is_disabled"
+    @click="viewfpp= true"
+  >
+ {{button_title}}
+  </v-btn>
+
+  <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="viewfpp" :urlprint="urlfpp" @close-dialog-print="viewfpp = false">
+  </one-dialog-print>
+  </div>
+</template>
+
+<script>
+
+async function checkFpp(param, id) {
+  try {
+      var resp = await axios.get("/one-api/file_upload/get_fpp/" + id);
+      if (resp.status != 200) {
+        param.button_title = "Error Checking Fpp : " + resp.statusText;
+        return;
+      }
+      let data = resp.data;
+      if (data.rows.length > 0) {
+        param.button_title = "Lihat FPP";
+        param.is_disabled = false;
+        param.urlfpp = data.rows[0].fppUrl;
+        return;
+      }
+      param.button_title = "FPP belum di upload";
+  } catch(e) {
+      param.button_title = "Error Checking Fpp : " + e.message;
+  }
+}
+
+module.exports = {
+  components : {
+    'one-dialog-print':httpVueLoader('../../common/oneDialogPrintX.vue')
+  },
+  props: ["id"],
+  data () {
+    return {
+      urlfpp:'',
+      printtitle:'View FPP',
+      printwidth:'60%',
+      isLoading:false,
+      viewfpp: false,
+      button_title: "Checking FPP",
+      is_disabled:true
+    }
+  },
+  mounted() {
+     console.log('Mounted',this.id);
+    let self = this;
+    let n = parseInt(this.id.orderHeaderID.toString());
+    if (n == 0) return;
+    self.urlfpp = '';
+    self.is_disabled = true;
+    self.button_title = "Checking FPP"
+    checkFpp(self,n);
+  },
+  watch: {
+    async id(n,o) {
+      console.log('Watch FPP ID', n );
+      let self = this;
+      if (n == 0) return;
+      self.urlfpp = '';
+      self.is_disabled = true;
+      self.button_title = "Checking FPP"
+      checkFpp(self,n.orderHeaderID);
+    }
+  }
+}
+</script>

apps/components/oneMenuDrawer-bkp.vue

@@ -0,0 +1,212 @@
+<template>
+  <v-navigation-drawer v-model="drawer" fixed app>
+    <v-list>
+      <!-- IF NO CHILD -->
+      <template
+        v-for="(lev_0, i) in level_0"
+      >
+        <v-list-tile
+          :key="i"
+          v-show="!level_1['p_'+lev_0.id] && lev_0.is_parent=='N'"
+          @click="goTo(lev_0.url)">
+          <v-list-tile-action>
+            <v-icon>home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+        </v-list-tile>
+
+      </template>
+      
+
+      <!-- HAVING CHILDREN -->
+      <template
+        v-for="(lev_0, i) in level_0"
+      >
+        <v-list-group
+          v-bind:key="i"
+          prepend-icon="account_circle"
+          :value="lev_0.state"
+          v-show="level_1['p_'+lev_0.id]"
+        >
+          <template v-slot:activator>
+            <v-list-tile>
+              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+          <!-- LEVEL 1 STARTS HERE -->
+          <!-- NOT HAVING CHILD -->
+          <template
+            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
+          >
+              <v-list-tile
+                v-bind:key="j"
+                v-show="!level_2['p_'+lev_1.id] && lev_1.is_parent=='N'"
+                sub-group
+                no-action
+                @click="goTo(lev_1.url)"
+                >
+                <v-list-tile-action>
+                  <!-- <v-icon>home</v-icon> -->
+                </v-list-tile-action>
+                <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+              </v-list-tile>
+          </template>
+
+          <!-- HAVING CHILD -->
+          <template
+            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
+          >
+            
+              <v-list-group
+                v-bind:key="j"
+                :value="lev_1.state"
+                v-show="level_2['p_'+lev_1.id]"
+                sub-group
+                no-action
+              >
+                <template v-slot:activator>
+                  <v-list-tile>
+                    <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+                  </v-list-tile>
+                </template>
+
+                <!-- LEVEL 2 STARTS HERE -->
+                <template
+                  v-for="(lev_2, k) in level_2['p_'+lev_1.id]"
+                >
+                  <v-list-tile
+                    :key="k"
+                    @click="goTo(lev_2.url)">
+                    <!-- <v-list-tile-action>
+                      <v-icon>home</v-icon>
+                    </v-list-tile-action> -->
+                    <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
+                  </v-list-tile>
+
+                </template>
+                <!-- END OF LEVEL 2 -->
+
+              </v-list-group>
+          </template>
+          <!-- END OF LEVEL 1 -->
+
+        </v-list-group>
+      </template>
+    </v-list>
+
+    <!-- <v-list>
+      <v-list-tile>
+        <v-list-tile-action>
+          <v-icon>home</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-title>Home</v-list-tile-title>
+      </v-list-tile>
+
+      <v-list-group
+        prepend-icon="account_circle"
+        value="true"
+      >
+        <template v-slot:activator>
+          <v-list-tile>
+            <v-list-tile-title>Users</v-list-tile-title>
+          </v-list-tile>
+        </template>
+        <v-list-group
+          no-action
+          sub-group
+          value="true"
+        >
+          <template v-slot:activator>
+            <v-list-tile>
+              <v-list-tile-title>Admin</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+          <v-list-tile
+            v-for="(admin, i) in admins"
+            :key="i"
+            @click=""
+          >
+            <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
+            <v-list-tile-action>
+              <v-icon v-text="admin[1]"></v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+        </v-list-group>
+
+        <v-list-group
+          sub-group
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-tile>
+              <v-list-tile-title>Actions</v-list-tile-title>
+            </v-list-tile>
+          </template>
+          <v-list-tile
+            v-for="(crud, i) in cruds"
+            :key="i"
+            @click=""
+          >
+            <v-list-tile-title v-text="crud[0]"></v-list-tile-title>
+            <v-list-tile-action>
+              <v-icon v-text="crud[1]"></v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+        </v-list-group>
+      </v-list-group>
+    </v-list> -->
+    <!-- <v-list dense>
+      <v-list-tile>
+        <v-list-tile-action>
+          <v-icon>home</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>Home</v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+      <v-list-tile>
+        <v-list-tile-action>
+          <v-icon>contact_mail</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>Contact</v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </v-list> -->
+  </v-navigation-drawer>
+</template>
+
+
+<script>
+module.exports = {
+  props: {
+    drawer: Boolean
+  },
+
+  computed : {
+    level_0 () {
+      return this.$store.state.system.menu_level_0
+    },
+
+    level_1 () {
+      return this.$store.state.system.menu_level_1
+    },
+
+    level_2 () {
+      return this.$store.state.system.menu_level_2
+    }
+  },
+
+  mounted () {
+    this.$store.dispatch('system/get_menu')
+  },
+
+  methods : {
+    goTo (url) {
+      window.location = BASE_URL + '/one-ui/' + url
+    }
+  }
+}
+</script>

apps/components/oneMenuDrawer.vue

@@ -0,0 +1,144 @@
+<template>
+  <v-navigation-drawer temporary style="background-color:#F2E5D3" v-model="xdrawer" fixed app>
+    <v-list>
+      <!-- LEVEL 0 -->
+      <template v-for="(lev_0, i) in level_0">
+        <v-list-tile
+          class="tile"
+          :key="lev_0.id + 10000"
+          v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent == 'N'"
+          @click="goTo(lev_0.url)"
+        >
+          <v-list-tile-action>
+            <v-icon>{{ lev_0.icon }}</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+        </v-list-tile>
+
+        <v-list-group
+          :key="lev_0.id"
+          :prepend-icon="lev_0.icon"
+          :value="lev_0.state"
+          v-if="level_1['p_' + lev_0.id]"
+        >
+          <template v-slot:activator>
+            <v-list-tile class="tile">
+              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+          <!-- LEVEL 1 -->
+          <template v-for="(lev_1, j) in level_1['p_' + lev_0.id]">
+            <v-list-tile
+              class="tile"
+              :key="lev_1.id + 10000"
+              v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent == 'N'"
+              sub-group
+              no-action
+              @click="goTo(lev_1.url)"
+            >
+              <v-list-tile-action>
+                <!-- <v-icon>home</v-icon> -->
+              </v-list-tile-action>
+              <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+            </v-list-tile>
+
+            <v-list-group
+              :key="lev_1.id"
+              :value="lev_1.state"
+              v-show="level_2['p_' + lev_1.id]"
+              sub-group
+              no-action
+            >
+              <template v-slot:activator>
+                <v-list-tile>
+                  <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+                </v-list-tile>
+              </template>
+
+              <!-- LEVEL 2 -->
+              <template v-for="(lev_2, k) in level_2['p_' + lev_1.id]">
+                <v-list-tile class="tile" :key="lev_2.id" @click="goTo(lev_2.url)">
+                  <!-- <v-list-tile-action>
+                            <v-icon>home</v-icon>
+                            </v-list-tile-action> -->
+                  <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
+                </v-list-tile>
+              </template>
+            </v-list-group>
+          </template>
+        </v-list-group>
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.tile {
+  margin: 5px;
+  border-radius: 4px;
+}
+.tile:hover {
+  background-color: #829672;
+  color:white;
+}
+.tile:active {
+  background: #829672;
+  color:white;
+}
+.v-list__group__header__prepend-icon .v-icon {
+  color: rgb(117, 61, 28);
+}
+.v-list__tile__title:hover {
+  color: white;
+}
+
+.v-navigation-drawer {
+  z-index: 1003;
+}
+</style>
+
+<style>
+.v-overlay--active {
+  z-index: 1002;
+}
+</style>
+<script>
+module.exports = {
+  props: {
+    drawer: Boolean,
+  },
+
+  computed: {
+    xdrawer: {
+      get() {
+        return this.drawer;
+      },
+      set(v) {
+        this.$emit("togleDrawer");
+      },
+    },
+    level_0() {
+      return this.$store.state.system.menu_level_0;
+    },
+
+    level_1() {
+      return this.$store.state.system.menu_level_1;
+    },
+
+    level_2() {
+      return this.$store.state.system.menu_level_2;
+    },
+  },
+
+  mounted() {
+    this.$store.dispatch("system/get_menu");
+  },
+
+  methods: {
+    goTo(url) {
+      window.location = BASE_URL + "/one-ui/" + url;
+    },
+  },
+};
+</script>

apps/components/oneMenuDrawer2.vue

@@ -0,0 +1,134 @@
+<template>
+  <v-navigation-drawer  temporary class="blue lighten-2" v-model="drawer" dark  fixed app>
+    <v-list>
+
+    <!-- LEVEL 0 -->
+      <template
+        v-for="(lev_0, i) in level_0"
+      >
+        <v-list-tile class="tile"
+          :key="i"
+          v-if="!level_1['p_'+lev_0.id] && lev_0.is_parent=='N'"
+          @click="goTo(lev_0.url)">
+          <v-list-tile-action>
+            <v-icon>home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+        </v-list-tile>
+
+        <v-list-group
+          v-bind:key="i"
+          :prepend-icon="lev_0.icon"
+          :value="lev_0.state"
+          v-if="level_1['p_'+lev_0.id]"
+        >
+          <template v-slot:activator>
+            <v-list-tile class="tile">
+              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+            <!-- LEVEL 1 -->
+            <template
+                v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
+            >
+                <v-list-tile class="tile"
+                    v-bind:key="j"
+                    v-if="!level_2['p_'+lev_1.id] && lev_1.is_parent=='N'"
+                    sub-group
+                    no-action
+                    @click="goTo(lev_1.url)"
+                    >
+                    <v-list-tile-action>
+                    <!-- <v-icon>home</v-icon> -->
+                    </v-list-tile-action>
+                    <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+                </v-list-tile>
+
+                <v-list-group
+                    v-bind:key="j"
+                    :value="lev_1.state"
+                    v-show="level_2['p_'+lev_1.id]"
+                    sub-group
+                    no-action
+                >
+                    <template v-slot:activator>
+                        <v-list-tile>
+                            <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+                        </v-list-tile>
+                    </template>
+
+                    <!-- LEVEL 2 -->
+                    <template
+                        v-for="(lev_2, k) in level_2['p_'+lev_1.id]"
+                        >
+                        <v-list-tile class="tile"
+                            :key="k"
+                            @click="goTo(lev_2.url)">
+                            <!-- <v-list-tile-action>
+                            <v-icon>home</v-icon>
+                            </v-list-tile-action> -->
+                            <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
+                        </v-list-tile>
+
+                    </template>
+                </v-list-group>
+
+            </template>
+
+        </v-list-group>
+
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+   .tile {
+    margin: 5px;
+    border-radius: 4px;
+  }
+  .tile:hover {
+    background-color: #1E88E5;
+  }
+  .tile:active {
+    background: #bec5b7;
+  }
+  .v-list__group__header__prepend-icon .v-icon {
+    color: white;
+}
+.v-list__tile__title:hover {
+    color: #BBDEFB;
+}
+</style>
+<script>
+module.exports = {
+  props: {
+    drawer: Boolean
+  },
+
+  computed : {
+    level_0 () {
+      return this.$store.state.system.menu_level_0
+    },
+
+    level_1 () {
+      return this.$store.state.system.menu_level_1
+    },
+
+    level_2 () {
+      return this.$store.state.system.menu_level_2
+    }
+  },
+
+  mounted () {
+    this.$store.dispatch('system/get_menu')
+  },
+
+  methods : {
+    goTo (url) {
+      window.location = BASE_URL + '/one-ui/' + url
+    }
+  }
+}
+</script>

apps/components/oneMenuDrawerGlobal.vue

@@ -0,0 +1,229 @@
+<template>
+  <v-navigation-drawer  temporary class="blue lighten-2" v-model="drawer" dark  fixed app>
+    <v-list>
+      <!-- IF NO CHILD -->
+      <template
+        v-for="(lev_0, i) in level_0"
+      >
+        <v-list-tile  class="tile"
+          :key="i"
+          v-show="!level_1['p_'+lev_0.id]"
+          @click="goTo(lev_0.url)">
+          <v-list-tile-action>
+            <v-icon>home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title >{{ lev_0.name }}</v-list-tile-title>
+        </v-list-tile>
+
+      </template>
+
+
+      <!-- HAVING CHILDREN -->
+      <template
+        v-for="(lev_0, i) in level_0"
+      >
+        <v-list-group
+          v-bind:key="i"
+          prepend-icon="account_circle"
+          :value="lev_0.state"
+          v-show="level_1['p_'+lev_0.id]"
+        >
+          <template v-slot:activator>
+            <v-list-tile  class="tile">
+              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+          <!-- LEVEL 1 STARTS HERE -->
+          <!-- NOT HAVING CHILD -->
+          <template
+            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
+          >
+              <v-list-tile  class="tile"
+                v-bind:key="j"
+                v-show="!level_2['p_'+lev_1.id]"
+                sub-group
+                no-action
+                @click="goTo(lev_1.url)"
+                >
+                <v-list-tile-action>
+                  <!-- <v-icon>home</v-icon> -->
+                </v-list-tile-action>
+                <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+              </v-list-tile>
+          </template>
+
+          <!-- HAVING CHILD -->
+          <template
+            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
+          >
+
+              <v-list-group
+                v-bind:key="j"
+                :value="lev_1.state"
+                v-show="level_2['p_'+lev_1.id]"
+                sub-group
+                no-action
+              >
+                <template v-slot:activator>
+                  <v-list-tile  class="tile">
+                    <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
+                  </v-list-tile>
+                </template>
+
+                <!-- LEVEL 2 STARTS HERE -->
+                <template
+                  v-for="(lev_2, k) in level_2['p_'+lev_1.id]"
+                >
+                  <v-list-tile  class="tile"
+                    :key="k"
+                    @click="goTo(lev_2.url)">
+                    <!-- <v-list-tile-action>
+                      <v-icon>home</v-icon>
+                    </v-list-tile-action> -->
+                    <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
+                  </v-list-tile>
+
+                </template>
+                <!-- END OF LEVEL 2 -->
+
+              </v-list-group>
+          </template>
+          <!-- END OF LEVEL 1 -->
+
+        </v-list-group>
+      </template>
+    </v-list>
+
+    <!-- <v-list>
+      <v-list-tile  class="tile">
+        <v-list-tile-action>
+          <v-icon>home</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-title>Home</v-list-tile-title>
+      </v-list-tile>
+
+      <v-list-group
+        prepend-icon="account_circle"
+        value="true"
+      >
+        <template v-slot:activator>
+          <v-list-tile  class="tile">
+            <v-list-tile-title>Users</v-list-tile-title>
+          </v-list-tile>
+        </template>
+        <v-list-group
+          no-action
+          sub-group
+          value="true"
+        >
+          <template v-slot:activator>
+            <v-list-tile  class="tile">
+              <v-list-tile-title>Admin</v-list-tile-title>
+            </v-list-tile>
+          </template>
+
+          <v-list-tile
+            v-for="(admin, i) in admins"
+            :key="i"
+            @click=""
+          >
+            <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
+            <v-list-tile-action>
+              <v-icon v-text="admin[1]"></v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+        </v-list-group>
+
+        <v-list-group
+          sub-group
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-tile  class="tile">
+              <v-list-tile-title>Actions</v-list-tile-title>
+            </v-list-tile>
+          </template>
+          <v-list-tile
+            v-for="(crud, i) in cruds"
+            :key="i"
+            @click=""
+          >
+            <v-list-tile-title v-text="crud[0]"></v-list-tile-title>
+            <v-list-tile-action>
+              <v-icon v-text="crud[1]"></v-icon>
+            </v-list-tile-action>
+          </v-list-tile  class="tile">
+        </v-list-group>
+      </v-list-group>
+    </v-list> -->
+    <!-- <v-list dense>
+      <v-list-tile  class="tile">
+        <v-list-tile-action>
+          <v-icon>home</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>Home</v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+      <v-list-tile  class="tile">
+        <v-list-tile-action>
+          <v-icon>contact_mail</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>Contact</v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </v-list> -->
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+  .tile {
+    margin: 5px;
+    border-radius: 4px;
+  }
+  .tile:hover {
+    background-color: #1E88E5;
+  }
+  .tile:active {
+    background: #bec5b7;
+  }
+  .v-list__group__header__prepend-icon .v-icon {
+    color: #3b60f2;
+}
+.v-list__tile__title:hover {
+    color: #BBDEFB;
+}
+</style>
+<script>
+module.exports = {
+  props: {
+    drawer: Boolean
+  },
+
+  computed : {
+    level_0 () {
+      return this.$store.state.menu.menu_level_0
+    },
+
+    level_1 () {
+      return this.$store.state.menu.menu_level_1
+    },
+
+    level_2 () {
+      return this.$store.state.menu.menu_level_2
+    }
+  },
+
+  mounted () {
+    this.$store.dispatch('menu/get_menu')
+  },
+
+  methods : {
+    goTo (url) {
+      window.location = BASE_URL + '/one-ui/' + url
+    }
+  }
+}
+</script>

apps/components/oneMergeReport.vue

@@ -0,0 +1,67 @@
+<tmplate>
+  <v-dialog v-model="dialog_choose" width="350px">
+      <v-layout row>
+          <v-flex xs12>
+              <v-card>
+                  <v-card-text>
+                    Test Card 
+                  </v-card-text>
+                  <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                      color="info"
+                      flat
+                      @click="selectReport()"
+                  >
+                  Pilih
+                  </v-btn>
+              </v-card-actions>
+              </v-card>
+          </v-flex>
+      </v-layout>
+  </v-dialog>
+  <v-btn
+      color="info"
+      flat
+      @click="dialog_choose = true"
+  >
+ Gabung Laporan 
+  </v-btn>
+  <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprint" :urlprint="urlprint" @close-dialog-print="openprint= false">
+  </one-dialog-print>
+</template>
+
+<script>
+module.exports = {
+  components : {
+    'one-dialog-print':httpVueLoader('../../common/oneDialogPrintX.vue'),
+  },
+  data () {
+    return {
+      dialog_choose:false,
+      urlprint:'',
+      printtitle:'Merge Report',
+      printwidth:'60%',
+      isLoading:false,
+      openprint: false,
+      orderHeaderID: 0,
+      selectedReport: [],
+      reports : [ {id:'lab',name:'Hasil Lab'}, {id:'xray',name:'Hasil Rontgent'}, {id:'ecg',name:'Hasil Ecg'} ]
+    }
+  },
+  props:["id"],
+  mounted() {
+    checkReport()//this.$store.dispatch("paymentnew/lookup_type")
+  },
+  methods : {
+    selectReport() {
+      console.log('SelectedReport', selectedReport);
+    }
+  },
+  watch : {
+    async id(n,o) {
+      if (n == 0) return;
+      console.log('Check Report');
+    }
+  } 
+</script>

apps/components/oneNavbarComponent-bkp.vue

@@ -0,0 +1,131 @@
+<template>
+  <span>
+  <one-menu-drawer :drawer="drawer" > </one-menu-drawer>	
+  <one-menu-notification :drawer="drawer_notification" > </one-menu-notification>	
+  <v-toolbar color="blue lighten-2" dark fixed app>
+    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+    <h1>ONE</h1>
+     <v-spacer></v-spacer>
+
+    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>
+    <v-badge color="red">
+      <template v-slot:badge>
+        <span>9</span>
+      </template>
+      <v-btn icon @click="drawer_notification = !drawer_notification" flat>
+        
+        <v-icon
+          medium
+          
+        >
+          notifications
+        </v-icon>
+      </v-btn>
+    </v-badge>
+
+    
+
+     <!-- <v-btn class="ml-4" icon>
+      <v-icon>apps</v-icon>
+    </v-btn> -->
+
+    <!-- PROFILE MENU -->
+    <v-menu
+      v-model="menu"
+      :close-on-content-click="true"
+      :nudge-width="200"
+      offset-overflow
+      left
+      bottom
+    >
+      <template v-slot:activator="{ on }">
+        <v-btn
+          class="ml-4" icon
+          v-on="on"
+        >
+          <v-icon>apps</v-icon>
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-list>
+          <v-list-tile avatar>
+            <v-list-tile-avatar>
+              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
+            </v-list-tile-avatar>
+
+            <v-list-tile-content>
+              <v-list-tile-title>{{ xusername }}</v-list-tile-title>
+              <v-list-tile-sub-title>Founder of Vuetify.js</v-list-tile-sub-title>
+            </v-list-tile-content>
+
+            
+          </v-list-tile>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-tile
+            @click="logout"
+          >
+            <v-list-tile-action>
+              <v-icon>no_meeting_room</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-title>Log Out</v-list-tile-title>
+          </v-list-tile>
+
+          <!-- <v-list-tile>
+            <v-list-tile-action>
+              <v-switch v-model="hints" color="purple"></v-switch>
+            </v-list-tile-action>
+            <v-list-tile-title>Enable hints</v-list-tile-title>
+          </v-list-tile> -->
+        </v-list>
+
+        
+      </v-card>
+    </v-menu>
+    <!-- End of PROFILE MENU -->
+
+  </v-toolbar>
+</template>
+<style scoped>
+.v-badge__badge{
+  top:0px;
+  right:0px;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+    'one-menu-drawer' : httpVueLoader('./oneMenuDrawer.vue'),
+    'one-menu-notification' : httpVueLoader('./oneNotificationDrawer.vue')
+  },
+  data: function() {
+	return {
+    drawer: false,
+    drawer_notification: false	
+    }
+  },
+  computed: {
+      xusername() {
+          var un = ''
+          if(localStorage.getItem("user")){
+            var retrievedObject = localStorage.getItem('user')
+            var dtuser = JSON.parse(retrievedObject)
+            
+            un = dtuser.M_UserUsername
+          }
+          return un
+      }
+  },
+
+  methods : {
+    logout () {
+      window.one_logout('/one-ui/test/vuex/one-login')
+    }
+  }
+}
+</script>
+

apps/components/oneNavbarComponent.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <one-menu-drawer :drawer="drawer"> </one-menu-drawer>
+    <!-- <one-menu-notification :drawer="drawer_notification"> </one-menu-notification> -->
+    <one-dialog-notification></one-dialog-notification>
+    <v-toolbar id="topbar" fixed app>
+      <v-toolbar-side-icon
+        class="hidden-sm-and-down"
+        style="color:#795548"
+        @click.stop="togleDrawer()"
+      ></v-toolbar-side-icon>
+      <v-layout row>
+        <v-flex class="pt-1" xs8>
+          <p class="mb-0">
+            <a
+              href="#"
+              style="
+                padding-bottom: 0px;
+                margin-bottom: 0px;
+                text-decoration: none;
+                color:#795548;
+                font-size: 18px;
+                font-weight: bold;
+              "
+              >ACCONE</a
+            >
+          </p>
+          <p class="mb-0">
+            <span
+              style="text-decoration: none; color: #682913; font-size: 12px"
+              class="ml-0 mt-0 bread-crumb"
+              >{{ bread_crumb }}</span
+            >
+          </p>
+        </v-flex>
+        <v-flex xs4 class="mt-2 text-xs-right align-right">
+          <a
+            href="#"
+            class="mt-3"
+            style="
+              min-height: 10px;
+              text-decoration: none;
+              color: #795548;
+              font-size: 22px;
+              margin-right: 15px;
+            "
+            >{{ xusername }}</a
+          >
+          <v-badge color="red">
+            <template v-if="total > 0" v-slot:badge>
+              <span>{{ total }}</span>
+            </template>
+            <v-btn
+              class="pt-0 pb-2"
+              icon
+              @click="openNotification"
+              flat
+            >
+              <v-icon style="color: #795548;" medium> notifications </v-icon>
+            </v-btn>
+          </v-badge>
+        </v-flex>
+      </v-layout>
+
+      <!-- <v-btn class="ml-4" icon>
+      <v-icon>apps</v-icon>
+    </v-btn> -->
+
+      <!-- PROFILE MENU -->
+      <v-menu
+        :close-on-content-click="true"
+        :nudge-width="200"
+        offset-overflow
+        left
+        bottom
+      >
+        <template v-slot:activator="{ on }">
+          <v-btn class="" icon v-on="on">
+            <v-icon style="color: #795548;">apps</v-icon>
+          </v-btn>
+        </template>
+
+        <v-card>
+          <v-list>
+            <v-list-tile avatar>
+              <v-list-tile-content>
+                <v-list-tile-title>{{ xusername }}</v-list-tile-title>
+                <v-list-tile-sub-title>{{ xstaffname }}</v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-list>
+
+          <v-divider></v-divider>
+
+          <v-list>
+            <v-list-tile @click="change_password">
+              <v-list-tile-action>
+                <v-icon>security</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-title>Change Password</v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+          <v-list>
+            <v-list-tile @click="logout">
+              <v-list-tile-action>
+                <v-icon>no_meeting_room</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-title>Log Out</v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+        </v-card>
+      </v-menu>
+      <!-- End of PROFILE MENU -->
+
+      <one-cp></one-cp>
+    </v-toolbar>
+  </div>
+</template>
+<style scoped>
+.bread-crumb {
+  margin-left: 20px;
+  font-weight: normal !important;
+}
+.v-badge__badge {
+  top: 0px;
+  right: 0px;
+}
+#topbar{
+  background-color: #F2E5D3;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+    "one-menu-drawer": httpVueLoader("./oneMenuDrawer.vue"),
+    "one-cp": httpVueLoader("./oneChangePassword.vue"),
+    "one-menu-notification": httpVueLoader("./oneNotificationDrawer.vue"),
+    "one-dialog-notification": httpVueLoader("./oneDialogNotification.vue"),
+  },
+
+  data: function () {
+    return {
+      drawer: false,
+      drawer_notification: false,
+    };
+  },
+  watch: {
+    is_page_allowed: function (new_ipa, old_ipa) {
+      if (!new_ipa) {
+        var dashboard = this.$store.state.system.dashboard;
+        if (dashboard == "") {
+          //this.logout()
+          console.log("go-to", "logout");
+        } else {
+          //window.location.href = '/' + dashboard
+          console.log("go-to dashboard", dashboard);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.$store.dispatch("system/getlistnotif")
+  },
+  computed: {
+    total() {
+      return this.$store.state.system.total;
+    },
+    is_page_allowed() {
+      return this.$store.state.system.is_page_allowed;
+    },
+    bread_crumb() {
+      return this.$store.state.system.bread_crumb;
+    },
+    xusername() {
+      var un = "";
+      if (localStorage.getItem("user")) {
+        var retrievedObject = localStorage.getItem("user");
+        var dtuser = JSON.parse(retrievedObject);
+
+        un = dtuser.M_UserUsername;
+      }
+      return un;
+    },
+    xstaffname() {
+      var un = "";
+      if (localStorage.getItem("user")) {
+        var retrievedObject = localStorage.getItem("user");
+        var dtuser = JSON.parse(retrievedObject);
+
+        un = dtuser.M_StaffName;
+      }
+      return un;
+    },
+  },
+
+  methods: {
+    openNotification() {
+      this.$store.commit("system/update_dialogNotification", true)
+    },
+    togleDrawer() {
+      this.drawer = !this.drawer;
+    },
+    change_password() {
+      this.$store.commit("system/update_change_password_dialog", true);
+    },
+    logout() {
+      window.one_logout("/one-ui/test/vuex/one-login");
+    },
+  },
+};
+</script>

apps/components/oneNavbarComponentGlobal.vue

@@ -0,0 +1,54 @@
+<template>
+  <span>
+  <one-menu-drawer :drawer="drawer" > </one-menu-drawer>
+  <v-toolbar color="blue lighten-2" dark fixed app>
+    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+    <h1>ONE</h1>
+     <v-spacer></v-spacer>
+
+    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{xusername}}</a>
+    <v-badge color="red">
+      <template v-slot:badge>
+        <span>9</span>
+      </template>
+      <v-icon
+        medium
+
+      >
+        notifications
+      </v-icon>
+    </v-badge>
+     <v-btn class="ml-4" icon>
+      <v-icon>apps</v-icon>
+    </v-btn>
+  </v-toolbar>
+</template>
+<style scoped>
+.v-badge__badge{
+  top:-9px;
+  right:-9px;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+    'one-menu-drawer' : httpVueLoader('./oneMenuDrawerGlobal.vue')
+  },
+  data: function() {
+	return {
+		drawer: false
+	}
+  },
+  computed: {
+      xusername() {
+          var un = ''
+          if(localStorage.getItem("user")){
+            var retrievedObject = localStorage.getItem('user')
+            var dtuser = JSON.parse(retrievedObject)
+            un = dtuser.M_UserUsername
+          }
+          return un
+      }
+  }
+}
+</script>

apps/components/oneNavbarComponent_auto.vue

@@ -0,0 +1,165 @@
+<template>
+  <span>
+  <one-menu-drawer :drawer="drawer" > </one-menu-drawer>	
+  <one-menu-notification :drawer="drawer_notification" > </one-menu-notification>	
+  <v-toolbar color="blue lighten-2" dark fixed app>
+    <v-toolbar-side-icon class="hidden-sm-and-down" @click.stop="togleDrawer()"></v-toolbar-side-icon>
+    <h1>ONE</h1>
+    <h2 class="bread-crumb">{{bread_crumb}}</h2>
+    <v-spacer></v-spacer>
+    <div style="margin-top:14px;margin-bottom:auto;">
+    <span :class="auto_class" 
+       style='display:inline-block;margin-right:15px;font-size:16px;color:#ffffff;'>
+       Auto Verifikasi
+    </span>
+    <v-switch
+        v-model="flagAutoRun"
+        style="margin-right:15px;display:inline-block;"
+        color="#00ff00"
+    ></v-switch>
+    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>
+
+   </div>
+    <!-- PROFILE MENU -->
+    <v-menu
+      :close-on-content-click="true"
+      :nudge-width="200"
+      offset-overflow
+      left
+      bottom
+    >
+      <template v-slot:activator="{ on }">
+        <v-btn
+          class="ml-4" icon
+          v-on="on"
+        >
+          <v-icon>apps</v-icon>
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-list>
+          <v-list-tile avatar>
+
+            <v-list-tile-content>
+              <v-list-tile-title>{{ xusername }}</v-list-tile-title>
+              <v-list-tile-sub-title>{{xstaffname}}</v-list-tile-sub-title>
+            </v-list-tile-content>
+            
+          </v-list-tile>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-tile @click="change_password" >
+             <v-list-tile-action>
+                 <v-icon>security</v-icon>
+             </v-list-tile-action>
+             <v-list-tile-title>Change Password</v-list-tile-title>
+          </v-list-tile>
+
+        </v-list>
+        <v-list>
+          <v-list-tile @click="logout" >
+             <v-list-tile-action>
+                 <v-icon>no_meeting_room</v-icon>
+             </v-list-tile-action>
+             <v-list-tile-title>Log Out</v-list-tile-title>
+          </v-list-tile>
+
+        </v-list>
+
+        
+      </v-card>
+    </v-menu>
+    <!-- End of PROFILE MENU -->
+
+   <one-cp></one-cp> 
+  </v-toolbar>
+</template>
+<style scoped>
+.bread-crumb {
+   margin-left:20px;
+   font-weight:normal!important;
+}
+.v-badge__badge{
+  top:0px;
+  right:0px;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+    'one-menu-drawer' : httpVueLoader('./oneMenuDrawer.vue'),
+    'one-cp' : httpVueLoader('./oneChangePassword.vue'),
+    'one-menu-notification' : httpVueLoader('./oneNotificationDrawer.vue')
+  },
+  data: function() {
+    return {
+    drawer: false,
+    drawer_notification: false	,
+    flagAutoRun: false
+    }
+  },
+  watch : {
+     is_page_allowed : function(new_ipa, old_ipa) {
+        if(! new_ipa ) {
+           var dashboard = this.$store.state.system.dashboard
+           if (dashboard == "") {
+              //this.logout()
+              console.log('go-to','logout')
+           } else {
+              //window.location.href = '/' + dashboard
+              console.log('go-to dashboard',dashboard)
+           }
+        }
+     }
+  },
+  computed: {
+     is_page_allowed() {
+        return this.$store.state.system.is_page_allowed
+     },
+     bread_crumb() {
+        return this.$store.state.system.bread_crumb
+     },
+     xusername() {
+          var un = ''
+          if(localStorage.getItem("user")){
+            var retrievedObject = localStorage.getItem('user')
+            var dtuser = JSON.parse(retrievedObject)
+            
+            un = dtuser.M_UserUsername
+          }
+          return un
+      },
+     xstaffname() {
+          var un = ''
+          if(localStorage.getItem("user")){
+            var retrievedObject = localStorage.getItem('user')
+            var dtuser = JSON.parse(retrievedObject)
+            
+            un = dtuser.M_StaffName
+          }
+          return un
+      },
+    auto_label() {
+       console.log('Auto', this.flagAutoRun);
+       if (this.flagAutoRun) return 'Auto Verif Is Running';
+       return 'Auto Verif Is Stopped';
+    }
+  },
+  methods : {
+    togleDrawer() {
+      this.drawer = ! this.drawer 
+    },
+    change_password() {
+       this.$store.commit("system/update_change_password_dialog",true)
+    },
+    logout () {
+      window.one_logout('/one-ui/test/vuex/one-login')
+    }
+  }
+}
+</script>
+

apps/components/oneNotificationDrawer.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-navigation-drawer v-model="xdrawer" fixed app right temporary :width="drawerHeight">
+    
+      <v-list two-line>
+          <template v-for="(item, index) in items">
+            <v-subheader
+                v-bind:key="item.id"
+                v-if="item.header"
+            >
+              {{ item.header }}
+            </v-subheader>
+
+            
+
+            <template v-for="(itm, idx) in item.items">
+                <v-list-tile
+                    :key="itm.id"
+                    avatar
+                    >
+                    <v-list-tile-avatar>
+                        <img :src="itm.avatar">
+                    </v-list-tile-avatar>
+
+                    <v-list-tile-content>
+                        <v-list-tile-title v-html="itm.title"></v-list-tile-title>
+                        
+                        <v-list-tile-sub-title v-html="itm.subtitle"></v-list-tile-sub-title>
+                    </v-list-tile-content>
+
+                    <v-list-tile-action v-if="itm.date">
+                        
+                            {{ itm.date }}
+                        
+                    </v-list-tile-action>
+
+                    
+                </v-list-tile>
+                <v-divider
+                    :key="itm.id+50000"
+                    :inset="true"
+                    ></v-divider>
+            </template>
+            
+          </template>
+        </v-list>
+    
+  </v-navigation-drawer>
+</template>
+
+
+<script>
+module.exports = {
+    data () {
+        return {
+            items: 
+            [
+                { 
+                    // header: 'Today' ,
+                    items : [
+                        {
+                            avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
+                            title: 'Brunch this weekend?',
+                            subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
+                            date: '15 mins'
+                            ,id : 0 
+                        },
+                        
+                        {
+                            avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
+                            title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
+                            subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
+                            date: '30 mins'
+                            ,id : 1 
+                        },
+                        
+                        {
+                            avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
+                            title: 'Oui oui',
+                            subtitle: "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?",
+                            date: '45 mins'
+                            ,id : 2 
+                        }
+                    ]   
+                },
+
+                { 
+                    // header: 'Yesterday' ,
+                    items : [
+                        {
+                            avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
+                            title: 'Brunch this weekend?',
+                            subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
+                            date: '1 day'
+                            ,id : 3 
+                        },
+                        
+                        {
+                            avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
+                            title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
+                            subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
+                            date: '2 day'
+                            ,id : 4 
+                        }
+                    ]   
+                }
+            ]
+        }
+    },
+  props: {
+    drawer: Boolean
+  },
+
+  computed : {
+     drawerHeight() {
+        if (this.$vuetify.breakpoint.smAndDown) {
+           return "300px"
+        }
+        return "500px"
+     },
+     xdrawer: {
+        get() {
+           return this.drawer
+        },
+        set(v) {
+           this.$emit("togleDrawer")
+        }
+     }
+  },
+
+  mounted () {
+    
+  },
+
+  methods : {
+    
+  }
+}
+</script>

apps/components/oneTanggal.vue

@@ -0,0 +1,77 @@
+<template>
+   <div style="color: #fff!important"  class="tanggal">
+      {{f_tanggal}}
+      <span class="hidden-sm-and-down" style="color:#fff; margin-left:20px;font-weight:bold;font-size:16px;">
+         {{user.M_BranchCompanyName}} / {{user.S_RegionalName}}<span v-if="user.loginLevel === 'branch' || user.loginLevel === 'regionalBranch'"> / {{user.M_BranchName}}</span>
+      </span>
+      <div class="visible-sm-and-down hidden-md-and-up" style="color:#fff; font-weight:bold;font-size:10px;">
+         Devone <!-- {{branch_name}} -->
+      </div>
+   </div>
+</template>
+<style scoped>
+  div.tanggal {
+    text-decoration: none;
+    vertical-align:top;
+    color: rgb(255, 255, 255);
+    font-size: 14px;
+    display:inline-block; 
+    margin-left:10px;
+  }
+</style>
+<script>
+let hari = ['Minggu','Senin','Selasa', 'Rabu', 'Kamis',"Jum'at","Sabtu"]
+let bulan = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"]
+
+module.exports = {
+   data() {
+      return {
+         tanggal: new Date()
+         ,timepool : 0,
+         user:one_user()
+      }
+   }
+   ,computed: {
+      branch_name() {
+         let branch = this.$store.state.system.branch 
+         if (branch.M_BranchName == undefined) return ''
+         return branch.M_BranchName 
+      },
+      f_tanggal() {
+         try {
+            let tgl = this.tanggal.getDate()
+            let bln = bulan[this.tanggal.getMonth()]
+            let day = hari[this.tanggal.getDay()]
+            let result = day + ', ' + tgl + ' ' + bln + ' ' + this.tanggal.getFullYear() 
+            let hour = this.tanggal.getHours()
+            let minute = this.tanggal.getMinutes()
+            let second = this.tanggal.getSeconds() 
+            let jam = ' '
+            if ( hour < 10 ) jam = jam + '0'
+            jam = jam + hour.toString() + ':'
+            if ( minute < 10 ) jam = jam + '0'
+            jam = jam + minute.toString() + ':'
+            if ( second< 10 ) jam = jam + + '0'
+            jam = jam + second.toString()
+         
+            result = result + ' ' +  jam
+            return result 
+         } catch(e) {
+            return ''
+         }
+      }
+   }
+   , mounted() {
+      let self = this
+      this.timepool = setInterval(function() {
+         self.tanggal = new Date()
+      },1000)
+      // console.log(this.user);
+      // console.log(one_user());
+   }
+   ,beforeDestroy() {
+      if (this.timepool > 0 ) clearInterval(this.timepool)
+
+   }
+}
+</script>