diff --git a/src/modules/01_metadataNew/components/calendar/CalendarList.vue b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
index a78838f20..f47ec5f76 100644
--- a/src/modules/01_metadataNew/components/calendar/CalendarList.vue
+++ b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
@@ -18,67 +18,137 @@
         class="q-py-xs col-6 row"
       />
     </q-tabs>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      virtual-scroll
-      :rows="calendarData"
-      :columns="columns"
-      dense
-      :rows-per-page-options="[0]"
-      hide-header
-    >
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'week'" class="">
-              {{ dayThaiRange(props.row.dateRange) }}
-            </div>
-            <div v-else-if="col.name == 'holidayDate'" class="">
-              {{ dateThaiRange(props.row.dateRange) }}
-            </div>
-            <div v-else class="my-table-details">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              flat
-              round
-              color="grey"
-              @click.stop
-              size="10px"
-              icon="more_vert"
-            >
-              <q-menu>
-                <q-list>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="editCalendar(props.row)"
-                  >
-                    <q-item-section>
-                      <q-item-label>แก้ไขวันหยุด</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="deleteClick(props.row)"
-                  >
-                    <q-item-section>
-                      <q-item-label>ลบวันหยุด</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </q-table>
+    <q-separator />
+
+    <q-tab-panels v-model="currentTab" animated>
+      <q-tab-panel name="normal">
+        <q-table
+          ref="table"
+          flat
+          bordered
+          class="custom-header-table"
+          virtual-scroll
+          :rows="calendarData"
+          :columns="columns"
+          dense
+          :rows-per-page-options="[0]"
+          hide-header
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'week'" class="">
+                  {{ dayThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else-if="col.name == 'holidayDate'" class="">
+                  {{ dateThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else class="my-table-details">
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  color="grey"
+                  @click.stop
+                  size="10px"
+                  icon="more_vert"
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="editCalendar(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>แก้ไขวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="deleteClick(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>ลบวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-tab-panel>
+
+      <q-tab-panel name="6day">
+        <q-table
+          ref="table"
+          flat
+          bordered
+          class="custom-header-table"
+          virtual-scroll
+          :rows="calendarData"
+          :columns="columns"
+          dense
+          :rows-per-page-options="[0]"
+          hide-header
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'week'" class="">
+                  {{ dayThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else-if="col.name == 'holidayDate'" class="">
+                  {{ dateThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else class="my-table-details">
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  color="grey"
+                  @click.stop
+                  size="10px"
+                  icon="more_vert"
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="editCalendar(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>แก้ไขวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="deleteClick(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>ลบวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-tab-panel>
+    </q-tab-panels>
   </q-card>
 
   <!-- modal เพิ่มวันหยุด -->
diff --git a/src/modules/01_metadataNew/views/personal.vue b/src/modules/01_metadataNew/views/personal.vue
index f107f339f..0830da32b 100644
--- a/src/modules/01_metadataNew/views/personal.vue
+++ b/src/modules/01_metadataNew/views/personal.vue
@@ -50,17 +50,32 @@ onMounted(() => {
           class="q-py-xs"
         />
       </q-tabs>
-      <q-separator size="2px" />
+      <q-separator />
       <!-- person -->
-      <div class="q-pa-md">
-        <ListPrefix v-if="currentTab == 'list_prefix'" />
-        <ListRank v-if="currentTab == 'list_rank'" />
-        <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
-        <ListGender v-if="currentTab == 'list_gender'" />
-        <ListReligion v-if="currentTab == 'list_religion'" />
-        <ListRelationship v-if="currentTab == 'list_relationship'" />
-        <ListEducation v-if="currentTab == 'list_education'" />
-      </div>
+
+      <q-tab-panels v-model="currentTab" animated>
+        <q-tab-panel name="list_prefix">
+          <ListPrefix v-if="currentTab == 'list_prefix'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_rank">
+          <ListRank v-if="currentTab == 'list_rank'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_bloodGroup">
+          <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_gender">
+          <ListGender v-if="currentTab == 'list_gender'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_religion">
+          <ListReligion v-if="currentTab == 'list_religion'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_relationship">
+          <ListRelationship v-if="currentTab == 'list_relationship'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_education">
+          <ListEducation v-if="currentTab == 'list_education'" />
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/01_metadataNew/views/position.vue b/src/modules/01_metadataNew/views/position.vue
index bd15a4547..0c2ce6698 100644
--- a/src/modules/01_metadataNew/views/position.vue
+++ b/src/modules/01_metadataNew/views/position.vue
@@ -41,12 +41,21 @@ onMounted(() => {
         class="q-py-xs"
       />
     </q-tabs>
-    <q-separator size="2px" />
-    <div class="q-pa-md">
-      <ListPosition v-if="store.pathLocation == 'list_position'" />
-      <ListType v-if="store.pathLocation == 'list_type'" />
-      <ListExecutive v-if="store.pathLocation == 'list_executive'" />
-    </div>
+    <q-separator />
+
+    <q-tab-panels v-model="store.pathLocation" animated>
+      <q-tab-panel name="list_position">
+        <ListPosition v-if="store.pathLocation == 'list_position'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_type">
+        <ListType v-if="store.pathLocation == 'list_type'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_executive">
+        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-card>
 </template>
 
diff --git a/src/modules/02_organizationalNew/components/PositionDetail.vue b/src/modules/02_organizationalNew/components/PositionDetail.vue
index 87c76d73d..f47fb9624 100644
--- a/src/modules/02_organizationalNew/components/PositionDetail.vue
+++ b/src/modules/02_organizationalNew/components/PositionDetail.vue
@@ -43,81 +43,81 @@ const formData = reactive<FormDetailPosition>({
   status: "", //*สถานะตำแหน่ง
 });
 
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionField",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionField",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posTypeName",
-    align: "left",
-    label: "ประเภทตำเเหน่ง",
-    sortable: true,
-    field: "posTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevelName",
-    align: "left",
-    label: "ระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posExecutiveName",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "posExecutiveName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionExecutiveField",
-    align: "left",
-    label: "ด้านทางการบริหาร",
-    sortable: true,
-    field: "positionExecutiveField",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionArea",
-    align: "left",
-    label: "ด้าน/สาขา",
-    sortable: true,
-    field: "positionArea",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const row = ref<Position[]>([]);
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: false,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionName",
+//     align: "left",
+//     label: "ตำแหน่งในสายงาน",
+//     sortable: true,
+//     field: "positionName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionField",
+//     align: "left",
+//     label: "สายงาน",
+//     sortable: true,
+//     field: "positionField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posTypeName",
+//     align: "left",
+//     label: "ประเภทตำเเหน่ง",
+//     sortable: true,
+//     field: "posTypeName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posLevelName",
+//     align: "left",
+//     label: "ระดับตำแหน่ง",
+//     sortable: true,
+//     field: "posLevelName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posExecutiveName",
+//     align: "left",
+//     label: "ตำแหน่งทางการบริหาร",
+//     sortable: true,
+//     field: "posExecutiveName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionExecutiveField",
+//     align: "left",
+//     label: "ด้านทางการบริหาร",
+//     sortable: true,
+//     field: "positionExecutiveField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionArea",
+//     align: "left",
+//     label: "ด้าน/สาขา",
+//     sortable: true,
+//     field: "positionArea",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+// ]);
+// const row = ref<Position[]>([]);
 
 /** function ปิด popup*/
 function close() {
@@ -137,18 +137,26 @@ watch(
             : store.typeOrganizational === "draft"
             ? "แบบร่าง"
             : "ยุบเลิก";
-        row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
-          ...e,
-          positionName: e.positionName ? e.positionName : "-",
-          positionField: e.positionField ? e.positionField : "-",
-          posTypeName: e.posTypeName ? e.posTypeName : "-",
-          posLevelName: e.posLevelName ? e.posLevelName : "-",
-          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
-          positionExecutiveField: e.positionExecutiveField
-            ? e.positionExecutiveField
-            : "-",
-          positionArea: e.positionArea ? e.positionArea : "-",
-        }));
+            formData.positionType = prosp.dataDetailPos.posTypeName
+            formData.positionPathSide = prosp.dataDetailPos.positionName
+            formData.positionLine = prosp.dataDetailPos.positionField
+            formData.positionSide = prosp.dataDetailPos.positionArea ? prosp.dataDetailPos.positionArea : "-"
+            formData.positionLevel = prosp.dataDetailPos.posLevelName
+            formData.positionExecutive = prosp.dataDetailPos.posExecutiveName ? prosp.dataDetailPos.posExecutiveName : "-"
+            formData.positionExecutiveSide = prosp.dataDetailPos.positionExecutiveField ? prosp.dataDetailPos.positionExecutiveField : "-"
+          
+          // row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
+        //   ...e,
+        //   positionName: e.positionName ? e.positionName : "-",
+        //   positionField: e.positionField ? e.positionField : "-",
+        //   posTypeName: e.posTypeName ? e.posTypeName : "-",
+        //   posLevelName: e.posLevelName ? e.posLevelName : "-",
+        //   posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+        //   positionExecutiveField: e.positionExecutiveField
+        //     ? e.positionExecutiveField
+        //     : "-",
+        //   positionArea: e.positionArea ? e.positionArea : "-",
+        // }));
       }
     }
   }
@@ -172,7 +180,6 @@ watch(
                 <p>{{ formData.positionNo }}</p>
               </div>
             </div>
-            <!-- 
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
@@ -182,9 +189,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionType }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ตำแหน่งในสายงาน</p>
@@ -193,9 +200,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionPathSide }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>สายงาน</p>
@@ -204,9 +211,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionLine }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+            <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ด้าน/สาขา</p>
@@ -215,9 +222,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionSide }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+            <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ระดับตำแหน่ง</p>
@@ -226,9 +233,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionLevel }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ตำแหน่งทางการบริหาร</p>
@@ -237,9 +244,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionExecutive }}</p>
               </div>
-            </div> -->
+            </div> 
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+            <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ด้านทางการบริหาร</p>
@@ -248,7 +255,7 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionExecutiveSide }}</p>
               </div>
-            </div> -->
+            </div> 
 
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
@@ -261,7 +268,7 @@ watch(
               </div>
             </div>
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-12">
                 <d-table
                   flat
@@ -302,7 +309,7 @@ watch(
                   </template>
                 </d-table>
               </div>
-            </div>
+            </div> -->
           </div>
         </q-card-section>
       </q-card>
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 2ff6a8217..1e6ba514e 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -34,6 +34,8 @@ const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
 const nodeId = ref<string>(""); // id ของ Tree
 const orgLevel = ref<number>(0); // levelTree
 const isLoad = ref<boolean>(false); // loadTable
+const isLoadTree = ref<boolean>(false); // loadTable
+
 const selected = ref<string>("");
 
 const reqMaster = reactive<FilterMaster>({
@@ -53,6 +55,7 @@ const posMaster = ref<PosMaster2[]>([]);
  * @param id id โครงสร้าง
  */
 async function fetchDataTree(id: string) {
+  isLoadTree.value = false;
   showLoader();
   await http
     .get(config.API.orgByid(id.toString()))
@@ -121,6 +124,32 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     });
 }
 
+/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  http
+    .post(config.API.orgSummary, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
 /** funcion ค้นหาข้อมูลใน Table*/
 async function filterKeyword() {
   reqMaster.page = 1;
@@ -168,6 +197,7 @@ watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
 watch(
   () => reqMaster.isAll,
   () => {
+    getSummary();
     if (reqMaster.page !== 1) {
       reqMaster.page = 1;
     } else {
@@ -185,7 +215,6 @@ watch(
           <TreeView
             v-model:nodeTree="nodeTree"
             v-model:nodeId="nodeId"
-            v-model:selected="selected"
             :fetchDataTree="fetchDataTree"
             :fetchDataTable="fetchDataTable"
           />
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 88d482208..6cca066cb 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -28,7 +28,6 @@ const { dialogRemove, showLoader, hideLoader, messageError, success } =
 /** props*/
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const nodeId = defineModel<string>("nodeId", { required: true });
-const selected = defineModel<string>("selected", { required: true });
 const props = defineProps({
   fetchDataTree: {
     type: Function,
@@ -97,39 +96,39 @@ const orgId = ref<string>("");
  * @param data ข่อมูล Tree
  */
 function updateSelected(data: DataTree) {
-  store.treeId = data.orgTreeId;
-  store.level = data.orgLevel;
-  // if (data.orgTreeId === nodeId.value) {
-  //   nodeId.value = "";
-  // } else {
-  nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
 
-  data.orgTreeId && props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
-  /** ดึงข้อมูลสถิติจำนวนด้านบน*/
-  http
-    .post(config.API.orgSummary, {
-      id: data.orgTreeId, //*Id node
-      type: data.orgLevel, //*ประเภทnode
-      isNode: false, //*นับทั้ง node ไหม
-    })
-    .then(async (res: any) => {
-      const data = await res.data.result;
-      if (data) {
-        store.getSumPosition({
-          totalPosition: data.totalPosition,
-          totalPositionCurrentUse: data.totalPositionCurrentUse,
-          totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-          totalPositionNextUse: data.totalPositionNextUse,
-          totalPositionNextVacant: data.totalPositionNextVacant,
-          totalRootPosition: data.totalPosition,
-          totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-          totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-          totalRootPositionNextUse: data.totalPositionNextUse,
-          totalRootPositionNextVacant: data.totalPositionNextVacant,
-        });
-      }
-    });
-  // }
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummary, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          store.getSumPosition({
+            totalPosition: data.totalPosition,
+            totalPositionCurrentUse: data.totalPositionCurrentUse,
+            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalPositionNextUse: data.totalPositionNextUse,
+            totalPositionNextVacant: data.totalPositionNextVacant,
+            totalRootPosition: data.totalPosition,
+            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalRootPositionNextUse: data.totalPositionNextUse,
+            totalRootPositionNextVacant: data.totalPositionNextVacant,
+          });
+        }
+      });
+  }
 }
 
 const breakLoop = ref<boolean>(false);
@@ -366,8 +365,6 @@ watch(
     nodes.value = nodeTEST.value;
   }
 );
-
-const modaeMenu = ref<boolean>(false);
 </script>
 
 <template>
diff --git a/src/modules/02_organizationalNew/components/structureView.vue b/src/modules/02_organizationalNew/components/structureView.vue
index 3c5b3b848..a0d45cd72 100644
--- a/src/modules/02_organizationalNew/components/structureView.vue
+++ b/src/modules/02_organizationalNew/components/structureView.vue
@@ -1,6 +1,240 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineAsyncComponent } from "@vue/runtime-core";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { StructChart } from "structure-chart";
+import "structure-chart/structure-chart.css";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+const $q = useQuasar(); // show dialog
+
+// import chartData from '@/assets/structChartData'
+// const dataSource = ref(chartData)
+const dataSource = ref(); // ข้อมูล Chart
+const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
+const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
+const chartRef = ref(); // อ้างอิงไปที่ตัว chart
+const savePNG = () => {
+  chartRef.value.savePNG();
+};
+const savePDF = () => {
+  chartRef.value.savePDF();
+};
+
+const loader = ref<boolean>(false); // Loader
+
+onMounted(async () => {
+  await fetchTreeRoot();
+  await fetchStructChart();
+});
+
+/**
+ * อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
+ */
+const fetchTreeRoot = async () => {
+  showLoader();
+  let urlRequest = config.API.chartGetTreeRoot;
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        rootOrgID.value = response.data.result[0].organizationId;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
+ */
+const fetchStructChart = async () => {
+  showLoader();
+  let urlRequest = config.API.chartGetStructure(rootOrgID.value);
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        dataSource.value = response.data.result[0];
+        if (dataSourceLock.value === undefined)
+          dataSourceLock.value = dataSource.value;
+        breadcrumbsGen();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
+ * @param data
+ */
+const refreshChart = async (data: any) => {
+  if (data.value !== undefined) rootOrgID.value = data.value;
+  else rootOrgID.value = data;
+  if (rootOrgID.value !== 0) await fetchStructChart();
+  if (data.value !== undefined) data.value = 0;
+};
+
+/**
+ * === กระบวนการสร้าง Path ===
+ */
+/**
+ * Recursive เพื่อหา Path ที่ผู้ใช้คลิก
+ * @param id OrgID ของหน่วยงานที่ต้องการหา
+ * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
+ */
+const chartTraverse = (id: any, chart: any): any => {
+  let _returnPath = [];
+  for (const child of chart) {
+    if (child.deptID === id) {
+      _returnPath.push({
+        label: child.departmentName,
+        id: child.deptID,
+      });
+      return _returnPath;
+    } else {
+      if (
+        typeof child.children !== "undefined" &&
+        child.children !== null &&
+        child.children.length > 0
+      ) {
+        let _result = chartTraverse(id, child.children);
+        if (typeof _result !== "undefined" && _result !== null) {
+          _returnPath.push({
+            label: child.departmentName,
+            id: child.deptID,
+          });
+          return [..._returnPath, ...(_result ?? [])];
+        }
+      }
+    }
+  }
+};
+
+const findPath = (id: any) => {
+  let _path = [];
+  _path.push({
+    label: dataSourceLock.value.departmentName,
+    id: dataSourceLock.value.deptID,
+  });
+  if (dataSourceLock.value.deptID === id) return _path;
+  if (dataSourceLock.value.children.length > 0) {
+    let _returnPath = chartTraverse(id, dataSourceLock.value.children);
+    return [..._path, ...(_returnPath ?? [])];
+  }
+};
+
+const theBreadcrumb = ref();
+/**
+ * สร้าง Path Breadcrumbs
+ */
+const breadcrumbsGen = () => {
+  if (rootOrgID.value !== 0) {
+    theBreadcrumb.value = [];
+    const newPath = findPath(rootOrgID.value);
+    theBreadcrumb.value = newPath;
+  }
+};
+</script>
+
 <template>
-  <div>Structure View</div>
+  <div class="toptitle text-dark col-12 row items-center">แผนภูมิโครงสร้าง</div>
+  <div class="text-dark">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-sm row wrap items-center">
+        <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
+          <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          color="red-7"
+          @click="savePDF()"
+          icon="mdi-file-pdf-box"
+        >
+          <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
+        </q-btn>
+        <div class="bg-grey-2 q-py-xs q-px-sm rounded-borders">
+          <q-breadcrumbs>
+            <template v-slot:separator>
+              <q-icon size="1.5em" name="chevron_right" color="primary" />
+            </template>
+            <template v-for="link in theBreadcrumb" :key="link.id">
+              <q-breadcrumbs-el
+                :label="link.label"
+                @click="refreshChart(link.id)"
+                class="breadcrumbs-link"
+              />
+            </template>
+          </q-breadcrumbs>
+        </div>
+      </div>
+      <q-separator />
+      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+        <StructChart
+          style="height: 70vh"
+          ref="chartRef"
+          class="struct"
+          :dataSource="dataSource"
+          @onElementClick="refreshChart"
+        />
+      </div>
+    </q-card>
+  </div>
+  <full-loader :visibility="loader"></full-loader>
 </template>
 
-<style scoped></style>
+<style>
+.breadcrumbs-link {
+  cursor: pointer;
+}
+.struct .section-primary .header,
+.struct .section-secondary .header,
+.struct .section-tertiary .header {
+  font-size: 1rem !important;
+}
+
+.struct .section-primary .column-side .side-button,
+.struct .section-secondary .column-side .side-button,
+.struct .section-list .column-side .side-button {
+  background-color: #d9d9d96b !important;
+  color: #545459 !important;
+  width: 25px !important;
+  height: 25px !important;
+  font-size: 11px !important;
+  padding: 0px;
+}
+
+.struct .section-primary,
+.section-secondary,
+.struct .section-list {
+  padding: 6px 15px 6px 15px;
+}  
+.struct .section-primary .header {
+  font-weight: 600 !important;
+}
+
+.struct .section-secondary .header {
+  font-weight: 400 !important;
+}
+
+.struct .subchild-more {
+  background-position: center !important;
+  background-size: 14px !important;
+}
+</style>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index 2c3d80e2f..df21ce9ed 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -89,12 +89,6 @@ const listMenu = ref<ListMenu[]>([
     type: "HISTORY",
     color: "deep-purple",
   },
-  {
-    label: "ดูรายละเอียด",
-    icon: "mdi-eye",
-    type: "VIEWDETIAL",
-    color: "blue",
-  },
 ]);
 const document = ref<any>([
   {
@@ -612,16 +606,12 @@ async function onClickDownloadReport(val: string) {
                   <q-item
                     v-for="(item, index) in store.typeOrganizational === 'draft'
                       ? listMenu
-                      : listMenu.filter(
-                          (e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
-                        )"
+                      : listMenu.filter((e) => e.type === 'HISTORY')"
                     :key="index"
                     clickable
                     v-close-popup
                     @click="
-                      item.type === 'VIEWDETIAL'
-                        ? onClickViewDetail(props.row)
-                        : item.type === 'EDIT'
+                      item.type === 'EDIT'
                         ? onClickPosition('EDIT', props.row.id)
                         : item.type === 'DEL'
                         ? onClickDelete(props.row.id)
@@ -645,6 +635,19 @@ async function onClickDownloadReport(val: string) {
                       </div>
                     </q-item-section>
                   </q-item>
+                  <q-item
+                    v-if="props.row.positionIsSelected != 'ว่าง'"
+                    clickable
+                    v-close-popup
+                    @click="onClickViewDetail(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon color="blue" size="17px" name="mdi-eye" />
+                        <div class="q-pl-md">ดูรายละเอียด</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
                 </q-list>
               </q-menu>
             </q-btn>
diff --git a/src/modules/04_registry/components/Information/OldName.vue b/src/modules/04_registry/components/Information/OldName.vue
index 098456670..85be635da 100644
--- a/src/modules/04_registry/components/Information/OldName.vue
+++ b/src/modules/04_registry/components/Information/OldName.vue
@@ -44,6 +44,8 @@
               >
                 <q-tooltip>ไฟล์เอกสารหลักฐาน</q-tooltip>
               </q-btn>
+            </q-td>
+            <q-td auto-width>
               <q-btn
                 color="info"
                 flat
@@ -692,47 +694,52 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (fileUpload.value.length > 0) {
-    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
-    const newFile = new File(blob, nameFile.value, {
-      type: fileUpload.value[0].type,
+  // if (fileUpload.value.length > 0) {
+  const blob =
+    fileUpload.value.length > 0
+      ? fileUpload.value.slice(0, fileUpload.value[0].size)
+      : null;
+  const newFile: any = blob
+    ? new File(blob, nameFile.value, {
+        type: fileUpload.value[0].type,
+      })
+    : null;
+  const formData = new FormData();
+
+  newFile && formData.append("", newFile);
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  showLoader();
+  await http
+    .post(config.API.profileChangeNameId(profileId.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
     });
-    const formData = new FormData();
-    formData.append("", newFile);
-    if (prefixId.value != undefined)
-      formData.append("prefixId", prefixId.value);
-    if (firstName.value != undefined)
-      formData.append("firstName", firstName.value);
-    if (lastName.value != undefined)
-      formData.append("lastName", lastName.value);
-    if (status.value != undefined) formData.append("status", status.value);
-    showLoader();
-    await http
-      .post(config.API.profileChangeNameId(profileId.value), formData)
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-        await props.fetchDataInformation();
-      });
-  } else {
-    dialogMessage(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้",
-      "กรุณาอัปโหลดเอกสารหลักฐาน",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
+  // }
+  //  else {
+  //   dialogMessage(
+  //     $q,
+  //     "ไม่สามารถบันทึกข้อมูลได้",
+  //     "กรุณาอัปโหลดเอกสารหลักฐาน",
+  //     "warning",
+  //     undefined,
+  //     "orange",
+  //     undefined,
+  //     undefined,
+  //     true
+  //   );
+  // }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 90284075b..1aa4f50df 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -212,7 +212,21 @@
           </div> -->
           <div class="row q-col-gutter-sm">
             <div class="col-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDateLaeaveYear"
+                :label="`${'ปี'}`"
+                mask="####"
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 v-model="formData.leaveYear"
                 class="col-2"
@@ -470,6 +484,7 @@ import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
+import moment from "moment";
 
 const props = defineProps({
   statusEdit: {
@@ -503,6 +518,8 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  convertDate,
+  convertDateDisplay,
 } = mixin;
 const route = useRoute();
 
@@ -566,6 +583,16 @@ const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
 const filter = ref<string>(""); //search data table
 
+const inputDateLaeaveYear = ref<string>("");
+/** ตรวจเวลา */
+watch(
+  () => inputDateLaeaveYear.value,
+  (value: string) => {
+    if (value.length === 4) {
+      formData.leaveYear = parseInt(value) - 543;
+    }
+  }
+);
 /**old */
 // const visibleColumns = ref<String[]>([]);
 // profileData.leave.columns.length == 0
@@ -1051,11 +1078,11 @@ const getData = () => {
   //   coupleDay.value = row.coupleDay;
   //   therapyDay.value = row.therapyDay;
   formData.id = row.id;
-  formData.sumSick = row.sumSick =='-' ? '':row.sumSick;
-  formData.sumRest = row.sumRest =='-' ? '':row.sumRest;
-  formData.sumLate = row.sumLate =='-' ? '':row.sumLate;
-  formData.sumAbsent = row.sumAbsent =='-' ? '':row.sumAbsent;
-  formData.sumEducation = row.sumEducation =='-' ? '':row.sumEducation;
+  formData.sumSick = row.sumSick == "-" ? "" : row.sumSick;
+  formData.sumRest = row.sumRest == "-" ? "" : row.sumRest;
+  formData.sumLate = row.sumLate == "-" ? "" : row.sumLate;
+  formData.sumAbsent = row.sumAbsent == "-" ? "" : row.sumAbsent;
+  formData.sumEducation = row.sumEducation == "-" ? "" : row.sumEducation;
   formData.leaveYear = row.leaveYear == "-" ? 0 : Number(row.leaveYear) - 543;
 
   // id.value = row.id;
@@ -1101,6 +1128,7 @@ const clickAdd = async () => {
 
 const clickAddLeave = async () => {
   clearForm();
+  inputDateLaeaveYear.value = (moment().year() + 543).toString();
   editRow.value = false;
   edit.value = true;
   modalAdd.value = true;
@@ -1158,11 +1186,11 @@ const clickSave = async () => {
     if (result) {
       if (modalEdit.value) {
         // await dialogConfirm($q, () => {
-          editData();
+        editData();
         // });
       } else {
         // await dialogConfirm($q, () => {
-          saveData();
+        saveData();
         // });
       }
     }
@@ -1173,7 +1201,9 @@ const clickSave = async () => {
 //  * บันทึกเพิ่มข้อมูล
 //  */
 const saveData = async () => {
+  formData.leaveYear = (await Number(inputDateLaeaveYear.value)) - 543;
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+  console.log(formData.leaveYear);
 
   if (profileId.value) {
     showLoader();
@@ -1188,6 +1218,7 @@ const saveData = async () => {
       })
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
+
         modalAdd.value = false;
       })
       .catch((e) => {
@@ -1324,12 +1355,19 @@ const selectData = async (props: DataProps) => {
 
   rowIndex.value = props.rowIndex;
   formData.id = props.row.id;
-  formData.sumSick = props.row.sumSick == '-' ? '':props.row.sumSick;
-  formData.sumRest = props.row.sumRest == '-' ? '':props.row.sumRest;
-  formData.sumLate = props.row.sumLate == '-' ? '':props.row.sumLate;
-  formData.sumAbsent = props.row.sumAbsent == '-' ? '':props.row.sumAbsent;
-  formData.sumEducation = props.row.sumEducation == '-' ? '':props.row.sumEducation;
-  formData.leaveYear = props.row.leaveYear == "-" ? 0 : Number(props.row.leaveYear) - 543;
+  formData.sumSick = props.row.sumSick == "-" ? "" : props.row.sumSick;
+  formData.sumRest = props.row.sumRest == "-" ? "" : props.row.sumRest;
+  formData.sumLate = props.row.sumLate == "-" ? "" : props.row.sumLate;
+  formData.sumAbsent = props.row.sumAbsent == "-" ? "" : props.row.sumAbsent;
+  formData.sumEducation =
+    props.row.sumEducation == "-" ? "" : props.row.sumEducation;
+  formData.leaveYear =
+    props.row.leaveYear == "-" ? 0 : Number(props.row.leaveYear) - 543;
+  console.log("เเก้ไข");
+
+  inputDateLaeaveYear.value = ((formData.leaveYear as number) + 543).toString();
+
+  console.log(inputDateLaeaveYear.value);
 
   // id.value = props.row.id;
   // typeLeave.value = props.row.typeLeaveId;
@@ -1361,10 +1399,9 @@ const selectData = async (props: DataProps) => {
  * กดปุ่มเพิ่มบน table
  */
 const addData = async () => {
-  //   modalEdit.value = false;
-
+  //modalEdit.value = false;
   modal.value = true;
-  //   edit.value = true;
+  //edit.value = true;
   await clickTotal();
 };
 
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index fe58707e1..a3d60be13 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -57,7 +57,18 @@
         <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
+                v-if="edit"
+                outlined
+                v-model="inputDate"
+                :label="`${'วันที่'}`"
+                mask="##/##/####"
+                dense
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="date"
@@ -73,6 +84,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -193,7 +205,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  convertDateDisplay,
+  convertDate,
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -218,6 +238,26 @@ const profileId = ref<string>(
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+
+const inputDate = ref<string>("");
+const dayChecked = ref<boolean>(false);
+/** ตรวจเวลา */
+watch(
+  () => inputDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        date.value = new Date(dateVal.value);
+      } else {
+        dayChecked.value = true;
+        inputDate.value = "";
+      }
+    }
+  }
+);
+
 profileData.other.columns.length == 0
   ? (visibleColumns.value = ["date", "detail"])
   : (visibleColumns.value = profileData.other.columns);
@@ -387,6 +427,7 @@ const clickEdit = () => {
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = async () => {
+  inputDate.value = "";
   editRow.value = false;
   await addData();
 };
@@ -521,6 +562,8 @@ const selectData = async (props: DataProps) => {
   date.value = props.row.date;
   detail.value = props.row.detail;
   id.value = props.row.id;
+
+  inputDate.value = convertDateDisplay(date.value);
   await checkRowPage();
 };
 
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index dff43c81b..dc9174b16 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -989,8 +989,8 @@ function onClickUnlock() {
           hideLoader();
         });
     },
-    "ยืนยันการปลดให้แก้ไขข้อมูล",
-    "ต้องการยืนยันการปลดให้แก้ไขข้อมูลนี้หรือไม่?"
+    "ยืนยันการปลดล็อคให้แก้ไขข้อมูล",
+    "ต้องการยืนยันการปลดล็อคให้แก้ไขข้อมูลนี้หรือไม่?"
   );
 }
 onMounted(async () => {
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 2275ab6cb..43261cbe2 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -65,7 +65,18 @@
         <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
+                v-if="edit"
+                outlined
+                v-model="inputDate"
+                label="วัน/เดือน/ปี"
+                mask="##/##/####"
+                dense
+                :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="date"
@@ -81,6 +92,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -162,7 +174,17 @@
               </q-input>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDateRefCommandDate"
+                :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                mask="##/##/####"
+                dense
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="refCommandDate"
@@ -178,6 +200,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -294,8 +317,16 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const {
+  convertDateDisplay,
+  convertDate,
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -325,6 +356,47 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+const inputDate = ref<string>("");
+const inputDateRefCommandDate = ref<string>(
+  refCommandDate.value ? convertDateDisplay(refCommandDate.value) : ""
+);
+
+const dayChecked = ref<boolean>(false);
+const dayCheckedRefCommandDate = ref<boolean>(false);
+/** ตรวจเวลา */
+watch(
+  () => inputDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        date.value = new Date(dateVal.value);
+      } else {
+        dayChecked.value = true;
+        inputDate.value = "";
+      }
+    }
+  }
+);
+watch(
+  () => inputDateRefCommandDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        refCommandDate.value = new Date(dateVal.value);
+      } else {
+        dayChecked.value = true;
+        inputDateRefCommandDate.value = "";
+      }
+    } else {
+      refCommandDate.value = null;
+    }
+  }
+);
+
 profileData.record.columns.length == 0
   ? (visibleColumns.value = [
       "date",
@@ -725,6 +797,11 @@ const selectData = async (props: DataProps) => {
   refCommandNo.value = props.row.refCommandNo;
   refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
+
+  inputDate.value = convertDateDisplay(date.value);
+  inputDateRefCommandDate.value = refCommandDate.value
+    ? convertDateDisplay(refCommandDate.value)
+    : "";
   await checkRowPage();
 };
 
@@ -740,6 +817,8 @@ const addData = () => {
   reference.value = "";
   refCommandNo.value = "";
   refCommandDate.value = null;
+  inputDate.value = convertDateDisplay(date.value);
+  inputDateRefCommandDate.value = "";
 };
 
 /**
diff --git a/src/modules/04_registry/components/Table.vue b/src/modules/04_registry/components/Table.vue
index 5d8468f73..5cbb468cb 100644
--- a/src/modules/04_registry/components/Table.vue
+++ b/src/modules/04_registry/components/Table.vue
@@ -74,7 +74,8 @@
         <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 v-if="name !== 'การลา'"/>
+        <q-th auto-width v-if="name !== 'การลา'" />
+        <q-th auto-width v-if="name === 'ประวัติการเปลี่ยนชื่อ-นามสกุล'" />
       </q-tr>
     </template>
     <template #body="props">
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index 2b7bd07e4..4c316b7be 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -64,7 +64,20 @@
         <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
+                v-if="edit"
+                outlined
+                v-model="inputDateStart"
+                label="วันที่เริ่มต้น"
+                mask="##/##/####"
+                dense
+                :error="dayCheckedStart"
+                error-message="กรุณากรอกวัน/เดือน/ปี เริ่มต้น"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="dateStart"
@@ -80,6 +93,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -107,7 +121,19 @@
               </datepicker>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDateEnd"
+                label="วันที่สิ้นสุด"
+                mask="##/##/####"
+                dense
+                :error="dayCheckedEnd"
+                error-message="กรุณากรอกวัน/เดือน/ปี สิ้นสุด"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 v-model="dateEnd"
                 :locale="'th'"
@@ -124,6 +150,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -205,7 +232,17 @@
               </q-input>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputRefCommandDate"
+                :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                mask="##/##/####"
+                dense
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="refCommandDate"
@@ -221,6 +258,7 @@
                 }}</template>
                 <template #trigger>
                   <q-input
+                    readonly
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -252,9 +290,7 @@
                       />
                     </template>
                   </q-input>
-                  
                 </template>
-                
               </datepicker>
             </div>
           </div>
@@ -311,6 +347,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
+import moment from "moment";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -340,8 +377,16 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const {
+  convertDateDisplay,
+  convertDate,
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -371,6 +416,63 @@ const profileId = ref<string>(
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+
+console.log(dateStart.value);
+const inputDateStart = ref<string>(convertDateDisplay(dateStart.value));
+const inputDateEnd = ref<string>(convertDateDisplay(dateEnd.value));
+const inputRefCommandDate = ref<string>("");
+
+const dayCheckedStart = ref<boolean>(false);
+const dayCheckedEnd = ref<boolean>(false);
+/** ตรวจเวลา */
+watch(
+  () => inputDateStart.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedStart.value = false;
+        dateStart.value = new Date(dateVal.value);
+      } else {
+        dayCheckedStart.value = true;
+        inputDateStart.value = "";
+      }
+    }
+  }
+);
+watch(
+  () => inputRefCommandDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedEnd.value = false;
+        refCommandDate.value = new Date(dateVal.value);
+      } else {
+        dayCheckedEnd.value = true;
+        inputRefCommandDate.value = "";
+      }
+    } else {
+      refCommandDate.value = null;
+    }
+  }
+);
+watch(
+  () => inputDateEnd.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedEnd.value = false;
+        dateEnd.value = new Date(dateVal.value);
+      } else {
+        dayCheckedEnd.value = true;
+        inputDateEnd.value = "";
+      }
+    }
+  }
+);
+
 profileData.work.columns.length == 0
   ? (visibleColumns.value = [
       "dateStart",
@@ -804,6 +906,12 @@ const selectData = async (props: DataProps) => {
   refCommandNo.value = props.row.refCommandNo;
   refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
+
+  inputDateStart.value = convertDateDisplay(dateStart.value);
+  inputDateEnd.value = convertDateDisplay(dateEnd.value);
+  inputRefCommandDate.value = refCommandDate.value
+    ? convertDateDisplay(refCommandDate.value)
+    : "";
   await checkRowPage();
 };
 
@@ -820,6 +928,10 @@ const addData = () => {
   reference.value = "";
   refCommandNo.value = "";
   refCommandDate.value = null;
+
+  inputDateStart.value = convertDateDisplay(dateStart.value);
+  inputDateEnd.value = convertDateDisplay(dateEnd.value);
+  inputRefCommandDate.value = "";
 };
 
 /**
diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
index e6f99dd76..43e689406 100644
--- a/src/modules/04_registryNew/components/registry/registry.vue
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -18,6 +18,7 @@ const {
   messageError,
   showLoader,
   hideLoader,
+  dialogMessageNotify,
 } = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
@@ -170,34 +171,66 @@ async function fetchPrefix() {
 }
 
 async function addData() {
-  await http.post(config.API.registryNew, {
-    prefix: prefix.value,
-    firstName: firstName.value,
-    lastName: lastName.value,
-    citizenId: citizenId.value,
-    position: position.value,
-    posTypeId: posTypeId.value,
-    posLevelId: posLevelId.value,
-  });
-  fetchData();
+  showLoader();
+  await http
+    .post(config.API.registryNew, {
+      prefix: prefix.value,
+      firstName: firstName.value,
+      lastName: lastName.value,
+      citizenId: citizenId.value,
+      position: position.value,
+      posTypeId: posTypeId.value,
+      posLevelId: posLevelId.value,
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      fetchData();
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.registryNewId(id), {
-    prefix: prefix.value,
-    firstName: firstName.value,
-    lastName: lastName.value,
-    citizenId: citizenId.value,
-    position: position.value,
-    posTypeId: posTypeId.value,
-    posLevelId: posLevelId.value,
-  });
-  fetchData();
+  showLoader();
+  await http
+    .put(config.API.registryNewId(id), {
+      prefix: prefix.value,
+      firstName: firstName.value,
+      lastName: lastName.value,
+      citizenId: citizenId.value,
+      position: position.value,
+      posTypeId: posTypeId.value,
+      posLevelId: posLevelId.value,
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      fetchData();
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.registryNewId(id));
-  fetchData();
+  await http
+    .delete(config.API.registryNewId(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      fetchData();
+      hideLoader();
+    });
 }
 
 function updateSelectType(val: string) {
@@ -250,6 +283,28 @@ watch(posTypeId, () => {
     updateSelectType(posTypeId.value);
   }, 200);
 });
+
+/**
+ * function ตรวจสอบเลขประจำตัวประชาชน
+ * @param citizenId เลขประจำตัวประชาชน
+ */
+async function changeCardID(citizenId: string | number | null) {
+  if (citizenId != null && typeof citizenId == "string") {
+    if (citizenId.length == 13 && citizenId) {
+      await http
+        .get(config.API.profileCitizenId(citizenId))
+        .then((res) => {
+          console.log(res);
+          const statusId = res.data.result.citizen;
+          !statusId &&
+            dialogMessageNotify($q, "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    }
+  }
+}
 </script>
 
 <template>
@@ -294,103 +349,104 @@ watch(posTypeId, () => {
       />
     </div>
   </q-toolbar>
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="store.row"
+      :filter="filterKeyword"
+      row-key="name"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <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 v-for="col in props.cols" :key="col.id">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'fullName'">
+              {{ props.row.prefix }}{{ props.row.firstName }}
+              {{ props.row.lastName }}
+            </div>
 
-  <d-table
-    ref="table"
-    :columns="columns"
-    :rows="store.row"
-    :filter="filterKeyword"
-    row-key="name"
-    flat
-    bordered
-    :paging="true"
-    dense
-    class="custom-header-table"
-    :visible-columns="visibleColumns"
-  >
-    <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 v-for="col in props.cols" :key="col.id">
-          <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
-          </div>
-          <div v-else-if="col.name == 'fullName'">
-            {{ props.row.prefix }}{{ props.row.firstName }}
-            {{ props.row.lastName }}
-          </div>
-
-          <div v-else>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="grey"
-            flat
-            dense
-            round
-            size="14px"
-            icon="more_vert"
-            @click.stop
-          >
-            <q-menu>
-              <q-list dense>
-                <q-item
-                  v-close-popup
-                  clickable
-                  @click.stop="
-                    () => {
-                      dialogStatus = 'edit';
-                      dialog = true;
-                      editId = props.row.id;
-                      prefix = props.row.prefix;
-                      firstName = props.row.firstName;
-                      lastName = props.row.lastName;
-                      citizenId = props.row.citizenId;
-                      position = props.row.position;
-                      posTypeId = props.row.posTypeId;
-                      posLevelId = props.row.posLevelId;
-                    }
-                  "
-                >
-                  <q-item-section>
-                    <div class="row items-center white">
-                      <q-icon name="o_edit" color="positive" />
-                      <span class="q-ml-sm">แก้ไข</span>
-                    </div>
-                  </q-item-section>
-                </q-item>
-                <q-item clickable>
-                  <q-item-section
-                    @click="
-                      dialogRemove(
-                        $q,
-                        async () => await deleteData(props.row.id)
-                      )
-                    "
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="grey"
+              flat
+              dense
+              round
+              size="14px"
+              icon="more_vert"
+              @click.stop
+            >
+              <q-menu>
+                <q-list dense>
+                  <q-item
                     v-close-popup
+                    clickable
+                    @click.stop="
+                      () => {
+                        dialogStatus = 'edit';
+                        dialog = true;
+                        editId = props.row.id;
+                        prefix = props.row.prefix;
+                        firstName = props.row.firstName;
+                        lastName = props.row.lastName;
+                        citizenId = props.row.citizenId;
+                        position = props.row.position;
+                        posTypeId = props.row.posTypeId;
+                        posLevelId = props.row.posLevelId;
+                      }
+                    "
                   >
-                    <div class="row items-center white">
-                      <q-icon name="mdi-trash-can-outline" color="negative" />
-                      <span class="q-ml-sm">ลบ</span>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
+                    <q-item-section>
+                      <div class="row items-center white">
+                        <q-icon name="o_edit" color="positive" />
+                        <span class="q-ml-sm">แก้ไข</span>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section
+                      @click="
+                        dialogRemove(
+                          $q,
+                          async () => await deleteData(props.row.id)
+                        )
+                      "
+                      v-close-popup
+                    >
+                      <div class="row items-center white">
+                        <q-icon name="mdi-trash-can-outline" color="negative" />
+                        <span class="q-ml-sm">ลบ</span>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 350px" class="bg-grey-11">
@@ -461,6 +517,7 @@ watch(posTypeId, () => {
             maxlength="13"
             hide-bottom-space
             mask="#############"
+            @update:model-value="changeCardID"
           />
           <q-input
             ref="positionRef"