feat: เพิ่ม i18n ของ mainPage branch

src/pages/01_branch-management/MainPage.vue

@@ -4,7 +4,9 @@ import AppBox from 'components/app/AppBox.vue';
 </script>
 <template>
   <div class="column">
-    <div class="row text-h6 text-weight-bold q-mb-md">จัดการสาขา</div>
+    <div class="row text-h6 text-weight-bold q-mb-md">
+      {{ $t('branchManagement') }}
+    </div>
 
     <app-box bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
@@ -14,7 +16,7 @@ import AppBox from 'components/app/AppBox.vue';
               <q-btn
                 unelevated
                 class="color-btn-icon"
-                size="5px"
+                size="10px"
                 round
                 icon="mdi-exclamation"
                 :class="{ 'dark-btn-icon': $q.dark.isActive }"
@@ -25,6 +27,7 @@ import AppBox from 'components/app/AppBox.vue';
                 :class="{ 'dark-tooltip-text': $q.dark.isActive }"
               >
                 <q-img
+                  class="q-mt-md"
                   :src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
                   width="60%"
                 />
@@ -33,13 +36,13 @@ import AppBox from 'components/app/AppBox.vue';
                   :class="{ 'dack-box-content': $q.dark.isActive }"
                 >
                   <div class="column justify-center" style="height: 100%">
-                    <div class="col-4">ยังไม่มีสำนักงานใหญ่</div>
+                    <div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
                     <div class="col-4 q-mb-md q-px-md">
                       <div
                         class="content-text q-pa-sm"
                         :class="{ 'dack-content-text': $q.dark.isActive }"
                       >
-                        คลิก + เพื่อสร้างสำนักงานใหญ่
+                        {{ $t('branchClickToCreateMainOffice') }}
                       </div>
                     </div>
                   </div>
@@ -102,6 +105,7 @@ import AppBox from 'components/app/AppBox.vue';
     --_bg-tooltip-branch-arrow: var(--_bg-box-content);
     --_bg-box-content-text: var(--gray-11);
     --_color-box-content-text: var(--gray-0);
+    --_main-page-branch-tooltip: 100.5%;
   }
 }
 
@@ -113,7 +117,7 @@ import AppBox from 'components/app/AppBox.vue';
 
 .tooltip .tooltip-text {
   visibility: hidden;
-  width: 242px;
+  width: 250px;
   height: 200px;
   background-color: var(--_bg-tooltip-branch);
   color: white;
@@ -122,8 +126,8 @@ import AppBox from 'components/app/AppBox.vue';
   padding: 5px 0;
   position: absolute;
   z-index: 1;
-  bottom: -170px;
-  left: -255px;
+  bottom: -165px;
+  left: -265px;
 }
 
 .tooltip .tooltip-text::after {
@@ -131,7 +135,7 @@ import AppBox from 'components/app/AppBox.vue';
   z-index: -99;
   position: absolute;
   top: 7%;
-  left: 100.2%;
+  left: var(--_main-page-branch-tooltip);
   border-width: 8px;
   border-style: solid;
   border-color: var(--_bg-tooltip-branch-arrow) transparent transparent