diff --git a/src/app-navigation.js b/src/app-navigation.js
index 08d8c1a..c8fa602 100644
--- a/src/app-navigation.js
+++ b/src/app-navigation.js
@@ -119,6 +119,12 @@ export default [
       {
         text: 'Approval DRP',
         path: '/drp/drp-approval',
+        items: [
+          {
+            text: 'List Rekomendasi',
+            path: '/drp/drp-approval/list-rekomendasi'
+          }
+        ]
       }, 
       {
         text: 'Revisi DRP',
diff --git a/src/router.js b/src/router.js
index 0391e32..e8e71f1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -24,6 +24,8 @@ import RksDaftar from './views/rks-daftar';
 
 /* DRP */
 import DrpPenyusunan from './views/drp/drp-penyusunan';
+import DrpApproval from './views/drp/drp-approval'
+import RecomendationList from './views/drp/recomendation-list.vue'
 
 /* General */
 import auth from "./auth";
@@ -293,7 +295,24 @@ const router = new createRouter({
       },
       component: DrpPenyusunan
     },
-
+    {
+      path: "/drp/drp-approval",
+      name: "drp-approval",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: DrpApproval
+    },
+    {
+      path: "/drp/drp-approval/list-rekomendasi",
+      name: "list-rekomendasi",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: RecomendationList
+    },
 
   ],
   history: createWebHashHistory()
diff --git a/src/views/drp/drp-approval.vue b/src/views/drp/drp-approval.vue
new file mode 100644
index 0000000..374090c
--- /dev/null
+++ b/src/views/drp/drp-approval.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Approval DRP</h3>
+    <p class="content-block">Approval DRP </p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxEditing
+              :allow-adding="true"
+              :allow-updating="true"
+              :allow-deleting="true"
+              :use-icons="true"
+              mode="popup"
+            >
+              <DxTexts
+                add-row="Tambah"
+                edit-row="Ubah"
+                delete-row="Hapus"
+                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                save-row-changes="Simpan"
+                cancel-row-changes="Batal"
+              ></DxTexts>
+              <DxForm label-location="top" :col-count="1">
+                <DxItem dataField="tahun">
+                  <DxRequiredRule message="Tahun harus diisi" />
+                </DxItem>
+              </DxForm>
+              <DxPopup
+                :hide-on-outside-click="true"
+                :show-title="true"
+                :width="400"
+                :height="400"
+                title="Form Approval  DRP "
+              >
+              </DxPopup>
+            </DxEditing>
+            <DxToolbar>
+              <DxItem name="groupPanel" />
+              <DxItem name="searchPanel" location="before" />
+              <DxItem name="exportButton" />
+              <DxItem name="columnChooserButton" />
+            </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)"
+            />
+            <DxFilterRow :visible="false" />
+            <DxColumn
+              cell-template="row-cell-template"
+              caption="No"
+              :width="45"
+            ></DxColumn>
+            <DxColumn data-field="tahun" caption="Tahun DRP"></DxColumn>
+            <DxColumn
+              data-field="approveStatus"
+              caption="Status Approve"
+              editor-type="dxCheckBox"
+            ></DxColumn>
+            <DxColumn data-field="" caption="VP Pengadaan"></DxColumn>
+            <DxColumn data-field="" caption="Komite Value for Money"></DxColumn>
+            <DxColumn data-field="" caption="Direktur Utama"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit" />
+              <DxButton
+                text="Detail"
+                icon="file"
+                hint="Detail"
+                :on-click="linkDetail"
+              />
+            </DxColumn>
+            <DxColumn type="adaptive" :width="50">
+              <DxButton hint="detail" icon="copy" />
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + 1 }}</DxText>
+            </template>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Approval DRP..."
+            />
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxButton,
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL + "?size=100")
+      .then((response) => response.json())
+      .then((response) => {
+        console.log("drp:", response.data);
+        return {
+          data: response.data,
+          totalCount: response.pagination.totalRecords,
+        };
+      })
+      .catch(() => {
+        throw new Error("Terdapat kesalahan memuat data");
+      });
+  },
+
+  insert: (values) => {
+    return fetch(URL, {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  remove: (key) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+export default {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    DxTexts,
+    DxButton,
+  },
+  methods: {
+    linkDetail: function () {
+      location.href = "master-data/strategi-pengadaan";
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
diff --git a/src/views/drp/recomendation-list.vue b/src/views/drp/recomendation-list.vue
new file mode 100644
index 0000000..8be2df3
--- /dev/null
+++ b/src/views/drp/recomendation-list.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Approval DRP</h3>
+    <p class="content-block">Approval DRP > List Rekomendasi </p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxEditing
+              :allow-adding="true"
+              :allow-updating="true"
+              :allow-deleting="true"
+              :use-icons="true"
+              mode="popup"
+            >
+              <DxTexts
+                add-row="Tambah"
+                edit-row="Ubah"
+                delete-row="Hapus"
+                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                save-row-changes="Simpan"
+                cancel-row-changes="Batal"
+              ></DxTexts>
+              <DxForm label-location="top" :col-count="1">
+                <DxItem dataField="tahun">
+                  <DxRequiredRule message="Tahun harus diisi" />
+                </DxItem>
+              </DxForm>
+              <DxPopup
+                :hide-on-outside-click="true"
+                :show-title="true"
+                :width="400"
+                :height="400"
+                title="Form Penyusunan DRP"
+              >
+              </DxPopup>
+            </DxEditing>
+            <DxToolbar>
+              <DxItem name="groupPanel" />
+              <DxItem name="searchPanel" location="before" />
+              <DxItem name="exportButton" />
+              <DxItem name="columnChooserButton" />
+            </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)"
+            />
+            <DxFilterRow :visible="false" />
+            <DxColumn
+              cell-template="row-cell-template"
+              caption="No"
+              :width="45"
+            ></DxColumn>
+            <DxColumn data-field="" caption="Nama Pengadaan"></DxColumn>
+            <DxColumn
+              data-field=""
+              caption="Approval"
+              editor-type="dxCheckBox"
+            ></DxColumn>
+            <DxColumn data-field="" caption="Status"></DxColumn>
+            <DxColumn data-field="" caption="Tanggal Status"></DxColumn>
+            <DxColumn data-field="" caption="Catatan Rekomendasi"></DxColumn>
+            <DxColumn data-field="" caption="Tanggal Rekomendasi"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit" />
+              <DxButton name="delete" />
+              <DxButton
+                text="Detail"
+                icon="increaseindent"
+                hint="Detail"
+                :on-click="linkDetail"
+              />
+            </DxColumn>
+            <DxColumn type="adaptive" :width="50">
+              <DxButton hint="detail" icon="copy" />
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + 1 }}</DxText>
+            </template>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Penyusunan DRP..."
+            />
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxButton,
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL + "?size=100")
+      .then((response) => response.json())
+      .then((response) => {
+        return {
+          data: response.data,
+          totalCount: response.pagination.totalRecords,
+        };
+      })
+      .catch(() => {
+        throw new Error("Terdapat kesalahan memuat data");
+      });
+  },
+
+  insert: (values) => {
+    return fetch(URL, {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  remove: (key) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+export default {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    DxTexts,
+    DxButton,
+  },
+  methods: {
+    linkDetail: function () {
+      location.href = "master-data/strategi-pengadaan";
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/master-config/roles-config.vue b/src/views/master-config/roles-config.vue
index 5997c8e..5b89f23 100644
--- a/src/views/master-config/roles-config.vue
+++ b/src/views/master-config/roles-config.vue
@@ -61,9 +61,9 @@
             info-text="Hal {0} dari {1} ({2} data)" />
             <DxFilterRow :visible="false" />
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
-            <DxColumn data-field="role" caption="Role"></DxColumn>
+            <DxColumn data-field="roles" caption="Role"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
-            <DxColumn data-field="isActive" caption="Status"></DxColumn>
+            <DxColumn data-field="isactive" caption="Status"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit"/>
               <DxButton name="delete"/>
diff --git a/src/views/master-config/users-config.vue b/src/views/master-config/users-config.vue
index 33fb7d7..023f28d 100644
--- a/src/views/master-config/users-config.vue
+++ b/src/views/master-config/users-config.vue
@@ -130,7 +130,7 @@ const instansiOptions = new CustomStore({
       return fetch(URL_instansi+'?size=1000')
       .then((response) => response.json())
       .then(response => {
-        console.log(response.data);
+        console.log('instansi:',response.data);
         return {
           data: response.data
         };