เพิ่ม ui หน้ารายการลา

src/modules/03_retire/router.ts

@@ -2,11 +2,11 @@
  * Router ขอโอน
  */
 
-const Main = () => import("@/modules/03_retire/views/main.vue")
+const Main = () => import("@/modules/03_retire/views/Main.vue")
 
-const AddRetire = () => import("@/modules/03_retire/views/addRetire.vue")
+const AddRetire = () => import("@/modules/03_retire/views/AddRetire.vue")
 
-const ResultQuestionair = () => import("@/modules/03_retire/views/result.vue")
+const ResultQuestionair = () => import("@/modules/03_retire/views/Result.vue")
 
 export default [
 	{

src/modules/04_checkin/router.ts

@@ -2,8 +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 History = () => import("@/modules/04_checkin/views/History.vue");
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */

src/modules/04_checkin/views/Checkin.vue

@@ -65,7 +65,7 @@
                   <q-card
                     bordered
                     flat
-                    class="col-12 bg-grey-2"
+                    class="col-12 bg-grey-2 shadow-0"
                     :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
                   >
                     <!-- <mapCheckin /> -->
@@ -86,7 +86,8 @@
                 <div class="col-12 col-sm-4">
                   <q-card
                     flat
-                    class="cardImg col-12 bg-grey-2 items-center row cursor-pointer "
+                    bordered
+                    class="cardImg col-12 bg-grey-2 items-center row cursor-pointer  shadow-0"
                     @click="photo()"
                     :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
                   >
@@ -123,7 +124,7 @@
                   </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'">
+                  <q-card bordered flat :class="$q.screen.gt.xs ? 'q-px-md q-py-sm row items-center  shadow-0': 'q-pa-md row items-center  shadow-0'">
                     <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="ในสถานที่" />
@@ -214,7 +215,8 @@ 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 checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง) false
 
 const camera = ref(false);
 const dialogTime = ref(false);

src/modules/04_checkin/views/history.vue

@@ -60,7 +60,7 @@
                             <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-card bordered flat class="q-py-sm shadow-0">
                                     <q-list dense>
                                         <q-item v-for="col in props.cols" :key="col.name" :props="props">
                                             <q-item-section>
@@ -81,7 +81,6 @@
                     </Table>
                 </div>
             </q-card>
-            
         </div>
     </div>
 </template>
@@ -89,7 +88,7 @@
 import type { QTableProps } from "quasar";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
+import Table from "@/modules/04_checkin/componenst/TableHistory.vue"
 
 const router = useRouter();
 

src/modules/05_leave/componenst/Calendar.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="q-mt-sm">
+    <div class="row q-gutter-sm q-pb-sm main-content">
+        <div class="demo-app-main">
+          <FullCalendar
+            ref="fullCalendar"
+            class="demo-app-calendar"
+            :options="calendarOptions"
+          >
+            <template v-slot:eventContent="arg">
+              <b>{{ arg.timeText }}</b>
+              <i>{{ arg.event.title }}</i>
+            </template>
+          </FullCalendar>
+        </div>
+      </div>
+      <div class="row q-col-gutter-lg justify-end">
+        <div class="items-center row">
+          <q-icon size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+          <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
+        </div>
+        <div class="items-center row">
+          <q-icon size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+          <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
+        </div>
+        <div class="items-center row">
+          <q-icon size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+          <span class="text-caption text-grey-8">สถานะอยู่ระหว่างดำเนินการ</span>
+        </div>
+        <div class="items-center row">
+          <q-icon size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+          <span class="text-caption text-grey-8">สถานะใหม่</span>
+        </div>
+      </div>
+    </div>  
+
+</template>
+<script lang="ts">
+import { ref } from "vue";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+
+// import interactionPlugin from "@fullcalendar/interaction";
+export default {
+  components: {
+    FullCalendar, // make the <FullCalendar> tag available
+    calendar() {
+      return (
+        this.$refs.fullCalendar as InstanceType<typeof FullCalendar>
+      ).getApi();
+    },
+  },
+  setup() {
+    const name = ref<string>("");
+    const date = ref<Date>(new Date());
+    const fullCalendar = ref<InstanceType<typeof FullCalendar>>();  
+    const calendarOptions = ref({
+      plugins: [
+        dayGridPlugin,
+        timeGridPlugin,
+        interactionPlugin, // needed for dateClick
+        listPlugin,
+      ],
+      buttonText: {
+        listYear: "รายการ",
+        dayGridMonth: "ปฏิทิน",
+        test: "เพิ่มวันหยุด",
+      },
+      headerToolbar: null,
+      initialView: "dayGridMonth",
+      initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+      selectable: true,
+      dayMaxEvents: true,
+      weekends: true,
+      locale: "th",
+      locales: allLocales,
+      expandRows: true,
+      nowIndicator: true,
+      height: "100%",
+      eventColor: "#e4f3ff",
+      eventTextColor: "#4A5568",
+      eventBorderColor: "#50a5fc",
+      displayEventTime: false,
+      editable: true,
+      events: []
+    });
+    calendarOptions.value.events = [
+      { groupId: "2", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, color: '#E3FDDA' },
+      { groupId: "1", title: "ลาป่วย", start: "2023-09-19", allDay: true, color: '#e4f3ff' },
+      { groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, color: '#FFF1CC' },
+    ];
+    return {
+      calendarOptions,
+      name,
+      date
+    };
+  },
+};
+</script>
+
+<style scope lang="scss">
+.main-content {
+  height: 65vh;
+}
+
+.color-main {
+  color: #18a259;
+}
+
+.padding-content {
+  padding: 10px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  /* padding: 3em; */
+}
+
+.fc {
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.fc-day-today {
+  background-color: #F8F8F8 !important;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 2px solid #17a259; */
+  /* border-radius: 50%;
+  height: 25px;
+  width: 25px;
+  font-weight: bold;
+  color: white !important;
+  background: #17a259; */
+}
+
+.fc-day-today .fc-daygrid-day-frame {
+  padding: 5%;
+}
+
+.fc .fc-button-group > .fc-button {
+  color: black;
+  background-color: #fafafa;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button:active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button.fc-button-active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc-header-toolbar {
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.fc .fc-scrollgrid-liquid > thead {
+  background-color: white;
+}
+
+.dp-custom-cell {
+  border-radius: 50%;
+}
+
+.dp__today {
+  border: 1px solid var(--q-primary);
+}
+
+.dp__range_end,
+.dp__range_start,
+.dp__active_date {
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
+}
+
+.datepicker .q-field__label {
+  padding-left: 5px;
+}
+
+.datepicker .q-field__messages {
+  padding-left: 20px;
+}
+
+.datepicker .q-field__native {
+  padding-left: 5px;
+  color: var(--q-primary) !important;
+}
+
+.datepicker .q-field__prepend {
+  padding-left: 6px;
+}
+
+.datepicker .q-field__append {
+  padding-right: 6px;
+}
+
+.datepicker .q-field__after {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.fc .fc-popover {
+  z-index: 6000;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  cursor: pointer;
+}
+
+.subName {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.subInput {
+  display: flex;
+  align-items: center;
+}
+
+.fc-event {
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
+}
+
+.fc-event-main {
+  text-align: left;
+  padding:0px 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 0px;
+}
+
+.fc-theme-standard td, .fc-theme-standard th{
+  border: 1px solid #EBE9F1;
+}
+</style>

src/modules/05_leave/componenst/ListCalendar.vue

@@ -0,0 +1,97 @@
+<template>
+    <Table
+        :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :inputShow="true"
+        :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="type" :props="props">
+                    {{ props.row.type }}
+                </q-td>
+                <q-td key="date" :props="props">
+                    {{ props.row.date }}
+                </q-td>
+                
+                <q-td key="status" :props="props">
+                    <div class="col-12 row items-center">
+                        <q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+                        <span class="q-pr-md">{{ props.row.status }}</span> 
+                        <q-space/>
+                        <q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก"  size="13px" class="q-px-sm" outline dense color="orange" />
+                    </div>
+                </q-td>
+
+                
+            </q-tr>
+        </template>
+    </Table>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import Table from "@/modules/05_leave/componenst/Table.vue"
+
+
+const filter = ref<string>("")
+const visibleColumns = ref<String[]>(["no", "type", "date", "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: "type",
+		align: "left",
+		label: "ประเภทการลา",
+		sortable: true,
+		field: "type",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "date",
+		align: "left",
+		label: "วันที่ยื่นใบลา",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		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: '20  ก.ย. 2566',type: 'ลาป่วย',status: 'ใหม่' },
+    {no:'2',date: '19  ก.ย. 2566',type: 'ลาป่วย',status: 'อยู่ระหว่างดำเนินการ' },
+    {no:'3',date: '10  ก.ย. 2566',type: 'ลากิจส่วนตัว',status: 'อนุมัติ' },
+])
+const initialPagination = ref({
+	rowsPerPage: 0,
+})
+</script>

src/modules/05_leave/componenst/Table.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="q-py-sm row">
+    <q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
+      <div class="items-center col-12 row q-col-gutter-sm">
+        <!-- ค้นหาข้อความใน table -->
+        <q-select
+            outlined
+            dense
+            lazy-rules
+            v-model="type"
+            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
+            :label="`${'ประเภทใบลา'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOptions"
+            option-value="id"
+            hide-bottom-space
+            style="min-width: 150px;"
+            class="col-xs-12 col-sm-auto"
+          />
+          <q-select
+            outlined
+            dense
+            lazy-rules
+            v-model="status"
+            :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+            :label="`${'สถานะ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="statusOptions"
+            option-value="id"
+            hide-bottom-space
+            style="min-width: 150px;"
+            class="col-xs-12 col-sm-auto"
+          />
+        <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: 150px"
+        >
+          <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>
+    </q-card>
+  </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]"
+    >
+      <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-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></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 type = ref('ทั้งหมด');
+const typeOptions = ref([
+  'ทั้งหมด',
+  'ลาป่วย',
+  'ลากิจส่วนตัว',
+  'ลาคลอดบุตร',
+  'ลาช่วยเหลือภริยาที่คลอดบุตร',
+  'ลาพักผ่อน',
+  'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ',
+  'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล',
+  'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน',
+  'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ',
+  'ลาติดตามคู่สมรส',
+  'ลาฟื้นฟูสมรรถภาพด้านอาชีพ'
+])
+const status = ref('ทั้งหมด');
+const statusOptions = ref([
+  'อนุมัติ',
+  'ไม่อนุมัติ',
+  'อยู่ระหว่างดำเนินการ',
+  'ใหม่',
+])
+
+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>

src/modules/05_leave/interface/request/Calendar.ts

@@ -0,0 +1,77 @@
+interface DataNumObject {
+  id: number;
+  count: number;
+  name: string;
+  color: string;
+}
+
+interface DataDateAddObject {
+  year: number;
+  holidayDate: Date | string;
+  name: string;
+  isSpecial: boolean;
+}
+
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  createdAt?: Date;
+  createdFullName: string;
+  createdUserId: string;
+  holidayDate: Date | string;
+  id: string;
+  isSpecial: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt?: Date;
+  name: string;
+  originalDate: Date;
+}
+
+interface DataDateRowObject {
+  holidayDate: Date;
+  name: string;
+  isSpecial: boolean;
+  id: string;
+}
+
+interface DataDateListsObject {
+  id: string;
+  dateRange: [Date, Date];
+  dataRangeRow: DataDateRowObject[];
+  detail: string;
+  isSpecial: boolean;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: string;
+    align?: string;
+    label: string;
+    sortable?: boolean;
+    field: string | ((row: any) => any);
+    headerStyle?: string;
+    style?: string;
+  };
+}
+
+interface TabsObject {
+  label: string;
+  value: string;
+}
+
+export type {
+  DataNumObject,
+  DataDateAddObject,
+  DataDateMonthObject,
+  RequestItemsObject,
+  DataDateRowObject,
+  DataDateListsObject,
+  Columns,
+  TabsObject,
+};

src/modules/05_leave/router.ts

@@ -1,3 +1,18 @@
 /**
  * Router leave
  */
+const leave = () => import("@/modules/05_leave/views/Main.vue");
+
+/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
+ */
+export default [
+  {
+    path: "/leave",
+    name: "leave",
+    component: leave,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  }
+]

src/modules/05_leave/views/Main.vue

@@ -0,0 +1,230 @@
+<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>
+			</div>
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+            <div class="row col-12 q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-9 col-md-9 row">
+                    <q-card bordered class="q-pa-md col-12">
+                        <div class="row col-12">
+                            <div class="row items-center">
+                                <!-- filter เลือกเดือนปี -->
+                                <datepicker
+                                    v-model="dateMonth"
+                                    :locale="'th'"
+                                    autoApply
+                                    month-picker
+                                    :enableTimePicker="false"
+                                    v-if="currentTab === 'calendar'"
+                                    >
+                                    <template #year="{ year }">{{ year + 543 }}</template>
+                                    <template #year-overlay-value="{ value }">{{
+                                        parseInt(value + 543)
+                                    }}</template>
+                                    <template #trigger>
+                                        <q-input
+                                        :model-value="monthYearThai(dateMonth)"
+                                        dense
+                                        outlined
+                                        hide-bottom-space
+                                        style="width: 130px"
+                                        >
+                                        <template v-slot:prepend>
+                                            <q-icon
+                                            name="event"
+                                            class="cursor-pointer"
+                                            style="color: var(--q-primary)"
+                                            >
+                                            </q-icon>
+                                        </template>
+                                        </q-input>
+                                    </template>
+                                </datepicker>
+
+                                <!-- filter เลือกปี -->
+                                <datepicker
+                                    v-model="dateYear"
+                                    :locale="'th'"
+                                    autoApply
+                                    year-picker
+                                    :enableTimePicker="false"
+                                    v-if="currentTab === 'list'"
+                                    >
+                                    <template #year="{ year }">{{ year + 543 }}</template>
+                                    <template #year-overlay-value="{ value }">{{
+                                        parseInt(value + 543)
+                                    }}</template>
+                                    <template #trigger>
+                                        <q-input
+                                        :model-value="dateYear + 543"
+                                        dense
+                                        outlined
+                                        style="width: 100px"
+                                        hide-bottom-space
+                                        >
+                                        <template v-slot:prepend>
+                                            <q-icon
+                                            name="event"
+                                            class="cursor-pointer"
+                                            style="color: var(--q-primary)"
+                                            >
+                                            </q-icon>
+                                        </template>
+                                        </q-input>
+                                    </template>
+                                </datepicker>
+                                <div class="q-ml-sm">
+                                    <!-- icon เพิ่มวันหยุด -->
+                                    <q-btn round dense flat size="13px" class="q-px-sm">
+                                        <q-icon
+                                        name="mdi-plus"
+                                        size="22px"
+                                        color="primary"
+                                        />
+                                        <q-tooltip>เพิ่มวันหยุด</q-tooltip>
+                                    </q-btn>
+                                </div>
+                            </div>
+                            <q-space />
+                            <div class="justify-center row items-center">
+                                <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+                                <q-tabs
+                                    v-model="currentTab"
+                                    indicator-color="transparent"
+                                    align="left"
+                                    active-color="activetab"
+                                    class="text-nativetab"
+                                    inline-label
+                                    dense
+                                    >
+                                    <q-btn
+                                        name="calendar"
+                                        round
+                                        size="12px"
+                                        flat
+                                        icon="mdi-calendar-month"
+                                        @click="currentTab = 'calendar'"
+                                        :color="currentTab == 'calendar' ? 'primary' : 'grey-6'"
+                                        class="q-mr-sm"
+                                        >
+                                        <q-tooltip>ปฏิทิน</q-tooltip>
+                                    </q-btn>
+                                    <q-separator vertical inset />
+                                    <q-btn
+                                        name="list"
+                                        round
+                                        size="12px"
+                                        flat
+                                        icon="mdi-format-list-bulleted"
+                                        @click="currentTab = 'list'"
+                                        :color="currentTab == 'list' ? 'primary' : 'grey-6'"
+                                        class="q-ml-sm"
+                                        >
+                                        <q-tooltip>รายการ</q-tooltip>
+                                    </q-btn>
+                                </q-tabs>
+                            </div>
+                        </div>
+                        <div class="col-12 ">
+                            <subCalendarComponent v-if="currentTab === 'calendar'"/>
+                        </div>
+                        
+                        <div class="col-12 ">
+                            <subListCalendarComponent v-if="currentTab === 'list'" />
+                        </div>
+                    </q-card>
+                </div>
+                <div class="col-xs-12 col-sm-3 col-md-3 row">
+                    <q-card bordered class="col-12 row caedNone">
+                        <div class="col-12 row">
+                            <q-card class="row col-12 items-center q-px-md q-py-sm">
+                                <div class="text-weight-bold">สถิติการลา</div>
+                                <q-space/>
+                                <q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" label="ตารางสถิติการลา" />
+                            </q-card>
+                            <div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item,index) in itemPie" :key="index">
+                                <q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
+                                    <q-knob
+                                        readonly
+                                        v-model="item.value"
+                                        show-value
+                                        size="70px"
+                                        :thickness="0.15"
+                                        track-color="grey-3"
+                                        :class=" `${item.color}`"
+                                        >
+                                            <span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
+                                    </q-knob>
+                                    <div class="col-12 text-center text-weight-medium q-py-xs">
+                                        {{item.text}}
+                                    </div>
+                                    <div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
+                                        
+                                        <div class="col-4 column q-pa-xs text-center">
+                                            <span class="text-weight-bold">{{ item.all }}</span>
+                                            <span class="text-grey-7 text-caption">ทั้งหมด</span>
+                                        </div>
+                                        <q-separator vertical />
+                                        <div class="col-4 column q-pa-xs text-center">
+                                            <span class="text-weight-bold">{{ item.use }}</span>
+                                            <span class="text-grey-7 text-caption">ใช้ไป</span>
+                                        </div>
+                                        <q-separator vertical />
+                                        <div class="col-4 column q-pa-xs text-center">
+                                            <span class="text-weight-bold">{{ item.remain }}</span>
+                                            <span class="text-grey-7 text-caption">คงเหลือ</span>
+                                        </div>
+                                    </div>
+                                </q-card>
+                            </div>
+                        </div>
+                    </q-card>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { defineComponent, onMounted } from "@vue/runtime-core";
+import { reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue";
+import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  DataDateMonthObject
+} from "@/modules/05_leave/interface/request/Calendar.ts";
+
+const router = useRouter();
+const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
+const dateMonth = ref<number>(new Date().getFullYear());
+const dateYear = ref<number>(new Date().getFullYear());
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai} = mixin;
+/**
+ * แปลง ปีและเดือนเป็นภาษาไทย
+ * @param val datepicker แบบเลือกปีและเดือน
+ */
+ const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+
+const value = ref(90);
+const itemPie =  ref([
+    {text: 'ลาป่วย', color: 'text-pink-5', value: 90, all: '10', use: '9', remain: '1'},
+    {text: 'ลากิจส่วนตัว', color: 'text-deep-purple', value: 80, all: '12', use: '9', remain: '3'},
+    {text: 'ลาพักผ่อน', color: 'text-indigo', value: 78, all: '20', use: '17', remain: '3'}
+])
+</script>
+<style>
+.borderTop{
+    border-top: 1px solid #EDEDED ;
+    border-bottom:1px solid #EDEDED ;
+}
+</style>

src/router/index.ts

@@ -4,8 +4,9 @@ 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_retire/router"
+import ModuleRetire from "@/modules/03_retire/router"
 import ModuleCheckin from "@/modules/04_checkin/router.ts"
+import ModuleLeave from "@/modules/05_leave/router.ts"
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak"
 
@@ -27,8 +28,9 @@ const router = createRouter({
 					},
 				},
 				...ModuleTransfer,
-				...ModuleLeave,
+				...ModuleRetire,
-				...ModuleCheckin
+				...ModuleCheckin,
+				...ModuleLeave
 			],
 		},
 	],

src/views/MainLayout.vue

@@ -129,6 +129,7 @@ const doLogout = () => {
               name="leave"
               label="การลา"
               icon="mdi-calendar-blank-outline"
+              @click="router.push(`/leave`)"
             />
           </q-tabs>
         </div>
@@ -298,7 +299,13 @@ const doLogout = () => {
             icon="mdi-map-marker-check-outline"
             @click="router.push(`/check-in`)"
           />
-          <q-btn flat round color="white" icon="mdi-calendar-blank-outline" />
+          <q-btn 
+            flat 
+            round 
+            color="white" 
+            icon="mdi-calendar-blank-outline"  
+            @click="router.push(`/leave`)"
+          />
           <q-btn flat round color="white" icon="mdi-account-outline" />
         </div>
       </q-toolbar>
@@ -366,4 +373,8 @@ const doLogout = () => {
 .q-field--outlined .q-icon {
   color: #7474747f;
 }
+
+.shadow-0{
+  box-shadow:none !important;
+}
 </style>