diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 6fc2d10a2..e290a261b 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -38,6 +38,7 @@ export default {
   leaveReportReject: (id: string) => `${leave}/report/reject/${id}`,
   leaveDeleteApprove: (id: string) => `${leave}/admin/delete/approve/${id}`,
   leaveDeleteReject: (id: string) => `${leave}/admin/delete/reject/${id}`,
+  leaveBeginning: `${leave}-beginning`,
 
   /**รายงาน */
   leaveReportTimeRecords: (type: string) =>
diff --git a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
new file mode 100644
index 000000000..c71aee677
--- /dev/null
+++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
+
+import type { QTableColumn } from "quasar";
+import type {
+  DataOption,
+  DataPagination,
+} from "@/modules/09_leave/interface/index/Main";
+import type {
+  DataLeaveType,
+  DataLeaveBeginning,
+} from "@/modules/09_leave/interface/response/leaveHistory";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** useStore*/
+const $q = useQuasar();
+const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
+const { dialogConfirm, showLoader, success, messageError, hideLoader } =
+  useCounterMixin();
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const rowData = defineModel<DataLeaveBeginning>("rowData", {
+  default: {} as DataLeaveBeginning,
+});
+
+const props = defineProps({
+  fetchDataLeaveBeginning: { type: Function, required: true },
+});
+
+const formFilter = reactive({
+  citizenId: "",
+  type: "citizenId",
+  keyword: "",
+  page: 1,
+  pageSize: 10,
+});
+const searchTypeOption = ref<DataOption[]>([
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "firstName", name: "ชื่อ" },
+  { id: "lastName", name: "นามสกุล" },
+]);
+const rows = ref<DataLeaveBeginning[]>([]);
+const selected = ref<DataLeaveBeginning[]>([]);
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: " เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const leaveTypeCode = ref<string>("");
+const profileId = ref<string>("");
+const rowId = ref<string>("");
+const formData = reactive({
+  leaveTypeId: "",
+  leaveYear: new Date().getFullYear(),
+  leaveDays: "",
+  leaveDaysUsed: "",
+});
+const leaveTypeOptions = ref<DataLeaveType[]>([]);
+const leaveTypeOptionsMain = ref<DataLeaveType[]>([]);
+
+/** ฟังก์ชันบันทึกข้อมูล*/
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const pathAPI = !isStatusEdit.value
+      ? config.API.leaveBeginning
+      : `${config.API.leaveBeginning}/${rowId.value}`;
+    const method = !isStatusEdit.value ? "post" : "put";
+    await http[method](pathAPI, {
+      profileId: !isStatusEdit.value
+        ? selected.value[0].profileId
+        : profileId.value,
+      leaveTypeId: formData.leaveTypeId,
+      leaveYear: formData.leaveYear,
+      leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
+      leaveDaysUsed: formData.leaveDaysUsed
+        ? Number(formData.leaveDaysUsed)
+        : 0,
+    })
+
+      .then(async () => {
+        await props?.fetchDataLeaveBeginning();
+        onClose();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ฟังก์ชันเรียกรายชื่อคน*/
+async function fetchDataPerson() {
+  await http
+    .post(config.API.leaveSearch(), {
+      citizenId:
+        formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
+      firstname:
+        formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
+      lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
+      page: formFilter.page, //หน้า
+      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+async function defineDataLeaveBeginning(data: DataLeaveBeginning) {
+  profileId.value = data.profileId;
+  rowId.value = data.id;
+  formData.leaveTypeId = data.leaveTypeId;
+  formData.leaveYear = data.leaveYear;
+  formData.leaveDays = data.leaveDays ? data.leaveDays.toString() : "";
+  formData.leaveDaysUsed = data.leaveDaysUsed
+    ? data.leaveDaysUsed.toString()
+    : "";
+}
+
+/**
+ * ฟังก์ชันค้นหารายชื่อคน
+ * @param newSearch สถานะการค้นข้อมูล true ค้นหาหน้าแรก false ค้นหาหน้าต่อไป
+ */
+async function onSearchData(newSearch: boolean) {
+  try {
+    showLoader();
+    if (newSearch) {
+      formFilter.page = 1;
+    }
+    await fetchDataPerson();
+  } finally {
+    hideLoader();
+  }
+}
+
+/**
+ * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: DataPagination) {
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** ฟังก์ชันปิด Dialog*/
+function onClose() {
+  modal.value = false;
+  formFilter.citizenId = "";
+  formFilter.type = "citizenId";
+  formFilter.keyword = "";
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formData.leaveTypeId = "";
+  formData.leaveYear = new Date().getFullYear();
+  formData.leaveDays = "";
+  formData.leaveDaysUsed = "";
+  rows.value = [];
+  selected.value = [];
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    leaveTypeOptions.value = leaveTypeOptionsMain.value.filter(
+      (e: DataLeaveType) => e.name.search(val) !== -1
+    );
+  });
+}
+
+/** ฟังก์ชันกำหนดประเภทการลา*/
+function filterLeaveTypeData() {
+  //ตัดรายการทั้งหมดออก
+  const typeOptions = leaveTypeData.value.filter(
+    (e: DataLeaveType) => e.id !== "00000000-0000-0000-0000-000000000000"
+  );
+  leaveTypeOptionsMain.value = typeOptions;
+  leaveTypeOptions.value = typeOptions;
+}
+
+/**
+ * ฟังก์ชันค้นหา Code ประเภทการลา
+ * @param id ประเภทการลา
+ */
+function filterCodeLeaveTypeData(id: string) {
+  //หา Code ประเภทการลา
+  const code = leaveTypeData.value.find(
+    (e: DataLeaveType) => e.id === id
+  )?.code;
+  leaveTypeCode.value = code ?? "";
+  formData.leaveDays = code !== "LV-005" ? "0" : "";
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    modal.value && onSearchData(true);
+  }
+);
+
+watch(modal, async (val) => {
+  if (val) {
+    try {
+      showLoader();
+      await Promise.all([
+        filterLeaveTypeData(),
+        isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
+      ]);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      hideLoader();
+    }
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card :style="!isStatusEdit ? 'min-width: 80vw' : 'min-width: 30vw'">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="!isStatusEdit ? 'บันทึกวันลาย้อนหลัง' : 'แก้ไขวันลาย้อนหลัง'"
+          :close="onClose"
+        />
+        <q-separator />
+
+        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
+          <div class="row col-12 q-gutter-sm">
+            <!-- รายชื่อ -->
+            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-6 col-md-3">
+                  <q-select
+                    label="ค้นหาจาก"
+                    v-model="formFilter.type"
+                    :options="searchTypeOption"
+                    outlined
+                    emit-value
+                    dense
+                    emit-option
+                    option-label="name"
+                    option-value="id"
+                    map-options
+                  />
+                </div>
+                <div class="col-12 col-sm-6 col-md-9">
+                  <q-input
+                    v-model="formFilter.keyword"
+                    outlined
+                    hide-bottom-space
+                    dense
+                    label="คำค้น"
+                  >
+                    <template v-slot:after>
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-py-sm q-px-md"
+                        outline
+                        @click.prevent="onSearchData(true)"
+                      >
+                      </q-btn>
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+
+              <div class="col-12 q-pt-sm">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="profileId"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  selection="single"
+                  v-model:selected="selected"
+                  @update:pagination="updatePagination"
+                >
+                  <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>
+                          {{ col.value ? col.value : "-" }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+
+                  <template v-slot:pagination="scope">
+                    ทั้งหมด {{ total.toLocaleString() }} รายการ
+                    <q-pagination
+                      v-model="formFilter.page"
+                      active-color="primary"
+                      color="dark"
+                      :max="Number(maxPage)"
+                      size="sm"
+                      boundary-links
+                      direction-links
+                      :max-pages="5"
+                      @update:model-value="onSearchData(false)"
+                    ></q-pagination>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+
+            <q-separator vertical />
+
+            <!-- input -->
+            <div class="q-pa-md col">
+              <!-- <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md" >
+                  ข้อมูลวันลาย้อนหลัง
+                </div>
+                <div class="col-12"><q-separator /></div> -->
+
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.leaveYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:model-value="onSearchData"
+                    readonly
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        readonly
+                        dense
+                        outlined
+                        :model-value="Number(formData.leaveYear) + 543"
+                        bg-color="white"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-12">
+                  <q-select
+                    :class="classInput(true)"
+                    emit-value
+                    map-options
+                    outlined
+                    dense
+                    option-value="id"
+                    option-label="name"
+                    label="ประเภทการลา"
+                    use-input
+                    v-model="formData.leaveTypeId"
+                    hide-selected
+                    fill-input
+                    hide-bottom-space
+                    @update:model-value="filterCodeLeaveTypeData"
+                    :options="leaveTypeOptions"
+                    @filter="(inputValue:string,
+                            doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`,]"
+                    lazy-rules
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(leaveTypeCode == 'LV-005')"
+                    :readonly="leaveTypeCode !== 'LV-005'"
+                    v-model="formData.leaveDays"
+                    dense
+                    outlined
+                    label="วันลาที่ยกมา"
+                    hide-bottom-space
+                    mask="##"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(true)"
+                    v-model="formData.leaveDaysUsed"
+                    dense
+                    outlined
+                    label="วันลาที่ใช้ไป"
+                    hide-bottom-space
+                    mask="##"
+                  />
+                </div>
+              </div>
+              <!-- </q-card> -->
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            :disable="!isStatusEdit && selected.length === 0"
+            label="บันทึก"
+            color="secondary"
+            type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index 0f0a59dd5..ff9221e9f 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -11,4 +11,11 @@ interface DataDateMonthObject {
   month: number;
   year: number;
 }
-export type { DataOption, DataOption2, DataDateMonthObject };
+
+interface DataPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+export type { DataOption, DataOption2, DataDateMonthObject, DataPagination };
diff --git a/src/modules/09_leave/interface/response/leaveHistory.ts b/src/modules/09_leave/interface/response/leaveHistory.ts
new file mode 100644
index 000000000..502cae1ea
--- /dev/null
+++ b/src/modules/09_leave/interface/response/leaveHistory.ts
@@ -0,0 +1,32 @@
+interface DataLeaveType {
+  code?: string;
+  createdAt?: string;
+  createdFullName?: string;
+  createdUserId?: string;
+  id: string;
+  lastUpdateFullName?: string;
+  lastUpdateUserId?: string;
+  lastUpdatedAt?: string;
+  limit?: number;
+  name: string;
+}
+
+interface DataLeaveBeginning {
+  createdAt: string;
+  createdFullName: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  leaveDays: number;
+  leaveDaysUsed: number;
+  leaveType: string;
+  leaveTypeCode: string;
+  leaveTypeId: string;
+  leaveYear: number;
+  prefix: string;
+  profileId: string;
+}
+
+export type { DataLeaveType, DataLeaveBeginning };
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 5ec1f7604..8c745e47d 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -13,6 +13,9 @@ const leaveReport = () => import("@/modules/09_leave/views/06_ReportMain.vue");
 
 // const CheckinReport = () =>
 //   import("@/modules/09_leave/views/!07_ReportCheckin.vue");
+
+const LeaveHistoryMain = () =>
+  import("@/modules/09_leave/views/07_LeaveHistoryMain.vue");
 export default [
   {
     path: "/round-time",
@@ -94,7 +97,6 @@ export default [
       Role: "STAFF",
     },
   },
-
   {
     path: "/checkin-report",
     name: "checkinReport",
@@ -105,4 +107,14 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/leave-history",
+    name: "leaveHistory",
+    component: LeaveHistoryMain,
+    meta: {
+      Auth: true,
+      Key: "SYS_LEAVE_HISTORY",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/09_leave/stores/LeaveHistoryStore.ts b/src/modules/09_leave/stores/LeaveHistoryStore.ts
new file mode 100644
index 000000000..bafe489a7
--- /dev/null
+++ b/src/modules/09_leave/stores/LeaveHistoryStore.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataLeaveType } from "@/modules/09_leave/interface/response/leaveHistory";
+
+export const useLeaveHistoryDataStore = defineStore("leaveHistory", () => {
+  const leaveTypeData = ref<DataLeaveType[]>([
+    {
+      id: "00000000-0000-0000-0000-000000000000",
+      name: "ทั้งหมด",
+    },
+  ]);
+  return {
+    leaveTypeData,
+  };
+});
diff --git a/src/modules/09_leave/views/07_LeaveHistoryMain.vue b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
new file mode 100644
index 000000000..06da571b3
--- /dev/null
+++ b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
+
+import type { QTableColumn } from "quasar";
+import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
+import type {
+  DataLeaveType,
+  DataLeaveBeginning,
+} from "@/modules/09_leave/interface/response/leaveHistory";
+
+import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm.vue";
+
+const $q = useQuasar();
+const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
+const { showLoader, hideLoader, messageError, dialogRemove, success } =
+  useCounterMixin();
+
+const formFilter = reactive({
+  year: new Date().getFullYear(),
+  type: "00000000-0000-0000-0000-000000000000",
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const leaveTypeOptions = ref<DataLeaveType[]>([]);
+
+const rows = ref<DataLeaveBeginning[]>([]);
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveType",
+    align: "left",
+    label: " ประเภทการลา",
+    sortable: true,
+    field: "leaveType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveYear",
+    align: "left",
+    label: "ปี",
+    sortable: true,
+    field: "leaveYear",
+    format(val, row) {
+      return row.leaveYear ? `${Number(row.leaveYear) + 543}` : "-";
+    },
+
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDays",
+    align: "left",
+    label: "วันลาที่ยกมา",
+    sortable: true,
+    field: "leaveDays",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDaysUsed",
+    align: "left",
+    label: " วันลาที่ใช้ไป",
+    sortable: true,
+    field: "leaveDaysUsed",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "fullName",
+  "leaveType",
+  "leaveYear",
+  "leaveDays",
+  "leaveDaysUsed",
+]);
+
+const modalDialogForm = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const rowData = ref<DataLeaveBeginning>();
+
+/** ฟังก์ชันเรียกข้อมูลประเภทการลา*/
+async function fetchLeaveType() {
+  if (leaveTypeData.value.length === 1) {
+    try {
+      const res = await http.get(config.API.leaveType());
+      leaveTypeData.value.push(...res.data.result);
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+  leaveTypeOptions.value = leaveTypeData.value;
+}
+
+async function fetchDataLeaveBeginning() {
+  await http
+    .post(config.API.leaveBeginning + `/list`, {
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันค้นหารายชื่อคน
+ * @param newSearch สถานะการค้นข้อมูล true ค้นหาหน้าแรก false ค้นหาหน้าต่อไป
+ */
+async function onSearchData(newSearch: boolean = true) {
+  try {
+    showLoader();
+    if (newSearch) {
+      formFilter.page = 1;
+    }
+    await fetchDataLeaveBeginning();
+  } finally {
+    hideLoader();
+  }
+}
+
+function onOpenDialogForm(
+  isEdit: boolean,
+  data: DataLeaveBeginning = {} as DataLeaveBeginning
+) {
+  isStatusEdit.value = isEdit;
+  rowData.value = data;
+  modalDialogForm.value = true;
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    leaveTypeOptions.value = leaveTypeData.value.filter(
+      (e: DataLeaveType) => e.name.search(val) !== -1
+    );
+  });
+}
+
+function onDeleteLeaveBeginning(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.leaveBeginning + `/${id}`)
+      .then(async () => {
+        await fetchDataLeaveBeginning();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: DataPagination) {
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    onSearchData(true);
+  }
+);
+onMounted(async () => {
+  try {
+    showLoader();
+    await fetchLeaveType();
+    await fetchDataLeaveBeginning();
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลรายการการลาย้อนหลัง
+  </div>
+
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-y-sm">
+          <div class="row q-col-gutter-sm items-center">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formFilter.year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="onSearchData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  :model-value="Number(formFilter.year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                  bg-color="white"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-select
+              emit-value
+              map-options
+              outlined
+              dense
+              option-value="id"
+              option-label="name"
+              label="ประเภทการลา"
+              use-input
+              v-model="formFilter.type"
+              hide-selected
+              fill-input
+              :options="leaveTypeOptions"
+              @update:model-value="onSearchData()"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <div>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
+                dense
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click.stop.pervent="onOpenDialogForm(false)"
+              >
+                <q-tooltip>เพิ่มข้อมูลวันลาย้อนหลัง</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="formFilter.keyword"
+              outlined
+              placeholder="ค้นหา"
+              @keydown.enter.prevent="onSearchData()"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          @update:pagination="updatePagination"
+        >
+          <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"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click.stop.pervent="onOpenDialogForm(true, props.row)"
+                  ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click.stop.pervent="onDeleteLeaveBeginning(props.row.id)"
+                  ><q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total.toLocaleString() }} รายการ
+            <q-pagination
+              v-model="formFilter.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="onSearchData(false)"
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogForm
+    v-model:modal="modalDialogForm"
+    :is-status-edit="isStatusEdit"
+    :row-data="rowData"
+    :fetch-data-leave-beginning="fetchDataLeaveBeginning"
+  />
+</template>
+
+<style scoped></style>