diff --git a/src/api/scholarship/api.scholarship.ts b/src/api/scholarship/api.scholarship.ts
index c921010..1bc081c 100644
--- a/src/api/scholarship/api.scholarship.ts
+++ b/src/api/scholarship/api.scholarship.ts
@@ -1,9 +1,11 @@
 import env from "../index";
 
 const development = `${env.API_URI}/development`;
-
+const developmentScholarshipReport = `${env.API_URI}/development/report/scholarship`;
+const developmentSalaryFile = `${env.API_URI}/salary/file`;
 
 export default {
+  developmentScholarshipReport,
   developmentScholarship: `${development}/scholarship`,
-
+  developmentSalaryFile: (name: string, group: string, id: string) => `${developmentSalaryFile}/${name}/${group}/${id}`,
 };
diff --git a/src/modules/09_scholarship/components/Dialog/DialogReturn.vue b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
new file mode 100644
index 0000000..68bc4f5
--- /dev/null
+++ b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const id = ref<string>(route.params.id.toLocaleString());
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+} = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+
+const governmentDate = ref<any>(null);
+const graduatedDate = ref<any>(null);
+const isGraduated = ref<any>(null);
+const graduatedReason = ref<string>("");
+
+const bookNumber = ref<string>("");
+const bookDate = ref<any>(null);
+const governmentEndDate = ref<any>(null);
+
+function close() {
+  modal.value = false;
+
+  bookNumber.value = "";
+  bookDate.value = null;
+  governmentDate.value = null;
+  governmentEndDate.value = null;
+
+  isGraduated.value = null;
+  graduatedDate.value = null;
+  graduatedReason.value = "";
+}
+
+function onSubmit() {
+  if (isGraduated.value == null) {
+    dialogMessageNotify($q, "กรุณาเลือกสำเร็จการศึกษาตามที่หลักสูตรกำหนด");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      http
+        .put(config.API.developmentScholarship + `/user/detail/${id.value}`, {
+          bookNumber: bookNumber.value,
+          bookDate: bookDate.value,
+          governmentDate: governmentDate.value,
+          governmentEndDate: governmentEndDate.value,
+          isGraduated: isGraduated.value,
+          graduatedDate: isGraduated.value == 'true' ? graduatedDate.value : null,
+          graduatedReason: isGraduated.value == 'false' ? graduatedReason.value : null,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      showLoader();
+      http
+        .get(config.API.developmentScholarship + `/user/detail/${id.value}`)
+        .then((res) => {
+          const data = res.data.result;
+          bookNumber.value = data.bookNumber;
+          bookDate.value = data.bookDate;
+          governmentDate.value = data.governmentDate;
+          governmentEndDate.value = data.governmentEndDate;
+          isGraduated.value = data.isGraduated.toLocaleString();
+          graduatedDate.value = data.graduatedDate;
+          graduatedReason.value = data.graduatedReason;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card flat style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="รายงานตัวกลับเข้ารับราชการ" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                label="เลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ"
+                v-model="bookNumber"
+                outlined
+                lazy-rules
+                dense
+                hide-bottom-space
+                :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ'}`,
+                            ]"
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="bookDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="bookDate ? date2Thai(bookDate) : null"
+                    :label="`${'หนังสือรายงานตัวกลับเข้าปฏิบัติราชการลงวันที่'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกหนังสือรายงานตัวกลับเข้าปฏิบัติราชการลงวันที่'}`,
+                            ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentDate ? date2Thai(governmentDate) : null
+                    "
+                    :label="`${'วันที่กลับเข้าปฏิบัติราชการ'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกวันที่กลับเข้าปฏิบัติราชการ'}`,
+                            ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentEndDate ? date2Thai(governmentEndDate) : null
+                    "
+                    :label="`${' วันสิ้นสุดภาระผูกพัน'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอก วันสิ้นสุดภาระผูกพัน'}`,
+                            ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="true"
+              label="สำเร็จการศึกษาตามที่หลักสูตรกำหนด"
+            />
+
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="false"
+              label="เสร็จสิ้นการศึกษาตามที่หลักสูตรกำหนดแล้วแต่ยังไม่สำเร็จการศึกษา"
+            />
+            <div v-if="isGraduated == 'true'" class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="graduatedDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      graduatedDate ? date2Thai(graduatedDate) : null
+                    "
+                    :label="`${'ตั้งแต่ (วันที่)'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกตั้งแต่ (วันที่)'}`,
+                            ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div v-if="isGraduated == 'false'" class="col-12">
+              <q-input
+                v-model="graduatedReason"
+                type="textarea"
+                dense
+                outlined
+                hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอก เนื่องจาก'}`,
+                            ]"
+                label="เนื่องจาก"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 50206c1..6e228f4 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -1,20 +1,36 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-
+import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataOptions } from '@/modules/09_scholarship/interface/index/Main'
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+
+import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
+import genReport from "@/plugins/genreport";
+
+const fileList = ref<any[]>();
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError ,date2Thai} = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  calculateDurationYmd,
+  dialogConfirm,
+  success,
+} = mixin;
 const router = useRouter();
 
+const dialogReturn = ref<boolean>(false);
+
+const documentFile = ref<any>(null);
 const id = ref<string>(route.params.id.toLocaleString());
 const budgetSourceOp = ref<DataOptions[]>([
   { id: "BKK", name: "งบประมาณ กทม." },
@@ -23,6 +39,7 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "SUBSIDY", name: "เงินอุดหนุน" },
   { id: "OTHER", name: "เงินอื่น ๆ" },
 ]);
+
 const dataPerson = reactive({
   id: "",
   citizenId: "",
@@ -32,9 +49,7 @@ const dataPerson = reactive({
   level: "",
   positionSide: "",
   org: "-",
-
   planType: "",
-
   scholarshipYear: null,
   budgetSource: "",
   budgetApprove: null,
@@ -44,8 +59,70 @@ const dataPerson = reactive({
   bookApproveDate: null,
   useOfficialTime: false,
   changeDetail: "",
+  scholarshipType: "", //เลือกประเภททุน
+  fundType: "", //ประเภททุน
+  contractNo: "", //เลขที่สัญญา
+  contractDate: null, //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: null, //รายงานตัวกลับวันที่
+
+  degreeLevel: "", //ระดับปริญญา
+  course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: "", //สาขาวิชา/สาขา
+  faculty: "", //คณะ
+  educationalInstitution: "", //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: null, //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: null, //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: "", //สถานที่ไปศึกษาดูงาน
+  studyTopic: "", //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: null, //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: null, //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: "", //ประเทศที่ไปศึกษาดูงาน
+  studyAbroadTopic: "", //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
 });
 
+const dataGuarantor = reactive({
+  id: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+});
+
+const scholarshipTypeOp = ref<DataOptions[]>([
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+]);
+
+const fundTypeOp = ref<DataOptions[]>([
+  { id: "FUND1", name: "ทุน 1 (ก)" },
+  { id: "FUND2", name: "ทุน 1 (ข)" },
+  { id: "FUND3", name: "ทุน 1 (ค)" },
+  { id: "FUND4", name: "ทุน 2" },
+  { id: "FUND5", name: "ทุนส่วนตัว" },
+]);
+
 function getDetail() {
   showLoader();
   http
@@ -61,15 +138,51 @@ function getDetail() {
       dataPerson.org = data.org; // รอ API
       dataPerson.planType = data.planType;
 
-      dataPerson.scholarshipYear = data.scholarshipYear 
-      dataPerson.budgetSource = data.budgetSource 
-      dataPerson.budgetApprove = data.budgetApprove 
-      dataPerson.isNoUseBudget = data.isNoUseBudget 
-      dataPerson.bookNo = data.bookNo 
-      dataPerson.bookNoDate = data.bookNoDate 
-      dataPerson.bookApproveDate = data.bookApproveDate 
-      dataPerson.useOfficialTime = data.useOfficialTime 
-      dataPerson.changeDetail = data.changeDetail 
+      dataPerson.scholarshipYear = data.scholarshipYear;
+      dataPerson.budgetSource = data.budgetSource;
+      dataPerson.budgetApprove = data.budgetApprove;
+      dataPerson.isNoUseBudget = data.isNoUseBudget;
+      dataPerson.bookNo = data.bookNo;
+      dataPerson.bookNoDate = data.bookNoDate;
+      dataPerson.bookApproveDate = data.bookApproveDate;
+      dataPerson.useOfficialTime = data.useOfficialTime;
+      dataPerson.changeDetail = data.changeDetail;
+
+      dataPerson.scholarshipType = data.scholarshipType;
+      dataPerson.fundType = data.fundType;
+
+      dataPerson.contractNo = data.contractNo;
+      dataPerson.contractDate = data.contractDate;
+      dataPerson.reportBackNo = data.reportBackNo;
+      dataPerson.reportBackNoDate = data.reportBackNoDate;
+      dataPerson.reportBackDate = data.reportBackDate;
+
+      dataGuarantor.citizenId = data.guarantorCitizenId;
+      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
+      dataGuarantor.prefix = data.guarantorPrefix;
+      dataGuarantor.firstName = data.guarantorFirstName;
+      dataGuarantor.lastName = data.guarantorLastName;
+      dataGuarantor.position = data.position;
+      dataGuarantor.type = data.posTypeguarantorName;
+      dataGuarantor.level = data.posLevelguarantorName;
+      dataGuarantor.positionSide = data.guarantorPosExecutive;
+
+      dataPerson.degreeLevel = data.degreeLevel;
+      dataPerson.course = data.course;
+      dataPerson.field = data.field;
+      dataPerson.faculty = data.faculty;
+      dataPerson.educationalInstitution = data.educationalInstitution;
+      dataPerson.startDate = data.startDate;
+      dataPerson.endDate = data.endDate;
+      dataPerson.studyPlace = data.studyPlace;
+      dataPerson.studyTopic = data.studyTopic;
+      dataPerson.studyStartDate = data.studyStartDate;
+      dataPerson.studyEndDate = data.studyEndDate;
+      dataPerson.studyCountry = data.studyCountry;
+      dataPerson.studyAbroadTopic = data.studyAbroadTopic;
+      dataPerson.studyAbroadStartDate = data.studyAbroadStartDate;
+      dataPerson.studyAbroadEndDate = data.studyAbroadEndDate;
+      dataPerson.totalPeriod = data.totalPeriod;
     })
     .catch((e) => {
       messageError($q, e);
@@ -79,8 +192,199 @@ function getDetail() {
     });
 }
 
-onMounted(() => {
-  getDetail();
+function updateTotalPeriod(
+  startDate: any,
+  endDate: any,
+  toDo: boolean = false
+) {
+  if (!toDo && startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    dataPerson.totalPeriod = calculateDurationYmd(start, end);
+  }
+}
+
+function changeStartDate(type: string) {
+  switch (type) {
+    case "startDate":
+      if (dataPerson?.startDate !== null && dataPerson?.endDate !== null) {
+        const startDate = new Date(dataPerson.startDate);
+        const endDate = new Date(dataPerson?.endDate);
+        if (startDate > endDate) {
+          dataPerson.endDate = null;
+        }
+      }
+      break;
+
+    case "studyStartDate":
+      if (
+        dataPerson?.studyStartDate !== null &&
+        dataPerson?.studyEndDate !== null
+      ) {
+        const startDate = new Date(dataPerson.studyStartDate);
+        const endDate = new Date(dataPerson?.studyEndDate);
+        if (startDate > endDate) {
+          dataPerson.studyEndDate = null;
+          if (dataPerson.scholarshipType === "NOABROAD") {
+            dataPerson.totalPeriod = "";
+          }
+        } else {
+          if (dataPerson.scholarshipType === "NOABROAD") {
+            dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+          }
+        }
+      }
+      break;
+
+    case "studyAbroadStartDate":
+      if (
+        dataPerson?.studyAbroadStartDate !== null &&
+        dataPerson?.studyAbroadEndDate !== null
+      ) {
+        const startDate = new Date(dataPerson.studyAbroadStartDate);
+        const endDate = new Date(dataPerson?.studyAbroadEndDate);
+        if (startDate > endDate) {
+          dataPerson.studyAbroadEndDate = null;
+        } else {
+          dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onOpenReturn() {
+  dialogReturn.value = true;
+}
+
+function onDownload() {
+  showLoader();
+  http
+    .get(config.API.developmentScholarshipReport + `/${id.value}`)
+    .then((res) => {
+      const dataList = res.data.result;
+      genReport(dataList, "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.developmentSalaryFile(
+            "ระบบพัฒนาบุคคล",
+            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+            id.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getDetail();
+      getFile();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+function getFile() {
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      )
+    )
+    .then((res) => {
+      const dataFile = res.data;
+      fileList.value = dataFile[0];
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function downloadFile(file: any) {
+  showLoader();
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      ) + `/${file.fileName}`
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  await getDetail();
+  await getFile();
 });
 </script>
 <template>
@@ -101,11 +405,80 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
+          <q-toolbar class="q-px-none q-pb-sm">
+            <div class="row q-col-gutter-x-sm full-width">
+              <div class="col-2 q-pa-none">
+                <q-btn
+                  class="full-width"
+                  unelevated
+                  color="edit"
+                  label="แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ"
+                  @click="onOpenReturn"
+                >
+                  <q-tooltip>แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ</q-tooltip>
+                </q-btn>
+              </div>
+              <div class="col-2">
+                <q-btn
+                  class="full-width"
+                  unelevated
+                  color="primary"
+                  label="ดาวน์โหลดฟอร์มต้นแบบ"
+                  @click="onDownload"
+                >
+                  <q-tooltip>ดาวน์โหลดฟอร์มต้นแบบ</q-tooltip>
+                </q-btn>
+              </div>
+              <q-space />
+              <div v-if="fileList == null" class="col-3">
+                <q-file
+                  for="inputFiles"
+                  class="col-12"
+                  outlined
+                  dense
+                  v-model="documentFile"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                  accept=".pdf,.xlsx,.docx,.png,.jpg"
+                  clearable
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      size="14px"
+                      v-if="documentFile"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      icon="mdi-upload"
+                      @click="clickUpload(documentFile)"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+              <div v-else class="col-2">
+                <q-btn
+                  color="primary"
+                  class="full-width"
+                  label="ดาวน์โหลดไฟล์เอกสาร"
+                  unelevated
+                  @click="downloadFile(fileList)"
+                >
+                  <q-tooltip>ดาวน์โหลดไฟล์เอกสาร</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </q-toolbar>
           <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
             <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
               ข้อมูลราชการ
             </div>
             <q-separator />
+
             <q-card-section>
               <div class="row">
                 <div class="col">
@@ -147,7 +520,7 @@ onMounted(() => {
               </div>
             </q-card-section>
           </q-card>
-          <div class="row q-col-gutter-sm q-mt-md">
+          <div class="row q-col-gutter-sm q-my-md">
             <div class="col-12">
               <q-radio
                 v-model="dataPerson.planType"
@@ -195,7 +568,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                 ]"
@@ -219,7 +591,6 @@ onMounted(() => {
                 outlined
                 class="inputgreen"
                 label="แหล่งงบประมาณ"
-                hide-bottom-space
                 v-model="dataPerson.budgetSource"
                 :options="budgetSourceOp"
                 option-label="name"
@@ -234,10 +605,9 @@ onMounted(() => {
             </div>
             <div class="col-3">
               <q-input
-              readonly
+                readonly
                 dense
                 outlined
-                hide-bottom-space
                 class="inputgreen"
                 v-model="dataPerson.budgetApprove"
                 label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
@@ -266,7 +636,6 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="dataPerson.bookNo"
                 label="เลขที่หนังสิออนุมัติ"
-                hide-bottom-space
                 :rules="[
               (val: string) =>
                 !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
@@ -298,7 +667,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่'}`,
@@ -341,7 +709,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
@@ -377,7 +744,6 @@ onMounted(() => {
                 v-model="dataPerson.changeDetail"
                 label="เปลี่ยนแปลงรายละเอียด"
                 rows="3"
-                hide-bottom-space
                 type="textarea"
                 :rules="[
               (val: string) =>
@@ -385,9 +751,595 @@ onMounted(() => {
             ]"
               />
             </div>
+            <div class="col-9">
+              <q-select
+                dense
+                outlined
+                lazy-rules
+                v-model="dataPerson.scholarshipType"
+                :options="scholarshipTypeOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                readonly
+                class="inputgreen"
+                label="เลือกประเภททุน"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-select
+                dense
+                outlined
+                readonly
+                lazy-rules
+                class="inputgreen"
+                v-model="dataPerson.fundType"
+                :options="fundTypeOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                label="ประเภททุน"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                readonly
+                label="เลขที่สัญญา"
+                class="inputgreen"
+                v-model="dataPerson.contractNo"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.contractDate"
+                :locale="'th'"
+                autoApply
+                readonly
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.contractDate
+                        ? date2Thai(dataPerson.contractDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                readonly
+                lazy-rules
+                class="inputgreen"
+                v-model="dataPerson.reportBackNo"
+                label="เลขที่หนังสือรายงานตัวกลับ"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.reportBackNoDate"
+                :locale="'th'"
+                readonly
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.reportBackNoDate
+                        ? date2Thai(dataPerson.reportBackNoDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.reportBackDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.reportBackDate
+                        ? date2Thai(dataPerson.reportBackDate)
+                        : null
+                    "
+                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
+              ข้อมูลผู้ค้ำประกัน
+            </div>
+            <q-separator />
+            <q-card-section>
+              <div class="row">
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.citizenId ? dataGuarantor.citizenId : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.firstName ? dataGuarantor.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.position ? dataGuarantor.position : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">ประเภท</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.level ? dataGuarantor.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.positionSide ? dataGuarantor.name : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+          <div class="row q-col-gutter-sm q-my-md">
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="ระดับปริญญา"
+                class="inputgreen"
+                v-model="dataPerson.degreeLevel"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หลักสูตรการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.course"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="สาขาวิชา"
+                class="inputgreen"
+                v-model="dataPerson.field"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="คณะ"
+                class="inputgreen"
+                v-model="dataPerson.faculty"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="สถาบันการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.educationalInstitution"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.startDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeStartDate('startDate')"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.startDate
+                        ? date2Thai(dataPerson.startDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษา'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+                :min-date="dataPerson.startDate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.endDate ? date2Thai(dataPerson.endDate) : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษา'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="สถานที่ไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyPlace"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หัวข้อการไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyTopic"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+                @update:model-value="changeStartDate('studyStartDate')"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.studyStartDate
+                        ? date2Thai(dataPerson.studyStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyEndDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="dataPerson.studyStartDate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.studyEndDate
+                        ? date2Thai(dataPerson.studyEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6"></div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="ประเทศที่ไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyCountry"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                class="inputgreen"
+                v-model="dataPerson.studyAbroadTopic"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyAbroadStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeStartDate('studyAbroadStartDate')"
+                readonly
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.studyAbroadStartDate
+                        ? date2Thai(dataPerson.studyAbroadStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyAbroadEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="dataPerson.studyAbroadStartDate"
+                @update:model-value="
+                  updateTotalPeriod(
+                    dataPerson.studyAbroadStartDate,
+                    dataPerson.studyAbroadEndDate
+                  )
+                "
+                readonly
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.studyAbroadEndDate
+                        ? date2Thai(dataPerson.studyAbroadEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="รวมระยะเวลาในการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.totalPeriod"
+                readonly
+              />
+            </div>
           </div>
         </q-card>
       </div>
     </div>
   </div>
+
+  <DialogReturn v-model:modal="dialogReturn" />
 </template>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a091e50..5b92180 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -988,7 +988,7 @@ export const useCounterMixin = defineStore("mixin", () => {
    * @param endDate วันสิ้นสุด format MM-DD-YYYY"
    * @returns ผลการคำนวน ปี เดือน วัน ในรูปแบบ 1 ปี 10 เดือน 5 วัน
    */
-  function calculateDurationYmd(startDate: string, endDate: string) {
+  function calculateDurationYmd(startDate: any, endDate: any) {
     if (startDate && endDate) {
       const start = new Date(startDate);
       const end = new Date(endDate);