From e693e024e61e8362053fa5ab270354393316ecd4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 15 Nov 2023 14:25:45 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=20Admin=20(=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/09_leave/api.leave.ts                 |   3 +
 .../09_leave/components/1_Work/Tab1.vue       | 212 ++++++++++++++++++
 .../09_leave/components/1_Work/Tab2.vue       | 168 ++++++++++++++
 .../09_leave/components/1_Work/TableList.vue  | 132 +++++------
 .../09_leave/components/1_Work/ToolBar.vue    |  26 ++-
 .../components/1_Work/ToolBarDate.vue         |  27 ++-
 .../09_leave/interface/response/work.ts       |  66 +++---
 src/modules/09_leave/stores/WorkStore.ts      | 118 +++-------
 src/modules/09_leave/views/WorkingMain.vue    | 100 ++-------
 9 files changed, 557 insertions(+), 295 deletions(-)
 create mode 100644 src/modules/09_leave/components/1_Work/Tab1.vue
 create mode 100644 src/modules/09_leave/components/1_Work/Tab2.vue

diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index f33bde32b..d061a9934 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -3,4 +3,7 @@ const leave = `${env.API_URI}/leave`;
 export default {
   roundDutytime: () => `${leave}/duty-time`,
   roundDutytimeByid: (id: string) => `${leave}/duty-time/${id}`,
+
+  /**รายการลงเวลาปฏิบัติงาน */
+  logRecord: () => `${leave}/log-record`,
 };
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
new file mode 100644
index 000000000..b7e9c24cf
--- /dev/null
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  DataResTime,
+  TableRows,
+} from "@/modules/09_leave/interface/response/work";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
+/** importComponents */
+import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
+import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
+
+/** importStores */
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+/** useStore */
+const mixin = useCounterMixin();
+const workStore = useWorklistDataStore();
+const { date2Thai, showLoader, hideLoader } = mixin;
+
+const keyword = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(2);
+const maxPage = ref<number>(7);
+
+/** ข้อมูลหัวตาราง*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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",
+  },
+  {
+    name: "checkInTime",
+    align: "left",
+    label: "เวลาเข้างาน",
+    sortable: true,
+    field: "checkInTime",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkInLocation",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "checkInLocation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkOutTime",
+    align: "left",
+    label: "เวลาออกงาน",
+    sortable: true,
+    field: "checkOutTime",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkOutLocation",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "checkOutLocation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkStatus",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "checkStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "checkInTime",
+  "checkInLocation",
+  "checkOutTime",
+  "checkOutLocation",
+  "checkStatus",
+]);
+const rows = ref<TableRows[]>([]);
+const optionStatusMain = ref<DataOption[]>([]);
+const optionStatus = ref<DataOption[]>([]);
+const filetStatus = ref<string>("");
+
+async function fetchListTimeRecord() {
+  showLoader();
+  const listData: DataResTime[] = [
+    // {
+    //   id: "00000000-0000-0000-0000-000000000000",
+    //   fullName: "นางอมร ใจดี",
+    //   checkDate: new Date(),
+    //   checkInTime: "08:30",
+    //   checkInLocation: "สำนักงงาน",
+    //   checkInLat: "18.7903",
+    //   checkInLon: "99.0029",
+    //   checkOutLocation: "สำนักงงาน",
+    //   checkOutTime: "18:04",
+    //   checkOutLat: "18.7903",
+    //   checkOutLon: "99.0029",
+    //   checkStatus: "normal",
+    // },
+    // {
+    //   id: "00000000-0000-0000-0000-000000000000",
+    //   fullName: "นางอมร ใจดี",
+    //   checkDate: new Date(),
+    //   checkInTime: "08:30",
+    //   checkInLocation: "สำนักงงาน",
+    //   checkInLat: "18.7903",
+    //   checkInLon: "99.0029",
+    //   checkOutLocation: "สำนักงงาน",
+    //   checkOutTime: "18:04",
+    //   checkOutLat: "18.7903",
+    //   checkOutLon: "99.0029",
+    //   checkStatus: "normal",
+    // },
+    // {
+    //   id: "00000000-0000-0000-0000-000000000000",
+    //   fullName: "นางอมร ใจดี",
+    //   checkDate: new Date(),
+    //   checkInTime: "08:30",
+    //   checkInLocation: "สำนักงงาน",
+    //   checkInLat: "18.7903",
+    //   checkInLon: "99.0029",
+    //   checkOutLocation: "สำนักงงาน",
+    //   checkOutTime: "18:04",
+    //   checkOutLat: "18.7903",
+    //   checkOutLon: "99.0029",
+    //   checkStatus: "normal",
+    // },
+  ];
+
+  let datalist: TableRows[] = listData.map((e: DataResTime) => ({
+    id: e.id,
+    fullName: e.fullName,
+    checkDate: e.checkDate && date2Thai(e.checkDate),
+    checkInTime: e.checkInTime,
+    checkInLocation: e.checkInLocation,
+    checkInLat: e.checkInLat,
+    checkInLon: e.checkInLon,
+    checkOutLocation: e.checkOutLocation,
+    checkOutTime: e.checkOutTime,
+    checkOutLat: e.checkOutLat,
+    checkOutLon: e.checkOutLon,
+    checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus),
+  }));
+  rows.value = datalist;
+  fetchOption(datalist);
+  hideLoader();
+}
+
+//
+function fetchOption(data: TableRows[]) {
+  const double_status = [...new Set(data.map((item: any) => item.checkStatus))];
+  optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+  for (let i = 1; i <= double_status.length; i++) {
+    const status = double_status[i - 1];
+    if (typeof status === "string") {
+      const listtype: DataOption = {
+        id: status,
+        name: status,
+      };
+      optionStatusMain.value.push(listtype);
+      optionStatus.value = optionStatusMain.value;
+    }
+  }
+}
+
+/** Hook*/
+onMounted(async () => {
+  console.log("TAB1");
+  workStore.columns = columns.value;
+  workStore.visibleColumns = visibleColumns.value;
+  await fetchListTimeRecord();
+});
+
+onUnmounted(() => {});
+</script>
+<template>
+  <ToolBar :option="optionStatus" :filetStatus="filetStatus" />
+  <TableList
+    :rows="rows.length > 0 ? rows : []"
+    :page="page"
+    :rowsPerPage="rowsPerPage"
+    :maxPage="maxPage"
+  />
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue
new file mode 100644
index 000000000..22dad0a5d
--- /dev/null
+++ b/src/modules/09_leave/components/1_Work/Tab2.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+/** import Type */
+import type {
+  DataResLog,
+  TableRows,
+} from "@/modules/09_leave/interface/response/work";
+
+/** importComponents */
+import ToolBarDate from "@/modules/09_leave/components/1_Work/ToolBarDate.vue";
+import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
+
+/** importStores */
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+/** useStore */
+const mixin = useCounterMixin();
+const workStore = useWorklistDataStore();
+const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
+
+/** ข้อมูลหัวตาราง*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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",
+  },
+  {
+    name: "checkInTime",
+    align: "left",
+    label: "เวลาเข้างาน",
+    sortable: true,
+    field: "checkInTime",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkInLocation",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "checkInLocation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkOutTime",
+    align: "left",
+    label: "เวลาออกงาน",
+    sortable: true,
+    field: "checkOutTime",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkOutLocation",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "checkOutLocation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "checkInTime",
+  "checkInLocation",
+  "checkOutTime",
+  "checkOutLocation",
+]);
+
+const rows = ref<TableRows[]>([]);
+
+/** QueryString*/
+const keyword = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(5);
+const maxPage = ref<number>(7 / 3);
+
+/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
+async function fetchListLogRecord() {
+  showLoader();
+  const date = new Date(workStore.selectDate as string | Date);
+  await http
+    .get(
+      config.API.logRecord() +
+        `?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
+          page.value
+        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}`
+    )
+    .then((res) => {
+      console.log(res);
+      let datalist: TableRows[] = res.data.result.map((e: DataResLog) => ({
+        id: e.id,
+        fullName: e.fullName,
+        checkDate: e.checkDate && date2Thai(e.checkDate),
+        checkInTime: e.checkInTime,
+        checkInLocation: e.checkInLocation,
+        checkInLat: e.checkInLat,
+        checkInLon: e.checkInLon,
+        checkOutLocation: e.checkOutLocation,
+        checkOutTime: e.checkOutTime,
+        checkOutLat: e.checkOutLat,
+        checkOutLon: e.checkOutLon,
+      }));
+      rows.value = datalist;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาตามหน้าที่เลือก
+ * @param params pagination
+ * @param currentPage page
+ * @param key keyword ค้นหา
+ */
+async function updatePagingProp(params: any, currentPage: number, key: string) {
+  page.value = currentPage;
+  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
+  keyword.value = key ?? keyword.value;
+  await fetchListLogRecord();
+}
+
+/** Hook*/
+onMounted(async () => {
+  workStore.columns = columns.value;
+  workStore.visibleColumns = visibleColumns.value;
+  await fetchListLogRecord();
+});
+</script>
+<template>
+  <ToolBarDate :keyword="keyword" @update:pagination="updatePagingProp" />
+
+  <TableList
+    :rows="rows.length > 0 ? rows : []"
+    :page="page"
+    :rowsPerPage="rowsPerPage"
+    :maxPage="maxPage"
+    @update:pagination="updatePagingProp"
+  />
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index ec163523e..be14801bc 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -15,83 +15,40 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai } = mixin;
-const { searchDataFn, filterFn } = workStore;
+// const { searchDataFn, filterFn } = workStore;
 
-/** ข้อมูลหัวตาราง*/
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+const props = defineProps({
+  rows: {
+    type: Object,
+    require: true,
   },
-  {
-    name: "fullName",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  page: {
+    type: Number,
+    require: true,
   },
-  {
-    name: "timeIn",
-    align: "left",
-    label: "เวลาเข้างาน",
-    sortable: true,
-    field: "timeIn",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  rowsPerPage: {
+    type: Number,
+    require: true,
   },
-  {
-    name: "coordinatesIn",
-    align: "left",
-    label: "พิกัด",
-    sortable: true,
-    field: "coordinatesIn",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  maxPage: {
+    type: Number,
+    require: true,
   },
-  {
-    name: "timeOut",
-    align: "left",
-    label: "เวลาออกงาน",
-    sortable: true,
-    field: "timeOut",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "coordinatesOut",
-    align: "left",
-    label: "พิกัด",
-    sortable: true,
-    field: "coordinatesOut",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullName",
-  "timeIn",
-  "coordinatesIn",
-  "timeOut",
-  "coordinatesOut",
-]);
+});
+
+const emit = defineEmits(["update:pagination"]);
+const updateProp = (newPagination: any, page: number) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+};
 
 /** Hook */
-onMounted(() => {
-  workStore.columns = columns.value;
-  workStore.visibleColumns = visibleColumns.value;
-});
+onMounted(() => {});
 
 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
+
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
@@ -100,6 +57,7 @@ function clickDetail(data: any) {
   modal.value = true;
   dataDetail.value = data;
 }
+
 /** Function ปิด popup */
 function colseDeyail() {
   modal.value = false;
@@ -107,22 +65,25 @@ function colseDeyail() {
 
 /** pagination */
 const pagination = ref({
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+  descending: false,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+const currentPage = ref<number>(1);
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  updateProp(pagination.value, currentPage.value);
 });
 </script>
 
 <template>
   <d-table
     ref="table"
-    :columns="columns"
-    :rows="workStore.rows"
-    :filter="workStore.filterTable"
+    :columns="workStore.columns"
+    :rows="props.rows"
     row-key="id"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="workStore.visibleColumns"
@@ -146,22 +107,22 @@ const pagination = ref({
           <div v-if="col.name == 'no'">
             {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name == 'coordinatesIn'">
+          <div v-else-if="col.name == 'checkInLocation'">
             <q-item style="padding: 0">
               <q-item-section>
-                <q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
+                <q-item-label> {{ props.row.checkInLocation }}</q-item-label>
                 <q-item-label caption lines="2">{{
-                  props.row.latIn + "  " + props.row.longIn
+                  props.row.checkInLat + "  " + props.row.checkInLon
                 }}</q-item-label>
               </q-item-section>
             </q-item>
           </div>
-          <div v-else-if="col.name == 'coordinatesOut'">
+          <div v-else-if="col.name == 'checkOutLocation'">
             <q-item style="padding: 0">
               <q-item-section>
-                <q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
+                <q-item-label> {{ props.row.checkOutLocation }}</q-item-label>
                 <q-item-label caption lines="2">{{
-                  props.row.latOut + "  " + props.row.longOut
+                  props.row.checkOutLat + "  " + props.row.checkOutLon
                 }}</q-item-label>
               </q-item-section>
             </q-item>
@@ -172,6 +133,17 @@ const pagination = ref({
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </d-table>
 
   <DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index ccd80c8df..d8afb175c 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -6,7 +8,16 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
-const { filterFn, searchDataFn } = workStore;
+
+const props = defineProps({
+  option: {
+    type: Object,
+    require: true,
+  },
+});
+
+const filetStatus = ref<string>("");
+const keyword = ref<string>("");
 
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
@@ -27,9 +38,6 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -64,16 +72,12 @@ function calculateMaxDate() {
         map-options
         outlined
         dense
-        v-model="workStore.selectStatus"
-        :options="workStore.optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
         use-input
-        @filter="filterFn"
+        v-model="filetStatus"
+        :options="props.option as readonly any[] || undefined"
       >
         <template v-slot:no-option>
           <q-item>
@@ -88,7 +92,7 @@ function calculateMaxDate() {
         for="filterTable"
         dense
         outlined
-        v-model="workStore.filterTable"
+        v-model="keyword"
         label="ค้นหา"
         debounce="300"
       >
diff --git a/src/modules/09_leave/components/1_Work/ToolBarDate.vue b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
index 92ca0c224..318a7b48d 100644
--- a/src/modules/09_leave/components/1_Work/ToolBarDate.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -6,7 +8,15 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
-const { searchDataFn } = workStore;
+
+/** คำค้นหา*/
+const keyword = ref<string>("");
+
+const emit = defineEmits(["update:pagination"]);
+const updateProp = (newPagination: any, keyword: string) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, 1, keyword);
+};
 
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
@@ -14,6 +24,14 @@ function calculateMaxDate() {
   today.setDate(today.getDate());
   return today;
 }
+
+/** pagination */
+const pagination = ref({
+  page: 1,
+});
+function filterFn() {
+  updateProp(pagination.value, keyword.value);
+}
 </script>
 
 <template>
@@ -27,9 +45,7 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
+        @update:model-value="filterFn"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -63,9 +79,10 @@ function calculateMaxDate() {
         for="filterTable"
         dense
         outlined
-        v-model="workStore.filterTable"
+        v-model="keyword"
         label="ค้นหา"
         debounce="300"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/09_leave/interface/response/work.ts b/src/modules/09_leave/interface/response/work.ts
index 50bfc3b4d..5760dccbe 100644
--- a/src/modules/09_leave/interface/response/work.ts
+++ b/src/modules/09_leave/interface/response/work.ts
@@ -1,31 +1,41 @@
 interface TableRows {
-    fullName: string
-    timeIn: string
-    coordinatesIn: string
-    latIn: string
-    longIn: string
-    timeOut: string
-    coordinatesOut: string
-    latOut: string
-    longOut: string
-    status: string | undefined
-    date: string | null
-
+  id: string; //id รายการลงเวลาปฏิบัติงาน
+  fullName: String; //ชื่อ-นามสกุล
+  checkDate: string | null; //วันที่เข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: String; //พิกัดเข้างาน
+  checkInLat: String; //อัลติจูดเข้างาน
+  checkInLon: String; //ละติจูดเข้างาน
+  checkOutLocation: String; //พิกัดออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLat: String; //อัลติจูดออกงาน
+  checkOutLon: String; //ละติจูดออกงาน
 }
-interface DataRes {
-    fullName: string
-    timeIn: string
-    coordinatesIn: string
-    latIn: string
-    longIn: string
-    timeOut: string
-    coordinatesOut: string
-    latOut: string
-    longOut: string
-    status: string
-    date: Date
+interface DataResTime {
+  id: string; //id รายการลงเวลาปฏิบัติงาน
+  fullName: String; //ชื่อ-นามสกุล
+  checkDate: Date | null; //วันที่เข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: String; //พิกัดเข้างาน
+  checkInLat: String; //อัลติจูดเข้างาน
+  checkInLon: String; //ละติจูดเข้างาน
+  checkOutLocation: String; //พิกัดออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLat: String; //อัลติจูดออกงาน
+  checkOutLon: String; //ละติจูดออกงาน
+  checkStatus: string;
 }
-export type {
-    TableRows,
-    DataRes
-}
\ No newline at end of file
+interface DataResLog {
+  id: string; //id รายการลงเวลาปฏิบัติงาน
+  fullName: String; //ชื่อ-นามสกุล
+  checkDate: Date | null; //วันที่เข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: String; //พิกัดเข้างาน
+  checkInLat: String; //อัลติจูดเข้างาน
+  checkInLon: String; //ละติจูดเข้างาน
+  checkOutLocation: String; //พิกัดออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLat: String; //อัลติจูดออกงาน
+  checkOutLon: String; //ละติจูดออกงาน
+}
+export type { TableRows, DataResLog, DataResTime };
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index a133e81f9..07cead076 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/src/modules/09_leave/stores/WorkStore.ts
@@ -1,95 +1,36 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+
+/** import Type */
 import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-import type {
-  TableRows,
-  DataRes,
-} from "@/modules/09_leave/interface/response/work";
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+
 export const useWorklistDataStore = defineStore("work", () => {
-  // ข้อมูลในตาราง
-  const rows = ref<TableRows[]>([]);
+  /** ข้อมูล Table */
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
-  const dataMain = ref<TableRows[]>([]);
-  function fetchList(data: DataRes[]) {
-    let datalist: TableRows[] = data.map((e: DataRes) => ({
-      fullName: e.fullName,
-      timeIn: e.timeIn,
-      coordinatesIn: e.coordinatesIn,
-      latIn: e.latIn,
-      longIn: e.longIn,
-      timeOut: e.timeOut,
-      coordinatesOut: e.coordinatesOut,
-      latOut: e.latOut,
-      longOut: e.longOut,
-      status: convertSatatus(e.status),
-      date: date2Thai(e.date),
-    }));
-    dataMain.value = datalist;
-    fetchOption();
-    searchDataFn(selectDate.value, selectStatus.value);
-  }
 
-  //ค้นหาข้อมูล
-  const filterTable = ref<string>("");
+  /** ค้นหาวัน ข้อมูล Table  */
   const selectDate = ref<Date | null>(new Date());
-  const selectStatus = ref<String>("all");
-  const optionStatusMain = ref<DataOption[]>([]);
-  const optionStatus = ref<DataOption[]>([]);
-  function searchDataFn(searchDate: any, searchStatus: any) {
-    searchStatus = searchStatus || "all";
-    if (searchDate == null && searchStatus == "all") {
-      rows.value = dataMain.value;
-    } else if (searchDate == null && searchStatus !== "all") {
-      rows.value = dataMain.value.filter((e: any) => e.status === searchStatus);
-    } else if (searchDate !== null && searchStatus == "all") {
-      rows.value = dataMain.value.filter(
-        (e: any) => e.date === date2Thai(searchDate)
-      );
-    } else {
-      rows.value = dataMain.value.filter(
-        (e: any) =>
-          e.date === date2Thai(searchDate) && e.status === searchStatus
-      );
-    }
-  }
-  //
-  function fetchOption() {
-    const double_status = [
-      ...new Set(dataMain.value.map((item: any) => item.status)),
-    ];
-    optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
-    for (let i = 1; i <= double_status.length; i++) {
-      const status = double_status[i - 1];
-      if (typeof status === "string") {
-        const listtype: DataOption = {
-          id: status,
-          name: status,
-        };
-        optionStatusMain.value.push(listtype);
-        optionStatus.value = optionStatusMain.value;
-      }
-    }
-  }
-  function filterFn(val: string, update: Function) {
-    if (val == "") {
-      update(() => {
-        optionStatus.value = optionStatusMain.value;
-      });
-    } else {
-      update(() => {
-        optionStatus.value = optionStatusMain.value.filter(
-          (e: any) => e.name.search(val) !== -1
-        );
-      });
-    }
-  }
+
+  // function filterFn(val: string, update: Function) {
+  //   if (val == "") {
+  //     update(() => {
+  //       optionStatus.value = optionStatusMain.value;
+  //     });
+  //   } else {
+  //     update(() => {
+  //       optionStatus.value = optionStatusMain.value.filter(
+  //         (e: any) => e.name.search(val) !== -1
+  //       );
+  //     });
+  //   }
+  // }
 
   // convertSatatus
+  /**
+   * function แปลงค่าสถานะ
+   * @param val ค่าสถานนะ
+   */
   function convertSatatus(val: string) {
     switch (val) {
       case "normal":
@@ -102,17 +43,16 @@ export const useWorklistDataStore = defineStore("work", () => {
   }
   return {
     //ข้อมูลในตาราง
-    rows,
+
     columns,
     visibleColumns,
-    fetchList,
+    // fetchListLog,
+    // fetchListTime,
     //ค้นหาข้อมูล
-    filterTable,
+
     selectDate,
-    selectStatus,
-    optionStatus,
-    searchDataFn,
-    filterFn,
+
+    // filterFn,
     convertSatatus,
   };
 });
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 370364815..329a52f2e 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -1,89 +1,23 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-
-/** importStores */
-import { useCounterMixin } from "@/stores/mixin";
-import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+import { ref, onMounted, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** import Components */
-import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
-import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
-import ToolBarDate from "../components/1_Work/ToolBarDate.vue";
+import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
+import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
 
-/** import Type */
-import type { DataRes } from "@/modules/09_leave/interface/response/work";
+// /** importStores */
+// import { useCounterMixin } from "@/stores/mixin";
+// import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** use Store */
-const mixin = useCounterMixin();
-const workStore = useWorklistDataStore();
-const { date2Thai } = mixin;
-const { fetchList } = workStore;
+// const mixin = useCounterMixin();
+// const workStore = useWorklistDataStore();
+// const { dateToISO, date2Thai, showLoader, hideLoader } = mixin;
+// const { fetchListLog, fetchListTime } = workStore;
 
 const tab = ref("1");
-
-/** Hook */
-onMounted(() => {
-  fecthWorkList();
-});
-
-/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน */
-function fecthWorkList() {
-  const listData: DataRes[] = [
-    {
-      fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
-      timeIn: "8:04",
-      coordinatesIn: "สำนักงาน",
-      latIn: "18.7903",
-      longIn: "99.0029",
-      timeOut: "18:04",
-      coordinatesOut: "สำนักงาน",
-      latOut: "18.7903",
-      longOut: "99.0029",
-      status: "normal",
-      date: new Date(new Date()),
-    },
-    {
-      fullName: "นายนครชัย วันดี",
-      timeIn: "8:04",
-      coordinatesIn: "สำนักงาน",
-      latIn: "18.7903",
-      longIn: "99.0029",
-      timeOut: "18:04",
-      coordinatesOut: "สำนักงาน",
-      latOut: "18.7903",
-      longOut: "99.0029",
-      status: "late",
-      date: new Date(new Date()),
-    },
-    {
-      fullName: "นายปิยรมย์ ศิริธาราฟ",
-      timeIn: "8:04",
-      coordinatesIn: "สำนักงาน",
-      latIn: "18.7903",
-      longIn: "99.0029",
-      timeOut: "18:04",
-      coordinatesOut: "สำนักงาน",
-      latOut: "18.7903",
-      longOut: "99.0029",
-      status: "absent",
-      date: new Date("2023-10-27"),
-    },
-    {
-      fullName: "นางสาวปลาทอง ใจกล้า",
-      timeIn: "8:04",
-      coordinatesIn: "สำนักงาน",
-      latIn: "18.7903",
-      longIn: "99.0029",
-      timeOut: "18:04",
-      coordinatesOut: "สำนักงาน",
-      latOut: "18.7903",
-      longOut: "99.0029",
-      status: "normal",
-      date: new Date("2023-10-27"),
-    },
-  ];
-  fetchList(listData); // ส่งข้อมูลไปยัง stores
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -110,14 +44,16 @@ function fecthWorkList() {
       <q-tab-panels v-model="tab" animated>
         <q-tab-panel name="1">
           <!-- <TableList1 /> -->
-          <ToolBar />
-          <TableList />
+          <!-- <ToolBar /> -->
+          <Tab1 />
+          <!-- <TableList /> -->
         </q-tab-panel>
 
         <q-tab-panel name="2">
           <!-- <TabList2Vue /> -->
-          <ToolBarDate />
-          <TableList />
+          <!-- <ToolBarDate /> -->
+          <Tab2 />
+          <!-- <TableList /> -->
         </q-tab-panel>
       </q-tab-panels>
       <!-- </q-card> -->