diff --git a/src/api/00_dashboard/api.message.ts b/src/api/00_dashboard/api.message.ts
new file mode 100644
index 000000000..85e0c7b86
--- /dev/null
+++ b/src/api/00_dashboard/api.message.ts
@@ -0,0 +1,11 @@
+/**
+ * API Structure + Org Chart
+ */
+import env from "../index";
+
+const message = `${env.API_DASHBOARD_URI}/message`;
+
+export default {
+  msgNotificate: `${message}/my-notifications`,
+  msgInbox: `${message}/my-inboxes`,
+};
diff --git a/src/api/index.ts b/src/api/index.ts
index bbe765fc9..9eae75a3b 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -29,6 +29,7 @@ const config = ref<any>({
     // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
     API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
     // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
+    API_DASHBOARD_URI: "http://192.168.1.9:6026/api/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -73,7 +74,13 @@ const API_RETIREMENT_URI = ref<string>(
   config.value[env.value].API_RETIREMENT_URI
 );
 const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
-const API_PROBATION_URI = ref<string>(config.value[env.value].API_PROBATION_URI);
+const API_PROBATION_URI = ref<string>(
+  config.value[env.value].API_PROBATION_URI
+);
+
+const API_DASHBOARD_URI = ref<string>(
+  config.value[env.value].API_DASHBOARD_URI
+);
 
 export default {
   env: env.value,
@@ -87,6 +94,7 @@ export default {
   API_PLACEMENT_URI: API_PLACEMENT_URI.value,
   API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
-  API_RETIREMENT_URI:API_RETIREMENT_URI.value,
-  API_PROBATION_URI: API_PROBATION_URI.value
+  API_RETIREMENT_URI: API_RETIREMENT_URI.value,
+  API_PROBATION_URI: API_PROBATION_URI.value,
+  API_DASHBOARD_URI: API_DASHBOARD_URI.value,
 };
diff --git a/src/app.config.ts b/src/app.config.ts
index ef0aa5f39..b8bb88983 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -37,6 +37,9 @@ import retirement from "./api/06_retirement/api.retirement";
 /** API ระบบงานเครื่องราชอิสริยาภรณ์ List */
 import insignia from "./api/07_insignia/api.insignia";
 
+/** API dashboard  */
+import message from "./api/00_dashboard/api.message";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -74,6 +77,9 @@ const API = {
   ...probation,
   ...retirement,
   ...insignia,
+
+  //dashboard
+  ...message,
 };
 
 export default {
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 78f2ecd9b..6277348a8 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -28,10 +28,10 @@ interface menuType {
 }
 
 interface notiType {
-  id: number;
+  id: string;
   sender: string;
   body: string;
-  timereceive: string;
+  timereceive: Date;
 }
 
 interface optionType {
diff --git a/src/interface/response/dashboard/dashboard.ts b/src/interface/response/dashboard/dashboard.ts
new file mode 100644
index 000000000..e6320ecfa
--- /dev/null
+++ b/src/interface/response/dashboard/dashboard.ts
@@ -0,0 +1,27 @@
+interface ResponseInbox {
+  body: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isOpen: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  openDate: Date | null;
+  payload: string;
+  receiveDate: Date;
+  receiverUserId: string;
+  subject: string;
+}
+
+interface DataInbox {
+  no: string;
+  sender: string;
+  subject: string;
+  timereceive: Date;
+  body: string;
+  ratingModel: number;
+}
+
+export type { ResponseInbox, DataInbox };
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index a03165d3c..d8f09f9b1 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -5,17 +5,30 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/05_placement/interface/response/Transfer";
+import type { QTableProps, QForm } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
 
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const paramsId = route.params.id;
-const { messageError, showLoader, hideLoader } = mixin;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+  success,
+} = mixin;
+const roleAdmin = ref<boolean>(false);
 
 const title = ref<ResponseTitle>({
   fullname: "",
@@ -23,8 +36,37 @@ const title = ref<ResponseTitle>({
   positionLevelOld: "",
   positionTypeOld: "",
 });
+const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const Otherdata = ref<any>([]);
 
 onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
   await fecthOther();
 });
 
@@ -32,22 +74,92 @@ const fecthOther = async () => {
   showLoader();
   await http
     .get(config.API.otherByid(paramsId.toString()))
+    // .get(config.API.transferId(paramsId.toString()))
     .then((res: any) => {
       const data = res.data.result;
+      Otherdata.value = res.data.result;
       console.log(data);
 
       title.value.fullname = `${data.firstName ?? "-"} ${data.lastName ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
+
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.amountOld ?? "";
+      organization.value = data.organization ?? "";
+      date.value =
+        data.positionDate !== null ? new Date(data.positionDate) : null;
+      reason.value = data.reason ?? "";
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
       hideLoader();
+      edit.value = false;
     });
 };
+const clickEdit = () => {
+  dialogConfirm($q, () => saveOther());
+};
+const saveOther = async () => {
+  // showLoader();
+  let data = {
+    citizenId: Otherdata.value.citizenId,
+    prefixId: Otherdata.value.prefixId,
+    firstname: Otherdata.value.firstname,
+    lastname: Otherdata.value.lastname,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionDate: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: Number(salary.value),
+  };
+  console.log(data);
+
+  await http
+    .put(config.API.otherByid(paramsId.toString()), data)
+    .then(() => {
+      success($q, "แก้ไข้ข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(async () => {
+      await fecthOther();
+    });
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 
 <template>
@@ -117,6 +229,217 @@ const fecthOther = async () => {
       </div>
     </div>
   </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="clickEdit"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="(edit = !edit), fecthOther()"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <!-- <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'โอนไปสังกัด'}`"
+              />
+            </div>
+          </div> -->
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 2e7b50c3c..12aa27631 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -50,19 +50,22 @@ const personal = ref<any[]>([]);
 const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
-  "citizenId",
   "fullname",
-  "organizationName",
-  "birthday",
-  "status",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]);
 
 const visibleColumns2 = ref<string[]>([
   "no",
-  "citizenId",
   "fullname",
-  "organizationName",
-  "birthday",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -78,7 +81,7 @@ const type = ref<string>("");
 onMounted(() => {
   fecthlistOthet();
 });
-const listRecevice = ref<any>([]);
+// const listRecevice = ref<any>([]);
 const fecthlistOthet = async () => {
   showLoader();
   await http
@@ -86,32 +89,36 @@ const fecthlistOthet = async () => {
     .then((res) => {
       console.log(res);
       let response = res.data.result;
-      listRecevice.value = response;
+      // listRecevice.value = response;
       console.log(response);
-      rows.value = response.map((e: any) => ({
-        personalId: e.id,
-        citizenId: e.citizenId,
-        fullname: e.firstName + "  " + e.lastName,
-        organizationName:
-          e.organizationName +
-          " " +
-          e.organizationShortName +
-          " " +
-          e.positionNumber +
-          " " +
-          e.positionPath,
-        orgName: e.organizationName,
-        organizationShortName: e.organizationShortName,
-        positionNumber: e.positionNumberOld,
-        positionPath: e.positionPath,
-        birthday: date2Thai(e.dateOfBirth),
-        status: status(e.status),
+      rows.value = response.map((r: any) => ({
+        createdAt: new Date(),
+        date: new Date(),
+        firstName: r.firstName ?? "",
+        personalId: r.id ?? "",
+        isActive: r.isActive ? r.isActive : false,
+        lastName: r.lastName ?? "",
+        organization: r.organization ?? "",
+        organizationPositionOld: r.organizationPositionOld ?? "",
+        posNo: r.posNo ?? "",
+        position: r.position ?? "",
+        positionLevel: r.positionLevel ?? "",
+        positionLevelOld: r.positionLevelOld ?? "",
+        positionNumberOld: r.positionNumberOld ?? "",
+        positionTypeOld: r.positionTypeOld ?? "",
+        prefix: r.prefix ?? "",
+        reason: r.reason ?? "",
+        salary: r.salary ? r.salary : 0,
+        status: r.status ?? "",
+        statustext: status(r.status ?? ""),
+        fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${r.lastName ?? ""}`,
       }));
       console.log(rows.value);
       rows2.value = rows.value.filter((e: any) => e.orgName !== null);
     })
     .catch((e) => {
-      console.log(typeof e);
+      messageError($q);
+      console.log(e);
     })
     .finally(() => {
       hideLoader();
@@ -149,17 +156,17 @@ const rows = ref<any>([
   // },
 ]);
 const rows2 = ref<any>([
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    citizenId: "1234444332222",
-    fullname: "นางสาวอย พชช",
-    organizationName: "นักจัดการงานทั่วไป",
-    orgName: "กลุ่มงานช่วยนักบริหาร",
-    organizationShortName: "สกจ.",
-    positionNumber: "กก. 1",
-    positionPath: "นักจัดการงานทั่วไป",
-    birthday: dateText(new Date("1989-09-03")),
-  },
+  // {
+  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+  //   citizenId: "1234444332222",
+  //   fullname: "นางสาวอย พชช",
+  //   organizationName: "นักจัดการงานทั่วไป",
+  //   orgName: "กลุ่มงานช่วยนักบริหาร",
+  //   organizationShortName: "สกจ.",
+  //   positionNumber: "กก. 1",
+  //   positionPath: "นักจัดการงานทั่วไป",
+  //   birthday: dateText(new Date("1989-09-03")),
+  // },
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -171,15 +178,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "fullname",
     align: "left",
@@ -190,31 +188,47 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationName",
+    name: "position",
     align: "left",
-    label: "หน่วยงานที่รับโอน",
+    label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "organizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthday",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthday",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -229,15 +243,6 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "fullname",
     align: "left",
@@ -248,34 +253,59 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationName",
+    name: "position",
     align: "left",
-    label: "หน่วยงานที่รับโอน",
+    label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "organizationName",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "birthday",
+    name: "positionLevel",
     align: "left",
-    label: "วัน/เดือน/ปี เกิด",
+    label: "ระดับ",
     sortable: true,
-    field: "birthday",
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-const openModalTree = (id: string) => {
-  personalId.value = id;
-  console.log(personalId.value);
+// const openModalTree = (id: string) => {
+//   personalId.value = id;
+//   console.log(personalId.value);
 
-  personal.value = listRecevice.value.filter((e: any) => e.id === id);
-  modalTree.value = true;
-};
+//   personal.value = listRecevice.value.filter((e: any) => e.id === id);
+//   modalTree.value = true;
+// };
 
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteOther(id));
@@ -427,128 +457,52 @@ const status = (val: string) => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="nextPage(props.row)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="nextPage(props.row)"
+              >
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
+                <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
-                    <div class="col-4">
-                      <div class="text-weight-medium">
-                        {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
-                            : ""
-                        }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          props.row.positionPath !== null
-                            ? props.row.positionPath
-                            : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
-                            ? `(${props.row.positionNumber})`
-                            : ""
-                        }}
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
+                <q-td key="position" :props="props">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                    <!-- <q-tooltip>
+                    {{ props.row.organizationPositionOld }}
+                  </q-tooltip> -->
                   </div>
                 </q-td>
-                <q-td
-                  key="birthday"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.birthday }}
+                <q-td key="organization" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                    <!-- <q-tooltip>
+                    {{ props.row.organization }}
+                  </q-tooltip> -->
+                  </div>
                 </q-td>
-                <q-td key="status" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.status }}
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
-                <q-td auto-width>
+                <q-td key="statustext" :props="props">
                   <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
                     flat
                     round
+                    class="text-red-14"
+                    icon="mdi-delete"
                     dense
+                    @click.stop="clickDelete(props.row.personalId)"
+                    ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                   >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openModalTree(props.row.personalId)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              color="primary"
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section
-                            >เลือกหน่วยงานที่รับโอน</q-item-section
-                          >
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.personalId)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
                 </q-td>
               </q-tr>
             </template>
@@ -659,54 +613,27 @@ const status = (val: string) => {
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
-              <q-td key="citizenId" :props="props" @click="nextPage(props.row)">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props" @click="nextPage(props.row)">
+              <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
-              <q-td
-                key="organizationName"
-                :props="props"
-                @click="nextPage(props.row)"
-              >
-                <div
-                  v-if="
-                    props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                  "
-                >
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                      {{
-                        props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
-                      }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{
-                        props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
-                      }}
-                      {{
-                        props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
                 </div>
               </q-td>
-              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
-                {{ props.row.birthday }}
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
               </q-td>
             </q-tr>
           </template>
@@ -724,12 +651,12 @@ const status = (val: string) => {
     </q-card>
   </q-dialog>
 
-  <DialogOrgTree
+  <!-- <DialogOrgTree
     v-model:modal="modalTree"
     :close="closeModalTree"
     :personal="personal"
     :personalId="personalId"
-  />
+  /> -->
   <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 77c473d6d..258159c26 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -65,14 +65,525 @@
       </div>
     </div>
   </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancel"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white">
+          <div class="col-xs-12 row items-center q-col-gutter-md">
+            <div class="col-xs-12">
+              <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                v-model="informaData.cardid"
+                dense
+                @update:model-value="changeCardID"
+                lazy-rules
+                :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+                :readonly="!edit"
+                :borderless="!edit"
+                label="เลขบัตรประจำตัวประชาชน"
+                maxlength="13"
+                mask="#############"
+              />
+              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                        ) "
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.firstname"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :label="`${'ชื่อ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.lastname"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+                :label="`${'นามสกุล'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <datepicker
+                v-model="informaData.birthDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :max-date="new Date()"
+                :disabled="!edit"
+                @update:model-value="handleDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      informaData.birthDate == null
+                        ? null
+                        : date2Thai(informaData.birthDate)
+                    "
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                    :label="`${'วัน/เดือน/ปี เกิด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(false)"
+                hide-bottom-space
+                dense
+                lazy-rules
+                readonly
+                borderless
+                :style="!edit ? '' : 'padding:0 12px;'"
+                :model-value="informaData.age"
+                :label="`${'อายุ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.genderId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.genderOps"
+                option-value="id"
+                :label="`${'เพศ'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.statusId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานภาพ'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.nationality"
+                :label="`${'สัญชาติ'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.ethnicity"
+                :label="`${'เชื้อชาติ'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.religionId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.religionOps"
+                option-value="id"
+                :label="`${'ศาสนา'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.bloodId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.bloodOps"
+                option-value="id"
+                :label="`${'หมู่เลือด'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก หมู่เลือด'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+                clearable
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                type="tel"
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.tel"
+                :label="`${'เบอร์โทร'}`"
+                mask="##########"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`]"
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeTypeOps"
+                option-value="id"
+                :label="`${'ประเภทการจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                        ) "
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeClass"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeClassOps"
+                option-value="id"
+                :label="`${'ประเภทลูกจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="educationOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิ/สาขา'}`]"
+                hide-bottom-space
+                :label="`${'วุฒิ/สาขา'}`"
+                type="textarea"
+                autogrow
+              />
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+                hide-bottom-space
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
 
+import type { QTableProps, QForm } from "quasar";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -90,8 +601,12 @@ const {
   showLoader,
   hideLoader,
   success,
+  dateToISO,
 } = mixin;
 
+const profileStore = useProfileDataStore();
+const { changeRetireText } = profileStore;
+
 const title = ref<ResponseTitle>({
   fullname: "",
   organizationPositionOld: "",
@@ -99,21 +614,227 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+
+const educationOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const informaData = ref<Information>(defaultInformation);
+const dateBefore = ref<Date>(new Date());
+const defaultCitizenData = ref<string>("");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
 onMounted(async () => {
+  await fetchPerson();
   await getData();
 });
 
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   hideLoader();
+    });
+};
+
 const getData = async () => {
   showLoader();
   await http
     .get(config.API.receiveDataId(paramsId.toString()))
-    .then((res: any) => {
+    .then(async (res: any) => {
       const data = res.data.result;
 
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
+      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
+      informaData.value = {
+        cardid: data.citizenId ?? "",
+        age: "",
+        prefix: "",
+        prefixId:
+          (data.prefixId == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.prefixId) ?? "",
+        firstname: data.firstname ?? "",
+        lastname: data.lastname ?? "",
+        birthDate:
+          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
+        genderId:
+          (data.gender == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.gender) ?? "",
+        bloodId:
+          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.bloodGroup) ?? "",
+        nationality: data.nationality ?? "",
+        ethnicity: data.race ?? "",
+        statusId:
+          (data.relationship == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.relationship) ?? "",
+        religionId:
+          (data.religion == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.religion) ?? "",
+        tel: data.telephoneNumber ?? "",
+        employeeType: "",
+        employeeClass: "",
+        profileType: "",
+      };
+      educationOld.value = data.educationOld ?? "";
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.amountOld ?? 0;
+      reason.value = data.reason ?? "";
+
+      await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
+      dateBefore.value = new Date(data.dateOfBirth);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const cancel = async () => {
+  edit.value = !edit.value;
+  if (myForm.value !== null) {
+    await getData();
+    myForm.value.reset();
+  }
+};
+
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+      //   informaData.value.cardid = defaultCitizenData.value;
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  console.log("String");
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -122,6 +843,164 @@ const getData = async () => {
       hideLoader();
     });
 };
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  //   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+  showLoader();
+  await http
+    .post(config.API.profileCalRetire, body)
+    .then((res: any) => {
+      const data = res.data.result;
+      informaData.value.age = data.age;
+      changeRetireText(data.retireDate);
+      dateBefore.value = birth;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+      informaData.value.birthDate = dateBefore.value;
+      changeRetireText(date2Thai(retire));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  //   }
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstname: informaData.value.firstname,
+    lastname: informaData.value.lastname,
+    dateOfBirth:
+      informaData.value.birthDate !== null
+        ? dateToISO(informaData.value.birthDate)
+        : null,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    reason: reason.value,
+    educationOld: educationOld.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amount: 0,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.receiveDataId(route.params.id.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 17d810e34..7843f42d5 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -1,39 +1,40 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import { useRouter } from "vue-router";
 import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { showLoader, hideLoader, dateText, success, messageError, date2Thai } =
-  mixin;
 
-const selected = ref([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-const add = () => {
-  router.push(`/receive/add`);
-};
-
-const clickClose = () => {
-  modal.value = false;
-};
+import type { QTableProps } from "quasar";
+import type {
+  ResponseData,
+  ResponseRow,
+} from "@/modules/05_placement/interface/response/Receive";
 
 const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
+
+const selected = ref<ResponseRow[]>([]);
+
 const modal = ref<boolean>(false);
 const popup = () => {
   modal.value = true;
 };
-const router = useRouter();
 
 const modalTree = ref<boolean>(false);
 const personal = ref<any[]>([]);
@@ -56,57 +57,10 @@ const visibleColumns2 = ref<string[]>([
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-onMounted(() => {
-  fecthlistRecevice();
-});
-const listRecevice = ref<any>([]);
-const fecthlistRecevice = async () => {
-  showLoader();
-  await http
-    .get(config.API.receiveData())
-    .then((res) => {
-      let response = res.data.result;
-      listRecevice.value = response;
-      // console.log(response);
-      rows.value = response.map((e: any) => ({
-        personalId: e.id,
-        citizenId: e.citizenId,
-        fullname: e.firstname + "  " + e.lastname,
-        organizationName:
-          e.organizationName +
-          " " +
-          e.organizationShortName +
-          " " +
-          e.positionNumber +
-          " " +
-          e.positionPath,
-        orgName: e.organizationName,
-        organizationShortName: e.organizationShortName,
-        positionNumber: e.positionNumber,
-        positionPath: e.positionPath,
-        birthday: date2Thai(e.dateOfBirth),
-      }));
-      // console.log(rows.value);
-      rows2.value = rows.value.filter((e: any) => e.orgName !== null);
-    })
-    .catch((e) => {
-      console.log(typeof e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 
-
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<any>([
+const listRecevice = ref<any[]>([]);
+const filters = ref<ResponseRow[]>([]);
+const rows = ref<ResponseRow[]>([
   // {
   //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
   //   citizenId: "1234444332222",
@@ -119,18 +73,18 @@ const rows = ref<any>([
   //   birthday: dateText(new Date("1989-09-03")),
   // },
 ]);
-const rows2 = ref<any>([
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    citizenId: "1234444332222",
-    fullname: "นางสาวอย พชช",
-    organizationName: "นักจัดการงานทั่วไป",
-    orgName: "กลุ่มงานช่วยนักบริหาร",
-    organizationShortName: "สกจ.",
-    positionNumber: "กก. 1",
-    positionPath: "นักจัดการงานทั่วไป",
-    birthday: dateText(new Date("1989-09-03")),
-  },
+const rows2 = ref<ResponseRow[]>([
+  //   {
+  //     personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+  //     citizenId: "1234444332222",
+  //     fullname: "นางสาวอย พชช",
+  //     organizationName: "นักจัดการงานทั่วไป",
+  //     orgName: "กลุ่มงานช่วยนักบริหาร",
+  //     organizationShortName: "สกจ.",
+  //     positionNumber: "กก. 1",
+  //     positionPath: "นักจัดการงานทั่วไป",
+  //     birthday: dateText(new Date("1989-09-03")),
+  //   },
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -231,6 +185,77 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+onMounted(() => {
+  fecthlistRecevice();
+});
+
+const fecthlistRecevice = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveData())
+    .then((res: any) => {
+      const response = res.data.result;
+      listRecevice.value = response;
+      //   console.log(response);
+      let list: ResponseRow[] = [];
+      response.map((e: ResponseData) => {
+        list.push({
+          personalId: e.id ?? "",
+          citizenId: e.citizenId ?? "-",
+          fullname: e.firstname + "  " + e.lastname,
+          organizationName:
+            e.organizationName +
+            " " +
+            e.organizationShortName +
+            " " +
+            e.positionNumber +
+            " " +
+            e.positionPath,
+          orgName: e.organizationName,
+          organizationShortName: e.organizationShortName,
+          positionNumber: e.positionNumber,
+          positionPath: e.positionPath,
+          birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+          status: e.status,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const row = filters.value.filter(
+  (r: ResponseRow) =>
+    r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+);
+rows2.value = row;
+
+const add = () => {
+  router.push(`/receive/add`);
+};
+
+const clickClose = () => {
+  modal.value = false;
+};
+
 const openModalTree = (id: string) => {
   personalId.value = id;
   console.log(personalId.value);
@@ -240,31 +265,33 @@ const openModalTree = (id: string) => {
 };
 
 const openDelete = (id: string) => {
-  console.log(id);
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    async () => await fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
 
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.receiveDataId(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          fecthlistRecevice();
-          hideLoader();
-        });
+const fetchDataDelete = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.receiveDataId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
     })
-    .onCancel(() => {});
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fecthlistRecevice();
+      hideLoader();
+    });
 };
 
 const closeModalTree = async () => {
@@ -277,6 +304,30 @@ const nextPage = (row: any) => {
     path: `/receive/${row.personalId}`,
   });
 };
+
+const saveOrder = async () => {
+  const id = selected.value.map((r: any) => r.personalId);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.receiveReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
+      clickClose();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlistRecevice();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
@@ -626,7 +677,7 @@ const nextPage = (row: any) => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 65ea2e171..26188ce8b 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -497,7 +497,7 @@ const getData = async () => {
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.posNo ?? "";
-      salary.value = data.salary ?? "";
+      salary.value = data.salary ?? 0;
       organization.value = data.organization ?? "";
       date.value = data.date !== null ? new Date(data.date) : null;
       reason.value = data.reason ?? "";
diff --git a/src/modules/05_placement/interface/response/Receive.ts b/src/modules/05_placement/interface/response/Receive.ts
index 1c013c07d..58f940740 100644
--- a/src/modules/05_placement/interface/response/Receive.ts
+++ b/src/modules/05_placement/interface/response/Receive.ts
@@ -1,5 +1,3 @@
-import { type } from "os";
-
 interface ResponseTitle {
   fullname: string;
   organizationPositionOld: string;
@@ -7,4 +5,53 @@ interface ResponseTitle {
   positionTypeOld: string;
 }
 
-export type { ResponseTitle };
+interface ResponseRow {
+  personalId: string;
+  citizenId: string;
+  fullname: string;
+  organizationName: string;
+  orgName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  birthday: string | null;
+  status: string;
+}
+
+interface ResponseData {
+  citizenId: string;
+  createdAt: Date;
+  dateOfBirth: Date;
+  educationOld: string;
+  firstname: string;
+  gender: string;
+  id: string;
+  isActive: boolean;
+  lastname: string;
+  organizationName: string;
+  organizationPositionId: string;
+  organizationPositionOld: string;
+  organizationShortName: string;
+  posNoId: string;
+  positionId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionLevelOld: string;
+  positionLine: string;
+  positionLineId: string;
+  positionNumber: string;
+  positionNumberOld: string;
+  positionPath: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionTypeOld: string;
+  prefix: string;
+  reason: string;
+  recruitDate: Date;
+  salary: number;
+  status: string;
+}
+
+export type { ResponseTitle, ResponseData, ResponseRow };
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 6f085d55d..7554dbc6d 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,34 +1,57 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ResponseInbox,
+  DataInbox,
+} from "@/interface/response/dashboard/dashboard";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
+
 const iteminbox = ref<any>([]);
 const splitterModel = ref<number>(30);
-const link = ref<number>(1);
-const inboxList = ref<any>([
+const link = ref<string>("0");
+const inboxList = ref<DataInbox[]>([
   {
-    no: 1,
+    no: "1",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
     ratingModel: 0,
   },
   {
-    no: 2,
+    no: "2",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-    ratingModel: 1,
+    ratingModel: 0,
   },
 ]);
-const data = ref<any>([
-  {
-    no: 1,
-    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
-    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  },
+const data = ref<DataInbox[]>([
+  //   {
+  //     no: "1",
+  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
+  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
+  //     timereceive: new Date(),
+  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
+  //     ratingModel: 0,
+  //   },
 ]);
 const btnReply = ref<boolean>(true);
 const listpayload = ref<any>([]);
@@ -51,6 +74,46 @@ const barStyle = ref<any>({
   width: "9px",
   opacity: 0.2,
 });
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgInbox)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log(response);
+      let list: DataInbox[] = [];
+      response.map((e: ResponseInbox) => {
+        list.push({
+          no: e.id ?? "",
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"
+              : e.createdFullName,
+          subject: e.subject ?? "",
+          timereceive: new Date(e.createdAt),
+          body: e.body ?? "",
+          ratingModel: 0,
+        });
+      });
+      inboxList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const selectInbox = (id: string) => {
+  link.value = id;
+  data.value = inboxList.value.filter((r) => r.no == id);
+};
 </script>
 
 <!-- page:หน้าแรก -->
@@ -88,10 +151,11 @@ const barStyle = ref<any>({
               class="mytry"
               :active="link === contact.no"
               active-class="my-menu-link"
+              @click="selectInbox(contact.no)"
             >
               <q-item-section>
                 <q-item-label caption class="text-weight-light">{{
-                  contact.timereceive
+                  date2Thai(contact.timereceive)
                 }}</q-item-label>
                 <q-item-label class="text-weight-medium">{{
                   contact.sender
@@ -174,7 +238,9 @@ const barStyle = ref<any>({
               </q-item-section>
 
               <q-item-section side top>
-                <q-item-label caption>{{ d.timereceive }}</q-item-label>
+                <q-item-label caption>{{
+                  date2Thai(d.timereceive)
+                }}</q-item-label>
                 <div class="text-grey-8 q-gutter-xs q-pt-sm">
                   <q-btn
                     flat
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 04eee3f99..056b56a06 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -5,6 +5,11 @@ import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   ScrollType,
   notiType,
@@ -21,6 +26,15 @@ const store = useDataStore();
 const route = useRoute();
 const router = useRouter();
 const link = ref<string>("");
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
 
 const $q = useQuasar();
 const { tabData, loader } = storeToRefs(store);
@@ -38,10 +52,10 @@ const text = ref<string>("");
 
 const notiList = ref<notiType[]>([
   {
-    id: 1,
+    id: "1",
     sender: "ท",
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
   },
 ]);
 const options = ref<optionType[]>([
@@ -64,6 +78,36 @@ const options = ref<optionType[]>([
     color: "indigo",
   },
 ]);
+
+const getDataNotification = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgNotificate)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log("response", response);
+      let list: notiType[] = [];
+      response.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"[0]
+              : e.createdFullName[0],
+          body: e.body ?? "",
+          timereceive: new Date(e.createdAt),
+        });
+      });
+      notiList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
  */
@@ -166,7 +210,8 @@ const activeBtn = () => {
  * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
  * ยังจับ boolean ผิด จึงต้อง set
  */
-onMounted(() => {
+onMounted(async () => {
+  await getDataNotification();
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -221,7 +266,8 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
-  if (path == "registry" && route.fullPath == "/registry-employee") return false;
+  if (path == "registry" && route.fullPath == "/registry-employee")
+    return false;
   if (path == "registry" && route.fullPath == "/") return false;
   // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
   const bool = route.fullPath.includes(`/${path}`);
@@ -427,7 +473,7 @@ if (keycloak.tokenParsed != null) {
                     n.body
                   }}</q-item-label>
                   <q-item-label caption class="row items-center text-grey-7">{{
-                    n.timereceive
+                    date2Thai(n.timereceive)
                   }}</q-item-label>
                 </q-item-section>
                 <q-btn