diff --git a/src/app.config.ts b/src/app.config.ts
index 31e50f1..9dde560 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -15,20 +15,48 @@ import probation from "./api/probation/api.probation";
 import development from "./api/api.development";
 
 const API = {
-  ...testtest,
-  ...retirementResign,
-  ...placementTransfer,
-  ...message,
-  ...evaluate,
-  ...appeal,
-  ...support,
-  ...org,
-  ...scholarship,
-  ...kpi,
-  ...probation,
-  ...development,
+	...testtest,
+	...retirementResign,
+	...placementTransfer,
+	...message,
+	...evaluate,
+	...appeal,
+	...support,
+	...org,
+	...scholarship,
+	...kpi,
+	...probation,
+	...development,
+};
+
+const path = "http://localhost:3008";
+
+const generatePopupPath = (routeName: any) => {
+	if (routeName.includes("metadata")) {
+		return `${path}/manual/chapter-2-admin-metadata`;
+	}
+	if (routeName.includes("leave")) {
+		return `${path}/manual/chapter-3-user-leave`;
+	}
+	// if (routeName.includes("compete")) {
+	// 	return `${path}/manual/chapter-10-admin-recruit`;
+	// }
+	// if (routeName.includes("registryNew")) {
+	// 	return `${path}/manual/chapter-7-admin-registry`;
+	// }
+	// if (routeName.includes("registry")) {
+	// 	return `${path}/manual/chapter-7-admin-registry`;
+	// }
+	else {
+		return manualConfig[routeName as keyof typeof manualConfig];
+	}
+};
+
+const manualConfig = {
+	dashboard: `${path}/manual/chapter-1-user-organization-chart`,
 };
 
 export default {
-  API: API,
+	API: API,
+	generatePopupPath,
 };
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 9d6b110..e51aff5 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -14,13 +14,13 @@ const $q = useQuasar();
 
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogRemove,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogConfirm,
+	date2Thai,
+	dialogRemove,
+	showLoader,
+	hideLoader,
+	messageError,
+	success,
+	dialogConfirm,
 } = mixin;
 
 const fullname = ref<string>("");
@@ -34,54 +34,54 @@ const link = ref<string>("");
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchTotolNotificate();
-  if (keycloak.tokenParsed != null) {
-    fullname.value = keycloak.tokenParsed.name;
-  }
+	await fetchTotolNotificate();
+	if (keycloak.tokenParsed != null) {
+		fullname.value = keycloak.tokenParsed.name;
+	}
 });
 
 const totalNoti = ref<number>(0);
 async function fetchTotolNotificate() {
-  await http
-    .get(config.API.msgNotificateTotal)
-    .then((res) => {
-      totalNoti.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.msgNotificateTotal)
+		.then((res) => {
+			totalNoti.value = res.data.result;
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
 }
 
 const statusLoad = ref<boolean>(false);
 const fetchlistNotification = async (index: number, type: string) => {
-  await http
-    .get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
-    .then((res: any) => {
-      const data = res.data.result.data;
-      totalInbox.value = res.data.result.total;
-      let list: any[] = [];
-      if (type === "DEL") {
-        notiList.value = [];
-      }
-      data.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"[0]
-              : e.createdFullName[0],
-          body: e.body ?? "",
-          timereceive: date2Thai(e.createdAt),
-          isOpen: e.isOpen,
-          receiveDate: e.receiveDate,
-        });
-      });
-      notiList.value.push(...list);
-      statusLoad.value = totalInbox.value === 0 ? true : false;
-    })
-    .catch((err) => {
-      console.log(err);
-    });
+	await http
+		.get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
+		.then((res: any) => {
+			const data = res.data.result.data;
+			totalInbox.value = res.data.result.total;
+			let list: any[] = [];
+			if (type === "DEL") {
+				notiList.value = [];
+			}
+			data.map((e: any) => {
+				list.push({
+					id: e.id,
+					sender:
+						e.createdFullName == "" || e.createdFullName == null
+							? "เจ้าหน้าที่"[0]
+							: e.createdFullName[0],
+					body: e.body ?? "",
+					timereceive: date2Thai(e.createdAt),
+					isOpen: e.isOpen,
+					receiveDate: e.receiveDate,
+				});
+			});
+			notiList.value.push(...list);
+			statusLoad.value = totalInbox.value === 0 ? true : false;
+		})
+		.catch((err) => {
+			console.log(err);
+		});
 };
 
 /**
@@ -89,280 +89,311 @@ const fetchlistNotification = async (index: number, type: string) => {
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-  dialogConfirm(
-    $q,
-    () => {
-      keycloak.logout();
-    },
-    "ยืนยันการออกจากระบบ",
-    "ต้องการออกจากระบบใช่หรือไม่"
-  );
+	dialogConfirm(
+		$q,
+		() => {
+			keycloak.logout();
+		},
+		"ยืนยันการออกจากระบบ",
+		"ต้องการออกจากระบบใช่หรือไม่"
+	);
 };
 
 const clickDelete = async (id: string, index: number) => {
-  dialogRemove($q, async () => {
-    // showLoader();
-    await http
-      .delete(config.API.msgId(id))
-      .then(() => {
-        notiList.value.splice(index, 1);
-        totalInbox.value--;
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        notiList.value.length === 12 && fetchlistNotification(1, "DEL");
-        // hideLoader();
-      });
-  });
+	dialogRemove($q, async () => {
+		// showLoader();
+		await http
+			.delete(config.API.msgId(id))
+			.then(() => {
+				notiList.value.splice(index, 1);
+				totalInbox.value--;
+				success($q, "ลบข้อมูลสำเร็จ");
+			})
+			.catch((e) => {
+				messageError($q, e);
+			})
+			.finally(async () => {
+				notiList.value.length === 12 && fetchlistNotification(1, "DEL");
+				// hideLoader();
+			});
+	});
 };
 
 const totalInbox = ref<number>(0);
 const page = ref<number>(0);
 async function onLoad(index: any, done: any) {
-  if (
-    notiList.value.length < totalInbox.value ||
-    (notiList.value.length === 0 && totalInbox.value === 0)
-  ) {
-    page.value++;
-    setTimeout(async () => {
-      await fetchlistNotification(page.value, "NOMAL");
-      done();
-    }, 1500);
-  }
+	if (
+		notiList.value.length < totalInbox.value ||
+		(notiList.value.length === 0 && totalInbox.value === 0)
+	) {
+		page.value++;
+		setTimeout(async () => {
+			await fetchlistNotification(page.value, "NOMAL");
+			done();
+		}, 1500);
+	}
 }
 
 watch(
-  () => notiTrigger.value,
-  () => {
-    if (!notiTrigger.value) {
-      const updatedNotifications = notiList.value.map((item: any) => ({
-        ...item,
-        isOpen: true,
-      }));
-      notiList.value = updatedNotifications;
-      fetchTotolNotificate();
-    }
-  }
+	() => notiTrigger.value,
+	() => {
+		if (!notiTrigger.value) {
+			const updatedNotifications = notiList.value.map((item: any) => ({
+				...item,
+				isOpen: true,
+			}));
+			notiList.value = updatedNotifications;
+			fetchTotolNotificate();
+		}
+	}
 );
 
 const thaiOptions: Intl.DateTimeFormatOptions = {
-  hour: "2-digit",
-  minute: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+};
+
+const handleButtonClick = () => {
+	const currentPath = route.name;
+	const queryParams = { role: "user" }; // Replace with your query parameters
+	const queryString = new URLSearchParams(queryParams).toString();
+
+	// Assuming config.generatePopupPath() returns a base URL
+	const popupBasePath = config.generatePopupPath(currentPath);
+
+	if (popupBasePath) {
+		const popupPath = `${popupBasePath}?${queryString}`;
+		window.open(popupPath, "_blank"); // Opens in a new tab/window
+	} else {
+		console.log("No manual available for this page:", currentPath);
+	}
 };
 
 function onInfo() {
-  router.push(`/retire`);
+	router.push(`/retire`);
 }
 </script>
 <!-- โครงเว็บ -->
 <template>
-  <q-layout view="hHh LpR fFr">
-    <!-- header -->
-    <q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
-      <q-toolbar
-        class="q-my-xs items-center"
-        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
-      >
-        <div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
-          <q-img
-            src="@/assets/logo.png"
-            spinner-color="white"
-            style="height: 35px; max-width: 35px"
-          />
-          <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">ของกรุงเทพมหานคร</div>
-          </div>
-        </div>
-        <div v-else class="row items-center">
-          <img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
-        </div>
-        <div v-if="$q.screen.gt.xs">
-          <q-tabs
-            v-model="tab"
-            align="justify"
-            indicator-color="transparent"
-            active-color="white bg-white-btn border-100"
-            dense
-            inline-label
-            class="text-grey-5 tabsHome"
-          >
-            <q-tab
-              class="border-100 q-mr-sm"
-              name="dashboard"
-              label="หน้าแรก"
-              icon="mdi-view-dashboard-outline"
-              @click="router.push(`/`)"
-            />
-            <!-- <q-tab class="border-100" name="Checkin" label="ลงเวลางาน" icon="mdi-map-marker-check-outline"
+	<q-layout view="hHh LpR fFr">
+		<!-- header -->
+		<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
+			<q-toolbar
+				class="q-my-xs items-center"
+				:style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
+			>
+				<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
+					<q-img
+						src="@/assets/logo.png"
+						spinner-color="white"
+						style="height: 35px; max-width: 35px"
+					/>
+					<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">ของกรุงเทพมหานคร</div>
+					</div>
+				</div>
+				<div v-else class="row items-center">
+					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
+				</div>
+				<div v-if="$q.screen.gt.xs">
+					<q-tabs
+						v-model="tab"
+						align="justify"
+						indicator-color="transparent"
+						active-color="white bg-white-btn border-100"
+						dense
+						inline-label
+						class="text-grey-5 tabsHome"
+					>
+						<q-tab
+							class="border-100 q-mr-sm"
+							name="dashboard"
+							label="หน้าแรก"
+							icon="mdi-view-dashboard-outline"
+							@click="router.push(`/`)"
+						/>
+						<!-- <q-tab class="border-100" name="Checkin" label="ลงเวลางาน" icon="mdi-map-marker-check-outline"
               @click="router.push(`/check-in`)" /> -->
-            <q-tab
-              class="border-100 q-mr-sm"
-              name="leave"
-              label="การลา"
-              icon="mdi-calendar-blank-outline"
-              @click="router.push(`/leave`)"
-            />
-          </q-tabs>
-        </div>
-        <q-space />
+						<q-tab
+							class="border-100 q-mr-sm"
+							name="leave"
+							label="การลา"
+							icon="mdi-calendar-blank-outline"
+							@click="router.push(`/leave`)"
+						/>
+					</q-tabs>
+				</div>
+				<q-space />
+				<q-btn
+					round
+					dense
+					flat
+					size="13px"
+					class="bg-white-btn"
+					:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
+					no-caps
+					@click="handleButtonClick()"
+					style="margin-right: 10px"
+				>
+					<q-icon name="mdi-book-open-variant" size="18px" color="white" />
+					<q-tooltip>คู่มือ</q-tooltip>
+				</q-btn>
 
-        <!-- Notification -->
-        <q-btn
-          round
-          dense
-          flat
-          size="13px"
-          :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
-          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
-          no-caps
-        >
-          <q-icon name="mdi-bell-outline" size="22px" color="white" />
-          <q-badge
-            rounded
-            v-show="totalNoti !== 0"
-            color="negative"
-            text-color="white"
-            floating
-            >{{ totalNoti }}</q-badge
-          >
-          <q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
-            <div class="q-px-md q-py-sm row col-12 items-center">
-              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-              <q-space />
-              <div class="text-grey-5" style="font-size: 12px">
-                ทั้งหมด {{ totalInbox }} ข้อความ
-              </div>
-            </div>
-            <q-infinite-scroll
-              @load="onLoad"
-              :offset="250"
-              v-if="statusLoad === false"
-            >
-              <div
-                v-for="(item, index) in notiList"
-                :key="index"
-                class="caption"
-              >
-                <q-item v-ripple class="mytry q-py-sm" dense>
-                  <q-item-section avatar top style="min-width: 10px">
-                    <q-avatar
-                      rounded
-                      color="primary"
-                      size="25px"
-                      text-color="white"
-                    >
-                      <span class="text-weight-medium text-uppercase">{{
-                        item.body[0]
-                      }}</span>
-                    </q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label caption class="text-grey-7">
-                      {{ date2Thai(item.receiveDate) }}
-                      {{
-                        new Date(item.receiveDate).toLocaleTimeString(
-                          "th-TH",
-                          thaiOptions
-                        )
-                      }}
-                      น. <q-space />
-                    </q-item-label>
-                    <q-item-label
-                      caption
-                      :class="
-                        item.isOpen
-                          ? 'text-grey-7'
-                          : 'text-dark text-weight-medium'
-                      "
-                      >{{ item.body }}</q-item-label
-                    >
-                    <q-item-label
-                      caption
-                      class="row items-center text-grey-7"
-                      style="font-size: 12px"
-                      >{{ item.timereceive }}</q-item-label
-                    >
-                  </q-item-section>
-                  <div>
-                    <q-btn
-                      size="sm"
-                      unelevated
-                      dense
-                      icon="mdi-close"
-                      class="mybtn q-mx-xs"
-                      @click="clickDelete(item.id, index)"
-                    ></q-btn>
-                  </div>
-                </q-item>
-              </div>
+				<!-- Notification -->
+				<q-btn
+					round
+					dense
+					flat
+					size="13px"
+					class="bg-white-btn"
+					:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
+					no-caps
+					style="margin-right: 10px"
+				>
+					<q-icon name="mdi-bell-outline" size="22px" color="white" />
+					<q-badge
+						rounded
+						v-show="totalNoti !== 0"
+						color="negative"
+						text-color="white"
+						floating
+						>{{ totalNoti }}</q-badge
+					>
+					<q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
+						<div class="q-px-md q-py-sm row col-12 items-center">
+							<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
+							<q-space />
+							<div class="text-grey-5" style="font-size: 12px">
+								ทั้งหมด {{ totalInbox }} ข้อความ
+							</div>
+						</div>
+						<q-infinite-scroll
+							@load="onLoad"
+							:offset="250"
+							v-if="statusLoad === false"
+						>
+							<div
+								v-for="(item, index) in notiList"
+								:key="index"
+								class="caption"
+							>
+								<q-item v-ripple class="mytry q-py-sm" dense>
+									<q-item-section avatar top style="min-width: 10px">
+										<q-avatar
+											rounded
+											color="primary"
+											size="25px"
+											text-color="white"
+										>
+											<span class="text-weight-medium text-uppercase">{{
+												item.body[0]
+											}}</span>
+										</q-avatar>
+									</q-item-section>
+									<q-item-section>
+										<q-item-label caption class="text-grey-7">
+											{{ date2Thai(item.receiveDate) }}
+											{{
+												new Date(item.receiveDate).toLocaleTimeString(
+													"th-TH",
+													thaiOptions
+												)
+											}}
+											น. <q-space />
+										</q-item-label>
+										<q-item-label
+											caption
+											:class="
+												item.isOpen
+													? 'text-grey-7'
+													: 'text-dark text-weight-medium'
+											"
+											>{{ item.body }}</q-item-label
+										>
+										<q-item-label
+											caption
+											class="row items-center text-grey-7"
+											style="font-size: 12px"
+											>{{ item.timereceive }}</q-item-label
+										>
+									</q-item-section>
+									<div>
+										<q-btn
+											size="sm"
+											unelevated
+											dense
+											icon="mdi-close"
+											class="mybtn q-mx-xs"
+											@click="clickDelete(item.id, index)"
+										></q-btn>
+									</div>
+								</q-item>
+							</div>
 
-              <template
-                v-slot:loading
-                v-if="
-                  notiList.length < totalInbox ||
-                  (notiList.length === 0 && totalInbox === 0)
-                "
-              >
-                <div class="text-center q-my-md">
-                  <q-spinner-dots color="primary" size="40px" />
-                </div>
-              </template>
-            </q-infinite-scroll>
-            <div class="q-pa-md" v-else>
-              <q-banner rounded class="bg-amber-1 text-center">
-                <div class="text-yellow-10">
-                  <q-icon
-                    name="mdi-alert-box"
-                    class="q-mx-xs"
-                    size="sm"
-                    color="yellow-10"
-                  />
-                  ไมมีข้อมูล
-                </div>
-              </q-banner>
-            </div>
-          </q-menu>
-        </q-btn>
+							<template
+								v-slot:loading
+								v-if="
+									notiList.length < totalInbox ||
+									(notiList.length === 0 && totalInbox === 0)
+								"
+							>
+								<div class="text-center q-my-md">
+									<q-spinner-dots color="primary" size="40px" />
+								</div>
+							</template>
+						</q-infinite-scroll>
+						<div class="q-pa-md" v-else>
+							<q-banner rounded class="bg-amber-1 text-center">
+								<div class="text-yellow-10">
+									<q-icon
+										name="mdi-alert-box"
+										class="q-mx-xs"
+										size="sm"
+										color="yellow-10"
+									/>
+									ไมมีข้อมูล
+								</div>
+							</q-banner>
+						</div>
+					</q-menu>
+				</q-btn>
 
-        <!-- User -->
-        <q-btn-dropdown
-          v-if="$q.screen.gt.xs"
-          rounded
-          dense
-          flat
-          :class="$q.screen.gt.xs ? 'bg-white-btn' : ''"
-          color="white"
-          class="q-pr-sm border-10"
-          dropdown-icon="mdi-chevron-down"
-        >
-          <template v-slot:label>
-            <q-item dense v-close-popup class="q-pa-none q-pl-xs">
-              <q-item-section avatar class="q-pa-none" style="min-width: 30px">
-                <q-img
-                  src="@/assets/avatar_user.jpg"
-                  class="border-100"
-                  spinner-color="white"
-                  style="height: 30px; max-width: 30px"
-                />
-              </q-item-section>
-              <q-item-section class="text-left text-white q-pa-none q-pl-sm">
-                <q-item-label class="text-caption text-weight-medium">{{
-                  fullname
-                }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-          <q-list>
-            <!-- <q-item clickable v-close-popup @click="onInfo">
+				<!-- User -->
+				<q-btn-dropdown
+					v-if="$q.screen.gt.xs"
+					rounded
+					dense
+					flat
+					:class="$q.screen.gt.xs ? 'bg-white-btn' : ''"
+					color="white"
+					class="q-pr-sm border-10"
+					dropdown-icon="mdi-chevron-down"
+				>
+					<template v-slot:label>
+						<q-item dense v-close-popup class="q-pa-none q-pl-xs">
+							<q-item-section avatar class="q-pa-none" style="min-width: 30px">
+								<q-img
+									src="@/assets/avatar_user.jpg"
+									class="border-100"
+									spinner-color="white"
+									style="height: 30px; max-width: 30px"
+								/>
+							</q-item-section>
+							<q-item-section class="text-left text-white q-pa-none q-pl-sm">
+								<q-item-label class="text-caption text-weight-medium">{{
+									fullname
+								}}</q-item-label>
+							</q-item-section>
+						</q-item>
+					</template>
+					<q-list>
+						<!-- <q-item clickable v-close-popup @click="onInfo">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon
                   color="blue-9"
@@ -376,50 +407,50 @@ function onInfo() {
                 ></q-item-section
               >
             </q-item> -->
-            <q-item clickable v-close-popup @click="onInfo">
-              <q-item-section avatar style="min-width: 30px">
-                <q-icon
-                  color="red-9"
-                  size="18px"
-                  name="mdi-account-remove-outline"
-                />
-              </q-item-section>
-              <q-item-section
-                ><q-item-label>ขอลาออก</q-item-label></q-item-section
-              >
-            </q-item>
+						<q-item clickable v-close-popup @click="onInfo">
+							<q-item-section avatar style="min-width: 30px">
+								<q-icon
+									color="red-9"
+									size="18px"
+									name="mdi-account-remove-outline"
+								/>
+							</q-item-section>
+							<q-item-section
+								><q-item-label>ขอลาออก</q-item-label></q-item-section
+							>
+						</q-item>
 
-            <q-item clickable v-close-popup>
-              <q-item-section avatar style="min-width: 30px">
-                <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
-              </q-item-section>
-              <q-item-section
-                ><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
-              >
-            </q-item>
+						<q-item clickable v-close-popup>
+							<q-item-section avatar style="min-width: 30px">
+								<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
+							</q-item-section>
+							<q-item-section
+								><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
+							>
+						</q-item>
 
-            <q-item clickable v-close-popup @click="doLogout">
-              <q-item-section avatar style="min-width: 30px">
-                <q-icon color="primary" size="18px" name="mdi-logout-variant" />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label>ออกจากระบบ</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-btn-dropdown>
+						<q-item clickable v-close-popup @click="doLogout">
+							<q-item-section avatar style="min-width: 30px">
+								<q-icon color="primary" size="18px" name="mdi-logout-variant" />
+							</q-item-section>
+							<q-item-section>
+								<q-item-label>ออกจากระบบ</q-item-label>
+							</q-item-section>
+						</q-item>
+					</q-list>
+				</q-btn-dropdown>
 
-        <div v-else class="q-ml-sm" style="width: 30px">
-          <q-btn round>
-            <q-avatar>
-              <q-img
-                src="@/assets/avatar_user.jpg"
-                class="border-100"
-                spinner-color="white"
-                style="height: 30px; max-width: 30px"
-              />
-            </q-avatar>
-            <!-- <q-menu>
+				<div v-else class="q-ml-sm" style="width: 30px">
+					<q-btn round>
+						<q-avatar>
+							<q-img
+								src="@/assets/avatar_user.jpg"
+								class="border-100"
+								spinner-color="white"
+								style="height: 30px; max-width: 30px"
+							/>
+						</q-avatar>
+						<!-- <q-menu>
               <q-list dense style="min-width: 200px">
                 <q-item clickable v-close-popup>
                   <q-item-section>
@@ -472,119 +503,119 @@ function onInfo() {
                 </q-item>
               </q-list>
             </q-menu> -->
-          </q-btn>
-        </div>
-      </q-toolbar>
-    </q-header>
-    <div
-      class="bg-top"
-      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
-    />
-    <!-- end header -->
+					</q-btn>
+				</div>
+			</q-toolbar>
+		</q-header>
+		<div
+			class="bg-top"
+			:style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
+		/>
+		<!-- end header -->
 
-    <q-footer class="bg-top" v-if="!$q.screen.gt.xs">
-      <q-toolbar style="padding: 2% 2%">
-        <div class="row col-12 justify-around">
-          <q-btn
-            flat
-            round
-            color="white"
-            icon="mdi-home"
-            @click="router.push(`/`)"
-          />
-          <!-- <q-btn
+		<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
+			<q-toolbar style="padding: 2% 2%">
+				<div class="row col-12 justify-around">
+					<q-btn
+						flat
+						round
+						color="white"
+						icon="mdi-home"
+						@click="router.push(`/`)"
+					/>
+					<!-- <q-btn
             flat
             round
             color="white"
             icon="mdi-map-marker-check-outline"
             @click="router.push(`/check-in`)"
           /> -->
-          <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"
-            @click="router.push(`/registry`)"
-          />
-        </div>
-      </q-toolbar>
-    </q-footer>
+					<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"
+						@click="router.push(`/registry`)"
+					/>
+				</div>
+			</q-toolbar>
+		</q-footer>
 
-    <q-page-container class="bg-grey-2 q-pb-md">
-      <q-page
-        :style="
-          $q.screen.gt.xs
-            ? 'padding: 1.8% 2%; margin-top: -200px;'
-            : 'padding: 5% 4%; margin-top: -200px;'
-        "
-      >
-        <router-view :key="$route.fullPath" />
-      </q-page>
-    </q-page-container>
-  </q-layout>
+		<q-page-container class="bg-grey-2 q-pb-md">
+			<q-page
+				:style="
+					$q.screen.gt.xs
+						? 'padding: 1.8% 2%; margin-top: -200px;'
+						: 'padding: 5% 4%; margin-top: -200px;'
+				"
+			>
+				<router-view :key="$route.fullPath" />
+			</q-page>
+		</q-page-container>
+	</q-layout>
 </template>
 
 <style>
 .bg-drawer {
-  background: #242a3d;
+	background: #242a3d;
 }
 
 .menu {
-  padding-bottom: 5px;
-  padding-top: 5px;
+	padding-bottom: 5px;
+	padding-top: 5px;
 }
 
 .tabsHome .q-tab__icon {
-  font-size: 18px;
+	font-size: 18px;
 }
 
 .border-100 {
-  border-radius: 100px;
+	border-radius: 100px;
 }
 
 .bg-top {
-  background: #273238;
+	background: #273238;
 }
 
 .header-br {
-  border-bottom: 1px solid #fdfdfd31;
+	border-bottom: 1px solid #fdfdfd31;
 }
 
 .menuActive {
-  background: #1e2234;
-  border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+	background: #1e2234;
+	border-radius: 0 100px 100px 0;
+	margin-right: 4%;
 }
 
 .q-card {
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
-  /* border: 1px solid #eeeded; */
-  border-radius: 8px;
+	box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+	/* border: 1px solid #eeeded; */
+	border-radius: 8px;
 }
 
 .q-menu {
-  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
 .toptitle {
-  font-size: 1.2rem;
-  font-weight: bold;
-  margin-bottom: 1.2%;
+	font-size: 1.2rem;
+	font-weight: bold;
+	margin-bottom: 1.2%;
 }
 
 .q-field--outlined .q-field__control {
-  border-radius: 5px;
+	border-radius: 5px;
 }
 
 .q-field--outlined .q-field__control:before {
-  border-color: #c8d3db;
+	border-color: #c8d3db;
 }
 
 /* .q-field--outlined .q-icon {
@@ -592,11 +623,11 @@ function onInfo() {
 } */
 
 .shadow-0 {
-  box-shadow: none !important;
+	box-shadow: none !important;
 }
 
 .btnBlue {
-  background-color: #016987;
-  color: #fff;
+	background-color: #016987;
+	color: #fff;
 }
 </style>