refactor: clean & attribute

src/components/02_personnel-management/FormPerson.vue

@@ -117,6 +117,7 @@ defineProps<{
     <VueDatePicker
       utc
       autoApply
+      :teleport="true"
       v-model="birthDate"
       :locale="'th'"
       :enableTimePicker="false"

src/components/02_personnel-management/InfoForm.vue

@@ -6,6 +6,7 @@ defineProps<{
   readonly?: boolean;
   addressTitle?: string;
   addressTitleEN?: string;
+  noAddress?: boolean;
 }>();
 
 const address = defineModel('address', { default: '' });
@@ -38,7 +39,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
         <div class="row q-col-gutter-y-md">
           <slot name="information"></slot>
           <slot name="person"></slot>
-          <slot name="address">
+          <slot name="address" v-if="!noAddress">
             <FormAddress
               dense
               outlined

src/components/home/PersonCard.vue

@@ -130,12 +130,15 @@ defineEmits<{
                         :model-value="!v.disabled"
                         val="xs"
                         padding="none"
-                        :label="
-                          v.disabled
-                            ? $t('switchOnLabel')
-                            : $t('switchOffLabel')
-                        "
-                      />
+                      >
+                        <div class="q-ml-xs">
+                          {{
+                            v.disabled
+                              ? $t('switchOnLabel')
+                              : $t('switchOffLabel')
+                          }}
+                        </div>
+                      </q-toggle>
                     </div>
                   </q-item-section>
                 </q-item>
@@ -214,11 +217,7 @@ defineEmits<{
         "
       >
         <div v-for="(d, j) in v.detail" :key="j">
-          <span
-            :style="{
-              color: $q.dark.isActive ? 'var(--foreground)' : 'var(--stone-7)',
-            }"
-          >
+          <span class="app-text-muted-2">
             {{ d.label }}
           </span>
           <span>{{ d.value || '-' }}</span>

src/layouts/MainLayout.vue

@@ -136,6 +136,10 @@ onMounted(async () => {
   const user = getUsername();
   const uid = getUserId();
 
+  userStore.userOption.roleOpts.length === 0
+    ? await userStore.fetchRoleOption()
+    : '';
+
   const userRoles = getRole();
   if (userRoles) {
     filterRole.value = userRoles.filter(

src/pages/02_personnel-management/MainPage.vue

@@ -739,9 +739,9 @@ watch(
           <div class="q-ma-md">
             <AppBox class="surface-1" style="padding: 0">
               <PersonCard
-                noHover
-                noAction
-                noDetail
+                no-hover
+                no-action
+                no-detail
                 no-bg
                 :list="infoPersonCard"
                 :gridColumns="1"