ปรับ Code การลาลงเวลา

src/modules/09_leave/views/02_WorkingMain.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** import Components */
+import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
+import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
+import DialogReport from "@/modules/09_leave/components/02_WorkList/DialogReport.vue";
+
+const tab = ref("1");
+
+const modalReport = ref<boolean>(false);
+
+function onClickOpenDialog() {
+  modalReport.value = !modalReport.value;
+}
+</script>
+<template>
+  <div class="row">
+    <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
+    <q-space />
+    <q-btn
+      dense
+      flat
+      class="text-blue"
+      label="รายงานสถิติการลงเวลา"
+      @click="onClickOpenDialog"
+    >
+      <q-tooltip>รายงานสถิติการลงเวลา</q-tooltip>
+    </q-btn>
+  </div>
+
+  <div>
+    <q-card bordered flat>
+      <q-tabs
+        v-model="tab"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
+        <q-tab name="2" label="รายการลงเวลา" />
+      </q-tabs>
+
+      <q-separator />
+      <div class="q-pa-sm">
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="1">
+            <Tab1 />
+          </q-tab-panel>
+
+          <q-tab-panel name="2">
+            <Tab2 />
+          </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-card>
+  </div>
+
+  <DialogReport :modal="modalReport" :close="onClickOpenDialog" />
+</template>
+
+<style scoped></style>