diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 2b1a00910..0e10fe259 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -12,7 +12,10 @@ export default {
   /**ลบ ช่องทางการร้องเรียน
    * @param id type
    */
-  complaintChannelbyId:(id:string) => `${discipline}/complaint_Channel/${id}`
+  complaintChannelbyId:(id:string) => `${discipline}/complaint_Channel/${id}`,
 
+  complaintAdd:() => `${discipline}/complaint`,
+  complaintbyId:(id:string) => `${discipline}/complaint/${id}`,
+  complaintList:(page:number,pageSize:number,keyword:string) => `${discipline}/complaint?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
 
 };
diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 58c3638ef..91fa3f1fe 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted,watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -8,6 +8,48 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, dialogMessageNotify } = mixin;
 
+const data = [
+    {
+      id: "001",
+      idcard: "0000000000001",
+      prefix: "นาง",
+      firstName: "ศิรินภา",
+      lastName: "คงน้อย",
+      posNo: "สกก.1",
+      position: "ตำเเหน่ง1",
+      positionLevel: "level1",
+      salary: "100",
+      organization: "สำนักงาน 1",
+      name: "นางศิรินภา คงน้อย",
+    },
+    {
+      id: "002",
+      idcard: "0000000000002",
+      prefix: "นาย",
+      firstName: "แก้ว",
+      lastName: "คำ",
+      posNo: "สกก.1",
+      position: "ตำแหน่ง2",
+      positionLevel: "level2",
+      salary: "100",
+      organization: "สำนักงาน 2",
+      name: "นางแก้ว คำ",
+    },
+    {
+      id: "003",
+      idcard: "0000000000003",
+      prefix: "นาย",
+      firstName: "ภัทรานุย",
+      lastName: "คงนอย",
+      posNo: "สกก.1",
+      position: "ตำแหน่ง2",
+      positionLevel: "level3",
+      salary: "100",
+      organization: "สำนักงาน 3",
+      name: "นางภัทรานุย คงนอย",
+    },
+  ];
+
 interface typeOp {
   id: string;
   name: string;
@@ -23,7 +65,7 @@ interface tableType {
   positionLevel: string;
   organization: string;
   salary: string;
-  fullName: string;
+  name: string;
 }
 
 const rows = ref<tableType[]>([]);
@@ -43,7 +85,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "idcard",
   "fullName",
-  "positionNo",
+  "posNo",
   "position",
   "positionLevel",
   "salary",
@@ -80,11 +122,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionNo",
+    name: "posNo",
     align: "left",
     label: "ตำแหน่งเลขที่",
     sortable: true,
-    field: "positionNo",
+    field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -128,6 +170,10 @@ const columns = ref<QTableProps["columns"]>([
 
 /** รับค่ามาจาก หน้าหลัก */
 const props = defineProps({
+  checkId:{
+    type:Array,
+    default:[]
+  },
   modal: {
     type: Boolean,
     default: false,
@@ -206,50 +252,17 @@ function updateSelect() {
   search.value = "";
 }
 
+watch(() => props.modal, () => {
+  if (props.modal === true) {
+    console.log(props.checkId);
+    const dataProps = props.checkId.map((item: any) => item.idcard);
+    const dataMapId = data.filter((item: any) => !dataProps.includes(item.idcard));
+    rows.value = dataMapId
+  }
+});
+
 /** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
 onMounted(() => {
-  const data = [
-    {
-      id: "001",
-      idcard: "0000000000001",
-      prefix: "นาง",
-      firstName: "ศิรินภา",
-      lastName: "คงน้อย",
-      positionNo: "สกก.1",
-      position: "ตำเเหน่ง1",
-      positionLevel: "level1",
-      salary: "100",
-      organization: "สำนักงาน 1",
-      fullName: "นางศิรินภา คงน้อย",
-    },
-    {
-      id: "002",
-      idcard: "0000000000002",
-      prefix: "นาย",
-      firstName: "แก้ว",
-      lastName: "คำ",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level2",
-      salary: "100",
-      organization: "สำนักงาน 2",
-      fullName: "นางแก้ว คำ",
-    },
-    {
-      id: "003",
-      idcard: "0000000000003",
-      prefix: "นาย",
-      firstName: "ภัทรานุย",
-      lastName: "คงนอย",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level3",
-      salary: "100",
-      organization: "สำนักงาน 3",
-      fullName: "นางภัทรานุย คงนอย",
-    },
-  ];
-
   dataObject.value = data;
   rows.value = data;
 });
diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index 5e099bbf7..75d967dbc 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -1,15 +1,36 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+
+const { showLoader, hideLoader, success, messageError } = mixin;
 const router = useRouter();
 
 /** บันทึกข้อมูล */
-async function onSubmit () {
+async function onSubmit(data: any) {
   /** post */
-  console.log("add");
-  router.push(`/discipline/complaints`);
-};
+  showLoader();
+  http
+    .post(config.API.complaintAdd(), data)
+    .then((res) => {
+      console.log(res)
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/discipline/complaints/${res.data.result}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index 129b9603e..e00f8baf2 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -4,6 +4,10 @@ import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
 import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+
 import type {
   FormData,
   ArrayPerson,
@@ -13,7 +17,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
@@ -22,25 +26,28 @@ const modalPopup = ref<boolean>(false);
 
 /** ข้อมูล v-model ของฟอร์ม */
 const personOj = reactive<ArrayPerson>({
+  personId:'',
   idcard: "",
   name: "",
-  positionNo: "",
+  prefix:'',
+  firstName:'',
+  lastName:'',
+  posNo: "",
   position: "",
   positionLevel: "",
-  salary: "",
+  salary: null,
   organization: "",
 });
 
 const fileListOj = reactive<ArrayFileList>({
   id: "",
-  file: "",
+  pathName: "",
   fileName: "",
-  fileType: "",
 });
 
 const data = reactive<FormData>({
   respondentType: "",
-  office: "",
+  organizationId: "",
   consideredAgency: "",
   title: "",
   description: "",
@@ -52,79 +59,123 @@ const data = reactive<FormData>({
   complaintFrom: "",
   appellant: "",
   documentFile: null,
-  complaintStatus: "",
-  organizationId: "",
+  status: "",
   persons: [personOj],
-  personId: [],
-  respondentId: [],
-  fileList: [fileListOj],
+  rejectReason: null,
+  disciplineComplaintDocs: [fileListOj],
 });
 
 /** ดึงค่าจาก api */
-const fetchData = async () => {
-  data.respondentType = "PERSON";
-  data.office = "0";
-  data.consideredAgency = "2";
-  data.title = "ทุจริตในหน้าที่";
-  data.description = "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน";
-  data.dateReceived = new Date("2023-11-05");
-  data.dateConsideration = new Date("2023-11-07T14:58:00");
-  data.offenseDetails = "NOT_SPECIFIED";
-  data.levelConsideration = "NORMAL";
-  data.dateNotification = new Date("2023-11-07T14:58:00");
-  data.complaintFrom = "สตง";
-  data.appellant = "สมศรี สุขใจ";
-  data.documentFile = "";
-  data.complaintStatus = "NEW";
-  (data.persons = [
-    {
-      idcard: "1529900022223",
-      name: "นางศิรินภา คงน้อย",
-      positionNo: "สกก.1",
-      position: "ธุรการ",
-      positionLevel: "ต้น",
-      salary: "10000",
-      organization: "สกจ.",
-    },
-  ]),
-    (data.fileList = [
-      {
-        id: "08dbeb08-1931-487d-8989-0725ce48031d",
-        file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
-        fileName: "ex_slip.jpeg.png14",
-        fileType: "image/png",
-      },
-      {
-        id: "08dbeb08-392b-41b8-8970-78934f317469",
-        file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
-        fileName: "17058616.jpg",
-        fileType: "image/jpeg",
-      },
-      {
-        id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
-        file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
-        fileName: "17058616.jpg",
-        fileType: "image/jpeg",
-      },
-      {
-        id: "08dbeb08-428f-483b-8d50-718e947d012e",
-        file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
-        fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
-        fileType: "image/png",
-      },
-      {
-        id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
-        file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
-        fileName: "1300399ปปปป.jpg",
-        fileType: "image/jpeg",
-      },
-    ]);
-};
+// const fetchData = async () => {
+//   data.respondentType = "PERSON";
+//   data.organizationId = "0";
+//   data.consideredAgency = "2";
+//   data.title = "ทุจริตในหน้าที่";
+//   data.description = "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน";
+//   data.dateReceived = new Date("2023-11-05");
+//   data.dateConsideration = new Date("2023-11-07T14:58:00");
+//   data.offenseDetails = "NOT_SPECIFIED";
+//   data.levelConsideration = "NORMAL";
+//   data.dateNotification = new Date("2023-11-07T14:58:00");
+//   data.complaintFrom = "สตง";
+//   data.appellant = "สมศรี สุขใจ";
+//   data.documentFile = "";
+//   data.complaintStatus = "NEW";
+//   (data.persons = [
+//     {
+//       idcard: "1529900022223",
+//       name: "นางศิรินภา คงน้อย",
+//       positionNo: "สกก.1",
+//       position: "ธุรการ",
+//       positionLevel: "ต้น",
+//       salary: "10000",
+//       organization: "สกจ.",
+//     },
+//   ]),
+//     (data.fileList = [
+//       {
+//         id: "08dbeb08-1931-487d-8989-0725ce48031d",
+//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
+//         fileName: "ex_slip.jpeg.png14",
+//         fileType: "image/png",
+//       },
+//       {
+//         id: "08dbeb08-392b-41b8-8970-78934f317469",
+//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
+//         fileName: "17058616.jpg",
+//         fileType: "image/jpeg",
+//       },
+//       {
+//         id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
+//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
+//         fileName: "17058616.jpg",
+//         fileType: "image/jpeg",
+//       },
+//       {
+//         id: "08dbeb08-428f-483b-8d50-718e947d012e",
+//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
+//         fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
+//         fileType: "image/png",
+//       },
+//       {
+//         id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
+//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
+//         fileName: "1300399ปปปป.jpg",
+//         fileType: "image/jpeg",
+//       },
+//     ]);
+// };
 
+async function getData() {
+  showLoader();
+ await http
+    .get(config.API.complaintbyId(id.value))
+    .then((res) => {
+      const dataList = res.data.result;
+      data.respondentType = dataList.respondentType
+      data.organizationId = dataList.organizationId
+      data.consideredAgency = dataList.consideredAgency
+      data.title = dataList.title
+      data.description = dataList.description
+      data.dateReceived = dataList.dateReceived
+      data.levelConsideration = dataList.levelConsideration
+      data.dateConsideration = dataList.dateConsideration
+      data.offenseDetails = dataList.offenseDetails
+      data.dateNotification = dataList.dateNotification
+      data.complaintFrom = dataList.complaintFrom
+      data.appellant = dataList.appellant
+      data.status = dataList.status
+      data.persons = dataList.persons
+      data.rejectReason = dataList.rejectReason
+      data.disciplineComplaintDocs = dataList.disciplineComplaintDocs
+
+      console.log('list', dataList.persons)
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 /** ฟังชั่น แก้ไข */
-async function onSubmit() {
-  console.log("edit");
-  router.push(`/discipline/complaints`);
+async function onSubmit(data:any) {
+  showLoader()
+  http
+  .put(config.API.complaintbyId(id.value),data)
+  .then((res) => {
+      console.log(res)
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/discipline/complaints`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+  console.log("edit",data);
+  // router.push(`/discipline/complaints`);
 }
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
@@ -179,7 +230,8 @@ function confirmCancelInvestigate() {
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(() => {
   console.log(data);
-  fetchData();
+  // fetchData();
+  getData();
 });
 </script>
 <template>
@@ -199,19 +251,19 @@ onMounted(() => {
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="data.status === 'NEW'"
           label="มีมูลส่งไปสืบสวน"
           color="public"
           @click="sentInvestigate"
         />
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="data.status === 'NEW'"
           label="ยุติเรื่อง"
           color="red-7"
           @click="endInvestigate"
         />
         <q-btn
-          v-if="data.complaintStatus === 'STOP'"
+          v-if="data.status === 'STOP'"
           label="ยกเลิกการยุติเรื่อง"
           color="red-7"
           @click="cancelInvestigate"
@@ -220,7 +272,6 @@ onMounted(() => {
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />
-
     <Popup :modal="modalPopup" :close="closePopup" />
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 62e606060..90f1df9fe 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -18,6 +18,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -32,7 +34,7 @@ const { selectComplainantTpye, filterSelector } = complainstStore; // function 
 /** validateForm */
 const respondentTypeRef = ref<Object | null>(null);
 const complainantRef = ref<Object | null>(null);
-const officeRef = ref<Object | null>(null);
+const organizationIdRef = ref<Object | null>(null);
 const consideredAgencyRef = ref<Object | null>(null);
 const titleRef = ref<Object | null>(null);
 const descriptionRef = ref<Object | null>(null);
@@ -44,7 +46,7 @@ const dateNotificationRef = ref<Object | null>(null);
 const complaintFromRef = ref<Object | null>(null);
 const appellantRef = ref<Object | null>(null);
 
-const fileList = ref<ArrayFileList[]>()
+const fileList = ref<ArrayFileList[]>([]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -57,27 +59,15 @@ const props = defineProps({
   },
 });
 
-/** ข้อมูล form*/
-const personOj = reactive<ArrayPerson>({
-  idcard: "",
-  name: "",
-  positionNo: "",
-  position: "",
-  positionLevel: "",
-  salary: "",
-  organization: "",
-});
-
 const fileListOj = reactive<ArrayFileList>({
   id: "",
-  file: "",
+  pathName: "",
   fileName: "",
-  fileType: "",
 });
 
 const formData = reactive<FormData>({
   respondentType: "",
-  office: "",
+  organizationId: null,
   consideredAgency: "",
   title: "",
   description: "",
@@ -89,18 +79,16 @@ const formData = reactive<FormData>({
   complaintFrom: "",
   appellant: "",
   documentFile: null,
-  complaintStatus: "",
-  persons: [personOj],
-  personId: [],
-  organizationId: null,
-  respondentId: [],
-  fileList: [fileListOj],
+  status: "",
+  rejectReason: null,
+  persons: [],
+  disciplineComplaintDocs: fileList.value ?? null,
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectComplaintsRef: MyObjectComplaintsRef = {
   respondentType: respondentTypeRef,
-  office: officeRef,
+  organizationId: organizationIdRef,
   consideredAgency: consideredAgencyRef,
   title: titleRef,
   description: descriptionRef,
@@ -164,11 +152,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionNo",
+    name: "posNo",
     align: "left",
     label: "ตำแหน่งเลขที่",
     sortable: true,
-    field: "positionNo",
+    field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -215,7 +203,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "idcard",
   "name",
-  'positionNo',
+  "posNo",
   "position",
   "positionLevel",
   "salary",
@@ -227,7 +215,7 @@ const visibleColumns = ref<string[]>([
  * @param val บุคคล หน่วยงาน กทม
  */
 async function selectComplainant(val: string) {
-  formData.office = "";
+  formData.organizationId = "";
   formData.consideredAgency = "";
   if (val === "0") {
     await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
@@ -315,8 +303,13 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      console.log(formData);
-      props.onSubmit();
+      if(complainstStore.rowsAdd){
+        formData.persons = complainstStore.rowsAdd
+        props.onSubmit(formData)
+      }else(
+        props.onSubmit(formData)
+      )
+      // props.onSubmit(formData);
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -326,42 +319,6 @@ function onSubmit() {
 /**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
 const modal = ref<boolean>(false);
 const toggleModal = () => (modal.value = !modal.value);
-async function addPerson() {
-  const listData: DataAddRequest[] = [
-    {
-      id: "001",
-      idcard: "0000000000001",
-      name: "นางศิรินภา คงน้อย",
-      positionNo: "สกก.1",
-      position: "ตำเเหน่ง1",
-      positionLevel: "level1",
-      salary: "10000",
-      organization: "สำนักงาน 1",
-    },
-    {
-      id: "002",
-      idcard: "0000000000002",
-      name: "นายแก้ว คำ",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level2",
-      salary: "1000",
-      organization: "สำนักงาน 2",
-    },
-    {
-      id: "003",
-      idcard: "0000000000003",
-      name: "นายภัทรานุย คงนอย",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level3",
-      salary: "100",
-      organization: "สำนักงาน 3",
-    },
-  ];
-  await complainstStore.fetchComplainstAdd(listData);
-  toggleModal();
-}
 
 /**
  * เปิดลิงค์ไฟล์
@@ -373,7 +330,7 @@ function downloadFile(link: string) {
 
 /**
  * ลบไฟล์
- * @param id id file 
+ * @param id id file
  */
 function deleteFile(id: string) {
   dialogRemove($q, () => confirmDelete(id));
@@ -393,8 +350,11 @@ function confirmDelete(id: string) {
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
+  fileList.value = props.data.disciplineComplaintDocs;
+  complainstStore.fetchComplainstAdd(props.data.persons);
+
   formData.respondentType = props.data.respondentType;
-  formData.office = props.data.office;
+  formData.organizationId = props.data.organizationId;
   formData.consideredAgency = props.data.consideredAgency;
   formData.title = props.data.title;
   formData.description = props.data.description;
@@ -406,9 +366,9 @@ watch(props.data, async () => {
   formData.complaintFrom = props.data.complaintFrom;
   formData.appellant = props.data.appellant;
   formData.documentFile = props.data.documentFile;
-  formData.complaintStatus = props.data.complaintStatus;
-  complainstStore.fetchComplainstAdd(props.data.persons);
-  fileList.value = props.data.fileList
+  formData.status = props.data.status;
+  formData.persons = complainstStore.rowsAdd
+
 });
 
 /**
@@ -416,10 +376,23 @@ watch(props.data, async () => {
  * @param returnData ค่าที่ได้คืนมา
  */
 function handleSave(returnData: any) {
-  console.log("returnData:", returnData);
+  addPerson(returnData);
+  toggleModal();
 }
 
+async function addPerson(data:any) {
+  await complainstStore.fetchComplainstAdd(data);
+  toggleModal();
+}
+
+function getOc() {
+  http.get(config.API.typeOc()).then((res) => {
+    const data = res.data.result;
+    complainstStore.ocListFn(data);
+  });
+}
 onMounted(() => {
+  getOc();
   complainstStore.columns = columns.value;
   complainstStore.visibleColumns = visibleColumns.value;
 });
@@ -438,8 +411,8 @@ onMounted(() => {
                 dense
                 outlined
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 label="ผู้ถูกร้องเรียน"
                 option-value="id"
@@ -469,25 +442,25 @@ onMounted(() => {
             <div
               class="col-xs-12 col-sm-3"
               v-if="formData.respondentType === 'ORGANIZATION'"
-              id="office"
+              id="organizationId"
             >
               <q-select
                 for="inputOffice"
-                name="office"
-                ref="officeRef"
+                name="organizationId"
+                ref="organizationIdRef"
                 dense
                 hide-bottom-space
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 outlined
                 option-label="name"
                 option-value="id"
                 emit-value
                 map-options
-                v-model="formData.office"
-                :options="complainstStore.officeOp"
+                v-model="formData.organizationId"
+                :options="complainstStore.organizationIdOp"
                 label="เลือกสำนักงาน"
                 :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                 lazy-rules
@@ -506,8 +479,8 @@ onMounted(() => {
                 option-value="id"
                 option-label="name"
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 hide-bottom-space
                 emit-value
@@ -540,8 +513,8 @@ onMounted(() => {
                   ผู้ถูกร้องเรียน
                   <q-btn
                     v-if="
-                      formData.complaintStatus === 'NEW' ||
-                      formData.complaintStatus === ''
+                      formData.status === 'NEW' ||
+                      formData.status === ''
                     "
                     size="12px"
                     flat
@@ -561,7 +534,7 @@ onMounted(() => {
                     ref="table"
                     :columns="complainstStore.columns"
                     :rows="complainstStore.rowsAdd"
-                    row-key="interrogated"
+                    row-key="idcard"
                     flat
                     bordered
                     :paging="true"
@@ -610,8 +583,8 @@ onMounted(() => {
                 dense
                 outlined
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 hide-bottom-space
                 v-model="formData.title"
@@ -630,8 +603,8 @@ onMounted(() => {
                 dense
                 outlined
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 hide-bottom-space
                 v-model="formData.description"
@@ -651,8 +624,8 @@ onMounted(() => {
                 autoApply
                 borderless
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 :enableTimePicker="false"
                 week-start="0"
@@ -670,8 +643,8 @@ onMounted(() => {
                     outlined
                     dense
                     :readonly="
-                      formData.complaintStatus !== 'NEW' &&
-                      formData.complaintStatus !== ''
+                      formData.status !== 'NEW' &&
+                      formData.status !== ''
                     "
                     hide-bottom-space
                     class="full-width datepicker"
@@ -706,8 +679,8 @@ onMounted(() => {
                 dense
                 outlined
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 v-model="formData.levelConsideration"
                 :options="levelConsiderationtoptions"
@@ -730,8 +703,8 @@ onMounted(() => {
                 @update:model-value="selectLevel(formData.levelConsideration)"
                 :locale="'th'"
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 autoApply
                 borderless
@@ -757,8 +730,8 @@ onMounted(() => {
                         : null
                     "
                     :readonly="
-                      formData.complaintStatus !== 'NEW' &&
-                      formData.complaintStatus !== ''
+                      formData.status !== 'NEW' &&
+                      formData.status !== ''
                     "
                     label="วันที่กำหนดวันพิจารณา"
                     hide-bottom-space
@@ -787,8 +760,8 @@ onMounted(() => {
                 dense
                 outlined
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 v-model="formData.offenseDetails"
                 :options="offenseDetailstoptions"
@@ -810,8 +783,8 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 borderless
                 :enableTimePicker="false"
@@ -830,8 +803,8 @@ onMounted(() => {
                     outlined
                     dense
                     :readonly="
-                      formData.complaintStatus !== 'NEW' &&
-                      formData.complaintStatus !== ''
+                      formData.status !== 'NEW' &&
+                      formData.status !== ''
                     "
                     hide-bottom-space
                     class="full-width datepicker"
@@ -866,8 +839,8 @@ onMounted(() => {
                 ref="complaintFromRef"
                 dense
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 outlined
                 v-model="formData.complaintFrom"
@@ -891,8 +864,8 @@ onMounted(() => {
                 outlined
                 v-model="formData.appellant"
                 :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
+                  formData.status !== 'NEW' &&
+                  formData.status !== ''
                 "
                 label="ผู้ร้องเรียน"
                 :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
@@ -908,8 +881,8 @@ onMounted(() => {
         <div
           class="row col-12 q-pa-sm"
           v-if="
-            formData.complaintStatus === 'NEW' ||
-            formData.complaintStatus === ''
+            formData.status === 'NEW' ||
+            formData.status === ''
           "
         >
           <q-space />
@@ -926,8 +899,14 @@ onMounted(() => {
     </q-card>
   </div>
 
-  <div class="col-12 q-mt-sm">
+  <div class="col-12 q-mt-sm q-mb-lg">
     <q-card flat bordered>
+      <div
+        class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+      >
+        อัปโหลดไฟล์เอกสารหลักฐาน
+      </div>
+      <div class="col-12"><q-separator /></div>
       <div class="row q-ma-sm q-col-gutter-x-sm">
         <div class="col-11" id="documentFile">
           <q-file
@@ -936,8 +915,8 @@ onMounted(() => {
             dense
             class="fit"
             :readonly="
-              formData.complaintStatus !== 'NEW' &&
-              formData.complaintStatus !== ''
+              formData.status !== 'NEW' &&
+              formData.status !== ''
             "
             v-model="formData.documentFile"
             @added="fileUploadDoc"
@@ -948,7 +927,7 @@ onMounted(() => {
             clearable
           >
             <template v-slot:prepend>
-              <q-icon name="attach_file" />
+              <q-icon name="attach_file" color="primary" />
             </template>
           </q-file>
         </div>
@@ -965,13 +944,8 @@ onMounted(() => {
           >
         </div>
       </div>
-      <div class="q-pa-md" v-if="fileList">
-        <q-list
-          bordered
-          separator
-          v-for="data in fileList"
-          :key="data.id"
-        >
+      <div class="q-pa-md" v-if="fileList.length > 0">
+        <q-list bordered separator v-for="data in fileList" :key="data.id">
           <q-item clickable v-ripple class="items-center">
             <q-item-section>{{ data.fileName }}</q-item-section>
             <q-space />
@@ -983,7 +957,7 @@ onMounted(() => {
               color="blue"
               class="q-ml-sm"
               icon="mdi-download"
-              @click="downloadFile(data.file)"
+              @click="downloadFile(data.pathName)"
               ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
             >
             <q-btn
@@ -1004,6 +978,7 @@ onMounted(() => {
   </div>
 
   <DialogAddPersonal
+    :checkId="complainstStore.rowsAdd"
     :modal="modal"
     btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
     :close="toggleModal"
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 7b6627f1b..e8e23f606 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
-
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 // import type
 import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 // impoet Components
 import TableComplaint from "@/modules/11_discipline/components/1_Complaint/TableComplaint.vue";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { max } from "moment";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+
+const { showLoader, messageError, hideLoader } = mixin;
 const router = useRouter();
 
 /** stoer */
@@ -16,54 +24,56 @@ const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
 
 const filterTable = ref<string>("");
+const filterKeyword = ref<string>("");
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
 
-/**เรีนกรายการเรื่องร้องเรียน */
-async function fetchListComplaints() {
-  const listData: DataList[] = [
-    {
-      id: "001",
-      title: "ทุจริตในหน้าที่",
-      description: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-      respondent: "นางศิรินภา คงน้อย",
-      descMistake: "ร้ายแรง",
-      createdAt: new Date("2023-12-01"),
-      devLevel: "ด่วนมาก",
-      considerationDate: new Date("2023-12-02"),
-      complaintStatus: 'NEW',
-    },
-    {
-      id: "002",
-      title: "ทุจริตในหน้าที่",
-      description: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-      respondent: "นายแก้ว คำ",
-      descMistake: "ร้ายแรง",
-      createdAt: new Date("2023-12-01"),
-      devLevel: "ด่วนมาก",
-      considerationDate: new Date("2023-12-02"),
-      complaintStatus: 'STOP',
-    },
-    {
-      id: "003",
-      title: "ทุจริตในหน้าที่",
-      description:"มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-      respondent: "นายภัทรานุย คงนอย",
-      descMistake: "ร้ายแรง",
-      createdAt: new Date("2023-12-01"),
-      devLevel: "ด่วนมาก",
-      considerationDate: new Date("2023-12-02"),
-      complaintStatus: 'SEND_INVESTIGATE',
-    },
-  ];
-  await fetchComplainst(listData);
+async function updatePagingProp(rowPerpage:number,pageCurrent:number) {
+  rowsPerPage.value = rowPerpage
+  page.value = pageCurrent
+  await getList()
 }
+
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.complaintList(
+        page.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+
+    )
+    // 
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total/ rowsPerPage.value);
+      const data = res.data.result.data;
+      fetchComplainst(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
+  complainstStore.fetchComplainstAdd([])
   router.push(`/discipline/complaints/add`);
 }
 
+function filterFn() {
+  getList();
+  console.log("enter", filterKeyword.value);
+}
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
-  await fetchListComplaints();
+  await getList();
 });
 </script>
 
@@ -86,22 +96,23 @@ onMounted(async () => {
       </div>
 
       <q-space />
-      
+
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
         id="filterTable"
         for="filterTable"
         dense
         outlined
-        v-model="filterTable"
+        v-model="filterKeyword"
         label="ค้นหา"
         debounce="300"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
-      
+
       <q-select
         id="visibleColumns"
         for="visibleColumns"
@@ -121,7 +132,13 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <TableComplaint :filterTable="filterTable" />
+      <TableComplaint
+        :filterTable="filterTable"
+        :rowsPerPage="rowsPerPage"
+        :page="page"
+        :maxPage="maxPage"
+        @update:pagination="updatePagingProp"
+      />
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index df4fd918e..bf454a350 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 // import type
 import type { QTableProps } from "quasar";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRoute, useRouter } from "vue-router";
-
+const currentPage = ref<number>(1);
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
@@ -15,8 +15,22 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
 });
 
+const emit = defineEmits(["update:pagination"]);
+
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -47,20 +61,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "respondent",
+    name: "appellant",
     align: "left",
     label: "ผู้ถูกร้องเรียน",
     sortable: true,
-    field: "respondent",
+    field: "appellant",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "descMistake",
+    name: "offenseDetails",
     align: "left",
     label: "ลักษณะความผิด",
     sortable: true,
-    field: "descMistake",
+    field: "offenseDetails",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -74,29 +88,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "devLevel",
+    name: "levelConsideration",
     align: "left",
     label: "ระดับการพิจารณา",
     sortable: true,
-    field: "devLevel",
+    field: "levelConsideration",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "considerationDate",
+    name: "dateConsideration",
     align: "left",
     label: "วันที่กำหนดพิจารณา",
     sortable: true,
-    field: "considerationDate",
+    field: "dateConsideration",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "complaintStatus",
+    name: "status",
     align: "left",
     label: "สถานะเรื่องร้องเรียน",
     sortable: true,
-    field: "complaintStatus",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -107,12 +121,12 @@ const visibleColumns = ref<string[]>([
   "no",
   "title",
   "description",
-  "respondent",
-  "descMistake",
+  "appellant",
+  "offenseDetails",
   "createdAt",
-  "devLevel",
-  "considerationDate",
-  'complaintStatus'
+  "levelConsideration",
+  "dateConsideration",
+  "status",
 ]);
 
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
@@ -124,17 +138,37 @@ onMounted(() => {
 /** แสดงจำนวนในตาราง */
 const pagination = ref({
   descending: true,
-  page: 1,
-  rowsPerPage: 10,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
 });
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
  */
-function OpenEdit(id:string){
-  console.log(id)
-  router.push(`/discipline/complaints/${id}`)
+function OpenEdit(id: string) {
+  console.log(id);
+  router.push(`/discipline/complaints/${id}`);
 }
+
+const updateProp = (newPagination: any, page: number) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+};
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
 </script>
 
 <template>
@@ -153,6 +187,17 @@ function OpenEdit(id:string){
     :visible-columns="complainstStore.visibleColumns"
     v-model:pagination="pagination"
   >
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
     <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -162,10 +207,15 @@ function OpenEdit(id:string){
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="OpenEdit(props.row.id)">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          @click="OpenEdit(props.row.id)"
+        >
           <div v-if="col.name == 'no'">
             {{ props.rowIndex + 1 }}
-        </div>
+          </div>
           <div v-if="col.name == 'description'">
             <div class="table_ellipsis">
               {{ props.row.description }}
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 53d9cb29f..4703f9353 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -23,7 +23,7 @@ const {
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(1);
+const rowsPerPage = ref<number>(10);
 
 /**
  *pagination ของตาราง
diff --git a/src/modules/11_discipline/interface/request/complaint.ts b/src/modules/11_discipline/interface/request/complaint.ts
index f115287ca..3b9c08cd4 100644
--- a/src/modules/11_discipline/interface/request/complaint.ts
+++ b/src/modules/11_discipline/interface/request/complaint.ts
@@ -1,6 +1,5 @@
 interface FormData {
     respondentType: string
-    office: string
     consideredAgency: string
     title: string
     description: string
@@ -12,32 +11,34 @@ interface FormData {
     complaintFrom: string
     appellant: string
     documentFile: any | null
-    complaintStatus: string
-    persons: ArrayPerson[]
-    personId: any
+    status: string
+    rejectReason: string|null
+    persons: object|null
     organizationId:string|null
-    respondentId:any
-    fileList:ArrayFileList[]
+    disciplineComplaintDocs:object|null
 }
 
 interface ArrayPerson {
-    idcard: string,
-    name: string,
-    positionNo: string,
-    position: string,
-    positionLevel: string,
-    salary: string,
-    organization: string,
+    personId:string
+    idcard:string
+    name:string
+    prefix:string
+    firstName:string
+    lastName:string
+    posNo:string
+    position:string
+    positionLevel:string
+    salary:number|null
+    organization:string
 }
 interface ArrayFileList {
     id:string
-    file:string
+    pathName:string
     fileName:string
-    fileType:string
 }
 interface MyObjectComplaintsRef {
     respondentType: object | null;
-    office: object | null;
+    organizationId: object | null;
     consideredAgency: object | null;
     title: object | null;
     description: object | null;
diff --git a/src/modules/11_discipline/interface/response/complaint.ts b/src/modules/11_discipline/interface/response/complaint.ts
index b59306649..16f25dbb0 100644
--- a/src/modules/11_discipline/interface/response/complaint.ts
+++ b/src/modules/11_discipline/interface/response/complaint.ts
@@ -2,12 +2,12 @@ interface DataListRow {
     id:string
     title: string
     description: string
-    respondent: string
-    descMistake: string
+    appellant: string
+    offenseDetails: string
     createdAt: string
-    devLevel: string
-    considerationDate: string
-    complaintStatus: string
+    levelConsideration: string
+    dateConsideration: string
+    status: string
 }
 interface DataAdd {
     id:string
@@ -33,19 +33,23 @@ interface DataList {
     id:string
     title: string
     description: string
-    respondent: string
-    descMistake: string
+    appellant: string
+    offenseDetails: string
     createdAt: Date
-    devLevel: string
-    considerationDate: Date
-    complaintStatus: string
+    levelConsideration: string
+    dateConsideration: Date
+    status: string
 }
 
-
+interface ocListType{
+    organizationId:string
+    organizationName:string
+}
 
 export type {
     DataList,
     DataListRow,
     DataAdd,
-    DataAddResponse
+    DataAddResponse,
+    ocListType
 }
\ No newline at end of file
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index f648a395c..b7ccca28b 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -3,7 +3,7 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type { DataList, DataListRow, DataAdd, DataAddResponse } from "@/modules/11_discipline/interface/response/complaint"
+import type { DataList, DataListRow, DataAdd, ArrayPerson,ocListType } from "@/modules/11_discipline/interface/response/complaint"
 import type { QTableProps } from "quasar";
 
 const mixin = useCounterMixin()
@@ -19,23 +19,12 @@ const { date2Thai } = mixin
 // oc
 export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
     const rows = ref<DataListRow[]>([])
-    const rowsAdd = ref<DataAdd[]>([])
+    const rowsAdd = ref<ArrayPerson[]>([])
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
 
-    function fetchComplainstAdd(data: DataAddResponse[]) {
-        console.log(data)
-        let datalist = data.map((e: DataAddResponse) => ({
-            id: e.id,
-            idcard: e.idcard,
-            name: e.name,
-            positionNo: e.positionNo,
-            position: e.position,
-            positionLevel: e.positionLevel,
-            salary: addCommas(e.salary),
-            organization: e.organization,
-        }))
-        rowsAdd.value = datalist
+    function fetchComplainstAdd(data: ArrayPerson[]) {
+        rowsAdd.value = data
     }
 
     function addCommas(salaryString: string): string {
@@ -48,12 +37,12 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
           id: e.id,
           title: e.title,
           description: e.description,
-          respondent: e.respondent,
-          descMistake: e.descMistake,
+          appellant: e.appellant,
+          offenseDetails: offenseDetailsTran(e.offenseDetails),
           createdAt: date2Thai(e.createdAt)!,
-          devLevel: e.devLevel,
-          considerationDate: date2Thai(e.considerationDate)!,
-          complaintStatus: statusTothai(e.complaintStatus),
+          levelConsideration: levelConsiderationTran(e.levelConsideration),
+          dateConsideration: date2Thai(e.dateConsideration)!,
+          status: statusTothai(e.status),
         }));
         rows.value = datalist;
       }
@@ -65,16 +54,8 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         { id: "BANGKOK", name: "กรุงเทพมหานคร" },
     ]);
     const complainantoptions = ref<DataOption[]>(complainantoptionsMain.value)
-    const consideredAgencytoptions = ref<DataOption[]>([
-        { id: "0", name: "หน่ายงานเอ" },
-        { id: "1", name: "หน่ายงานบี" },
-        { id: "2", name: "หน่ายงานชี" },
-    ]);
-    const officeOp = ref<DataOption[]>([
-        { id: "0", name: "สำนักงาน1" },
-        { id: "1", name: "สำนักงาน2" },
-        { id: "2", name: "สำนักงาน3" },
-    ]);
+    const consideredAgencytoptions = ref<DataOption[]>([]);
+    const organizationIdOp = ref<DataOption[]>([]);
 
     const statusTothai = (val: string) => {
         switch (val) {
@@ -84,6 +65,24 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
             default: return "-";
         }
     };
+
+    function offenseDetailsTran(val: string){
+        switch (val) {
+            case 'NOT_SPECIFIED': return "ยังไม่ระบุ";
+            case 'NOT_DEADLY': return "ร้ายแรง";
+            case 'DEADLY': return "ไม่ร้ายแรง";
+            default: return "-";
+        }
+    }
+    function levelConsiderationTran(val: string){
+        switch (val) {
+            case 'NORMAL': return "ปกติ";
+            case 'URGENT': return "ด่วน";
+            case 'VERT_URGENT': return "ด่วนมาก";
+            default: return "-";
+        }
+    }
+
     const agencytoptions = ref<DataOption[]>(consideredAgencytoptions.value)
     const optionListNameMain = ref<DataOption[]>([])
     const optionListName = ref<DataOption[]>([])
@@ -114,6 +113,15 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         });
     }
 
+    function ocListFn(data:ocListType[]){
+        let dataList:DataOption[] = data.map((item:ocListType)=>({
+            id:item.organizationId,
+            name:item.organizationName
+        }))
+        consideredAgencytoptions.value = dataList
+        organizationIdOp.value = dataList
+        
+    }
     return {
         rows,
         rowsAdd,
@@ -126,7 +134,8 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         consideredAgencytoptions,
         optionListName,
         fetchComplainstAdd,
-        officeOp
+        organizationIdOp,
+        ocListFn
 
 
     }