diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index fdb47549c..29df9467b 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -10,6 +10,15 @@ import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
 import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
 import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
+import type {
+  FormData as FormDataComplaint,
+  ArrayPerson,
+  ArrayFileList,
+} from "@/modules/11_discipline/interface/request/complaint";
+
+import type {
+  FormData as FormInvestigateFact,
+} from "@/modules/11_discipline/interface/request/investigateFact";
 
 /**import store*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -25,7 +34,7 @@ const route = useRoute();
 const id = ref<string>(route.params.id as string);
 const data = ref<object>();
 
-/** function fetchData สอบสวนคาวมผิดทางวินัย*/
+/** function fetchData สอบสวนความผิดทางวินัย*/
 async function fetchDetailDisciplinary() {
   showLoader();
   await http
@@ -47,7 +56,24 @@ async function fetchDetailInvestigate() {
   await http
     .get(config.API.disciplineInvestigateById(id.value))
     .then((res) => {
-      data.value = res.data.result;
+      const dataList = res.data.result;
+      dataInvestigatefacts.id = dataList.id;
+      dataInvestigatefacts.idComplaint = dataList.idComplaint;
+      dataInvestigatefacts.respondentType = dataList.respondentType;
+      dataInvestigatefacts.persons = dataList.persons;
+      dataInvestigatefacts.investigationDetail = dataList.investigationDetail;
+      dataInvestigatefacts.investigationDetailOther = dataList.investigationDetailOther;
+      dataInvestigatefacts.investigationDateStart = dataList.investigationDateStart;
+      dataInvestigatefacts.investigationDateEnd = dataList.investigationDateEnd;
+      dataInvestigatefacts.investigationDescription = dataList.investigationDescription;
+      dataInvestigatefacts.investigationCauseText = dataList.investigationCauseText;
+      dataInvestigatefacts.status = dataList.status;
+      dataInvestigatefacts.result = dataList.result;
+      dataInvestigatefacts.directors = dataList.director;
+      dataInvestigatefacts.disciplineInvestigateDocs = dataList.disciplineInvestigateDocs;
+      dataInvestigatefacts.disciplineInvestigateRelevantDocs =
+        dataList.disciplineInvestigateRelevantDocs;
+      dataInvestigatefacts.investigationStatusResult = dataList.investigationStatusResult;
     })
     .catch((err) => {
       messageError($q, err);
@@ -63,7 +89,24 @@ async function fetchDetailComplaints() {
   await http
     .get(config.API.disciplineComplaintsById(id.value))
     .then((res) => {
-      data.value = res.data.result;
+      const dataList = res.data.result;
+      dataComplaints.id = dataList.id;
+      dataComplaints.respondentType = dataList.respondentType;
+      dataComplaints.organizationId = dataList.organizationId;
+      dataComplaints.consideredAgency = dataList.consideredAgency;
+      dataComplaints.title = dataList.title;
+      dataComplaints.description = dataList.description;
+      dataComplaints.dateReceived = dataList.dateReceived;
+      dataComplaints.levelConsideration = dataList.levelConsideration;
+      dataComplaints.dateConsideration = dataList.dateConsideration;
+      dataComplaints.offenseDetails = dataList.offenseDetails;
+      dataComplaints.dateNotification = dataList.dateNotification;
+      dataComplaints.complaintFrom = dataList.complaintFrom;
+      dataComplaints.appellant = dataList.appellant;
+      dataComplaints.status = dataList.status;
+      dataComplaints.persons = dataList.persons;
+      dataComplaints.result = dataList.result;
+      dataComplaints.disciplineComplaintDocs = dataList.disciplineComplaintDocs;
     })
     .catch((err) => {
       messageError($q, err);
@@ -177,6 +220,78 @@ watch(
     }
   }
 );
+
+/** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
+const personObjComplaint = reactive<ArrayPerson>({
+  personId: "",
+  idcard: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  posNo: "",
+  position: "",
+  positionLevel: "",
+  salary: null,
+  organization: "",
+});
+
+const fileListObjComplaint = reactive<ArrayFileList>({
+  id: "",
+  pathName: "",
+  fileName: "",
+});
+
+const dataComplaints = reactive<FormDataComplaint>({
+  id: "",
+  respondentType: "",
+  organizationId: "",
+  consideredAgency: "",
+  title: "",
+  description: "",
+  dateReceived: null,
+  dateConsideration: null,
+  offenseDetails: "",
+  levelConsideration: "",
+  dateNotification: null,
+  complaintFrom: "",
+  appellant: "",
+  documentFile: null,
+  status: "",
+  persons: [personObjComplaint],
+  result: "",
+  disciplineComplaintDocs: [fileListObjComplaint],
+});
+
+/** ข้อมูล v-model ของฟอร์มสืบสวน */
+const dataInvestigatefacts = reactive<FormInvestigateFact>({
+  id: "",
+  idComplaint: "",
+  investigationDetail: "",
+  complaint: "",
+  complaintdetail: "",
+  investigationDescription: "",
+  fault: "",
+  investigationDetailOther: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  clickTime: false,
+  investigationDateStart: null,
+  investigationDateEnd: null,
+  daysExtend: null,
+  investigationStatusResult: "",
+  investigationCauseText: "",
+  complaintStatus: "",
+  result: "",
+  directors: [],
+  disciplineInvestigateDocs: [],
+  disciplineInvestigateRelevantDocs: [],
+  status: "",
+  documentFile: null,
+  respondentType: "",
+  organizationId: "",
+  persons: [],
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -223,19 +338,20 @@ watch(
         class="rounded-borders"
         indicator-color="primary"
         active-bg-color="teal-1"
-        active-class="text-primary"
+        active-color="primary"
+        active-class="bg-teal-1"
       >
-        <q-tab name="complaints" label="เรื่องร้องเรียน" />
-        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
+        <q-tab name="complaints" label="เรื่องร้องเรียน (สำเนา)" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง (สำเนา)" />
         <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
       </q-tabs>
       <q-separator />
       <q-tab-panels v-model="store.tabMenu" animated>
         <q-tab-panel name="complaints">
-          <FormComplaints :on-submit="onSubmit" :data="data" />
+          <FormComplaints :on-submit="onSubmit" :data="dataComplaints" />
         </q-tab-panel>
         <q-tab-panel name="investigatefacts">
-          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
+          <FormInvestigatefacts :on-submit="onSubmit" :data="dataInvestigatefacts" />
         </q-tab-panel>
         <q-tab-panel name="disciplinary">
           <FormDisciplinary