diff --git a/src/components/CardProfile.vue b/src/components/CardProfile.vue
new file mode 100644
index 000000000..e73dbbab3
--- /dev/null
+++ b/src/components/CardProfile.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { FormProfile } from "@/interface/main";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+
+/** importComponents*/
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+
+/** impoerStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { messageError, findOrgName } = useCounterMixin();
+
+/** propsDataProfile*/
+const props = defineProps({
+  data: { type: Object, required: true },
+});
+
+const profile = reactive<FormProfile>({
+  id: "",
+  avatar: "",
+  fullName: "",
+  position: "",
+  positionLevel: "",
+  organization: "",
+});
+const modalPersonal = ref<boolean>(false);
+
+function fetchDataProfile(data: DataProfile) {
+  fetchProfile(data.profileId);
+  profile.id = data.profileId;
+  profile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
+  profile.position = data.position !== "" ? data.position : "-";
+  profile.positionLevel = `${data.posTypeName} (${data.posLevelName})`;
+  profile.organization = findOrgName(data);
+}
+
+function fetchProfile(id: string) {
+  if (profile.avatar === "") {
+    http
+      .get(
+        config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
+      )
+      .then(async (res) => {
+        profile.avatar = res.data.downloadUrl;
+      })
+      .catch((e) => {
+        if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
+          profile.avatar = "";
+        } else {
+          messageError($q, e);
+        }
+      });
+  }
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
+function onclickViewinfo() {
+  modalPersonal.value = true;
+}
+
+watch(
+  () => props.data,
+  () => {
+    const dataMain = props.data as DataProfile;
+    fetchDataProfile(dataMain);
+  }
+);
+</script>
+
+<template>
+  <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">
+        {{ profile.fullName }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="onclickViewinfo()"
+      />
+    </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="profile.avatar" v-if="profile.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">
+              {{ profile.position }}
+            </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">
+              {{ profile.positionLevel }}
+            </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">
+              {{ profile.organization }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="profile.id"
+    @update:modal="updatemodalPersonal"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index d9664e4cb..df0e8794a 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -142,7 +142,7 @@ async function fetchProfileGov(id: string) {
       goverment.positionType = data.posType !== "" ? data.posType : "-";
       goverment.positionLevel = data.posLevel !== "" ? data.posLevel : "-";
       goverment.positionExecutive =
-        data.posExecutive !== "" ? data.posExecutive : "-";
+        data.posExecutive !== null ? data.posExecutive : "-";
       goverment.positionExecutiveSide =
         data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
     })
@@ -172,9 +172,12 @@ watch(
   async () => {
     modal.value = props.modal ? props.modal : false;
     if (modal.value) {
-      props.id && (fetchInformation(props.id), fetchProfileGov(props.id));
-      (fileName.value = `profile-${props.id}`),
+      if (props.id) {
+        fetchInformation(props.id);
+        fetchProfileGov(props.id);
+        fileName.value = `profile-${props.id}`;
         fetchProfile(props.id as string);
+      }
     }
   }
 );
@@ -214,11 +217,6 @@ async function fetchProfile(id: string) {
           style="color: red; background-color: #ffdede"
         />
       </q-toolbar>
-      <!-- <q-card-section>
-        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
-        <q-space />
-
-      </q-card-section> -->
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
diff --git a/src/interface/main.ts b/src/interface/main.ts
index cb2e79ee5..21a88d9d6 100644
--- a/src/interface/main.ts
+++ b/src/interface/main.ts
@@ -2,5 +2,13 @@ interface DataOption {
   id: string;
   label: string;
 }
+interface FormProfile {
+  id: string;
+  avatar: string;
+  fullName: string;
+  position: string;
+  positionLevel: string;
+  organization: string;
+}
 
-export type { DataOption };
+export type { DataOption, FormProfile };
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 68f398dfb..864bf2f71 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,21 +1,21 @@
-div
 <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 CurrencyInput from "@/components/CurruncyInput.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importTypr*/
 import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-const modalPersonal = ref<boolean>(false);
-const personalId = ref<string>("");
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -33,56 +33,42 @@ const {
 
 const myForm = ref<QForm | null>(null);
 
-const personId = ref<string>("");
+const dataProfile = ref<DataProfile>();
+
 const fullname = ref<string>("");
-const id = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const date = ref<Date | null>(null);
-const salary = ref<number>(0);
+
+/** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
+const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const avatar = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
 const dateRepatriation = ref<Date | null>(null);
+const reason = ref<string>("");
+const status = ref<string>("");
 
-const getData = async () => {
+/** fetch ข้อมูลรายละเอียด*/
+const getData = () => {
   showLoader();
-  await http
+  http
     .get(config.API.repatriationDetail(dataId))
     .then((res: ResponseData) => {
       const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      personId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
 
-      position.value = data.position ?? "-";
-      posNo.value = data.posNo;
-      positionLevel.value = `${data.posTypeName}(${data.posLevelName})`;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      date.value = data.date;
-      salary.value = data.salary;
+      organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
+      salary.value = data.salary;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      date.value = data.date;
       dateRepatriation.value = data.dateRepatriation;
-      fetchProfile(data.profileId);
+      status.value = data.status;
     })
     .catch((e) => {
       messageError($q, e);
@@ -92,26 +78,46 @@ const getData = async () => {
     });
 };
 
-function fetchProfile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-    )
-    .then(async (res) => {
-      avatar.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
-        avatar.value = "";
-      } else {
-        messageError($q, e);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+const onSubmit = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: positionNumberOld.value,
+        amountOld: salary.value,
+        organization: organization.value,
+        date: date.value,
+        dateRepatriation: dateRepatriation.value,
+        reason: reason.value,
+      };
+      showLoader();
+      http
+        .put(config.API.repatriationMainEdit(dataId), body)
+        .then(() => {
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+          getData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+
+const cancelBtn = () => {
+  edit.value = !edit;
+  getData();
+  myForm.value?.resetValidation();
+};
 
 const getClass = (val: boolean) => {
   return {
@@ -120,64 +126,8 @@ const getClass = (val: boolean) => {
   };
 };
 
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-const cancelBtn = () => {
-  edit.value = !edit;
+onMounted(() => {
   getData();
-  myForm.value?.resetValidation();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-    dateRepatriation: dateRepatriation.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.repatriationMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personalId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
 });
 </script>
 
@@ -195,99 +145,58 @@ onMounted(async () => {
     />
     รายละเอียดการส่งตัวกลับ {{ 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">
-        {{ fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(personId)"
-      />
-    </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 v-else src="@/assets/avatar_user.jpg" />
-        </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">
-              {{ position }}
-            </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">
-              {{ positionLevel }}
-            </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">
-              {{ organization }}
-            </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">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <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"
+            v-if="!(status == 'REPORT' || status == 'DONE')"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancelBtn"
+          />
+        </div>
       </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"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
-      </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="cancelBtn"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
+      <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-12 row items-center">
@@ -351,7 +260,7 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="posNo"
+                v-model="positionNumberOld"
                 :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
                 hide-bottom-space
                 :label="`${'เลขที่'}`"
@@ -501,12 +410,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personalId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index aa3e2b197..d08ebd712 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -2,21 +2,25 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** importType*/
 import type { QForm } from "quasar";
 import type { resHelpDetail } from "@/modules/05_placement/interface/response/officer";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** impoerStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const edit = ref<boolean>(false);
-const dataId = route.params.id as string;
 const {
   date2Thai,
   dialogConfirm,
@@ -27,55 +31,35 @@ const {
 } = mixin;
 
 const myForm = ref<QForm | null>(null);
-const fullname = ref<string>("");
-const id = ref<string>("");
-const profileId = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const dateStart = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
-const salary = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const isActive = ref<string>("");
-const avatar = ref<string>("");
+const edit = ref<boolean>(false);
+const dataId = route.params.id as string;
+const dataProfile = ref<DataProfile>();
 
-const getData = async () => {
+const fullname = ref<string>("");
+
+/** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
+const organizationPositionOld = ref<string>(""); //ตำแหน่งและหน่วยงานเดิม
+const organization = ref<string>(""); //หน่วยงานเดิม
+const dateStart = ref<Date | null>(null); //ตั้งแต่วันที่
+const dateEnd = ref<Date | null>(null); // ถึงวันที่
+const reason = ref<string>(""); //หมายเหตุ
+const status = ref<string>("");
+
+/** fetch ข้อมูลรายละเอียด*/
+const getData = () => {
   showLoader();
-  await http
+  http
     .get(config.API.officerDetail(dataId))
     .then((res: resHelpDetail) => {
       const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      profileId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
-      position.value = data.position ?? "-";
-      posNo.value = data.posNo;
-      positionLevel.value = `${data.posTypeName}(${data.posLevelName})`;
-      createdAt.value = data.createdAt;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
+      organizationPositionOld.value = data.organizationPositionOld;
       organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
       dateStart.value = data.dateStart;
       dateEnd.value = data.dateEnd;
-      positionTypeOld.value = data.position;
-      positionLevelOld.value = `${data.posTypeName}(${data.posLevelName})`;
-      positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
-      fetchProfile(data.profileId);
+      reason.value = data.reason;
+      status.value = data.status;
     })
     .catch((e) => {
       messageError($q, e);
@@ -85,26 +69,47 @@ const getData = async () => {
     });
 };
 
-function fetchProfile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-    )
-    .then(async (res) => {
-      avatar.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
-        avatar.value = "";
-      } else {
-        messageError($q, e);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+/** บันทึกข้อมูล*/
+const onSubmit = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        organization: organization.value,
+        dateStart: dateStart.value,
+        dateEnd: dateEnd.value,
+        reason: reason.value,
+        // positionTypeOld: positionTypeOld.value,
+        // positionLevelOld: positionLevelOld.value,
+        // positionNumberOld: posNo.value,
+        // amountOld: salary.value,
+      };
+      showLoader();
+      http
+        .put(config.API.officerMainEdit(dataId), body)
+        .then(() => {
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          getData();
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+
+const cancelBtn = () => {
+  edit.value = !edit;
+  myForm.value?.resetValidation();
+  getData();
+};
 
 const getClass = (val: boolean) => {
   return {
@@ -112,66 +117,9 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-//
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
 
-const cancelBtn = () => {
-  edit.value = !edit;
+onMounted(() => {
   getData();
-  myForm.value?.resetValidation();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    dateStart: dateStart.value,
-    dateEnd: dateEnd.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.officerMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
 });
 </script>
 
@@ -189,97 +137,58 @@ onMounted(async () => {
     />
     รายละเอียดการช่วยราชการ {{ 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">{{ 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">
-              {{ position }}
-            </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">
-              {{ positionLevel }}
-            </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">
-              {{ organization }}
-            </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">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <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"
+            v-if="!(status == 'REPORT' || status == 'DONE')"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancelBtn"
+          />
+        </div>
       </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"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
-      </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="cancelBtn"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm" class="window-width">
+      <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-12 row items-center">
@@ -427,12 +336,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 6a6dbe0c3..759b0b69f 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -211,6 +211,36 @@ interface Assign {
   createdAt: Date;
   updatedAt: Date;
 }
+
+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 {
   DataOption,
   DataOptionInsignia,
@@ -231,6 +261,7 @@ export type {
   Certificate,
   Assign,
   AddressData,
+  DataProfile,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };