diff --git a/src/views/drp/drp-pengadaan.vue b/src/views/drp/drp-pengadaan.vue
index cd051a6..da1583a 100644
--- a/src/views/drp/drp-pengadaan.vue
+++ b/src/views/drp/drp-pengadaan.vue
@@ -1,13 +1,278 @@
 <template>
   <div>
-    <h2 class="content-block">Drp Pengadaan</h2>
+    <h3 class="content-block main-title">DRP Pengadaan</h3>
+    <p class="content-block">Detil / Konten 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"
+            @exporting="onExporting">
+            <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">
+                  <DxItem dataField="nomor">
+                    <DxRequiredRule message="Nomor PRK" />
+                  </DxItem>
+                  <DxItem dataField="metodePenyampaianId"/>
+                  <DxItem dataField="namaPengadaan">
+                    <DxRequiredRule message="Nama Pengadaan" />
+                  </DxItem>
+                  <DxItem dataField="supplyPositioningMatrixId"/>
+                  <DxItem dataField="unitInisiatorId"/>
+                  <DxItem dataField="jenisKontrakId"/>
+                  <DxItem dataField="sumberDanaId"/>
+                  <DxItem dataField="jenisPengadaanId"/>
+                  <DxItem dataField="metodePengadaanId"/>
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="800"
+                    :height="600"
+                    title="Form DRP Pengadaan">
+                </DxPopup>
+            </DxEditing>
+            <DxToolbar>
+                <DxItem name="groupPanel" />
+                <DxItem name="searchPanel" location="before"/>
+                <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 
+            :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="nomor" caption="Nomor PRK"></DxColumn>
+            <DxColumn data-field="namaPengadaan" caption="Nama Pengadaan"></DxColumn>
+            <DxColumn data-field="lokasiId" caption="Lokasi Pengadaan">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="unitInisiatorId" caption="Divisi / Unit Inisiator Pengadaan"></DxColumn>
+            <DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)"></DxColumn>
+            <DxColumn data-field="sumberDanaId" caption="Sumber Dana"></DxColumn>
+            <DxColumn data-field="supplyPositioningMatrixId" caption="Supply Positioning Matrix"></DxColumn>
+            <DxColumn data-field="metodePengadaanId" caption="Metode Pengadaan"></DxColumn>
+            <DxColumn data-field="metodePenyampaianId" caption="Metode Penyampaian Dokumen Penawaran"></DxColumn>
+            <DxColumn data-field="jenisKontrakId" caption="Jenis Perjanjian/Kontrak"></DxColumn>
+            <DxColumn data-field="strategiPengadaanId" caption="Strategi Pengadaan"></DxColumn>
+            <DxColumn data-field="rencanaTanggal" caption="Rencana Pelaksanaan Pengadaan"></DxColumn>
+            <DxColumn data-field="targetTanggal" caption="Target COD"></DxColumn>
+            <DxColumn data-field="hpe" caption="Nilai HPE (Rp)"></DxColumn>
+            <DxColumnFixing :enabled="true" />
+            <DxColumn :allow-fixing="false" type="buttons" caption="Aksi">
+              <DxButton name="edit"/>
+              <DxButton name="delete"/>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + data.component.pageIndex() + 1 }}</DxText>
+            </template>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Pengadaan..."/>
+            <!--<DxExport
+              :enabled="true"
+              :formats="['xlsx', 'pdf']"
+              :allow-export-selected-data="true"
+            />-->
+          </DxDataGrid>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
+<script> 
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxRequiredRule,
+  DxLookup,
+  DxColumnFixing
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+import { Workbook } from 'exceljs';
+import { saveAs } from 'file-saver-es';
+import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
+import { jsPDF } from 'jspdf';
+import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
+
+//const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan';
+const URL = process.env.VUE_APP_ROOT_API+'/jenisanggaran';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+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,
+    DxRequiredRule,
+    DxLookup,
+    DxColumnFixing
+  },
+  methods: {
+    onExporting(e) {
+      e.cancel = true;
+
+      switch (e.format) {
+        case "pdf": {
+          const doc = new jsPDF();
+          exportDataGridToPDF({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+          }).then(() => {
+            doc.save('Jenispengadaan.pdf');
+          });
+        }
+        break;
+
+        case "xlsx": {
+          const workbook = new Workbook();
+          const worksheet = workbook.addWorksheet('DRP Pengadaan');
+
+          exportDataGridToExcel({
+            component: e.component,
+            worksheet: worksheet,
+            autoFilterEnabled: true,
+          }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer) => {
+              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
+            });
+          });
+        }
+        break;
+      }
+      
+    },
+    cloneIconClick(e) {
+      e.event.preventDefault();
+    }
+  },
+  
+  data() {
+      return {
+          //jsonUrl: URL,
+          dataSource,
+          instansis: instansiOptions,
+      }
+  },
+}
+</script>
+
 <style lang="scss">
 </style>
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index bc75018..919ca93 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -137,7 +137,12 @@
             :allow-column-reordering="true"
             :column-auto-width="true"
           >
-            <DxEditing :allow-adding="true" :use-icons="true" mode="popup">
+          <DxEditing
+                :allow-adding="true"
+                :allow-updating="true"
+                :allow-deleting="true"
+                :use-icons="true"
+                mode="popup">
               <DxTexts
                 add-row="Tambah"
                 edit-row="Ubah"
@@ -215,7 +220,7 @@
                 text="Kirim"
                 icon="movetofolder"
                 hint="Kirim DRP"
-                :on-click="linkDetail"
+                :on-click="linkKirim"
               />
             </DxColumn>
             <DxColumn type="adaptive" :width="50">
@@ -349,15 +354,18 @@ export default {
       this.isShowButton = true;
       console.log("drp: ", this.dataDrp);
     },
-    linkDetail($event) {
-      this.popupVisible = true;
-      this.popupTitle = "Lihat Dokumen Pendukung";
-      this.dataDrp = $event.row.values.target;
-      this.isShowButton = false;
+    linkDetail() {
+      location.href='#/drp/drp-pengadaan';
     },
-    linkKirim : function() {
-        location.href='#/drp/drp-pengadaan';
-    }
+    linkKirim($event) {
+      console.log("event: ", $event.row.values);
+      this.popupVisible = true;
+      this.popupTitle = "Review & Approval DRP";
+      this.dataDrp = $event.row.values;
+      this.isShowButton = true;
+      console.log("drp: ", this.dataDrp);
+    },
+   
   },
   data() {
     return {