diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 6ae085dc9..8b52489f5 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -275,6 +275,8 @@ const activeMenu = (path: string) => {
     return false;
   if (path == "registry" && route.fullPath.includes(`/registry-employee/edit`))
     return false;
+  if (path == "registry" && route.fullPath.includes(`/registry-employee/add`))
+    return false;
 
   if (path == "registry" && route.fullPath == "/") return false;
   // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
@@ -436,20 +438,8 @@ const clickDelete = (id: string) => {
     <!-- header -->
     <q-header flat class="bg-grey-2 text-dark" height-hint="7">
       <q-toolbar style="padding: 0 2%">
-        <q-btn
-          size="13px"
-          class="bg-grey-3"
-          flat
-          dense
-          round
-          @click="toggleBtnLeft"
-          aria-label="Menu"
-        >
-          <q-icon
-            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
-            size="20px"
-            color="grey-7"
-          />
+        <q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
+          <q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
         </q-btn>
 
         <q-space />
@@ -465,24 +455,11 @@ const clickDelete = (id: string) => {
         </q-btn>
         -->
         <!-- Notification -->
-        <q-btn
-          round
-          dense
-          flat
-          size="13px"
-          class="q-mx-md bg-grey-3"
-          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
-          :disable="notiList.length === 0"
-        >
+        <q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+          :disable="notiList.length === 0">
           <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge
-            rounded
-            v-show="notiList.length > 0"
-            color="negative"
-            text-color="white"
-            floating
-            >{{ notiList.length }}</q-badge
-          >
+          <q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
+          }}</q-badge>
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
@@ -505,14 +482,8 @@ const clickDelete = (id: string) => {
                     date2Thai(n.timereceive)
                   }}</q-item-label>
                 </q-item-section>
-                <q-btn
-                  size="sm"
-                  unelevated
-                  dense
-                  icon="mdi-close"
-                  class="mybtn q-mx-xs"
-                  @click="clickDelete(n.id)"
-                ></q-btn>
+                <q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"
+                  @click="clickDelete(n.id)"></q-btn>
               </q-item>
               <q-separator color="grey-2" />
             </q-list>
@@ -536,10 +507,7 @@ const clickDelete = (id: string) => {
                 </q-item-section>
               </q-item>
             </template>
-            <div
-              class="row justify-center"
-              style="border-top: solid 3px #1bb19b !important; width: 273.797px"
-            >
+            <div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
               <div class="column items-center col-12 q-py-md" color="grey-3">
                 <q-avatar size="72px" color="grey-4">
                   <q-icon name="mdi-account" color="grey-7" />
@@ -548,14 +516,7 @@ const clickDelete = (id: string) => {
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}
                 </div>
-                <q-btn
-                  color="primary"
-                  label="ออกจากระบบ"
-                  push
-                  size="sm"
-                  v-close-popup
-                  @click="doLogout"
-                /><!--  -->
+                <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!--  -->
               </div>
 
               <div class="column col-12">
@@ -568,13 +529,7 @@ const clickDelete = (id: string) => {
                   <q-list dense v-for="op in options" :key="op.label">
                     <q-item clickable>
                       <q-item-section avatar>
-                        <q-avatar
-                          :color="op.color"
-                          text-color="white"
-                          :icon="op.icon"
-                          size="20px"
-                          font-size="12px"
-                        />
+                        <q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
                       </q-item-section>
                       <q-item-section class="q-py-sm">{{
                         op.label
@@ -586,16 +541,8 @@ const clickDelete = (id: string) => {
             </div>
           </q-btn-dropdown>
         </div>
-        <q-btn
-          size="13px"
-          class="bg-blue-1"
-          v-if="activeBtn() || activeBtnPlacement()"
-          flat
-          dense
-          round
-          @click="toggleBtnRight"
-          aria-label="Menu"
-        >
+        <q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round
+          @click="toggleBtnRight" aria-label="Menu">
           <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
         </q-btn>
       </q-toolbar>
@@ -603,92 +550,47 @@ const clickDelete = (id: string) => {
     <!-- end header -->
 
     <!-- drawer -->
-    <q-drawer
-      side="left"
-      class="text-white"
-      style="background: #273238"
-      v-model="drawerL"
-      show-if-above
-      :width="260"
-      :breakpoint="1023"
-      :mini="miniState"
-    >
+    <q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260"
+      :breakpoint="1023" :mini="miniState">
       <!--  ส่วนของเมนู mini -->
       <template v-slot:mini>
         <q-scroll-area class="fit mini-slot cursor-pointer">
           <q-toolbar class="q-py-md">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 32px; max-width: 32px"
-            />
+            <q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
           </q-toolbar>
           <q-separator color="grey-9" />
           <!-- เมนูย่อย ตอนย่อ -->
           <q-list padding>
             <div v-for="(menuItem, index) in menuList" :key="index">
               <div v-if="role.includes(menuItem.role)">
-                <q-item
-                  clickable
-                  v-ripple
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
+                <q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
                   active-class="text-primary menuActiveMini text-weight-medium"
-                  v-if="menuItem.key == 3 || menuItem.key == 5"
-                >
+                  v-if="menuItem.key == 3 || menuItem.key == 5">
                   <div class="row items-center no-wrap">
                     <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
-                    <q-icon
-                      name="mdi-dots-vertical"
-                      size="13px"
-                      color="grey-6"
-                    />
+                    <q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
                   </div>
-                  <q-tooltip
-                    anchor="center right"
-                    self="center left"
-                    :offset="[10, 10]"
-                  >
+                  <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
                     {{ menuItem.label }}
                   </q-tooltip>
-                  <q-menu
-                    anchor="top right"
-                    self="top left"
-                    :offset="[5, 0]"
-                    style="background: #273238; z-index: 9000"
-                  >
+                  <q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
                     <q-list class="text-white q-py-sm">
-                      <div
-                        v-for="(subMenu, i) in menuItem.children"
-                        :key="i"
-                        :to="{ name: `${subMenu.path}` }"
-                      >
+                      <div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
                         <!-- เมนูย่อย 2 ชั้น -->
                         <div v-if="menuItem.key == 5">
                           <q-item dense clickable v-if="subMenu.key !== 5.1">
-                            <q-item-section
-                              >{{ subMenu.label }}
+                            <q-item-section>{{ subMenu.label }}
                             </q-item-section>
                             <q-item-section side>
                               <q-icon name="keyboard_arrow_right" />
                             </q-item-section>
 
-                            <q-menu
-                              anchor="top end"
-                              self="top start"
-                              :offset="[5, 0]"
-                              style="background: #273238; z-index: 9000"
-                            >
+                            <q-menu anchor="top end" self="top start" :offset="[5, 0]"
+                              style="background: #273238; z-index: 9000">
                               <q-list class="text-white q-py-sm">
-                                <q-item
-                                  v-for="subMenu2 in subMenu.children"
-                                  :key="subMenu2.label"
-                                  :to="{ name: `${subMenu2.path}` }"
-                                  dense
-                                  class="q-pl-md text-body2"
-                                  active-class="text-primary active-item text-weight-medium"
-                                  clickable
-                                >
+                                <q-item v-for="subMenu2 in subMenu.children" :key="subMenu2.label"
+                                  :to="{ name: `${subMenu2.path}` }" dense class="q-pl-md text-body2"
+                                  active-class="text-primary active-item text-weight-medium" clickable>
                                   <q-item-section>
                                     <q-item-label>{{
                                       subMenu2.label
@@ -699,14 +601,9 @@ const clickDelete = (id: string) => {
                             </q-menu>
                           </q-item>
 
-                          <q-item
-                            v-else
-                            dense
-                            class="q-pl-md q-pr-xl text-body2"
-                            active-class="text-primary active-item text-weight-medium"
-                            clickable
-                            :to="{ name: `${subMenu.path}` }"
-                          >
+                          <q-item v-else dense class="q-pl-md q-pr-xl text-body2"
+                            active-class="text-primary active-item text-weight-medium" clickable
+                            :to="{ name: `${subMenu.path}` }">
                             <q-item-section>
                               <q-item-label>{{ subMenu.label }}</q-item-label>
                             </q-item-section>
@@ -714,13 +611,9 @@ const clickDelete = (id: string) => {
                         </div>
                         <!-- เมนูย่อย 1 ชั้น -->
                         <div v-else>
-                          <q-item
-                            dense
-                            class="q-pl-md q-pr-xl text-body2"
-                            active-class="text-primary active-item text-weight-medium"
-                            clickable
-                            :to="{ name: `${subMenu.path}` }"
-                          >
+                          <q-item dense class="q-pl-md q-pr-xl text-body2"
+                            active-class="text-primary active-item text-weight-medium" clickable
+                            :to="{ name: `${subMenu.path}` }">
                             <q-item-section>
                               <q-item-label>{{ subMenu.label }}</q-item-label>
                             </q-item-section>
@@ -730,25 +623,14 @@ const clickDelete = (id: string) => {
                     </q-list>
                   </q-menu>
                 </q-item>
-                <q-item
-                  clickable
-                  v-ripple
-                  :to="{ name: `${menuItem.path}` }"
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
-                  active-class="text-primary menuActiveMini"
-                  v-else
-                >
+                <q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label"
+                  @click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else>
                   <q-item-section avatar>
                     <q-avatar size="md" font-size="20px">
                       <q-icon :name="menuItem.icon" />
                     </q-avatar>
                   </q-item-section>
-                  <q-tooltip
-                    anchor="center right"
-                    self="center left"
-                    :offset="[10, 10]"
-                  >
+                  <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
                     {{ menuItem.label }}
                   </q-tooltip>
                 </q-item>
@@ -763,16 +645,9 @@ const clickDelete = (id: string) => {
       <q-scroll-area class="fit">
         <q-toolbar class="q-py-md">
           <q-toolbar-title shrink class="row items-center no-wrap">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 40px; max-width: 40px"
-            />
+            <q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
             <div class="row q-ml-md">
-              <div
-                style="color: #ffffff; letter-spacing: 1px"
-                class="text-body2 text-weight-bolder"
-              >
+              <div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">
                 ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
               </div>
               <div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
@@ -784,26 +659,16 @@ const clickDelete = (id: string) => {
           <div v-for="(menuItem, index) in menuList" :key="index">
             <!-- เมนูย่อย -->
             <div v-if="role.includes(menuItem.role)">
-              <q-expansion-item
-                group="somegroup"
-                class="menuSub"
-                expand-icon="mdi-chevron-down"
-                expanded-icon="mdi-chevron-up"
-                v-if="
-                  menuItem.key == 3 ||
+              <q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down"
+                expanded-icon="mdi-chevron-up" v-if="menuItem.key == 3 ||
                   menuItem.key == 5 ||
                   menuItem.key == 6 ||
                   menuItem.key == 7 ||
                   menuItem.key == 8
-                "
-              >
+                  ">
                 <template v-slot:header>
                   <q-item-section avatar>
-                    <q-avatar
-                      :icon="menuItem.icon"
-                      size="md"
-                      font-size="20px"
-                    />
+                    <q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
                   </q-item-section>
                   <q-item-section>{{ menuItem.label }}</q-item-section>
                 </template>
@@ -811,38 +676,20 @@ const clickDelete = (id: string) => {
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
                 <div v-if="menuItem.key == 5">
                   <div v-for="(subMenu, i) in menuItem.children" :key="i">
-                    <q-expansion-item
-                      switch-toggle-side
-                      dense-toggle
-                      :label="subMenu.label"
-                      v-if="subMenu.key !== 5.1"
-                      class="expan2"
-                      dense
-                    >
-                      <q-item
-                        dense
-                        class="menuSubHover"
-                        active-class="text-primary active-item text-weight-bold menuSubAct"
-                        clickable
-                        v-for="subMenu2 in subMenu.children"
-                        :key="subMenu2.key"
-                        :to="{ name: `${subMenu2.path}` }"
-                      >
+                    <q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1"
+                      class="expan2" dense>
+                      <q-item dense class="menuSubHover"
+                        active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                        v-for="subMenu2 in subMenu.children" :key="subMenu2.key" :to="{ name: `${subMenu2.path}` }">
                         <q-item-section>
-                          <q-item-label class="font-400 subLabel"
-                            >{{ subMenu2.label }}
+                          <q-item-label class="font-400 subLabel">{{ subMenu2.label }}
                           </q-item-label>
                         </q-item-section>
                       </q-item>
                     </q-expansion-item>
-                    <q-item
-                      v-else
-                      dense
-                      class="menuSubHover"
-                      active-class="text-primary active-item text-weight-bold menuSubAct"
-                      clickable
-                      :to="{ name: `${subMenu.path}` }"
-                    >
+                    <q-item v-else dense class="menuSubHover"
+                      active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                      :to="{ name: `${subMenu.path}` }">
                       <q-item-section>
                         <q-item-label>{{ subMenu.label }}</q-item-label>
                       </q-item-section>
@@ -850,16 +697,9 @@ const clickDelete = (id: string) => {
                   </div>
                 </div>
                 <!-- เมนูย่อย 1 ชั้น -->
-                <q-item
-                  v-else
-                  dense
-                  class="menuSubHover"
-                  active-class="text-primary active-item text-weight-bold menuSubAct"
-                  clickable
-                  v-for="(subMenu, j) in menuItem.children"
-                  :key="j"
-                  :to="{ name: `${subMenu.path}` }"
-                >
+                <q-item v-else dense class="menuSubHover"
+                  active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                  v-for="(subMenu, j) in menuItem.children" :key="j" :to="{ name: `${subMenu.path}` }">
                   <q-item-section>
                     <q-item-label class="font-400">{{
                       subMenu.label
@@ -869,26 +709,15 @@ const clickDelete = (id: string) => {
               </q-expansion-item>
 
               <!-- เมนูปกติ -->
-              <q-item
-                class="text-weight-medium menu"
-                :active="activeMenu(menuItem.path)"
-                active-class="text-primary active-item text-weight-bold menuActive"
-                :to="{ name: `${menuItem.path}` }"
-                clickable
-                v-ripple
-                dense
-                exact
-                v-else
-              >
+              <q-item class="text-weight-medium menu" :active="activeMenu(menuItem.path)"
+                active-class="text-primary active-item text-weight-bold menuActive" :to="{ name: `${menuItem.path}` }"
+                clickable v-ripple dense exact v-else>
                 <q-item-section avatar>
                   <q-avatar size="md" font-size="20px">
-                    <q-icon
-                      :name="
-                        menuItem.key === active
-                          ? menuItem.activeIcon
-                          : menuItem.icon
-                      "
-                    />
+                    <q-icon :name="menuItem.key === active
+                        ? menuItem.activeIcon
+                        : menuItem.icon
+                      " />
                   </q-avatar>
                 </q-item-section>
 
@@ -903,37 +732,16 @@ const clickDelete = (id: string) => {
     </q-drawer>
 
     <!-- drawer page registry/:id -->
-    <q-drawer
-      side="right"
-      class="bg-grey-2"
-      show-if-above
-      v-if="tabScroll()"
-      v-model="drawerR"
-      :width="220"
-      :breakpoint="1023"
-    >
+    <q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220"
+      :breakpoint="1023">
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item
-            v-for="(tabItem, index) in tabList"
-            :key="index"
-            :id="'tab--' + tabItem.tag"
-            class="tabNative"
-            active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab(tabItem.tag)"
-            clickable
-            v-ripple
-            dense
-            exact
-            @click="tagClick(tabItem.tag)"
-          >
+          <q-item v-for="(tabItem, index) in tabList" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTab(tabItem.tag)" clickable
+            v-ripple dense exact @click="tagClick(tabItem.tag)">
             <q-item-section>
-              <q-item-label
-                ><q-icon size="11px" name="mdi-circle-medium" /><span
-                  class="q-pl-xs"
-                  >{{ tabItem.label }}</span
-                ></q-item-label
-              >
+              <q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
+              }}</span></q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
@@ -941,37 +749,16 @@ const clickDelete = (id: string) => {
     </q-drawer>
 
     <!-- drawer page placement2/detail/:id -->
-    <q-drawer
-      side="right"
-      class="bg-grey-2"
-      show-if-above
-      v-if="tabScrollPlacement()"
-      v-model="drawerR"
-      :width="220"
-      :breakpoint="1023"
-    >
+    <q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScrollPlacement()" v-model="drawerR" :width="220"
+      :breakpoint="1023">
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item
-            v-for="(tabItem, index) in tabListPlacement"
-            :key="index"
-            :id="'tab--' + tabItem.tag"
-            class="tabNative"
-            active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTabPlacement(tabItem.tag)"
-            clickable
-            v-ripple
-            dense
-            exact
-            @click="tagClickPlacement(tabItem.tag)"
-          >
+          <q-item v-for="(tabItem, index) in tabListPlacement" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTabPlacement(tabItem.tag)"
+            clickable v-ripple dense exact @click="tagClickPlacement(tabItem.tag)">
             <q-item-section>
-              <q-item-label
-                ><q-icon size="11px" name="mdi-circle-medium" /><span
-                  class="q-pl-xs"
-                  >{{ tabItem.label }}</span
-                ></q-item-label
-              >
+              <q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
+              }}</span></q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
@@ -993,6 +780,7 @@ const clickDelete = (id: string) => {
 .menu .q-item__section--avatar {
   min-width: 0px;
 }
+
 .menu {
   padding-bottom: 5px;
   padding-top: 5px;
@@ -1009,36 +797,44 @@ const clickDelete = (id: string) => {
 .menuActiveMini {
   background: #212a2f;
 }
+
 .menuSub .q-item {
   border-radius: 0 100px 100px 0;
   margin-right: 2%;
   font-weight: 500;
 }
+
 .expan2 .q-item {
   padding-left: 10%;
 }
+
 .subLabel {
   white-space: nowrap;
   width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .font-400 {
   font-weight: 400;
 }
+
 .expan2 .menuSubHover {
   padding-left: 30%;
   border-radius: 20px;
 }
+
 .menuSubHover {
   padding-left: 25%;
   border-radius: 20px;
 }
+
 .menuSub .q-expansion-item__content {
   background: #212a2f;
   padding: 5px 0px;
   margin-bottom: 5px;
 }
+
 .tabNative {
   color: grey;
   padding-left: 8%;
@@ -1054,10 +850,12 @@ const clickDelete = (id: string) => {
 .q-card {
   box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
 }
+
 .q-card--bordered {
   border: 1px solid #ededed;
   box-shadow: none !important;
 }
+
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
@@ -1075,6 +873,7 @@ const clickDelete = (id: string) => {
 .q-field--outlined .q-field__control:before {
   border-color: #c8d3db;
 }
+
 .btnManu {
   min-height: 48px;
   border-radius: 0px 100px 100px 0px;
@@ -1083,6 +882,7 @@ const clickDelete = (id: string) => {
 .q-field--outlined .q-icon {
   color: #7474747f;
 }
+
 .q-card__actions .q-btn--rectangle {
   padding: 0 14px !important;
 }