Initial import

one-ui/management/one-management-menu/api/sales.js

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

one-ui/management/one-management-menu/components/oneChart.vue

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

one-ui/management/one-management-menu/components/oneSales.vue

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

one-ui/management/one-management-menu/index.php

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card @click="goToMenu('/one-ui/management/one-management-menu')" tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content style="background:#fff8dc8c">
+                  <v-layout class="align-center pr-2 mb-2 " row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">MENU</p>
+                     </v-flex>
+                  </v-layout>
+                  <v-container  fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                     <v-layout row>
+                        <v-flex sm12>
+                           <v-layout style="border:5px solid #3c4242" class="pa-2" row>
+                              <v-flex class="text-xs-left" xs12 and-down>
+                                 <v-layout align-center mb-1 wrap>
+                                    <v-flex xs6 pa-1 >
+                                       <v-layout align-center row>
+                                          <v-flex xs12>
+                                          <v-card @click="goToMenu('/one-ui/management/one-sales')" elevation="3" color="#6fcb9f" class="pa-2">
+                                             <v-layout row>
+                                                <v-flex xs12>
+                                                   <h4 class="caption mono">TOTAL OMSET</h4>
+                                                </v-flex>
+                                             </v-layout>
+                                          </v-card>
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-flex>
+                                    <v-flex xs6 pa-1>
+                                       <v-layout align-center row>
+                                          <v-flex xs12>
+                                          <v-card @click="goToMenu('/one-ui/management/one-sales-per-payment')" elevation="3" color="#6fcb9f" class="pa-2">
+                                             <v-layout row>
+                                                <v-flex xs12>
+                                                   <h4 class="caption mono">OMSET PER PEMBAYARAN</h4>
+                                                </v-flex>
+                                             </v-layout>
+                                          </v-card>
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-flex>
+                                    <v-flex xs6 pa-1>
+                                       <v-layout align-center row>
+                                          <v-flex xs12>
+                                          <v-card @click="goToMenu('/one-ui/management/one-sales-per-omset')" elevation="3" color="#6fcb9f" class="pa-2">
+                                             <v-layout row>
+                                                <v-flex xs12>
+                                                   <h4 class="caption mono">OMSET PER TIPE</h4>
+                                                </v-flex>
+                                             </v-layout>
+                                          </v-card>
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-flex>
+                                    <v-flex xs6 pa-1>
+                                       <v-layout align-center row>
+                                          <v-flex xs12>
+                                          <v-card @click="goToMenu('/one-ui/management/one-sales-per-product')" elevation="3" color="#6fcb9f" class="pa-2">
+                                             <v-layout row>
+                                                <v-flex xs12>
+                                                   <h4 class="caption mono">OMSET PER PRODUK</h4>
+                                                </v-flex>
+                                             </v-layout>
+                                          </v-card>
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-flex>
+                                 </v-layout>
+                              </v-flex>
+                           </v-layout>
+                           
+                        </v-flex>
+                     </v-layout>
+                  </v-container>
+               
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script>
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/polyfill.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/classList.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/findindex_polyfill_mdn.js"><\/script>'
+         )
+      </script>
+
+    
+
+    <script src="../../libs/vendor/apexcharts.js"></script>
+    <script src="../../libs/vendor/vue-apexcharts.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   mounted() {
+      
+   },
+   computed: {
+   },
+   data: {
+         show:true,
+         width1:'45',
+         width2:'25%',
+         width11:'55%',
+         width3:'10%',
+         width4:'5%',
+         width5:'2%',
+         width6:'18%',
+         xtype:'day',
+         types:['day','month']    
+   },
+   methods:{
+      goToMenu(url){
+         window.location.href = url
+      }
+   },
+   components: {
+      apexchart: VueApexCharts
+   }
+})
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }   #chart {
+      padding: 0;
+      max-width: 650px;
+      margin: 35px auto;
+    }
+    
+    .apexcharts-legend text {
+      font-weight: 900;
+    }
+      
+
+
+  select.flat-select:focus, select.flat-select:hover {
+    border: 0;
+    outline: 0;
+  }
+  
+
+.apexcharts-canvas {
+    margin: 0 auto;
+}
+    </style>
+   </body>
+
+</html>

one-ui/management/one-management-menu/store.js

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

one-ui/management/one-sales-per-omset/api/sales.js

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

one-ui/management/one-sales-per-omset/components/oneChart.vue

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

one-ui/management/one-sales-per-omset/components/oneSales.vue

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

one-ui/management/one-sales-per-omset/index.php

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card @click="goToMenu('/one-ui/management/one-management-menu')" tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content style="background:#fff8dc8c">
+                  <v-layout class="align-center pr-2 mb-2 " row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">OMSET PER TIPE OMSET</p>
+                     </v-flex>
+                     <v-flex class="text-xs-right mt-2" xs6>
+                        <v-btn-toggle v-model="xtype">
+                           <v-btn color="#272324" small flat @click="changeType('day')" value="day">
+                              Harian
+                           </v-btn>
+                           <v-btn color="#272324" small flat @click="changeType('month')" value="month">
+                              Bulanan
+                           </v-btn>
+                        </v-btn-toggle>
+                     </v-flex>
+                  </v-layout>
+                  <v-layout  row>
+                                 <v-flex pa-1 xs12>
+                                    <v-card color="#a6cbff">
+                                       <v-layout pa-1 align-center row>
+                                             <v-flex pl-2 xs6>
+                                                <p class="mb-0 font-weight-black subheader">BANDUNG RAYA</p>
+                                                <p v-if="xtype === 'month'" class="mb-0">{{getmonthyear()}}</p>
+                                                <p v-if="xtype === 'day'" class="mb-0">{{getdaymonthyear()}}</p>
+                                             </v-flex>
+                                             <v-flex text-xs-right pr-2 xs6>
+                                                <p class="mb-1 font-weight-black subheader">{{total_tunai}} JUTA</p>
+                                             </v-flex>
+                                          </v-layout>
+                                    </v-card>
+                                 </v-flex>
+                              </v-layout>
+                  <v-container  fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                 
+
+                     <v-layout row>
+                     <v-flex xs12>
+                     <v-card
+                        color="#a6cbff"
+                       
+                        >
+                           <v-card-title
+                              class="white--text"
+                              style="background:#b5abce"
+                           >
+                              
+                              
+                              <v-layout wrap>
+                                 <v-flex xs12>
+                                    <v-layout justify-center mb-1 wrap>
+                                       <v-flex v-for="value in all" pa-1 xs6>
+                                          <v-card :color="value.color">
+                                             <v-card-actions class="pa-1">
+                                                <v-layout align-center row>
+                                                   <v-flex pl-2 style="border-right:1px solid grey" xs8>
+                                                      <h5>{{value.label}}</h5>
+                                                      <p class="mb-1 caption mono">{{value.total}} juta</p>
+                                                   </v-flex>
+                                                   <v-flex pr-2 text-xs-right xs4>
+                                                      <h5 style="font-size:10px">{{value.persen}}%</h5>
+                                                   </v-flex>
+                                                </v-layout>
+                                             </v-card-actions>
+                                          </v-card>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-flex>
+                              </v-layout>
+                              
+                           </v-card-title>
+                           <v-card-text class="py-0">
+                              <v-timeline dense>
+                            
+                                 <v-timeline-item
+                                    color="#b5abce"
+                                    small
+                                    v-for="omset in datas"
+                                 >
+                                    <v-container  pa-0 >
+                                       <v-layout text-xs-center style="background:white" class="font-weight-black mb-1" pa-1 row>
+                                          <v-flex mt-1 mb-1 xs12><h4>TOTAL OMSET {{omset.cabang}} {{omset.total}} JUTA</h4></v-flex>
+                                       </v-layout>
+                                       
+                                       <v-layout v-for="pertype in omset.details" pa-0 style="background:white" row>
+                                          <v-flex class="pl-2 pr-2" xs12>
+                                             <v-layout mb-1 row>
+                                                <v-flex pa-2 xs12>
+                                                   <v-layout row>
+                                                      <v-flex xs8>
+                                                         <p class="mb-0 font-weight-bold">{{pertype.name_type}}</p>
+                                                         <p class="mb-0 caption mono">{{pertype.total}} juta</p>
+                                                      </v-flex>
+                                                      <v-flex xs4>
+                                                         <v-progress-linear
+                                                            color="#b5abce"
+                                                            height="7"
+                                                            :value="pertype.persen"
+                                                         ></v-progress-linear>
+                                                      </v-flex>
+                                                   </v-layout>
+                                                </v-flex>
+                                             </v-layout>
+
+                                        
+
+
+                                            
+
+                                          
+
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-container>
+                                 </v-timeline-item>
+
+
+                                 
+
+                              </v-timeline>
+                           </v-card-text>
+                        </v-card>
+                        </v-flex>
+                     </v-layout>
+                  </v-container>
+               
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script>
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/polyfill.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/classList.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/findindex_polyfill_mdn.js"><\/script>'
+         )
+      </script>
+
+    
+
+    <script src="../../libs/vendor/apexcharts.js"></script>
+    <script src="../../libs/vendor/vue-apexcharts.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   mounted() {
+      let self = this
+      self.$store.dispatch('sales/getdatas_riau',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_pajajaran',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_toha',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_cimahi',{type:this.xtype})
+   },
+   computed: {
+         datas(){
+            return this.$store.state.sales.datas
+         },
+         total_tunai(){
+            return this.$store.state.sales.total_tunai
+         },
+         all(){
+            var datas = this.$store.state.sales.datas
+            var all = []
+            
+            if(this.$store.state.sales.persetase_loading === 100){
+               console.log(datas[0].details)
+               var xdetails = datas[0].details
+               xdetails.forEach(function(value){
+                  let new_obj = {label:value.name_type,color:value.color,total:0,persen:0}
+                  all.push(new_obj)
+               })
+
+               datas.forEach(function(value){
+                  value.details.forEach(function(detail){
+                     let idx = _.findIndex(all, { label:detail.name_type })
+                     let total = all[idx].total 
+                     total = total + parseFloat(detail.total)
+                     total = Math.round((total+ Number.EPSILON) * 100) / 100
+                     all[idx].total = total
+                  })
+               })
+
+               var total_value = 0
+
+               all.forEach(function(xtot){
+                  total_value = total_value +  parseFloat(xtot.total)
+                  total_value = Math.round((total_value+ Number.EPSILON) * 100) / 100
+               })
+
+               this.$store.commit('sales/update_total_tunai',total_value)
+
+               all.forEach(function(entry,index){
+                  var persen = (entry.total/total_value) * 100
+                  persen = Math.round((persen + Number.EPSILON) * 100) / 100
+                  all[index].persen = persen
+               })
+            }
+
+            return all
+            
+         }
+   },
+   data: {
+         show:true,
+         width1:'45',
+         width2:'25%',
+         width11:'55%',
+         width3:'10%',
+         width4:'5%',
+         width5:'2%',
+         width6:'18%',
+         xtype:'day',
+         types:['day','month']    
+   },
+   methods:{
+      goToMenu(url){
+         window.location.href = url
+      },
+      count_persen(value){
+         var all = this.total_all
+         var persen = (value/all) * 100
+         persen = Math.round((persen + Number.EPSILON) * 100) / 100
+         return persen
+
+      },
+      
+      getmonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return n+' '+d.getFullYear()
+           },
+           getdaymonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return d.getDate()+' '+n+' '+d.getFullYear()
+           },
+           getdatasx(act){
+              console.log(act)
+
+               var old_type = this.xtype
+               console.log(old_type)
+               var idx = this.types.indexOf(old_type)
+               console.log(idx)
+               if(act === 'Left'){
+                  if(idx > 0)
+                     idx = idx - 1
+               }
+               if(act === 'Right'){
+                  if(idx < (this.types.length-1))
+                     idx = idx + 1;console.log(idx)
+               }
+
+               var type = this.types[idx]
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_datas',[])
+
+               this.$store.commit('sales/update_total_tunai',0)
+
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            },
+            changeType(type){
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_datas',[])
+
+               this.$store.commit('sales/update_total_tunai',0)
+
+
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            }
+   },
+   components: {
+      apexchart: VueApexCharts
+   }
+})
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }   #chart {
+      padding: 0;
+      max-width: 650px;
+      margin: 35px auto;
+    }
+    
+    .apexcharts-legend text {
+      font-weight: 900;
+    }
+      
+
+
+  select.flat-select:focus, select.flat-select:hover {
+    border: 0;
+    outline: 0;
+  }
+  
+
+.apexcharts-canvas {
+    margin: 0 auto;
+}
+    </style>
+   </body>
+
+</html>

one-ui/management/one-sales-per-omset/store.js

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

one-ui/management/one-sales-per-payment/api/sales.js

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

one-ui/management/one-sales-per-payment/components/oneChart.vue

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

one-ui/management/one-sales-per-payment/components/oneSales.vue

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

one-ui/management/one-sales-per-payment/index.php

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content 
+               
+               v-touch="{
+                  left: () => getdatasx('Right'),
+                  right: () => getdatasx('Left')
+               }"
+               style="max-height: 1000px;background:#fcfcfc!important" >
+                  <v-layout class="align-center pr-2" row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">TOTAL OMSET</p>
+                     </v-flex>
+                     <v-flex class="text-xs-right mt-2" xs6>
+                        <v-btn-toggle v-model="xtype">
+                           <v-btn color="#272324" small flat @click="changeType('day')" value="day">
+                              Harian
+                           </v-btn>
+                           <v-btn color="#272324" small flat @click="changeType('month')" value="month">
+                              Bulanan
+                           </v-btn>
+                        </v-btn-toggle>
+                     </v-flex>
+                  </v-layout>
+               <v-container fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                     <v-layout row>
+                        <v-flex sm12 and-down>
+                           <v-card tile color="#F0EACF">
+                                 <v-card-title class="pa-1" style="background:#3F848F" >
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+                                       <v-flex class="text-xs-left" xs12 and-down>
+                                       <div id="chart">
+                                       <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+      </div>
+                                       </div>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                        
+                     </v-flex>
+                  </v-layout>
+               </v-container>
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script>
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/findindex_polyfill_mdn.js"><\/script>'
+        )
+    </script>
+
+    
+
+    <script src="../../libs/vendor/apexcharts.js"></script>
+    <script src="../../libs/vendor/vue-apexcharts.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   mounted() {
+      let self = this
+      self.$store.dispatch('sales/getdatas_riau',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_pajajaran',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_toha',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_cimahi',{type:this.xtype})
+   },
+   computed: {
+           
+   },
+   data: {
+         xtype:'day',
+         types:['day','month'],
+         series: [{
+            name: 'PRODUCT A',
+            data: [44, 55, 41, 67, 22, 43]
+          }, {
+            name: 'PRODUCT B',
+            data: [13, 23, 20, 8, 13, 27]
+          }, {
+            name: 'PRODUCT C',
+            data: [11, 17, 15, 15, 21, 14]
+          }, {
+            name: 'PRODUCT D',
+            data: [21, 7, 25, 13, 22, 8]
+          }],
+          chartOptions: {
+            chart: {
+              type: 'bar',
+              height: 350,
+              stacked: true,
+              toolbar: {
+                show: true
+              },
+              zoom: {
+                enabled: true
+              }
+            },
+            responsive: [{
+              breakpoint: 480,
+              options: {
+                legend: {
+                  position: 'bottom',
+                  offsetX: -10,
+                  offsetY: 0
+                }
+              }
+            }],
+            plotOptions: {
+              bar: {
+                horizontal: false,
+              },
+            },
+            xaxis: {
+              type: 'datetime',
+              categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
+                '01/05/2011 GMT', '01/06/2011 GMT'
+              ],
+            },
+            legend: {
+              position: 'right',
+              offsetY: 40
+            },
+            fill: {
+              opacity: 1
+            }
+          },
+         
+          
+          
+   },
+   methods:{
+
+   },
+   components: {
+      apexchart: VueApexCharts
+   }
+})
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }   #chart {
+      padding: 0;
+      max-width: 650px;
+      margin: 35px auto;
+    }
+    
+    .apexcharts-legend text {
+      font-weight: 900;
+    }
+      
+
+
+  select.flat-select:focus, select.flat-select:hover {
+    border: 0;
+    outline: 0;
+  }
+  
+
+.apexcharts-canvas {
+    margin: 0 auto;
+}
+    </style>
+   </body>
+
+</html>

one-ui/management/one-sales-per-payment/store.js

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

one-ui/management/one-sales-per-product/api/sales.js

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

one-ui/management/one-sales-per-product/components/oneChart.vue

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

one-ui/management/one-sales-per-product/components/oneSales.vue

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

one-ui/management/one-sales-per-product/index.php

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card @click="goToMenu('/one-ui/management/one-management-menu')" tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content style="background:#fff8dc8c">
+                  <v-layout class="align-center pr-2 mb-2 " row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">OMSET PER PRODUK</p>
+                     </v-flex>
+                     <v-flex class="text-xs-right mt-2" xs6>
+                        <v-btn-toggle v-model="xtype">
+                           <v-btn color="#272324" small flat @click="changeType('day')" value="day">
+                              Harian
+                           </v-btn>
+                           <!--<v-btn color="#272324" small flat @click="changeType('month')" value="month">
+                              Bulanan
+                           </v-btn>-->
+                        </v-btn-toggle>
+                     </v-flex>
+                  </v-layout>
+                  <v-layout  row>
+                                 <v-flex pa-1 xs12>
+                                    <v-card color="#a6cbff">
+                                       <v-layout pa-1 align-center row>
+                                             <v-flex pl-2 xs6>
+                                                <p class="mb-0 font-weight-black subheader">BANDUNG RAYA</p>
+                                                <p v-if="xtype === 'month'" class="mb-0">{{getmonthyear()}}</p>
+                                                <p v-if="xtype === 'day'" class="mb-0">{{getdaymonthyear()}}</p>
+                                             </v-flex>
+                                             <v-flex text-xs-right pr-2 xs6>
+                                                <p class="mb-1 font-weight-black subheader">{{total_tunai}} JUTA</p>
+                                             </v-flex>
+                                          </v-layout>
+                                    </v-card>
+                                 </v-flex>
+                              </v-layout>
+                  <v-container  fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                 
+
+                     <v-layout row>
+                     <v-flex xs12>
+                     <v-card
+                        color="#a6cbff"
+                       
+                        >
+                           <v-card-title
+                              class="white--text"
+                              style="background:#b5abce"
+                           >
+                              
+                              
+                              <v-layout wrap>
+                                 <v-flex xs12>
+                                    <v-layout justify-center mb-1 wrap>
+                                       <v-flex v-for="value in all" pa-1 xs6>
+                                          <v-card :color="value.color">
+                                             <v-card-actions class="pa-1">
+                                                <v-layout align-center row>
+                                                   <v-flex pl-2 style="border-right:1px solid grey" xs8>
+                                                      <h5>{{value.label}}</h5>
+                                                      <p class="mb-1 caption mono">{{value.total}} juta</p>
+                                                   </v-flex>
+                                                   <v-flex pr-2 text-xs-right xs4>
+                                                      <h5 style="font-size:10px">{{value.persen}}%</h5>
+                                                   </v-flex>
+                                                </v-layout>
+                                             </v-card-actions>
+                                          </v-card>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-flex>
+                              </v-layout>
+                              
+                           </v-card-title>
+                           <v-card-text class="py-0">
+                              <v-timeline dense>
+                            
+                                 <v-timeline-item
+                                    color="#b5abce"
+                                    small
+                                    v-for="omset in datas"
+                                 >
+                                    <v-container  pa-0 >
+                                       <v-layout text-xs-center style="background:white" class="font-weight-black mb-1" pa-1 row>
+                                          <v-flex mt-1 mb-1 xs12><h4>TOTAL OMSET {{omset.cabang}} {{omset.total}} JUTA</h4></v-flex>
+                                       </v-layout>
+                                       
+                                       <v-layout v-for="pertype in omset.details" pa-0 style="background:white" row>
+                                          <v-flex class="pl-2 pr-2" xs12>
+                                             <v-layout mb-1 row>
+                                                <v-flex pa-2 xs12>
+                                                   <v-layout row>
+                                                      <v-flex xs8>
+                                                         <p class="mb-0 font-weight-bold">{{pertype.label}}</p>
+                                                         <p class="mb-0 caption mono">{{pertype.total}} juta [ <span style="color:#b5abce">{{pertype.persen}}%</span> ]</p>
+                                                      </v-flex>
+                                                      <v-flex xs4>
+                                                         <v-progress-linear
+                                                            color="#b5abce"
+                                                            height="7"
+                                                            :value="pertype.persen"
+                                                         ></v-progress-linear>
+                                                      </v-flex>
+                                                   </v-layout>
+                                                </v-flex>
+                                             </v-layout>
+
+                                        
+
+
+                                            
+
+                                          
+
+                                          </v-flex>
+                                       </v-layout>
+                                    </v-container>
+                                 </v-timeline-item>
+
+
+                                 
+
+                              </v-timeline>
+                           </v-card-text>
+                        </v-card>
+                        </v-flex>
+                     </v-layout>
+                  </v-container>
+               
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script>
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/polyfill.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/classList.min.js"><\/script>'
+         )
+         window.Promise ||
+         document.write(
+            '<script src="../../libs/vendor/findindex_polyfill_mdn.js"><\/script>'
+         )
+      </script>
+
+    
+
+    <script src="../../libs/vendor/apexcharts.js"></script>
+    <script src="../../libs/vendor/vue-apexcharts.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   mounted() {
+      let self = this
+      self.$store.dispatch('sales/getdatas_riau',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_pajajaran',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_toha',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_cimahi',{type:this.xtype})
+   },
+   computed: {
+         datas(){
+            return this.$store.state.sales.datas
+         },
+         total_tunai(){
+            return this.$store.state.sales.total_tunai
+         },
+         all(){
+            var datas = this.$store.state.sales.datas
+            var all = []
+            
+            if(this.$store.state.sales.persetase_loading === 100){
+               console.log(datas[0].details)
+               var xdetails = datas[0].details
+               xdetails.forEach(function(value){
+                  let new_obj = {label:value.label,color:value.color,total:0,persen:0}
+                  all.push(new_obj)
+               })
+
+               datas.forEach(function(value){
+                  value.details.forEach(function(detail){
+                     let idx = _.findIndex(all, { label:detail.label })
+                     let total = all[idx].total 
+                     total = total + parseFloat(detail.total)
+                     total = Math.round((total+ Number.EPSILON) * 100) / 100
+                     all[idx].total = total
+                  })
+               })
+
+               var total_value = 0
+
+               all.forEach(function(xtot){
+                  total_value = total_value +  parseFloat(xtot.total)
+                  total_value = Math.round((total_value+ Number.EPSILON) * 100) / 100
+               })
+
+               this.$store.commit('sales/update_total_tunai',total_value)
+
+               all.forEach(function(entry,index){
+                  var persen = (entry.total/total_value) * 100
+                  persen = Math.round((persen + Number.EPSILON) * 100) / 100
+                  all[index].persen = persen
+               })
+            }
+
+            return all
+            
+         }
+   },
+   data: {
+         show:true,
+         width1:'45',
+         width2:'25%',
+         width11:'55%',
+         width3:'10%',
+         width4:'5%',
+         width5:'2%',
+         width6:'18%',
+         xtype:'day',
+         types:['day','month']    
+   },
+   methods:{
+      goToMenu(url){
+         window.location.href = url
+      },
+      count_persen(value){
+         var all = this.total_all
+         var persen = (value/all) * 100
+         persen = Math.round((persen + Number.EPSILON) * 100) / 100
+         return persen
+
+      },
+      
+      getmonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return n+' '+d.getFullYear()
+           },
+           getdaymonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return d.getDate()+' '+n+' '+d.getFullYear()
+           },
+           getdatasx(act){
+              console.log(act)
+
+               var old_type = this.xtype
+               console.log(old_type)
+               var idx = this.types.indexOf(old_type)
+               console.log(idx)
+               if(act === 'Left'){
+                  if(idx > 0)
+                     idx = idx - 1
+               }
+               if(act === 'Right'){
+                  if(idx < (this.types.length-1))
+                     idx = idx + 1;console.log(idx)
+               }
+
+               var type = this.types[idx]
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_datas',[])
+
+               this.$store.commit('sales/update_total_tunai',0)
+
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            },
+            changeType(type){
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_datas',[])
+
+               this.$store.commit('sales/update_total_tunai',0)
+
+
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            }
+   },
+   components: {
+      apexchart: VueApexCharts
+   }
+})
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }   #chart {
+      padding: 0;
+      max-width: 650px;
+      margin: 35px auto;
+    }
+    
+    .apexcharts-legend text {
+      font-weight: 900;
+    }
+      
+
+
+  select.flat-select:focus, select.flat-select:hover {
+    border: 0;
+    outline: 0;
+  }
+  
+
+.apexcharts-canvas {
+    margin: 0 auto;
+}
+    </style>
+   </body>
+
+</html>

one-ui/management/one-sales-per-product/store.js

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

one-ui/management/one-sales/api/sales.js

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

one-ui/management/one-sales/components/oneChart.vue

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

one-ui/management/one-sales/components/oneSales.vue

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

one-ui/management/one-sales/index.php

@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <v-card tile elevation="5" color="#85352e" class="pt-2 pb-2 mb-1">
+               <v-flex class="text-xs-center" xs12>
+                  <h3 style="font-family: 'Days One', sans-serif;color:#FFFFFF">BISONE</h3>
+               </v-flex>
+            </v-card>
+            <v-content 
+               
+               v-touch="{
+                  left: () => getdatasx('Right'),
+                  right: () => getdatasx('Left')
+               }"
+               style="max-height: 1000px;background:#fcfcfc!important" >
+                  <v-layout class="align-center pr-2" row>
+                     <v-flex class="text-xs-left mt-2" xs6>
+                        <p class="pl-2 mb-0 font-weight-black">TOTAL OMSET</p>
+                     </v-flex>
+                     <v-flex class="text-xs-right mt-2" xs6>
+                        <v-btn-toggle v-model="xtype">
+                           <v-btn color="#272324" small flat @click="changeType('day')" value="day">
+                              Harian
+                           </v-btn>
+                           <v-btn color="#272324" small flat @click="changeType('month')" value="month">
+                              Bulanan
+                           </v-btn>
+                        </v-btn-toggle>
+                     </v-flex>
+                  </v-layout>
+               <v-container fluid fill-height  class="pl-1 pr-1 pt-1 pb-2">
+                  <v-layout row wrap >
+                     <v-flex xs12 fill-height pa-1>
+                     <v-layout row>
+                        <v-flex sm12 and-down>
+                           <v-card tile color="#C8DFC3">
+                                 <v-card-title class="pa-1" style="background:#3F848F" >
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+                                       <v-flex class="text-xs-left" sm6 and-down>
+                                             <p class="mb-0 caption mono" style="color:#616161">PASIEN</p>
+                                             <p class="mb-1 text--primary"><span class="display-1 font-weight-black">{{total_pasien}}</span> <span class="subtitle-2 font-weight-light">org</span></p>
+                                       </v-flex>
+                                       <v-flex class="text-xs-right" sm6 and-down>
+                                             <p class="mb-0 caption mono" style="color:#616161">PENJUALAN</p>
+                                             <p class="mb-1 text--primary"><span class="display-1 font-weight-black">{{total_penjualan}}</span> <span class="subtitle-2 font-weight-light">jt</span></p>
+                                       </v-flex>
+                                    </v-layout>
+                                    <v-divider style="border-color:#0D7F8B"></v-divider>
+                                    <v-layout mt-2 align-center row>
+                                       <v-flex sm6 d-flex>
+                                             <p class="mb-0">Bandung Raya</p>
+                                       </v-flex>
+                                       <v-flex sm6 class="text-xs-right" d-flex>
+                                             <p v-if="xtype === 'month'" class="mb-0">{{getmonthyear()}}</p>
+                                             <p v-if="xtype === 'day'" class="mb-0">{{getdaymonthyear()}}</p>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                     <v-layout row>
+                        <v-flex sm12 and-down>
+                           <v-card tile color="#F0EACF">
+                                 <v-card-title class="pa-1" style="background:#3F848F" >
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+                                       <v-flex class="text-xs-left" sm12 and-down>
+                                          <div id="chart_pasien">
+                                             <apexchart type="bar" height="210" :options="chartOptions_pasien" :series="series_pasien"></apexchart>
+                                          </div>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                     <v-layout class="pb-3" row>
+                        <v-flex sm12 and-down>
+                           <v-card tile color="#F0EACF">
+                                 <v-card-title class="pa-1" style="background:#3F848F" >
+                                 </v-card-title>
+                                 <v-card-text class="pt-1">
+                                    <v-layout row>
+                                       <v-flex class="text-xs-left" sm12 and-down>
+                                          <div id="chart_penjualan">
+                                             <apexchart type="bar" height="210" :options="chartOptions_penjualan" :series="series_penjualan"></apexchart>
+                                          </div>
+                                       </v-flex>
+                                    </v-layout>
+                                 </v-card-text>
+                           </v-card>
+                        </v-flex>
+                     </v-layout>
+                        
+                     </v-flex>
+                  </v-layout>
+               </v-container>
+            </v-content>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/one_global.js"></script>
+      <script>
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="../../libs/vendor/findindex_polyfill_mdn.js"><\/script>'
+        )
+    </script>
+
+    
+
+    <script src="../../libs/vendor/apexcharts.js"></script>
+    <script src="../../libs/vendor/vue-apexcharts.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   mounted() {
+      let self = this
+      self.$store.dispatch('sales/getdatas_riau',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_pajajaran',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_toha',{type:this.xtype})
+      self.$store.dispatch('sales/getdatas_cimahi',{type:this.xtype})
+         },
+         computed: {
+            xloading(){
+               var rtn = false
+               if(this.$store.state.sales.persetase_loading == 100)
+                  rtn = true
+               return rtn
+            },
+            xperseloading(){
+               return this.$store.state.sales.persetase_loading
+            },
+            series_pasien() {
+               var dt_pasien = this.$store.state.sales.data_pasien
+               return [{ name: 'pasien', data: dt_pasien }]
+            },
+            series_penjualan() {
+               var dt_penjualan= this.$store.state.sales.data_penjualan
+               return [{ name: 'penjualan', data: dt_penjualan }]
+            },
+            total_pasien() {
+               var dt_pasien = this.$store.state.sales.data_pasien
+               var tot = 0
+               dt_pasien.forEach(function(entry) {
+                  tot = tot + parseInt(entry)
+               })
+               return Number(tot)
+            },
+            total_penjualan() {
+               var dt_penjualan= this.$store.state.sales.data_penjualan
+               var tot = 0
+               dt_penjualan.forEach(function(entry) {
+                  tot = tot + parseFloat(entry)
+               })
+               return tot.toFixed(2)
+
+            },
+            chartOptions_pasien(){
+                  return  {
+                     colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa'],
+                     chart: {
+                     type: 'bar',
+                     height: 200,
+                     stacked: true
+                     },
+                     plotOptions: {
+                     bar: {
+                        horizontal: true,
+                     }
+                     },
+                     dataLabels: {
+                     enabled: true
+                     },
+                     xaxis: {
+                     categories: this.$store.state.sales.data_categories_pasien,
+                     labels: {
+                        formatter: function (val) {
+                           return val
+                        }
+                     },
+                     tooltip: {
+                           y: {
+                              formatter: function (val) {
+                                 return val
+                              }
+                           }
+                        }
+                     },
+                     title: {
+                     text: 'PASIEN PER CABANG'
+                     },
+                  }
+            },
+            chartOptions_penjualan(){
+               return {
+                  colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa'],
+                  chart: {
+                  type: 'bar',
+                  height: 200,
+                  stacked: true
+                  },
+                  plotOptions: {
+                  bar: {
+                     horizontal: true,
+                  }
+                  },
+                  dataLabels: {
+                  enabled: true
+                  },
+                  xaxis: {
+                  categories:this.$store.state.sales.data_categories_penjualan,
+                  labels: {
+                     formatter: function (val) {
+                        return val + "jt"
+                     }
+                  },
+                  tooltip: {
+                        y: {
+                           formatter: function (val) {
+                              return val + "jt"
+                           }
+                        }
+                     }
+                  },
+                  title: {
+                  text: 'PENJUALAN PER CABANG'
+                  },
+               }
+            }
+        },
+   data: {
+         xtype:'day',
+         types:['day','month']
+          
+          
+        },
+        methods:{
+           getmonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return n+' '+d.getFullYear()
+           },
+           getdaymonthyear(){
+            var d = new Date();
+            var month = new Array();
+            month[0] = "Januari";
+            month[1] = "Pebruari";
+            month[2] = "Maret";
+            month[3] = "April";
+            month[4] = "Mei";
+            month[5] = "Juni";
+            month[6] = "Juli";
+            month[7] = "Agustus";
+            month[8] = "September";
+            month[9] = "Oktober";
+            month[10] = "Nopember";
+            month[11] = "Desember";
+            var n = month[d.getMonth()]
+            return d.getDate()+' '+n+' '+d.getFullYear()
+           },
+           getdatasx(act){
+              console.log(act)
+
+               var old_type = this.xtype
+               console.log(old_type)
+               var idx = this.types.indexOf(old_type)
+               console.log(idx)
+               if(act === 'Left'){
+                  if(idx > 0)
+                     idx = idx - 1
+               }
+               if(act === 'Right'){
+                  if(idx < (this.types.length-1))
+                     idx = idx + 1;console.log(idx)
+               }
+
+               var type = this.types[idx]
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_data_penjualan',[])
+               this.$store.commit('sales/update_data_pasien',[])
+               this.$store.commit('sales/update_data_categories_penjualan',[])
+               this.$store.commit('sales/update_data_categories_pasien',[])
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            },
+            changeType(type){
+               this.xtype = type
+               console.log(type)
+               this.$store.commit('sales/update_persetase_loading',0)
+               this.$store.commit('sales/update_data_penjualan',[])
+               this.$store.commit('sales/update_data_pasien',[])
+               this.$store.commit('sales/update_data_categories_penjualan',[])
+               this.$store.commit('sales/update_data_categories_pasien',[])
+               this.$store.dispatch('sales/getdatas_riau',{type:type})
+               this.$store.dispatch('sales/getdatas_pajajaran',{type:type})
+               this.$store.dispatch('sales/getdatas_toha',{type:type})
+               this.$store.dispatch('sales/getdatas_cimahi',{type:type})
+            }
+        },
+   components: {
+      apexchart: VueApexCharts
+      }
+    })
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }
+   .v-toolbar__content, .v-toolbar__extension {
+    align-items: center;
+    display: flex;
+    padding: 0 ;
+}
+    </style>
+   </body>
+
+</html>

one-ui/management/one-sales/store.js

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