diff --git a/test/vuex/acc-one-map-jasa-coa/api/api.js b/test/vuex/acc-one-map-jasa-coa/api/api.js
new file mode 100644
index 0000000..60c50a9
--- /dev/null
+++ b/test/vuex/acc-one-map-jasa-coa/api/api.js
@@ -0,0 +1,40 @@
+const URL = "/one-api/map/ServiceCoaMapping";
+
+async function request(endpoint, params) {
+    try {
+        const resp = await axios.post(URL + endpoint, params)
+        if (resp.status !== 200) {
+            throw new Error(resp.statusText);
+        }
+        return resp.data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function getListItemJasa(params) {
+    return request("/getListItemJasa", params);
+}
+
+export async function getListCoa(params) {
+    return request("/getListCoa", params);
+}
+
+export async function getListServiceMapping(params) {
+    return request("/getListServiceMapping", params);
+}
+
+export async function insertJasaCoaMapping(params) {
+    return request("/insertJasaCoaMapping", params);
+}
+
+export async function updateJasaCoaMapping(params) {
+    return request("/updateJasaCoaMapping", params);
+}
+
+export async function deleteJasaCoaMapping(params) {
+    return request("/deleteJasaCoaMapping", params);
+}
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
index 447352c..13ba6c8 100644
--- a/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
+++ b/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
@@ -6,9 +6,9 @@
         </v-toolbar>
         <v-card class="pa-2">
             <v-layout row wrap>
-                <v-flex xs4 pa-1>
+                <v-flex xs12 pa-1>
                     <v-text-field v-model="keyword" hide-details outline
-                        label="Cari" placeholder="Nama Jasa"></v-text-field>
+                        label="Cari" placeholder="Nama Item atau Jasa"></v-text-field>
                 </v-flex>
             </v-layout>
         </v-card>
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
index f669761..88254d3 100644
--- a/test/vuex/acc-one-map-jasa-coa/components/right-side.vue
+++ b/test/vuex/acc-one-map-jasa-coa/components/right-side.vue
@@ -1,47 +1,50 @@
 <template>
     <div>
         <v-toolbar color="primary" dark>
-            <v-toolbar-title>Detail Account Jasa {{  }}</v-toolbar-title>
+            <v-toolbar-title>Detail Account Jasa {{ }}</v-toolbar-title>
             <v-spacer></v-spacer>
+            <v-btn v-show="!edit_state" icon @click="actEditState()">
+                <v-icon>edit</v-icon>
+            </v-btn>
         </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-layout v-if="!edit_state" row wrap>
+                <v-flex xs12 pa-1>
+                    <h2>Setting Akun Jasa</h2>
+                </v-flex>
+                <v-flex xs6 pa-1>
+                    <strong>Akun Item Jasa: </strong> <br>
+                    {{ "-" }} <br>
+                    {{ "-" }} <br>
+                </v-flex>
+                <v-flex xs6 pa-1>
+                    <strong>Akun Item Jasa Hutang: </strong> <br>
+                    {{ "-" }} <br>
+                    {{ "-" }} <br>
+                </v-flex>
+            </v-layout>
+            <v-layout v-else row wrap>
+                <v-flex xs12 pa-1 text-xs-right>
+                    <v-btn @click="edit_state = false" color="error" class="white--text">
+                        Batal
+                    </v-btn>
+                    <v-btn @click="simpanEdit()" color="primary" class="white--text">
+                        Simpan
+                    </v-btn>
                 </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: { },
+    components: {},
     mounted() { },
     data() {
         return {
             keyword: "",
+            edit_state: false,
             headers: [
                 {
                     text: "NO", align: "center", sortable: false, value: "nomor",
@@ -54,8 +57,15 @@ module.exports = {
             ]
         }
     },
-    computed: { },
-    methods: { },
-    watch: { }
+    computed: {},
+    methods: {
+        actEditState() {
+            this.edit_state = true
+        },
+        simpanEdit() {
+            this.edit_state = false
+        }
+    },
+    watch: {}
 }
 </script>
diff --git a/test/vuex/acc-one-map-jasa-coa/index.php b/test/vuex/acc-one-map-jasa-coa/index.php
index f49eabd..312c898 100644
--- a/test/vuex/acc-one-map-jasa-coa/index.php
+++ b/test/vuex/acc-one-map-jasa-coa/index.php
@@ -50,7 +50,7 @@
                     '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'),
+                    'one-right': httpVueLoader('./components/right-side.vue')
                 }
             })
         </script>