diff --git a/test/vuex/acc-one-map-jasa-coa/components/left-side.vue b/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
new file mode 100644
index 0000000..447352c
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title>Daftar Jasa</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs4 pa-1>
+                    <v-text-field v-model="keyword" hide-details outline
+                        label="Cari" placeholder="Nama Jasa"></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <v-card class="pa-2 mt-2">
+            <v-data-table :headers="headers" :items="list_coaservice.records"
+                hide-actions class="elevation-1">
+                <template v-slot:items="props">
+                    <tr @click="selectjasa(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
+                        <td class="text-xs-center pa-2">
+                            {{ props.index + 1 }}
+                        </td>
+                        <td class="text-xs-left pa-2">
+                            {{ props.item.M_ItemDesc }}
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider class="my-1"></v-divider>
+            <div class="pa-2 mt-1 text-xs-centar">
+                <v-pagination v-model="currpage" :length="pagelength" :total-visible="5"></v-pagination>
+            </div>
+        </v-card>
+
+        <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
+            {{ snackbar.mssg }}
+            <v-btn class="pa-2" round flat @click="snackbar.state = false">Tutup</v-btn>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: { },
+    mounted() { },
+    data() {
+        return {
+            keyword: "",
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "nomor",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAMA JASA", align: "center", sortable: false, value: "name",
+                    width: "80%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        snackbar: {
+            get() {
+                return this.$store.state.service.snackbar
+            },
+            set(val) {
+                this.$store.commit("service/update_snackbar", val)
+            }
+        },
+        currpage: {
+            get() {
+                return this.$store.state.service.currpage
+            },
+            set(val) {
+                this.$store.commit("service/update_currpage", val)
+            }
+        },
+        selected_jasa: {
+            get() {
+                return this.$store.state.service.selected_jasa
+            },
+            set(val) {
+                this.$store.commit("service/update_selected_jasa", val)
+            }
+        },
+        list_coaservice() {
+            return this.$store.state.service.list_coaservice
+        },
+        pagelength() {
+            const total = this.list_coaservice.total;
+            if (total === undefined || total <= 1) return 1;
+            return Math.ceil(total / 10);
+        }
+    },
+    methods: {
+        selectjasa(item) {
+            this.selected_jasa = item
+        },
+        isSelected(item) {
+            return item.M_ItemID == this.selected_jasa.M_ItemID
+        }
+    },
+    watch: {
+        keyword(newval, oldval) {
+            if (newval == oldval) return;
+        }
+    }
+}
+</script>
diff --git a/test/vuex/acc-one-map-jasa-coa/components/right-side.vue b/test/vuex/acc-one-map-jasa-coa/components/right-side.vue
new file mode 100644
index 0000000..f669761
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/components/right-side.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title>Detail Account Jasa {{  }}</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs4 pa-1>
+                    <v-text-field v-model="keyword" hide-details outline
+                        label="Cari" placeholder="Nama Jasa"></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <v-card class="pa-2 mt-2">
+            <v-data-table :headers="headers" :items="list_coaservice.records"
+                hide-actions class="elevation-1">
+                <template v-slot:items="props">
+                    <tr @click="selectjasa(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
+                        <td class="text-xs-center pa-2">
+                            {{ props.index + 1 }}
+                        </td>
+                        <td class="text-xs-left pa-2">
+                            {{ props.item.M_ItemDesc }}
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider class="my-1"></v-divider>
+            <div class="pa-2 mt-1 text-xs-centar">
+                <v-pagination v-model="currpage" :length="pagelength" :total-visible="5"></v-pagination>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: { },
+    mounted() { },
+    data() {
+        return {
+            keyword: "",
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "nomor",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAMA JASA", align: "center", sortable: false, value: "name",
+                    width: "80%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: { },
+    methods: { },
+    watch: { }
+}
+</script>
diff --git a/test/vuex/acc-one-map-jasa-coa/index.php b/test/vuex/acc-one-map-jasa-coa/index.php
new file mode 100644
index 0000000..f49eabd
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/index.php
@@ -0,0 +1,63 @@
+<!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">
+        <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">
+        <title>ONE | coa mapping jasa</title>
+    </head>
+    <body>
+        <div v-cloak id="app">
+            <v-app id="smartApp">
+                <one-navbar></one-navbar>
+                <v-content style="background: #F5E8DF!important">
+                    <v-container fluid fill-height class="px-1 py-2">
+                        <v-flex xs4 class="left" fill-height pa-1>
+                            <one-left></one-left>
+                        </v-flex>
+                        <v-flex xs8 class="right" fill-height pa-1>
+                            <one-right></one-right>
+                        </v-flex>
+                    </v-container>
+                </v-content>
+                <one-footer></one-footer>
+            </v-app>
+        </div>
+
+        <!-- Vendor -->
+        <script src="../../../libs/vendor/moment.min.js"></script>
+        <script src="../../../libs/vendor/numeral.min.js"></script>
+        <script src="../../../libs/vendor/moment-locale-id.js"></script>
+        <script src="../../../libs/vendor/lodash.js"></script>
+        <script src="../../../libs/vendor/axios.min.js"></script>
+        <script src="../../../libs/vendor/vue.js"></script>
+        <script src="../../../libs/vendor/vuex.js"></script>
+        <script src="../../../libs/vendor/vuetify.js"></script>
+        <script src="../../../libs/vendor/httpVueLoader.js"></script>
+        <script src="../../../libs/one_global.js"></script>
+
+        <script type="module">
+            import { store } from "./store.js";
+            window.store = store;
+            new Vue({
+                store,
+                el: "#app",
+                methods: {},
+                components: {
+                    'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                    'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                    'one-left': httpVueLoader('./components/left-side.vue'),
+                    'one-right': httpVueLoader('./components/right-side.vue'),
+                }
+            })
+        </script>
+        <style>
+            [v-cloak] {
+                display: true
+            }
+        </style>
+    </body>
+</html>
diff --git a/test/vuex/acc-one-map-jasa-coa/modules/service.js b/test/vuex/acc-one-map-jasa-coa/modules/service.js
new file mode 100644
index 0000000..c35268b
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/modules/service.js
@@ -0,0 +1,26 @@
+export default {
+    namespaced: true,
+    state: {
+        snackbar: {
+            state: false,
+            mssg: "",
+            color: "error"
+        },
+        loading_process: false,
+        list_coaservice: []
+    },
+    mutations: {
+        update_snackbar(state, val) {
+            state.snackbar = val
+        },
+        update_loading_process(state, val) {
+            state.loading_process = val
+        },
+        update_list_coaservice(state, val) {
+            state.list_coaservice = val
+        }
+    },
+    actions: {
+
+    }
+}
diff --git a/test/vuex/acc-one-map-jasa-coa/store.js b/test/vuex/acc-one-map-jasa-coa/store.js
new file mode 100644
index 0000000..5884ab2
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/store.js
@@ -0,0 +1,12 @@
+import system from "../../../apps/modules/system/system.js";
+import service from "./modules/service.js";
+
+export const store = new Vuex.Store({
+    modules: {
+        system: system,
+        service: service
+    },
+    state: {},
+    mutations: {},
+    actions: {}
+})