diff --git a/src/utils/http.js b/src/utils/http.js
new file mode 100644
index 0000000..146e032
--- /dev/null
+++ b/src/utils/http.js
@@ -0,0 +1,52 @@
+const http = {
+  async request(method, url, data, headers = {}) {
+    try {
+      const defaultHeaders = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      }
+
+      headers = Object.assign(defaultHeaders, headers);
+
+      const options = {
+        method: method,
+        headers,
+      }
+
+      if (data instanceof FormData) {
+        options.body = data;
+        delete options.headers['Accept'];
+        delete options.headers['Content-Type'];
+      } else {
+        options.body = JSON.stringify(data);
+      }
+
+      if (method === 'GET') {
+        delete options.body;
+      }
+
+      return await fetch(url, options)
+
+    } catch (e) {
+      console.error(e)
+    }
+  },
+
+  async get(url, headers = {}) {
+    return await this.request('GET', url, null, headers);
+  },
+
+  async post(url, data, headers) {
+    return await this.request('POST', url, data, headers);
+  },
+
+  async put(url, data, headers) {
+    return await this.request('PUT', url, data, headers);
+  },
+
+  async delete(url, data, headers) {
+    return await this.request('DELETE', url, data, headers);
+  },
+}
+
+export default http;
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index 3b5cbd3..931dbc1 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -5,58 +5,34 @@
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div id="app-container">
-          <Popup
-            v-model:visible="popupVisible"
+          <DxPopup
+            v-model:visible="isPopupUploadDokumenPendukung"
             :drag-enabled="false"
             :hide-on-outside-click="true"
-            :show-close-button="false"
+            :show-close-button="true"
             :show-title="true"
-            :width="914"
-            :height="672"
-            container=".dx-viewport"
-            :title="popupTitle"
+            @showing="onShowing"
+            title="Upload Dokumen Pendukung"
           >
             <template #content>
               <PopUpTabel :drpId="selectedDrpId" :drpTahun="selectedDrpTahun"/>
             </template>
             <DxToolbarItem 
               widget="dxButton"
-              toolbar="top"
-              locate-in-menu="always"
-              :options="closeButtonOptions"
-              :visible="!isShowButton"
-            />
-            <DxToolbarItem
-              widget="dxButton"
-              toolbar="bottom"
-              location="after"
-              :options="closeButtonOptions"
-              v-model:visible="isShowButton"
-            />
-            <DxToolbarItem
-              widget="dxButton"
-              toolbar="bottom"
-              location="after"
               :options="saveButtonOptions"
-              v-model:visible="isShowButton"
+              location="after"
+              toolbar="bottom"
             />
-            <template #content>
-              <div class="dx-fieldset">
-                <div class="dx-field">
-                  <div class="dx-field-label">Tahun DRP</div>
-                  <div class="dx-field-value">
-                    {{ year }}
-                  </div>
-                </div>
-              </div>
-              <PopupUploadDokumen :id="passId" />
-            </template>
-          </Popup>
-
+            <DxToolbarItem 
+              widget="dxButton" 
+              :options="cancelButtonOptions" 
+              location="after"
+              toolbar="bottom"
+            />
+          </DxPopup>
           <DxDataGrid
             ref="currDataGrid"
             :data-source="dataSource"
-            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
           >
@@ -80,20 +56,6 @@
                   <DxRequiredRule message="Tahun harus diisi" />
                 </DxItem>
               </DxForm>
-              <DxPopup
-                :hide-on-outside-click="true"
-                :show-title="true"
-                :width="400"
-                :height="400"
-                title="Form Jenis Pengadaan"
-              >
-                <DxPosition
-                  at="center"
-                  my="center"
-                  v-model:of="positionOf"
-                  collision="fit"
-                />
-              </DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -189,7 +151,6 @@ import DxDataGrid, {
   DxButton,
   DxRequiredRule,
   // DxLookup,
-  DxPopup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
 import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
@@ -274,52 +235,48 @@ export default {
     DxRequiredRule,
     // DxLookup,
     DxPopup,
-    Popup,
     DxToolbarItem,
     PopUpTabel,
   },
   methods: {
-    linkDokumen($event) {
-      // console.log($event);
-      this.year = $event.row.data.tahun
-      this.passId = $event.row.key
-      this.popupVisible = true;
-      this.popupTitle = "Upload Dokumen Pendukung";
-      this.isShowButton = true;
+    linkDokumen(e) {
+      this.isPopupUploadDokumenPendukung = !this.isPopupUploadDokumenPendukung;
+      this.selectedDrpId = e.row.data.id;
+      this.selectedDrpTahun = e.row.data.tahun;
     },
     linkDetail(e) {
       location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
     },
     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);
+    },
+    onChangeUploadFile($event) {
+      this.fileNames = $event.value;
+    },
+    onShowing() {
+      //
     },
   },
   data() {
     return {
       //jsonUrl: URL,
-      passId: '',
       dataSource,
-      year: "200",
-      popupVisible: false,
-      popupTitle: "",
-      isShowButton: true,
+      dropdown: "",
+      isPopupUploadDokumenPendukung: false,
+      selectedDrpId: null,
+      selectedDrpTahun: null,
+      fileNames: [],
       saveButtonOptions: {
-        text: "Simpan",
-        onClick: ($event) => {
-          this.popupVisible = false;
-          console.log("simpan", $event);
-        },
+        text: 'Simpan',
+        onClick: function(e) { 
+          console.log(e);
+        }
       },
-      closeButtonOptions: {
-        text: "Batal",
+      cancelButtonOptions: {
+        text: 'Batalkan',
         onClick: () => {
-          this.popupVisible = false;
-        },
+          this.isPopupUploadDokumenPendukung = false;
+        }
       },
     };
   },
diff --git a/src/views/drp/drp-upload-dokumen-popup/popup-upload-file.vue b/src/views/drp/drp-upload-dokumen-popup/popup-upload-file.vue
index c43633f..c249f42 100644
--- a/src/views/drp/drp-upload-dokumen-popup/popup-upload-file.vue
+++ b/src/views/drp/drp-upload-dokumen-popup/popup-upload-file.vue
@@ -62,7 +62,6 @@ export default {
 
   updated() {
     this.filenameEdit = this.$props.dokumenData?.filename;
-    console.log("sda", this.$props.dokumenData);
   },
 
   methods: {
@@ -125,8 +124,7 @@ export default {
           })
           .then((res) => res.json())
           .then((json) => {
-            console.log("updated: ", json);
-            console.log("data upload", data);
+            console.log(json);
 
             this.$emit("close");
           })