diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index b0c28c673..d4af7e15d 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -29,6 +29,7 @@ export default {
   orgPosMove: `${orgPos}/move`,
   organizationShortName: `${organization}/sort`,
   organizationPublishGet: `${organization}/get/publish`,
+  orgPosDNA: `${orgPos}/dna`, //สืบทอดตำแหน่ง
 
   orgPosExecutiveById: (id: string) => `${orgPos}/executive/${id}`,
   orgPosHistory: (id: string) => `${orgPos}/history/${id}`,
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 08dbc21eb..301a281c7 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -736,17 +736,6 @@ async function emitSearch(keyword: string, typeSelect: string) {
                     }}</q-tooltip></q-btn
                   >
                   <q-space />
-
-                  <!-- succession -->
-                  <q-btn
-                    dense
-                    outline
-                    keep-color
-                    label="สืบทอดตำแหน่ง"
-                    color="primary"
-                  >
-                    <q-tooltip>เลือกสืบทอดตำแหน่ง</q-tooltip>
-                  </q-btn>
                 </q-card-actions>
               </q-card>
             </div>
diff --git a/src/modules/02_organizationalNew/components/DialogInherit.vue b/src/modules/02_organizationalNew/components/DialogInherit.vue
new file mode 100644
index 000000000..1caa06bd4
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogInherit.vue
@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import type {
+  FilterMaster,
+  Inherit,
+} from "@/modules/02_organizationalNew/interface/request/organizational";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+/** use*/
+const $q = useQuasar();
+const store = useOrganizational();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: { type: String, default: "" },
+});
+
+/*************************** Tree ***********************************/
+const filterTree = ref<string>("");
+const nodeTree = ref<OrgTree[]>([]);
+const selectedTree = ref<string>("");
+const filterRef = ref();
+const levelTree = ref<number>(0);
+
+/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
+async function fetchTree() {
+  showLoader();
+  const id: string = store.activeId ? store.activeId?.toString() : "";
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      console.log(res);
+      nodeTree.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** resetFilterTree*/
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/** function เลือกหน่วยงาน*/
+async function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = await data.orgTreeId;
+  reqMaster.type = await data.orgLevel;
+  await fetchTable();
+}
+
+/*************************** TABLE ***********************************/
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<PosMaster[]>([]);
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalRow = ref<number>(0);
+const selectedPos = ref<PosMaster[]>([]);
+
+/** function เรียกข้อมูล Table Position*/
+async function fetchTable() {
+  selectedPos.value = [];
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      const data = res.data.result.data;
+      const list = data.map((e: PosMaster) => ({
+        ...e,
+        posMasterNo:
+          e.orgShortname +
+          e.posMasterNoPrefix +
+          e.posMasterNo +
+          e.posMasterNoSuffix,
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.pageSize = newPagination.rowsPerPage;
+  reqMaster.page = 1;
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  fetchTable();
+}
+
+/** function ยืนยันกาสืบทอดตำแหน่ง */
+function onClickConfirm() {
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log(props.rowId, selectedPos.value[0].id);
+        const body: Inherit = {
+          currentId: props.rowId,
+          nextId: selectedPos.value[0].id,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosDNA, body)
+          .then(() => {
+            success($q, "การสืบทอดตำแหน่งสำเร็จ");
+            modal.value = false;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการสืบทอดตำแหน่ง",
+      "ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    modal.value ? await fetchTree() : clearForm();
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
+  await fetchTable();
+});
+
+/** function clear ข้อมูล*/
+function clearForm() {
+  nodeTree.value = [];
+  rows.value = [];
+  selectedTree.value = "";
+  reqMaster.id = "";
+  reqMaster.type = 0;
+  reqMaster.isAll = false;
+  reqMaster.page = 1;
+  reqMaster.pageSize = 10;
+  reqMaster.keyword = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header
+        :tittle="'สืบทอดตำแหน่ง'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-md">
+        <div class="row q-col-gutter-md">
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="max-height: 70vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="orgTreeName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <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>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการสืบทอด</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="reqMaster.keyword"
+                  label="ค้นหา"
+                  @keyup.enter="filterKeyword"
+                />
+              </div>
+            </q-toolbar>
+
+            <d-table
+              flat
+              bordered
+              :rows="rows"
+              :columns="columns"
+              row-key="id"
+              no-data-label="ไม่มีข้อมูล"
+              ref="table"
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePagination"
+              class="tableTb"
+              selection="single"
+              v-model:selected="selectedPos"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th auto-width></q-th>
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="reqMaster.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="totalRow"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </d-table>
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/02_organizationalNew/components/DialogMovePos.vue b/src/modules/02_organizationalNew/components/DialogMovePos.vue
index d09b60813..4fb410553 100644
--- a/src/modules/02_organizationalNew/components/DialogMovePos.vue
+++ b/src/modules/02_organizationalNew/components/DialogMovePos.vue
@@ -9,7 +9,10 @@ import type {
   OrgTree,
   PosMaster2,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
-import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational";
+import type {
+  MovePos,
+  FilterMaster,
+} from "@/modules/02_organizationalNew/interface/request/organizational";
 import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
@@ -29,6 +32,8 @@ const {
 } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
 const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
 const columns = defineModel<QTableProps[]>("columns", {});
 const rows = defineModel<PosMaster2[]>("rows", { required: true });
@@ -111,9 +116,60 @@ function onClickMovePos() {
   }
 }
 
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number, action: boolean) {
+  // orgLevel.value = level;
+  // reqMaster.id = id;
+  // reqMaster.type = level;
+  // action1.value = action;
+  // if (action) {
+  //   setTimeout(() => {
+  //     action1.value = false;
+  //   }, 1000);
+  //   reqMaster.isAll = false;
+  //   reqMaster.page = 1;
+  //   reqMaster.pageSize = 10;
+  //   reqMaster.keyword = "";
+  // }
+  // if (action === true) {
+  //   isLoad.value = true;
+  // }
+  // await http
+  //   .post(config.API.orgPosMasterList, reqMaster)
+  //   .then((res) => {
+  //     posMaster.value = [];
+  //     const dataMain: PosMaster[] = [];
+  //     totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+  //     res.data.result.data.forEach((e: PosMaster) => {
+  //       const p = e.positions;
+  //       if (p.length !== 0) {
+  //         const a = p.find((el: Position) => el.positionIsSelected === true);
+  //         const { id, ...rest } = a ? a : p[0];
+  //         const test = { ...e, ...rest };
+  //         dataMain.push(test);
+  //       }
+  //     });
+  //     posMaster.value = store.fetchPosMaster(dataMain);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //     posMaster.value = [];
+  //   })
+  //   .finally(() => {
+  //     setTimeout(() => {
+  //       isLoad.value = false;
+  //     }, 500);
+  //   });
+}
+
 watch(
   () => modal.value,
   () => {
+    reqMaster.value.page = 1;
     if (modal.value && props.type === "SINGER") {
       const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
       selectedFilter.value = data;
@@ -181,7 +237,11 @@ watch(
                     :props="props"
                   >
                     <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
+                      {{
+                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                        props.rowIndex +
+                        1
+                      }}
                     </div>
 
                     <div v-else>
@@ -190,6 +250,17 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="reqMaster.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="totalPage"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
             </d-table>
           </q-card>
 
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 1c551d81f..2ff6a8217 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -159,11 +159,20 @@ watch(
 );
 
 /** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
 watch(
-  [() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
+  () => reqMaster.isAll,
   () => {
-    action1.value === false &&
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
       fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
   }
 );
 </script>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index a07497da4..4df6c0097 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -22,6 +22,8 @@ import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosi
 import DialogMovePos from "@/modules/02_organizationalNew/components/DialogMovePos.vue";
 import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHistoryPos.vue";
 import DialogSelectPerson from "@/modules/02_organizationalNew/components/DialogSelectPerson.vue";
+import DialogInherit from "@/modules/02_organizationalNew/components/DialogInherit.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
@@ -78,6 +80,12 @@ const listMenu = ref<ListMenu[]>([
     type: "MOVE",
     color: "positive",
   },
+  {
+    label: "สืบทอดตำแหน่ง",
+    icon: "mdi-account-multiple-outline",
+    type: "INHERIT",
+    color: "deep-orange",
+  },
   {
     label: "ประวัติตำแหน่ง",
     icon: "history",
@@ -356,6 +364,12 @@ function removePerson(id: string) {
   );
 }
 
+const modalDialogInherit = ref<boolean>(false);
+function onClickInherit(id: string) {
+  modalDialogInherit.value = !modalDialogInherit.value;
+  rowId.value = id;
+}
+
 /** ดึงข้อมูลสถิติจำนวนด้านบน*/
 function getSummary() {
   showLoader();
@@ -655,6 +669,8 @@ async function genReportDoc(data: any) {
                         ? onClickMovePos(props.row.id, 'SINGER')
                         : item.type === 'HISTORY'
                         ? onClickHistoryPos(props.row.id)
+                        : item.type === 'INHERIT'
+                        ? onClickInherit(props.row.id)
                         : null
                     "
                   >
@@ -790,6 +806,8 @@ async function genReportDoc(data: any) {
     v-model:nodeTree="nodeTree"
     v-model:columns="columns as QTableProps[]"
     v-model:rows="posMaster"
+    v-model:totalPage="totalPage"
+    v-model:reqMaster="reqMaster"
     :fetchDataTree="props.fetchDataTree"
     :type="typeMove"
     :rowId="rowId"
@@ -798,12 +816,16 @@ async function genReportDoc(data: any) {
   <!-- ประวัติตำแหน่ง -->
   <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
 
+  <!-- เลือกคนครอง -->
   <DialogSelectPerson
     v-model:modal="modalSelectPerson"
     :dataDetailPos="dataDetailPos"
     :fetchDataTable="props.fetchDataTable"
     :getSummary="getSummary"
   />
+
+  <!-- สืบทอดตำแหน่ง -->
+  <DialogInherit v-model:modal="modalDialogInherit" :rowId="rowId" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/02_organizationalNew/interface/request/organizational.ts b/src/modules/02_organizationalNew/interface/request/organizational.ts
index 986608635..faa4c9f1a 100644
--- a/src/modules/02_organizationalNew/interface/request/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/request/organizational.ts
@@ -12,4 +12,9 @@ interface MovePos {
   positionMaster: string[];
 }
 
-export type { FilterMaster, MovePos };
+interface Inherit {
+  currentId: string;
+  nextId: string;
+}
+
+export type { FilterMaster, MovePos, Inherit };