diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 895ef2019..0ef73073e 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -9,6 +9,8 @@ export default {
   logRecord: () => `${leave}/log-record`,
   timeRecord: () => `${leave}/time-record`,
   recordById: (id: string, type: string) => `${leave}/${type}/${id}`,
+  leaveEditCheckin: (id: string) => `${leave}/admin/edit/checkin/${id}`,
+
   /** เปลี่ยนแปลงลงเวลา*/
   leaveSearch: () => `${leave}/search`,
   leaveRound: () => `${leave}/round`,
diff --git a/src/components/Dialogs/PopupPersonal.vue b/src/components/Dialogs/PopupPersonal.vue
index 3877d1a69..adeac2d1a 100644
--- a/src/components/Dialogs/PopupPersonal.vue
+++ b/src/components/Dialogs/PopupPersonal.vue
@@ -177,12 +177,28 @@ watch(modal, (newValue) => {
   }
 });
 </script>
+
 <template>
-  <q-dialog v-model="modal" position="right">
-    <q-card style="width: 420px">
-      <q-card-section>
-        <div class="text-h6 text-center">รายละเอียดแบบย่อย</div>
-      </q-card-section>
+  <q-dialog v-model="modal" position="right" :maximized="true">
+    <q-card style="width: 420px; overflow: visible;">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-bold"
+          >ทะเบียนประวัติ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="emit('update:modal', false)"
+          style="color: red; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <!-- <q-card-section>
+        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
+        <q-space />
+
+      </q-card-section> -->
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
@@ -204,12 +220,15 @@ watch(modal, (newValue) => {
               </q-avatar>
             </div>
             <div
-              class="q-mt-md text-weight-bolder text-center"
+              class="q-mt-md text-subtitle2 text-bold"
               style="font-size: 18px"
             >
               {{ avatar.fullname }}
             </div>
-            <div class="q-mb-xs text-center text-grey">
+            <div
+              v-if="avatar.position != '-'"
+              class="q-mb-xs text-center text-grey"
+            >
               {{ avatar.position }}
             </div>
             <div class="q-mt-md">
@@ -224,7 +243,7 @@ watch(modal, (newValue) => {
             </div>
           </q-card>
 
-          <q-scroll-area style="height: 500px; max-width: 100%">
+          <q-scroll-area style="height: 65vh; max-width: 100%">
             <div class="q-gutter-md q-pa-sm">
               <q-card bordered style="border: 1px solid #d6dee1">
                 <div class="q-pa-md">
diff --git a/src/modules/02_organizational/router.ts b/src/modules/02_organizational/router.ts
index cec042ef6..add08831a 100644
--- a/src/modules/02_organizational/router.ts
+++ b/src/modules/02_organizational/router.ts
@@ -21,6 +21,9 @@ const ManageReport2Add = () =>
 const ManageReport2History = () =>
   import("@/modules/02_organizational/views/ManageReport2History.vue");
 
+const TreeTestPage = () =>
+  import("@/modules/02_organizational/views/TreeTest.vue");
+
 export default [
   {
     path: "/organizational/mapping",
@@ -122,4 +125,14 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/tree-test",
+    name: "treeTest",
+    component: TreeTestPage,
+    meta: {
+      Auth: true,
+      Key: [14],
+      Role: "organization",
+    },
+  },
 ];
diff --git a/src/modules/02_organizational/views/TreeTest.vue b/src/modules/02_organizational/views/TreeTest.vue
new file mode 100644
index 000000000..58e446b5f
--- /dev/null
+++ b/src/modules/02_organizational/views/TreeTest.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-sm-4 q-gutter-sm">
+      <q-input ref="filterRef" filled v-model="filter" label="Filter">
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+
+      <!-- <div class="row col-12">expanded = {{ expanded }}</div> -->
+      <!-- 
+      @after-show="afterShow"
+      @after-hide="afterHide" -->
+      <q-tree
+        dense
+        default-expand-all
+        selected-color="blue-6"
+        :nodes="lazy"
+        node-key="organizationId"
+        label-key="organizationName"
+        :filter="filter"
+        :no-results-label="notFound"
+        :no-nodes-label="noData"
+        :filter-method="filterData"
+        v-model:expanded="expanded"
+        v-model:selected="selected"
+        @update:selected="updateSelected"
+        @lazy-load="onLazyLoad"
+      >
+        <template v-slot:default-header="prop">
+          {{ prop.node.organizationName }}
+
+          <q-btn flat icon="mdi-dots-vertical" class="q-pa-none q-ml-xs">
+            <q-menu anchor="top right">
+              <q-list style="min-width: 80px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="edit(prop.node.organizationId)"
+                >
+                  <q-item-section> แก้ไข </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item clickable v-close-popup>
+                  <q-item-section>ลบ</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </template>
+      </q-tree>
+    </div>
+
+    <div class="col-12 col-sm-8 q-pt-none q-pl-sm">
+      <q-card>
+        <q-card-section>
+          <q-table
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            row-key="name"
+            class="custom-header-table"
+            no-data-label="ไม่มีข้อมูล"
+          />
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { QTableColumn } from "quasar";
+import { onMounted, ref } from "vue";
+
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+
+const nodes = ref<Array<any>>([]);
+const lazy = ref(nodes);
+
+const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
+  // call fail() if any error occurs
+
+  // setTimeout(() => {
+  // simulate loading and setting an empty node
+  // if (details.key.indexOf("data empty") > -1) {
+  //   details.done([]);
+  //   return;
+  // }
+
+  if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
+    details.done([
+      {
+        organizationName: "กองบริหารทั่วไป",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "กองสรรหาบุคคล",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
+        organizationLevel: 1,
+        children: [
+          {
+            organizationName: "ฝ่ายบริหารงานทั่วไป",
+            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
+            organizationLevel: 2,
+            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 selected = ref("");
+const updateSelected = (target: any) => {
+  console.log("updateSelected===>", target);
+};
+
+// const afterShow = () => {
+//   console.log("afterShow");
+// };
+
+// const afterHide = () => {
+//   console.log("@after-hide");
+// };
+
+/** filter */
+const filter = ref<string>("");
+const filterRef = ref();
+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;
+};
+
+function resetFilter() {
+  filter.value = "";
+  filterRef.value.focus();
+}
+
+const breakLoop = ref<boolean>(false);
+async function edit(selected: string) {
+  console.log("edit node tree id: " + selected);
+  breakLoop.value = false;
+
+  // Usage
+  const targetNodeId = selected;
+  const replacementNode = {
+    organizationName: `ชื่อใหม่ ${selected}`,
+    organizationId: selected,
+  };
+
+  for (let index = 0; index < nodes.value.length; index++) {
+    const element = nodes.value[index];
+    searchAndReplace(element, targetNodeId, replacementNode);
+    console.log("index===>", index);
+    console.log("breakLoop===>", breakLoop.value);
+    if (breakLoop.value) break;
+  }
+}
+
+function searchAndReplace(
+  treeNode: any,
+  organizationId: any,
+  replacementObject: any
+) {
+  if (treeNode.organizationId === organizationId) {
+    Object.assign(treeNode, replacementObject);
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId, replacementObject);
+    }
+  }
+}
+
+const columns = ref<QTableColumn[]>([
+  {
+    name: "no",
+    required: true,
+    label: "ลำดับ",
+    align: "left",
+    field: "no",
+    // field: (row) => row.no,
+    sortable: false,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "positionNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    field: "positionNo",
+    sortable: true,
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    field: "positionLine",
+    sortable: true,
+  },
+]);
+
+const rows = [
+  {
+    no: 1,
+    position: "ผู้อำนวยการ",
+    positionNo: "กบห01",
+    positionLine: "ประเภทอำนวยการ",
+  },
+  {
+    no: 2,
+    position: "นักจัดการงานทั่วไป",
+    positionNo: "กบห01",
+    positionLine: "ประเภทวิชาการ",
+  },
+  {
+    no: 3,
+    position: "นักวิชาการเงินและบัญชี",
+    positionNo: "กบห02",
+    positionLine: "ประเภทวิชาการ",
+  },
+];
+
+onMounted(async () => {
+  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" }],
+    // },
+  ];
+});
+</script>
+
+<style lang="scss" scope>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/09_leave/components/1_Work/DialogEdit.vue b/src/modules/09_leave/components/1_Work/DialogEdit.vue
index 86351b1cb..8e74947e9 100644
--- a/src/modules/09_leave/components/1_Work/DialogEdit.vue
+++ b/src/modules/09_leave/components/1_Work/DialogEdit.vue
@@ -12,7 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, success } = mixin;
+const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
 
 const props = defineProps({
   modal: {
@@ -27,6 +27,10 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
 });
 
 const morningStatus = ref<string>("");
@@ -48,15 +52,26 @@ async function onClickSave() {
   afternoonStatusRef.value?.validate();
   if (!morningStatusRef.value.hasError && !afternoonStatusRef.value.hasError) {
     const body = {
-      morningStatus: morningStatus.value,
-      afternoonStatus: afternoonStatus.value,
+      checkInStatus: morningStatus.value,
+      checkOutStatus: afternoonStatus.value,
       reason: reason.value,
     };
-    dialogConfirm($q, async () => {
-      console.log(body);
 
-      success($q, "บันทึกข้อมูสำเร็จ");
-      props.close?.();
+    dialogConfirm($q, async () => {
+      showLoader();
+      await http
+        .put(config.API.leaveEditCheckin(props.detail?.id), body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+          props.fetchData?.();
+          props.close?.();
+        });
     });
   }
 }
@@ -81,7 +96,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="props.modal">
-    <q-card class="column" style="width: 300px">
+    <q-card class="column" style="width: 320px">
       <HeaderDialog :tittle="'แก้ไขสถานะการเข้า-ออกงาน'" :close="props.close" />
 
       <q-separator />
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index ec4859380..0629258b9 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -206,6 +206,7 @@ onMounted(async () => {
     :maxPage="maxPage"
     @update:pagination="updatePaging"
     :tab="'time-record'"
+    :fetchData="fetchListTimeRecord"
   />
 </template>
 
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index 9c52c2e43..e286ee364 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -39,6 +39,10 @@ const props = defineProps({
     type: String,
     require: true,
   },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -203,6 +207,11 @@ onMounted(() => {
     :close="closeDetail"
   />
 
-  <DialogEdit :modal="modalEdit" :detail="dataDetail" :close="onClickEdit" />
+  <DialogEdit
+    :modal="modalEdit"
+    :detail="dataDetail"
+    :close="onClickEdit"
+    :fetchData="props.fetchData"
+  />
 </template>
 <style scoped></style>
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 8a4a7b2a3..ed6d7b1b2 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -73,7 +73,7 @@ function save() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
-      .post(config.API.leaveWorkByid(detailByid.value.profileId), {
+      .put(config.API.leaveWorkByid(detailByid.value.profileId), {
         work: dateWork.value,
       })
       .then(() => {