From 52cfa6e0af5a99f1b533a2431d3c330b1be1874b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 16 Mar 2026 10:14:03 +0700
Subject: [PATCH 1/5] fix(registry): add reactive-rules rule prefix rank

---
 .../detail/PersonalInformation/01_Profile.vue        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 8f54e02cd..7730029f7 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -406,6 +406,12 @@ function calculateMinDate() {
   return today;
 }
 
+function prefixRankRule() {
+  return [
+    () => !!formData.rank || !!formData.prefix || "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
+  ];
+}
+
 /** ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่*/
 watch(
   () => formData.birthDate,
@@ -599,7 +605,8 @@ onMounted(() => {
                 class="inputgreen"
                 :options="store.Ops.prefixOps"
                 :label="dataLabel.prefix"
-                :rules="[(val: string) => !!formData.rank || !!formData.prefix || `${'กรุณาเลือกคำนำหน้าชื่อ หรือยศ'}`]"
+                :rules="prefixRankRule()"
+                reactive-rules
                 @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
               )"
@@ -620,7 +627,8 @@ onMounted(() => {
                 input-debounce="0"
                 option-label="name"
                 option-value="name"
-                :rules="[(val: string) => !!formData.rank || !!formData.prefix || `${'กรุณาเลือกคำนำหน้าชื่อ หรือยศ'}`]"
+                :rules="prefixRankRule()"
+                reactive-rules
                 v-model="formData.rank"
                 class="inputgreen"
                 :options="store.Ops.rankOps"

From 1d99705b651cec37be47e12ded423c465d9dafbd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 24 Mar 2026 10:01:34 +0700
Subject: [PATCH 2/5] fix(registry-officer): add field leaveSubTypeName  and
 coupleDayLevelCountry  form leave

---
 .../detail/GovernmentInformation/03_Leave.vue | 59 ++++++++++++++++++-
 .../interface/index/leave.ts                  |  3 +
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index 726ed821a..721542aba 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -202,6 +202,17 @@ const pagination = ref({
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
+/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
+const leaveSubTypeName = ref<string>("");
+const optionSubTypeName = ref<string[]>([
+  "ศึกษาต่อ",
+  "ฝึกอบรม",
+  "ปฎิบัติการวิจัย",
+  "ดูงาน",
+]);
+
+const coupleDayLevelCountry = ref<string>("");
+
 /** function fetch ข้อมูลรายการลา*/
 async function getData() {
   showLoader();
@@ -213,6 +224,7 @@ async function getData() {
         ...item,
         id: item.id,
         typeLeave: item.leaveType.name,
+        codeLeave: item.leaveType.code,
         code: item.leaveType.refCommandDate,
         dateStartLeave: item.dateLeaveStart,
         dateEndLeave: item.dateLeaveEnd,
@@ -292,8 +304,10 @@ function openDialogEdit(props: DetailData) {
   typeLeave.value = {
     id: props.typeLeaveId,
     name: props.typeLeave,
-    code: props.code,
+    code: props.codeLeave,
   };
+  leaveSubTypeName.value = props.leaveSubTypeName;
+  coupleDayLevelCountry.value = props.coupleDayLevelCountry;
   statLeave.value = props.status;
   reason.value = props.reason;
   dateRange.value = [
@@ -316,6 +330,10 @@ function onSubmit() {
 
     const body = {
       leaveTypeId: typeLeave.value?.id,
+      leaveSubTypeName:
+        typeLeave.value?.code === "LV-008" ? leaveSubTypeName.value : undefined,
+      coupleDayLevelCountry:
+        typeLeave.value?.code === "LV-010" ? coupleDayLevelCountry.value : undefined,
       dateLeaveStart: dateToISO(dateRange.value[0]),
       dateLeaveEnd: dateToISO(dateRange.value[1]),
       leaveDays: numLeave.value,
@@ -451,6 +469,8 @@ function closeDialog() {
   dateRange.value = [new Date(), new Date()];
   numLeave.value = 1;
   numUsedLeave.value = 0;
+  leaveSubTypeName.value = "";
+  coupleDayLevelCountry.value = "";
 }
 
 function statusLeave(val: string) {
@@ -741,6 +761,43 @@ onMounted(() => {
                       ) "
               />
             </div>
+
+            <div
+              class="col-xs-6 col-sm-6 col-md-6"
+              v-if="
+                typeLeave?.code === 'LV-008' || typeLeave?.code === 'LV-010'
+              "
+            >
+              <q-select
+                v-if="typeLeave?.code === 'LV-008'"
+                ref="typeLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                :label="`${'ประเภท'}`"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                v-model="leaveSubTypeName"
+                :options="optionSubTypeName"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                hide-bottom-space
+              />
+              <q-input
+                v-if="typeLeave?.code === 'LV-010'"
+                ref="numLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="coupleDayLevelCountry"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศที่ลาติดตามคู่สมรส'}`]"
+                hide-bottom-space
+                :label="`${'ประเทศที่ลาติดตามคู่สมรส'}`"
+              />
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 :readonly="!typeLeave"
diff --git a/src/modules/04_registryPerson/interface/index/leave.ts b/src/modules/04_registryPerson/interface/index/leave.ts
index 8de49f6f5..fb9e48922 100644
--- a/src/modules/04_registryPerson/interface/index/leave.ts
+++ b/src/modules/04_registryPerson/interface/index/leave.ts
@@ -8,6 +8,9 @@ interface DetailData {
   reason: string;
   typeLeaveId: string;
   code: string;
+  codeLeave:string
+  leaveSubTypeName:string
+  coupleDayLevelCountry:string
 }
 
 interface FormFilter {

From ecc10e16c9030cbe54d478f64beb9dee1eb50830 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 24 Mar 2026 16:50:26 +0700
Subject: [PATCH 3/5] feat:absentlate

---
 src/api/registry/api.registry.ts              |   6 +
 .../GovernmentInformation/08_AbsentLate.vue   | 424 ++++++++++++++++++
 .../08_DialogAbsentLate.vue                   | 242 ++++++++++
 .../detail/GovernmentInformation/Main.vue     |   5 +
 .../interface/response/Government.ts          |  19 +-
 .../04_registryPerson/stores/AbsentLate.ts    |  19 +
 6 files changed, 714 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue
 create mode 100644 src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
 create mode 100644 src/modules/04_registryPerson/stores/AbsentLate.ts

diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 0cbfc086e..f3378e539 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -272,4 +272,10 @@ export default {
   profileAssistanceReturn: `${env.API_URI}/placement/repatriation`,
   profileAssistanceUpdateDelete: (type: string) =>
     `${registryNew}${type}/assistance/update-delete/`,
+
+   profileAbsentLate: (type: string) => `${registryNew}${type}/absent-late`,
+   profileAbsentLateUpdateDelete: (type: string) => `${registryNew}${type}/absent-late/update-delete`,
+   profileAbsentLateHistory: (id: string, type: string) =>
+     `${registryNew}${type}/absent-late/history/${id}`,
+
 };
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue
new file mode 100644
index 000000000..1ae40bde9
--- /dev/null
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAbsentLateStore } from "@/modules/04_registryPerson/stores/AbsentLate";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableColumn } from "quasar";
+import type { ResAbsentLateData} from "@/modules/04_registryPerson/interface/response/Government";
+
+import DialogAbsentLate from "@/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+
+const route = useRoute();
+const absentLateStore = useAbsentLateStore();
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  pathRegistryEmp,
+  onSearchDataTable,
+  convertDateToAPI,
+  dialogRemove,
+} = useCounterMixin();
+
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const isLeave = defineModel<boolean>("isLeave", {
+  required: true,
+});
+
+const baseColumns = ref<QTableColumn[]>([
+  {
+    name: "status",
+    align: "left",
+    label: "มาสาย/ ขาดราชการ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      const status = absentLateStore.statusOps.find(
+        (option) => option.id === val
+      );
+      return status ? status.name : val;
+    },
+  },
+  {
+    name: "stampDate",
+    align: "left",
+    label: "วันที่ลงเวลา",
+    sortable: true,
+    field: "stampDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "stampType",
+    align: "left",
+    label: "ประเภทการลงเวลา",
+    sortable: true,
+    field: "stampType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      const type = absentLateStore.stampTypeOps.find(
+        (option) => option.id === val
+      );
+      return type ? type.name : val;
+    },
+  },
+  {
+    name: "stampAmount",
+    align: "left",
+    label: "จำนวน",
+    sortable: true,
+    field: "stampAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const baseVisibleColumns = ref<string[]>([
+  "status",
+  "stampDate",
+  "stampType",
+  "stampAmount",
+  "remark",
+]);
+
+/** Table*/
+const rows = ref<ResAbsentLateData[]>([]);
+const rowsMain = ref<ResAbsentLateData[]>([]);
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
+/** Dialog*/
+const isStatusEdit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const rowId = ref<string>("");
+const dataAbsentLate = ref<ResAbsentLateData | null>(null);
+
+async function fetchData() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileAbsentLate(empType.value) + `/${profileId.value}`
+    );
+    const data = res.data.result;
+    rowsMain.value = data;
+    serchDataTable();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** function fetch ข้อมูลประวัติการแก้ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileAbsentLateHistory(rowId.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+function openEditDialog(data: any) {
+  modal.value = true;
+  isStatusEdit.value = true;
+  rowId.value = data.id;
+  dataAbsentLate.value = data;
+}
+
+function showHistoryDialog(id: string) {
+  modalHistory.value = true;
+  rowId.value = id;
+}
+
+/** ฟังก์ค้นหาข้อมูลขาดราชการ/มาสาย*/
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function onDelete(rowId: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    try {
+      await http.patch(
+        config.API.profileAbsentLateUpdateDelete(empType.value) + `/${rowId}`
+      );
+      await fetchData();
+      await success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn
+      v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click.stop.prevent="(modal = true), (isStatusEdit = false)"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+    </q-btn>
+
+    <q-space />
+    <q-input
+      standout
+      dense
+      v-model="filterKeyword"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="serchDataTable"
+    >
+      <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"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </div>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
+  >
+    >
+    <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" v-if="mode === 'table'">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click.stop.prevent="showHistoryDialog(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขขาดราชการ/มาสาย</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click.stop.prevent="openEditDialog(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            v-if="!isLeave && checkPermission($route)?.attrIsDelete"
+            flat
+            dense
+            round
+            color="red"
+            icon="delete"
+            @click.stop.prevent="onDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click.stop.prevent="showHistoryDialog(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขขาดราชการ/มาสาย</q-tooltip>
+            </q-btn>
+
+            <q-btn
+              v-if="isLeave === false && checkPermission($route)?.attrIsUpdate"
+              :color="props.row.commandId ? 'grey-5' : 'edit'"
+              :disable="props.row.commandId !== null"
+              icon="edit"
+              flat
+              round
+              @click.stop.prevent="openEditDialog(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+
+            <q-btn
+              v-if="isLeave === false && checkPermission($route)?.attrIsDelete"
+              color="red"
+              icon="delete"
+              flat
+              round
+              @click.stop.prevent="onDelete(props.row.id)"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <DialogAbsentLate
+    v-model:modal="modal"
+    v-model:isStatusEdit="isStatusEdit"
+    :fetchData="fetchData"
+    :rowId="rowId"
+    :dataAbsentLate="dataAbsentLate"
+  />
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขขาดราชการ/มาสาย`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
new file mode 100644
index 000000000..3bc7b9c3e
--- /dev/null
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { reactive, ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAbsentLateStore } from "@/modules/04_registryPerson/stores/AbsentLate";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** import components*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+//use
+const $q = useQuasar();
+const route = useRoute();
+const absentLateStore = useAbsentLateStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  convertDateToAPI,
+  dialogConfirm,
+  pathRegistryEmp,
+} = useCounterMixin();
+
+//props
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const rowId = defineModel<string>("rowId", { required: true });
+
+const props = defineProps<{
+  fetchData: () => Promise<void>;
+  dataAbsentLate: any;
+}>();
+
+const profileId = ref<string>(route.params.id?.toString() ?? ""); //ProfileId
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const form = reactive({
+  status: "",
+  stampDate: new Date(),
+  stampType: "FULL_DAY",
+  stampAmount: "1.0",
+  remark: "",
+});
+
+const tittle = computed(() => {
+  return isStatusEdit.value
+    ? "แก้ไขข้อมูลขาดราชการ/มาสาย"
+    : "เพิ่มข้อมูลขาดราชการ/มาสาย";
+});
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const playload = {
+        ...form,
+        stampDate: convertDateToAPI(form.stampDate),
+        profileId: isStatusEdit.value ? undefined : profileId.value,
+      };
+      const method = isStatusEdit.value ? "patch" : "post";
+      const url = isStatusEdit.value
+        ? config.API.profileAbsentLate(empType.value) + `/${rowId.value}`
+        : config.API.profileAbsentLate(empType.value);
+      await http[method](url, playload);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.fetchData();
+      closeDialog();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** function ปิด popup*/
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  (newVal) => {
+    if (newVal) {
+      form.status = isStatusEdit.value ? props.dataAbsentLate.status : "";
+      form.stampDate = isStatusEdit.value
+        ? new Date(props.dataAbsentLate.stampDate)
+        : new Date();
+      form.stampType = isStatusEdit.value
+        ? props.dataAbsentLate.stampType
+        : "FULL_DAY";
+      form.stampAmount = isStatusEdit.value
+        ? props.dataAbsentLate.stampAmount
+        : "1.0";
+      form.remark = isStatusEdit.value ? props.dataAbsentLate.remark : "";
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <q-form greedy @submit.prevent="onSubmit">
+        <DialogHeader :tittle="tittle" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-md">
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-md-7 col-sm-12">
+              <q-select
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="form.status"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                hide-bottom-space
+                :label="`${'สถานะ'}`"
+                map-options
+                emit-value
+                option-label="name"
+                option-value="id"
+                :options="absentLateStore.statusOps"
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+              />
+            </div>
+
+            <div class="col-md-5 col-sm-12">
+              <datepicker
+                class="inputgreen"
+                menu-class-name="modalfix"
+                v-model="form.stampDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    hide-bottom-space
+                    class="full-width"
+                    :model-value="
+                      form.stampDate != null ? date2Thai(form.stampDate) : null
+                    "
+                    :label="`${'วันที่ลงเวลา'}`"
+                    :rules="[
+                              (val: string) =>
+                                !!val || `${'กรุณาเลือกวันที่ลงเวลา'}`,
+                            ]"
+                  >
+                    <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-md-6 col-xs-12">
+              <q-select
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="form.stampType"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลงเวลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลงเวลา'}`"
+                map-options
+                emit-value
+                option-label="name"
+                :options="absentLateStore.stampTypeOps"
+                option-value="id"
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+              />
+            </div>
+
+            <div class="col-md-6 col-xs-12">
+              <q-input
+                class="inputgreen"
+                dense
+                outlined
+                v-model="form.stampAmount"
+                label="จำนวน"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                mask="#.#"
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                class="inputgreen"
+                dense
+                outlined
+                v-model="form.remark"
+                label="เหตุผล"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
index da7af1456..3f30cf12e 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
@@ -14,6 +14,7 @@ import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/Go
 import ActingPos from "@/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue"; //รักษาการในตำแหน่ง
 import HelpGovernmentDetail from "@/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue"; //ช่วยราชการ
 import Postion from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue";
+import AbsentLate from "@/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@@ -47,6 +48,7 @@ const storeRegistry = useRegistryNewDataStore();
     <q-tab v-if="empType != '-employee'" name="6" label="ช่วยราชการ" />
     <q-tab name="2" label="วินัย" />
     <q-tab name="3" label="การลา" />
+    <q-tab name="8" label="ขาดราชการ/มาสาย" />
     <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
   </q-tabs>
   <q-separator />
@@ -76,6 +78,9 @@ const storeRegistry = useRegistryNewDataStore();
         :citizen-id="storeRegistry.citizenId"
       />
     </q-tab-panel>
+    <q-tab-panel name="8">
+      <AbsentLate :is-leave="storeRegistry.isLeave" />
+    </q-tab-panel>
     <q-tab-panel name="7">
       <Postion
         :is-leave="storeRegistry.isLeave"
diff --git a/src/modules/04_registryPerson/interface/response/Government.ts b/src/modules/04_registryPerson/interface/response/Government.ts
index bcdf39e50..5fbad6012 100644
--- a/src/modules/04_registryPerson/interface/response/Government.ts
+++ b/src/modules/04_registryPerson/interface/response/Government.ts
@@ -44,4 +44,21 @@ interface ResFileData {
   pathname: string;
 }
 
-export type { ResActingPosData, ResAssistanceData, ResFileData };
+interface ResAbsentLateData {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isDeleted: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  profileId: string;
+  remark: string;
+  stampAmount: string;
+  stampDate: string;
+  stampType: string;
+  status: string;
+}
+
+export type { ResActingPosData, ResAssistanceData, ResFileData, ResAbsentLateData };
diff --git a/src/modules/04_registryPerson/stores/AbsentLate.ts b/src/modules/04_registryPerson/stores/AbsentLate.ts
new file mode 100644
index 000000000..1247fa0f8
--- /dev/null
+++ b/src/modules/04_registryPerson/stores/AbsentLate.ts
@@ -0,0 +1,19 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+export const useAbsentLateStore = defineStore("absentLate", () => {
+  const statusOps = ref<DataOption[]>([
+    { name: "ขาดราชการ", id: "ABSENT" },
+    { name: "มาสาย", id: "LATE" },
+  ]);
+
+  const stampTypeOps = ref<DataOption[]>([
+    { name: "เต็มวัน", id: "FULL_DAY" },
+    { name: "ครึ่งเช้า", id: "MORNING" },
+    { name: "ครึ่งบ่าย ", id: "AFTERNOON" },
+  ]);
+
+  return { statusOps, stampTypeOps };
+});

From 0a5f64c17ca4f228fa7f785f9b663e5e8f51f42e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 25 Mar 2026 09:18:51 +0700
Subject: [PATCH 4/5] fix: payload profileEmployeeId

---
 .../GovernmentInformation/08_DialogAbsentLate.vue   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
index 3bc7b9c3e..0697b5ad9 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
@@ -57,16 +57,23 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     try {
       showLoader();
-      const playload = {
+      const payload = {
         ...form,
         stampDate: convertDateToAPI(form.stampDate),
-        profileId: isStatusEdit.value ? undefined : profileId.value,
+        profileId:
+          !isStatusEdit.value && empType.value === ""
+            ? profileId.value
+            : undefined,
+        profileEmployeeId:
+          !isStatusEdit.value && empType.value !== ""
+            ? profileId.value
+            : undefined,
       };
       const method = isStatusEdit.value ? "patch" : "post";
       const url = isStatusEdit.value
         ? config.API.profileAbsentLate(empType.value) + `/${rowId.value}`
         : config.API.profileAbsentLate(empType.value);
-      await http[method](url, playload);
+      await http[method](url, payload);
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.fetchData();
       closeDialog();

From 5f48063ae79424b67e82d7c5f7fdb2c195f8c566 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 25 Mar 2026 10:27:45 +0700
Subject: [PATCH 5/5] fix layout and select input

---
 .../08_DialogAbsentLate.vue                   | 64 +++++++++++--------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
index 0697b5ad9..4d0311de3 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue
@@ -90,6 +90,17 @@ function closeDialog() {
   modal.value = false;
 }
 
+watch(
+  () => form.stampType,
+  (stampType) => {
+    if (stampType === "FULL_DAY") {
+      form.stampAmount = "1.0";
+    } else if (stampType === "MORNING" || stampType === "AFTERNOON") {
+      form.stampAmount = "0.5";
+    }
+  }
+);
+
 watch(
   () => modal.value,
   (newVal) => {
@@ -119,29 +130,31 @@ watch(
 
         <q-card-section class="q-pa-md">
           <div class="col-12 row q-col-gutter-sm">
-            <div class="col-md-7 col-sm-12">
-              <q-select
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="form.status"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-                hide-bottom-space
-                :label="`${'สถานะ'}`"
-                map-options
-                emit-value
-                option-label="name"
-                option-value="id"
-                :options="absentLateStore.statusOps"
-                use-input
-                hide-selected
-                fill-input
-                input-debounce="0"
-              />
+            <div class="col-12 row">
+              <div class="col-md-4 col-sm-12">
+                <q-select
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="form.status"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                  hide-bottom-space
+                  :label="`${'สถานะ'}`"
+                  map-options
+                  emit-value
+                  option-label="name"
+                  option-value="id"
+                  :options="absentLateStore.statusOps"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                />
+              </div>
             </div>
 
-            <div class="col-md-5 col-sm-12">
+            <div class="col-md-4 col-sm-12">
               <datepicker
                 class="inputgreen"
                 menu-class-name="modalfix"
@@ -185,7 +198,7 @@ watch(
                 </template>
               </datepicker>
             </div>
-            <div class="col-md-6 col-xs-12">
+            <div class="col-md-4 col-xs-12">
               <q-select
                 class="full-width inputgreen cursor-pointer"
                 outlined
@@ -207,7 +220,7 @@ watch(
               />
             </div>
 
-            <div class="col-md-6 col-xs-12">
+            <div class="col-md-4 col-xs-12">
               <q-input
                 class="inputgreen"
                 dense
@@ -215,7 +228,9 @@ watch(
                 v-model="form.stampAmount"
                 label="จำนวน"
                 hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                readonly
+                :rules="[(val:string) => !!val ||
+              `${'กรุณากรอกจำนวน'}`]"
                 mask="#.#"
               />
             </div>
@@ -229,7 +244,6 @@ watch(
                 label="เหตุผล"
                 hide-bottom-space
                 type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
               />
             </div>
           </div>