diff --git a/src/router.js b/src/router.js
index 6403897..c84551f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,6 +18,7 @@ import RolesConfig from './views/master-config/roles-config';
 import UsersConfig from './views/master-config/users-config';
 import PermissionsConfig from './views/master-config/permissions-config';
 import User from './views/user-page';
+import DetailPermissionsConfig from './views/master-config/permissions-config/detail-permissions-config';
 
 /* Master Template */
 import RksTemplateKontrak from './views/rks/rks-template-kontrak';
@@ -296,13 +297,22 @@ const router = new createRouter({
       component: UsersConfig
     },
     {
-      path: "/master-config/permissions-config",
+      path: "/master-config/permission-config",
       name: "permissions-config",
       meta: {
         requiresAuth: true,
         layout: defaultLayout
       },
-      component: PermissionsConfig
+      component: PermissionsConfig,
+    },
+    {
+      path: "/master-config/permission-config/:id",
+      name: "detail-permissions-config",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: DetailPermissionsConfig,
     },
     {
       path: "/rks-daftar",
diff --git a/src/views/master-config/permissions-config.vue b/src/views/master-config/permissions-config.vue
index f60a753..2953c27 100644
--- a/src/views/master-config/permissions-config.vue
+++ b/src/views/master-config/permissions-config.vue
@@ -12,9 +12,9 @@
             :column-auto-width="true">
             <DxRemoteOperations :group-paging="true" />
             <DxEditing
-                :allow-adding="true"
-                :allow-updating="true"
-                :allow-deleting="true"
+                :allow-adding="false"
+                :allow-updating="false"
+                :allow-deleting="false"
                 :use-icons="true"
                 mode="popup">
                 <DxTexts 
@@ -28,7 +28,7 @@
                 <DxForm label-location="top" :col-count="1">
                   <DxItem dataField="role" />
                   <DxItem dataField="keterangan" />
-                  <DxItem dataField="is_active" editor-type="dxCheckBox" />
+                  <DxItem dataField="isActive" editor-type="dxCheckBox" />
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -60,10 +60,13 @@
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
             <DxColumn data-field="role" caption="Role"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
-            <DxColumn data-field="is_active" caption="Status"></DxColumn>
+            <DxColumn data-field="isActive" caption="Status"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
-              <DxButton name="edit"/>
-              <DxButton name="delete"/>
+              <DxButton 
+                text="Detail"
+                icon="rename"
+                :on-click="handleDetail"
+            />
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Manajemen Permission..."/>
             <!--<DxExport
@@ -90,11 +93,13 @@ import DxDataGrid, {
   DxPaging,
   DxSearchPanel,
   DxToolbar,
-  DxTexts
+  DxTexts,
+  DxButton,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { useRouter } from 'vue-router';
 
-const URL = process.env.VUE_APP_ROOT_API+'/permission';
+const URL = process.env.VUE_APP_ROOT_API+'/roles';
 
 const customDataSource = new CustomStore({
   key: 'id',
@@ -102,6 +107,9 @@ const customDataSource = new CustomStore({
   load: () => {
       return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
       .then((response) => response.json())
+      .then(response => {
+        return response.data;
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
@@ -145,15 +153,22 @@ export default {
     DxPaging,
     DxSearchPanel,
     DxToolbar,
-    DxTexts
+    DxTexts,
+    DxButton
   },
     
   data() {
       return {
           //jsonUrl: URL,
           customDataSource,
+          router: useRouter()
       }
   },
+  methods: {
+    handleDetail() {
+      this.router.push({ name: 'detail-permissions-config', params: { id: '123'}})
+    }
+  }
 }
 </script>
 
diff --git a/src/views/master-config/permissions-config/detail-permissions-config.vue b/src/views/master-config/permissions-config/detail-permissions-config.vue
new file mode 100644
index 0000000..ec6e4fa
--- /dev/null
+++ b/src/views/master-config/permissions-config/detail-permissions-config.vue
@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Manajemen Permission</h3>
+    <p class="content-block">Manajemen User</p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <div class="header-detail">
+            <h4>Informasi Nama Role</h4>
+            <span>Nama Role A</span>
+          </div>
+          <DxDataGrid
+            ref="detail-data-grid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxToolbar>
+              <DxItem name="addRowButton" show-text="always" css-class="">
+                <DxTexts add-row="Tambah"></DxTexts>
+              </DxItem>
+            </DxToolbar>
+            <DxPaging :page-size="5" />
+            <DxPager
+              :visible="true"
+              :allowed-page-sizes="[5, 10, 50]"
+              display-mode="compact"
+              :show-page-size-selector="true"
+              :show-info="true"
+              :show-navigation-buttons="true"
+              info-text="Hal {0} dari {1} ({2} data)"
+            />
+            <DxColumn data-field="menu" caption="Menu"> </DxColumn>
+            <DxColumn data-field="sub-menu" caption="Sub Menu"> </DxColumn>
+            <DxColumn type="buttons" caption="Access">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Create">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Read">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Update">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Delete">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Manajemen User..."
+            />
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomStore from "devextreme/data/custom_store";
+import notify from "devextreme/ui/notify";
+import {
+  DxDataGrid,
+  DxPaging,
+  DxPager,
+  DxSearchPanel,
+  DxColumn,
+  DxButton,
+} from "devextreme-vue/data-grid";
+
+export default {
+  components: {
+    DxDataGrid,
+    DxPaging,
+    DxPager,
+    DxSearchPanel,
+    DxColumn,
+    DxButton,
+  },
+  setup() {
+    const URL = process.env.VUE_APP_ROOT_API + "/permission";
+
+    const dataSource = new CustomStore({
+      key: "id",
+
+      load: async () => {
+        await fetch(URL)
+          .then((response) => response.json())
+          .then((response) => response.data)
+          .catch((err) => {
+            if (err.code) {
+              notify(
+                {
+                  message: err.title,
+                  position: {
+                    my: "center top",
+                    at: "center top",
+                  },
+                },
+                "error",
+                3000
+              );
+            } else {
+              notify(
+                {
+                  message: "Data Berhasil Dibuat",
+                  position: {
+                    my: "center top",
+                    at: "center top",
+                  },
+                },
+                "success",
+                3000
+              );
+            }
+          });
+        return [
+          {
+            id: 1,
+            menu: "Manajemen A",
+            "sub-menu": "Sub Manajemen A",
+          },
+          {
+            id: 2,
+            menu: "Manajemen B",
+            "sub-menu": "Sub Manajemen B",
+          },
+        ];
+      },
+    });
+
+    return {
+      dataSource,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.float-rigth {
+  float: right;
+}
+
+.header-detail h4::before {
+  content: "";
+  width: 4px;
+  height: 24px;
+  background-color: #0996c2;
+  display: inline-block;
+  margin-right: 6px;
+  font-size: 18px;
+  color: #333333;
+  font-weight: 500;
+}
+
+.header-detail span {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #c4c4c4;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #21cd3c;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #21cd3c;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>
diff --git a/src/views/master-config/roles-config.vue b/src/views/master-config/roles-config.vue
index a9b7558..e0322c3 100644
--- a/src/views/master-config/roles-config.vue
+++ b/src/views/master-config/roles-config.vue
@@ -92,32 +92,64 @@ import DxDataGrid, {
   DxRequiredRule
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { ref } from "vue"
+import notify from 'devextreme/ui/notify';
 
 const URL = process.env.VUE_APP_ROOT_API+'/roles';
+const data = ref([])
 
 const dataSource = new CustomStore({
   key: 'id',
 
-  load: () => {
-      return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+  load: async () => {
+      return await fetch(URL+process.env.VUE_APP_PAGE_SIZE)
       .then((response) => response.json())
+      .then((response) => {
+        data.value = response.data;
+        return response.data;
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
   insert: (values) => {
-        return fetch(URL, {
+        fetch(URL, {
             method: "POST",
             body: JSON.stringify(values),
             headers: {
                 'Content-Type': 'application/json'
             }
+        }).then((resp) => {
+          return resp.json()
+        }).then(resp => {
+          if (resp.code) {
+            notify({
+              message: resp.title,
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'error', 3000);
+          } else {
+            notify({
+              message: 'Data Berhasil Dibuat',
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'success', 3000);
+          }
         });
     },
 
   update: (key, values) => {
+    const findData = data.value.find(item => item.id === key)
+    const payload = {
+      ...findData,
+      ...values
+    }
       return fetch(URL + "/" + encodeURIComponent(key), {
           method: "PUT",
-          body: JSON.stringify(values),
+          body: JSON.stringify(payload),
           headers: {
               'Content-Type': 'application/json'
           }
diff --git a/src/views/master-config/users-config.vue b/src/views/master-config/users-config.vue
index b7c2a5e..0a5039c 100644
--- a/src/views/master-config/users-config.vue
+++ b/src/views/master-config/users-config.vue
@@ -129,6 +129,9 @@ import {
   DxEmailRule
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { ref } from "vue"
+import notify from 'devextreme/ui/notify';
+import auth from '../../auth.js'
 
 const URL = process.env.VUE_APP_ROOT_API+'/users';
 const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
@@ -136,6 +139,8 @@ const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
 const URL_jabatan = process.env.VUE_APP_ROOT_API+'/jabatan';
 const URL_role = process.env.VUE_APP_ROOT_API+'/roles';
 
+const data = ref([])
+
 const instansiOptions = new CustomStore({
   key: 'id',
   
@@ -211,26 +216,58 @@ const dataSource = new CustomStore({
 
   load: () => {
       return fetch(URL)
-      .then((response) => response.json())
+      .then((response) => {
+        return response.json()
+      })
+      .then((response) => {
+        data.value = response.data
+        return response.data
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
-  insert: (values) => {
-        values.password = process.env.VUE_APP_DEFAULT_PASS;
-        //console.log(values);
-        return fetch(URL, {
+  insert: async (values) => {
+        await fetch(URL, {
             method: "POST",
-            body: JSON.stringify(values),
+            body: JSON.stringify({
+              ...values,
+              password : auth.encrypt(process.env.VUE_APP_DEFAULT_PASS)
+            }),
             headers: {
                 'Content-Type': 'application/json'
             }
-        });
+        }).then(res => {
+          return res.json()
+        }).then(res => {
+          if (res.code) {
+            notify({
+              message: res.title,
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'error', 3000);
+          } else {
+            notify({
+              message: 'Data Berhasil Dibuat',
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'success', 3000);
+          }
+        })
     },
 
   update: (key, values) => {
+    const findData = data.value.find(item => item.id === key)
+    const payload = {
+      ...findData,
+      ...values
+    }
       return fetch(URL + "/" + encodeURIComponent(key), {
           method: "PUT",
-          body: JSON.stringify(values),
+          body: JSON.stringify(payload),
           headers: {
               'Content-Type': 'application/json'
           }