diff --git a/src/components/icons/IconAttach.vue b/src/components/icons/IconAttach.vue
new file mode 100644
index 0000000..78e71e6
--- /dev/null
+++ b/src/components/icons/IconAttach.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="width: 14px; height: 14px; color: orange;">
+    <path d="M1.99984 13.6673C1.63317 13.6673 1.31939 13.5369 1.0585 13.276C0.79717 13.0147 0.666504 12.7007 0.666504 12.334V1.66732C0.666504 1.30065 0.79717 0.986651 1.0585 0.725318C1.31939 0.464429 1.63317 0.333984 1.99984 0.333984H7.99984L11.3332 3.66732V12.334C11.3332 12.7007 11.2027 13.0147 10.9418 13.276C10.6805 13.5369 10.3665 13.6673 9.99984 13.6673H1.99984ZM1.99984 12.334H9.99984V4.33398H7.33317V1.66732H1.99984V12.334ZM5.99984 11.6673C6.74428 11.6673 7.37495 11.4062 7.89184 10.884C8.40828 10.3618 8.6665 9.73398 8.6665 9.00065V6.33398H7.33317V9.00065C7.33317 9.36732 7.20539 9.68132 6.94984 9.94265C6.69428 10.2035 6.37762 10.334 5.99984 10.334C5.63317 10.334 5.31939 10.2035 5.0585 9.94265C4.79717 9.68132 4.6665 9.36732 4.6665 9.00065V5.33398C4.6665 5.23398 4.69984 5.15332 4.7665 5.09198C4.83317 5.0311 4.91095 5.00065 4.99984 5.00065C5.09984 5.00065 5.1805 5.0311 5.24184 5.09198C5.30273 5.15332 5.33317 5.23398 5.33317 5.33398V9.00065H6.6665V5.33398C6.6665 4.86732 6.50539 4.47287 6.18317 4.15065C5.86095 3.82843 5.4665 3.66732 4.99984 3.66732C4.53317 3.66732 4.13873 3.82843 3.8165 4.15065C3.49428 4.47287 3.33317 4.86732 3.33317 5.33398V9.00065C3.33317 9.73398 3.59428 10.3618 4.1165 10.884C4.63873 11.4062 5.2665 11.6673 5.99984 11.6673Z" fill="#DBD203"/>
+  </svg>
+</template>
+  
\ No newline at end of file
diff --git a/src/components/icons/IconDocDetail.vue b/src/components/icons/IconDocDetail.vue
new file mode 100644
index 0000000..419ec0d
--- /dev/null
+++ b/src/components/icons/IconDocDetail.vue
@@ -0,0 +1,5 @@
+<template>
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.3332 11.6673L11.3332 9.66732V11.0007H8.6665V12.334H11.3332V13.6673L13.3332 11.6673ZM7.19984 13.6673H1.99984C1.2665 13.6673 0.666504 13.0673 0.666504 12.334V1.66732C0.666504 0.933984 1.2665 0.333984 1.99984 0.333984H7.33317L11.3332 4.33398V7.73398C11.1332 7.66732 10.8665 7.66732 10.6665 7.66732C10.4665 7.66732 10.1998 7.66732 9.99984 7.73398V5.00065H6.6665V1.66732H1.99984V12.334H6.73317C6.79984 12.8007 6.99984 13.2673 7.19984 13.6673ZM3.33317 7.00065H8.6665V8.20065C8.59984 8.26732 8.53317 8.26732 8.4665 8.33398H3.33317V7.00065ZM3.33317 9.66732H6.6665V11.0007H3.33317V9.66732Z" fill="#0996C2"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/views/drp/drp-monitoring.vue b/src/views/drp/drp-monitoring.vue
index 3d162a6..b5a6dc1 100644
--- a/src/views/drp/drp-monitoring.vue
+++ b/src/views/drp/drp-monitoring.vue
@@ -1,13 +1,207 @@
 <template>
   <div>
-    <h2 class="content-block">Drp Monitoring</h2>
+    <h3 class="content-block main-title">Monitoring DRP</h3>
+    <p class="content-block">Monitoring DRP</p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
-        Put your content here
+        <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="Version"></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" :fixed="true">
+              <DxButton
+                text="Dokumen"
+                hint="Dokumen Pendukung DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+              <DxButton
+                text="Detil"
+                hint="Detil/Konten DRP"
+                :on-click="linkDetail">
+                <template #default>
+                  <IconDocChecked />
+                </template>
+              </DxButton>
+            </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>
 
-<style lang="scss">
-</style>
+<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";
+import IconEye from '../../components/icons/IconEye.vue';
+import IconDocChecked from '../../components/icons/IconDocChecked.vue';
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp/approval";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+      .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,
+    IconEye,
+    IconDocChecked
+  },
+  methods: {
+    linkDetail(e) {
+      location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
diff --git a/src/views/drp/drp-pengadaan.vue b/src/views/drp/drp-pengadaan.vue
index 04ff917..2e43679 100644
--- a/src/views/drp/drp-pengadaan.vue
+++ b/src/views/drp/drp-pengadaan.vue
@@ -7,7 +7,36 @@
         <DxItem text="Tahun DRP"></DxItem>
       </DxMenu></p>
     <div class="content-block">
+      
       <div class="dx-card responsive-paddings">
+        <div class="dx-card responsive-paddings" style="border: 0;">
+          <div>
+            <DxBox 
+              :height="30" direction="row"
+              witdh="100%">
+              <DxItem :ratio="2">
+                <div>
+                  <div class="dx-fieldset-header">Informasi Tahun DRP</div>
+                </div>
+              </DxItem>
+            </DxBox>
+            <DxBox direction="row"
+              witdh="100%">
+              <DxItem :ratio="1">
+                <div class="dx-field">
+                  <div class="dx-field-label">Tahun</div>
+                  <div class="dx-field-value-static" :data-source="drpDetail.tahun"></div>
+                </div>
+              </DxItem>
+              <DxItem :ratio="1">
+                <div class="dx-field">
+                  <div class="dx-field-label">Status DRP</div>
+                  <div class="dx-field-value-static">Penyusunan</div>
+                </div>
+              </DxItem>
+            </DxBox>
+          </div>
+        </div>
         <div id="app-container">
           <DxPopup
             v-model:visible="isPopupDokumenPengadaan"
@@ -91,7 +120,7 @@
                     :width="400"
                     :height="400"
                     title="Form DRP Pengadaan"
-                ></DxPopup>
+                  />
             </DxEditing>
             <DxToolbar>
                 <DxItem name="groupPanel" />
@@ -100,7 +129,7 @@
                   <DxTexts add-row="Tambah"></DxTexts>
                 </DxItem>
             </DxToolbar>
-            <DxPaging :page-size="5" />
+            <DxPaging :page-size="10" />
             <DxPager 
             :visible="true"
             :allowed-page-sizes="[5, 10, 50]" 
@@ -200,14 +229,16 @@ import {
   DxLookup,
   DxColumnFixing,
   DxFormat,
-  DxButton
+  DxButton,
 } from "devextreme-vue/data-grid";
 import DxMenu from 'devextreme-vue/menu';
+import { DxBox } from 'devextreme-vue/box';
 import CustomStore from "devextreme/data/custom_store";
 import 'whatwg-fetch';
 import PopUpPengadaanDokumen from './drp-pengadaan-dokumen.vue';
 
 const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/list';
+const URL_drp = process.env.VUE_APP_ROOT_API+'/drp/drp';
 const URL_metodepenyampaian = process.env.VUE_APP_ROOT_API+'/metodepenyampaian';
 const URL_supplypositioningmatrix = process.env.VUE_APP_ROOT_API+'/supplypositioningmatrix';
 const URL_unitinisiator = process.env.VUE_APP_ROOT_API+'/unitinisiator';
@@ -362,6 +393,37 @@ const strategipengadaanOptions = new CustomStore({
     }
   });
 
+const drpinfoDetail = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+    let uri = window.location.href.split('?');
+      let drpid = '';
+      if(uri.length == 2) {
+        let vars = uri[1].split('&');
+        let getVars = {};
+        let tmp = '';
+        vars.forEach(function(v) {
+          tmp = v.split('=');
+          if(tmp.length == 2)
+            getVars[tmp[0]] = tmp[1];
+        });
+        //console.log(getVars['drpid']);
+        drpid = getVars['drpid'];
+      }
+    
+      return fetch(URL_drp+'/'+drpid)
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_drp+'/' + key)
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});  
+
 const dataSource = new CustomStore({
   key: 'id',
 
@@ -384,6 +446,7 @@ const dataSource = new CustomStore({
       return fetch(URL+'/'+drpid)
       .then(response => response.json())
       .then(response => {
+        //console.log(response);
         return {
           data: response.data,
           totalCount: response.pagination.totalRecords
@@ -439,7 +502,8 @@ export default {
     DxFormat,
     DxMenu,
     DxButton,
-    PopUpPengadaanDokumen
+    PopUpPengadaanDokumen,
+    DxBox
   },
 
   methods: {
@@ -472,7 +536,8 @@ export default {
           jenispengadaan: jenispengadaanOptions,
           metodepengadaan: metodepengadaanOptions,
           strategipengadaan: strategipengadaanOptions,
-          isPopupDokumenPengadaan: false
+          isPopupDokumenPengadaan: false,
+          drpDetail: drpinfoDetail,
       }
   },
 }
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index ad4af69..9b1d316 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -57,12 +57,12 @@
                 </DxItem>
               </DxForm>
               <DxPopup
-                :hide-on-outside-click="true"
-                :show-title="true"
-                :width="400"
-                :height="400"
-                title="Form Penyusunan DRP">
-              </DxPopup>
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Tahun DRP"
+               ></DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -70,8 +70,6 @@
               <DxItem name="addRowButton" show-text="always" css-class="">
                 <DxTexts add-row="Tambah"></DxTexts>
               </DxItem>
-              <DxItem name="exportButton" />
-              <DxItem name="columnChooserButton" />
             </DxToolbar>
             <DxPaging :page-size="5" />
             <DxPager
@@ -107,22 +105,31 @@
             <DxColumn type="buttons" caption="Aksi">
               <DxButton
                 text="Dokumen"
-                icon="attach"
                 hint="Dokumen Pendukung DRP"
                 :on-click="linkDokumen"
-              />
+              >
+                <template #default>
+                  <IconAttach />
+                </template>
+              </DxButton>
               <DxButton
-                text="Detil"
-                icon="search"
-                hint="Detil/Konten DRP"
+                text="View"
+                hint="Detail DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+              <DxButton
+                text="Detail"
+                hint="Detail/Konten DRP"
                 :on-click="linkDetail"
-              />
-              <DxButton
-                text="Kirim"
-                icon="movetofolder"
-                hint="Kirim DRP"
-                :on-click="linkKirim"
-              />
+              >
+                <template #default>
+                  <IconDocDetail />
+                </template>
+              </DxButton>
             </DxColumn>
             <DxColumn type="adaptive" :width="50">
               <DxButton hint="detail" icon="copy" />
@@ -162,6 +169,10 @@ import DxDataGrid, {
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
 import Popup, { DxToolbarItem } from 'devextreme-vue/popup';
+import IconAttach from '../../components/icons/IconAttach.vue';
+import IconEye from '../../components/icons/IconEye.vue';
+import IconDocDetail from '../../components/icons/IconDocDetail.vue';
+
 
 import PopUpUploadDokumenPendukung from './drp-upload-dokumen-pendukung.vue'
 import http from "@/utils/http";
@@ -247,6 +258,9 @@ export default {
     DxToolbarItem,
     Popup,
     PopUpUploadDokumenPendukung,
+    IconAttach,
+    IconEye,
+    IconDocDetail
   },
   methods: {
     linkDokumen(e) {
diff --git a/src/views/master-config/roles-config.vue b/src/views/master-config/roles-config.vue
index e0322c3..7efb29d 100644
--- a/src/views/master-config/roles-config.vue
+++ b/src/views/master-config/roles-config.vue
@@ -89,7 +89,8 @@ import DxDataGrid, {
   DxSearchPanel,
   DxToolbar,
   DxTexts,
-  DxRequiredRule
+  DxRequiredRule,
+  DxButton,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
 import { ref } from "vue"
@@ -178,6 +179,7 @@ export default {
     DxToolbar,
     DxTexts,
     DxRequiredRule,
+    DxButton,
   },
   
   data() {