diff --git a/src/components/information/Education.vue b/src/components/information/Education.vue
index 811f60920..6075c34d8 100644
--- a/src/components/information/Education.vue
+++ b/src/components/information/Education.vue
@@ -633,7 +633,7 @@ const duration = ref<string>();
 const durationYear = ref<number>(0);
 const other = ref<string>();
 const fundName = ref<string>();
-const isDate = ref<string>("true");
+const isDate = ref<string | null>("true");
 const finishDate = ref<Date>(new Date());
 const startDate = ref<number>(new Date().getFullYear());
 const startDate2 = ref<Date>(new Date());
@@ -1514,7 +1514,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           durationYear: e.durationYear,
           other: e.other,
           fundName: e.fundName,
-          isDate: e.isDate.toString(),
+          isDate: e.isDate,
           finishDate: new Date(e.finishDate),
           startDate: new Date(e.startDate).getFullYear(),
           endDate: new Date(e.endDate).getFullYear(),
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index 79fc49008..f9cd9f921 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -636,7 +636,7 @@ const duration = ref<string>();
 const durationYear = ref<number>(0);
 const other = ref<string>();
 const fundName = ref<string>();
-const isDate = ref<string>("true");
+const isDate = ref<string | null>("true");
 const finishDate = ref<Date>(new Date());
 const startDate = ref<number>(new Date().getFullYear());
 const startDate2 = ref<Date>(new Date());
@@ -1517,7 +1517,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           durationYear: e.durationYear,
           other: e.other,
           fundName: e.fundName,
-          isDate: e.isDate.toString(),
+          isDate: e.isDate,
           finishDate: new Date(e.finishDate),
           startDate: new Date(e.startDate).getFullYear(),
           endDate: new Date(e.endDate).getFullYear(),
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index 6dc49a0b1..631f7c885 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -1,106 +1,41 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
+    <HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" :history="!statusAdd()"
+      :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" :historyClick="clickHistory"
+      :addEmployee="statusAdd()" />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
         <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.cardid"
-            @update:model-value="changeCardID"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-              (val:string) =>
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+            :borderless="!edit" v-model="informaData.cardid" @update:model-value="changeCardID" :rules="[
+              (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+              (val: string) =>
                 val.length >= 13 ||
                 `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            label="เลขประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
+            ]" 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"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" :outlined="edit" dense
+            lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name" :options="Ops.prefixOps"
+            option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0" @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )" />
         </div>
 
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+            :borderless="!edit" v-model="informaData.firstname" :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`" />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+            :borderless="!edit" v-model="informaData.lastname"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
+          <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+            :max-date="new Date()" :disabled="!edit" @update:model-value="handleDate">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -108,30 +43,15 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="
-                  informaData.birthDate !== null
+              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+                :borderless="!edit" :model-value="informaData.birthDate !== null
                     ? date2Thai(informaData.birthDate)
                     : null
-                "
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
+                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
+                  <q-icon name="event" class="cursor-pointer" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    ">
                   </q-icon>
                 </template>
               </q-input>
@@ -139,273 +59,99 @@
           </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="`${'อายุ'}`"
-          />
+          <q-input :class="getClass(false)" hide-bottom-space dense lazy-rules readonly borderless
+            :style="!edit ? '' : 'padding:0 12px;'" :model-value="informaData.age" :label="`${'อายุ'}`" />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                      ) "
-          />
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.genderId" emit-value map-options
+            option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
+            input-debounce="0" @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )" />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                      ) "
-          />
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.statusId" emit-value map-options
+            option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
+            input-debounce="0" @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )" />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
+          <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="`${'เชื้อชาติ'}`"
-          />
+          <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="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                      ) "
-          />
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.religionId" emit-value map-options
+            option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
+            input-debounce="0" @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )" />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-            clearable
-          />
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+            option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
+            input-debounce="0" @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )" clearable />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
+          <q-input hide-bottom-space :outlined="edit" dense lazy-rules type="tel" :class="getClass(edit)"
+            :readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
+              (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+              (val: string) =>
                 val.length >= 10 ||
                 `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-            mask="##########"
-          />
+            ]" 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:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]" :outlined="edit" dense
+            lazy-rules v-model="informaData.employeeType" emit-value map-options option-label="name"
+            :options="Ops.employeeTypeOps" option-value="id" :label="`${'ประเภทการจ้าง'}`" use-input input-debounce="0"
+            @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeTypeOps'
+              )" />
         </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]" :outlined="edit" dense
+            lazy-rules v-model="informaData.employeeClass" emit-value map-options option-label="name"
+            :options="Ops.employeeClassOps" option-value="id" :label="`${'ประเภทลูกจ้าง'}`" use-input input-debounce="0"
+            @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+              )" />
         </div>
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
         <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
           <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="!edit"
-          />
+          <q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" label="มี" dense
+            :disable="!edit" />
+          <q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0" label="ไม่มี"
+            color="grey-9" dense :disable="!edit" />
         </div>
         <div class="row col-12">
-          <OldName
-            v-if="same == '1'"
-            v-model:statusEdit="edit"
-            :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
-            :firstname="
-              informaData.firstname == null ? '' : informaData.firstname
-            "
-            :lastname="informaData.lastname == null ? '' : informaData.lastname"
-          />
+          <OldName v-if="same == '1'" v-model:statusEdit="edit" :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId" :firstname="informaData.firstname == null ? '' : informaData.firstname
+              " :lastname="informaData.lastname == null ? '' : informaData.lastname" />
         </div>
       </div>
     </q-form>
   </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
+  <HistoryTable :rows="rowsHistory" :columns="columnsHistory" :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
+          <div v-if="col.name == 'birthDate' || col.name == 'createdAt'" class="table_ellipsis">
             {{ date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -811,7 +557,7 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       hideLoader();
     });
@@ -897,14 +643,14 @@ const clickHistory = async () => {
             e.employeeType == "gov"
               ? "งบประมาณเงินอุดหนุนรัฐบาล"
               : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
+                ? "งบประมาณกรุงเทพมหานคร"
+                : "-",
           employeeClass:
             e.employeeClass == "perm"
               ? "ลูกจ้างประจำ"
               : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
+                ? "ลูกจ้างชั่วคราว"
+                : "-",
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1083,7 +829,7 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index 69498797e..b7931c3b4 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const Header = defineAsyncComponent(
   () =>
     import(
@@ -17,8 +20,6 @@ const FormSaveResult = defineAsyncComponent(
     )
 );
 
-import http from "@/plugins/http";
-import config from "@/app.config";
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
index 650ab8a3d..df2b44cd0 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
@@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const Header = defineAsyncComponent(
   () =>
     import(
@@ -17,8 +20,6 @@ const FormSaveResultCommader = defineAsyncComponent(
     )
 );
 
-import http from "@/plugins/http";
-import config from "@/app.config";
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
index fa24ebdd8..11a44dd38 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { ref, defineAsyncComponent } from "vue";
-// const tab = ref<string>("save1");
-// const changeTab = (tabVal: string) => {
-//   tab.value = tabVal
-// }
 
-// const Header = defineAsyncComponent(
-//   () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
-// );
 const FormReport = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue")
 )
diff --git a/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue b/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue
new file mode 100644
index 000000000..1b7a55bbc
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="props.icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="props.icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="props.header != ''"
+      >
+        {{ props.header }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
new file mode 100644
index 000000000..7e8a5d4b7
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import type { QForm } from "quasar";
+
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
+
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+
+const informaData = ref<Information>({
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+});
+
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+// รายการข้อมูลทั้งหมด
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+// ข้อมูลเมื่อเลือกแล้ว
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+
+// call function get รายการข้อมูลต่างๆ
+onMounted(async () => {
+  await fetchPerson();
+});
+
+/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => { })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// รูป profile
+const inputImage = ref<any>(null);
+const image = ref<any>(null);
+const fileData = ref<any>(null);
+const uploadImage = async (e: any) => {
+  const input = e.target.files;
+  if (input.length > 0) {
+    const url = URL.createObjectURL(input[0]);
+    image.value = url;
+    fileData.value = input[0];
+  }
+};
+
+// คลิกแก้ไขรูป profile
+const addNewImage = async () => {
+  inputImage.value.click();
+};
+
+// ตรวจสอบเลขประจำตัวประชาชน
+const defaultCitizenData = ref<string>("");
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// filter list ข้อมูลต่างๆ
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
+const calculateMaxDate = () => {
+  const today = new Date();
+  today.setDate(today.getDate() - 1);
+  return today;
+};
+
+// เช็คเรื่องการเกษียณ
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    showLoader();
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        informaData.value.birthDate = null;
+        informaData.value.age = "";
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (saveDataTest: Boolean) => {
+      if (saveDataTest) {
+        dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
+      }
+    });
+  }
+};
+
+// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
+const addData = async () => {
+  const formData = new FormData();
+  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
+  if (informaData.value.cardid != undefined)
+    formData.append("citizenId", informaData.value.cardid);
+  if (informaData.value.prefixId != undefined)
+    formData.append("prefixId", informaData.value.prefixId);
+  if (informaData.value.firstname != undefined)
+    formData.append("firstName", informaData.value.firstname);
+  if (informaData.value.lastname != undefined)
+    formData.append("lastName", informaData.value.lastname);
+  if (informaData.value.genderId != undefined)
+    formData.append("genderId", informaData.value.genderId);
+  if (informaData.value.nationality != undefined)
+    formData.append("nationality", informaData.value.nationality);
+  if (informaData.value.ethnicity != undefined)
+    formData.append("race", informaData.value.ethnicity);
+  if (informaData.value.religionId != undefined)
+    formData.append("religionId", informaData.value.religionId);
+  if (informaData.value.birthDate != undefined)
+    formData.append(
+      "birthDate",
+      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
+    );
+  if (informaData.value.bloodId != undefined)
+    formData.append("bloodGroupId", informaData.value.bloodId);
+  if (informaData.value.statusId != undefined)
+    formData.append("relationshipId", informaData.value.statusId);
+  if (informaData.value.tel != undefined)
+    formData.append("telephoneNumber", informaData.value.tel);
+  if (informaData.value.employeeType != undefined)
+    formData.append("employeeType", informaData.value.employeeType);
+  if (informaData.value.employeeClass != undefined)
+    formData.append("employeeClass", informaData.value.employeeClass);
+
+  showLoader();
+  await http
+    .post(config.API.profileEmployeeIn, formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await changeBirth(informaData.value.birthDate ?? new Date());
+      await clickBack();
+      hideLoader();
+    });
+  hideLoader();
+};
+
+// ปุ่ม back
+const clickBack = () => {
+  router.push("/registry-employee");
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
+    <q-form ref="myform" class="col-12 q-pt-md">
+      <div class="row">
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
+              lazy-rules :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val: string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+              ]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
+            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
+              lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
+              :options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
+              @filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+          </div>
+        </div>
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <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()" @update:model-value="handleDate">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
+                  ? null
+                  : date2Thai(informaData.birthDate)
+                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                  :label="`${'วัน/เดือน/ปี เกิด'}`">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
+              :model-value="informaData.age" :label="`${'อายุ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
+              option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
+              option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
+              :label="`${'สัญชาติ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
+              :label="`${'เชื้อชาติ'}`" />
+          </div>
+        </div>
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
+              option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+              option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+                )" clearable />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
+              :label="`${'เบอร์โทร'}`" :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+                (val: string) =>
+                  val.length >= 10 ||
+                  `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
+              ]" mask="##########" />
+          </div>
+        </div>
+      </div>
+    </q-form>
+    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+    <div class="row col-12">
+      <q-space />
+      <q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
+    </div>
+  </q-card>
+
+  <!-- Header  -->
+  <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+        @click="router.go(-1)">
+      </q-btn>
+      <q-avatar size="65px" rounded class="containerimage">
+        <img v-if="image == null" src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+        <img :src="image" class="bg-grey-3" style="object-fit: cover" />
+        <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="addNewImage()">
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
+        </div>
+      </q-avatar>
+
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            เพิ่มข้อมูลทะเบียนประวัติ
+          </div>
+          <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
+        </div>
+      </div>
+      <q-space />
+    </div>
+  </q-page-sticky>
+  <!-- End Header  -->
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
new file mode 100644
index 000000000..47d37e976
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { FormRegistryEmployee } from '../interface/request/Main';
+import { useQuasar, type QTableProps, QInput } from 'quasar';
+import { useCounterMixin } from '@/stores/mixin';
+import http from '@/plugins/http';
+import config from "@/app.config";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+    success,
+    messageError,
+    showLoader,
+    hideLoader,
+    dialogConfirm,
+    dialogMessageNotify,
+} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
+
+const $q = useQuasar();
+
+const props = defineProps({
+    modal: {
+        type: Boolean,
+        default: false,
+    },
+    rows: {
+        type: Object,
+        default: []
+    },
+    fetchNewList: {
+        type: Function,
+        default: () => { /* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */ }
+    },
+    closeDialog: {
+        type: Function,
+        default: () => { /* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */ }
+    },
+});
+
+const filter = ref<string>("");
+const filterRef = ref<QInput>();
+// visible columns ตารางใน dialog ส่งไปออกคำสั่ง
+const visibleColumnsOrder = ref<string[]>([
+    "no",
+    "fullname",
+    "fullnameOld",
+    "oc",
+    "positionEmployeePosition",
+    "positionEmployeePositionSide",
+    "positionLine",
+    "govAge",
+    "positionEmployeeGroup",
+    "dateAppoint",
+    "refSalary",
+    "dateStart",
+    "createdAt",
+    "salaryDate",
+    "age",
+    "amount",
+    "statustext",
+    "leaveDateOrder",
+    "newAgency",
+    "currentAgency",
+]);
+
+// คอลัมน์ในตาราง
+const columnsOrder = ref<QTableProps["columns"]>([
+    {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "fullname",
+        align: "left",
+        label: "ชื่อ-สกุล",
+        sortable: true,
+        field: "fullname",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "newAgency",
+        align: "left",
+        label: "หน่วยงานที่รับการบรรจุ",
+        sortable: true,
+        field: "newAgency",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "currentAgency",
+        align: "left",
+        label: "หน่วยงานปัจจุบัน",
+        sortable: true,
+        field: "currentAgency",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "amount",
+        align: "left",
+        label: "ค่าจ้าง",
+        sortable: true,
+        field: "amount",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "govAge",
+        align: "left",
+        label: "อายุราชการ(ปี)",
+        sortable: true,
+        field: "govAge",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "dateAppoint",
+        align: "left",
+        label: "วันที่จ้าง",
+        sortable: true,
+        field: "dateAppoint",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "dateStart",
+        align: "left",
+        label: "วันที่เริ่มปฎิบัติราชการ",
+        sortable: true,
+        field: "dateStart",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "salaryDate",
+        align: "left",
+        label: "วันที่แต่งตั้ง",
+        sortable: true,
+        field: "salaryDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "refSalary",
+        align: "left",
+        label: "เอกสารอ้างอิง",
+        sortable: true,
+        field: "refSalary",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "age",
+        align: "left",
+        label: "อายุ",
+        sortable: true,
+        field: "age",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "fullnameOld",
+        align: "left",
+        label: "ชื่อ-สกุล(เดิม)",
+        sortable: true,
+        field: "fullnameOld",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "createdAt",
+        align: "left",
+        label: "วันที่สร้าง",
+        sortable: true,
+        field: "createdAt",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "leaveDateOrder",
+        align: "left",
+        label: "วันที่พ้นราชการ",
+        sortable: true,
+        field: "leaveDateOrder",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "statustext",
+        align: "left",
+        label: "สถานะ",
+        sortable: true,
+        field: "statustext",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+]);
+
+// checkbox เลือกคนไปออกคำสั่ง
+const selected = ref<any>([]);
+const save = () => {
+    if (selected.value.length == 0) {
+        dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
+    } else dialogConfirm($q, () => sendToCommand());
+};
+
+// post ส่งไปออกคำสั่ง
+const sendToCommand = async () => {
+    let pId: string[] = [];
+    selected.value.forEach((e: any) => {
+        pId.push(e.id);
+    });
+    let data = {
+        id: pId,
+    };
+    showLoader();
+    await http
+        .post(config.API.organizationEmployeeSendOrder, data)
+        .then((res: any) => {
+            success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(async () => {
+            props.fetchNewList()
+            props.closeDialog()
+            selected.value = [];
+            hideLoader();
+        });
+};
+
+// เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
+const rowsOrder = ref<FormRegistryEmployee[]>([]);
+const filterRowData = () => {
+    rowsOrder.value = props.rows.filter(
+        (r: FormRegistryEmployee) => r.status == "PENDING"
+    );
+}
+
+// เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
+watch(props, () => {
+    if (props.modal === true && props.rows) {
+        filterRowData()
+    }
+});
+</script>
+
+<template>
+    <q-dialog v-model="props.modal">
+        <q-card style="width: 900px; max-width: 80vw">
+            <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
+            <q-separator />
+            <q-card-section class="q-pt-none">
+                <div class="row justify-end">
+                    <div class="col-5">
+                        <q-toolbar style="padding: 0">
+                            <q-input borderless outlined dense debounce="300" v-model="filter" ref="filterRef"
+                                placeholder="ค้นหา" style="width: 850px; max-width: auto">
+                                <template v-slot:append>
+                                    <q-icon name="search" />
+                                </template>
+                            </q-input>
+                        </q-toolbar>
+                    </div>
+                </div>
+
+                <d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
+                    row-key="id" selection="multiple" v-model:selected="selected">
+                    <template v-slot:header-selection="scope">
+                        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+                    </template>
+                    <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                            <q-td>
+                                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                            </q-td>
+
+                            <q-td key="no" :props="props">
+                                {{ props.rowIndex + 1 }}
+                            </q-td>
+                            <q-td key="fullname" :props="props">
+                                {{ props.row.fullname }}
+                            </q-td>
+                            <q-td key="newAgency" :props="props">
+                                <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
+                                    props.row.draftPositionEmployee == null
+                                    ">
+                                    <div class="text-weight-medium">
+                                        {{ "-" }}
+                                    </div>
+                                </div>
+                                <div class="col-12" v-else>
+                                    <div class="text-weight-medium">
+                                        {{ props.row.draftOrganizationOrganization ?? "-" }}
+                                    </div>
+                                    <div class="text-weight-light">
+                                        {{ props.row.draftPositionEmployee ?? "-" }}
+                                    </div>
+                                </div>
+                            </q-td>
+                            <q-td key="currentAgency" :props="props">
+                                <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+                                    <div class="text-weight-medium">
+                                        {{ "-" }}
+                                    </div>
+                                </div>
+                                <div class="col-12" v-else>
+                                    <div class="text-weight-medium">
+                                        {{ props.row.oc ?? "-" }}
+                                    </div>
+                                    <div class="text-weight-light">
+                                        {{ props.row.position ?? "-" }}
+                                    </div>
+                                </div>
+                            </q-td>
+
+                            <q-td key="amount" :props="props">
+                                {{ props.row.amount }}
+                            </q-td>
+                            <q-td key="govAge" :props="props">
+                                {{ props.row.govAge }}
+                            </q-td>
+                            <q-td key="dateAppoint" :props="props">
+                                {{ props.row.dateAppoint }}
+                            </q-td>
+                            <q-td key="dateStart" :props="props">
+                                {{ props.row.dateStart }}
+                            </q-td>
+                            <q-td key="salaryDate" :props="props">
+                                {{ props.row.salaryDate }}
+                            </q-td>
+                            <q-td key="refSalary" :props="props">
+                                {{ props.row.refSalary }}
+                            </q-td>
+                            <q-td key="age" :props="props">
+                                {{ props.row.age }}
+                            </q-td>
+                            <q-td key="fullnameOld" :props="props">
+                                {{ props.row.fullnameOld }}
+                            </q-td>
+                            <q-td key="createdAt" :props="props">
+                                {{ props.row.createdAt }}
+                            </q-td>
+                            <q-td key="isLeave" :props="props">
+                                {{ props.row.isLeave }}
+                            </q-td>
+
+                            <q-td key="leaveDateOrder" :props="props">
+                                {{ props.row.leaveDateOrder }}
+                            </q-td>
+                            <q-td key="statustext" :props="props">
+                                {{ props.row.statustext }}
+                            </q-td>
+                        </q-tr>
+                    </template>
+                </d-table>
+            </q-card-section>
+
+            <q-card-actions align="right" class="bg-white text-teal">
+                <q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Assessment.vue b/src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Assessment.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
index 2138234a4..b9ff755a8 100644
--- a/src/modules/08_registryEmployee/views/Assessment.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
@@ -1,307 +1,3 @@
-<!-- card ผลการประเมินการปฏิบัติราชการ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ผลการประเมินการปฏิบัติราชการ"
-        icon="mdi-clipboard-text"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'name'" class="table_ellipsis">
-                {{ textPoint(props.row.pointSum) }}
-                {{ textRangePoint(props.row.pointSum) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="ผลการประเมินการปฏิบัติราชการ"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่ได้รับ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <!-- <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point"
-                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
-                hide-bottom-space
-                :label="`${'คะแนน'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div> -->
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point1Total"
-                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ส่วนที่1 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point1"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point2Total"
-                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ส่วนที่2 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point2"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="pointSumTotal"
-                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ผลรวม (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="pointSum"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินรวม (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="text-subtitle2 col-12 row items-center">
-              <q-space></q-space>
-              ผลการประเมิน:
-              <div class="text-bold items-center q-px-sm">
-                {{ textPoint(pointSum) }}
-              </div>
-              {{ textRangePoint(pointSum) }}
-            </div>
-            <!-- <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="name"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อแบบประเมิน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div> -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'name'" class="table_ellipsis">
-            {{ textPoint(props.row.pointSum) }}
-            {{ textRangePoint(props.row.pointSum) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -976,6 +672,312 @@ const textPoint = (val: number | undefined) => {
   else return "-";
 };
 </script>
+
+<!-- card ผลการประเมินการปฏิบัติราชการ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ผลการประเมินการปฏิบัติราชการ"
+        icon="mdi-clipboard-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <!-- <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
+                hide-bottom-space
+                :label="`${'คะแนน'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อแบบประเมิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Discipline.vue b/src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Discipline.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
index 8a3b73abc..5ecb2868b 100644
--- a/src/modules/08_registryEmployee/views/Discipline.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
@@ -1,277 +1,3 @@
-<!-- card วินัย -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="วินัย"
-        icon="mdi-scale-balance"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'refCommandDate' || col.name == 'date'"
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="วินัย" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :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-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="level"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
-                hide-bottom-space
-                :label="`${'ระดับการลงโทษทางวินัย'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.levelOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="unStigma"
-                hide-bottom-space
-                :label="`${'ล้างมลทิน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    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>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'date' ||
-              col.name == 'refCommandDate' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -938,6 +664,282 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card วินัย -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วินัย"
+        icon="mdi-scale-balance"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'refCommandDate' || col.name == 'date'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="วินัย" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :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-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="level"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'refCommandDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Document.vue b/src/modules/08_registryEmployee/components/EditEmployee/Document.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Document.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Document.vue
index 92be37c74..f0fd6c2b7 100644
--- a/src/modules/08_registryEmployee/views/Document.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Document.vue
@@ -1,142 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
-    <q-form ref="myform" class="col-12">
-      <HeaderTop
-        v-model:edit="edit"
-        header="เอกสารหลักฐาน"
-        icon="mdi-file-document"
-        :history="false"
-        :changeBtn="changeBtn"
-        :cancel="onCancel"
-        :disable="statusEdit"
-        :save="uploadData"
-      />
-      <div class="row col-12 q-pt-sm">
-        <q-card bordered flat class="full-width">
-          <q-list separator>
-            <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-              <q-item-section>
-                <q-item-label class="full-width ellipsis">
-                  {{ file.fileName }}
-                </q-item-label>
-
-                <q-item-label caption> </q-item-label>
-              </q-item-section>
-              <q-item-section top side>
-                <div class="row col-12">
-                  <q-btn
-                    class="gt-xs"
-                    size="12px"
-                    flat
-                    dense
-                    round
-                    color="blue"
-                    icon="mdi-download-outline"
-                    @click="downloadData(file.file)"
-                  />
-                  <q-btn
-                    class="gt-xs"
-                    size="12px"
-                    flat
-                    dense
-                    round
-                    color="red"
-                    icon="mdi-delete-outline"
-                    v-show="edit"
-                    @click="deleteData(file.id)"
-                  />
-                </div>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
-
-        <q-input
-          v-if="edit"
-          class="q-mt-sm col-12 q-pb-xs"
-          outlined
-          dense
-          lazy-rules
-          v-model="name"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
-          :label="`${'ชื่อเอกสาร'}`"
-        />
-        <q-uploader
-          v-if="edit"
-          color="gray"
-          type="file"
-          flat
-          @factory="uploadData"
-          ref="uploader"
-          class="full-width"
-          text-color="white"
-          :max-size="10000000"
-          accept=".jpg,.png,.pdf,.csv,.doc,.docx"
-          bordered
-          label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
-          @added="fileAdd"
-        >
-          <template v-slot:header="scope">
-            <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
-              <q-btn
-                v-if="scope.queuedFiles.length > 0"
-                icon="clear_all"
-                @click="scope.removeQueuedFiles"
-                round
-                dense
-                flat
-              >
-                <q-tooltip>ลบทั้งหมด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="scope.uploadedFiles.length > 0"
-                icon="done_all"
-                @click="scope.removeUploadedFiles"
-                round
-                dense
-                flat
-              >
-                <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
-              </q-btn>
-              <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
-              <div class="col">
-                <div class="q-uploader__title">
-                  {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
-                </div>
-                <div class="q-uploader__subtitle">
-                  {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
-                </div>
-              </div>
-              <q-btn
-                v-if="scope.canAddFiles"
-                type="a"
-                icon="add_box"
-                @click="scope.pickFiles"
-                round
-                dense
-                flat
-              >
-                <q-uploader-add-trigger />
-                <q-tooltip>เลือกไฟล์</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="scope.isUploading"
-                icon="clear"
-                @click="scope.abort"
-                round
-                dense
-                flat
-              >
-                <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
-              </q-btn>
-            </div>
-          </template>
-        </q-uploader>
-      </div>
-    </q-form>
-  </q-card>
-</template>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
@@ -298,3 +159,143 @@ const changeBtn = async () => {
   }
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <q-form ref="myform" class="col-12">
+      <HeaderTop
+        v-model:edit="edit"
+        header="เอกสารหลักฐาน"
+        icon="mdi-file-document"
+        :history="false"
+        :changeBtn="changeBtn"
+        :cancel="onCancel"
+        :disable="statusEdit"
+        :save="uploadData"
+      />
+      <div class="row col-12 q-pt-sm">
+        <q-card bordered flat class="full-width">
+          <q-list separator>
+            <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+              <q-item-section>
+                <q-item-label class="full-width ellipsis">
+                  {{ file.fileName }}
+                </q-item-label>
+
+                <q-item-label caption> </q-item-label>
+              </q-item-section>
+              <q-item-section top side>
+                <div class="row col-12">
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadData(file.file)"
+                  />
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="red"
+                    icon="mdi-delete-outline"
+                    v-show="edit"
+                    @click="deleteData(file.id)"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-input
+          v-if="edit"
+          class="q-mt-sm col-12 q-pb-xs"
+          outlined
+          dense
+          lazy-rules
+          v-model="name"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+          :label="`${'ชื่อเอกสาร'}`"
+        />
+        <q-uploader
+          v-if="edit"
+          color="gray"
+          type="file"
+          flat
+          @factory="uploadData"
+          ref="uploader"
+          class="full-width"
+          text-color="white"
+          :max-size="10000000"
+          accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+          bordered
+          label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+          @added="fileAdd"
+        >
+          <template v-slot:header="scope">
+            <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+              <q-btn
+                v-if="scope.queuedFiles.length > 0"
+                icon="clear_all"
+                @click="scope.removeQueuedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบทั้งหมด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.uploadedFiles.length > 0"
+                icon="done_all"
+                @click="scope.removeUploadedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+              </q-btn>
+              <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+              <div class="col">
+                <div class="q-uploader__title">
+                  {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                </div>
+                <div class="q-uploader__subtitle">
+                  {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+                </div>
+              </div>
+              <q-btn
+                v-if="scope.canAddFiles"
+                type="a"
+                icon="add_box"
+                @click="scope.pickFiles"
+                round
+                dense
+                flat
+              >
+                <q-uploader-add-trigger />
+                <q-tooltip>เลือกไฟล์</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.isUploading"
+                icon="clear"
+                @click="scope.abort"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+              </q-btn>
+            </div>
+          </template>
+        </q-uploader>
+      </div>
+    </q-form>
+  </q-card>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Education.vue b/src/modules/08_registryEmployee/components/EditEmployee/Education.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Education.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Education.vue
index 422e5b65a..9c1fcbe9a 100644
--- a/src/modules/08_registryEmployee/views/Education.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Education.vue
@@ -1,582 +1,3 @@
-<!-- card ประวัติการศึกษา -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ประวัติการศึกษา"
-        icon="school"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'startDate'" class="table_ellipsis">
-                {{
-                  props.row.isDate == "true"
-                    ? date2Thai(props.row.startDate2)
-                    : col.value + 543
-                }}
-              </div>
-              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
-                {{
-                  props.row.isDate == "true"
-                    ? date2Thai(props.row.endDate2)
-                    : col.value + 543
-                }}
-              </div>
-              <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
-                {{ col.value ? "ใช่" : "ไม่ใช่" }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="levelId"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
-                hide-bottom-space
-                :label="`${'ระดับการศึกษา'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.levelOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="institute"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                hide-bottom-space
-                :label="`${'สถานศึกษา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
-                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-                  <q-radio
-                    v-model="isDate"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    val="false"
-                    label="ปี"
-                    dense
-                    :disable="!edit"
-                  />
-                  <q-radio
-                    v-model="isDate"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    val="true"
-                    label="วัน/เดือน/ปี"
-                    dense
-                    :disable="!edit"
-                  />
-                </div>
-                <div class="col-12 row q-col-gutter-sm">
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      v-if="isDate === 'false'"
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="startDate"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="startDate + 543"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่เริ่มต้นศึกษา'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              :style="
-                                edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                              "
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                    <datepicker
-                      v-else
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="startDate2"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="date2Thai(startDate2)"
-                          :rules="[
-                            (val) =>
-                              !!val ||
-                              `${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              :style="
-                                edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                              "
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      v-if="isDate === 'false'"
-                      menu-class-name="modalfix"
-                      v-model="endDate"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      :min-date="minDate"
-                      :readonly="!edit"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="endDate + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่จบการศึกษา'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              :style="
-                                edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                              "
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                    <datepicker
-                      v-else
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="endDate2"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="date2Thai(endDate2)"
-                          :rules="[
-                            (val) =>
-                              !!val ||
-                              `${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              :style="
-                                edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                              "
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="finishDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(finishDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่สำเร็จการศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="isEducation"
-                hide-bottom-space
-                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.positionPathOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="degree"
-                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-                hide-bottom-space
-                :label="`${'วุฒิการศึกษา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="field"
-                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/ทาง'}`]"
-                hide-bottom-space
-                :label="`${'สาขาวิชา/ทาง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="fundName"
-                hide-bottom-space
-                :label="`${'ทุน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="gpa"
-                :rules="[(val) => !!val || `${'กรุณากรอกเกรดเฉลี่ย'}`]"
-                hide-bottom-space
-                :label="`${'เกรดเฉลี่ย'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="country"
-                :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-                hide-bottom-space
-                :label="`${'ประเทศ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="other"
-                hide-bottom-space
-                :label="`${'ข้อมูลการติดต่อ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="duration"
-                hide-bottom-space
-                :label="`${'ระยะเวลา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="durationYear"
-                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร'}`]"
-                hide-bottom-space
-                :label="`${'ระยะเวลาหลักสูตร'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'startDate'" class="table_ellipsis">
-            {{
-              props.row.isDate == true
-                ? date2Thai(props.row.startDate2)
-                : col.value + 543
-            }}
-          </div>
-          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
-            {{
-              props.row.isDate == true
-                ? date2Thai(props.row.endDate2)
-                : col.value + 543
-            }}
-          </div>
-          <div
-            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
-            {{ col.value ? "ใช่" : "ไม่ใช่" }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -634,7 +55,7 @@ const duration = ref<string>();
 const durationYear = ref<number>(0);
 const other = ref<string>();
 const fundName = ref<string>();
-const isDate = ref<string>("true");
+const isDate = ref<string | null>("true");
 const finishDate = ref<Date>(new Date());
 const startDate = ref<number>(new Date().getFullYear());
 const startDate2 = ref<Date>(new Date());
@@ -1518,7 +939,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           durationYear: e.durationYear,
           other: e.other,
           fundName: e.fundName,
-          isDate: e.isDate.toString(),
+          isDate: e.isDate,
           finishDate: new Date(e.finishDate),
           startDate: new Date(e.startDate).getFullYear(),
           endDate: new Date(e.endDate).getFullYear(),
@@ -1540,14 +961,14 @@ const clickHistory = async (row: RequestItemsObject) => {
 /**
  * validate input ใน dialog
  */
-// const validateData = async () => {
-//   checkValidate.value = true;
-//   await myForm.value.validate().then((result: boolean) => {
-//     if (result == false) {
-//       checkValidate.value = false;
-//     }
-//   });
-// };
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
@@ -1560,6 +981,587 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ประวัติการศึกษา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการศึกษา"
+        icon="school"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'startDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.startDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.endDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+                {{ col.value ? "ใช่" : "ไม่ใช่" }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="levelId"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="institute"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'สถานศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="false"
+                    label="ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="true"
+                    label="วัน/เดือน/ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="startDate + 543"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(startDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="endDate + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(endDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="finishDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(finishDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่สำเร็จการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="isEducation"
+                hide-bottom-space
+                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.positionPathOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="degree"
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'วุฒิการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/ทาง'}`]"
+                hide-bottom-space
+                :label="`${'สาขาวิชา/ทาง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="fundName"
+                hide-bottom-space
+                :label="`${'ทุน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="gpa"
+                :rules="[(val) => !!val || `${'กรุณากรอกเกรดเฉลี่ย'}`]"
+                hide-bottom-space
+                :label="`${'เกรดเฉลี่ย'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="country"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+                hide-bottom-space
+                :label="`${'ประเทศ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="other"
+                hide-bottom-space
+                :label="`${'ข้อมูลการติดต่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                hide-bottom-space
+                :label="`${'ระยะเวลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="durationYear"
+                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร'}`]"
+                hide-bottom-space
+                :label="`${'ระยะเวลาหลักสูตร'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'startDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.startDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.endDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div
+            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+            {{ col.value ? "ใช่" : "ไม่ใช่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Information/Address.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Address.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
index 849102d3e..011342df7 100644
--- a/src/modules/08_registryEmployee/views/Information/Address.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
@@ -1,291 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลที่อยู่"
-      icon="mdi-map-marker"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform">
-      <div class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.address"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.provinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.districtId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.subdistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictOps"
-            option-value="id"
-            :label="`${'ตำบล / แขวง'}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.codep"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
-        </div>
-        <div class="col-12 q-pt-lg"><q-separator /></div>
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-bold"
-            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
-          >
-          <q-radio
-            v-model="addressData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="ใช่"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="addressData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่"
-            dense
-            :disable="!edit"
-          />
-        </div>
-
-        <div class="col-xs-12" v-if="addressData.same == '0'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.addressC"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
-            :label="`${'ที่อยู่ปัจจุบัน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <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="addressData.provinceIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <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="addressData.districtIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtCOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <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="addressData.subdistrictIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictCOps"
-            option-value="id"
-            :label="`${'ตำบล / แขวง'}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.codec"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="col.name == 'registrationSame'"
-            class="table_ellipsis"
-          >
-            {{ col.value ? "ใช่" : "ไม่" }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -643,7 +355,6 @@ const fetchData = async () => {
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
         const data: ResponseObject = res.data.result;
-        console.log(data);
 
         addressData.value.address = data.registrationAddress;
         addressData.value.addressC = data.currentAddress;
@@ -907,3 +618,292 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold"
+            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          >
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtCOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictCOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codec"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Information/Certicate.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Certicate.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
index aad106778..86496a414 100644
--- a/src/modules/08_registryEmployee/views/Information/Certicate.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
@@ -1,260 +1,3 @@
-<!-- card ใบอนุญาตประกอบอาชีพ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        :name="
-          profileType == 'employee'
-            ? 'ใบอนุญาตของลูกจ้าง'
-            : 'ใบอนุญาตประกอบอาชีพ'
-        "
-        icon="mdi-book"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :tittle="
-            profileType == 'employee'
-              ? 'ใบอนุญาตของลูกจ้าง'
-              : 'ใบอนุญาตประกอบอาชีพ'
-          "
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="certificateType"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="issuer"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="certificateNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่ใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="issueDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(issueDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่ออกใบอนุญาต'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="expireDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(expireDate)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่หมดอายุ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'expireDate' ||
-              col.name == 'issueDate' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -825,6 +568,265 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ใบอนุญาตประกอบอาชีพ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบอาชีพ'
+        "
+        icon="mdi-book"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบอาชีพ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateType"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่ใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(issueDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ออกใบอนุญาต'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(expireDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่หมดอายุ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'expireDate' ||
+              col.name == 'issueDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Information/Family.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Family.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
index e7f7151c6..5a7540329 100644
--- a/src/modules/08_registryEmployee/views/Information/Family.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
@@ -1,3 +1,439 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+import type {
+  Family,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
+import type {
+  ResponseObject,
+  childrenFamily,
+  ResponseHistory,
+} from "@/modules/04_registry/interface/response/Family";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const edit = ref<boolean>(false);
+const fix = ref<boolean>(true);
+const myform = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const indexRow = ref<number>(0);
+const previous = ref<boolean>(false);
+const next = ref<boolean>(false);
+//C Couple
+//M Male
+//F Female
+const familyData = ref<Family>({
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  liveC: null,
+  citizenIdC: null,
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  liveM: null,
+  citizenIdM: null,
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  liveF: null,
+  citizenIdF: null,
+  same: "0",
+  childrens: [],
+});
+const familyDataHistory = ref<ResponseHistory[]>([]);
+const Ops = ref<any>({
+  prefixOps: [],
+});
+const OpsFilter = ref<any>({
+  prefixOps: [],
+});
+
+onMounted(async () => {
+  await fetchPrefix();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    familyData.value = {
+      prefixC: null,
+      prefixIdC: null,
+      firstnameC: null,
+      lastnameC: null,
+      lastnameCOld: null,
+      occupationC: null,
+      citizenIdC: null,
+      liveC: null,
+      prefixM: null,
+      prefixIdM: null,
+      firstnameM: null,
+      lastnameM: null,
+      occupationM: null,
+      citizenIdM: null,
+      liveM: null,
+      prefixF: null,
+      prefixIdF: null,
+      firstnameF: null,
+      lastnameF: null,
+      occupationF: null,
+      citizenIdF: null,
+      liveF: null,
+      same: "0",
+      childrens: [],
+    };
+  }
+};
+
+const historyData = async () => {
+  await fetchHistory();
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  update(() => {
+    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+const refreshData = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+const fetchPrefix = async () => {
+  showLoader();
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const addChildren = async () => {
+  familyData.value.childrens.push({
+    id: `${familyData.value.childrens.length + 1}`,
+    childrenPrefixId: "",
+    childrenFirstName: "",
+    childrenLastName: "",
+    childrenCareer: "",
+    childrenLive: "1",
+    childrenCitizenId: "",
+  });
+
+  familyData.value.childrens.sort(
+    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
+  );
+};
+
+const deleteChildren = (items: childrenFamily) => {
+  const index = familyData.value.childrens.findIndex(
+    (r: childrenFamily) => r.id == items.id
+  );
+
+  familyData.value.childrens.splice(index, 1);
+};
+
+const fetchHistory = async () => {
+  familyDataHistory.value = [];
+  showLoader();
+  await http
+    .get(config.API.profileFamiHisId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject[] = res.data.result;
+      data.map((row: ResponseObject) => {
+        const arrayData: ResponseHistory = {
+          couple: row.couple ? "1" : "0",
+          couplePrefixId: row.couplePrefixId,
+          coupleFirstName: row.coupleFirstName,
+          coupleLastName: row.coupleLastName,
+          coupleLastNameOld: row.coupleLastNameOld,
+          coupleCareer: row.coupleCareer,
+          coupleLive: row.coupleLive ? "1" : "0",
+          coupleCitizenId: row.coupleCitizenId,
+          fatherPrefixId: row.fatherPrefixId,
+          fatherFirstName: row.fatherFirstName,
+          fatherLastName: row.fatherLastName,
+          fatherCareer: row.fatherCareer,
+          fatherLive: row.fatherLive ? "1" : "0",
+          fatherCitizenId: row.fatherCitizenId,
+          motherPrefixId: row.motherPrefixId,
+          motherFirstName: row.motherFirstName,
+          motherLastName: row.motherLastName,
+          motherCareer: row.motherCareer,
+          motherLive: row.motherLive ? "1" : "0",
+          motherCitizenId: row.motherCitizenId,
+          childrens: row.childrens,
+          createdFullName: row.createdFullName,
+          createdAt: new Date(row.createdAt),
+        };
+        familyDataHistory.value.push(arrayData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      if (familyDataHistory.value.length == 0) {
+        // modalError(
+        //   $q,
+        //   "ประวัติแก้ไขข้อมูลครอบครัว",
+        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
+        // );
+      } else {
+        modal.value = true;
+        indexRow.value = 0;
+        if (familyDataHistory.value.length > 1) {
+          next.value = true;
+          previous.value = false;
+        } else {
+          next.value = false;
+          previous.value = false;
+        }
+      }
+    });
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    showLoader();
+    await http
+      .get(config.API.profileFamiId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        familyData.value.prefixC = "";
+        familyData.value.prefixIdC = data.couplePrefixId;
+        familyData.value.firstnameC = data.coupleFirstName;
+        familyData.value.lastnameC = data.coupleLastName;
+        familyData.value.lastnameCOld = data.coupleLastNameOld;
+        familyData.value.occupationC = data.coupleCareer;
+        familyData.value.liveC = data.coupleLive ? "1" : "0";
+        familyData.value.citizenIdC = data.coupleCitizenId;
+
+        familyData.value.prefixM = "";
+        familyData.value.prefixIdM = data.fatherPrefixId;
+        familyData.value.firstnameM = data.fatherFirstName;
+        familyData.value.lastnameM = data.fatherLastName;
+        familyData.value.occupationM = data.fatherCareer;
+        familyData.value.liveM = data.fatherLive ? "1" : "0";
+        familyData.value.citizenIdM = data.fatherCitizenId;
+
+        familyData.value.prefixF = "";
+        familyData.value.prefixIdF = data.motherPrefixId;
+        familyData.value.firstnameF = data.motherFirstName;
+        familyData.value.lastnameF = data.motherLastName;
+        familyData.value.occupationF = data.motherCareer;
+        familyData.value.liveF = data.motherLive ? "1" : "0";
+        familyData.value.citizenIdF = data.motherCitizenId;
+        familyData.value.same = data.couple ? "1" : "0";
+
+        if (data.childrens.length > 0) {
+          let dataChild: childrenFamily[] = [];
+          data.childrens.map((row: childrenFamily, index: number) => {
+            dataChild.push({
+              id: `${index + 1}`,
+              childrenPrefixId: row.childrenPrefixId,
+              childrenFirstName: row.childrenFirstName,
+              childrenLastName: row.childrenLastName,
+              childrenCareer: row.childrenCareer,
+              childrenLive: row.childrenLive,
+              childrenCitizenId: row.childrenCitizenId,
+            });
+          });
+          familyData.value.childrens = dataChild;
+        } else {
+          familyData.value.childrens = [];
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+};
+
+const editData = async () => {
+  showLoader();
+  const body: ResponseObject = {
+    couple: familyData.value.same == "1",
+    couplePrefixId: familyData.value.prefixIdC,
+    coupleFirstName: familyData.value.firstnameC,
+    coupleLastName: familyData.value.lastnameC,
+    coupleLastNameOld: familyData.value.lastnameCOld,
+    coupleCareer: familyData.value.occupationC,
+    coupleLive: familyData.value.liveC == "1",
+    coupleCitizenId: familyData.value.citizenIdC,
+    fatherPrefixId: familyData.value.prefixIdM,
+    fatherFirstName: familyData.value.firstnameM,
+    fatherLastName: familyData.value.lastnameM,
+    fatherCareer: familyData.value.occupationM,
+    fatherLive: familyData.value.liveM == "1",
+    fatherCitizenId: familyData.value.citizenIdM,
+    motherPrefixId: familyData.value.prefixIdF,
+    motherFirstName: familyData.value.firstnameF,
+    motherLastName: familyData.value.lastnameF,
+    motherCareer: familyData.value.occupationF,
+    motherLive: familyData.value.liveF == "1",
+    motherCitizenId: familyData.value.citizenIdF,
+    childrens: familyData.value.childrens,
+    createdFullName: "-",
+    createdAt: new Date(),
+  };
+  await http
+    .put(config.API.profileFamiId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+    });
+};
+
+const addData = async () => {
+  //     showLoader();
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+const saveData = () => {
+  dialogConfirm($q, () => Datasave());
+};
+const Datasave = async () => {
+  await myform.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const clickPreviousNext = (page: string) => {
+  const index: number =
+    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
+  let length: number = familyDataHistory.value.length;
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+  indexRow.value = index;
+};
+
+const selectRadio = (e: boolean, i: any) => {
+  if (e) {
+    familyData.value.prefixIdC = "";
+    familyData.value.firstnameC = "";
+    familyData.value.lastnameC = "";
+    familyData.value.lastnameCOld = "";
+    familyData.value.occupationC = "";
+    familyData.value.liveC = "";
+    familyData.value.citizenIdC = "";
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
     <HeaderTop
@@ -1071,439 +1507,4 @@
       </div>
     </template>
   </DialogHistory>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-import type {
-  Family,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
-import type {
-  ResponseObject,
-  childrenFamily,
-  ResponseHistory,
-} from "@/modules/04_registry/interface/response/Family";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const route = useRoute();
-const $q = useQuasar();
-
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const edit = ref<boolean>(false);
-const fix = ref<boolean>(true);
-const myform = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const indexRow = ref<number>(0);
-const previous = ref<boolean>(false);
-const next = ref<boolean>(false);
-//C Couple
-//M Male
-//F Female
-const familyData = ref<Family>({
-  prefixC: null,
-  prefixIdC: null,
-  firstnameC: null,
-  lastnameC: null,
-  lastnameCOld: null,
-  occupationC: null,
-  liveC: null,
-  citizenIdC: null,
-  prefixM: null,
-  prefixIdM: null,
-  firstnameM: null,
-  lastnameM: null,
-  occupationM: null,
-  liveM: null,
-  citizenIdM: null,
-  prefixF: null,
-  prefixIdF: null,
-  firstnameF: null,
-  lastnameF: null,
-  occupationF: null,
-  liveF: null,
-  citizenIdF: null,
-  same: "0",
-  childrens: [],
-});
-const familyDataHistory = ref<ResponseHistory[]>([]);
-const Ops = ref<any>({
-  prefixOps: [],
-});
-const OpsFilter = ref<any>({
-  prefixOps: [],
-});
-
-onMounted(async () => {
-  await fetchPrefix();
-  await fetchData();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    familyData.value = {
-      prefixC: null,
-      prefixIdC: null,
-      firstnameC: null,
-      lastnameC: null,
-      lastnameCOld: null,
-      occupationC: null,
-      citizenIdC: null,
-      liveC: null,
-      prefixM: null,
-      prefixIdM: null,
-      firstnameM: null,
-      lastnameM: null,
-      occupationM: null,
-      citizenIdM: null,
-      liveM: null,
-      prefixF: null,
-      prefixIdF: null,
-      firstnameF: null,
-      lastnameF: null,
-      occupationF: null,
-      citizenIdF: null,
-      liveF: null,
-      same: "0",
-      childrens: [],
-    };
-  }
-};
-
-const historyData = async () => {
-  await fetchHistory();
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  update(() => {
-    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
-      (v: DataOption) => v.name.indexOf(val) > -1
-    );
-  });
-};
-
-const refreshData = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-const fetchPrefix = async () => {
-  showLoader();
-  await http
-    .get(config.API.prefix)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      Ops.value.prefixOps = option;
-      OpsFilter.value.prefixOps = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const addChildren = async () => {
-  familyData.value.childrens.push({
-    id: `${familyData.value.childrens.length + 1}`,
-    childrenPrefixId: "",
-    childrenFirstName: "",
-    childrenLastName: "",
-    childrenCareer: "",
-    childrenLive: "1",
-    childrenCitizenId: "",
-  });
-
-  familyData.value.childrens.sort(
-    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
-  );
-};
-
-const deleteChildren = (items: childrenFamily) => {
-  const index = familyData.value.childrens.findIndex(
-    (r: childrenFamily) => r.id == items.id
-  );
-
-  familyData.value.childrens.splice(index, 1);
-};
-
-const fetchHistory = async () => {
-  familyDataHistory.value = [];
-  showLoader();
-  await http
-    .get(config.API.profileFamiHisId(route.params.id.toString()))
-    .then((res) => {
-      const data: ResponseObject[] = res.data.result;
-      data.map((row: ResponseObject) => {
-        const arrayData: ResponseHistory = {
-          couple: row.couple ? "1" : "0",
-          couplePrefixId: row.couplePrefixId,
-          coupleFirstName: row.coupleFirstName,
-          coupleLastName: row.coupleLastName,
-          coupleLastNameOld: row.coupleLastNameOld,
-          coupleCareer: row.coupleCareer,
-          coupleLive: row.coupleLive ? "1" : "0",
-          coupleCitizenId: row.coupleCitizenId,
-          fatherPrefixId: row.fatherPrefixId,
-          fatherFirstName: row.fatherFirstName,
-          fatherLastName: row.fatherLastName,
-          fatherCareer: row.fatherCareer,
-          fatherLive: row.fatherLive ? "1" : "0",
-          fatherCitizenId: row.fatherCitizenId,
-          motherPrefixId: row.motherPrefixId,
-          motherFirstName: row.motherFirstName,
-          motherLastName: row.motherLastName,
-          motherCareer: row.motherCareer,
-          motherLive: row.motherLive ? "1" : "0",
-          motherCitizenId: row.motherCitizenId,
-          childrens: row.childrens,
-          createdFullName: row.createdFullName,
-          createdAt: new Date(row.createdAt),
-        };
-        familyDataHistory.value.push(arrayData);
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      if (familyDataHistory.value.length == 0) {
-        // modalError(
-        //   $q,
-        //   "ประวัติแก้ไขข้อมูลครอบครัว",
-        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
-        // );
-      } else {
-        modal.value = true;
-        indexRow.value = 0;
-        if (familyDataHistory.value.length > 1) {
-          next.value = true;
-          previous.value = false;
-        } else {
-          next.value = false;
-          previous.value = false;
-        }
-      }
-    });
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    showLoader();
-    await http
-      .get(config.API.profileFamiId(route.params.id.toString()))
-      .then((res) => {
-        const data: ResponseObject = res.data.result;
-        familyData.value.prefixC = "";
-        familyData.value.prefixIdC = data.couplePrefixId;
-        familyData.value.firstnameC = data.coupleFirstName;
-        familyData.value.lastnameC = data.coupleLastName;
-        familyData.value.lastnameCOld = data.coupleLastNameOld;
-        familyData.value.occupationC = data.coupleCareer;
-        familyData.value.liveC = data.coupleLive ? "1" : "0";
-        familyData.value.citizenIdC = data.coupleCitizenId;
-
-        familyData.value.prefixM = "";
-        familyData.value.prefixIdM = data.fatherPrefixId;
-        familyData.value.firstnameM = data.fatherFirstName;
-        familyData.value.lastnameM = data.fatherLastName;
-        familyData.value.occupationM = data.fatherCareer;
-        familyData.value.liveM = data.fatherLive ? "1" : "0";
-        familyData.value.citizenIdM = data.fatherCitizenId;
-
-        familyData.value.prefixF = "";
-        familyData.value.prefixIdF = data.motherPrefixId;
-        familyData.value.firstnameF = data.motherFirstName;
-        familyData.value.lastnameF = data.motherLastName;
-        familyData.value.occupationF = data.motherCareer;
-        familyData.value.liveF = data.motherLive ? "1" : "0";
-        familyData.value.citizenIdF = data.motherCitizenId;
-        familyData.value.same = data.couple ? "1" : "0";
-
-        if (data.childrens.length > 0) {
-          let dataChild: childrenFamily[] = [];
-          data.childrens.map((row: childrenFamily, index: number) => {
-            dataChild.push({
-              id: `${index + 1}`,
-              childrenPrefixId: row.childrenPrefixId,
-              childrenFirstName: row.childrenFirstName,
-              childrenLastName: row.childrenLastName,
-              childrenCareer: row.childrenCareer,
-              childrenLive: row.childrenLive,
-              childrenCitizenId: row.childrenCitizenId,
-            });
-          });
-          familyData.value.childrens = dataChild;
-        } else {
-          familyData.value.childrens = [];
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-};
-
-const editData = async () => {
-  showLoader();
-  const body: ResponseObject = {
-    couple: familyData.value.same == "1",
-    couplePrefixId: familyData.value.prefixIdC,
-    coupleFirstName: familyData.value.firstnameC,
-    coupleLastName: familyData.value.lastnameC,
-    coupleLastNameOld: familyData.value.lastnameCOld,
-    coupleCareer: familyData.value.occupationC,
-    coupleLive: familyData.value.liveC == "1",
-    coupleCitizenId: familyData.value.citizenIdC,
-    fatherPrefixId: familyData.value.prefixIdM,
-    fatherFirstName: familyData.value.firstnameM,
-    fatherLastName: familyData.value.lastnameM,
-    fatherCareer: familyData.value.occupationM,
-    fatherLive: familyData.value.liveM == "1",
-    fatherCitizenId: familyData.value.citizenIdM,
-    motherPrefixId: familyData.value.prefixIdF,
-    motherFirstName: familyData.value.firstnameF,
-    motherLastName: familyData.value.lastnameF,
-    motherCareer: familyData.value.occupationF,
-    motherLive: familyData.value.liveF == "1",
-    motherCitizenId: familyData.value.citizenIdF,
-    childrens: familyData.value.childrens,
-    createdFullName: "-",
-    createdAt: new Date(),
-  };
-  await http
-    .put(config.API.profileFamiId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-    });
-};
-
-const addData = async () => {
-  //     showLoader();
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-const saveData = () => {
-  dialogConfirm($q, () => Datasave());
-};
-const Datasave = async () => {
-  await myform.value?.validate().then(async (success: boolean) => {
-    if (success) {
-      if (props.statusAdd) {
-        await addData();
-      } else {
-        await editData();
-      }
-    } else {
-    }
-  });
-};
-
-const clickPreviousNext = (page: string) => {
-  const index: number =
-    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
-  let length: number = familyDataHistory.value.length;
-  previous.value = index == 0 ? false : true;
-  next.value = index == length - 1 ? false : true;
-  indexRow.value = index;
-};
-
-const selectRadio = (e: boolean, i: any) => {
-  if (e) {
-    familyData.value.prefixIdC = "";
-    familyData.value.firstnameC = "";
-    familyData.value.lastnameC = "";
-    familyData.value.lastnameCOld = "";
-    familyData.value.occupationC = "";
-    familyData.value.liveC = "";
-    familyData.value.citizenIdC = "";
-  }
-};
-
-const changeBtn = async () => {
-  if (edit.value == true) {
-    if (props.statusEdit === true) {
-      edit.value = false;
-      props.notiNoEdit();
-    } else {
-      emit("update:statusEdit", true);
-    }
-  } else {
-    emit("update:statusEdit", false);
-  }
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Information/Government.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Government.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
index 3ae4aa7af..2ab7421b4 100644
--- a/src/modules/08_registryEmployee/views/Information/Government.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
@@ -1,332 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลราชการ"
-      icon="mdi-account-tie"
-      :save="saveData"
-      :history="true"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-      :historyClick="clickHistory"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.ocId"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.numberId"
-            :label="`${'ตำแหน่งเลขที่'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionId"
-            :label="`${'ตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionPathSide"
-            :label="`${'ด้าน/สาขา'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionLine"
-            :label="`${'สายงาน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionType"
-            :label="`${'ประเภท'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionLevel"
-            :label="`${'ระดับ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionExecutive"
-            :label="`${'ตำแหน่งทางการบริหาร'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionExecutiveSide"
-            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
-          />
-        </div>
-        <div class="col-12 q-py-md"><q-separator /></div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <datepicker
-            v-model="govermentData.containDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(new Date(govermentData.containDate))"
-                :rules="[
-                  (val) =>
-                    !!val ||
-                    `${
-                      profileType == 'officer'
-                        ? 'กรุณาเลือกวันที่บรรจุ'
-                        : 'กรุณาเลือกวันที่แต่งตั้ง'
-                    }`,
-                ]"
-                :label="`${
-                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
-                }`"
-              >
-                <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-3 col-md-3">
-          <datepicker
-            v-model="govermentData.workDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(new Date(govermentData.workDate))"
-                :rules="[
-                  (val) =>
-                    !!val ||
-                    `${
-                      profileType == 'officer'
-                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
-                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
-                    }`,
-                ]"
-                :label="`${
-                  profileType == 'officer'
-                    ? 'เริ่มปฎิบัติราชการ'
-                    : 'วันที่จ้างและแต่งตั้งมีผล'
-                }`"
-              >
-                <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-6 col-md-6" v-if="profileType == 'officer'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            stack-label
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="govermentData.reasonSameDate"
-            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.retireDate"
-            :label="`${'วันเกษียณอายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.ageAll"
-            :label="`${'อายุราชการ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.absent"
-            :label="`${'ขาดราชการ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.age"
-            :label="`${'อายุราชการเกื้อกูล'}`"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateAppoint' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -761,3 +432,333 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLine"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionType"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLevel"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutive"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
+              >
+                <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-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
+              >
+                <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-6 col-md-6" v-if="profileType == 'officer'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Information.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
index 8a683aa09..230b472ad 100644
--- a/src/modules/08_registryEmployee/views/Information/Information.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
@@ -1,417 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
-        <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.cardid"
-            @update:model-value="changeCardID"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            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"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </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="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-            clearable
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            mask="##########"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
-                val.length >= 10 ||
-                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="!edit"
-          />
-        </div>
-        <div class="row col-12">
-          <OldName
-            v-if="same == '1'"
-            v-model:statusEdit="edit"
-            :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
-            :firstname="
-              informaData.firstname == null ? '' : informaData.firstname
-            "
-            :lastname="informaData.lastname == null ? '' : informaData.lastname"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -1073,7 +659,7 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
@@ -1156,3 +742,418 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
+        <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.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            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"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="informaData.birthDate ? date2Thai(informaData.birthDate) : null"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </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="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+              (val:string) =>
+                val.length >= 10 ||
+                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
+            ]"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Information/OldName.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/OldName.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
index 84e25eb2b..b165d0791 100644
--- a/src/modules/08_registryEmployee/views/Information/OldName.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
@@ -1,296 +1,3 @@
-<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
-<template>
-  <div class="col-12">
-    <q-form ref="myForm">
-      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
-        icon="mdi-book"
-        :statusEdit="!statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="statusEdit ? selectData(props) : ''"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'status'" class="table_ellipsis">
-                {{ typeChangeName(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.file != null"
-                color="green"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-file-document-outline"
-                @click="openFile(props.row.file)"
-              />
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </div>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <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="status"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.statusOps"
-                option-value="id"
-                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                      ) "
-              />
-            </div>
-            <q-space class="col-6" />
-            <div class="col-xs-4 col-sm-4 col-md-4">
-              <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="prefixId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.prefixOps"
-                option-value="id"
-                :label="`${'คำนำหน้าชื่อ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-4 col-sm-4 col-md-4">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit || status == 'lastName'"
-                :borderless="!edit"
-                v-model="firstName"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-4 col-sm-4 col-md-4">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit || status == 'firstName'"
-                :borderless="!edit"
-                v-model="lastName"
-                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
-                hide-bottom-space
-                :label="`${'นามสกุล'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <q-btn
-              v-if="file != null && !edit"
-              color="green"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-file-document-outline"
-              @click="openFile(file)"
-            />
-            <q-uploader
-              v-if="edit"
-              color="gray"
-              type="file"
-              flat
-              ref="uploader"
-              class="full-width"
-              text-color="white"
-              :max-size="10000000"
-              accept=".jpg,.png,.pdf,.csv,.doc,.docx"
-              bordered
-              label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
-              @added="fileAdd"
-            >
-              <template v-slot:header="scope">
-                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
-                  <q-btn
-                    v-if="scope.queuedFiles.length > 0"
-                    icon="clear_all"
-                    @click="scope.removeQueuedFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ลบทั้งหมด</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="scope.uploadedFiles.length > 0"
-                    icon="done_all"
-                    @click="scope.removeUploadedFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
-                  </q-btn>
-                  <q-spinner
-                    v-if="scope.isUploading"
-                    class="q-uploader__spinner"
-                  />
-                  <div class="col">
-                    <div class="q-uploader__title">
-                      {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
-                    </div>
-                    <div class="q-uploader__subtitle">
-                      {{ scope.uploadSizeLabel }} /
-                      {{ scope.uploadProgressLabel }}
-                    </div>
-                  </div>
-                  <q-btn
-                    v-if="scope.canAddFiles"
-                    type="a"
-                    icon="add_box"
-                    @click="scope.pickFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-uploader-add-trigger />
-                    <q-tooltip>เลือกไฟล์</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="scope.isUploading"
-                    icon="clear"
-                    @click="scope.abort"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
-                  </q-btn>
-                </div>
-              </template>
-            </q-uploader>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-    :history="true"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'status'" class="table_ellipsis">
-            {{ typeChangeName(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            v-if="props.row.file != null"
-            color="green"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-file-document-outline"
-            @click="openFile(props.row.file)"
-          />
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -967,6 +674,301 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        icon="mdi-book"
+        :statusEdit="!statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <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="status"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+              />
+            </div>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <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="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'lastName'"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'firstName'"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Information/Tempinformation.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
index 0f1287a68..f35d46d36 100644
--- a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
@@ -1,194 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลลูกจ้างชั่วคราว"
-      icon="mdi-account"
-      :save="saveData"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-      :addEmployee="statusAdd()"
-      :history="!statusAdd()"
-    />
-    <q-form ref="myform">
-      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaTempData.positionEmployeeGroupId"
-            :label="`${'กลุ่มงาน'}`"
-            @update:modelValue="!edit"
-            emit-value
-            map-options
-            option-label="name"
-            :options="employeeGroupOptions"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
-            option-value="id"
-            hide-bottom-space
-            use-input
-            input-debounce="0"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaTempData.positionEmployeeLineId"
-            :label="`${'สายงาน'}`"
-            @update:modelValue="!edit"
-            emit-value
-            map-options
-            option-label="name"
-            :options="positionEmployeeLineOptions"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-            option-value="id"
-            hide-bottom-space
-            use-input
-            input-debounce="0"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaTempData.positionEmployeePositionId"
-            :label="`${'ชื่อตำแหน่งทางสายงาน'}`"
-            @update:modelValue="!edit"
-            emit-value
-            map-options
-            option-label="name"
-            :options="positionEmployeePositionOptions"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
-            option-value="id"
-            hide-bottom-space
-            use-input
-            input-debounce="0"
-          />
-        </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="informaTempData.employeeOc"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaTempData.employeeTypeIndividual"
-            :label="`${'ประเภทบุคคล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <CurrencyInput
-            v-model="informaTempData.employeeWage"
-            :edit="edit"
-            :options="{
-              currency: 'THB',
-            }"
-            :label="`${'ค่าจ้าง'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <CurrencyInput
-            v-model="informaTempData.employeeMoneyIncrease"
-            :edit="edit"
-            :options="{
-              currency: 'THB',
-            }"
-            :label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <CurrencyInput
-            v-model="informaTempData.employeeMoneyAllowance"
-            :edit="edit"
-            :options="{
-              currency: 'THB',
-            }"
-            :label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <CurrencyInput
-            v-model="informaTempData.employeeMoneyEmployee"
-            :edit="edit"
-            :options="{
-              currency: 'THB',
-            }"
-            :label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <CurrencyInput
-            v-model="informaTempData.employeeMoneyEmployer"
-            :edit="edit"
-            :options="{
-              currency: 'THB',
-            }"
-            :label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="col.name == 'registrationSame'"
-            class="table_ellipsis"
-          >
-            {{ col.value ? "ใช่" : "ไม่" }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -198,7 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/08_registryEmployee/views/topEmployeeTemp.vue";
+import HeaderTop from "@/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
 import type { QTableProps } from "quasar";
@@ -211,7 +20,7 @@ const props = defineProps({
   },
   fetchDataProfile: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => { /* function */},
   },
   statusAdd: {
     type: Boolean,
@@ -486,8 +295,6 @@ const fetchData = async () => {
         //   console.log(res);
         // });
         const data: any = res.data.result;
-        console.log(data);
-
         informaTempData.value.employeeMoneyIncrease =
           data.employeeMoneyIncrease;
         informaTempData.value.employeeMoneyAllowance =
@@ -672,3 +479,195 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลลูกจ้างชั่วคราว"
+      icon="mdi-account"
+      :save="saveData"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :addEmployee="statusAdd()"
+      :history="!statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeGroupId"
+            :label="`${'กลุ่มงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="employeeGroupOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeLineId"
+            :label="`${'สายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeeLineOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeePositionId"
+            :label="`${'ชื่อตำแหน่งทางสายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeePositionOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </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="informaTempData.employeeOc"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.employeeTypeIndividual"
+            :label="`${'ประเภทบุคคล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeWage"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'ค่าจ้าง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyIncrease"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyAllowance"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployee"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployer"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Leave.vue b/src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Leave.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
index 0ede919fc..bb5763a23 100644
--- a/src/modules/08_registryEmployee/views/Leave.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
@@ -1,346 +1,3 @@
-<!-- card การลา -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        :addleave="clickAddLeave"
-        name="การลา"
-        icon="mdi-calendar-account"
-        iconAdd="mdi-calendar-account"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              class="cursor-pointer"
-              @click="selectData(props)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div
-                v-else-if="col.name == 'dateStartLeave'"
-                class="table_ellipsis"
-              >
-                {{
-                  dateThaiRange([
-                    props.row.dateStartLeave,
-                    props.row.dateEndLeave,
-                  ])
-                }}
-              </div>
-              <div v-else-if="col.name == 'status'" class="table_ellipsis">
-                {{ statusLeave(col.value) }}
-                <!-- {{ col.value }} -->
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'numLeave' ||
-                  col.name == 'sumLeave' ||
-                  col.name == 'totalLeave'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Add Edit Leave -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormAdd">
-        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="typeLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทการลา'}`"
-                @update:modelValue="clickEditRowType"
-                emit-value
-                map-options
-                option-label="name"
-                :options="typeLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateRange"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-                range
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="dateThaiRange(dateRange)"
-                    :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-xs-3 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="numLeave"
-                type="number"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
-                hide-bottom-space
-                :label="`${'จำนวนวันที่ลา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-3 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(false)"
-                :outlined="true"
-                dense
-                lazy-rules
-                :readonly="false"
-                :borderless="false"
-                disable
-                v-model="numUsedLeave"
-                type="number"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
-                hide-bottom-space
-                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="statLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
-                hide-bottom-space
-                :label="`${'สถานะการลา'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="statLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-                hide-bottom-space
-                :label="`${'เหตุผล'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="การลา" :close="clickClose" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <data-table
-              :rows="rowsTotal"
-              :columns="columnsTotal"
-              :filter="filterTotal"
-              :visible-columns="visibleColumnsTotal"
-              v-model:inputfilter="filterTotal"
-              v-model:inputvisible="visibleColumnsTotal"
-              :nornmalData="true"
-            >
-              <template #columns="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div
-                      v-else-if="
-                        col.name == 'numLeave' ||
-                        col.name == 'sumLeave' ||
-                        col.name == 'totalLeave'
-                      "
-                      class="table_ellipsis"
-                    >
-                      {{
-                        col.value == null
-                          ? ""
-                          : col.value.toLocaleString("en-US")
-                      }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-            </data-table>
-          </div>
-        </q-card-section>
-        <q-separator />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
-          </div>
-          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
-            {{
-              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
-            }}
-          </div>
-
-          <div
-            v-else-if="
-              col.name == 'numLeave' ||
-              col.name == 'sumLeave' ||
-              col.name == 'totalLeave'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </div>
-          <div v-else-if="col.name == 'status'" class="table_ellipsis">
-            {{ statusLeave(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -724,7 +381,6 @@ const fetchData = async () => {
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
         const data = res.data.result;
-        //   console.log(data);
         data.map((e: ResponseObject) => {
           rows.value.push({
             id: e.id,
@@ -1273,6 +929,351 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card การลา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :addleave="clickAddLeave"
+        name="การลา"
+        icon="mdi-calendar-account"
+        iconAdd="mdi-calendar-account"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              class="cursor-pointer"
+              @click="selectData(props)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'dateStartLeave'"
+                class="table_ellipsis"
+              >
+                {{
+                  dateThaiRange([
+                    props.row.dateStartLeave,
+                    props.row.dateEndLeave,
+                  ])
+                }}
+              </div>
+              <div v-else-if="col.name == 'status'" class="table_ellipsis">
+                {{ statusLeave(col.value) }}
+                <!-- {{ col.value }} -->
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'numLeave' ||
+                  col.name == 'sumLeave' ||
+                  col.name == 'totalLeave'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Add Edit Leave -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateRange"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+                range
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateThaiRange(dateRange)"
+                    :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-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(false)"
+                :outlined="true"
+                dense
+                lazy-rules
+                :readonly="false"
+                :borderless="false"
+                disable
+                v-model="numUsedLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                hide-bottom-space
+                :label="`${'สถานะการลา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                hide-bottom-space
+                :label="`${'เหตุผล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การลา" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <data-table
+              :rows="rowsTotal"
+              :columns="columnsTotal"
+              :filter="filterTotal"
+              :visible-columns="visibleColumnsTotal"
+              v-model:inputfilter="filterTotal"
+              v-model:inputvisible="visibleColumnsTotal"
+              :nornmalData="true"
+            >
+              <template #columns="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="
+                        col.name == 'numLeave' ||
+                        col.name == 'sumLeave' ||
+                        col.name == 'totalLeave'
+                      "
+                      class="table_ellipsis"
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value.toLocaleString("en-US")
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </data-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name == 'numLeave' ||
+              col.name == 'sumLeave' ||
+              col.name == 'totalLeave'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ statusLeave(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Other.vue b/src/modules/08_registryEmployee/components/EditEmployee/Other.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Other.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Other.vue
index 1384c0696..d523b638d 100644
--- a/src/modules/08_registryEmployee/views/Other.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Other.vue
@@ -1,165 +1,3 @@
-<!-- card อื่นๆ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="อื่นๆ"
-        icon="mdi-bookmark"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -619,3 +457,166 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card อื่นๆ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="อื่นๆ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Record.vue b/src/modules/08_registryEmployee/components/EditEmployee/Record.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Record.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Record.vue
index a3fb990ee..d3dfaf37e 100644
--- a/src/modules/08_registryEmployee/views/Record.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Record.vue
@@ -1,258 +1,3 @@
-<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
-        icon="mdi-calendar-remove"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'date' || col.name == 'refCommandDate'"
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
-                    hide-bottom-space
-                    :label="`${'วัน เดือน ปี'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                autogrow
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                autogrow
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    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>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'date' ||
-              col.name == 'createdAt' ||
-              col.name == 'refCommandDate'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -820,6 +565,263 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+        icon="mdi-calendar-remove"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Salary.vue b/src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Salary.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
index b65ad6591..4631417af 100644
--- a/src/modules/08_registryEmployee/views/Salary.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
@@ -1,550 +1,3 @@
-<!-- card ตำแหน่ง/เงินเดือน -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ตำแหน่ง/เงินเดือน"
-        icon="mdi-cash"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-              class="cursor-pointer">
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
-                  col.name == 'positionSalaryAmount' ||
-                  col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount')
-                " class="table_ellipsis">
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
-                ถึงแก่กรรม
-              </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
-                -
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader tittle="ตำแหน่ง/เงินเดือน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    v-if="edit"
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                  <q-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            :class="getClass(edit)"
-                            :outlined="edit"
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                              (val:string) =>
-                                !!val ||
-                                `${'กรุณาเลือกวัน เดือน ปี'}`,
-                            ]"
-                            :label="`${'วัน เดือน ปี'}`"
-                            hide-bottom-space
-                          >
-                            <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-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="posNoId"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        ]"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="posNoOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                        :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionTypeId"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        ]"
-                        :label="`${'ตำแหน่งประเภท'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionTypeOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionLineId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-                        :label="`${'สายงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLineOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionLevelId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLevelOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionExecutiveId"
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionExecutiveOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refCommandNo"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                        <template v-slot:append>
-                          <q-icon
-                            name="mdi-file"
-                            class="cursor-pointer"
-                            @click="resetFilter"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
-                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div> -->
-
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="
-              col.name == 'positionSalaryAmount' ||
-              col.name == 'mouthSalaryAmount' ||
-              col.name == 'amount'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -2063,6 +1516,555 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card ตำแหน่ง/เงินเดือน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/เงินเดือน"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
+              class="cursor-pointer">
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount')
+                " class="table_ellipsis">
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
+                ถึงแก่กรรม
+              </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
+                -
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/เงินเดือน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                              (val:string) =>
+                                !!val ||
+                                `${'กรุณาเลือกวัน เดือน ปี'}`,
+                            ]"
+                            :label="`${'วัน เดือน ปี'}`"
+                            hide-bottom-space
+                          >
+                            <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-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                        ]"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="posNoOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionTypeId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
+                        ]"
+                        :label="`${'ตำแหน่งประเภท'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionTypeOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLineId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLineOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLevelId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionExecutiveId"
+                        :label="`${'ตำแหน่งทางการบริหาร'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionExecutiveOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryClass"
+                        :rules="[
+                          (val:string) =>
+                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                        ]"
+                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      >
+                        <template v-slot:append>
+                          <q-btn
+                            color="info"
+                            flat
+                            dense
+                            round
+                            size="14px"
+                            icon="mdi-plus"
+                            @click="templateDetail"
+                            :disable="!edit"
+                          />
+                        </template>
+                      </q-input>
+                    </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/SalaryEmployee.vue b/src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/SalaryEmployee.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
index ab4ccb76f..b2e7332de 100644
--- a/src/modules/08_registryEmployee/views/SalaryEmployee.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
@@ -1,580 +1,3 @@
-<!-- card ตำแหน่ง/ค่าจ้าง -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ตำแหน่ง/ค่าจ้าง"
-        icon="mdi-cash"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'positionSalaryAmount' ||
-                  col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 60vw; max-width: 80vw">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    v-if="edit"
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="agencyId"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                  <q-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <q-card class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 60vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            :class="getClass(edit)"
-                            :outlined="edit"
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                                (val:string) =>
-                                  !!val ||
-                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
-                              ]"
-                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
-                            hide-bottom-space
-                          >
-                            <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-6 col-md-6">
-                      <!-- <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="posNoId"
-                      :rules="[
-                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                          ]"
-                      :label="`${'ตำแหน่งเลขที่'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="posNoOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
-                        ) "
-                    /> -->
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="posNoEmployee"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="employeePositionId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                        :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeePositionOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
-                        ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
-                        v-model="employeePositionSideId"
-                        :label="`${'ด้านของตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeePositionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
-                        ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="employeeLevelId"
-                        :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        option-label="name"
-                        :options="employeeLevelOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
-                        ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="employeeGroupId"
-                        :label="`${'กลุ่มงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeeGroupOptions"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกกุ่มงาน'}`]"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
-                        ) "
-                      />
-                    </div>
-                    <!-- <div class="col-xs-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="agencyId"
-                        :label="`${'สังกัด'}`"
-                        @update:model-value="(value:string) => selectAgency(value)"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="agencyOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
-                        ) "
-                      />
-                    </div> -->
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
-                        :label="`${'ค่าจ้าง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      /> -->
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="amount"
-                        :edit="edit"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'ค่าจ้าง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refCommandNo"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                        <template v-slot:append>
-                          <q-icon
-                            name="mdi-file"
-                            class="cursor-pointer"
-                            @click="resetFilter"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
-                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="positionSalaryAmount"
-                      :label="`${'เงินประจำตำแหน่ง'}`"
-                      @update:modelValue="clickEditRow"
-                      type="number"
-                      hide-bottom-space
-                    />
-                  </div>
-                  <div class="col-xs-4 col-sm-4 col-md-4">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="mouthSalaryAmount"
-                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                      @update:modelValue="clickEditRow"
-                      type="number"
-                      hide-bottom-space
-                    />
-                  </div> -->
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="salaryClass"
-                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                      @update:modelValue="clickEditRow"
-                      hide-bottom-space
-                      autogrow
-                    >
-                    </q-input>
-                  </div> -->
-
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกต้นแบบ (template) เอกสารอ้างอิง'}`]"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
-                        ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="refCommandDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="date2Thai(refCommandDate)"
-                          :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>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="
-              col.name == 'positionSalaryAmount' ||
-              col.name == 'mouthSalaryAmount' ||
-              col.name == 'amount'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -1501,8 +924,6 @@ const fetchData = async () => {
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
         const data = res.data.result;
-        console.log(data);
-
         rows.value = [];
         data.map((e: ResponseObjectEmployee) => {
           rows.value.push({
@@ -2057,6 +1478,585 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <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-6 col-md-6">
+                      <!-- <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNoId"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                          ]"
+                      :label="`${'ตำแหน่งเลขที่'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
+                        ) "
+                    /> -->
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกกุ่มงาน'}`]"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      /> -->
+                      <CurrencyInput
+                        lazy-rules
+                        v-model="amount"
+                        :edit="edit"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'ค่าจ้าง'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกต้นแบบ (template) เอกสารอ้างอิง'}`]"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(refCommandDate)"
+                          :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>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Talent.vue b/src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Talent.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
index b1842ab4b..b228722d1 100644
--- a/src/modules/08_registryEmployee/views/Talent.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
@@ -1,163 +1,3 @@
-<!-- card ความสามารถพิเศษ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ความสามารถพิเศษ"
-        icon="mdi-folder-star"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                autogrow
-                :borderless="!edit"
-                v-model="field"
-                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
-                hide-bottom-space
-                :label="`${'ด้าน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                autogrow
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                autogrow
-                :borderless="!edit"
-                v-model="remark"
-                hide-bottom-space
-                :label="`${'หมายเหตุ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                autogrow
-                :borderless="!edit"
-                v-model="reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -684,3 +524,164 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ความสามารถพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ความสามารถพิเศษ"
+        icon="mdi-folder-star"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
+                hide-bottom-space
+                :label="`${'ด้าน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="remark"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/topEmployeeTemp.vue b/src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
similarity index 93%
rename from src/modules/08_registryEmployee/views/topEmployeeTemp.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
index ac620aba9..4f6bd8763 100644
--- a/src/modules/08_registryEmployee/views/topEmployeeTemp.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
@@ -1,100 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <div class="flex items-center">
-      <q-icon
-        :name="icon"
-        size="1.5em"
-        color="grey-5"
-        class="q-mr-md"
-        v-if="icon != ''"
-      />
-      <div
-        class="text-bold text-subtitle2 col-12 row items-center"
-        v-if="header != ''"
-      >
-        {{ header }}
-      </div>
-    </div>
-    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
-      <q-btn
-        size="12px"
-        v-if="!edit"
-        flat
-        round
-        :disabled="disable"
-        :color="edit ? 'grey-7' : 'primary'"
-        @click="ClickEdit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit"
-        :color="!edit ? 'grey-7' : 'public'"
-        @click="save"
-        icon="mdi-content-save-outline"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit && !addEmployee"
-        :color="!edit ? 'grey-7' : 'red'"
-        @click="ClickCancel"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-    </div>
-    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
-      <q-btn
-        size="12px"
-        flat
-        round
-        color="add"
-        @click="addleave"
-        icon="mdi-plus"
-      >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
-        <q-tooltip>สรุปวันลา</q-tooltip>
-      </q-btn>
-    </div>
-
-    <div class="q-pl-sm" v-else>
-      <q-btn
-        size="12px"
-        flat
-        round
-        :disabled="disable"
-        color="add"
-        @click="add"
-        icon="mdi-plus"
-      >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-    </div>
-    <q-space />
-    <!-- <q-btn
-      color="info"
-      flat
-      dense
-      round
-      size="14px"
-      icon="mdi-history"
-      v-if="history"
-      @click="historyClick"
-    >
-      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
-    </q-btn> -->
-  </div>
-</template>
 <script setup lang="ts">
 const props = defineProps({
   header: {
@@ -196,4 +99,89 @@ const addleave = () => {
   props.addleave();
 };
 </script>
-<style scoped></style>
+
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+  </div>
+</template>
diff --git a/src/modules/08_registryEmployee/views/Train.vue b/src/modules/08_registryEmployee/components/EditEmployee/Train.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Train.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Train.vue
index 3c90eb592..6a6bcf1ce 100644
--- a/src/modules/08_registryEmployee/views/Train.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Train.vue
@@ -1,402 +1,3 @@
-<!-- card การฝึกอบรม/ดูงาน -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="การฝึกอบรม/ดูงาน"
-        icon="mdi-briefcase"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="
-                  col.name == 'startDate' ||
-                  col.name == 'endDate' ||
-                  col.name == 'dateOrder'
-                "
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="name"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
-                ]"
-                :label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="topic"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
-                ]"
-                :label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="startDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(startDate)"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
-                    ]"
-                    :label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(endDate)"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
-                    ]"
-                    :label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="yearly"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="yearly + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="place"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
-                ]"
-                :label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="duration"
-                :label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="department"
-                :label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="numberOrder"
-                :label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateOrder"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateOrder)"
-                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
-                  >
-                    <!-- :rules="[
-                      (val) =>
-                        !!val ||
-                        `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
-                    ]" -->
-                    <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>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'startDate' ||
-              col.name == 'endDate' ||
-              col.name == 'createdAt' ||
-              col.name == 'dateOrder'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
-            {{ col.value + 543 }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -1125,6 +726,407 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card การฝึกอบรม/ดูงาน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="การฝึกอบรม/ดูงาน"
+        icon="mdi-briefcase"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'startDate' ||
+                  col.name == 'endDate' ||
+                  col.name == 'dateOrder'
+                "
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
+                ]"
+                :label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="topic"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(startDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(endDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="yearly + 543"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="place"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                :label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="department"
+                :label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numberOrder"
+                :label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateOrder"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateOrder)"
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                  >
+                    <!-- :rules="[
+                      (val) =>
+                        !!val ||
+                        `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
+                    ]" -->
+                    <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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'startDate' ||
+              col.name == 'endDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'dateOrder'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/views/Work.vue b/src/modules/08_registryEmployee/components/EditEmployee/Work.vue
similarity index 99%
rename from src/modules/08_registryEmployee/views/Work.vue
rename to src/modules/08_registryEmployee/components/EditEmployee/Work.vue
index 99317723d..5d66ae88c 100644
--- a/src/modules/08_registryEmployee/views/Work.vue
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Work.vue
@@ -1,303 +1,3 @@
-<!-- card ปฏิบัติราชการพิเศษ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ปฏิบัติราชการพิเศษ"
-        icon="mdi-bookmark"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="
-                  col.name == 'dateStart' ||
-                  col.name == 'dateEnd' ||
-                  col.name == 'refCommandDate'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateStart)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่มต้น'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateEnd"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateEnd)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    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>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateEnd' ||
-              col.name == 'createdAt' ||
-              col.name == 'refCommandDate'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -903,6 +603,308 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card ปฏิบัติราชการพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ปฏิบัติราชการพิเศษ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateStart)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่เริ่มต้น'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateEnd)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่สิ้นสุด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateEnd' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/08_registryEmployee/index/Main.ts b/src/modules/08_registryEmployee/interface/index/Main.ts
similarity index 100%
rename from src/modules/08_registryEmployee/index/Main.ts
rename to src/modules/08_registryEmployee/interface/index/Main.ts
diff --git a/src/modules/08_registryEmployee/interface/request/Main.ts b/src/modules/08_registryEmployee/interface/request/Main.ts
new file mode 100644
index 000000000..d6851125d
--- /dev/null
+++ b/src/modules/08_registryEmployee/interface/request/Main.ts
@@ -0,0 +1,56 @@
+interface FormRegistryEmployee {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  oc: string;
+  position: string;
+  positionPathSide: string;
+  positionLine: string;
+  govAge: number;
+  refSalary: string;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeGroup: string | null;
+  age: string;
+  amount: string;
+  dateAppoint: string | null;
+  dateStart: string | null;
+  createdAt: string | null;
+  //   salaryDate: string | null;
+  isLeave: string;
+  //   leaveReason: string;
+  leaveDateOrder: string | null;
+  draftPositionEmployee: string | null;
+  draftOrganizationOrganization: string | null;
+  newAgency: string | null;
+  currentAgency: string | null;
+  status: string;
+  statustext: string;
+}
+interface ResponseEmployeeTemp {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  oc: string;
+  position: string;
+  positionPathSide: string;
+  positionLine: string;
+  govAge: number;
+  refSalary: string;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeGroup: string | null;
+  age: string;
+  amount: string;
+  dateAppoint: Date | null;
+  dateStart: Date | null;
+  createdAt: Date | null;
+  salaryDate: Date | null;
+  isLeave: boolean;
+  leaveReason: string;
+  leaveDateOrder: Date | null;
+  draftPositionEmployee: string | null;
+  draftOrganizationOrganization: string | null;
+  draftOrgEmployeeStatus: string;
+}
+export type { ResponseEmployeeTemp, FormRegistryEmployee };
diff --git a/src/modules/08_registryEmployee/response/Main.ts b/src/modules/08_registryEmployee/interface/response/Main.ts
similarity index 100%
rename from src/modules/08_registryEmployee/response/Main.ts
rename to src/modules/08_registryEmployee/interface/response/Main.ts
diff --git a/src/modules/08_registryEmployee/request/Main.ts b/src/modules/08_registryEmployee/request/Main.ts
deleted file mode 100644
index 0be4e8822..000000000
--- a/src/modules/08_registryEmployee/request/Main.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-interface FormRegistryEmployee {
-  id: string;
-  fullname: String;
-  fullnameOld: String;
-  oc: String;
-  position: string;
-  positionPathSide: String;
-  positionLine: String;
-  govAge: number;
-  refSalary: String;
-  positionEmployeePosition: String | null;
-  positionEmployeePositionSide: String | null;
-  positionEmployeeGroup: String | null;
-  age: String;
-  amount: String;
-  dateAppoint: String | null;
-  dateStart: String | null;
-  createdAt: String | null;
-  //   salaryDate: String | null;
-  isLeave: String;
-  //   leaveReason: string;
-  leaveDateOrder: String | null;
-  draftPositionEmployee: String | null;
-  draftOrganizationOrganization: String | null;
-  newAgency: String | null;
-  currentAgency: String | null;
-  status: String;
-  statustext: String;
-}
-interface ResponseEmployeeTemp {
-  id: string;
-  fullname: String;
-  fullnameOld: String;
-  oc: String;
-  position: string;
-  positionPathSide: String;
-  positionLine: String;
-  govAge: number;
-  refSalary: String;
-  positionEmployeePosition: String | null;
-  positionEmployeePositionSide: String | null;
-  positionEmployeeGroup: String | null;
-  age: String;
-  amount: String;
-  dateAppoint: Date | null;
-  dateStart: Date | null;
-  createdAt: Date | null;
-  salaryDate: Date | null;
-  isLeave: boolean;
-  leaveReason: string;
-  leaveDateOrder: Date | null;
-  draftPositionEmployee: String | null;
-  draftOrganizationOrganization: String | null;
-  draftOrgEmployeeStatus: String;
-}
-export type { ResponseEmployeeTemp, FormRegistryEmployee };
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index b67402b29..4f0173a0d 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -1,16 +1,14 @@
-/**
- * Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee)
- */
+/*** Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee) */
 import { defineAsyncComponent } from "vue";
 
-// const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
-// const Detail = () => import("@/modules/08_registryEmployee/views/Detail.vue");
 const Main = defineAsyncComponent(
   () => import("@/modules/08_registryEmployee/views/Main.vue")
 );
-const Detail = defineAsyncComponent(
-  () => import("@/modules/08_registryEmployee/views/Detail.vue")
+
+const CreateEmployee = defineAsyncComponent(
+  () => import("@/modules/08_registryEmployee/views/Add.vue")
 );
+
 const EditDetail = defineAsyncComponent(
   () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
 );
@@ -26,20 +24,10 @@ export default [
       Role: "registryEmployee",
     },
   },
-  //   {
-  //     path: "/registryEmployee/:id",
-  //     name: "registryEmployeeDetail",
-  //     component: Detail,
-  //     meta: {
-  //       Auth: true,
-  //       Key: [10],
-  //       Role: "registryEmployeeDetails",
-  //     },
-  //   },
   {
     path: "/registry-employee/add",
     name: "registryEmployeeAdd",
-    component: Detail,
+    component: CreateEmployee,
     meta: {
       Auth: true,
       Key: [11],
diff --git a/src/modules/08_registryEmployee/store.ts b/src/modules/08_registryEmployee/store.ts
index 8b69ec17a..3bdd56d51 100644
--- a/src/modules/08_registryEmployee/store.ts
+++ b/src/modules/08_registryEmployee/store.ts
@@ -81,3 +81,29 @@ export const useProfileDataStore = defineStore("profile", () => {
     changeRetireText,
   };
 });
+
+export const useRegistryEmployeeDataStore = defineStore("registryEmployeeDataStore", () => {
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+  
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
+});
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Add.vue
similarity index 79%
rename from src/modules/08_registryEmployee/views/Detail.vue
rename to src/modules/08_registryEmployee/views/Add.vue
index 8991ae991..3f13a49de 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Add.vue
@@ -1,19 +1,17 @@
+<script setup lang="ts">
+import AddEmployee from "@/modules/08_registryEmployee/components/AddEmployee/Main.vue";
+</script>
+
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
       <div id="information" name="1" class="row col-12 information q-mt-sm">
-        <!-- <Informationvue
-            v-model:statusEdit="statusEdit"
-            :profileType="profileType"
-          /> -->
-        <Information :statusAdd="true" />
+        <AddEmployee />
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import Information from "@/modules/08_registryEmployee/views/information.vue";
-</script>
+
 <style>
 .image-size-default {
   height: 150px;
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
index 641f2925e..975c6cf6c 100644
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ b/src/modules/08_registryEmployee/views/EditDetail.vue
@@ -1,3 +1,394 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import EducationVue from "@/modules/08_registryEmployee/components/EditEmployee/Education.vue";
+import TrainVue from "@/modules/08_registryEmployee/components/EditEmployee/Train.vue";
+import AssessmentVue from "@/modules/08_registryEmployee/components/EditEmployee/Assessment.vue";
+// import SalaryVue from "@/modules/08_registryEmployee/components/EditEmployee/Salary.vue";
+import SalaryEmployeeVue from "@/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue";
+import DisciplineVue from "@/modules/08_registryEmployee/components/EditEmployee/Discipline.vue";
+import LeaveVue from "@/modules/08_registryEmployee/components/EditEmployee/Leave.vue";
+import TalentVue from "@/modules/08_registryEmployee/components/EditEmployee/Talent.vue";
+import WorkVue from "@/modules/08_registryEmployee/components/EditEmployee/Work.vue";
+// import RecordVue from "@/modules/08_registryEmployee/components/EditEmployee/Record.vue";
+import OtherVue from "@/modules/08_registryEmployee/components/EditEmployee/Other.vue";
+import DocumentVue from "@/modules/08_registryEmployee/components/EditEmployee/Document.vue";
+import Certicate from "@/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue";
+import Information from "@/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue";
+import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
+import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
+import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
+
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const imageUrl = ref<any>(null);
+const inputImage = ref<any>(null);
+const fullname = ref<string>("");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const dialog = ref<boolean>(false);
+const dialogShort = ref<boolean>(false);
+const dialogLeave = ref<boolean>(false);
+const dialogImage = ref<boolean>(false);
+const statusEdit = ref<boolean>(false);
+const activeImage = ref<any | null>(null);
+const images = ref<any>([]);
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const profileType = ref<string>("");
+const leaveDate = ref<Date>(new Date());
+const leaveDetail = ref<string>("");
+const leaveNumberOrder = ref<string>("");
+const leaveDateOrder = ref<Date>(new Date());
+const reason = ref<string>("");
+const reasonStatus = ref<boolean>(false);
+const leaveReason = ref<string>("");
+const reasonOptions = ref<DataOption[]>([
+  {
+    id: "retire",
+    name: "เกษียณอายุราชการ",
+  },
+  {
+    id: "resign",
+    name: "ลาออก",
+  },
+  {
+    id: "transfer",
+    name: "ให้โอน",
+  },
+  {
+    id: "death",
+    name: "ถึงแก่กรรม",
+  },
+  {
+    id: "layoff",
+    name: "ให้ออก",
+  },
+  {
+    id: "discharge",
+    name: "ปลดออก",
+  },
+  {
+    id: "dismiss",
+    name: "ไล่ออก",
+  },
+  {
+    id: "other",
+    name: "อื่นๆ",
+  },
+]);
+
+// get ข้อมูลทั้งหมด
+const fetchData = async () => {
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .get(config.API.profileAvatarId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+
+        fullname.value = data.fullname;
+        imageUrl.value = data.avatar;
+        position.value = data.position;
+        profileType.value = data.profileType;
+        const reason = reasonOptions.value.filter(
+          (r: DataOption) => r.id == data.leaveReason
+        );
+        if (reason.length > 0) {
+          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+        } else {
+          leaveReason.value = "";
+        }
+        reasonStatus.value = reason.length > 0 ? true : false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const fetchAvatarHistory = async () => {
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .get(config.API.profileAvatarHistoryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        images.value = [];
+        data.map((e: any) => {
+          images.value.push({
+            id: e.id,
+            avatar: e.avatar,
+            avatarId: e.avatarId,
+            createdDate: new Date(e.createdDate),
+            isActive: e.isActive,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const uploadImage = async (e: any) => {
+  if (profileId.value !== "") {
+    let input = e.target.files;
+    if (input.length > 0) {
+      const formData = new FormData();
+      formData.append("FileData", input[0]);
+      showLoader();
+      await http
+        .post(config.API.profileAvatarId(profileId.value), formData)
+        .then((res) => {})
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+          dialogImage.value = false;
+        });
+      return;
+    }
+  }
+};
+
+const fetchDataDelete = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+    });
+};
+
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    () => fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้",
+      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .put(config.API.profileAvatarId(profileId.value), {
+        avatar: activeImage.value.avatarId,
+      })
+      .then((res) => {
+        dialogImage.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+const imageActive = (n: any) => {
+  activeImage.value = n;
+};
+
+const imageClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+};
+
+const getClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+};
+
+const addNewImage = async () => {
+  inputImage.value.click();
+  await imageActive(null);
+};
+
+const clickImage = async () => {
+  await fetchAvatarHistory();
+  dialogImage.value = true;
+};
+
+const closeImage = () => {
+  dialogImage.value = false;
+};
+
+const closeLeave = () => {
+  dialogLeave.value = false;
+};
+
+const closeKp7 = () => {
+  dialog.value = false;
+};
+
+const closeKp7Short = () => {
+  dialogShort.value = false;
+};
+
+const downloadKP7 = () => {};
+
+const downloadKP7Short = () => {};
+
+const downloadFilePDF = async (res: string, fileName: string) => {
+  const link = document.createElement("a");
+  //   link.href = window.URL.createObjectURL(new Blob([res]));
+  link.href = window.URL.createObjectURL(
+    new Blob([res], {
+      type: "application/vnd.ms-excel",
+    })
+  );
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+};
+
+const clickKp7Short = async () => {
+  if (profileId.value !== "") {
+    window.open(config.API.profileKp7ShortId(profileId.value));
+  }
+  //   showLoader();
+  //   await http
+  //     .get(config.API.profileKp7ShortId(profileId.value))
+  //     .then((res) => {
+  //       if (res.data) {
+  //         pdfSrcShort.value = "g==";
+  //         pdfCurrentPageShort.value = 1;
+  //         pdfTotalPageShort.value = 7;
+  //         dialogShort.value = true;
+  //       }
+  //     })
+  //     .catch((e) => {messageError($q, e);})
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+};
+
+const clickRetire = async () => {
+  if (reasonStatus.value == true) {
+    dialogMessage(
+      $q,
+      "โปรดยืนยัน",
+      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
+      "info",
+      undefined,
+      "primary",
+      Retire,
+      undefined,
+      false
+    );
+  } else {
+    leaveDate.value = new Date();
+    leaveDetail.value = "";
+    leaveNumberOrder.value = "";
+    leaveDateOrder.value = new Date();
+    reason.value = "";
+    dialogLeave.value = true;
+  }
+};
+
+const Retire = async () => {
+  if (profileId.value !== "") {
+    if (reasonStatus.value == true) {
+      showLoader();
+      await http
+        .put(config.API.profileReactive(profileId.value))
+        .then((res) => {
+          if (res.data) {
+            dialogLeave.value = false;
+          }
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          router.push("/registry");
+        });
+    } else {
+      showLoader();
+      await http
+        .put(config.API.profileDeactive(profileId.value), {
+          leaveDate: dateToISO(leaveDate.value),
+          leaveDetail: leaveDetail.value,
+          leaveNumberOrder: leaveNumberOrder.value,
+          leaveDateOrder: dateToISO(leaveDateOrder.value),
+          reason: reason.value,
+        })
+        .then((res) => {
+          if (res.data) {
+            dialogLeave.value = false;
+          }
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          router.push("/registry");
+        });
+    }
+  }
+};
+</script>
+
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
@@ -146,35 +537,6 @@
           </div>
         </div>
         <q-space />
-        <!-- <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
-          <q-tooltip>{{
-            reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
-          }}</q-tooltip>
-        </q-btn> -->
-
-        <!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-          <q-menu>
-            <q-list style="min-width: 100px">
-              <q-item clickable v-close-popup @click="clickKp7()">
-                <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn> -->
       </div>
     </q-page-sticky>
   </div>
@@ -197,13 +559,6 @@
           style="color: #ff8080; background-color: #ffdede"
         />
       </q-card-section>
-      <q-card-section class="q-p-sm">
-        <!-- <viewpdf
-            :src="pdfSrc"
-            :currentpage="pdfCurrentPage"
-            :totalpage="pdfTotalPage"
-          ></viewpdf> -->
-      </q-card-section>
     </q-card>
   </q-dialog>
   <q-dialog v-model="dialogShort" persistent>
@@ -494,456 +849,7 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import EducationVue from "@/modules/08_registryEmployee/views/Education.vue";
-import TrainVue from "@/modules/08_registryEmployee/views/Train.vue";
-import AssessmentVue from "@/modules/08_registryEmployee/views/Assessment.vue";
-import SalaryVue from "@/modules/08_registryEmployee/views/Salary.vue";
-import SalaryEmployeeVue from "@/modules/08_registryEmployee/views/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/08_registryEmployee/views/Discipline.vue";
-import LeaveVue from "@/modules/08_registryEmployee/views/Leave.vue";
-import TalentVue from "@/modules/08_registryEmployee/views/Talent.vue";
-import WorkVue from "@/modules/08_registryEmployee/views/Work.vue";
-import RecordVue from "@/modules/08_registryEmployee/views/Record.vue";
-import OtherVue from "@/modules/08_registryEmployee/views/Other.vue";
-import DocumentVue from "@/modules/08_registryEmployee/views/Document.vue";
-import Certicate from "@/modules/08_registryEmployee/views/Information/Certicate.vue";
-import Information from "@/modules/08_registryEmployee/views/Information/Information.vue";
-import TempInformation from "@/modules/08_registryEmployee/views/Information/Tempinformation.vue";
-import Address from "@/modules/08_registryEmployee/views/Information/Address.vue";
-import Family from "@/modules/08_registryEmployee/views/Information/Family.vue";
 
-import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const store = useDataStore();
-const { changeTab } = store;
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  dialogMessage,
-  success,
-  showLoader,
-  hideLoader,
-} = mixin;
-const route = useRoute();
-const router = useRouter();
-const imageUrl = ref<any>(null);
-const inputImage = ref<any>(null);
-const fullname = ref<string>("");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
-const dialog = ref<boolean>(false);
-const dialogShort = ref<boolean>(false);
-const dialogLeave = ref<boolean>(false);
-const dialogImage = ref<boolean>(false);
-const loader = ref<boolean>(false); //รอโหลด
-const statusEdit = ref<boolean>(false);
-const activeImage = ref<any | null>(null);
-const images = ref<any>([]);
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-// const profileId = ref<string>("");
-const profileType = ref<string>("");
-const leaveDate = ref<Date>(new Date());
-const leaveDetail = ref<string>("");
-const leaveNumberOrder = ref<string>("");
-const leaveDateOrder = ref<Date>(new Date());
-const reason = ref<string>("");
-const reasonStatus = ref<boolean>(false);
-const leaveReason = ref<string>("");
-const reasonOptions = ref<DataOption[]>([
-  {
-    id: "retire",
-    name: "เกษียณอายุราชการ",
-  },
-  {
-    id: "resign",
-    name: "ลาออก",
-  },
-  {
-    id: "transfer",
-    name: "ให้โอน",
-  },
-  {
-    id: "death",
-    name: "ถึงแก่กรรม",
-  },
-  {
-    id: "layoff",
-    name: "ให้ออก",
-  },
-  {
-    id: "discharge",
-    name: "ปลดออก",
-  },
-  {
-    id: "dismiss",
-    name: "ไล่ออก",
-  },
-  //   {
-  //     id: "change",
-  //     name: "เปลี่ยนประเภทข้าราชการ",
-  //   },
-  {
-    id: "other",
-    name: "อื่นๆ",
-  },
-]);
-
-onMounted(async () => {
-  //   await checkProfileData();
-  //   await fetchData();
-  //   await changeTab("information");
-});
-
-const fetchData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-
-        fullname.value = data.fullname;
-        imageUrl.value = data.avatar;
-        position.value = data.position;
-        profileType.value = data.profileType;
-        const reason = reasonOptions.value.filter(
-          (r: DataOption) => r.id == data.leaveReason
-        );
-        if (reason.length > 0) {
-          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
-        } else {
-          leaveReason.value = "";
-        }
-        reasonStatus.value = reason.length > 0 ? true : false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const checkProfileData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileCheckId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        if (data == false) router.push("/registry");
-      })
-      .catch((e) => {
-        router.push("/registry");
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchAvatarHistory = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarHistoryId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        images.value = [];
-        data.map((e: any) => {
-          images.value.push({
-            id: e.id,
-            avatar: e.avatar,
-            avatarId: e.avatarId,
-            createdDate: new Date(e.createdDate),
-            isActive: e.isActive,
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const uploadImage = async (e: any) => {
-  if (profileId.value !== "") {
-    let input = e.target.files;
-    if (input.length > 0) {
-      const formData = new FormData();
-      formData.append("FileData", input[0]);
-      showLoader();
-      await http
-        .post(config.API.profileAvatarId(profileId.value), formData)
-        .then((res) => {})
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          dialogImage.value = false;
-        });
-      return;
-    }
-  }
-};
-
-const fetchDataDelete = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {
-      success($q, "ลบรูปภาพสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      await clickImage();
-      //   dialogImage.value = false;
-    });
-};
-
-const deletePhoto = async (id: string) => {
-  dialogMessage(
-    $q,
-    "ลบข้อมูล",
-    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-    "delete",
-    undefined,
-    "red",
-    () => fetchDataDelete(id),
-    undefined,
-    false
-  );
-};
-
-const selectAvatarHistory = async () => {
-  if (activeImage.value == null) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถเปลี่ยนรูปได้",
-      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .put(config.API.profileAvatarId(profileId.value), {
-        avatar: activeImage.value.avatarId,
-      })
-      .then((res) => {
-        dialogImage.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-const imageActive = (n: any) => {
-  activeImage.value = n;
-};
-
-const imageClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders bg-grey-2 image-size-default": val,
-    "rounded-borders bg-grey-2 image-size-full": !val,
-  };
-};
-
-const getClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
-};
-
-const addNewImage = async () => {
-  inputImage.value.click();
-  await imageActive(null);
-};
-
-const clickImage = async () => {
-  await fetchAvatarHistory();
-  dialogImage.value = true;
-};
-
-const closeImage = () => {
-  dialogImage.value = false;
-};
-
-const closeLeave = () => {
-  dialogLeave.value = false;
-};
-
-const closeKp7 = () => {
-  dialog.value = false;
-};
-
-const closeKp7Short = () => {
-  dialogShort.value = false;
-};
-
-const downloadKP7 = () => {};
-
-const downloadKP7Short = () => {};
-
-const clickKp7 = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileReportId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileReportId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrc.value = "data:application/pdf;base64," + res.data;
-  //         pdfCurrentPage.value = 1;
-  //         pdfTotalPage.value = 7;
-  //         dialog.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  //   link.href = window.URL.createObjectURL(new Blob([res]));
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
-const clickKp7Short = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileKp7ShortId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileKp7ShortId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrcShort.value = "g==";
-  //         pdfCurrentPageShort.value = 1;
-  //         pdfTotalPageShort.value = 7;
-  //         dialogShort.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-const clickRetire = async () => {
-  if (reasonStatus.value == true) {
-    dialogMessage(
-      $q,
-      "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
-      "info",
-      undefined,
-      "primary",
-      Retire,
-      undefined,
-      false
-    );
-  } else {
-    leaveDate.value = new Date();
-    leaveDetail.value = "";
-    leaveNumberOrder.value = "";
-    leaveDateOrder.value = new Date();
-    reason.value = "";
-    dialogLeave.value = true;
-  }
-};
-
-const Retire = async () => {
-  if (profileId.value !== "") {
-    if (reasonStatus.value == true) {
-      showLoader();
-      await http
-        .put(config.API.profileReactive(profileId.value))
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    } else {
-      showLoader();
-      await http
-        .put(config.API.profileDeactive(profileId.value), {
-          leaveDate: dateToISO(leaveDate.value),
-          leaveDetail: leaveDetail.value,
-          leaveNumberOrder: leaveNumberOrder.value,
-          leaveDateOrder: dateToISO(leaveDateOrder.value),
-          reason: reason.value,
-        })
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    }
-  }
-};
-</script>
 <style>
 .image-size-default {
   height: 150px;
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 1f5a60b6f..2f44fd188 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,550 +1,24 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายชื่อลูกจ้างชั่วคราว
-  </div>
-  <q-card flat bordered class="q-pa-md">
-    <div class="col-12 row items-center">
-      <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="mdi-account-arrow-right"
-        @click="clickAddOrder"
-      >
-        <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          v-model="filter"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          v-model="visibleColumnsEmployeeTemp"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
-      </div>
-    </div>
-    <div class="col-12 q-pt-sm">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumnsEmployeeTemp"
-        :filter="filter"
-        row-key="id"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              key="no"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td
-              key="fullname"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullname }}
-            </q-td>
-            <q-td
-              key="newAgency"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <div
-                class="col-12"
-                v-if="
-                  props.row.draftOrganizationOrganization == null &&
-                  props.row.draftPositionEmployee == null
-                "
-              >
-                <div class="text-weight-medium">
-                  {{ "-" }}
-                </div>
-              </div>
-              <div class="col-12" v-else>
-                <div class="text-weight-medium">
-                  {{ props.row.draftOrganizationOrganization ?? "-" }}
-                </div>
-                <div class="text-weight-light">
-                  {{ props.row.draftPositionEmployee ?? "-" }}
-                </div>
-              </div>
-            </q-td>
-            <q-td
-              key="currentAgency"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <div
-                class="col-12"
-                v-if="props.row.oc == null && props.row.position == null"
-              >
-                <div class="text-weight-medium">
-                  {{ "-" }}
-                </div>
-              </div>
-              <div class="col-12" v-else>
-                <div class="text-weight-medium">
-                  {{ props.row.oc ?? "-" }}
-                </div>
-                <div class="text-weight-light">
-                  {{ props.row.position ?? "-" }}
-                </div>
-              </div>
-            </q-td>
-            <!-- <q-td
-              key="positionEmployeePosition"
-              :props="props"
-              @click="redirectToPage(props.row.id,props.row.status)"
-            >
-              {{ props.row.positionEmployeePosition }}
-            </q-td>
-            <q-td
-              key="positionEmployeePositionSide"
-              :props="props"
-              @click="redirectToPage(props.row.id,props.row.status)"
-            >
-              {{ props.row.positionEmployeePositionSide }}
-            </q-td>
-            <q-td
-              key="positionLine"
-              :props="props"
-              @click="redirectToPage(props.row.id,props.row.status)"
-            >
-              {{ props.row.positionLine }}
-            </q-td>
-            <q-td
-              key="positionEmployeeGroup"
-              :props="props"
-              @click="redirectToPage(props.row.id,props.row.status)"
-            >
-              {{ props.row.positionEmployeeGroup }}
-            </q-td>
-            <q-td key="oc" :props="props" @click="redirectToPage(props.row.id,props.row.status)">
-              {{ props.row.oc }}
-            </q-td> -->
-            <q-td
-              key="amount"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.amount }}
-            </q-td>
-            <q-td
-              key="govAge"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.govAge }}
-            </q-td>
-            <q-td
-              key="dateAppoint"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateAppoint }}
-            </q-td>
-            <q-td
-              key="dateStart"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateStart }}
-            </q-td>
-            <q-td
-              key="salaryDate"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.salaryDate }}
-            </q-td>
-            <q-td
-              key="refSalary"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.refSalary }}
-            </q-td>
-            <q-td
-              key="age"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.age }}
-            </q-td>
-            <q-td
-              key="fullnameOld"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullnameOld }}
-            </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.createdAt }}
-            </q-td>
-            <q-td
-              key="isLeave"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.isLeave }}
-            </q-td>
-
-            <q-td
-              key="leaveDateOrder"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.leaveDateOrder }}
-            </q-td>
-            <q-td
-              key="statustext"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.statustext }}
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
-                flat
-                round
-                dense
-              >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 160px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
-                      "
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'blue'
-                          "
-                          size="xs"
-                          name="mdi-account-settings"
-                        />
-                      </q-item-section>
-                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="clickDelete(props.row.id)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
-                      "
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'red-7'
-                          "
-                          size="xs"
-                          name="mdi-delete"
-                        />
-                      </q-item-section>
-                      <q-item-section>ลบ</q-item-section>
-                    </q-item>
-
-                    <q-separator />
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 70vw; max-width: 70vw">
-      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <d-table
-          :rows="rowsPosition"
-          :columns="columnsPosition"
-          row-key="id"
-          selection="single"
-          v-model:selected="selectedPosition"
-          :visible-columns="visibleColumnsPosition"
-        >
-          <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-        </d-table>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="checkSave"
-          class="q-px-md"
-          ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-  <!-- dialog ส่งรายชื่อไปออกคำสั่ง -->
-  <q-dialog v-model="modaladdOrder">
-    <q-card style="width: 900px; max-width: 80vw">
-      <DialogHeader
-        tittle="ส่งรายชื่อไปออกคำสั่ง"
-        :close="clickCloseSendModal"
-      />
-      <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filter"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :rows="rowsOrder"
-          :columns="columnsOrder"
-          :visible-columns="visibleColumnsOrder"
-          :filter="filter"
-          row-key="id"
-          selection="multiple"
-          v-model:selected="selectedToOrder"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="newAgency" :props="props">
-                <div
-                  class="col-12"
-                  v-if="
-                    props.row.draftOrganizationOrganization == null &&
-                    props.row.draftPositionEmployee == null
-                  "
-                >
-                  <div class="text-weight-medium">
-                    {{ "-" }}
-                  </div>
-                </div>
-                <div class="col-12" v-else>
-                  <div class="text-weight-medium">
-                    {{ props.row.draftOrganizationOrganization ?? "-" }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.draftPositionEmployee ?? "-" }}
-                  </div>
-                </div>
-              </q-td>
-              <q-td key="currentAgency" :props="props">
-                <div
-                  class="col-12"
-                  v-if="props.row.oc == null && props.row.position == null"
-                >
-                  <div class="text-weight-medium">
-                    {{ "-" }}
-                  </div>
-                </div>
-                <div class="col-12" v-else>
-                  <div class="text-weight-medium">
-                    {{ props.row.oc ?? "-" }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.position ?? "-" }}
-                  </div>
-                </div>
-              </q-td>
-
-              <q-td key="amount" :props="props">
-                {{ props.row.amount }}
-              </q-td>
-              <q-td key="govAge" :props="props">
-                {{ props.row.govAge }}
-              </q-td>
-              <q-td key="dateAppoint" :props="props">
-                {{ props.row.dateAppoint }}
-              </q-td>
-              <q-td key="dateStart" :props="props">
-                {{ props.row.dateStart }}
-              </q-td>
-              <q-td key="salaryDate" :props="props">
-                {{ props.row.salaryDate }}
-              </q-td>
-              <q-td key="refSalary" :props="props">
-                {{ props.row.refSalary }}
-              </q-td>
-              <q-td key="age" :props="props">
-                {{ props.row.age }}
-              </q-td>
-              <q-td key="fullnameOld" :props="props">
-                {{ props.row.fullnameOld }}
-              </q-td>
-              <q-td key="createdAt" :props="props">
-                {{ props.row.createdAt }}
-              </q-td>
-              <q-td key="isLeave" :props="props">
-                {{ props.row.isLeave }}
-              </q-td>
-
-              <q-td key="leaveDateOrder" :props="props">
-                {{ props.row.leaveDateOrder }}
-              </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปออกคำสั่ง" @click="checkSaveOrder" color="public" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QInput, QForm, QTableProps } from "quasar";
+import type { QInput, QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+
+import { useRegistryEmployeeDataStore } from "@/modules/08_registryEmployee/store";
+
 import type {
   FormRegistryEmployee,
   ResponseEmployeeTemp,
-} from "@/modules/08_registryEmployee/request/Main.ts";
+} from "@/modules/08_registryEmployee/interface/request/Main";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogSendToCommand from "@/modules/08_registryEmployee/components/DialogSendToCommand.vue";
 
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
+// store convert status text
+const dataStore = useRegistryEmployeeDataStore();
+const { statusText } = dataStore;
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -555,61 +29,17 @@ const {
   showLoader,
   hideLoader,
   date2Thai,
-  dialogMessage,
   dialogRemove,
   dialogConfirm,
   dialogMessageNotify,
-} = mixin;
+} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
 
-const modaladdOrder = ref<boolean>(false);
 const router = useRouter();
-const myForm = ref<QForm>();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const modal = ref<boolean>(false);
 const id = ref<string>("");
-const visibleColumnsModal = ref<String[]>(["no", "positionNum", "name"]);
-const columnsModal = [
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
-  {
-    name: "positionNum",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "positionNum",
-    sortable: true,
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-  },
-];
-
-const visibleColumnsOrder = ref<String[]>([
-  "no",
-  "fullname",
-  "fullnameOld",
-  "oc",
-  "positionEmployeePosition",
-  "positionEmployeePositionSide",
-  "positionLine",
-  "govAge",
-  "positionEmployeeGroup",
-  "dateAppoint",
-  "refSalary",
-  "dateStart",
-  "createdAt",
-  "salaryDate",
-  "age",
-  "amount",
-  "statustext",
-  "leaveDateOrder",
-  "newAgency",
-  "currentAgency",
-]);
 
+// visible columns ตารางในหน้าหลัก
 const visibleColumnsEmployeeTemp = ref<String[]>([
   "no",
   "fullname",
@@ -633,21 +63,16 @@ const visibleColumnsEmployeeTemp = ref<String[]>([
   "currentAgency",
 ]);
 
-// "isLeave",
+// คอลัมน์ตารางในหน้าหลัก
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
   },
   {
     name: "fullname",
@@ -686,78 +111,6 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
-
-  //   {
-  //     name: "positionEmployeePosition",
-  //     align: "left",
-  //     label: "ตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionEmployeePosition",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "positionEmployeePositionSide",
-  //     align: "left",
-  //     label: "ด้านของตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionEmployeePositionSide",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "positionLine",
-  //     align: "left",
-  //     label: "สายงาน",
-  //     sortable: true,
-  //     field: "positionLine",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-
-  //   {
-  //     name: "positionEmployeeGroup",
-  //     align: "left",
-  //     label: "กลุ่มงาน",
-  //     sortable: true,
-  //     field: "positionEmployeeGroup",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "oc",
-  //     align: "left",
-  //     label: "สังกัด",
-  //     sortable: true,
-  //     field: "oc",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
   {
     name: "amount",
     align: "left",
@@ -794,8 +147,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -805,8 +156,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "salaryDate",
@@ -816,8 +165,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "salaryDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refSalary",
@@ -859,20 +206,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  //   {
-  //     name: "isLeave",
-  //     align: "left",
-  //     label: "สถานะ",
-  //     sortable: true,
-  //     field: "isLeave",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     // sort: (a: string, b: string) =>
-  //     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
   {
     name: "leaveDateOrder",
     align: "left",
@@ -881,8 +215,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "leaveDateOrder",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "statustext",
@@ -899,10 +231,77 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 ]);
-const rows = ref<FormRegistryEmployee[]>([]);
 
-const selectedPosition = ref<any[]>([]);
-const selectedToOrder = ref<any[]>([]);
+onMounted(async () => {
+  await nodeTree();
+});
+
+// ฟังก์ชั่นเช็คค่า guid แปลงเป็นค่า null
+const checkNull = (text: string) =>
+  text == null
+    ? ""
+    : text == "00000000-0000-0000-0000-000000000000"
+      ? ""
+      : text;
+
+// คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
+const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
+const clickAddOrder = () => {
+  modaladdOrder.value = true;
+};
+
+// ปิด dialog ส่งไปออกคำสั่ง
+const clickCloseSendModal = () => {
+  modaladdOrder.value = false;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+// เพิ่มข้อมูลลูกจ้าง
+const clickAdd = () => {
+  router.push(`/registry-employee/add`);
+};
+
+// ดูรายการแก้ไขรายชื่อ
+const redirectToPage = (id?: string, status?: string) => {
+  if (!(status == "REPORT" || status == "DONE")) {
+    router.push(`/registry-employee/edit/${id}`);
+  }
+};
+
+// ยืนยันการลบรายการข้อมูลในตาราง
+const clickDelete = (id: string) => {
+  dialogRemove($q, async () => await deleteData(id));
+};
+
+// ลบรายการข้อมูลในตาราง
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profileInforId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      showEmployeeTemp();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
+const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
+const filters = ref<FormRegistryEmployee[]>([]);
+const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
+const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
+
+// visible คอลัมน์ในส่วนกำหนดตำแหน่ง
 const visibleColumnsPosition = ref<String[]>([
   "organizationOrganizationName",
   "organizationAgencyName",
@@ -915,6 +314,7 @@ const visibleColumnsPosition = ref<String[]>([
   "posNo",
 ]);
 
+// คอลัมน์ในส่วนกำหนดตำแหน่ง
 const columnsPosition = ref<QTableProps["columns"]>([
   {
     name: "organizationOrganizationName",
@@ -1016,286 +416,62 @@ const columnsPosition = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rowsPosition = ref<any>([]);
-const columnsOrder = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "newAgency",
-    align: "left",
-    label: "หน่วยงานที่รับการบรรจุ",
-    sortable: true,
-    field: "newAgency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "currentAgency",
-    align: "left",
-    label: "หน่วยงานปัจจุบัน",
-    sortable: true,
-    field: "currentAgency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
 
-  //   {
-  //     name: "positionEmployeePosition",
-  //     align: "left",
-  //     label: "ตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionEmployeePosition",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "positionEmployeePositionSide",
-  //     align: "left",
-  //     label: "ด้านของตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionEmployeePositionSide",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "positionLine",
-  //     align: "left",
-  //     label: "สายงาน",
-  //     sortable: true,
-  //     field: "positionLine",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
+// ยืนยันการกำหนดตำแหน่ง
+const checkSave = () => {
+  dialogConfirm($q, async () => await saveData());
+};
 
-  //   {
-  //     name: "positionEmployeeGroup",
-  //     align: "left",
-  //     label: "กลุ่มงาน",
-  //     sortable: true,
-  //     field: "positionEmployeeGroup",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  //   {
-  //     name: "oc",
-  //     align: "left",
-  //     label: "สังกัด",
-  //     sortable: true,
-  //     field: "oc",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, {
-  //         numeric: true,
-  //         sensitivity: "base",
-  //       }),
-  //   },
-  {
-    name: "amount",
-    align: "left",
-    label: "ค่าจ้าง",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "govAge",
-    align: "left",
-    label: "อายุราชการ(ปี)",
-    sortable: true,
-    field: "govAge",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "dateAppoint",
-    align: "left",
-    label: "วันที่จ้าง",
-    sortable: true,
-    field: "dateAppoint",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันที่เริ่มปฎิบัติราชการ",
-    sortable: true,
-    field: "dateStart",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salaryDate",
-    align: "left",
-    label: "วันที่แต่งตั้ง",
-    sortable: true,
-    field: "salaryDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refSalary",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "refSalary",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "age",
-    align: "left",
-    label: "อายุ",
-    sortable: true,
-    field: "age",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "fullnameOld",
-    align: "left",
-    label: "ชื่อ-สกุล(เดิม)",
-    sortable: true,
-    field: "fullnameOld",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  //   {
-  //     name: "isLeave",
-  //     align: "left",
-  //     label: "สถานะ",
-  //     sortable: true,
-  //     field: "isLeave",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     // sort: (a: string, b: string) =>
-  //     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    name: "leaveDateOrder",
-    align: "left",
-    label: "วันที่พ้นราชการ",
-    sortable: true,
-    field: "leaveDateOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-]);
-const rowsOrder = ref<FormRegistryEmployee[]>([]);
-const filters = ref<FormRegistryEmployee[]>([]);
-const selected = ref([]);
-onMounted(async () => {
-  await nodeTree();
-});
+// เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
+const saveData = async () => {
+  if (selectedPosition.value.length == 0) {
+    dialogMessageNotify(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง"
+    );
+    return;
+  } else {
+    await savePosition();
+  }
+};
 
-const checkNull = (text: string) =>
-  text == null
-    ? ""
-    : text == "00000000-0000-0000-0000-000000000000"
-    ? ""
-    : text;
+// บันทึกการกำหนดตำแหน่ง
+const savePosition = async () => {
+  showLoader();
+  const data = {
+    organizationEmployeeId: selectedPosition.value[0].id,
+  };
+  await http
+    .put(config.API.organizationEmployeePositionId(id.value), data)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await nodeTree();
+      modalOpenClose();
+    });
+};
 
+// ปิด dialog กำหนดตำแหน่ง
+const modalOpenClose = () => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    selectedPosition.value = [];
+    rowsPosition.value = [];
+    id.value = "";
+  }
+};
+
+// คลิกกำหนดตำแหน่ง
+const editDetail = async (row: any) => {
+  await getPosition(row.id);
+  id.value = row.id;
+};
+
+// ดึงข้อมูลตำแหน่ง
 const getPosition = async (id: string) => {
   showLoader();
   await http
@@ -1374,157 +550,8 @@ const getPosition = async (id: string) => {
     });
 };
 
-const clickAddOrder = () => {
-  modaladdOrder.value = true;
-  const row = filters.value.filter(
-    (r: FormRegistryEmployee) => r.status == "PENDING"
-  );
-
-  rowsOrder.value = row;
-};
-
-const clickCloseSendModal = () => {
-  modaladdOrder.value = false;
-};
-const checkSave = () => {
-  dialogConfirm($q, async () => await saveData());
-};
-const saveData = async () => {
-  if (selectedPosition.value.length == 0) {
-    dialogMessageNotify(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง"
-      // "กรุณาเลือกตำแหน่ง",
-      // "warning",
-      // undefined,
-      // "orange",
-      // undefined,
-      // undefined,
-      // true
-    );
-    return;
-  } else {
-    await savePosition();
-  }
-};
-const checkSaveOrder = () => {
-  if (selectedToOrder.value.length == 0) {
-    dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
-  } else dialogConfirm($q, () => SaveOrder());
-};
-const SaveOrder = async () => {
-  // ส่งไปออกคำสั่ง
-  let pId: string[] = [];
-  selectedToOrder.value.forEach((e: any) => {
-    pId.push(e.id);
-  });
-  let data = {
-    id: pId,
-  };
-  showLoader();
-  await http
-    .post(config.API.organizationEmployeeSendOrder, data)
-    .then((res: any) => {
-      // console.log(res);
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      // console.log(e);
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      modaladdOrder.value = false;
-      await showEmployeeTemp();
-      selectedToOrder.value = [];
-    });
-};
-
-const savePosition = async () => {
-  showLoader();
-  const data = {
-    organizationEmployeeId: selectedPosition.value[0].id,
-  };
-  await http
-    .put(config.API.organizationEmployeePositionId(id.value), data)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await nodeTree();
-      modalOpenClose();
-    });
-};
-
-const modalOpenClose = () => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    selectedPosition.value = [];
-    rowsPosition.value = [];
-    id.value = "";
-  }
-};
-
-// const next = (id: string) => {
-//   router.push(`/registry-employee/${id}`);
-// };
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-// const getClass = (val: boolean) => {
-//   return {
-//     "full-width inputgreen cursor-pointer": val,
-//     "full-width cursor-pointer": !val,
-//   };
-// };
-
-const clickAdd = () => {
-  //   modal.value = true;
-
-  router.push(`/registry-employee/add`);
-  //   router.push(`/placement/detail`);
-};
-
-// ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (id?: string, status?: string) => {
-  if (!(status == "REPORT" || status == "DONE")) {
-    router.push(`/registry-employee/edit/${id}`);
-  }
-};
-const editDetail = async (row: any) => {
-  await getPosition(row.id);
-  console.log(row);
-  id.value = row.id;
-  // modal.value = true;
-};
-
-const clickDelete = (id: string) => {
-  dialogRemove($q, async () => await deleteData(id));
-};
-
-const deleteData = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileInforId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      showEmployeeTemp();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
+// ดึงข้อมูลตำแหน่ง (root tree) 
+const selected = ref([]);
 const nodeTree = async () => {
   showLoader();
   await http
@@ -1541,24 +568,23 @@ const nodeTree = async () => {
     .finally(async () => {
       hideLoader();
       await showEmployeeTemp();
-      // await showEmployeeTempOrder();
     });
 };
+// **** จบส่วนของการเลือกตำแหน่ง ***//
 
+// ดึงรายการข้อมูลมา mapping แสดงในตาราง
+const rows = ref<FormRegistryEmployee[]>([]);
 const showEmployeeTemp = async () => {
   showLoader();
 
-  let cirteria = [];
-
-  cirteria.push({
+  let cirteria = [{
     criteriaType: "employee_class",
     criteriaValue: "temp",
-  });
-
-  cirteria.push({
+  },
+  {
     criteriaType: "is_retire",
     criteriaValue: "false",
-  });
+  }];
 
   if (selected.value == null) return;
   await http
@@ -1615,94 +641,184 @@ const showEmployeeTemp = async () => {
       hideLoader();
     });
 };
-
-const statusText = (val: String) => {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ไม่อนุมัติ";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-
-    default:
-      return "-";
-  }
-};
-
-// const showEmployeeTempOrder = async () => {
-//   let cirteria = [];
-
-//   cirteria.push({
-//     criteriaType: "employee_class",
-//     criteriaValue: "temp",
-//   });
-
-//   cirteria.push({
-//     criteriaType: "is_retire",
-//     criteriaValue: "false",
-//   });
-
-//   if (selected.value == null || selected.value == "") return;
-//   showLoader();
-//   await http
-//     .post(config.API.searchProfileTemp("all"), {
-//       criterias: cirteria,
-//     })
-//     .then((res) => {
-//       let data = res.data.result;
-//       rowsOrder.value = [];
-//       data.map((e: ResponseEmployeeTemp) => {
-//         rowsOrder.value.push({
-//           id: e.id,
-//           fullname: e.fullname,
-//           fullnameOld: e.fullnameOld,
-//           position: e.position,
-//           positionPathSide: e.positionPathSide,
-//           positionLine: e.positionLine,
-//           govAge: e.govAge,
-//           positionEmployeePosition: e.positionEmployeePosition,
-//           positionEmployeePositionSide: e.positionEmployeePositionSide,
-//           positionEmployeeGroup: e.positionEmployeeGroup,
-//           oc: e.oc,
-//           age: e.age,
-//           amount: e.amount == null ? "" : e.amount.toLocaleString(),
-//           refSalary: e.refSalary,
-//           dateAppoint:
-//             e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
-//           dateStart:
-//             e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
-//           createdAt:
-//             e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
-//           isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
-//           leaveDateOrder:
-//             e.leaveDateOrder == null
-//               ? null
-//               : date2Thai(new Date(e.leaveDateOrder)),
-//           newAgency: "",
-//           currentAgency: "",
-//           draftPositionEmployee: e.draftPositionEmployee,
-//           draftOrganizationOrganization: e.draftOrganizationOrganization,
-//         });
-//       });
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//       //   console.log(rowsOrder);
-//     });
-// };
-
-const onSelected = async (id: string) => {
-  //   await fetchPositionNumber(id);
-};
 </script>
-<style lang="scss"></style>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อลูกจ้างชั่วคราว
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <div class="col-12 row items-center">
+      <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="clickAddOrder">
+        <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+          style="max-width: 200px" class="q-ml-sm">
+          <template v-slot:append>
+            <q-icon v-if="filter == ''" name="search" />
+            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+          </template>
+        </q-input>
+        <!-- แสดงคอลัมน์ใน table -->
+        <q-select v-model="visibleColumnsEmployeeTemp" :display-value="$q.lang.table.columns" multiple outlined dense
+          :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+          class="gt-xs q-ml-sm" />
+      </div>
+    </div>
+    <div class="col-12 q-pt-sm">
+      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumnsEmployeeTemp" :filter="filter"
+        row-key="id">
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fullname" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.fullname }}
+            </q-td>
+            <q-td key="newAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
+                props.row.draftPositionEmployee == null
+                ">
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.draftOrganizationOrganization ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.draftPositionEmployee ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td key="currentAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.oc ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.position ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td key="amount" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.amount }}
+            </q-td>
+            <q-td key="govAge" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.govAge }}
+            </q-td>
+            <q-td key="dateAppoint" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.dateAppoint }}
+            </q-td>
+            <q-td key="dateStart" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.dateStart }}
+            </q-td>
+            <q-td key="salaryDate" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.salaryDate }}
+            </q-td>
+            <q-td key="refSalary" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.refSalary }}
+            </q-td>
+            <q-td key="age" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.age }}
+            </q-td>
+            <q-td key="fullnameOld" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.fullnameOld }}
+            </q-td>
+            <q-td key="createdAt" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.createdAt }}
+            </q-td>
+            <q-td key="isLeave" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.isLeave }}
+            </q-td>
+
+            <q-td key="leaveDateOrder" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.leaveDateOrder }}
+            </q-td>
+            <q-td key="statustext" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+              {{ props.row.statustext }}
+            </q-td>
+            <q-td auto-width>
+              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 160px">
+                    <q-item clickable v-close-popup @click="editDetail(props.row)" :disable="props.row.status == 'REPORT' ||
+                      props.row.status == 'DONE'
+                      ">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon :color="props.row.status == 'REPORT' ||
+                          props.row.status == 'DONE'
+                          ? 'grey'
+                          : 'blue'
+                          " size="xs" name="mdi-account-settings" />
+                      </q-item-section>
+                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item clickable v-close-popup @click="clickDelete(props.row.id)" :disable="props.row.status == 'REPORT' ||
+                      props.row.status == 'DONE'
+                      ">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon :color="props.row.status == 'REPORT' ||
+                          props.row.status == 'DONE'
+                          ? 'grey'
+                          : 'red-7'
+                          " size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบ</q-item-section>
+                    </q-item>
+
+                    <q-separator />
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 70vw; max-width: 70vw">
+      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <d-table :rows="rowsPosition" :columns="columnsPosition" row-key="id" selection="single"
+          v-model:selected="selectedPosition" :visible-columns="visibleColumnsPosition">
+          <template v-slot:body-selection="scope">
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn dense unelevated label="บันทึก" color="public" @click="checkSave" class="q-px-md">
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogSendToCommand :modal="modaladdOrder" :closeDialog="clickCloseSendModal" :rows="rows" :fetch-new-list="showEmployeeTemp"/>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
deleted file mode 100644
index 04fca63dd..000000000
--- a/src/modules/08_registryEmployee/views/information.vue
+++ /dev/null
@@ -1,1247 +0,0 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12 q-pt-md">
-      <div class="row">
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              v-model="informaData.cardid"
-              dense
-              @update:model-value="changeCardID"
-              lazy-rules
-              :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]"
-              :readonly="!edit"
-              :borderless="!edit"
-              label="เลขประจำตัวประชาชน"
-              maxlength="13"
-              mask="#############"
-            />
-            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="informaData.prefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้าชื่อ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                        ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="informaData.firstname"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="informaData.lastname"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-        </div>
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <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="handleDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  :class="getClass(edit)"
-                  hide-bottom-space
-                  :outlined="edit"
-                  dense
-                  lazy-rules
-                  :readonly="!edit"
-                  :borderless="!edit"
-                  :model-value="
-                    informaData.birthDate == null
-                      ? null
-                      : date2Thai(informaData.birthDate)
-                  "
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                  :label="`${'วัน/เดือน/ปี เกิด'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      :style="
-                        edit
-                          ? 'color: var(--q-primary)'
-                          : 'color: var(--q-grey)'
-                      "
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              dense
-              lazy-rules
-              readonly
-              borderless
-              :style="!edit ? '' : 'padding:0 12px;'"
-              :model-value="informaData.age"
-              :label="`${'อายุ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="informaData.genderId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.genderOps"
-              option-value="id"
-              :label="`${'เพศ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                        ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="informaData.statusId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.statusOps"
-              option-value="id"
-              :label="`${'สถานภาพ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                        ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="informaData.nationality"
-              :label="`${'สัญชาติ'}`"
-            />
-          </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>
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="informaData.religionId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.religionOps"
-              option-value="id"
-              :label="`${'ศาสนา'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                        ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="informaData.bloodId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.bloodOps"
-              option-value="id"
-              :label="`${'หมู่เลือด'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                        ) "
-              clearable
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              type="tel"
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="informaData.tel"
-              :label="`${'เบอร์โทร'}`"
-              :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
-                val.length >= 10 ||
-                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-              mask="##########"
-            />
-          </div>
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                        ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                        ) "
-          />
-        </div>
-      </div>
-    </q-form>
-    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-    <HistoryTable
-      :rows="rowsHistory"
-      :columns="columnsHistory"
-      :filter="filterHistory"
-      :visible-columns="visibleColumnsHistory"
-      v-model:modal="modalHistory"
-      v-model:inputfilter="filterHistory"
-      v-model:inputvisible="visibleColumnsHistory"
-      v-model:tittle="tittleHistory"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div
-              v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-              class="table_ellipsis"
-            >
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </HistoryTable>
-    <div class="row col-12">
-      <q-space />
-      <q-btn
-        unelevated
-        dense
-        class="q-px-md items-center"
-        color="light-blue-10"
-        label="บันทึก"
-        @click="saveData"
-      />
-    </div>
-  </q-card>
-  <q-page-sticky
-    position="top"
-    expand
-    class="bg-grey-2 text-white"
-    style="z-index: 99; padding: 0% 1% 0% 1%"
-  >
-    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
-      <q-btn
-        flat
-        round
-        class="bg-teal-1 full-height"
-        color="primary"
-        icon="mdi-chevron-left"
-        dense
-        @click="router.go(-1)"
-      >
-      </q-btn>
-      <q-avatar size="65px" rounded class="containerimage">
-        <img
-          v-if="image == null"
-          src="@/assets/avatar_user.jpg"
-          class="bg-grey-3"
-          style="object-fit: cover"
-        />
-        <img :src="image" class="bg-grey-3" style="object-fit: cover" />
-        <div
-          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-          @click="addNewImage()"
-        >
-          <q-icon name="mdi-camera" size="18px" color="blue">
-            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-          </q-icon>
-
-          <input
-            type="file"
-            style="display: none"
-            ref="inputImage"
-            accept="image/*"
-            @change="uploadImage"
-          />
-        </div>
-      </q-avatar>
-
-      <div class="row items-center text-dark q-ml-md">
-        <div class="column">
-          <div class="text-bold q-pb-xs text-name">
-            เพิ่มข้อมูลทะเบียนประวัติ
-          </div>
-          <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
-        </div>
-      </div>
-      <q-space />
-    </div>
-  </q-page-sticky>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute, useRouter } from "vue-router";
-import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import type { QTableColumn, QForm } from "quasar";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  fetchDataProfile: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-
-const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
-const edit = ref<boolean>(false);
-const defaultCitizenData = ref<string>("");
-const informaData = ref<Information>(defaultInformation);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const myform = ref<QForm | null>(null);
-const dateBefore = ref<Date>(new Date());
-const same = ref<string>("0");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
-const inputImage = ref<any>(null);
-const image = ref<any>(null);
-const fileData = ref<any>(null);
-
-onMounted(async () => {
-  await fetchPerson();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  //   if (props.statusAdd) {
-  edit.value = props.statusAdd;
-  informaData.value = {
-    cardid: null,
-    age: null,
-    prefix: null,
-    prefixId: null,
-    firstname: null,
-    lastname: null,
-    birthDate: null,
-    genderId: null,
-    bloodId: null,
-    nationality: null,
-    ethnicity: null,
-    statusId: null,
-    religionId: null,
-    tel: null,
-    employeeType: null,
-    employeeClass: null,
-    profileType: null,
-  };
-  //   }
-};
-
-const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-const uploadImage = async (e: any) => {
-  const input = e.target.files;
-  if (input.length > 0) {
-    const url = URL.createObjectURL(input[0]);
-    image.value = url;
-    fileData.value = input[0];
-  }
-};
-
-const addNewImage = async () => {
-  inputImage.value.click();
-};
-
-/**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
- */
-const fetchPerson = async () => {
-  showLoader();
-  await http
-    .get(config.API.person)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const changeCardID = async (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      await checkCitizen(value);
-      //   informaData.value.cardid = defaultCitizenData.value;
-    }
-  }
-};
-
-const checkCitizen = async (id: string) => {
-  console.log("String");
-  showLoader();
-  await http
-    .get(config.API.profileCitizenId(id))
-    .then((res) => {
-      const data = res.data.result.citizen;
-
-      if (!data) {
-        dialogMessage(
-          $q,
-          "ข้อความแจ้งเตือน",
-          "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
-          "warning",
-          undefined,
-          "orange",
-          undefined,
-          undefined,
-          true
-        );
-        informaData.value.cardid = defaultCitizenData.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
-const fetchDataComponent = async (modelData: Date) => {
-  await props.fetchDataProfile();
-  await fetchData();
-};
-const calculateMaxDate = () => {
-  const today = new Date();
-
-  today.setDate(today.getDate() - 1);
-  return today;
-};
-const calRetire = async (birth: Date) => {
-  console.log(birth);
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    showLoader();
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        // const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        // informaData.value.birthDate = dateBefore.value;
-        // changeRetireText(date2Thai(retire));
-        informaData.value.birthDate = null;
-        informaData.value.age = "";
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    showLoader();
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId = data.genderId;
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId = data.relationshipId;
-        informaData.value.religionId = data.religionId;
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   hideLoader();
-        await props.fetchDataProfile();
-      });
-  }
-};
-
-const editData = async () => {
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-  showLoader();
-  await http
-    .put(config.API.profileInforId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-      hideLoader();
-    });
-};
-
-const addData = async () => {
-  //   const formData = {
-  //     citizenId: informaData.value.cardid,
-  //     prefixId: informaData.value.prefixId,
-  //     firstName: informaData.value.firstname,
-  //     lastName: informaData.value.lastname,
-  //     genderId: informaData.value.genderId,
-  //     nationality: informaData.value.nationality,
-  //     race: informaData.value.ethnicity,
-  //     religionId: informaData.value.religionId,
-  //     birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-  //     bloodGroupId: informaData.value.bloodId,
-  //     relationshipId: informaData.value.statusId,
-  //     telephoneNumber: informaData.value.tel,
-  //     createdAt: new Date(),
-  //     age: null,
-  //     employeeType: informaData.value.employeeType,
-  //     employeeClass: informaData.value.employeeClass,
-  //     profileType: informaData.value.profileType,
-  //     createdFullName: "-",
-  //   };
-  const formData = new FormData();
-  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
-  if (informaData.value.cardid != undefined)
-    formData.append("citizenId", informaData.value.cardid);
-  if (informaData.value.prefixId != undefined)
-    formData.append("prefixId", informaData.value.prefixId);
-  if (informaData.value.firstname != undefined)
-    formData.append("firstName", informaData.value.firstname);
-  if (informaData.value.lastname != undefined)
-    formData.append("lastName", informaData.value.lastname);
-  if (informaData.value.genderId != undefined)
-    formData.append("genderId", informaData.value.genderId);
-  if (informaData.value.nationality != undefined)
-    formData.append("nationality", informaData.value.nationality);
-  if (informaData.value.ethnicity != undefined)
-    formData.append("race", informaData.value.ethnicity);
-  if (informaData.value.religionId != undefined)
-    formData.append("religionId", informaData.value.religionId);
-  if (informaData.value.birthDate != undefined)
-    formData.append(
-      "birthDate",
-      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
-    );
-  if (informaData.value.bloodId != undefined)
-    formData.append("bloodGroupId", informaData.value.bloodId);
-  if (informaData.value.statusId != undefined)
-    formData.append("relationshipId", informaData.value.statusId);
-  if (informaData.value.tel != undefined)
-    formData.append("telephoneNumber", informaData.value.tel);
-  if (informaData.value.employeeType != undefined)
-    formData.append("employeeType", informaData.value.employeeType);
-  if (informaData.value.employeeClass != undefined)
-    formData.append("employeeClass", informaData.value.employeeClass);
-
-  showLoader();
-  await http
-    .post(config.API.profileEmployeeIn, formData)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-      await clickBack();
-      hideLoader();
-    });
-  //   console.log(body);
-  hideLoader();
-};
-
-const saveData = async () => {
-  console.log(myform.value);
-  if (myform.value != null) {
-    await myform.value.validate().then(async (saveDataTest: Boolean) => {
-      if (saveDataTest) {
-        dialogConfirm($q, () => addData());
-      }
-    });
-  }
-};
-
-const clickBack = () => {
-  router.push("/registry-employee");
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/08_registryEmployee/views/top.vue b/src/modules/08_registryEmployee/views/top.vue
deleted file mode 100644
index a9e4d5db2..000000000
--- a/src/modules/08_registryEmployee/views/top.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div class="flex items-center">
-    <div class="flex items-center">
-      <q-icon
-        :name="icon"
-        size="1.5em"
-        color="grey-5"
-        class="q-mr-md"
-        v-if="icon != ''"
-      />
-      <div
-        class="text-bold text-subtitle2 col-12 row items-center"
-        v-if="header != ''"
-      >
-        {{ header }}
-      </div>
-    </div>
-    <div class="q-gutter-sm q-mx-sm" v-if="addData == false"></div>
-
-    <q-space />
-    <q-btn
-      color="info"
-      flat
-      dense
-      round
-      size="14px"
-      icon="mdi-history"
-      v-if="history"
-      @click="historyClick"
-    >
-      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
-    </q-btn>
-  </div>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-  header: {
-    type: String,
-    default: "ข้อความ",
-    required: true,
-  },
-  iconAdd: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-    default: "mdi-help",
-    required: true,
-  },
-  edit: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
-  history: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
-  addData: {
-    type: Boolean,
-    defualt: false,
-  },
-  disable: {
-    type: Boolean,
-    defualt: false,
-  },
-  historyClick: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addleave: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  save: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  deleted: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  changeBtn: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addEmployee: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-
-const emit = defineEmits(["update:edit"]);
-
-const updateEdit = (value: any) => {
-  emit("update:edit", value);
-};
-
-const ClickEdit = () => {
-  updateEdit(!props.edit);
-  props.changeBtn();
-};
-
-const historyClick = async () => {
-  await props.historyClick();
-};
-
-const ClickCancel = () => {
-  updateEdit(!props.edit);
-  props.cancel();
-  props.changeBtn();
-};
-
-const save = () => {
-  props.save();
-};
-
-const add = () => {
-  props.add();
-};
-
-const addleave = () => {
-  props.addleave();
-};
-</script>
-<style scoped></style>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 9e837b61f..d6ee99b61 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -253,7 +253,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     );
   }
 
-  function appendLeadingZeroes(n: Number) {
+  function appendLeadingZeroes(n: number) {
     if (n <= 9) return "0" + n;
     return n;
   }
@@ -313,7 +313,6 @@ export const useCounterMixin = defineStore("mixin", () => {
 
   const messageError = (q: any, e: any = "") => {
     // q.dialog.hide();
-    console.log("e.response", e.response);
     if (e.response !== undefined) {
       if (e.response.data.status !== undefined) {
         if (e.response.data.status == 401) {