From fcb444db770ce1010c2ae15c14ee020854bbe7c0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 16 Oct 2024 09:28:54 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B8=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=89=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Workflow/Main.vue              |    1 -
 .../AppointEmployee/AppointEmployeeDetail.vue |  444 +++----
 .../AppointMent/AppointMentDetail.vue         |  453 +++----
 .../Help-Government/HelpGovernmentDetail.vue  |  396 ++++---
 .../components/Other/OtherDetail.vue          |  537 ++++-----
 .../components/Receive/receiveDetail.vue      | 1049 +++++++++--------
 .../Repatriate/RepatriateDetail.vue           |  538 ++++-----
 .../05_placement/views/03_receiveMain.vue     |    1 -
 .../views/04_helpGovernmentMain.vue           |    1 -
 .../05_placement/views/05_repatriateMain.vue  |    1 -
 .../views/06_appointPromoteMain.vue           |    1 -
 .../views/07_appointEmployeeMain.vue          |    1 -
 .../05_placement/views/08_otherMain.vue       |    1 -
 13 files changed, 1721 insertions(+), 1703 deletions(-)

diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 1bf8bf2ed..ef2ed51ec 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -47,7 +47,6 @@ const itemState = ref<any[]>([
 
 function fetchData() {
   console.log(id, sysName);
-
   const data = {
     stateNo: 1,
     step: 1,
diff --git a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
index b0fc6b38d..2c25a9b55 100644
--- a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
@@ -164,225 +164,75 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/appoint-employee`)"
-    />
-    รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ fullName }}
-  </div>
-
-  <CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
-
-  <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
-        v-if="
-          status !== 'DONE' &&
-          status !== 'REPORT' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-      >
-        <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="clickSave"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="cancel()"
-          />
-        </div>
-      </div>
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/appoint-employee`)"
+      />
+      รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ fullName }}
     </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
-      <div class="row col-12 q-pa-md">
-        <div class="col-12">
-          <div class="text-weight-bold">วุฒิการศึกษา</div>
+
+    <CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
+
+    <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>
-        <div class="col-12">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="educationOld"
-            :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-            hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`"
-            type="text"
-          />
+        <q-space />
+        <div
+          v-if="
+            status !== 'DONE' &&
+            status !== 'REPORT' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+        >
+          <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="clickSave"
+            />
+            <q-btn
+              outline
+              color="red"
+              dense
+              class="q-px-sm"
+              label="ยกเลิก"
+              style="width: 80px"
+              @click="cancel()"
+            />
+          </div>
         </div>
       </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 q-pa-md items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :class="getClass(edit)"
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></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
-                    :borderless="!edit"
-                    :readonly="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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 class="col-12"><q-separator /></div>
+      <q-form ref="myForm">
+        <div class="row col-12 q-pa-md">
+          <div class="col-12">
+            <div class="text-weight-bold">วุฒิการศึกษา</div>
           </div>
           <div class="col-12">
             <q-input
@@ -392,16 +242,168 @@ onMounted(() => {
               lazy-rules
               :readonly="!edit"
               :borderless="!edit"
-              v-model="reason"
+              v-model="educationOld"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
               hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
+              :label="`${'วุฒิการศึกษา'}`"
+              type="text"
             />
           </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+        <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 q-pa-md items-center">
+              <div class="col-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ประเภทตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  hide-bottom-space
+                  :borderless="!edit"
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :class="getClass(edit)"
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></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
+                      :borderless="!edit"
+                      :readonly="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val:string) => !!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"
+                hide-bottom-space
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </div>
 </template>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
index 997194e36..80a242288 100644
--- a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
@@ -143,230 +143,80 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/appoint-promote`)"
-    />
-    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ fullName }}
-  </div>
-  <CardProfile :data="dataProfile as DataProfile" />
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/appoint-promote`)"
+      />
+      รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ fullName }}
+    </div>
+    <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="text-dark q-mt-sm">
-    <q-form
-      greedy
-      @submit.prevent
-      @validation-success="putAppointment"
-      ref="myForm"
-    >
-      <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
-          v-if="
-            status !== 'DONE' &&
-            status !== 'REPORT' &&
-            checkPermission($route)?.attrIsUpdate
-          "
-        >
-          <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"
-            />
+    <q-card bordered class="text-dark q-mt-sm">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="putAppointment"
+        ref="myForm"
+      >
+        <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>
-          <div class="q-gutter-sm" v-else>
-            <q-btn
-              outline
-              type="submit"
-              color="public"
-              dense
-              class="q-px-sm"
-              label="บันทึก"
-              style="width: 80px"
-            />
-            <q-btn
-              outline
-              color="red"
-              dense
-              class="q-px-sm"
-              label="ยกเลิก"
-              style="width: 80px"
-              @click="cancel()"
-            />
+          <q-space />
+          <div
+            v-if="
+              status !== 'DONE' &&
+              status !== 'REPORT' &&
+              checkPermission($route)?.attrIsUpdate
+            "
+          >
+            <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
+                type="submit"
+                color="public"
+                dense
+                class="q-px-sm"
+                label="บันทึก"
+                style="width: 80px"
+              />
+              <q-btn
+                outline
+                color="red"
+                dense
+                class="q-px-sm"
+                label="ยกเลิก"
+                style="width: 80px"
+                @click="cancel()"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <div class="col-12"><q-separator /></div>
+        <div class="col-12"><q-separator /></div>
 
-      <div class="row col-12 q-pa-md">
-        <div class="col-12">
-          <div class="text-weight-bold">วุฒิการศึกษา</div>
-        </div>
-        <div class="col-12">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="educationOld"
-            :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-            hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`"
-            type="text"
-          />
-        </div>
-      </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 q-pa-md items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :class="getClass(edit)"
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></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
-                    :borderless="!edit"
-                    :readonly="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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 class="row col-12 q-pa-md">
+          <div class="col-12">
+            <div class="text-weight-bold">วุฒิการศึกษา</div>
           </div>
           <div class="col-12">
             <q-input
@@ -376,17 +226,170 @@ onMounted(() => {
               lazy-rules
               :readonly="!edit"
               :borderless="!edit"
-              v-model="reason"
+              v-model="educationOld"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
               hide-bottom-space
-              :label="`${'หมายเหตุ'}`"
-              type="textarea"
+              :label="`${'วุฒิการศึกษา'}`"
+              type="text"
             />
           </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+        <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 q-pa-md items-center">
+              <div class="col-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งประเภท'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  hide-bottom-space
+                  :borderless="!edit"
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :class="getClass(edit)"
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></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
+                      :borderless="!edit"
+                      :readonly="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val:string) => !!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"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </div>
 </template>
+
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
index ef2b689ac..bdb90fb89 100644
--- a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
+++ b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
@@ -135,79 +135,205 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/help-government`)"
-    />
-    รายละเอียดการช่วยราชการ{{ fullname }}
-  </div>
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/help-government`)"
+      />
+      รายละเอียดการช่วยราชการ{{ fullname }}
+    </div>
 
-  <CardProfile :data="dataProfile as DataProfile" />
+    <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <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">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+      <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') &&
+                checkPermission($route)?.attrIsUpdate
+              "
+            />
+          </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') &&
-              checkPermission($route)?.attrIsUpdate
-            "
-          />
-        </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>
-      <div class="col-12"><q-separator /></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-12 row items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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">
+              <div class="col-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-6 col-sm-4 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organization"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-4 row">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="dateStart"
+                  :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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :model-value="
+                        dateStart !== null ? date2Thai(dateStart) : null
+                      "
+                      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-xs-6 col-sm-4 row">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="dateEnd"
+                  :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
+                      :readonly="!edit"
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      :borderless="!edit"
+                      :model-value="
+                        dateEnd !== null ? date2Thai(dateEnd) : null
+                      "
+                      :rules="[(val:string) => !!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
@@ -217,139 +343,17 @@ onMounted(() => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                v-model="reason"
                 hide-bottom-space
-                :label="`${'ตำแหน่ง'}`"
+                :label="`${'หมายเหตุ '}`"
                 type="textarea"
               />
             </div>
           </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-4 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateStart"
-                :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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    :model-value="
-                      dateStart !== null ? date2Thai(dateStart) : null
-                    "
-                    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-xs-6 col-sm-4 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateEnd"
-                :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
-                    :readonly="!edit"
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    :borderless="!edit"
-                    :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
-                    :rules="[(val:string) => !!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"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
+  </div>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/Other/OtherDetail.vue b/src/modules/05_placement/components/Other/OtherDetail.vue
index 290d235b4..3b768f9a3 100644
--- a/src/modules/05_placement/components/Other/OtherDetail.vue
+++ b/src/modules/05_placement/components/Other/OtherDetail.vue
@@ -150,103 +150,278 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/other`)"
-    />
-    รายละเอียดรายการอื่นๆ {{ fullName }}
-  </div>
-  <CardProfile :data="dataProfile as DataProfile" />
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/other`)"
+      />
+      รายละเอียดรายการอื่นๆ {{ fullName }}
+    </div>
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <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
-          v-if="
-            status !== 'DONE' &&
-            status !== 'REPORT' &&
-            checkPermission($route)?.attrIsUpdate
-          "
-        >
-          <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"
-              type="submit"
-            />
-            <q-btn
-              outline
-              color="red"
-              dense
-              class="q-px-sm"
-              label="ยกเลิก"
-              style="width: 80px"
-              @click="cancel()"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="col-12"><q-separator /></div>
+    <CardProfile :data="dataProfile as DataProfile" />
 
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="row col-12 q-pa-md">
-            <div class="col-12">
-              <div class="text-weight-bold">วุฒิการศึกษา</div>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+      <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
+            v-if="
+              status !== 'DONE' &&
+              status !== 'REPORT' &&
+              checkPermission($route)?.attrIsUpdate
+            "
+          >
+            <div class="q-gutter-sm" v-if="!edit">
+              <q-btn
+                outline
+                color="primary"
                 dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="educationOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-                hide-bottom-space
-                :label="`${'วุฒิการศึกษา'}`"
-                type="text"
+                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"
+                type="submit"
+              />
+              <q-btn
+                outline
+                color="red"
+                dense
+                class="q-px-sm"
+                label="ยกเลิก"
+                style="width: 80px"
+                @click="cancel()"
               />
             </div>
           </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
 
-          <div class="col-xs-12 row items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
+        <div class="row col-12 q-pa-md">
+          <div class="col-12 row bg-white q-col-gutter-md">
+            <div class="row col-12 q-pa-md">
+              <div class="col-12">
+                <div class="text-weight-bold">วุฒิการศึกษา</div>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="educationOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                  hide-bottom-space
+                  :label="`${'วุฒิการศึกษา'}`"
+                  type="text"
+                />
+              </div>
+            </div>
+
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ประเภทตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  :class="getClass(edit)"
+                  hide-bottom-space
+                  :borderless="!edit"
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-6 col-sm-4 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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val:string) => !!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-xs-6 col-sm-4 row items-center">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="militaryDate"
+                  :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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :model-value="
+                        militaryDate !== null ? date2Thai(militaryDate) : null
+                      "
+                      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
@@ -256,189 +431,17 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                v-model="reason"
                 hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
+                :label="`${'หมายเหตุ '}`"
                 type="textarea"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                :class="getClass(edit)"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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-xs-6 col-sm-4 row items-center">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="militaryDate"
-                :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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      militaryDate !== null ? date2Thai(militaryDate) : null
-                    "
-                    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"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
+  </div>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index a4994fb73..ce3e5882e 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -512,536 +512,547 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/receive`)"
-    />
-    รายละเอียดการรับโอนของ{{ title.fullname }}
-  </div>
-  <CardProfile :data="dataProfile as DataProfile" />
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/receive`)"
+      />
+      รายละเอียดการรับโอนของ{{ title.fullname }}
+    </div>
+    <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form greedy @submit.prevent @validation-success="saveData" ref="myForm">
-      <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-card bordered class="row col-12 text-dark q-mt-sm">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="saveData"
+        ref="myForm"
+      >
+        <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') &&
+                checkPermission($route)?.attrIsUpdate
+              "
+            />
+          </div>
+          <div class="q-gutter-sm" v-else>
+            <q-btn
+              type="submit"
+              outline
+              color="public"
+              dense
+              class="q-px-sm"
+              label="บันทึก"
+              style="width: 80px"
+            />
+            <q-btn
+              outline
+              color="red"
+              dense
+              class="q-px-sm"
+              label="ยกเลิก"
+              style="width: 80px"
+              @click="oncanceledit"
+            />
+          </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') &&
-              checkPermission($route)?.attrIsUpdate
-            "
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            type="submit"
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="oncanceledit"
-          />
-        </div>
-      </div>
-      <div class="col-12"><q-separator /></div>
+        <div class="col-12"><q-separator /></div>
 
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white">
-          <div class="col-xs-12 row 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
-                :readonly="!edit"
-                :borderless="!edit"
-                label="เลขประจำตัวประชาชน"
-                maxlength="13"
-                mask="#############"
-              />
-            </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"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.prefixId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.prefixOps"
-                option-value="name"
-                :label="`${'คำนำหน้าชื่อ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string, 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"
-                :label="`${'ชื่อ'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.lastname"
-                lazy-rules
-                :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="calculateMaxDate()"
-                :disabled="!edit"
-                @update:model-value="updateBirthDate"
-              >
-                <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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      informaData.birthDate == null
-                        ? null
-                        : date2Thai(informaData.birthDate)
-                    "
-                    :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="name"
-                :label="`${'เพศ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,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="name"
-                :label="`${'สถานภาพ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string, 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="`${'สัญชาติ'}`"
-              />
-            </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="`${'เชื้อชาติ'}`"
-              />
-            </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="name"
-                :label="`${'ศาสนา'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
+        <div class="row col-12 q-pa-md">
+          <div class="col-12 row bg-white">
+            <div class="col-xs-12 row 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
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  label="เลขประจำตัวประชาชน"
+                  maxlength="13"
+                  mask="#############"
+                />
+              </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"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  v-model="informaData.prefixId"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="Ops.prefixOps"
+                  option-value="name"
+                  :label="`${'คำนำหน้าชื่อ'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string, 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"
+                  :label="`${'ชื่อ'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-3 col-md-3">
+                <q-input
+                  :class="getClass(edit)"
+                  hide-bottom-space
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="informaData.lastname"
+                  lazy-rules
+                  :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="calculateMaxDate()"
+                  :disabled="!edit"
+                  @update:model-value="updateBirthDate"
+                >
+                  <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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :model-value="
+                        informaData.birthDate == null
+                          ? null
+                          : date2Thai(informaData.birthDate)
+                      "
+                      :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="name"
+                  :label="`${'เพศ'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string,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="name"
+                  :label="`${'สถานภาพ'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string, 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="`${'สัญชาติ'}`"
+                />
+              </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="`${'เชื้อชาติ'}`"
+                />
+              </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="name"
+                  :label="`${'ศาสนา'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string,
                         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="name"
-                :label="`${'หมู่เลือด'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
+                />
+              </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="name"
+                  :label="`${'หมู่เลือด'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string,
                         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="##########"
-              />
-            </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:string, 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:string, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
-              />
-            </div>
-            <div class="col-xs-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!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:string) => !!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:string) => !!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:string) => !!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:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3">
-              <q-input
-                :class="getClass(edit)"
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-            <div class="col-xs-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                hide-bottom-space
-                :label="`${'หมายเหตุ '}`"
-                type="textarea"
-              />
+                  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="##########"
+                />
+              </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:string, 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:string, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
+                />
+              </div>
+              <div class="col-xs-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!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:string) => !!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:string) => !!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:string) => !!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:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-3">
+                <q-input
+                  :class="getClass(edit)"
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  hide-bottom-space
+                  :borderless="!edit"
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                />
+              </div>
+              <div class="col-xs-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="reason"
+                  hide-bottom-space
+                  :label="`${'หมายเหตุ '}`"
+                  type="textarea"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
 
-  <q-card v-if="rows.length > 0" bordered class="row col-12 text-dark q-my-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>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                type="a"
-                target="_blank"
-                :href="props.row.pathName"
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-              >
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
+    <q-card
+      v-if="rows.length > 0"
+      bordered
+      class="row col-12 text-dark q-my-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>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          row-key="fileName"
+          hide-header
+          hide-bottom
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fileName" :props="props">
+                {{ props.row.fileName }}
+              </q-td>
+              <q-td key="btnMicrosoft" :props="props">
+                <q-btn
+                  type="a"
+                  target="_blank"
+                  :href="props.row.pathName"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="picture_as_pdf"
+                >
+                  <q-tooltip>ไฟล์ PDF</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
+  </div>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
index fb8431a29..7c8f5a7c8 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
@@ -143,79 +143,275 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/repatriate`)"
-    />
-    รายละเอียดการส่งตัวกลับ{{ fullname }}
-  </div>
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/repatriate`)"
+      />
+      รายละเอียดการส่งตัวกลับ{{ fullname }}
+    </div>
 
-  <CardProfile :data="dataProfile as DataProfile" />
+    <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <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">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+      <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') &&
+                checkPermission($route)?.attrIsUpdate
+              "
+            />
+          </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') &&
-              checkPermission($route)?.attrIsUpdate
-            "
-          />
-        </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>
-      <div class="col-12"><q-separator /></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-12 row items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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">
+              <div class="col-12">
+                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</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:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ประเภทตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionNumberOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  hide-bottom-space
+                  :borderless="!edit"
+                  :label="`${'เงินเดือน'}`"
+                  :class="getClass(edit)"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-6 col-sm-4 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organization"
+                  :rules="[
+                  (val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
+                ]"
+                  hide-bottom-space
+                  :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-4 row">
+              <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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val:string) => !!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-xs-6 col-sm-4 row">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="dateRepatriation"
+                  :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
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      :model-value="
+                        dateRepatriation !== null
+                          ? date2Thai(dateRepatriation)
+                          : null
+                      "
+                      :rules="[
+                      (val:string) => !!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
@@ -225,211 +421,17 @@ onMounted(() => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                v-model="reason"
                 hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
+                :label="`${'หมายเหตุ '}`"
                 type="textarea"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionNumberOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :class="getClass(edit)"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[
-                  (val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-4 row">
-            <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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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-xs-6 col-sm-4 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateRepatriation"
-                :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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      dateRepatriation !== null
-                        ? date2Thai(dateRepatriation)
-                        : null
-                    "
-                    :rules="[
-                      (val:string) => !!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"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
+  </div>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/views/03_receiveMain.vue b/src/modules/05_placement/views/03_receiveMain.vue
index bd4157e6e..c7e87c92e 100644
--- a/src/modules/05_placement/views/03_receiveMain.vue
+++ b/src/modules/05_placement/views/03_receiveMain.vue
@@ -339,7 +339,6 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
diff --git a/src/modules/05_placement/views/04_helpGovernmentMain.vue b/src/modules/05_placement/views/04_helpGovernmentMain.vue
index 438896e7a..6892208d7 100644
--- a/src/modules/05_placement/views/04_helpGovernmentMain.vue
+++ b/src/modules/05_placement/views/04_helpGovernmentMain.vue
@@ -276,7 +276,6 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการช่วยราชการ</div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
diff --git a/src/modules/05_placement/views/05_repatriateMain.vue b/src/modules/05_placement/views/05_repatriateMain.vue
index 4d3cdc77b..4d34fd26d 100644
--- a/src/modules/05_placement/views/05_repatriateMain.vue
+++ b/src/modules/05_placement/views/05_repatriateMain.vue
@@ -241,7 +241,6 @@ onMounted(async () => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
diff --git a/src/modules/05_placement/views/06_appointPromoteMain.vue b/src/modules/05_placement/views/06_appointPromoteMain.vue
index bc9789048..080e054cb 100644
--- a/src/modules/05_placement/views/06_appointPromoteMain.vue
+++ b/src/modules/05_placement/views/06_appointPromoteMain.vue
@@ -289,7 +289,6 @@ onMounted(() => {
     รายการแต่งตั้ง-เลื่อน-ย้าย
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
diff --git a/src/modules/05_placement/views/07_appointEmployeeMain.vue b/src/modules/05_placement/views/07_appointEmployeeMain.vue
index 841c612c5..07c7fea7e 100644
--- a/src/modules/05_placement/views/07_appointEmployeeMain.vue
+++ b/src/modules/05_placement/views/07_appointEmployeeMain.vue
@@ -295,7 +295,6 @@ onMounted(() => {
     รายการปรับระดับชั้นงานลูกจ้าง
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
diff --git a/src/modules/05_placement/views/08_otherMain.vue b/src/modules/05_placement/views/08_otherMain.vue
index bab9cf620..3f2d557fa 100644
--- a/src/modules/05_placement/views/08_otherMain.vue
+++ b/src/modules/05_placement/views/08_otherMain.vue
@@ -223,7 +223,6 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการอื่นๆ</div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">