Initial import

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/oneFooter.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-footer color="blue lighten-2" app>
+    <one-clock class="hidden-sm-and-down"></one-clock>
+    <v-spacer></v-spacer>
+    <span class="one-footer white--text">
+      <code class="mb-0">Auto logged out in <span>{{ secondsUntilExpire }}</span> seconds</code>
+    </span>
+  </v-footer>
+</template>
+
+<style>
+span.one-footer {
+  margin-right: 30px;
+}
+</style>
+
+<script>
+module.exports = {
+  data() {
+    return {
+      IDLE_TIMEOUT: 5 * 60, // Waktu idle dalam detik
+      autologoutCounter: 0, // Counter idle dalam localStorage
+      _idleSecondsTimer: null,
+    };
+  },
+
+  computed: {
+    secondsUntilExpire() {
+      return this.IDLE_TIMEOUT - this.autologoutCounter;
+    }
+  },
+
+  mounted() {
+    // Mengambil waktu logout yang disesuaikan jika tersedia
+    if (localStorage.getItem("user")) {
+      var retrievedObject = localStorage.getItem("user");
+      var dtuser = JSON.parse(retrievedObject);
+      if (dtuser.time_autologout && parseInt(dtuser.time_autologout) > 0) {
+        this.IDLE_TIMEOUT = parseInt(dtuser.time_autologout) * 60;
+      }
+    }
+
+    // Inisialisasi autologout di localStorage jika belum ada
+    if (localStorage.getItem("autologout") === null) {
+      localStorage.setItem("autologout", 0);
+    }
+    localStorage.removeItem("logoutTriggered");
+
+    // Event listeners untuk reset idle timer saat ada aktivitas pengguna
+    document.onclick = this.resetIdleTimer;
+    document.onmousemove = this.resetIdleTimer;
+    document.onkeypress = this.resetIdleTimer;
+
+    // Mulai interval untuk memeriksa idle time dan update counter
+    this._idleSecondsTimer = setInterval(this.checkIdleTime, 1000);
+
+    // Event listener untuk perubahan `localStorage` guna sinkronkan logout antar tab
+    window.addEventListener("storage", this.handleStorageChange);
+  },
+
+  methods: {
+    resetIdleTimer() {
+      localStorage.setItem("autologout", 0);
+      this.autologoutCounter = 0; // Reset counter di data reaktif
+    },
+
+    checkIdleTime() {
+      let xcounter = parseInt(localStorage.getItem("autologout"));
+      xcounter++;
+      localStorage.setItem("autologout", xcounter);
+      this.autologoutCounter = xcounter; // Update counter di data reaktif
+
+      // Jika waktu idle telah habis, logout semua tab
+      if (xcounter >= this.IDLE_TIMEOUT) {
+        clearInterval(this._idleSecondsTimer);
+        localStorage.setItem("logoutTriggered", true); // Set trigger logout
+        localStorage.removeItem("autologout"); // Hapus autologout
+        window.one_logout('/one-ui/test/vuex/one-login-v2') // Arahkan ke login
+      }
+    },
+
+    handleStorageChange(event) {
+      if (event.key === "logoutTriggered" && event.newValue === "true") {
+        // Redirect semua tab ke halaman login jika logoutTriggered berubah
+        window.one_logout('/one-ui/test/vuex/one-login-v2')
+      }
+    }
+  },
+
+  beforeDestroy() {
+    clearInterval(this._idleSecondsTimer);
+    window.removeEventListener("storage", this.handleStorageChange);
+  },
+
+  components: {
+    'one-clock': httpVueLoader('./oneTanggal.vue')
+  }
+}
+</script>

apps/components/oneFooter.vue--17724

@@ -0,0 +1,107 @@
+<template>
+   <v-footer color="blue lighten-2" app>
+       <one-clock class="hidden-sm-and-down"></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;
+          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--311024

@@ -0,0 +1,65 @@
+<template>
+   <v-footer color="blue lighten-2" app>
+       <one-clock class="hidden-sm-and-down"></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() {
+    
+   },
+   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,154 @@
+<template>
+  <v-navigation-drawer  temporary class="blue lighten-2" v-model="xdrawer" dark  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: #1E88E5;
+  }
+  .tile:active {
+    background: #bec5b7;
+  }
+  .v-list__group__header__prepend-icon .v-icon {
+    color: white;
+}
+.v-list__tile__title:hover {
+    color: #BBDEFB;
+}
+
+.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,177 @@
+<template>
+<div>
+  <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="togleDrawer()"></v-toolbar-side-icon>
+    <v-layout row  >
+        <v-flex class="pt-2" xs8>
+           <p class="mb-0"><a href="#" style="padding-bottom:0px;margin-bottom:0px;text-decoration:none;color:#fff;font-size:18px; font-weight:bold;">CPONE</a> </p>
+           <p class="hidden-sm-and-down mb-0"><span style="text-decoration:none;color:#fff;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 hidden-sm-and-down" style="min-height:10px;text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>
+    <v-badge color="red">
+  
+  
+</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>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;
+}
+</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	
+    }
+  },
+  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
+      }
+  },
+
+  methods : {
+    togleDrawer() {
+      this.drawer = ! this.drawer 
+    },
+    change_password() {
+       this.$store.commit("system/update_change_password_dialog",true)
+    },
+    logout () {
+      window.one_logout('/home')
+    }
+  }
+}
+</script>
+

apps/components/oneNavbarComponent.vue-010320

@@ -0,0 +1,168 @@
+<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="togleDrawer()"></v-toolbar-side-icon>
+    <h1>ONE</h1>
+    <h2 class="bread-crumb">{{bread_crumb}}</h2>
+    <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.stop="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
+      :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	
+    }
+  },
+  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
+      }
+  },
+
+  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/oneNavbarComponent.vue070524

@@ -0,0 +1,182 @@
+<template>
+<div>
+  <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>
+    <v-layout row  >
+        <v-flex class="pt-2" xs8>
+           <p class="mb-0"><a href="#" style="padding-bottom:0px;margin-bottom:0px;text-decoration:none;color:#fff;font-size:18px; font-weight:bold;">CPONE</a> </p>
+           <p class="mb-0"><span style="text-decoration:none;color:#fff;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:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>
+    <v-badge color="red">
+  
+  <v-btn class="pt-0 pb-2" icon @click.stop="drawer_notification = !drawer_notification" flat>
+    <v-icon
+      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>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;
+}
+</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	
+    }
+  },
+  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
+      }
+  },
+
+  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/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/oneNavbarComponentNoMenu.vue

@@ -0,0 +1,168 @@
+<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="togleDrawer()"></v-toolbar-side-icon>
+    <h1>CPONE</h1>
+    <h2 class="bread-crumb">{{bread_crumb}}</h2>
+    <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.stop="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
+      :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	
+    }
+  },
+  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
+      }
+  },
+
+  methods : {
+    togleDrawer() {
+      window.location.href = "/one-ui/system/one-md-menu/"
+    },
+    change_password() {
+       this.$store.commit("system/update_change_password_dialog",true)
+    },
+    logout () {
+      window.one_logout('/one-ui/one-login')
+    }
+  }
+}
+</script>
+

apps/components/oneNavbarComponent_auto.vue

@@ -0,0 +1,151 @@
+<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-v2')
+    }
+  }
+}
+</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-bkp.vue

@@ -0,0 +1,62 @@
+<template>
+   <div class="tanggal">
+      {{f_tanggal}}
+   </div>
+</template>
+<style scoped>
+  div.tanggal {
+    text-decoration: none;
+    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
+      }
+   }
+   ,computed: {
+      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)
+   }
+   ,beforeDestroy() {
+      if (this.timepool > 0 ) clearInterval(this.timepool)
+
+   }
+}
+</script>

apps/components/oneTanggal-new.vue

@@ -0,0 +1,70 @@
+<template>
+   <div class="tanggal">
+      {{f_tanggal}}
+      <span style="color:brown; margin-left:20px;font-weight:bold;font-size:16px;">
+         {{branch_name}}
+      </span>
+   </div>
+</template>
+<style scoped>
+  div.tanggal {
+    text-decoration: none;
+    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
+      }
+   }
+   ,computed: {
+      branch_name() {
+         let branch = this.$store.state.system.branch 
+         if (branch.M_BranchName == undefined) return ''
+         return branch.M_BranchName + ', ' + branch.M_BranchAddress
+      },
+      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)
+   }
+   ,beforeDestroy() {
+      if (this.timepool > 0 ) clearInterval(this.timepool)
+
+   }
+}
+</script>

apps/components/oneTanggal.vue

@@ -0,0 +1,74 @@
+<template>
+   <div class="tanggal">
+      {{f_tanggal}}
+      <span class="hidden-sm-and-down" style="color:brown; margin-left:20px;font-weight:bold;font-size:16px;">
+         {{branch_name}}
+      </span>
+      <div class="visible-sm-and-down hidden-md-and-up" style="color:brown; 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
+      }
+   }
+   ,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)
+   }
+   ,beforeDestroy() {
+      if (this.timepool > 0 ) clearInterval(this.timepool)
+
+   }
+}
+</script>

apps/components/oneTanggal.vue-010320

@@ -0,0 +1,70 @@
+<template>
+   <div class="tanggal">
+      {{f_tanggal}}
+      <span style="color:brown; margin-left:20px;font-weight:bold;font-size:16px;">
+         {{branch_name}}
+      </span>
+   </div>
+</template>
+<style scoped>
+  div.tanggal {
+    text-decoration: none;
+    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
+      }
+   }
+   ,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)
+   }
+   ,beforeDestroy() {
+      if (this.timepool > 0 ) clearInterval(this.timepool)
+
+   }
+}
+</script>