From f810ef6cec6515f497c3ba668fd035b578576d0b Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Sun, 8 Dec 2024 12:50:18 +0700
Subject: [PATCH] fixing sub path

---
 src/router/index.ts      |  55 ++-
 src/views/MainLayout.vue | 741 +++++++++++++++++++++++----------------
 vite.config.ts           |  37 +-
 3 files changed, 490 insertions(+), 343 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 41e589c..cace3f2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,12 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 const MainLayout = () => import("@/views/MainLayout.vue");
 const Metadata = () => import("@/modules/01_metadata/views/Main.vue");
-const Organizational = () => import("@/modules/02_organizational/views/Main.vue");
+const Organizational = () =>
+  import("@/modules/02_organizational/views/Main.vue");
 const Registration = () => import("@/modules/03_registration/views/Main.vue");
-const Registemployee = () => import("@/modules/04_registry-employee/views/Main.vue");
+const Registemployee = () =>
+  import("@/modules/04_registry-employee/views/Main.vue");
 const Order = () => import("@/modules/05_order/views/Main.vue");
 const Recruitmain = () => import("@/modules/06_recruitmain/views/Main.vue");
 const Placement = () => import("@/modules/07_placement/views/Main.vue");
@@ -16,26 +18,18 @@ const Leaveadmin = () => import("@/modules/11_leaveadmin/views/Main.vue");
 const Estimate = () => import("@/modules/12_estimate/views/Main.vue");
 const Discipline = () => import("@/modules/13_discipline/views/Main.vue");
 
-
-
-
-
-
-
-
-
 const Contact = () => import("@/modules/00_contact/views/Main.vue");
 
 const Maintenance = () => import("@/modules/001_Maintenance/views/Main.vue");
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(`/faq/`),
   routes: [
     {
-      path: '/',
-      name: 'home',
+      path: "/",
+      name: "home",
       component: MainLayout,
-      children:[
+      children: [
         {
           path: "/metadata",
           name: "metadata",
@@ -74,66 +68,59 @@ const router = createRouter({
         {
           path: "/order",
           name: "Order",
-          component: Order
+          component: Order,
         },
 
         {
           path: "/recruitmain",
           name: "Recruitmain",
-          component: Recruitmain
+          component: Recruitmain,
         },
 
         {
           path: "/placement",
           name: "Placement",
-          component: Placement
+          component: Placement,
         },
 
         {
           path: "/retirement",
           name: "Retirement",
-          component: Retirement
+          component: Retirement,
         },
 
         {
           path: "/insignia",
           name: "Insignia",
-          component: Insignia
+          component: Insignia,
         },
 
         {
           path: "/leaveuser",
           name: "leaveuser",
-          component: Leaveuser
+          component: Leaveuser,
         },
 
         {
           path: "/leaveadmin",
           name: "leaveadmin",
-          component: Leaveadmin
+          component: Leaveadmin,
         },
 
         {
           path: "/estimate",
           name: "estimate",
-          component: Estimate
+          component: Estimate,
         },
 
         {
           path: "/discipline",
           name: "discipline",
-          component: Discipline
+          component: Discipline,
         },
-
-
-      ]
+      ],
     },
-  ]
-})
+  ],
+});
 
 export default router;
-
-
-
-
-
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 303f460..eedb3e2 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,352 +1,510 @@
 <script setup lang="ts">
-import { ref} from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 const router = useRouter();
 
 const $q = useQuasar();
 
-const tab = ref('')
+const tab = ref("");
 
 const currentRouteName = router.currentRoute.value.name;
 const currentRoute = ref(currentRouteName);
-const text = ref('');
+const text = ref("");
 const tabManu = [
-	{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
-	{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
-	{name: '3',label:'ทะเบียนประวัติ',path: 'registration'},
-	{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: 'registemployee'},
-	{name: '5',label:'ออกคำสั่ง',path: 'order'},
-	{name: '6',label:'สรรหา',path: 'recruitmain'},
+  { name: "metadata", label: "ข้อมูลหลัก", path: "metadata" },
+  {
+    name: "organizational",
+    label: "โครงสร้างอัตรากำลัง",
+    path: "organizational",
+  },
+  { name: "3", label: "ทะเบียนประวัติ", path: "registration" },
+  { name: "4", label: "ทะเบียนประวัติลูกจ้าง", path: "registemployee" },
+  { name: "5", label: "ออกคำสั่ง", path: "order" },
+  { name: "6", label: "สรรหา", path: "recruitmain" },
 ];
 const tabManu2 = [
-	{name: '7',label:'บรรจุ แต่งตั้ง ย้าย โอน',path: 'placement'},
-	{name: '8',label:'พ้นราชการ',path: 'retirement'},
-	{name: '9',label:'เครื่องราชอิสริยาภรณ์',path: 'insignia'},
-	{name: '10',label:'การลา',path: ''},
-	{name: '11',label:'วินัย',path: ''},
+  { name: "7", label: "บรรจุ แต่งตั้ง ย้าย โอน", path: "placement" },
+  { name: "8", label: "พ้นราชการ", path: "retirement" },
+  { name: "9", label: "เครื่องราชอิสริยาภรณ์", path: "insignia" },
+  { name: "10", label: "การลา", path: "" },
+  { name: "11", label: "วินัย", path: "" },
 ];
 
 const mainmenu = [
-	{text: 'ข้อมูลหลัก',img: new URL('../assets/icon/1_metadata.png', import.meta.url).href , icon:'mdi-account-outline', path: 'metadata'},
-	{text: 'โครงสร้างอัตรากำลัง',img: new URL('../assets/icon/2_organizational.png', import.meta.url).href, icon:'mdi-account-group-outline',path: 'organizational'},
-	{text: 'ทะเบียนประวัติ',img: new URL('../assets/icon/3_registry.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'registration'},
-	{text: 'ทะเบียนประวัติลูกจ้าง',img: new URL('../assets/icon/4_registry-employee.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'registemployee'},
-	{text: 'ออกคำสั่ง',img: new URL('../assets/icon/5_order.png', import.meta.url).href, icon:'mdi-file-certificate-outline',path: 'order'},
-	{text: 'สรรหา',img: new URL('../assets/icon/6_recruitmain.png', import.meta.url).href, icon:'mdi-magnify',path: 'recruitmain'},
-	{text: 'บรรจุ แต่งตั้ง ย้าย โอน',img: new URL('../assets/icon/7_placement.png', import.meta.url).href, icon:'mdi-account-check',path: 'placement'},
-	{text: 'พ้นราชการ',img: new URL('../assets/icon/8_retirement.png', import.meta.url).href, icon:'แ',path: 'retirement'},
-	{text: 'เครื่องราชอิสริยาภรณ์',img: new URL('../assets/icon/9_insignia.png', import.meta.url).href, icon:'mdi-medal-outline',path: 'insignia'},
+  {
+    text: "ข้อมูลหลัก",
+    img: new URL("../assets/icon/1_metadata.png", import.meta.url).href,
+    icon: "mdi-account-outline",
+    path: "metadata",
+  },
+  {
+    text: "โครงสร้างอัตรากำลัง",
+    img: new URL("../assets/icon/2_organizational.png", import.meta.url).href,
+    icon: "mdi-account-group-outline",
+    path: "organizational",
+  },
+  {
+    text: "ทะเบียนประวัติ",
+    img: new URL("../assets/icon/3_registry.png", import.meta.url).href,
+    icon: "mdi-file-account-outline",
+    path: "registration",
+  },
+  {
+    text: "ทะเบียนประวัติลูกจ้าง",
+    img: new URL("../assets/icon/4_registry-employee.png", import.meta.url)
+      .href,
+    icon: "mdi-file-account-outline",
+    path: "registemployee",
+  },
+  {
+    text: "ออกคำสั่ง",
+    img: new URL("../assets/icon/5_order.png", import.meta.url).href,
+    icon: "mdi-file-certificate-outline",
+    path: "order",
+  },
+  {
+    text: "สรรหา",
+    img: new URL("../assets/icon/6_recruitmain.png", import.meta.url).href,
+    icon: "mdi-magnify",
+    path: "recruitmain",
+  },
+  {
+    text: "บรรจุ แต่งตั้ง ย้าย โอน",
+    img: new URL("../assets/icon/7_placement.png", import.meta.url).href,
+    icon: "mdi-account-check",
+    path: "placement",
+  },
+  {
+    text: "พ้นราชการ",
+    img: new URL("../assets/icon/8_retirement.png", import.meta.url).href,
+    icon: "แ",
+    path: "retirement",
+  },
+  {
+    text: "เครื่องราชอิสริยาภรณ์",
+    img: new URL("../assets/icon/9_insignia.png", import.meta.url).href,
+    icon: "mdi-medal-outline",
+    path: "insignia",
+  },
 ];
 
-
-
 const mainmenu1 = [
-	{text: 'การลา (User)',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-calendar',path: 'leaveuser'},
-	{text: 'ระบบการลา (admin)',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'leaveadmin'},
-	{text: 'ระบบประเมินบุคคล',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'estimate'},
-	{text: 'ระบบดำเนินการทางวินัย',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'discipline'}
-
+  {
+    text: "การลา (User)",
+    img: new URL("../assets/.png", import.meta.url).href,
+    icon: "mdi-calendar",
+    path: "leaveuser",
+  },
+  {
+    text: "ระบบการลา (admin)",
+    img: new URL("../assets/.png", import.meta.url).href,
+    icon: "mdi-scale-balance",
+    path: "leaveadmin",
+  },
+  {
+    text: "ระบบประเมินบุคคล",
+    img: new URL("../assets/.png", import.meta.url).href,
+    icon: "mdi-scale-balance",
+    path: "estimate",
+  },
+  {
+    text: "ระบบดำเนินการทางวินัย",
+    img: new URL("../assets/.png", import.meta.url).href,
+    icon: "mdi-scale-balance",
+    path: "discipline",
+  },
 ];
 
 const mainmanual = [
-	/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
-	{text: 'คู่มือการใช้งาน',img: new URL('../assets/icon/00_manual.png', import.meta.url).href, icon:'mdi-book-open-page-variant'},	
+  /*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
+  {
+    text: "คู่มือการใช้งาน",
+    img: new URL("../assets/icon/00_manual.png", import.meta.url).href,
+    icon: "mdi-book-open-page-variant",
+  },
 ];
 
-
-
-
 const mainmaintenance = [
-	/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
-	{text: 'ดูแลรักษาระบบ',img: new URL('../assets/icon/01_maintenance.png', import.meta.url).href, icon:'mdi-laptop',path: 'maintenance'}
+  /*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
+  {
+    text: "ดูแลรักษาระบบ",
+    img: new URL("../assets/icon/01_maintenance.png", import.meta.url).href,
+    icon: "mdi-laptop",
+    path: "maintenance",
+  },
 ];
 
-
 const redirectToManual = () => {
-  const newTab = window.open('https://bma-ehr-manual.frappet.synology.me/', '_blank');
+  const newTab = window.open(
+    `${window.location.protocol}//${window.location.hostname}/manual`,
+    "_blank"
+  );
   if (newTab) {
     newTab.focus();
   }
 };
 
 const clickMain = (val: string) => {
-	router.push(val)
-	currentRoute.value = val
-	tab.value=val
-	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  router.push(val);
+  currentRoute.value = val;
+  tab.value = val;
+  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
 };
 
-const clickTab= (val2: string) => {
-	router.push(val2)
-	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-	currentRoute.value = val2
+const clickTab = (val2: string) => {
+  router.push(val2);
+  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  currentRoute.value = val2;
 };
 
 const goHome = () => {
-	router.push('/')
-	currentRoute.value = 'home'
-	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  router.push("/");
+  currentRoute.value = "home";
+  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
 };
 
 const click = () => {
-	router.push('/contact')
-	currentRoute.value = 'contact'
-	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  router.push("/contact");
+  currentRoute.value = "contact";
+  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
 };
 
 const clickmainte = () => {
-	router.push('/maintenance')
-	currentRoute.value = 'maintenance'
-	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  router.push("/maintenance");
+  currentRoute.value = "maintenance";
+  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
 };
 
-const scrollInfo = ref({})
-const onScroll = (info: any) => { scrollInfo.value = info}
-
-window.onpopstate = function() {
-	currentRoute.value = 'home'
-}; history.pushState({}, '');
+const scrollInfo = ref({});
+const onScroll = (info: any) => {
+  scrollInfo.value = info;
+};
 
+window.onpopstate = function () {
+  currentRoute.value = "home";
+};
+history.pushState({}, "");
 </script>
 <!-- โครงเว็บ -->
 <template>
-	<q-layout view="hHh LpR fFr" @scroll="onScroll" >		
-		<!-- header -->
-		<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
-			<q-toolbar class="items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
-				<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
-					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
-					<q-separator vertical inset class="q-ml-md" />
-					<div class="row q-ml-md items-center q-pt-xs">
-						<div 
-							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
-							class="text-body2 text-weight-bolder col-12"
-							
-						>
-							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
-						</div>
+  <q-layout view="hHh LpR fFr" @scroll="onScroll">
+    <!-- header -->
+    <q-header
+      flat
+      :class="
+        scrollInfo.position >= 10
+          ? 'text-dark col-12 bgHeader'
+          : 'text-dark col-12 bg-transparent'
+      "
+      height-hint="7"
+    >
+      <q-toolbar
+        class="items-center"
+        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
+      >
+        <div
+          class="row items-center no-wrap cursor-pointer"
+          @click="goHome"
+          v-if="$q.screen.gt.xs"
+        >
+          <q-img
+            src="@/assets/logo.png"
+            spinner-color="white"
+            style="height: 35px; max-width: 35px"
+          />
+          <q-separator vertical inset class="q-ml-md" />
+          <div class="row q-ml-md items-center q-pt-xs">
+            <div
+              style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
+              class="text-body2 text-weight-bolder col-12"
+            >
+              ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
+            </div>
 
-						<div class="text-caption text-white">SUPPORT</div>
+            <div class="text-caption text-white">SUPPORT</div>
+          </div>
+        </div>
 
-					</div>
-					
-				</div>
-				
-				<div v-else class="row items-center">
-					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
-				</div>
-				<q-space></q-space>
-				<div class="row q-col-gutter-x-sm">
-					<div><q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/></div>
-					<div><q-btn class="text-weight-medium" flat color="white"  label="ติดต่อเรา" @click="click()"/></div>
-				</div>
-			</q-toolbar>
-		</q-header>
+        <div v-else class="row items-center">
+          <img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
+        </div>
+        <q-space></q-space>
+        <div class="row q-col-gutter-x-sm">
+          <div>
+            <q-btn
+              class="text-weight-medium"
+              flat
+              color="white"
+              label="หน้าแรก"
+              @click="goHome"
+            />
+          </div>
+          <div>
+            <q-btn
+              class="text-weight-medium"
+              flat
+              color="white"
+              label="ติดต่อเรา"
+              @click="click()"
+            />
+          </div>
+        </div>
+      </q-toolbar>
+    </q-header>
 
-		<div class="bg-top"  :style="$q.screen.gt.xs ? 'height: 65px;': 'height: 65px;'" />
-		<!-- end header -->
+    <div
+      class="bg-top"
+      :style="$q.screen.gt.xs ? 'height: 65px;' : 'height: 65px;'"
+    />
+    <!-- end header -->
 
-		<q-page-container class="bg-grey-2 q-pb-md">
-			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -150px;': 'padding: 5% 4%; margin-top: -250px;'">
-				<div class="col-12 row justify-center">
-					<div class="col-xs-10 col-md-8 text-h6 text-white">
-					<!--	<div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
+    <q-page-container class="bg-grey-2 q-pb-md">
+      <q-page
+        :style="
+          $q.screen.gt.xs
+            ? 'padding: 1.8% 2%; margin-top: -150px;'
+            : 'padding: 5% 4%; margin-top: -250px;'
+        "
+      >
+        <div class="col-12 row justify-center">
+          <div class="col-xs-10 col-md-8 text-h6 text-white">
+            <!--	<div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
 						<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
 							<template v-slot:prepend>
 								<q-icon name="search" />
 							</template>
 						</q-input> -->
-					</div>
-				
+          </div>
 
+          <div
+            class="col-xs-10 col-md-8 row q-col-gutter-md"
+            style="margin-top: 100px"
+            v-if="currentRoute == 'home'"
+          >
+            <div class="col-12 row justify-center text-h6 text-dark">
+              คู่มือการใช้งาน
+            </div>
+            <div class="col-12"><q-separator color="grey-4" /></div>
+            <div class="col-12">
+              <div class="col-12 row q-col-gutter-lg">
+                <div
+                  class="col-xs-12 col-sm-12"
+                  v-for="(menu, index) in mainmanual"
+                  :key="index"
+                >
+                  <q-card
+                    class="q-pa-md row justify-center text-dark cursor-pointer cardmenu"
+                    @click="redirectToManual"
+                    ><!-- router.push({ name: `${}`}) -->
+                    <!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
+                    <q-avatar rounded size="60px">
+                      <q-img :src="menu.img" />
+                    </q-avatar>
+                    <div class="col-12 q-pt-md text-center">
+                      {{ menu.text }}
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
 
+          <div
+            class="col-xs-10 col-md-8 row q-col-gutter-md"
+            style="margin-top: 80px"
+            v-if="currentRoute == 'home'"
+          >
+            <div class="col-12 row justify-center text-h6 text-dark">
+              ระบบทรัพยากรบุคคล
+            </div>
+            <div class="col-12"><q-separator color="grey-4" /></div>
+            <div class="col-12">
+              <div class="col-12 row q-col-gutter-lg">
+                <div
+                  class="icon_1 col-xs-12 col-sm-4"
+                  v-for="(menu, index) in mainmenu"
+                  :key="index"
+                >
+                  <q-card
+                    class="connn q-pa-md row justify-center text-dark cursor-pointer cardmenu"
+                    @click="clickMain(menu.path)"
+                    ><!-- router.push({ name: `${}`}) -->
+                    <!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
+                    <q-avatar rounded size="60px">
+                      <q-img :src="menu.img" />
+                    </q-avatar>
+                    <div class="col-12 q-pt-md text-center">
+                      {{ menu.text }}
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
 
+          <div
+            class="col-xs-10 col-md-8 row q-col-gutter-md"
+            style="margin-top: 80px"
+            v-if="currentRoute == 'home'"
+          >
+            <div class="col-12 row justify-center text-h6 text-dark">
+              ดูแลรักษาระบบ
+            </div>
+            <div class="col-12"><q-separator color="grey-4" /></div>
+            <div class="col-12">
+              <div class="col-12 row q-col-gutter-lg">
+                <div
+                  class="col-xs-12 col-sm-12"
+                  v-for="(menu, index) in mainmaintenance"
+                  :key="index"
+                >
+                  <q-card
+                    class="q-pa-md row justify-center text-dark cursor-pointer cardmenu"
+                    @click="clickmainte(menu.path)"
+                    ><!-- router.push({ name: `${}`}) -->
+                    <!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
+                    <q-avatar rounded size="60px">
+                      <q-img :src="menu.img" />
+                    </q-avatar>
+                    <div class="col-12 q-pt-md text-center">
+                      {{ menu.text }}
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
 
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 100px;" v-if="currentRoute == 'home'">
-						<div class="col-12 row justify-center text-h6 text-dark">คู่มือการใช้งาน</div>
-						<div class="col-12"><q-separator color="grey-4" /></div>
-						<div class="col-12">
-							<div class="col-12 row q-col-gutter-lg">
+          <div
+            class="col-xs-10 col-md-8 row q-col-gutter-md"
+            style="margin-top: 80px"
+            v-if="currentRoute == 'home'"
+          >
+            <div class="col-12 row justify-center text-h6 text-grey-5">
+              อยู่ในระหว่างพัฒนาระบบ
+            </div>
+            <div class="col-12"><q-separator color="grey-4" /></div>
+            <div class="col-12">
+              <div class="col-12 row q-col-gutter-lg">
+                <div
+                  class="icon_1 col-xs-12 col-sm-4"
+                  v-for="(menu, index) in mainmenu1"
+                  :key="index"
+                >
+                  <q-card
+                    class="connn q-pa-md row justify-center text-grey-5 cursor-pointer cardmenu"
+                    @click="clickMain(menu.path)"
+                    ><!-- router.push({ name: `${}`}) -->
+                    <!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
+                    <q-avatar rounded size="60px">
+                      <q-img :src="menu.img" />
+                    </q-avatar>
+                    <div class="col-12 q-pt-md text-center">
+                      {{ menu.text }}
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
 
-							<div class="col-xs-12 col-sm-12" 
-								v-for="(menu , index) in mainmanual"
-								:key="index"
-							>
-							
-								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="redirectToManual" ><!-- router.push({ name: `${}`}) -->
-									<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
-									<q-avatar rounded size="60px">
-										<q-img :src="menu.img" />
-									</q-avatar>
-									<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
-								</q-card>
-							</div>	
-							</div>
-						</div>
-					</div>
+          <div class="col-8 row" style="margin-top: 80px" v-else>
+            <q-layout>
+              <q-page-container class="col-12">
+                <q-page>
+                  <div class="col-12 row">
+                    <div class="col-12 q-mt-lg">
+                      <router-view :key="$route.fullPath" />
+                    </div>
 
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
-						<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
-						<div class="col-12"><q-separator color="grey-4" /></div>
-						<div class="col-12">
-							<div class="col-12 row q-col-gutter-lg">
-
-							<div class="icon_1 col-xs-12 col-sm-4" 
-								v-for="(menu , index) in mainmenu"
-								:key="index"
-							>
-								<q-card class="connn q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
-									<q-avatar rounded size="60px">
-										<q-img :src="menu.img" />
-									</q-avatar>
-									<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
-								</q-card>
-							</div>	
-							</div>
-						</div>
-					</div>
-
-
-
-
-				
-
-
-
-
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
-						<div class="col-12 row justify-center text-h6 text-dark">ดูแลรักษาระบบ</div>
-						<div class="col-12"><q-separator color="grey-4" /></div>
-						<div class="col-12">
-							<div class="col-12 row q-col-gutter-lg">
-
-							<div class="col-xs-12 col-sm-12" 
-								v-for="(menu , index) in mainmaintenance"
-								:key="index"
-							>
-							
-								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickmainte(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
-									<q-avatar rounded size="60px">
-										<q-img :src="menu.img" />
-									</q-avatar>
-									<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
-								</q-card>
-							</div>	
-							</div>
-						</div>
-					</div>
-
-
-
-
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
-						<div class="col-12 row justify-center text-h6 text-grey-5">อยู่ในระหว่างพัฒนาระบบ</div>
-						<div class="col-12"><q-separator color="grey-4" /></div>
-						<div class="col-12">
-							<div class="col-12 row q-col-gutter-lg">
-
-							<div class="icon_1 col-xs-12 col-sm-4" 
-								v-for="(menu , index) in mainmenu1"
-								:key="index"
-							>
-								<q-card class="connn q-pa-md row justify-center text-grey-5 cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
-									<q-avatar rounded size="60px">
-										<q-img :src="menu.img" />
-									</q-avatar>
-									<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
-								</q-card>
-							</div>	
-							</div>
-						</div>
-					</div>
-
-
-
-
-					
-					<div class="col-8 row" style=" margin-top: 80px;" v-else>
-						<q-layout>
-							<q-page-container class="col-12 ">
-								<q-page>
-									<div class="col-12 row ">
-										<div class="col-12 q-mt-lg" >
-											<router-view :key="$route.fullPath" />
-										</div>
-
-										<div class="col-12 row justify-center q-mt-lg" style="margin-top: 50px;" 
-										v-if="currentRoute != 'contact' && currentRoute != 'maintenance'">
-											<q-tabs
-												v-model="tab" 
-												class="text-grey-8" dense 
-												align="center" 
-												no-caps 
-												active-color="primary" 
-												indicator-color="transparent" 
-												 >
-												<q-tab 
-													v-for="(tab,index) in tabManu"
-													:key="index"
-													:name="tab.name" 
-													:label="tab.label" 
-													@click="clickTab(tab.path)" />
-											</q-tabs>
-											<q-tabs class="text-grey-8" dense align="center" no-caps active-color="primary" indicator-color="transparent" v-model="tab">
-												<q-tab 
-													v-for="(tab,index) in tabManu2"
-													:key="index"
-													:name="tab.name" 
-													:label="tab.label" 
-													@click="clickTab(tab.path)" />
-											</q-tabs>
-										</div>
-									</div>
-
-								</q-page>
-							</q-page-container>
-
-
-							
-						</q-layout>
-					</div>
-				</div>
-			</q-page>
-			<!-- place QPageScroller at end of page -->
-			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
-				<q-btn fab icon="keyboard_arrow_up" color="blue" />
-			</q-page-scroller>
-		</q-page-container>
-	</q-layout>
+                    <div
+                      class="col-12 row justify-center q-mt-lg"
+                      style="margin-top: 50px"
+                      v-if="
+                        currentRoute != 'contact' &&
+                        currentRoute != 'maintenance'
+                      "
+                    >
+                      <q-tabs
+                        v-model="tab"
+                        class="text-grey-8"
+                        dense
+                        align="center"
+                        no-caps
+                        active-color="primary"
+                        indicator-color="transparent"
+                      >
+                        <q-tab
+                          v-for="(tab, index) in tabManu"
+                          :key="index"
+                          :name="tab.name"
+                          :label="tab.label"
+                          @click="clickTab(tab.path)"
+                        />
+                      </q-tabs>
+                      <q-tabs
+                        class="text-grey-8"
+                        dense
+                        align="center"
+                        no-caps
+                        active-color="primary"
+                        indicator-color="transparent"
+                        v-model="tab"
+                      >
+                        <q-tab
+                          v-for="(tab, index) in tabManu2"
+                          :key="index"
+                          :name="tab.name"
+                          :label="tab.label"
+                          @click="clickTab(tab.path)"
+                        />
+                      </q-tabs>
+                    </div>
+                  </div>
+                </q-page>
+              </q-page-container>
+            </q-layout>
+          </div>
+        </div>
+      </q-page>
+      <!-- place QPageScroller at end of page -->
+      <q-page-scroller
+        position="bottom-right"
+        :scroll-offset="150"
+        :offset="[18, 50]"
+      >
+        <q-btn fab icon="keyboard_arrow_up" color="blue" />
+      </q-page-scroller>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <style>
-.bg-drawer{
+.bg-drawer {
   background: #242a3d;
 }
 .menu {
   padding-bottom: 5px;
   padding-top: 5px;
 }
-.tabsHome .q-tab__icon{
-	font-size: 18px;
+.tabsHome .q-tab__icon {
+  font-size: 18px;
 }
-.border-100{
-	border-radius: 100px;
+.border-100 {
+  border-radius: 100px;
 }
-.bg-header{
- 	background:rgba(39, 50, 56, 0)8 !important;
+.bg-header {
+  background: rgba(39, 50, 56, 0) 8 !important;
 }
 
-.bg-top{
-	/* background: #273238; */
-	background-image: url("@/assets/1.png");
-	background-size: cover;
+.bg-top {
+  /* background: #273238; */
+  background-image: url("@/assets/1.png");
+  background-size: cover;
 }
-.header-br{
-	border-bottom: 1px solid #fdfdfd31;
+.header-br {
+  border-bottom: 1px solid #fdfdfd31;
 }
 .menuActive {
   background: #1e2234;
@@ -355,7 +513,7 @@ window.onpopstate = function() {
 }
 .q-card {
   box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
-	border: 1px solid #eeeded;
+  border: 1px solid #eeeded;
 }
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
@@ -365,41 +523,38 @@ window.onpopstate = function() {
   font-weight: bold;
   margin-bottom: 1.2%;
 }
-.q-field--outlined .q-field__control{
-	border-radius: 5px;
+.q-field--outlined .q-field__control {
+  border-radius: 5px;
 }
 .q-field--outlined .q-field__control:before {
-  border-color: #C8D3DB;
+  border-color: #c8d3db;
 }
-.q-field--outlined .q-icon{
-	color: #7474747f;
+.q-field--outlined .q-icon {
+  color: #7474747f;
 }
 
-.cardmenu:hover{
-   border-color: #02A998;
-   color: #02A998 !important;
-   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+.cardmenu:hover {
+  border-color: #02a998;
+  color: #02a998 !important;
+  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
-.cardmenu{
-	padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
-	box-shadow: 3px 3px 10px 1px rgba(4, 4, 4, 0.075) !important;
-	background-color: #F0F2F5;
-;
-
+.cardmenu {
+  padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
+  box-shadow: 3px 3px 10px 1px rgba(4, 4, 4, 0.075) !important;
+  background-color: #f0f2f5;
 }
 
-.content-heigt{
-	height: 60vh !important;
-	overflow-y:auto;
+.content-heigt {
+  height: 60vh !important;
+  overflow-y: auto;
 }
 
-.bgHeader{
-	background: #1e2234e5;
+.bgHeader {
+  background: #1e2234e5;
 }
 
-.icon_1{
-	color: #02A998;
+.icon_1 {
+  color: #02a998;
 }
-
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index e1be6c5..ac70727 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,25 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { quasar, transformAssetUrls } from "@quasar/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue({
-        template: { transformAssetUrls }
-    }), quasar({
-        sassVariables: 'src/style/quasar-variables.sass'
-      }), vueJsx()],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
-    }
-})
+  base: "",
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    quasar({
+      sassVariables: "src/style/quasar-variables.sass",
+    }),
+    vueJsx(),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});