diff --git a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
index 6935217bb..bbcfa6126 100644
--- a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
@@ -47,11 +47,7 @@ let dataForm = reactive({
   positionTypeId: "",
 });
 
-onMounted(async () => {
-  await fetchPublishFile();
-  await loadTreeData();
-  await fetchplacementPosition();
-});
+
 const fetchPublishFile = async () => {
   await http
     .get(config.API.getPublishFileHistory)
@@ -220,7 +216,7 @@ const closeAndClear = async () => {
   dataForm.positionPathSideId = "";
   dataForm.positionTypeId = "";
 };
-// ตำแหน่งเลขที่
+// เลขที่ตำแหน่ง
 const posNoOptions = ref<Object[]>([
   {
     label: "",
@@ -396,6 +392,12 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  // await fetchplacementPosition();
+});
 </script>
 
 <template>
@@ -600,7 +602,7 @@ function findByPerson(element: any): any {
                         lazy-rules
                         :options="posNoOptions"
                         v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
                         map-options
                       />
                     </div>
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index 2fb0e0edb..7e81501ea 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -1,6 +1,6 @@
 divdivdiv
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,11 +9,18 @@ import type { ResponseTitle } from "@/modules/05_placement/interface/response/Re
 import type {
   appointmentData,
   ResponseData,
+  DataProfile,
 } from "@/modules/05_placement/interface/response/AppointMent";
 import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import CardProfile from "@/components/CardProfile.vue";
+
+const formData = reactive<any>({
+  firstName: "",
+  lastName: "",
+});
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -22,12 +29,8 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const appointment = ref<appointmentData>({
-  citizenId: "",
-  prefixId: "",
-  firstname: "",
-  lastname: "",
-});
+const dataProfile = ref<DataProfile>();
+
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 const profileId = ref<string>("");
@@ -64,9 +67,13 @@ const fecthappointmentByid = async () => {
   showLoader();
   await http
     .get(config.API.appointmentByid(paramsId.toString()))
-    .then((res: ResponseData) => {
+    .then((res) => {
+      dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
-      appointment.value = data;
+
+      formData.firstName = data.firstName
+      formData.lastName = data.lastName
+      
       profileId.value = data.profileId;
       title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
         data.lastname ?? "-"
@@ -111,10 +118,10 @@ const clickSave = async () => {
 // เเก้ไขข้อมูล
 const putAppointment = async () => {
   let data = {
-    citizenId: appointment.value.citizenId,
-    prefixId: appointment.value.prefixId,
-    firstname: appointment.value.firstname,
-    lastname: appointment.value.lastname,
+    // CitizenId: appointment.value.citizenId,
+    // prefixId: appointment.value.prefixId,
+    Firstname: formData.firstName,
+    Lastname: formData.lastName,
     educationOld: educationOld.value,
     organizationPositionOld: organizationPositionOld.value,
     positionTypeOld: positionTypeOld.value,
@@ -177,56 +184,7 @@ onMounted(async () => {
     />
     รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย {{ title.fullname }}
   </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ title.fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="avatar" v-if="avatar !== ''" />
-          <q-img src="@/assets/avatar_user.jpg" v-else />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ title.positionTypeOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ title.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ title.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <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">
@@ -341,9 +299,9 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
                 hide-bottom-space
-                :label="`${'ระดับ'}`"
+                :label="`${'ประเภทตำแหน่ง'}`"
               />
             </div>
           </div>
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index 98c6ff0a2..3558340ba 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -16,6 +16,15 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
+
+const title = ref<string>("");
+const posType = ref<string>("");
+const posLevel = ref<string>("");
+const position = ref<string>("");
+const typeModal = ref<string | null>(null);
+const dataRows = ref<any[]>([]);
+
 const $q = useQuasar();
 const modal = ref<boolean>(false);
 const storeFn = useTransferDataStore();
@@ -48,7 +57,7 @@ const visibleColumns = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday",
+  "dateOfBirth",
   "createdAt",
   "status",
 ]);
@@ -96,11 +105,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "birthday",
+    name: "dateOfBirth",
     align: "left",
     label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "birthday",
+    field: "dateOfBirth",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -152,33 +161,35 @@ const fecthlistappointment = async () => {
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
-      rows.value = response.map((e: resData) => ({
-        personalId: e.id,
-        citizenId: e.citizenId,
-        fullname: e.prefix + 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,
-        status: statusText(e.status),
-        createdAt: date2Thai(e.createdAt),
-        birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
-        educationOld: e.educationOld,
-        organizationPositionOld: e.organizationPositionOld,
-        positionTypeOld: e.positionTypeOld,
-        positionLevelOld: e.positionLevelOld,
-        positionNumberOld: e.positionNumberOld,
-        salary: e.salary,
-        positionDate: e.positionDate,
-      }));
+      rows.value = response;
+      // rows.value = response.map((e: resData) => ({
+      //   personalId: e.id,
+      //   citizenId: e.citizenId,
+      //   fullname: e.prefix + 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,
+      //   status: statusText(e.status),
+      //   createdAt: date2Thai(e.createdAt),
+      //   birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+      //   educationOld: e.educationOld,
+      //   organizationPositionOld: e.organizationPositionOld,
+      //   positionTypeOld: e.positionTypeOld,
+      //   positionLevelOld: e.positionLevelOld,
+      //   positionNumberOld: e.positionNumberOld,
+      //   salary: e.salary,
+      //   positionDate: e.positionDate,
+      // }));
+
       rows2.value = rows.value.filter(
         (e: orgFilter) =>
           e.orgName !== null &&
@@ -220,10 +231,14 @@ const fecthTypeOption = async () => {
 };
 
 // เปิดโครงสร้าง
-const openModalTree = (id: string) => {
-  personalId.value = id;
-  personal.value = listRecevice.value.filter((e) => e.id === id);
+const openModalTree = (data: any, type: string) => {
+  personalId.value = data.id
   modalTree.value = true;
+  typeModal.value = type;
+  dataRows.value = data;
+  posType.value = data.posTypeId;
+  posLevel.value = data.posLevelId;
+  position.value = data.positionName;
 };
 //เเจ้งเตือนลบข้อมูล
 const clickDelete = (id: string) => {
@@ -260,6 +275,42 @@ const nextPage = (id: string) => {
   });
 };
 
+function onSave(data: any) {
+  console.log("not save", data);
+  const dataAppoint = {
+    // personalId: data.personalId,
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+    typeCommand: data.typeCommand,
+  };
+
+  showLoader();
+  http
+    .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+    .then((res) => {
+      modalTree.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      fecthlistappointment();
+      hideLoader();
+    });
+}
+
+
 onMounted(() => {
   fecthlistappointment();
 });
@@ -343,88 +394,60 @@ onMounted(() => {
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td
-                  key="no"
+                  v-for="col in props.cols"
+                  :key="col.name"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row.id)"
                 >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'fullname'">
+                    {{
+                      props.row.firstName
+                        ? `${props.row.prefix ?? ""}${
+                            props.row.firstName ?? ""
+                          } ${props.row.lastName ?? ""}`
+                        : "-"
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'dateOfBirth'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'organizationName'">
                     <div class="col-4">
                       <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
                             : ""
                         }}
                       </div>
                       <div class="text-weight-light">
                         {{
-                          props.row.positionPath !== null
-                            ? props.row.positionPath
-                            : "-"
+                          props.row.nodeName !== null ? props.row.nodeName : ""
                         }}
                         {{
-                          props.row.positionNumber !== null
-                            ? `(${props.row.positionNumber})`
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                             : ""
                         }}
                       </div>
                     </div>
                   </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
+                  <div v-else-if="col.name == 'createdAt'">
+                    {{
+                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
                   </div>
-                </q-td>
-                <q-td
-                  key="birthday"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.birthday }}
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="status"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
@@ -447,7 +470,12 @@ onMounted(() => {
                         <q-item
                           clickable
                           v-close-popup
-                          @click="openModalTree(props.row.personalId)"
+                          @click="
+                            openModalTree(
+                              props.row,
+                              'APPOINT'
+                            )
+                          "
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -460,12 +488,19 @@ onMounted(() => {
                               name="mdi-bookmark-outline"
                             />
                           </q-item-section>
-                          <q-item-section>เลือกหน่วยงานที่รับแต่งตั้ง</q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับแต่งตั้ง</q-item-section
+                          >
                         </q-item>
                         <q-item
                           clickable
                           v-close-popup
-                          @click="openModalTree(props.row.personalId)"
+                          @click="
+                            openModalTree(
+                              props.row,
+                              'SLIP'
+                            )
+                          "
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -478,12 +513,19 @@ onMounted(() => {
                               name="mdi-bookmark-outline"
                             />
                           </q-item-section>
-                          <q-item-section>เลือกหน่วยงานที่รับเลื่อน</q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับเลื่อน</q-item-section
+                          >
                         </q-item>
                         <q-item
                           clickable
                           v-close-popup
-                          @click="openModalTree(props.row.personalId)"
+                          @click="
+                            openModalTree(
+                              props.row,
+                              'MOVE'
+                            )
+                          "
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -496,7 +538,9 @@ onMounted(() => {
                               name="mdi-bookmark-outline"
                             />
                           </q-item-section>
-                          <q-item-section>เลือกหน่วยงานที่รับย้าย</q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับย้าย</q-item-section
+                          >
                         </q-item>
                         <q-item
                           clickable
@@ -535,11 +579,23 @@ onMounted(() => {
     :nextPage="nextPage"
     :fecthlistappointment="fecthlistappointment"
   />
-  <DialogOrgTree
+
+  <!-- <DialogOrgTree
     v-model:modal="modalTree"
     :close="closeModalTree"
     :personal="personal"
     :personalId="personalId"
+  /> -->
+
+  <DialogOrgSelect
+    :title="`เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย`"
+    v-model:modal="modalTree"
+    v-model:type="typeModal"
+    :posType="posType"
+    :posLevel="posLevel"
+    :position="position"
+    :dataRows="dataRows"
+    :onSubmit="onSave"
   />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/interface/response/AppointMent.ts b/src/modules/05_placement/interface/response/AppointMent.ts
index d24f958ed..dc5eda8ac 100644
--- a/src/modules/05_placement/interface/response/AppointMent.ts
+++ b/src/modules/05_placement/interface/response/AppointMent.ts
@@ -94,12 +94,42 @@ interface ResponseData {
     };
   };
 }
+interface DataProfile {
+  child1: string | null;
+  child1ShortName: string | null;
+  child2: string | null;
+  child2ShortName: string | null;
+  child3: string | null;
+  child3ShortName: string | null;
+  child4: string | null;
+  child4ShortName: string | null;
+  createdAt: string | Date;
+  dateEnd: string | Date;
+  dateStart: string | Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  organization: string;
+  organizationPositionOld: string;
+  posLevelName: string;
+  posMasterNo: number | null;
+  posTypeName: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  root: string;
+  rootShortName: string | null;
+  status: string;
+}
 export type {
   listAppointType,
   resData,
   orgFilter,
   appointmentData,
   UserData,
-  ResponseData
+  ResponseData,
+  DataProfile
 
 }
\ No newline at end of file