refactor: import and icon

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

@@ -1,19 +1,15 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+
 import useBranchStore from 'stores/branch';
-
 import AppBox from 'components/app/AppBox.vue';
-import BtnAddComponet from 'components/01_branch-management/BtnAddComponent.vue';
-import TableCardComponet from 'components/01_branch-management/TableCardComponent.vue';
-import CardDetailsComponent from 'components/01_branch-management/CardDetailsComponent.vue';
-import StatCardComponet from 'components/StatCardComponent.vue';
-import TooltipComponet from 'components/TooltipComponent.vue';
-import { ref } from 'vue';
-
-import { onMounted } from 'vue';
+import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
+import TooltipComponent from 'components/TooltipComponent.vue';
+import StatCardComponent from 'components/StatCardComponent.vue';
 
 const BranchStore = useBranchStore();
 const test = ref<string>('');
-const testDate = ref<string>();
 
 const shape = ref<boolean>(false);
 
@@ -94,9 +90,7 @@ const simple = ref<
           },
         ],
       },
-      {
-        label: 'Bui1001',
-      },
+      { label: 'Bui1001' },
     ],
   },
 
@@ -159,14 +153,14 @@ onMounted(() => {
       class="q-mb-md"
       :class="{ 'bg-card-branch-title': $q.dark.isActive }"
     >
-      <stat-card-componet :branch="branchStat" />
+      <StatCardComponent :branch="branchStat" />
     </app-box>
 
     <app-box v-if="false" bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">
-            <tooltip-componet
+            <TooltipComponent
               title="branchNoMainOfficeYet"
               caption="branchClickToCreateMainOffice"
               imgSrc="img-table-"
@@ -178,13 +172,9 @@ onMounted(() => {
           class="col test self-center"
           style="display: flex; align-items: center"
         >
-          <btn-add-componet
+          <BtnAddComponent
             :label="'สร้างสำนักงานใหญ่'"
-            @trigger="
-              () => {
-                console.log('test');
-              }
-            "
+            @trigger="() => console.log('test')"
           />
         </div>
       </div>
@@ -212,7 +202,7 @@ onMounted(() => {
               label="ค้นหา"
             >
               <template #prepend>
-                <iconify-icon icon="ic:baseline-search" />
+                <Icon icon="ic:baseline-search" />
               </template>
             </q-input>
           </div>
@@ -222,11 +212,7 @@ onMounted(() => {
       <q-card-section class="no-padding row" style="height: 423px">
         <div class="bordered q-pa-md bg-branch-tree-box" style="width: 21%">
           <div
-            @click="
-              () => {
-                console.log('test');
-              }
-            "
+            @click="() => console.log('test')"
             class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
           >
             <div class="text-h4 q-mr-md">+</div>
@@ -269,12 +255,12 @@ onMounted(() => {
                     v-if="prop.node.isHeadOffice"
                     dense
                   >
-                    <iconify-icon
+                    <Icon
                       v-if="expanded.includes(prop.node.label)"
                       icon="eva:file-add-fill"
                     />
 
-                    <iconify-icon v-else icon="eva:file-add-outline" />
+                    <Icon v-else icon="eva:file-add-outline" />
                   </q-btn>
 
                   <q-btn
@@ -285,7 +271,7 @@ onMounted(() => {
                     flat
                     name="menu"
                   >
-                    <iconify-icon icon="ri:more-2-fill" />
+                    <Icon icon="ri:more-2-fill" />
                     <q-menu class="bordered" style="width: 150px">
                       <q-list class="q-pa-sm">
                         <q-item clickable v-close-popup class="no-padding">
@@ -379,7 +365,7 @@ onMounted(() => {
           </q-card-section>
 
           <q-card-section>
-            <table-card-componet :subBranch="true" :rows="rows" />
+            <table-card-component :subBranch="true" :rows="rows" />
           </q-card-section>
         </div>