From f9ec074f0383a8ea2411eef7b5d830019ce44748 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 19 Jan 2024 15:34:09 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20che?=
 =?UTF-8?q?ckin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/logo1.png            | Bin 0 -> 21251 bytes
 src/components/AscGISMap.vue    |   8 +-
 src/components/FormTime.vue     | 255 ++++++++---------
 src/components/PopUp.vue        |   2 +-
 src/components/TableHistory.vue |   2 +-
 src/components/ToolBar.vue      | 159 ++++++-----
 src/router/index.ts             | 108 ++++----
 src/views/HistoryView.vue       |  25 +-
 src/views/HomeView.vue          | 475 ++++----------------------------
 src/views/MianView.vue          | 366 ++++++++++++++++++++++++
 10 files changed, 705 insertions(+), 695 deletions(-)
 create mode 100644 src/assets/logo1.png
 create mode 100644 src/views/MianView.vue

diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 0000000000000000000000000000000000000000..73c287395105a1d394b7fcaae0ca263fbdb593be
GIT binary patch
literal 21251
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
M>#G;5EK#`s0wh8(K>z>%

literal 0
HcmV?d00001

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 001e79e..4678ab2 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -129,10 +129,8 @@ onMounted(async () => {
 
 <template>
   <!-- Loading skeleton -->
-  <div v-if="!poiPlaceName" class="q-pa-md">
-    <div class="q-gutter-md">
-      <q-skeleton height="35vh" width="100%" class="bg-grey-4" />
-    </div>
+  <div v-if="!poiPlaceName" class="col-12">
+    <q-skeleton height="35vh" width="100%" class="bg-grey-4" />
   </div>
 
   <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
@@ -142,7 +140,7 @@ onMounted(async () => {
       :class="
         $q.screen.gt.xs
           ? 'q-pa-xs text-weight-medium text-grey-8'
-          : ' text-weight-medium text-grey-8'
+          : 'q-pa-xs text-weight-medium text-grey-8'
       "
     >
       พื้นที่ใกล้เคียง
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index 57337e5..e7d4939 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -139,138 +139,139 @@ watch(
 )
 </script>
 <template>
-  <q-card-section class="col q-pt-none">
-    <div class="row q-pa-sm q-col-q-gutter-sm">
-      <q-card
-        flat
-        bordered
-        :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
-      >
-        <q-card-section class="bg-primary text-white q-pa-sm">
-          <div class="text-center text-bold">เวลาปัจจุบัน</div>
-        </q-card-section>
-        <!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
-        <q-card-section class="text-center q-pa-sm">
-          <div class="row q-gutter-md">
-            <div class="col">{{ date2Thai(dateNow) }}</div>
-            <div class="col">{{ timeNoew }}</div>
-          </div>
-        </q-card-section>
-      </q-card>
-
-      <q-card flat bordered class="col-12 q-mt-sm">
-        <div class="q-pa-sm">
-          <datepicker
-            :readonly="!statusAction"
-            v-model="date"
-            :locale="'th'"
-            :enableTimePicker="false"
-            week-start="0"
-            autoApply
-            outlined
-            lazy-rules
-            :max-date="dateNow"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :readonly="!statusAction"
-                ref="dateRef"
-                outlined
-                dense
-                :model-value="date !== null ? date2Thai(new Date(date)) : null"
-                :label="`${'วันที่ขอแก้ไข'}`"
-                format-header="YYYY-MM-DD"
-                lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input> </template
-          ></datepicker>
+<div class="col-12 row">
+  <div class="row q-col-q-gutter-sm q-pa-md">
+    <q-card
+      flat
+      bordered
+      :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
+    >
+      <q-card-section class="bg-primary text-white q-pa-sm">
+        <div class="text-center text-bold">เวลาปัจจุบัน</div>
+      </q-card-section>
+      <!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
+      <q-card-section class="text-center q-pa-sm">
+        <div class="row q-gutter-md">
+          <div class="col">{{ date2Thai(dateNow) }}</div>
+          <div class="col">{{ timeNoew }}</div>
         </div>
-      </q-card>
+      </q-card-section>
+    </q-card>
 
-      <!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
-        <div class="row q-gutter-md text-grey-5">
-          <div class="col-1">
-            <q-icon color="grey-5" name="calendar_today" />
-          </div>
-          <div class="col">{{ dataByIdVal.checkInDate }}</div>
-        </div>
-      </q-card> -->
-
-      <q-card
-        flat
-        bordered
-        class="q-pa-sm col-12 q-mt-sm"
-        :style="{
-          borderColor: checkstatusBox ? '#B22222' : '',
-          borderWidth: checkstatusBox ? '2px' : '',
-        }"
-      >
-        <div class="row q-gutter-xs">
-          <div class="col-12">
-            <q-checkbox
-              keep-color
-              color="primary"
-              v-model="checkboxIn"
-              label="ขอแก้ไขเวลาเข้างาน"
-            />
-          </div>
-          <div class="col-12">
-            <q-checkbox
-              keep-color
-              v-model="checkboxOut"
-              color="primary"
-              label="ขอแก้ไขเวลาออกงาน"
-            />
-          </div>
-        </div>
-      </q-card>
-
-      <div
-        v-if="checkstatusBox"
-        class="text-red-9 q-pa-sm"
-        style="font-size: 10px"
-      >
-        กรุณาเลือก
-      </div>
-
-      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
-        <q-input
-          ref="reasonRef"
-          dense
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-sm">
+        <datepicker
+          :readonly="!statusAction"
+          v-model="date"
+          :locale="'th'"
+          :enableTimePicker="false"
+          week-start="0"
+          autoApply
           outlined
-          v-model="reason"
-          label="เหตุผล"
-          type="textarea"
-          :rows="4"
-          label-color="grey-5"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
           lazy-rules
-          hide-bottom-space
-          class="custom-aqua-border"
-        />
-      </q-card>
+          :max-date="dateNow"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              :readonly="!statusAction"
+              ref="dateRef"
+              outlined
+              dense
+              :model-value="date !== null ? date2Thai(new Date(date)) : null"
+              :label="`${'วันที่ขอแก้ไข'}`"
+              format-header="YYYY-MM-DD"
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input> </template
+        ></datepicker>
+      </div>
+    </q-card>
+
+    <!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
+      <div class="row q-gutter-md text-grey-5">
+        <div class="col-1">
+          <q-icon color="grey-5" name="calendar_today" />
+        </div>
+        <div class="col">{{ dataByIdVal.checkInDate }}</div>
+      </div>
+    </q-card> -->
+
+    <q-card
+      flat
+      bordered
+      class="q-pa-sm col-12 q-mt-sm"
+      :style="{
+        borderColor: checkstatusBox ? '#B22222' : '',
+        borderWidth: checkstatusBox ? '2px' : '',
+      }"
+    >
+      <div class="row q-gutter-xs">
+        <div class="col-12">
+          <q-checkbox
+            keep-color
+            color="primary"
+            v-model="checkboxIn"
+            label="ขอแก้ไขเวลาเข้างาน"
+          />
+        </div>
+        <div class="col-12">
+          <q-checkbox
+            keep-color
+            v-model="checkboxOut"
+            color="primary"
+            label="ขอแก้ไขเวลาออกงาน"
+          />
+        </div>
+      </div>
+    </q-card>
+
+    <div
+      v-if="checkstatusBox"
+      class="text-red-9 q-pa-sm"
+      style="font-size: 10px"
+    >
+      กรุณาเลือก
     </div>
-  </q-card-section>
-  <q-separator />
-  <q-card-actions align="right">
-    <q-btn dense color="secondary" label="บันทึก" @click="onCkickSave" />
-  </q-card-actions>
+
+    <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+      <q-input
+        ref="reasonRef"
+        dense
+        outlined
+        v-model="reason"
+        label="เหตุผล"
+        type="textarea"
+        :rows="4"
+        label-color="grey-5"
+        :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+        lazy-rules
+        hide-bottom-space
+        class="custom-aqua-border"
+      />
+    </q-card>
+  </div>
+  <div class="col-12"><q-separator /></div>
+  <div class="row col-12 q-pa-sm">
+    <q-space/>
+    <q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
+  </div>
+</div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index d7758e4..2955b22 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -41,7 +41,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card class="column" style="width: 300px; min-height: 600px">
+    <q-card class="column" :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 450px;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
       <FormTime
         :dataById="data"
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index f11b918..668973e 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -376,7 +376,7 @@ function onClickOpenPopupRejrct(data: any) {
                   icon="edit"
                   label="ขอแก้ไข"
                   color="info"
-                  size="sm"
+                  size="12px"
                   @click="openPopup(props.row)"
                 />
               </div>
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 749fc24..445b6ca 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -58,89 +58,86 @@ const monthYearThai = (val: DataDateMonthObject) => {
 }
 </script>
 <template>
-  <div class="q-pb-sm row">
-    <div class="items-center col-12 row q-gutter-sm">
-      <datepicker
-        v-if="tab === 'history'"
-        menu-class-name="modalfix"
-        v-model="filterYear"
-        class="col-xs-5 col-sm-3 col-md-2"
-        :locale="'th'"
-        autoApply
-        year-picker
-        :enableTimePicker="false"
-        @update:modelValue="filterYearFn('year')"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            lazy-rules
-            outlined
-            :model-value="filterYear + 543"
-            :label="`${'ปีงบประมาณ'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
+  <div class="items-center col-12 row q-pb-sm">
+    <datepicker
+      v-if="tab === 'history'"
+      menu-class-name="modalfix"
+      v-model="filterYear"
+      class="col-xs-5 col-sm-3 col-md-2"
+      :locale="'th'"
+      autoApply
+      year-picker
+      :enableTimePicker="false"
+      @update:modelValue="filterYearFn('year')"
+    >
+      <template #year="{ year }">{{ year + 543 }}</template>
+      <template #year-overlay-value="{ value }">{{
+        parseInt(value + 543)
+      }}</template>
+      <template #trigger>
+        <q-input
+          dense
+          lazy-rules
+          outlined
+          :model-value="filterYear + 543"
+          :label="`${'ปีงบประมาณ'}`"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon>
+          </template>
+        </q-input>
+      </template>
+    </datepicker>
 
-      <datepicker
-        v-else-if="tab === 'time'"
-        menu-class-name="modalfix"
-        v-model="dateMonth"
-        class="col-xs-5 col-sm-3 col-md-2"
-        :locale="'th'"
-        autoApply
-        month-picker
-        :enableTimePicker="false"
-        @update:modelValue="filterYearFn('mount')"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            lazy-rules
-            outlined
-            :model-value="monthYearThai(dateMonth)"
-            :label="`${'ปีงบประมาณ'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
+    <datepicker
+      v-else-if="tab === 'time'"
+      menu-class-name="modalfix"
+      v-model="dateMonth"
+      class="col-xs-5 col-sm-3 col-md-2"
+      :locale="'th'"
+      autoApply
+      month-picker
+      :enableTimePicker="false"
+      @update:modelValue="filterYearFn('mount')"
+    >
+      <template #year="{ year }">{{ year + 543 }}</template>
+      <template #year-overlay-value="{ value }">{{
+        parseInt(value + 543)
+      }}</template>
+      <template #trigger>
+        <q-input
+          dense
+          lazy-rules
+          outlined
+          :model-value="monthYearThai(dateMonth)"
+          :label="`${'ปีงบประมาณ'}`"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon>
+          </template>
+        </q-input>
+      </template>
+    </datepicker>
 
-      <q-space />
-      <q-btn
-        unelevated
-        outline
-        icon="add"
-        color="light-blue"
-        :class="$q.screen.gt.xs ? 'q-px-sm bg-blue-1' : ''"
-        :label="$q.screen.gt.xs ? 'เพิ่มรายการลงเวลากรณีพิเศษ' : ''"
-        @click="onClickopen"
-      />
-    </div>
+    <q-space />
+    <q-btn
+      unelevated
+      icon="add"
+      :dense="$q.screen.lt.sm"
+      color="secondary"
+      :label="$q.screen.gt.xs ? 'เพิ่มรายการลงเวลากรณีพิเศษ' : ''"
+      @click="onClickopen"
+    />
   </div>
 
   <Popup
diff --git a/src/router/index.ts b/src/router/index.ts
index c8ff08a..a365210 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import MapView from '@/views/MapView.vue'
+import MianView from '@/views/MianView.vue'
 
 import keycloak from '@/plugins/keycloak'
 
@@ -8,56 +9,63 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView,
-      meta: {
-        Auth: true,
-      },
-    },
-    {
-      path: '/map',
-      name: 'map',
-      component: MapView,
-      meta: {
-        Auth: true,
-      },
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('@/views/AboutView.vue'),
-      meta: {
-        Auth: true,
-      },
-    },
-    {
-      path: '/history',
-      name: 'history',
-      component: () => import('@/views/HistoryView.vue'),
-      meta: {
-        Auth: true,
-      },
-    },
-    // {
-    //   path: '/camera',
-    //   name: 'camera',
-    //   component: () => import('@/views/SampleCamera.vue'),
-    // },
-    /**
-     * 404 Not Found
-     * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
-     */
-    {
-      path: '/:pathMatch(.*)*',
-      name: 'NotFound',
-      component: () => import('@/views/ErrorNotFoundPage.vue'),
-      meta: {
-        Auth: true,
-      },
+      path: "/",
+      name: "home",
+      component: MianView,
+      children: [
+        {
+          path: '/',
+          name: 'home',
+          component: HomeView,
+          meta: {
+            Auth: true,
+          },
+        },
+        {
+          path: '/map',
+          name: 'map',
+          component: MapView,
+          meta: {
+            Auth: true,
+          },
+        },
+        {
+          path: '/about',
+          name: 'about',
+          // route level code-splitting
+          // this generates a separate chunk (about.[hash].js) for this route
+          // which is lazy-loaded when the route is visited.
+          component: () => import('@/views/AboutView.vue'),
+          meta: {
+            Auth: true,
+          },
+        },
+        {
+          path: '/history',
+          name: 'history',
+          component: () => import('@/views/HistoryView.vue'),
+          meta: {
+            Auth: true,
+          },
+        },
+        // {
+        //   path: '/camera',
+        //   name: 'camera',
+        //   component: () => import('@/views/SampleCamera.vue'),
+        // },
+        /**
+        * 404 Not Found
+        * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
+        */
+        {
+          path: '/:pathMatch(.*)*',
+          name: 'NotFound',
+          component: () => import('@/views/ErrorNotFoundPage.vue'),
+          meta: {
+            Auth: true,
+          },
+        },
+      ]
     },
   ],
 })
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 6336b0a..9116822 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -131,7 +131,6 @@ watch(
         <div
           class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
         >
-          <div class="col-2">
             <q-btn
               icon="arrow_back"
               round
@@ -140,20 +139,11 @@ watch(
               color="white"
               @click="router.go(-1)"
             />
-          </div>
-          <q-space />
-          <span class="text-body1 text-weight-bold col-8 text-center"
+          <span class="text-body1 text-weight-bold q-pl-md"
             >ประวัติการลงเวลา
           </span>
-          <div class="col-2"></div>
         </div>
-        <div class="col-12 q-pa-md text-grey-9">
-          <ToolBar
-            :fetchData="functionFetch"
-            @update:year="updateYear"
-            :tab="stores.tab"
-          />
-          <q-card bordered flat>
+        <div class="col-12 text-grey-9">
             <q-tabs
               v-model="stores.tab"
               dense
@@ -172,6 +162,11 @@ watch(
 
             <q-tab-panels v-model="stores.tab" animated>
               <q-tab-panel name="history">
+                <ToolBar
+                  :fetchData="functionFetch"
+                  @update:year="updateYear"
+                  :tab="stores.tab"
+                />
                 <TableHistory
                   :fetchData="functionFetch"
                   :page-size="pageSize"
@@ -185,6 +180,11 @@ watch(
               </q-tab-panel>
 
               <q-tab-panel name="time">
+                <ToolBar
+                  :fetchData="functionFetch"
+                  @update:year="updateYear"
+                  :tab="stores.tab"
+                />
                 <TableHistory
                   :fetchData="functionFetch"
                   :page-size="pageSize"
@@ -198,7 +198,6 @@ watch(
               </q-tab-panel>
             </q-tab-panels>
             <!-- </q-card> -->
-          </q-card>
           <!-- <Table
             :fetchData="fetchlistHistory"
             :page-size="pageSize"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e2cf552..49d7d8e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -10,7 +10,6 @@ import config from '@/app.config'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
-import type { notiType } from '@/interface/index/Main'
 
 // import components
 import MapCheck from '@/components/AscGISMap.vue'
@@ -24,10 +23,7 @@ const {
   showLoader,
   hideLoader,
   messageError,
-  dialogRemove,
-  success,
 } = mixin
-const router = useRouter()
 const $q = useQuasar()
 
 const dialogTime = ref<boolean>(false)
@@ -51,79 +47,6 @@ async function fetchCheckTime() {
     })
 }
 
-const notiTrigger = ref<boolean>(false)
-const notiList = ref<notiType[]>([])
-const totalNotiList = ref<number>(0)
-/** function เรียกข้อมุลแจ้งเตือน */
-async function fetchNotifications(index: number, type: string) {
-  showLoader()
-  await http
-    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
-    .then((res) => {
-      const response = res.data.result.data
-      const list: notiType[] = []
-      if (type === 'DEL') {
-        totalNotiList.value = res.data.result.total
-        if (notiList.value.length === 14) {
-          notiList.value = []
-          response.map((e: any) => {
-            list.push({
-              id: e.id,
-              sender:
-                e.createdFullName == '' || e.createdFullName == null
-                  ? 'เจ้าหน้าที่'[0]
-                  : e.createdFullName[0],
-              body: e.body ?? '',
-              timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
-            })
-          })
-          notiList.value.push(...list)
-        }
-      } else {
-        response.map((e: any) => {
-          list.push({
-            id: e.id,
-            sender:
-              e.createdFullName == '' || e.createdFullName == null
-                ? 'เจ้าหน้าที่'[0]
-                : e.createdFullName[0],
-            body: e.body ?? '',
-            timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
-          })
-        })
-        notiList.value.push(...list)
-        totalNotiList.value = res.data.result.total
-      }
-    })
-    .catch((err) => {
-      messageError($q, err)
-    })
-    .finally(() => {
-      hideLoader()
-    })
-}
-
-/**
- * function ลบรายการแจ้งเตือน
- * @param id noti
- */
-async function onClickDelete(id: string, index: number) {
-  dialogRemove($q, async () => {
-    await http
-      .delete(config.API.msgId(id))
-      .then(() => {
-        notiList.value.splice(index, 1)
-        success($q, 'ลบข้อมูลสำเร็จ')
-      })
-      .catch((e) => {
-        messageError($q, e)
-      })
-      .finally(async () => {
-        fetchNotifications(1, 'DEL')
-        hideLoader()
-      })
-  })
-}
 
 /** ref อัพเดทเวลา*/
 const dateNow = ref<Date>(new Date())
@@ -307,27 +230,6 @@ async function onClickConfirm() {
   dialogTime.value = false
 }
 
-/** function logout*/
-function onClickLogout() {
-  $q.dialog({
-    title: 'ยืนยันการออกจากระบบ',
-    message: `ต้องการออกจากระบบใช้หรือไม่?`,
-    cancel: 'ยกเลิก',
-    ok: 'ยืนยัน',
-    persistent: true,
-  }).onOk(() => {
-    keycloak.logout()
-  })
-}
-
-function onLoad(index: any, done: any) {
-  if (notiList.value.length < totalNotiList.value) {
-    setTimeout(() => {
-      fetchNotifications(index + 1, 'NOMAL')
-      done()
-    }, 2000)
-  }
-}
 
 // class
 const getClass = (val: boolean) => {
@@ -341,11 +243,6 @@ const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
-  await fetchNotifications(1, 'NOMAL')
-  if (keycloak.tokenParsed != null) {
-    fullName.value = keycloak.tokenParsed.name
-  }
-
   updateClock()
 })
 </script>
@@ -356,283 +253,16 @@ onMounted(async () => {
       <q-card flat class="row col-12 cardNone">
         <!-- <q-header elevated class="bg-purple"> -->
         <q-toolbar :class="getClass(stetusCheckin)">
-          <q-btn
-            icon="history"
-            unelevated
-            rounded
-            dense
-            flat
-            color="white"
-            :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
-            :class="$q.screen.gt.xs ? 'q-px-md' : ''"
-            @click="router.push('/history')"
-          />
-          <q-space />
-
-          <strong v-if="stetusCheckin" style="font-size: 1rem">
-            ลงเวลาเข้างาน
-          </strong>
-          <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong>
-          <q-space />
-          <q-btn
-            round
-            dense
-            flat
-            size="13px"
-            class="q-mx-md"
-            :disable="totalNotiList == 0"
-          >
-            <q-icon name="notifications" size="24px" color="white" />
-
-            <q-badge
-              rounded
-              v-show="totalNotiList !== 0"
-              color="negative"
-              text-color="white"
-              floating
-              >{{ totalNotiList }}</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>
-              </div>
-
-              <q-infinite-scroll @load="onLoad" :offset="250">
-                <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.sender[0]
-                        }}</span>
-                      </q-avatar>
-                    </q-item-section>
-                    <q-item-section>
-                      <q-item-label caption class="text-black">{{
-                        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="onClickDelete(item.id, index)"
-                      ></q-btn>
-                    </div>
-                  </q-item>
-                </div>
-
-                <template v-slot:loading v-if="notiList.length < totalNotiList">
-                  <div class="row justify-center q-my-md">
-                    <q-spinner-dots color="primary" size="40px" />
-                  </div>
-                </template>
-              </q-infinite-scroll>
-
-              <!-- <q-list
-                style="min-width: 300px"
-                v-for="n in notiList"
-                :key="n.id"
-              >
-                <q-item v-ripple class="mytry q-py-xs" dense>
-                  <q-item-section avatar top style="min-width: 40px">
-                    <q-avatar color="primary" size="22px" text-color="white">
-                      <span class="text-weight-medium text-uppercase">{{
-                        n.sender
-                      }}</span>
-                    </q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label caption class="text-black">{{
-                      n.body
-                    }}</q-item-label>
-                    <q-item-label
-                      caption
-                      class="row items-center text-grey-7"
-                      >{{ date2Thai(n.timereceive) }}</q-item-label
-                    >
-                  </q-item-section>
-                  <q-btn
-                    size="sm"
-                    unelevated
-                    dense
-                    icon="mdi-close"
-                    class="mybtn q-mx-xs"
-                    @click="onClickDelete(n.id)"
-                  ></q-btn>
-                </q-item>
-                <q-separator color="grey-2" />
-              </q-list> -->
-            </q-menu>
-          </q-btn>
-          <q-btn round dense flat icon="account_circle" style="font-size: 16px">
-            <q-menu>
-              <div class="q-pa-md" style="max-width: 500px">
-                <q-list>
-                  <q-item>
-                    <q-item-section avatar>
-                      <q-icon color="primary" name="account_circle" />
-                    </q-item-section>
-
-                    <q-item-section>{{ fullName }}</q-item-section>
-                  </q-item>
-
-                  <q-item class="text-center">
-                    <q-item-section>
-                      <q-item-label>
-                        <q-btn
-                          color="primary"
-                          label="ออกจากระบบ"
-                          push
-                          size="sm"
-                          @click="onClickLogout"
-                      /></q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div> </q-menu
-          ></q-btn>
+          <div class="row col-12 justify-center">
+            <strong v-if="stetusCheckin" style="font-size: 1rem">
+              ลงเวลาเข้างาน
+            </strong>
+            <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong>
+          </div>
         </q-toolbar>
-
-        <!-- </q-header> -->
-        <!-- <div :class="getClass(stetusCheckin)">
-          <div class="col-2">
-            <q-btn
-              icon="history"
-              unelevated
-              rounded
-              dense
-              flat
-              color="white"
-              :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
-              :class="$q.screen.gt.xs ? 'q-px-md' : ''"
-              @click="router.push('/history')"
-            />
-          </div>
-          <span class="text-body1 text-weight-bold col-8 text-center">
-            <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
-            <span v-else>ลงเวลาออกงาน</span>
-          </span>
-          <div class="col-2 text-right">
-            <q-btn
-              round
-              dense
-              flat
-              size="13px"
-              class="q-mx-md"
-              :disable="notiList.length === 0"
-            >
-              <q-icon name="notifications" size="24px" color="white" />
-
-              <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>
-                </div>
-
-                <q-list
-                  style="min-width: 300px"
-                  v-for="n in notiList"
-                  :key="n.id"
-                >
-                  <q-item v-ripple class="mytry q-py-xs" dense>
-                    <q-item-section avatar top style="min-width: 40px">
-                      <q-avatar color="primary" size="22px" text-color="white">
-                        <span class="text-weight-medium text-uppercase">{{
-                          n.sender
-                        }}</span>
-                      </q-avatar>
-                    </q-item-section>
-                    <q-item-section>
-                      <q-item-label caption class="text-black">{{
-                        n.body
-                      }}</q-item-label>
-                      <q-item-label
-                        caption
-                        class="row items-center text-grey-7"
-                        >{{ date2Thai(n.timereceive) }}</q-item-label
-                      >
-                    </q-item-section>
-                    <q-btn
-                      size="sm"
-                      unelevated
-                      dense
-                      icon="mdi-close"
-                      class="mybtn q-mx-xs"
-                      @click="onClickDelete(n.id)"
-                    ></q-btn>
-                  </q-item>
-                  <q-separator color="grey-2" />
-                </q-list>
-              </q-menu>
-            </q-btn>
-            <q-btn
-              round
-              dense
-              flat
-              icon="account_circle"
-              style="font-size: 16px"
-            >
-              <q-menu>
-                <div class="q-pa-md" style="max-width: 500px">
-                  <q-list>
-                    <q-item>
-                      <q-item-section avatar>
-                        <q-icon color="primary" name="account_circle" />
-                      </q-item-section>
-
-                      <q-item-section>{{ fullName }}</q-item-section>
-                    </q-item>
-
-                    <q-item class="text-center">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-btn
-                            color="primary"
-                            label="ออกจากระบบ"
-                            push
-                            size="sm"
-                            @click="onClickLogout"
-                        /></q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div> </q-menu
-            ></q-btn>
-          </div>
-        </div> -->
-        <div class="col-12 q-pa-md text-grey-9">
+        <div class="col-12 text-grey-9">
           <div class="col-12 row justify-center">
-            <div class="col-12 row q-py-sm justify-center">
+            <div class="col-12 row q-pt-md justify-center">
               <div
                 class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
               >
@@ -654,13 +284,12 @@ onMounted(async () => {
                 </div>
               </div>
             </div>
-
-            <div class="col-xs-12 col-md-11 row q-col-gutter-md">
-              <div class="col-12 col-sm-8">
-                <MapCheck @update:location="updateLocation" />
+            <div class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row">
+              <div class="col-xs-12 col-sm-8">
+                <MapCheck @update:location="updateLocation" class="col-12" />
                 <!-- <AscMaps /> -->
               </div>
-              <div class="col-12 col-sm-4">
+              <div class="col-xs-12 col-sm-4">
                 <q-card flat bordered class="card-container">
                   <div
                     v-if="!cameraIsOn && img == null"
@@ -676,7 +305,7 @@ onMounted(async () => {
                       />
                     </div>
                   </div>
-                  <div>
+                  <div class="col-12 row items-center">
                     <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                     <Camera
                       :resolution="{ width: photoWidth, height: photoHeight }"
@@ -717,7 +346,7 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-              <div class="col-12 q-mb-md">
+              <div class="col-xs-12 col-sm-12 items-center">
                 <q-card
                   bordered
                   flat
@@ -765,6 +394,7 @@ onMounted(async () => {
                       :rules="[(val) => !!val || 'กรุณาระบุสถานที่']"
                       lazy-rules
                       @update:model-value="selectLocation()"
+                      hide-bottom-space
                     />
                   </div>
                   <div
@@ -783,45 +413,55 @@ onMounted(async () => {
                     />
                   </div>
                 </q-card>
-
-                <q-card bordered flat class="q-pa-sm">
-                  <div class="col-12">
+              </div>
+                
+              <div class="col-xs-12 col-sm-12">
+                <q-card
+                  bordered
+                  flat
+                  :class="
+                    $q.screen.gt.xs
+                      ? 'q-px-md q-py-sm row items-center  shadow-0'
+                      : 'q-pa-md row items-center  shadow-0'
+                  "
+                >
+                  <div class="text-weight-bold">หมายเหตุ</div>
+                  <div class="col-12 q-pt-sm">
                     <q-input
                       outlined
                       v-model="remark"
-                      label="หมายเหตุ"
                       lazy-rules
                       dense
                     />
                   </div>
                 </q-card>
-
-                <div class="col-12 text-right">
-                  <q-separator />
-                  <div class="col-12 q-pa-md">
-                    <p
-                      :class="
-                        $q.screen.gt.xs
-                          ? 'text-red text-caption '
-                          : 'text-red text-caption text-center'
-                      "
-                    >
-                      *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                    </p>
-                    <q-btn
-                      :label="
-                        stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
-                      "
-                      :color="img == null ? 'grey-6' : 'primary'"
-                      push
-                      size="14px"
-                      :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
-                      :disable="camera && img ? false : true"
-                      @click="validateForm"
-                    />
-                  </div>
-                </div>
               </div>
+             
+            </div>
+          </div> 
+          <div class="col-12 text-right">
+            <q-separator />
+            <div class="col-12 q-pa-md">
+              <p
+                :class="
+                  $q.screen.gt.xs
+                    ? 'text-red text-caption '
+                    : 'text-red text-caption text-center'
+                "
+              >
+                *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+              </p>
+              <q-btn
+                :label="
+                  stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
+                "
+                :color="img == null ? 'grey-6' : 'primary'"
+                push
+                size="18px"
+                :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
+                :disable="camera && img ? false : true"
+                @click="validateForm"
+              />
             </div>
           </div>
         </div>
@@ -889,8 +529,9 @@ onMounted(async () => {
 .card-container {
   position: relative;
   overflow: hidden;
-  height: 39vh; /* Adjust as needed */
+  height: autu; /* Adjust as needed */
   background: #f6f5f5;
+  height: 35vh !important;
 }
 .image-container {
   position: absolute;
@@ -904,7 +545,7 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 5px; /* Adjust as needed */
+  border-radius: 8px; /* Adjust as needed */
 }
 
 .preview-placeholder {
diff --git a/src/views/MianView.vue b/src/views/MianView.vue
new file mode 100644
index 0000000..65bae0a
--- /dev/null
+++ b/src/views/MianView.vue
@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import keycloak from '@/plugins/keycloak'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+// import Type
+import type { notiType } from '@/interface/index/Main'
+
+
+// import Stores
+import { useCounterMixin } from '@/stores/mixin'
+
+const mixin = useCounterMixin()
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogRemove,
+  success,
+} = mixin
+const router = useRouter()
+const $q = useQuasar()
+
+const notiTrigger = ref<boolean>(false)
+const notiList = ref<notiType[]>([])
+const totalNotiList = ref<number>(0)
+/** function เรียกข้อมุลแจ้งเตือน */
+async function fetchNotifications(index: number, type: string) {
+  showLoader()
+  await http
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
+    .then((res) => {
+      const response = res.data.result.data
+      const list: notiType[] = []
+      if (type === 'DEL') {
+        totalNotiList.value = res.data.result.total
+        if (notiList.value.length === 14) {
+          notiList.value = []
+          response.map((e: any) => {
+            list.push({
+              id: e.id,
+              sender:
+                e.createdFullName == '' || e.createdFullName == null
+                  ? 'เจ้าหน้าที่'[0]
+                  : e.createdFullName[0],
+              body: e.body ?? '',
+              timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
+            })
+          })
+          notiList.value.push(...list)
+        }
+      } else {
+        response.map((e: any) => {
+          list.push({
+            id: e.id,
+            sender:
+              e.createdFullName == '' || e.createdFullName == null
+                ? 'เจ้าหน้าที่'[0]
+                : e.createdFullName[0],
+            body: e.body ?? '',
+            timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
+          })
+        })
+        notiList.value.push(...list)
+        totalNotiList.value = res.data.result.total
+      }
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => {
+      hideLoader()
+    })
+}
+
+/**
+ * function ลบรายการแจ้งเตือน
+ * @param id noti
+ */
+async function onClickDelete(id: string, index: number) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.msgId(id))
+      .then(() => {
+        notiList.value.splice(index, 1)
+        success($q, 'ลบข้อมูลสำเร็จ')
+      })
+      .catch((e) => {
+        messageError($q, e)
+      })
+      .finally(async () => {
+        fetchNotifications(1, 'DEL')
+        hideLoader()
+      })
+  })
+}
+
+/** function logout*/
+function onClickLogout() {
+  $q.dialog({
+    title: 'ยืนยันการออกจากระบบ',
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: 'ยกเลิก',
+    ok: 'ยืนยัน',
+    persistent: true,
+  }).onOk(() => {
+    keycloak.logout()
+  })
+}
+
+function onLoad(index: any, done: any) {
+  if (notiList.value.length < totalNotiList.value) {
+    setTimeout(() => {
+      fetchNotifications(index + 1, 'NOMAL')
+      done()
+    }, 2000)
+  }
+}
+
+// class
+const getClass = (val: boolean) => {
+  return {
+    'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
+    'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
+  }
+}
+
+const fullName = ref<string>('')
+onMounted(async () => {
+  await fetchNotifications(1, 'NOMAL')
+  if (keycloak.tokenParsed != null) {
+    fullName.value = keycloak.tokenParsed.name
+  }
+})
+</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">
+          <q-avatar style="background: linear-gradient(#4CE2D3, #02A998);">
+            <q-img
+              src="@/assets/logo1.png"
+              spinner-color="white"
+              style="height: 35px; width: 35px"
+            />
+          </q-avatar>
+          <div class="row q-ml-md text-left items-center gt-xs">
+            <div
+              style="color: #ffffff; 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>
+        <q-space />
+        <q-btn
+          icon="history"
+          unelevated
+          rounded
+          dense
+          flat
+          color="white"
+          @click="router.push('/history')"
+        />
+        <q-btn
+          round
+          dense
+          flat
+          size="13px"
+          class="q-mx-md"
+          :disable="totalNotiList == 0"
+        >
+          <q-icon name="notifications" size="24px" color="white" />
+
+          <q-badge
+            rounded
+            v-show="totalNotiList !== 0"
+            color="negative"
+            text-color="white"
+            floating
+            >{{ totalNotiList }}</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>
+            </div>
+
+            <q-infinite-scroll @load="onLoad" :offset="250">
+              <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.sender[0]
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
+                      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="onClickDelete(item.id, index)"
+                    ></q-btn>
+                  </div>
+                </q-item>
+              </div>
+
+              <template v-slot:loading v-if="notiList.length < totalNotiList">
+                <div class="row justify-center q-my-md">
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+              </q-infinite-scroll>
+            </q-menu>
+          </q-btn>
+          <q-btn round dense color="white" flat icon="account_circle" style="font-size: 16px">
+            <q-menu>
+              <div class="q-pa-md" style="max-width: 500px">
+                <q-list>
+                  <q-item>
+                    <q-item-section avatar>
+                      <q-icon color="primary" name="account_circle" />
+                    </q-item-section>
+
+                    <q-item-section>{{ fullName }}</q-item-section>
+                  </q-item>
+
+                  <q-item class="text-center">
+                    <q-item-section>
+                      <q-item-label>
+                        <q-btn
+                          color="primary"
+                          label="ออกจากระบบ"
+                          push
+                          size="sm"
+                          @click="onClickLogout"
+                      /></q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div> </q-menu
+          ></q-btn>
+      </q-toolbar>
+    </q-header>
+    <div
+      class="bg-top"
+      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
+    />
+    <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;
+}
+
+.menu {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.tabsHome .q-tab__icon {
+  font-size: 18px;
+}
+
+.border-100 {
+  border-radius: 100px;
+}
+
+.bg-top {
+  background: #273238 !important;
+}
+
+.header-br {
+  border-bottom: 1px solid #fdfdfd31;
+}
+
+.menuActive {
+  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;
+}
+
+.q-menu {
+  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%;
+}
+
+.q-field--outlined .q-field__control {
+  border-radius: 5px;
+}
+
+.q-field--outlined .q-field__control:before {
+  border-color: #c8d3db;
+}
+
+/* .q-field--outlined .q-icon {
+  color: #7474747f;
+} */
+
+.shadow-0 {
+  box-shadow: none !important;
+}
+
+.btnBlue {
+  background-color: #016987;
+  color: #fff;
+}
+</style>