diff --git a/src/store/jenis-dokumen.js b/src/store/jenis-dokumen.js
new file mode 100644
index 0000000..3117dc6
--- /dev/null
+++ b/src/store/jenis-dokumen.js
@@ -0,0 +1,7 @@
+const jenisDokumens = [
+  { id: 2, name: "Dokumen Pendukung" },
+  { id: 1, name: "Dokumen RKAP" },
+  { id: 3, name: "Dokumen Pendukung Data Teknis" },
+];
+
+export default jenisDokumens;
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index f9ae004..3b5cbd3 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -16,8 +16,10 @@
             container=".dx-viewport"
             :title="popupTitle"
           >
-            <DxPosition at="center" my="center" collision="fit" />
-            <DxToolbarItem
+            <template #content>
+              <PopUpTabel :drpId="selectedDrpId" :drpTahun="selectedDrpTahun"/>
+            </template>
+            <DxToolbarItem 
               widget="dxButton"
               toolbar="top"
               locate-in-menu="always"
@@ -190,12 +192,9 @@ import DxDataGrid, {
   DxPopup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import {
-  DxPopup as Popup,
-  DxToolbarItem,
-  DxPosition,
-} from "devextreme-vue/popup";
-import PopupUploadDokumen from './drp-penyusunan-dokumen.vue'
+import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
+
+import PopUpTabel from './drp-popup-tabel.vue'
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -277,8 +276,7 @@ export default {
     DxPopup,
     Popup,
     DxToolbarItem,
-    DxPosition,
-    PopupUploadDokumen,
+    PopUpTabel,
   },
   methods: {
     linkDokumen($event) {
diff --git a/src/views/drp/drp-popup-tabel.vue b/src/views/drp/drp-popup-tabel.vue
new file mode 100644
index 0000000..24a975b
--- /dev/null
+++ b/src/views/drp/drp-popup-tabel.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>Tahun DRP</div>
+  <div>{{ drpTahun }}</div>
+
+  <DxScrollView>
+    <TabelUploadFile
+      :drpId="props.drpId"
+      :drpTahun="props.drpTahun"
+      title="Dokumen RKAP"
+      :dataSource="dataSourceRKAP"
+      jenisDokumenId="1"
+    />
+    <TabelUploadFile
+      :drpId="props.drpId"
+      :drpTahun="props.drpTahun"
+      title="Dokumen Pendukung"
+      :dataSource="dataSourcePendukung"
+      jenisDokumenId="2"
+    />
+  </DxScrollView>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { DxScrollView } from "devextreme-vue/scroll-view";
+
+import TabelUploadFile from "./drp-upload-dokumen-popup/tabel-upload-file.vue";
+import DataSource from "devextreme/data/data_source";
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
+
+const props = defineProps(["drpId", "drpTahun"]);
+
+function isNotEmpty(value) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+const dataSourceRKAP = new DataSource({
+  key: "id",
+  load(loadOptions) {
+    let params = "?";
+    [
+      "skip",
+      "take",
+      "requireTotalCount",
+      "requireGroupCount",
+      "sort",
+      "filter",
+      "totalSummary",
+      "group",
+      "groupSummary",
+    ].forEach((i) => {
+      if (i in loadOptions && isNotEmpty(loadOptions[i])) {
+        params += `${i}=${JSON.stringify(loadOptions[i])}&`;
+      }
+    });
+    params = params.slice(0, -1);
+    return fetch(`${URL}/${props.drpId}/${params}`, {
+      headers: {
+        Authorization: `Bearer ${window.localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        return {
+          data: data.dataDrpDokumen,
+          totalCount: data.dataDrpDokumen.length,
+        };
+      })
+      .catch(() => {
+        throw new Error("Data Loading Error");
+      });
+  },
+});
+
+const dataSourcePendukung = new DataSource({
+  key: "id",
+  load(loadOptions) {
+    let params = "?";
+    [
+      "skip",
+      "take",
+      "requireTotalCount",
+      "requireGroupCount",
+      "sort",
+      "filter",
+      "totalSummary",
+      "group",
+      "groupSummary",
+    ].forEach((i) => {
+      if (i in loadOptions && isNotEmpty(loadOptions[i])) {
+        params += `${i}=${JSON.stringify(loadOptions[i])}&`;
+      }
+    });
+    params = params.slice(0, -1);
+    return fetch(`${URL}/${props.drpId}/${params}`, {
+      headers: {
+        Authorization: `Bearer ${window.localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        return {
+          data: data.dataDrpDokumenPendukung,
+          totalCount: data.dataDrpDokumenPendukung.length,
+        };
+      })
+      .catch(() => {
+        throw new Error("Data Loading Error");
+      });
+  },
+});
+</script>
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
new file mode 100644
index 0000000..c43633f
--- /dev/null
+++ b/src/views/drp/drp-upload-dokumen-popup/popup-upload-file.vue
@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <form
+      ref="popupUploadDokumenRkapRef"
+      method="post"
+      :action="uploadUrl"
+      enctype="multipart/form-data"
+      @submit.prevent="handleSubmit"
+    >
+      <input type="hidden" name="drpId" :value="drpId" />
+      <input type="hidden" name="jenisDokumenId" :value="jenisDokumenId" />
+      <div class="dx-field">
+        <DxFileUploader
+          name="file"
+          label-text=""
+          accept="*"
+          upload-mode="useForm"
+        />
+      </div>
+      <div class="dx-field">
+        <div class="dx-field-label">Keterangan</div>
+        <DxTextBox name="keterangan" value="" class="dx-field-value" />
+      </div>
+      <DxButton
+        class="button"
+        text="Simpan"
+        type="success"
+        :use-submit-behavior="true"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import jenisDokumens from "@/store/jenis-dokumen.js";
+import { DxTextBox } from "devextreme-vue/text-box";
+import { DxButton } from "devextreme-vue/button";
+import { DxFileUploader } from "devextreme-vue/file-uploader";
+import http from "@/utils/http";
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
+const URL_UPLOAD = process.env.VUE_APP_ROOT_API + "/drp/upload/dokumen";
+
+export default {
+  name: "PopupUploadDokumenRkap",
+
+  components: {
+    DxTextBox,
+    DxButton,
+    DxFileUploader,
+  },
+
+  props: ["drpId", "drpTahun", "dokumenData", "method", "jenisDokumenId"],
+
+  data() {
+    return {
+      uploadUrl: `${URL_UPLOAD}`,
+      jenisDokumens,
+      filenameEdit: "",
+    };
+  },
+
+  updated() {
+    this.filenameEdit = this.$props.dokumenData?.filename;
+    console.log("sda", this.$props.dokumenData);
+  },
+
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.uploadFile();
+      this.saveDocument();
+    },
+
+    saveDocument() {
+      if (this.$props.method === "post") {
+        const form = this.$refs.popupUploadDokumenRkapRef;
+
+        const filename =
+          new Date().getTime().toString() + "_" + form.file.files[0]?.name;
+
+        const data = {
+          id: this.$props.drpId,
+          approveStatus: "Penyusunan",
+          isApprove: false,
+          dataDrpDokumen: [
+            {
+              jenisDokumenId: form.jenisDokumenId.value,
+              filename: filename,
+              keterangan: form.keterangan.value,
+            },
+          ],
+        };
+
+        if (form.file.files[0] !== undefined) {
+          http
+            .post(URL, data)
+            .then((res) => res.json())
+            .then((json) => {
+              console.log(json, "success");
+
+              this.$emit("close");
+            })
+            .catch((e) => {
+              console.error(e);
+            });
+        }
+      }
+
+      if (this.$props.method === "put") {
+        const form = this.$refs.popupUploadDokumenRkapRef;
+
+        const data = {
+          drpId: this.$props.drpId,
+          jenisDokumenId: form.jenisDokumenId.value,
+          keterangan: form.keterangan.value,
+          file: form.file.files[0],
+          filename: this.filenameEdit,
+        };
+        http
+          .put(URL_UPLOAD, data, {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          })
+          .then((res) => res.json())
+          .then((json) => {
+            console.log("updated: ", json);
+            console.log("data upload", data);
+
+            this.$emit("close");
+          })
+          .catch((e) => {
+            console.error(e);
+          });
+      }
+    },
+
+    uploadFile() {
+      if (this.$props.method === "post") {
+        const form = this.$refs.popupUploadDokumenRkapRef;
+
+        const formData = new FormData();
+
+        const file = form.file?.files[0];
+
+        formData.append("drpId", form.drpId.value);
+        formData.append("jenisDokumenId", form.jenisDokumenId.value);
+        formData.append("keterangan", form.keterangan.value);
+        formData.append("file", file);
+
+        if (file !== undefined) {
+          http
+            .post(this.uploadUrl, formData)
+            .then((res) => res.json())
+            .then((json) => {
+              console.log(json);
+            })
+            .catch((e) => {
+              alert("fail");
+              console.error(e);
+            });
+        } else alert('masukkan data')
+      }
+      if (this.$props.method === "put") {
+        const form = this.$refs.popupUploadDokumenRkapRef;
+
+        const formData = new FormData();
+
+        const file = form.file.files[0];
+
+        formData.append("drpId", form.drpId.value);
+        formData.append("jenisDokumenId", form.jenisDokumenId.value);
+        formData.append("keterangan", form.keterangan.value);
+        formData.append("file", file);
+        formData.append("filename", this.filenameEdit);
+
+        http
+          .put(this.uploadUrl, formData)
+          .then((res) => res.json())
+          .then((json) => {
+            console.log(json);
+          })
+          .catch((e) => {
+            alert("fail");
+            console.error(e);
+          });
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/drp/drp-upload-dokumen-popup/tabel-upload-file.vue b/src/views/drp/drp-upload-dokumen-popup/tabel-upload-file.vue
new file mode 100644
index 0000000..12a9e2f
--- /dev/null
+++ b/src/views/drp/drp-upload-dokumen-popup/tabel-upload-file.vue
@@ -0,0 +1,201 @@
+<template>
+  <h4>{{ title }}<span style="color: red">*</span></h4>
+
+  <div style="display: flex; justify-content: end">
+    <DxButton
+      styling-mode="contained"
+      type="default"
+      @click="addDokumen"
+      icon="plus"
+      text="Tambah"
+    />
+  </div>
+
+  <DxPopup
+    v-model:visible="isFormOpen"
+    :drag-enabled="false"
+    :hide-on-outside-click="true"
+    :show-close-button="true"
+    :show-title="true"
+    :title="title"
+    :width="600"
+    :height="450"
+  >
+    <PopupUploadFile
+      :drpId="drpId"
+      :drpTahun="drpTahun"
+      :dokumenData="dokumenData"
+      @close="isFormOpen = false"
+      :method="method"
+      :jenisDokumenId="jenisDokumenId"
+    />
+  </DxPopup>
+
+  <DxPopup
+    v-model:visible="isRemoveConfirmationDialogOpen"
+    :drag-enabled="false"
+    :hide-on-outside-click="true"
+    :show-close-button="true"
+    :show-title="true"
+    :title="'Hapus ' + title + '?'"
+    :width="400"
+    :height="300"
+  >
+    <template #content> Hapus {{title}}? </template>
+    <DxToolbarItem
+      widget="dxButton"
+      :options="removeDokumenButtonOptions"
+      location="after"
+      toolbar="bottom"
+    />
+    <DxToolbarItem
+      widget="dxButton"
+      :options="cancelRemoveButtonOptions"
+      location="after"
+      toolbar="bottom"
+    />
+  </DxPopup>
+
+  <DxDataGrid
+    ref="datagrid"
+    :data-source="dataSource"
+    :remote-operations="true"
+    :column-auto-width="true"
+  >
+    <DxColumn
+      data-field="jenisDokumenId"
+      caption="Jenis Dokumen"
+      alignment="left"
+    >
+      <DxLookup
+        :data-source="jenisDokumens"
+        display-expr="name"
+        value-expr="id"
+        :search-enabled="true"
+      />
+    </DxColumn>
+    <DxColumn data-field="filename" caption="File" />
+    <DxColumn data-field="keterangan" caption="Keterangan" />
+    <DxColumn type="buttons" caption="Aksi" :fixed="true">
+      <DxDataButton
+        text="Edit"
+        :hint="'Edit ' + title"
+        icon="edit"
+        @click="editDokumen"
+      />
+      <DxDataButton
+        text="Delete"
+        :hint="'Hapus ' + title"
+        icon="trash"
+        @click="removeDokumen"
+      />
+    </DxColumn>
+    <DxToolbar>
+      <DxItem name="searchPanel" location="before" />
+      <DxItem name="addRowButton" show-text="always" css-class="">
+        <DxTexts add-row="Tambah"></DxTexts>
+      </DxItem>
+    </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)"
+    />
+  </DxDataGrid>
+</template>
+
+<script setup>
+import http from "@/utils/http";
+import jenisDokumens from "@/store/jenis-dokumen";
+import {
+  DxColumn,
+  DxDataGrid,
+  DxItem,
+  DxLookup,
+  DxPager,
+  DxPaging,
+  DxTexts,
+  DxToolbar,
+  DxButton as DxDataButton,
+} from "devextreme-vue/data-grid";
+import PopupUploadFile from "./popup-upload-file.vue";
+import DxPopup, { DxToolbarItem } from "devextreme-vue/popup";
+import DxButton from "devextreme-vue/button";
+import { defineProps, ref, watch, onUpdated } from "vue";
+
+const props = defineProps([
+  "drpId",
+  "drpTahun",
+  "title",
+  "dataSource",
+  "jenisDokumenId",
+]);
+
+const URL_UPLOAD = process.env.VUE_APP_ROOT_API + "/drp/upload/dokumen";
+
+const datagrid = ref(null);
+const isRemoveConfirmationDialogOpen = ref(false);
+const isFormOpen = ref(false);
+const dokumenData = ref();
+const method = ref();
+
+const addDokumen = () => {
+  isFormOpen.value = !isFormOpen.value;
+  method.value = "post";
+};
+
+const editDokumen = (e) => {
+  dokumenData.value = e.row.data;
+  isFormOpen.value = !isFormOpen.value;
+  method.value = "put";
+};
+
+const removeDokumenButtonOptions = ref({
+  text: "Hapus",
+  async onClick() {
+    await http.delete(URL_UPLOAD, {
+      filename: dokumenData.value.filename,
+    });
+    isRemoveConfirmationDialogOpen.value = false;
+  },
+});
+
+const removeDokumen = (e) => {
+  isRemoveConfirmationDialogOpen.value = true;
+  dokumenData.value = e.row.data;
+  datagrid.value.instance.refresh();
+};
+
+const cancelRemoveButtonOptions = ref({
+  text: "Batal",
+  onClick() {
+    isRemoveConfirmationDialogOpen.value = false;
+  },
+});
+
+watch(
+  () => props.drpId,
+  () => {
+    datagrid.value.instance.refresh();
+  }
+);
+
+onUpdated(() => {
+  datagrid.value.instance.refresh();
+});
+</script>
+
+<style scoped>
+a.dx-link.dx-icon-edit.dx-link-icon {
+  color: orange !important;
+}
+
+a.dx-link.dx-icon-trash.dx-link-icon {
+  color: red !important;
+}
+</style>