From 7f0e41ff31f0a48b10a6cec752e93631b8ad9a0a Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 26 Sep 2023 15:57:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B9=80=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99,=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99,=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |   5 +-
 src/modules/03_leave/router.ts                |  49 ---
 src/modules/03_retire/router.ts               |  49 +++
 src/modules/{03_leave => 03_retire}/store.ts  |   0
 .../views/addRetire.vue}                      |  28 +-
 .../Main.vue => 03_retire/views/main.vue}     |   6 +-
 .../{03_leave => 03_retire}/views/result.vue  |   4 +-
 .../04_checkin/componenst/tableHistory.vue    | 205 ++++++++++++
 src/modules/04_checkin/router.ts              |  12 +-
 src/modules/04_checkin/views/Checkin.vue      | 311 +++++++++++-------
 src/modules/04_checkin/views/history.vue      | 172 ++++++++++
 src/modules/05_leave/router.ts                |   3 +
 src/router/index.ts                           |   2 +-
 src/stores/mixin.ts                           |  36 ++
 src/views/MainLayout.vue                      |   5 +-
 15 files changed, 696 insertions(+), 191 deletions(-)
 delete mode 100644 src/modules/03_leave/router.ts
 create mode 100644 src/modules/03_retire/router.ts
 rename src/modules/{03_leave => 03_retire}/store.ts (100%)
 rename src/modules/{03_leave/views/AddLeave.vue => 03_retire/views/addRetire.vue} (94%)
 rename src/modules/{03_leave/views/Main.vue => 03_retire/views/main.vue} (96%)
 rename src/modules/{03_leave => 03_retire}/views/result.vue (99%)
 create mode 100644 src/modules/04_checkin/componenst/tableHistory.vue
 create mode 100644 src/modules/04_checkin/views/history.vue
 create mode 100644 src/modules/05_leave/router.ts

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 2fa8fb2..dff0281 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -72,7 +72,7 @@ const items = ref<any>([
     title: "ลาออก",
     sub: "ทำเรื่องลาออก",
     color: "orange-3",
-    path: "/leave",
+    path: "/retire",
     active: false,
   },
 ]);
@@ -166,7 +166,7 @@ const transferToPage = (path?: string) => {
       <q-card
         flat
         bordered
-        :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'"
+        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'"
         class="q-pb-md col-12"
       >
         <div class="col-12 row q-pa-md">
@@ -186,6 +186,7 @@ const transferToPage = (path?: string) => {
           v-for="(contact, index) in inboxList"
           :key="index"
           class="q-px-md"
+          style="max-height: 74vh;"
         >
           <q-item
             clickable
diff --git a/src/modules/03_leave/router.ts b/src/modules/03_leave/router.ts
deleted file mode 100644
index 1607954..0000000
--- a/src/modules/03_leave/router.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Router ขอโอน
- */
-
-const LeaveMain = () => import("@/modules/03_leave/views/Main.vue")
-
-const AddLeave = () => import("@/modules/03_leave/views/AddLeave.vue")
-
-const ResultQuestionair = () => import("@/modules/03_leave/views/result.vue")
-
-export default [
-	{
-		path: "/leave",
-		name: "leave",
-		component: LeaveMain,
-		meta: {
-			Auth: true,
-			Key: [7],
-		},
-	},
-	{
-		path: "/leave/add",
-		name: "AddLeave",
-		component: AddLeave,
-		meta: {
-			Auth: true,
-			Key: [7],
-		},
-	},
-	{
-		path: "/leave/:id",
-		name: "detailLeave",
-		component: AddLeave,
-		meta: {
-			Auth: true,
-			Key: [7],
-		},
-	},
-
-	{
-		path: "/leave/result/:id",
-		name: "resultLeave",
-		component: ResultQuestionair,
-		meta: {
-			Auth: true,
-			Key: [7],
-		},
-	},
-]
diff --git a/src/modules/03_retire/router.ts b/src/modules/03_retire/router.ts
new file mode 100644
index 0000000..d664f2b
--- /dev/null
+++ b/src/modules/03_retire/router.ts
@@ -0,0 +1,49 @@
+/**
+ * Router ขอโอน
+ */
+
+const Main = () => import("@/modules/03_retire/views/main.vue")
+
+const AddRetire = () => import("@/modules/03_retire/views/addRetire.vue")
+
+const ResultQuestionair = () => import("@/modules/03_retire/views/result.vue")
+
+export default [
+	{
+		path: "/retire",
+		name: "Retire",
+		component: Main,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+	{
+		path: "/retire/add",
+		name: "AddRetire",
+		component: AddRetire,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+	{
+		path: "/retire/:id",
+		name: "detailRetire",
+		component: AddRetire,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+
+	{
+		path: "/retire/result/:id",
+		name: "resultRetire",
+		component: ResultQuestionair,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+]
diff --git a/src/modules/03_leave/store.ts b/src/modules/03_retire/store.ts
similarity index 100%
rename from src/modules/03_leave/store.ts
rename to src/modules/03_retire/store.ts
diff --git a/src/modules/03_leave/views/AddLeave.vue b/src/modules/03_retire/views/addRetire.vue
similarity index 94%
rename from src/modules/03_leave/views/AddLeave.vue
rename to src/modules/03_retire/views/addRetire.vue
index c266f3b..401636d 100644
--- a/src/modules/03_leave/views/AddLeave.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -47,7 +47,7 @@ const dataDetail = ref<any>({
 })
 
 const clickBack = () => {
-	router.push(`/leave`)
+	router.push(`/retire`)
 }
 
 const statusOrder = (val: boolean) => {
@@ -161,7 +161,7 @@ const createFormresign = async () => {
 		.then((res: any) => {
 			let data = res.data.result.id
 			success($q, "บันทึกข้อมูลสำเร็จ")
-			router.push(`/leave/result/${data}`)
+			router.push(`/retire/result/${data}`)
 		})
 		.catch((e: any) => {
 			messageError($q, e)
@@ -193,7 +193,7 @@ const fectDataresign = async (id: string) => {
 		<div class="col-xs-12 col-sm-12 col-md-11">
 			<div class="toptitle text-white col-12 row items-center">
 				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div v-if="routeName == 'AddLeave'">เพิ่มเรื่องลาออก</div>
+				<div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
 				<div v-else>รายละเอียดเรื่องลาออก</div>
 			</div>
 			<q-form ref="myform" class="col-12">
@@ -207,7 +207,7 @@ const fectDataresign = async (id: string) => {
 									outlined
 									v-model="tranferOrg"
 									label="สถานที่ยื่นขอลาออกจากราชการ"
-									:readonly="routeName != 'AddLeave'"
+									:readonly="routeName != 'AddRetire'"
 									:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
 								/>
 								<datepicker class="col-2" menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply readonly borderless :enableTimePicker="false" week-start="0">
@@ -243,7 +243,7 @@ const fectDataresign = async (id: string) => {
 									borderless
 									:enableTimePicker="false"
 									week-start="0"
-									:readonly="routeName != 'AddLeave'"
+									:readonly="routeName != 'AddRetire'"
 								>
 									<template #year="{ year }">
 										{{ year + 543 }}
@@ -256,7 +256,7 @@ const fectDataresign = async (id: string) => {
 											outlined
 											dense
 											hide-bottom-space
-											:readonly="routeName != 'AddLeave'"
+											:readonly="routeName != 'AddRetire'"
 											class="full-width datepicker"
 											:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
 											:label="`${'วันที่ขอลาออกจากราชการ'}`"
@@ -275,11 +275,11 @@ const fectDataresign = async (id: string) => {
 									v-model="noteReason"
 									label="เหตุผลที่ลาออกจากราชการ"
 									type="textarea"
-									:readonly="routeName != 'AddLeave'"
+									:readonly="routeName != 'AddRetire'"
 									:rules="[val => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`]"
 								/>
 
-								<div class="col-12 row" v-if="routeName == 'AddLeave'">
+								<div class="col-12 row" v-if="routeName == 'AddRetire'">
 									<q-uploader
 										flat
 										bordered
@@ -293,7 +293,7 @@ const fectDataresign = async (id: string) => {
 										style="max-width: px"
 									/>
 								</div>
-								<div class="col-12 row" v-if="routeName != 'AddLeave'">
+								<div class="col-12 row" v-if="routeName != 'AddRetire'">
 									<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
 										<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
 									</div>
@@ -312,7 +312,7 @@ const fectDataresign = async (id: string) => {
 									</q-card>
 								</div>
 							</div>
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddLeave'">
+							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
 								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
 									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้บังคับบัญชา</div>
 								</div>
@@ -344,7 +344,7 @@ const fectDataresign = async (id: string) => {
 								</div>
 							</q-card>
 
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddLeave'">
+							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
 								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
 									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้มีอำนาจ</div>
 								</div>
@@ -377,7 +377,7 @@ const fectDataresign = async (id: string) => {
 							</q-card>
 						</div>
 
-						<div class="row col-12 q-pa-md" v-if="routeName != 'AddLeave'">
+						<div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
 							<q-space />
 							<q-btn
 								v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
@@ -391,8 +391,8 @@ const fectDataresign = async (id: string) => {
 							/>
 						</div>
 					</div>
-					<q-separator v-if="routeName == 'AddLeave'" />
-					<div class="row col-12 q-pa-md" v-if="routeName == 'AddLeave'">
+					<q-separator v-if="routeName == 'AddRetire'" />
+					<div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
 						<q-space />
 						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอลาออก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
 					</div>
diff --git a/src/modules/03_leave/views/Main.vue b/src/modules/03_retire/views/main.vue
similarity index 96%
rename from src/modules/03_leave/views/Main.vue
rename to src/modules/03_retire/views/main.vue
index dbca6cf..b823112 100644
--- a/src/modules/03_leave/views/Main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -6,7 +6,7 @@ import { useRouter } from "vue-router"
 import { useCounterMixin } from "@/stores/mixin"
 import http from "@/plugins/http"
 import config from "@/app.config"
-import { useRestDataStore } from "@/modules/03_leave/store"
+import { useRestDataStore } from "@/modules/03_retire/store"
 import Table from "@/components/Table.vue"
 
 const RestData = useRestDataStore()
@@ -99,7 +99,7 @@ const fectListleave = async () => {
 }
 
 const clickAdd = async () => {
-	router.push(`/leave/add`)
+	router.push(`/retire/add`)
 }
 
 const clickBack = () => {
@@ -129,7 +129,7 @@ const clickBack = () => {
 						:titleText="''"
 					>
 						<template #columns="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/leave/` + props.row.id)">
+							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retire/` + props.row.id)">
 								<q-td key="no" :props="props">
 									{{ props.rowIndex + 1 }}
 								</q-td>
diff --git a/src/modules/03_leave/views/result.vue b/src/modules/03_retire/views/result.vue
similarity index 99%
rename from src/modules/03_leave/views/result.vue
rename to src/modules/03_retire/views/result.vue
index 55952de..6c51a94 100644
--- a/src/modules/03_leave/views/result.vue
+++ b/src/modules/03_retire/views/result.vue
@@ -167,7 +167,7 @@ const createResult = async () => {
 		.post(config.API.listquestionnaire(), data)
 		.then((res: any) => {
 			success($q, "บันทึกข้อมูลสำเร็จ")
-			router.push(`/leave`)
+			router.push(`/retire`)
 		})
 		.catch((e: any) => {
 			messageError($q, e)
@@ -179,7 +179,7 @@ const createResult = async () => {
 	<div class="col-12 row justify-center">
 		<div class="col-xs-12 col-sm-12 col-md-11">
 			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/leave`)" />
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/retire`)" />
 			</div>
 			<div class="col-12">
 				<q-card bordered>
diff --git a/src/modules/04_checkin/componenst/tableHistory.vue b/src/modules/04_checkin/componenst/tableHistory.vue
new file mode 100644
index 0000000..a6ef783
--- /dev/null
+++ b/src/modules/04_checkin/componenst/tableHistory.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="q-pb-sm row">
+    <div class="items-center col-12 row q-gutter-sm">
+      <!-- ค้นหาข้อความใน table -->
+      <datepicker
+          menu-class-name="modalfix"
+          v-model="yearly"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              :model-value="yearly + 543"
+              :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+              :label="`${'ปีงบประมาณ'}`"
+              style="width: 150px;"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  color="primary"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      <q-space/>
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        class="gt-xs"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs"
+      >
+        <template> </template>
+      </q-select>
+    </div>
+  </div>
+  <div>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-table2"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="[0]"
+      :grid="grid"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium" v-html="col.label" />
+          </q-th>
+          <q-th auto-width v-if="inputShow" />
+        </q-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+      <template #item="props">
+        <slot v-bind="props" name="item"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref({
+  rowsPerPage: 0,
+});
+const yearly = ref<number>(new Date().getFullYear());
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  grid: Boolean,
+
+  inputShow: Boolean,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/04_checkin/router.ts b/src/modules/04_checkin/router.ts
index 6b7c6a2..7888fc7 100644
--- a/src/modules/04_checkin/router.ts
+++ b/src/modules/04_checkin/router.ts
@@ -2,7 +2,8 @@
  * Router Checkin
  */
 
-const Checkin = () => import("@/modules/04_checkin/views/Checkin.vue");
+const Checkin = () => import("@/modules/04_checkin/views/checkIn.vue");
+const History = () => import("@/modules/04_checkin/views/history.vue");
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */
@@ -16,6 +17,15 @@ export default [
       Key: [7],
     },
   },
+  {
+    path: "/check-in/history",
+    name: "History",
+    component: History,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
   /* {
     path: "/check-out",
     name: "Checkout",
diff --git a/src/modules/04_checkin/views/Checkin.vue b/src/modules/04_checkin/views/Checkin.vue
index 1cdfc19..66feb24 100644
--- a/src/modules/04_checkin/views/Checkin.vue
+++ b/src/modules/04_checkin/views/Checkin.vue
@@ -1,135 +1,191 @@
 <template>
   <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.go(-1)"
-        />
-        เช็คอิน
-      </div>
-      <div class="col-12">
-        <q-card bordered class="q-pa-md">
-          <div class="col-12 row justify-center q-pb-sm">
-            <div
-              class="col-xs-12 col-sm-10 text-h6 text-primary text-center text-weight-bold"
-            >
-              เวลาในขณะนี้
+    <div class="col-xs-12 col-sm-12 col-md-11 ">  
+        <q-card flat class="row col-12 cardNone" >
+          <div :class="getClass(checkIn)">
+            <div class="col-2">
+              <q-btn
+                icon="mdi-arrow-left"
+                unelevated
+                round
+                dense
+                flat
+                color="white"
+                @click="router.go(-1)"
+              />
             </div>
-            <div class="row col-12 justify-center q-py-md">
-              <div class="colunm">
-                <div class="text-h2 text-weight-bold">
-                  {{ formattedH }}<span class="q-ma-md">:</span>
-                </div>
-                <div>ชั่วโมง</div>
-              </div>
-              <div class="colunm">
-                <div class="text-h2 text-weight-bold">
-                  {{ formattedM }}<span class="q-ma-md">:</span>
-                </div>
-                <div>นาที</div>
-              </div>
-              <div class="colunm">
-                <div class="text-h2 text-weight-bold">{{ formattedS }}</div>
-                <div>วินาที</div>
-              </div>
+            <span class="text-body1 text-weight-bold col-8 text-center">
+              <span v-if="checkIn">ลงเวลาเข้างาน</span>
+              <span v-else>ลงเวลาออกงาน</span>
+            </span>
+            <div class="col-2 text-right">
+              <q-btn
+                icon="mdi-history"
+                unelevated
+                rounded
+                dense
+                flat
+                color="white"
+                :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา': ''"
+                :class="$q.screen.gt.xs ? 'q-px-sm': ''"
+                @click="router.push('/check-in/history')"
+              />
             </div>
-            <!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-12 col-sm-8">
-                <q-card
-                  bordered
-                  flat
-                  class="col-12 bg-grey-3"
-                  :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
+          </div>
+          <div class="col-12 q-pa-md text-grey-9">
+            <div class="col-12 row justify-center">
+              <div class="col-12 row q-py-sm justify-center">
+                <div
+                  class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
-                  <!-- <mapCheckin /> -->
-                  <q-img
-                    src="@/assets/map1.png"
-                    :style="
-                      $q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
-                    "
+                  {{ Thai }}
+                </div>
+                <div class="row col-12 justify-center q-py-sm">
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">
+                      {{ formattedH }}<span class="q-ma-md">:</span>
+                    </div>
+                    <!-- <div>ชั่วโมง</div> -->
+                  </div>
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">
+                      {{ formattedM }}<span class="q-ma-md">:</span>
+                    </div>
+                    <!-- <div>นาที</div> -->
+                  </div>
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">{{ formattedS }}</div>
+                    <!-- <div>วินาที</div> -->
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
+              <div class="col-xs-12 col-md-11 row q-col-gutter-md">
+                <div class="col-12 col-sm-8">
+                  <q-card
+                    bordered
+                    flat
+                    class="col-12 bg-grey-2"
+                    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
                   >
-                  </q-img>
-                </q-card>
-              </div>
-              <div class="col-12 col-sm-4">
-                <q-card
-                  flat
-                  class="col-12 bg-grey-3 items-center row"
-                  :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
-                >
-                  <div class="column col-12" v-if="!camera">
-                    <div class="text-center">
-                      <q-icon
-                        name="mdi-image-off-outline"
-                        size="100px"
-                        color="grey-7"
+                    <!-- <mapCheckin /> -->
+                    <q-img
+                      src="@/assets/map1.png"
+                      :style="
+                        $q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
+                      "
+                    ></q-img>
+                    <div class="q-pa-md text-weight-medium text-grey-8">
+                      พื้นที่ใกล้เคียง  
+                      <span class="q-px-sm">:</span> 
+                      {{location}}
+                    </div>
+                    
+                  </q-card>
+                </div>
+                <div class="col-12 col-sm-4">
+                  <q-card
+                    flat
+                    class="cardImg col-12 bg-grey-2 items-center row cursor-pointer "
+                    @click="photo()"
+                    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
+                  >
+                    <div class="column col-12" v-if="!camera">
+                      <div class="text-center">
+                        <q-icon
+                          name="mdi-image-off-outline"
+                          size="100px"
+                          color="blue-grey-3"
+                        />
+                      </div>
+                      <!-- <div class="text-center q-pt-md text-grey-7">
+                        ไม่มีรูปภาพ
+                      </div> -->
+                    </div>
+                    <q-img
+                      v-else
+                      src="@/assets/camera.jpg"
+                      :style="
+                        $q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'
+                      "
+                    >
+                    </q-img>
+                    <!-- <div class="absolute-bottom-right q-ma-md">
+                      <q-btn
+                        round
+                        push
+                        icon="mdi-camera"
+                        size="md"
+                        color="positive"
+                        @click="photo()"
                       />
+                    </div> -->
+                  </q-card>
+                </div>
+                <div class="col-12 q-mb-md">
+                  <q-card bordered flat :class="$q.screen.gt.xs ? 'q-px-md q-py-sm row items-center': 'q-pa-md row items-center'">
+                    <div class="text-weight-bold">สถานที่ทำงาน</div>
+                    <div :class="$q.screen.gt.xs ? 'row q-gutter-md q-pl-md col-sm-6 col-md-3': 'column col-12'">
+                      <q-radio v-model="workplace" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="in-place" label="ในสถานที่" />
+                      <q-radio v-model="workplace" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="off-site" label="นอกสถานที่" />
                     </div>
-                    <div class="text-center q-pt-md text-grey-7">
-                      ไม่มีรูปภาพ
+                    <div class="col-xs-12 col-sm-6 col-md-4">
+                      <q-select v-if="workplace == 'off-site'" dense class="q-ml-md" outlined v-model="model" :options="options" prefix="ระบุสถานที่ :" />
                     </div>
-                  </div>
-                  <q-img
-                    v-else
-                    src="@/assets/camera.jpg"
-                    :style="
-                      $q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
-                    "
-                  >
-                  </q-img>
-                  <div class="absolute-bottom-right q-ma-md">
-                    <q-btn
-                      round
-                      push
-                      icon="mdi-camera"
-                      size="md"
-                      color="positive"
-                      @click="photo()"
-                    />
-                  </div>
-                </q-card>
+                  </q-card>
+                </div>
               </div>
+            </div> 
+          </div>
+          <div class="col-12 text-right" v-if="camera">
+            <div class="col-12">
+              <q-separator />
+            </div>
+            <div class="col-12 q-pa-md">
+              <q-btn
+                :label="checkIn == true ? 'ลงเวลาเข้างาน': 'ลงเวลาออกงาน'"
+                :color="checkIn == true ? 'primary': 'red-9'"
+                push
+                size="14px"
+                :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
+                @click="confirm"
+              />
             </div>
           </div>
-          <div class="col-12 text-right q-pt-md" v-if="camera">
-            <q-btn
-              label="ยืนยันเวลาเข้างาน"
-              color="blue"
-              push
-              size="16px"
-              :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
-              @click="confirm"
-            />
-          </div>
-        </q-card>
-      </div>
+      </q-card>
     </div>
   </div>
 
   <q-dialog v-model="dialogTime">
-    <q-card class="q-px-lg full-width">
-      <q-card-section>
-        <div class="text-h6 text-center q-pt-md">เวลาเข้างานของคุณคือ</div>
-      </q-card-section>
-      <q-card-section style="max-height: 50vh">
-        <div class="row col-12 justify-center q-pb-md">
-          <div class="text-h2 text-weight-bold">
-            {{ formattedH }}<span class="q-ma-md">:</span>
+    <q-card class="full-width cardNone">
+      <div :class="getClass(checkIn)">
+        <div class="text-body1 text-center col-12 text-weight-bold">
+          <span v-if="checkIn">ลงเวลาเข้างานของคุณ</span>
+          <span v-else>ลงเวลาออกงานของคุณ</span>
+        </div>
+      </div>
+      <q-card-section class="row col-12 justify-center">
+        <div class="bg-grey-2 rounded-borders q-pa-md col-11">
+          <div
+            class="col-12 text-subtitle1 text-center text-weight-medium"
+          >
+          {{ Thai }}
           </div>
-          <div class="text-h2 text-weight-bold">{{ formattedM }}</div>
+          <div class="row col-12 justify-center q-pt-sm">
+            <div class="text-h3 text-weight-bold">
+              {{ formattedH }}<span class="q-ma-md">:</span>
+            </div>
+            <div class="text-h3 text-weight-bold">{{ formattedM }}</div>
+          </div>
+        </div>
+        <div class="col-12 text-center row q-pt-md">
+          <div class="col-12 text-subtitle1 text-weight-medium text-secondary">{{location}}</div>
+          <div class="col-12 text-grey-7">{{ coordinates }}</div>
         </div>
       </q-card-section>
 
-      <q-card-actions align="center" class="q-mb-md">
-        <q-btn push label="ตกลง" color="primary" v-close-popup />
+      <q-card-actions align="center" class="q-mb-md row">
+        <q-btn class="col-xs-11 col-sm-6" push label="ตกลง" color="secondary" v-close-popup />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -141,15 +197,25 @@ import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import moment, { Moment } from "moment";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const {
+  dateThai,
+} = mixin;
 // import mapCheckin from "../componenst/mapCheck.vue";
 
 const router = useRouter();
 const $q = useQuasar();
-const diff = ref({});
-const timer = ref(undefined);
 const dateNow = ref(new Date());
-const google = ref(null);
-const map = ref(null);
+const Thai = ref(dateThai(dateNow.value))
+
+const location = ref('สำนักงาน ก.ก');
+const coordinates = ref('13° 43’ 45” N  100° 31’ 26” E');
+const workplace = ref('in-place');
+const model = ref(null);
+const options = ref(['ปฏิบัติงานที่บ้าน', 'ลืมลงเวลาปฏิบัติงาน', 'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่', 'ขออนุญาตออกนอกสถานที่']);
+const checkIn = ref(true);
+
 const camera = ref(false);
 const dialogTime = ref(false);
 
@@ -184,6 +250,17 @@ function updateClock() {
   formattedH.value = hh;
 }
 setInterval(updateClock, 1000); // เรียกอัพเดททุกๆ 1 วิ
+
+const getClass = (val: boolean) => {
+  return {
+    "bg-primary text-white col-12 row items-center q-px-md q-py-sm": val,
+    "bg-red-9 text-white col-12 row items-center q-px-md q-py-sm": !val,
+  };
+};
 </script>
 
-<style></style>
+<style>
+.q-card.cardImg:hover{
+  border: 1px solid #02A998 !important;
+}
+</style>
diff --git a/src/modules/04_checkin/views/history.vue b/src/modules/04_checkin/views/history.vue
new file mode 100644
index 0000000..663d699
--- /dev/null
+++ b/src/modules/04_checkin/views/history.vue
@@ -0,0 +1,172 @@
+<template>
+    <div class="col-12 row justify-center">
+        <div class="col-xs-12 col-sm-12 col-md-11 ">  
+            <q-card flat class="row col-12 cardNone" >
+                <div class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm">
+                    <div class="col-2">
+                        <q-btn
+                            icon="mdi-arrow-left"
+                            unelevated
+                            round
+                            dense
+                            flat
+                            color="white"
+                            @click="router.go(-1)"
+                        />
+                    </div>
+                    <q-space />
+                    <span class="text-body1 text-weight-bold col-8 text-center">ประวัติการลงเวลา</span>
+                    <div class="col-2"></div>
+                </div>
+                <div class="col-12 q-pa-md text-grey-9">
+                    <Table
+                        :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
+                        :rows="rows"
+                        :columns="columns"
+                        :filter="filter"
+                        :visible-columns="visibleColumns"
+                        v-model:inputfilter="filter"
+                        v-model:inputvisible="visibleColumns"
+                        :pagination="initialPagination"
+                        :inputShow="false"
+                        :grid="$q.screen.gt.xs ? false : true"
+                        >
+                        <template #columns="props">
+							<q-tr :props="props">
+								<q-td key="no" :props="props">
+									{{ props.rowIndex + 1 }}
+								</q-td>
+								<q-td key="date" :props="props">
+									{{ props.row.date }}
+								</q-td>
+								<q-td key="in" :props="props">
+									{{ props.row.in }}
+								</q-td>
+								<q-td key="loIn" :props="props">
+									{{ props.row.loIn }}
+								</q-td>
+								<q-td key="out" :props="props">
+									{{ props.row.out }}
+								</q-td>
+                                <q-td key="loOut" :props="props">
+									{{ props.row.loOut }}
+								</q-td>
+                                <q-td key="status" :props="props">
+									<span :class="props.row.status == 'ลงเวลาเรียบร้อย' ? 'text-blue': 'text-orange'">{{ props.row.status }}</span>
+								</q-td>
+							</q-tr>
+						</template>
+                        <template #item="props">
+                            <div
+                                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+                                >
+                                <q-card bordered flat class="q-py-sm">
+                                    <q-list dense>
+                                        <q-item v-for="col in props.cols" :key="col.name" :props="props">
+                                            <q-item-section>
+                                                <q-item-label caption>{{ col.label }}</q-item-label>
+                                            </q-item-section>
+                                            <q-item-section side >
+                                                <q-item-label>
+                                                <span v-if="col.name == 'status'" :class="props.row.status == 'ลงเวลาเรียบร้อย' ? 'text-blue': 'text-orange'">{{ col.value }}</span>
+                                                <span v-else class="text-black">{{ col.value }}</span>
+                                                </q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                   
+                                </q-card>
+                            </div>
+                        </template>
+                    </Table>
+                </div>
+            </q-card>
+            
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
+
+const router = useRouter();
+
+const filter = ref<string>("")
+const visibleColumns = ref<String[]>(["date", "in", "loIn", "out", "loOut", "status"])
+const columns = ref<QTableProps["columns"]>([
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5%;",
+	},
+	{
+		name: "date",
+		align: "left",
+		label: "วัน/เดือน/ปี",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "in",
+		align: "left",
+		label: "เวลาเข้างาน",
+		sortable: true,
+		field: "in",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "loIn",
+		align: "left",
+		label: "พิกัด",
+		sortable: true,
+		field: "loIn",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+    {
+		name: "out",
+		align: "left",
+		label: "เวลาออกงาน",
+		sortable: true,
+		field: "out",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "loOut",
+		align: "left",
+		label: "พิกัด",
+		sortable: true,
+		field: "loOut",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "status",
+		align: "left",
+		label: "สถานะ",
+		sortable: true,
+		field: "status",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:10%;",
+	},
+])
+const rows = ref<any>([
+    {no:'1',date: '13/08/66',in: '11:20',loIn: 'สำนักงาน ก.ก ', out: '',loOut: '',status: '' },
+    {no:'2',date: '12/08/66',in: '08:04',loIn: 'สำนักงาน ก.ก ', out: '17:01',loOut: 'สำนักงาน ก.ก ',status: 'ลงเวลาเรียบร้อย' },
+    {no:'3',date: '11/08/66',in: '08:34',loIn: 'สำนักงาน ก.ก ', out: '17:36',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานครบ' },
+    {no:'4',date: '10/08/66',in: '08:48',loIn: 'สำนักงาน ก.ก ', out: '17:00',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานไม่ครบ' },
+])
+const initialPagination = ref({
+	rowsPerPage: 0,
+})
+</script>
\ No newline at end of file
diff --git a/src/modules/05_leave/router.ts b/src/modules/05_leave/router.ts
new file mode 100644
index 0000000..3ab342b
--- /dev/null
+++ b/src/modules/05_leave/router.ts
@@ -0,0 +1,3 @@
+/**
+ * Router leave
+ */
diff --git a/src/router/index.ts b/src/router/index.ts
index 0459c07..ae5a142 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,7 +4,7 @@ const MainLayout = () => import("@/views/MainLayout.vue")
 const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
 
 import ModuleTransfer from "@/modules/02_transfer/router.ts"
-import ModuleLeave from "@/modules/03_leave/router.ts"
+import ModuleLeave from "@/modules/03_retire/router"
 import ModuleCheckin from "@/modules/04_checkin/router.ts"
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak"
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index e6ac855..a6ef613 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -100,6 +100,41 @@ export const useCounterMixin = defineStore("mixin", () => {
 		return date.getDate().toString().padStart(2, "0") + " " + dstMonth + " " + dstYear + dstTime
 	}
 
+	function dateThai(srcDate: Date, isFullMonth: boolean = true, isTime: boolean = false) {
+		if (srcDate == null) {
+			return null
+			;`
+    `
+		}
+		const date = new Date(srcDate)
+		const isValidDate = Boolean(+date)
+		if (!isValidDate) return srcDate.toString()
+		if (isValidDate && date.getFullYear() < 1000) return srcDate.toString()
+		const fullMonthThai = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"]
+		const abbrMonthThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]
+		let dstYear = 0
+		if (date.getFullYear() > 2500) {
+			dstYear = date.getFullYear()
+		} else {
+			dstYear = date.getFullYear() + 543
+		}
+		let dstMonth = ""
+		if (isFullMonth) {
+			dstMonth = fullMonthThai[date.getMonth()]
+		} else {
+			dstMonth = abbrMonthThai[date.getMonth()]
+		}
+		let dstTime = ""
+		if (isTime) {
+			const H = date.getHours().toString().padStart(2, "0")
+			const M = date.getMinutes().toString().padStart(2, "0")
+			// const S = date.getSeconds().toString().padStart(2, "0")
+			// dstTime = " " + H + ":" + M + ":" + S + " น."
+			dstTime = " " + H + ":" + M + " น."
+		}
+		return date.getDate().toString().padStart(2, "0") + " " + dstMonth + " " + dstYear + dstTime
+	}
+
 	function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
 		if (!srcDate) return srcDate
 		const date = new Date(srcDate)
@@ -597,6 +632,7 @@ export const useCounterMixin = defineStore("mixin", () => {
 	return {
 		calAge,
 		date2Thai,
+		dateThai,
 		dateToISO,
 		notify,
 		notifyError,
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index c7519fe..4fbfc35 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -287,7 +287,6 @@ const doLogout = () => {
           <q-btn
             flat
             round
-            class="bg-white-btn"
             color="white"
             icon="mdi-view-dashboard-outline"
             @click="router.push(`/`)"
@@ -346,8 +345,10 @@ const doLogout = () => {
 }
 .q-card {
   box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
-  border: 1px solid #eeeded;
+  /* border: 1px solid #eeeded; */
+  border-radius: 8px;
 }
+
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }