diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
index 8b2ddf837..a6d551d6e 100644
--- a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -70,13 +70,15 @@ async function save() {
   showLoader();
   await http
     .put(config.API.insigniaSort(id.value), { id: dataPost })
+    .then(() => {
+      store.row = rows.value;
+    })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
-      store.row = rows.value;
-      props.fetchData(id.value);
+      // props.fetchData(id.value);
     });
 }
 
diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index c039aac4e..5392d33fc 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  edit: {
+    type: Function,
+    require: true,
+  },
 });
 
 const $q = useQuasar();
@@ -56,9 +60,9 @@ const orgLevelOption = ref<DataOption[]>([]);
 const orgNameRef = ref<Object | null>(null);
 const orgShortNameRef = ref<Object | null>(null);
 const orgCodeRef = ref<Object | null>(null);
-const orgPhoneExRef = ref<Object | null>(null);
-const orgPhoneInRef = ref<Object | null>(null);
-const orgFaxRef = ref<Object | null>(null);
+// const orgPhoneExRef = ref<Object | null>(null);
+// const orgPhoneInRef = ref<Object | null>(null);
+// const orgFaxRef = ref<Object | null>(null);
 const orgLevelRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataAgency>({
@@ -76,9 +80,9 @@ const objectComplaintsRef: FormAgencyRef = {
   orgName: orgNameRef,
   orgShortName: orgShortNameRef,
   orgCode: orgCodeRef,
-  orgPhoneEx: orgPhoneExRef,
-  orgPhoneIn: orgPhoneInRef,
-  orgFax: orgFaxRef,
+  // orgPhoneEx: orgPhoneExRef,
+  // orgPhoneIn: orgPhoneInRef,
+  // orgFax: orgFaxRef,
   orgLevel: orgLevelRef,
 };
 
@@ -134,8 +138,6 @@ function onSubmit() {
       ["org" + type + "Rank"]: formData.orgLevel,
       [nameId]: rootId,
     };
-    console.log(body);
-
     if (actionType.value === "ADD") {
       await http
         .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
@@ -164,6 +166,7 @@ function onSubmit() {
           )
           .then((res) => {
             console.log(res);
+            props.edit?.(props.dataNode?.orgTreeId, type, body);
             success($q, "บันทึกข้อมูลสำเร็จ");
           })
           .catch((err) => {
@@ -171,7 +174,7 @@ function onSubmit() {
             messageError($q, err);
           })
           .finally(async () => {
-            await props.fetchDataTree?.();
+            // await props.fetchDataTree?.();
             await closeClear();
             await hideLoader();
           }));
@@ -211,7 +214,10 @@ watch(
           formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
           formData.orgFax = props.dataNode.orgTreeFax;
           formData.orgLevel = props.dataNode.orgTreeRank;
-          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
+          orgLevelOption.value =
+            props.dataNode.orgTreeRank === "DEPARTMENT"
+              ? orgLevelOptionMain.value
+              : orgLevelOptionMain.value.slice(1, 4);
         }
       }
     }
@@ -221,25 +227,18 @@ watch(
 const tittleName = computed(() => {
   let name = "";
   if (actionType.value === "ADD") {
-    if (level.value === 1) {
-      name = "เพิ่มหน่วยงาน";
-    } else {
-      name = "เพิ่มส่วนราชการ";
-    }
+    name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
   } else {
-    if (level.value === 0) {
-      name = "แก้ไขหน่วยงาน";
-    } else {
-      name = "แก้ไขเพิ่มส่วนราชการ";
-    }
+    name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขเพิ่มส่วนราชการ";
   }
+
   return name;
 });
 </script>
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
-      <q-card style="min-width: 50vw">
+      <q-card style="min-width: 60vw">
         <form @submit.prevent="validateForm">
           <DialogHeader :tittle="tittleName" :close="closeClear" />
           <q-separator />
@@ -252,9 +251,17 @@ const tittleName = computed(() => {
                   dense
                   outlined
                   for="#ocName"
-                  label="ชื่อหน่วยงาน"
+                  :label="level == 0 ? 'ชื่อหน่วยงาน' : 'ชื่อส่วนราชการ'"
                   hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อหน่วยงาน'}`]"
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${
+                        level == 0
+                          ? 'กรุณากรอกชื่อหน่วยงาน'
+                          : 'กรุณากรอกชื่อส่วนราชการ'
+                      }`,
+                  ]"
                 />
               </div>
               <div class="col-2">
@@ -276,9 +283,17 @@ const tittleName = computed(() => {
                   dense
                   outlined
                   for="#ocNo"
-                  label="รหัสหน่วยงาน"
+                  :label="level == 0 ? 'รหัสหน่วยงาน' : 'รหัสส่วนราชการ'"
                   hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกรหัสหน่วยงาน'}`]"
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${
+                        level == 0
+                          ? 'กรุณากรอกรหัสหน่วยงาน'
+                          : 'กรุณากรอกรหัสส่วนราชการ'
+                      }`,
+                  ]"
                 />
               </div>
               <div class="col-4">
@@ -295,8 +310,18 @@ const tittleName = computed(() => {
                   map-options
                   v-model="formData.orgLevel"
                   :options="orgLevelOption"
-                  label="ระดับของหน่วยงาน"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
+                  :label="
+                    level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
+                  "
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${
+                        level == 0
+                          ? 'กรุณาเลือกระดับของหน่วยงาน'
+                          : 'กรุณาเลือกระดับของส่วนราชการ'
+                      }`,
+                  ]"
                   lazy-rules
                 />
               </div>
@@ -309,11 +334,6 @@ const tittleName = computed(() => {
                   for="#telOut"
                   label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
                   hide-bottom-space
-                  :rules="[
-                    (val) =>
-                      !!val ||
-                      `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก'}`,
-                  ]"
                 />
               </div>
               <div class="col-4">
@@ -325,10 +345,6 @@ const tittleName = computed(() => {
                   for="#telIn"
                   label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
                   hide-bottom-space
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายใน'}`,
-                  ]"
                 />
               </div>
               <div class="col-4">
@@ -340,7 +356,6 @@ const tittleName = computed(() => {
                   for="#tel"
                   label="หมายเลขโทรสาร"
                   hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรสาร'}`]"
                 />
               </div>
             </div>
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 00dfc4cdc..5b7183fe1 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -42,12 +42,6 @@ const listMenu = ref<ListMenu[]>([
     type: "copy",
     color: "blue-6",
   },
-  {
-    label: "แก้ไข",
-    icon: "edit",
-    type: "edit",
-    color: "primary",
-  },
   {
     label: "ลบ",
     icon: "delete",
@@ -308,16 +302,17 @@ watch(
 );
 
 function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some(item => item.positionId === data.positionId);
+  const isIdExist = rows.value.some(
+    (item) => item.positionId === data.positionId
+  );
 
   if (!isIdExist) {
     rows.value = [data, ...rows.value];
   }
 }
 
-
-function deleteData(id:string){
-  const dataRow = rows.value
+function deleteData(id: string) {
+  const dataRow = rows.value;
   const updatedRows = dataRow.filter((item: any) => item.positionId !== id);
   rows.value = updatedRows;
 }
@@ -326,7 +321,7 @@ function deleteData(id:string){
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 96vw">
-        <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
+        <DialogHeader tittle="เพิ่มอัตรากำลัง" :close="props.close" />
         <q-separator />
 
         <q-card-section class="q-pa-sm">
@@ -341,7 +336,7 @@ function deleteData(id:string){
                   <div
                     class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                   >
-                    เลขที่ตำแหน่ง
+                    ข้อมูลอัตรากำลัง
                   </div>
                   <div class="col-12"><q-separator /></div>
                   <div class="row q-col-gutter-sm col-12 q-pa-sm">
@@ -352,7 +347,7 @@ function deleteData(id:string){
                         outlined
                         readonly
                         for="#shortName"
-                        label="ชื่อย่อหน่วยงาน"
+                        label="อักษรย่อ"
                       />
                     </div>
                     <div class="col-3">
@@ -443,8 +438,8 @@ function deleteData(id:string){
                                 color="red"
                                 @click="deleteData(props.row.positionId)"
                               >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            </q-btn>
+                                <q-tooltip>ลบข้อมูล</q-tooltip>
+                              </q-btn>
                             </q-td>
                           </q-tr>
                         </template>
diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
index c3e2e84ce..5dcaed506 100644
--- a/src/modules/02_organizationalNew/components/StructureDetail.vue
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -31,15 +31,28 @@ const formData = reactive<any>({
 });
 
 async function fetchDetailTree(id: string, type: string) {
+  showLoader();
   await http
     .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
     .then((res) => {
       const data = res.data.result;
-      formData.orgName = data[`org${type}Name`];
-      formData.agencyName = data[`org${type}Name`];
-      formData.orgType = data[`org${type}Name`];
-      formData.orgLevel = data[`org${type}Rank`];
-      formData.status = data[`org${type}Name`];
+      const range = data[`org${type}Rank`];
+      formData.orgName =
+        range == "DEPARTMENT"
+          ? data[`org${type}Name`] + ` (${data[`org${type}ShortName`]})`
+          : "-";
+      formData.agencyName =
+        range != "DEPARTMENT"
+          ? data[`org${type}Name`] + ` (${data[`org${type}ShortName`]})`
+          : "-";
+      formData.orgType = range != "DEPARTMENT" ? "ส่วนราชการ" : "หน่วยงาน";
+      formData.orgLevel = store.convertType(range);
+      formData.status =
+        store.typeOrganizational === "current"
+          ? "ปกติ"
+          : store.typeOrganizational === "draft"
+          ? "แบบร่าง"
+          : "ยุบเลิก";
       formData.orgPhoneEx = data[`org${type}PhoneEx`];
       formData.orgPhoneIn = data[`org${type}PhoneIn`];
       formData.orgFax = data[`org${type}Fax`];
@@ -59,10 +72,10 @@ function close() {
 
 watch(
   () => modal.value,
-  () => {
+  async () => {
     if (modal.value == true) {
-      const type = store.checkLevel(orgLevel.value);
-      fetchDetailTree(treeId.value, type);
+      const type = await store.checkLevel(orgLevel.value);
+      await fetchDetailTree(treeId.value, type);
     }
   }
 );
@@ -76,88 +89,60 @@ watch(
         <q-card-section>
           <div class="q-px-md">
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>หน่วยงาน</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">หน่วยงาน</div>
               <div class="col-8 text-grey-8">
-                <p>{{ formData.orgName }} ({{ formData.orgShortName }})</p>
+                <p>{{ formData.orgName }}</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>ส่วนราชการ</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">ส่วนราชการ</div>
               <div class="col-8 text-grey-8">
                 <p>{{ formData.agencyName }}</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>ประเภท</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">ประเภท</div>
               <div class="col-8 text-grey-8">
                 <p>{{ formData.orgType }}</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>ระดับ</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">ระดับ</div>
               <div class="col-8 text-grey-8">
                 <p>{{ formData.orgLevel }}</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>สถานะ</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">สถานะ</div>
               <div class="col-8 text-grey-8">
                 <p>{{ formData.status }}</p>
               </div>
             </div>
-            <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p class="q-ma-none">เบอร์โทร</p>
-                </div>
-              </div>
-              <div class="col-8 text-grey-8">
-                <p class="q-ma-none">
-                  {{
-                    formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}` : ""
-                  }}
-                </p>
-              </div>
-            </div>
 
-            <div class="row q-col-gutter-sm">
-              <div class="offset-4 col-8 text-grey-8">
-                <p>
-                  {{
-                    formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}` : ""
-                  }}
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">เบอร์โทร</div>
+              <div class="col-8 text-grey-8">
+                <p v-if="formData.orgPhoneEx != ''">
+                  {{ `ภายนอก ${formData.orgPhoneEx}` }}
+                </p>
+                <p v-if="formData.orgPhoneIn != ''">
+                  {{ `ภายใน ${formData.orgPhoneIn}` }}
+                </p>
+                <p
+                  v-show="
+                    formData.orgPhoneEx == '' && formData.orgPhoneIn == ''
+                  "
+                >
+                  -
                 </p>
               </div>
             </div>
 
             <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>Fax</p>
-                </div>
-              </div>
+              <div class="col-4 text-bold">Fax</div>
               <div class="col-8 text-grey-8">
-                <p>{{ formData.orgFax }}</p>
+                <p v-if="formData.orgFax != ''">{{ formData.orgFax }}</p>
+                <p v-else>-</p>
               </div>
             </div>
           </div>
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 5f264aa91..eb2333ce5 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -5,7 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
@@ -18,39 +18,51 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const showData = ref<boolean>(false);
-const nodeTree = ref<any>();
+const nodeTree = ref<OrgTree[]>();
+const historyId = defineModel<string>("historyId", { required: true });
+const count = defineModel<number>("count", { required: true });
 
 // defineProps<{ dataActive: DataActive }>();
 
-async function fetchDataTree() {
+async function fetchDataTree(id: string) {
   showLoader();
-  const id =
-    store.typeOrganizational === "current" ? store.activeId : store.draftId;
-  id &&
-    (await http
-      .get(config.API.orgByid(id.toString()))
-      .then((res) => {
-        const data = res.data.result;
-        nodeTree.value = data;
-        console.log(res);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      }));
+  // const id =
+  //   store.typeOrganizational === "current" ? store.activeId : store.draftId;
+  // id &&
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
   // console.log(nodeTree.value);
 }
 
 onMounted(async () => {
-  await fetchDataTree();
+  const id =
+    store.typeOrganizational === "current" ? store.activeId : store.draftId;
+  id && (await fetchDataTree(id));
 });
 
+watch(
+  () => count.value,
+  () => {
+    fetchDataTree(historyId.value);
+  }
+);
+
 watch(
   () => store.typeOrganizational,
   () => {
-    fetchDataTree();
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    id && store.typeOrganizational !== "old" && fetchDataTree(id);
   }
 );
 </script>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 7a0a100d0..84afe164a 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -5,6 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
@@ -52,7 +53,7 @@ const listAdd = ref<ListMenu[]>([
   //   color: "blue",
   // },
   {
-    label: "ดูประวัติหน่วยงาน",
+    label: "ประวัติ",
     icon: "history",
     type: "HISTORY",
     color: "purple",
@@ -77,9 +78,9 @@ const listAdd = ref<ListMenu[]>([
   },
 ]);
 
-const nodeTEST = defineModel<any>("nodeTree", { required: true });
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const filter = ref<string>("");
-const nodes = ref<Array<any>>([]);
+const nodes = ref<Array<OrgTree>>([]);
 const lazy = ref(nodes);
 const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
@@ -87,137 +88,42 @@ const noData = ref<string>("ไม่มีข้อมูล");
 const selected = ref("");
 const orgLevel = ref<number>(0);
 
-const filterData = (node: any, filter: string) => {
-  // ให้ทาง API ค้นหาให้
-  nodes.value = [
-    {
-      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
-      organizationLevel: 0,
-      lazy: true,
-      children: [
-        {
-          organizationName: "กองบริหารทั่วไป",
-          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
-          organizationLevel: 1,
-        },
-        {
-          organizationName: "กองสรรหาบุคคล",
-          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
-          organizationLevel: 1,
-        },
-        {
-          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
-          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
-          organizationLevel: 1,
-          children: [
-            {
-              organizationName: "ฝ่ายบริหารงานทั่วไป",
-              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
-              organizationLevel: 2,
-            },
-            {
-              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
-              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
-              organizationLevel: 2,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      organizationName: "สำนักปลัดกรุงเทพมหานคร",
-      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
-      organizationLevel: 0,
-    },
-  ];
-
-  // expanded จาก id ได้
-  expanded.value = [
-    "3b86d275-8259-427c-8da7-12813fe482eb",
-    "3486d275-8259-437c-8da7-12813fe482eb",
-  ];
-
-  return node.organizationName && node.organizationName.indexOf(filter) > -1;
-};
-
 const updateSelected = (target: any) => {
   console.log("updateSelected===>", target);
 };
 
-const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
-  // console.log(details.node);
-  // details.node = nodes.value.filter((e:any) => e.orgRootId === )
-  // if (details.node.orgRootId == "00000000-0000-0000-0000-000000000000") {
-  //   details.done([
-  //     {
-  //       organizationName: "กองบริหารทั่วไป",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //     },
-  //     {
-  //       organizationName: "กองสรรหาบุคคล",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //     },
-  //     {
-  //       organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //       children: [
-  //         {
-  //           organizationName: "ฝ่ายบริหารงานทั่วไป",
-  //           organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
-  //           organizationLevel: 2,
-  //           organizationNo: "00011",
-  //           children: [
-  //             {
-  //               organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
-  //               organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
-  //               organizationLevel: 3,
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
-  //           organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
-  //           organizationLevel: 2,
-  //         },
-  //       ],
-  //     },
-  //   ]);
-  // } else if (
-  //   details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
-  // ) {
-  //   details.done([
-  //     {
-  //       organizationName: "สำนักงานการเจ้าหน้าที่",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
-  //       organizationLevel: 1,
-  //     },
-  //   ]);
-  // }
-  // }, 500);
-};
-
 const breakLoop = ref<boolean>(false);
-async function edit(selected: string) {
-  console.log("edit node tree id: " + selected);
+async function edit(id: string, type: string, data: any) {
+  const data2 = {
+    orgName: data[`org${type}Name`],
+    orgShortName: data[`org${type}ShortName`],
+    orgCode: data[`org${type}Code`],
+    orgPhoneEx: data[`org${type}PhoneEx`],
+    orgPhoneIn: data[`org${type}PhoneIn`],
+    orgFax: data[`org${type}Fax`],
+    orgLevel: data[`org${type}Rank`],
+  };
+
   breakLoop.value = false;
 
   // Usage
-  const targetNodeId = selected;
+  const targetNodeId = id;
   const replacementNode = {
-    organizationName: `ชื่อใหม่ ${selected}`,
-    organizationId: selected,
+    orgTreeName: data2.orgName,
+    orgTreeShortName: data2.orgShortName,
+    orgCode: data2.orgCode,
+    orgTreePhoneEx: data2.orgPhoneEx,
+    orgTreePhoneIn: data2.orgPhoneIn,
+    orgTreeFax: data2.orgFax,
+    orgTreeRank: data2.orgLevel,
   };
 
   for (let index = 0; index < nodes.value.length; index++) {
     const element = nodes.value[index];
-    searchAndReplace(element, targetNodeId, replacementNode);
+    if (type !== "edit") {
+      searchAndReplace(element, targetNodeId, replacementNode);
+    } else deleteNode(element, targetNodeId);
+
     console.log("index===>", index);
     console.log("breakLoop===>", breakLoop.value);
     if (breakLoop.value) break;
@@ -226,10 +132,10 @@ async function edit(selected: string) {
 
 function searchAndReplace(
   treeNode: any,
-  organizationId: any,
+  organizationId: string,
   replacementObject: any
 ) {
-  if (treeNode.organizationId === organizationId) {
+  if (treeNode.orgTreeId === organizationId) {
     Object.assign(treeNode, replacementObject);
     breakLoop.value = true;
   } else if (treeNode.children) {
@@ -239,12 +145,32 @@ function searchAndReplace(
   }
 }
 
+function deleteNode(treeNode: any, organizationId: any): boolean {
+  // console.log("tttttttttttttt", treeNode.orgTreeId, organizationId);
+
+  if (treeNode.orgTreeId === organizationId) {
+    treeNode.children = [];
+
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (let i = 0; i < treeNode.children.length; i++) {
+      const child = treeNode.children[i];
+      if (deleteNode(child, organizationId)) {
+        treeNode.children.splice(i, 1);
+        i--; // ลดค่า i เพราะที่ลบข้อมูล
+      }
+    }
+  }
+
+  return false;
+}
+
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
 const dataNode = ref<any>();
 const treeId = ref<string>("");
 
-function onClickAgency(level: number, node: any) {
+function onClickAgency(level: number, node: OrgTree | {}) {
   dialogAgency.value = !dialogAgency.value;
   orgLevel.value = level;
   dataNode.value = node;
@@ -253,12 +179,13 @@ function onClickAgency(level: number, node: any) {
 
 const dialogDetail = ref<boolean>(false);
 function onClickDetail(id: string, level: number) {
+  showLoader();
   treeId.value = id;
   dialogDetail.value = !dialogDetail.value;
   orgLevel.value = level;
 }
 
-async function onClickEdit(node: any) {
+async function onClickEdit(node: OrgTree) {
   dialogAgency.value = !dialogAgency.value;
   actionType.value = "EDIT";
   orgLevel.value = node.orgLevel;
@@ -267,12 +194,15 @@ async function onClickEdit(node: any) {
 
 async function onClickDel(type: number, id: string) {
   const level = store.checkLevel(type);
+
   dialogRemove($q, async () => {
+    // edit(id, "edit", {});
     showLoader();
     await http
       .delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
+        // edit(id, "edit", {});
       })
       .catch((err) => {
         messageError($q, err);
@@ -291,34 +221,7 @@ watch(
   }
 );
 
-onMounted(async () => {
-  // setTimeout(() => {
-  //   console.log(nodessd.value);
-  // }, 200);
-  // nodes.value = [
-  //   {
-  //     organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
-  //     organizationLevel: 0,
-  //     lazy: true,
-  //   },
-  //   {
-  //     organizationName: "สำนักปลัดกรุงเทพมหานคร",
-  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
-  //     organizationLevel: 0,
-  //     lazy: true,
-  //   },
-  //   // {
-  //   //   organizationName: "data empty",
-  //   //   lazy: true,
-  //   // },
-  //   // {
-  //   //   organizationName: "Node is not expandable",
-  //   //   expandable: false,
-  //   //   children: [{ organizationName: "Some node" }],
-  //   // },
-  // ];
-});
+onMounted(async () => {});
 </script>
 
 <template>
@@ -368,17 +271,33 @@ onMounted(async () => {
           selected-color="primary"
           :nodes="lazy"
           node-key="orgTreeId"
-          label-key="orgTreeId"
+          label-key="orgTreeName"
           :filter="filter"
           :no-results-label="notFound"
           :no-nodes-label="noData"
-          :filter-method="filterData"
           v-model:expanded="expanded"
           v-model:selected="selected"
           @update:selected="updateSelected"
         >
           <template v-slot:default-header="prop">
-            {{ prop.node.orgTreeName }}
+            <!-- {{ prop.node.orgTreeName }} -->
+
+            <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+              <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+            </div>
 
             <q-btn
               v-if="store.typeOrganizational === 'draft'"
@@ -418,12 +337,15 @@ onMounted(async () => {
                     <div v-if="prop.node.orgLevel === 0">
                       <q-item-section
                         v-if="
-                          item.type === 'ADD' ||
                           item.type === 'EDIT' ||
-                          item.type === 'DEL'
+                          item.type === 'DEL' ||
+                          item.type === 'HISTORY'
                         "
                         >{{ item.label }}หน่วยงาน</q-item-section
                       >
+                      <q-item-section v-else-if="item.type === 'ADD'"
+                        >{{ item.label }}ส่วนราชการ</q-item-section
+                      >
                       <q-item-section v-else>{{ item.label }}</q-item-section>
                     </div>
 
@@ -432,7 +354,8 @@ onMounted(async () => {
                         v-if="
                           item.type === 'ADD' ||
                           item.type === 'EDIT' ||
-                          item.type === 'DEL'
+                          item.type === 'DEL' ||
+                          item.type === 'HISTORY'
                         "
                         >{{ item.label }}ส่วนราชการ</q-item-section
                       >
@@ -442,13 +365,54 @@ onMounted(async () => {
                 </q-list>
               </q-menu>
             </q-btn>
+
+            <q-btn
+              v-else
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+            >
+              <q-menu>
+                <q-list
+                  dense
+                  v-for="(item, index) in listAdd.slice(5, 6)"
+                  :key="index"
+                  style="min-width: 100px"
+                >
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'EDIT'
+                        ? onClickEdit(prop.node)
+                        : item.type === 'ADD'
+                        ? onClickAgency(prop.node.orgLevel + 1, prop.node)
+                        : item.type === 'DETAIL'
+                        ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
+                        : item.type === 'DEL'
+                        ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
+                        : null
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon :color="item.color" :name="item.icon" />
+                    </q-item-section>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
           </template>
 
-          <template v-slot:default-body="prop">
+          <!-- <template v-slot:default-body="prop">
             <div v-if="prop.node.orgCode">
-              <span class="text-grey-13">{{ prop.node.orgCode }}</span>
+              <span class="text-grey-13"
+                >{{ prop.node.orgCode }} {{ prop.node.orgTreeShortName }}</span
+              >
             </div>
-          </template>
+          </template> -->
         </q-tree>
 
         <!-- <div class="q-pa-md q-gutter-sm">
@@ -478,6 +442,7 @@ onMounted(async () => {
     :fetchDataTree="props.fetchDataTree"
     v-model:actionType="actionType"
     :dataNode="dataNode"
+    :edit="edit"
   />
 
   <!-- รายละเอียดโครงสร้าง -->
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index f4b6d1b58..a62afe7ac 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -42,9 +42,9 @@ interface FormAgencyRef {
   orgName: object | null;
   orgShortName: object | null;
   orgCode: object | null;
-  orgPhoneEx: object | null;
-  orgPhoneIn: object | null;
-  orgFax: object | null;
+  // orgPhoneEx: object | null;
+  // orgPhoneIn: object | null;
+  // orgFax: object | null;
   orgLevel: object | null;
   [key: string]: any;
 }
diff --git a/src/modules/02_organizationalNew/interface/response/organizational.ts b/src/modules/02_organizationalNew/interface/response/organizational.ts
index d060a136b..072d854e3 100644
--- a/src/modules/02_organizationalNew/interface/response/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/response/organizational.ts
@@ -5,4 +5,30 @@ interface DataActive {
   draftName: string;
 }
 
-export type { DataActive };
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  children: OrgTree[];
+}
+
+interface OrgRevision {
+  orgRevisionCreatedAt: string | null;
+  orgRevisionId: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionName: string;
+}
+
+export type { DataActive, OrgTree, OrgRevision };
diff --git a/src/modules/02_organizationalNew/store/organizational.ts b/src/modules/02_organizationalNew/store/organizational.ts
index 4ebe88ac1..57f4b7eb2 100644
--- a/src/modules/02_organizationalNew/store/organizational.ts
+++ b/src/modules/02_organizationalNew/store/organizational.ts
@@ -32,6 +32,21 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     }
   }
 
+  function convertType(type: string) {
+    switch (type) {
+      case "DEPARTMENT":
+        return "ระดับสำนัก";
+      case "OFFICE":
+        return "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง";
+      case "DIVISION":
+        return "ระดับส่วน/กลุ่มภารกิจ";
+      case "SECTION":
+        return "ระดับฝ่าย/กลุ่มงาน";
+      default:
+        return "-";
+    }
+  }
+
   return {
     typeOrganizational,
     statusView,
@@ -39,6 +54,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     //
     fetchDataActive,
     checkLevel,
+    convertType,
     draftId,
     activeId,
   };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 695f0774a..3c512a7ad 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -6,6 +6,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { OrgRevision } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import ListView from "@/modules/02_organizationalNew/components/listView.vue";
@@ -13,7 +14,6 @@ import StructureView from "@/modules/02_organizationalNew/components/structureVi
 import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
 import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
-import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -23,7 +23,6 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const modalNewStructure = ref<boolean>(false);
-const modalStructureDetail = ref<boolean>(false);
 const modalPositionDetail = ref<boolean>(false);
 
 const stroe = useOrganizational();
@@ -82,6 +81,32 @@ async function fetchOrganizationActive() {
     });
 }
 
+const itemHistory = ref<DataOption[]>([]);
+const historyId = ref<string>("");
+async function fetchHistory() {
+  // showLoader();
+  await http
+    .get(config.API.organizationHistoryNew)
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result;
+      const filterData = data.filter(
+        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
+      );
+
+      itemHistory.value = filterData.map((e: OrgRevision) => ({
+        id: e.orgRevisionId,
+        name: e.orgRevisionName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const typeStructure = ref<string>("");
 function ocClickAddStructure(type: string) {
   modalNewStructure.value = !modalNewStructure.value;
@@ -94,12 +119,18 @@ function onClickDateTime() {
 }
 
 const modalHistory = ref<boolean>(false);
-function onClickHistory() {
-  modalHistory.value = !modalHistory.value;
+const count = ref<number>(0);
+const labelHistory = ref<string>("ประวัติโครงสร้าง");
+function onClickHistory(id: string, name: string) {
+  historyId.value = id;
+  labelHistory.value = name;
+  count.value++;
+  // modalHistory.value = !modalHistory.value;
 }
 
 onMounted(async () => {
   await fetchOrganizationActive();
+  await fetchHistory();
 });
 </script>
 <template>
@@ -164,19 +195,46 @@ onMounted(async () => {
                 :outline="stroe.typeOrganizational === 'current' ? false : true"
                 color="blue"
                 label="ปัจจุบัน"
-                @click="stroe.typeOrganizational = 'current'"
+                @click="
+                  (stroe.typeOrganizational = 'current'),
+                    (labelHistory = 'ประวัติโครงสร้าง')
+                "
                 :disable="ishasActive"
               />
               <q-btn
                 :outline="stroe.typeOrganizational === 'draft' ? false : true"
                 color="blue"
                 label="แบบร่าง"
-                @click="stroe.typeOrganizational = 'draft'"
+                @click="
+                  (stroe.typeOrganizational = 'draft'),
+                    (labelHistory = 'ประวัติโครงสร้าง')
+                "
                 :disable="ishasDraft"
               />
+              <q-btn-dropdown
+                color="blue"
+                :label="labelHistory"
+                @click="stroe.typeOrganizational = 'old'"
+                :outline="stroe.typeOrganizational === 'old' ? false : true"
+              >
+                <q-list>
+                  <q-item
+                    dense
+                    clickable
+                    v-close-popup
+                    v-for="(item, index) in itemHistory"
+                    :key="index"
+                    @click="onClickHistory(item.id, item.name)"
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ item.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown color="green" label="ปรับโครงสร้าง">
+            <q-btn-dropdown color="green" label="ประวัติโครงสร้าง">
               <q-list>
                 <q-item
                   dense
@@ -193,15 +251,9 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
-            <q-btn
-              flat
-              round
-              color="primary"
-              icon="history"
-              @click="onClickHistory"
-            >
+            <!-- <q-btn flat round color="primary" icon="history">
               <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
-            </q-btn>
+            </q-btn> -->
             <q-space />
             <q-btn
               flat
@@ -221,7 +273,11 @@ onMounted(async () => {
         </q-card-section>
         <q-separator />
         <q-card-section style="padding: 0px">
-          <ListView v-if="stroe.statusView === 'list'" />
+          <ListView
+            v-if="stroe.statusView === 'list'"
+            v-model:historyId="historyId"
+            v-model:count="count"
+          />
           <StructureView v-if="stroe.statusView === 'tree'" />
         </q-card-section>
       </q-card>
@@ -243,7 +299,7 @@ onMounted(async () => {
   <DialogHistory :modal="modalHistory" :close="onClickHistory" />
 
   <!-- รายละเอียดโครงสร้าง -->
-  <DialogStructureDetail v-model:structure-detail="modalStructureDetail" />
+  <!-- <DialogStructureDetail v-model:structure-detail="modalStructureDetail" /> -->
 
   <!-- รายละเอียดตำแหน่ง -->
   <DialogPositionDetail v-model:position-detail="modalPositionDetail" />
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index ff9bb2811..6da94eb80 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -988,8 +988,8 @@ profileData.salary.columns.length == 0
       "positionType",
       "positionLevel",
       "positionExecutive",
-      "positionExecutiveSide",
-      "salaryClass",
+      // "positionExecutiveSide",
+      // "salaryClass",
       "salaryRef",
       "refCommandNo",
     ])
@@ -1127,28 +1127,28 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "positionExecutiveSide",
-    align: "left",
-    label: "ด้านทางการบริหาร",
-    sortable: true,
-    field: "positionExecutiveSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  // {
+  //   name: "positionExecutiveSide",
+  //   align: "left",
+  //   label: "ด้านทางการบริหาร",
+  //   sortable: true,
+  //   field: "positionExecutiveSide",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
+  // {
+  //   name: "salaryClass",
+  //   align: "left",
+  //   label: "ตำแหน่ง (รายละเอียด)",
+  //   sortable: true,
+  //   field: "salaryClass",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
   {
     name: "salaryRef",
     align: "left",