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 ea3cfe0..2e43679 100644
--- a/src/views/drp/drp-pengadaan.vue
+++ b/src/views/drp/drp-pengadaan.vue
@@ -7,11 +7,37 @@
         <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">
-          <DxForm id="form">
-            
-          </DxForm>
           <DxPopup
             v-model:visible="isPopupDokumenPengadaan"
             :drag-enabled="false"
@@ -203,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';
@@ -365,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',
 
@@ -387,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
@@ -442,7 +502,8 @@ export default {
     DxFormat,
     DxMenu,
     DxButton,
-    PopUpPengadaanDokumen
+    PopUpPengadaanDokumen,
+    DxBox
   },
 
   methods: {
@@ -475,7 +536,8 @@ export default {
           jenispengadaan: jenispengadaanOptions,
           metodepengadaan: metodepengadaanOptions,
           strategipengadaan: strategipengadaanOptions,
-          isPopupDokumenPengadaan: false
+          isPopupDokumenPengadaan: false,
+          drpDetail: drpinfoDetail,
       }
   },
 }