create VabAccount feature

src/components/artist-information/VAB-account/VabAccount.ts

+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const slide = ref(1);
+    const editor = ref('Customize it.');
+
+    return { slide, editor };
+  },
+});

src/components/artist-information/VAB-account/index.vue

 <template>
-  <div>My component</div>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12 text-uppercase text-weight-medium">Tài khoản VAB</div>
+    <br />
+    <div class="col-2 flex flex-center justify-start">
+      <div>Tên đăng nhập</div>
+    </div>
+    <div class="col-2 flex flex-center">
+      <q-input dense outlined></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn color="primary" no-caps label="Reset Pass"></q-btn>
+    </div>
+    <div class="col-12 flex q-mt-sm">
+      <div class="text-uppercase text-weight-medium">Thông tin profile</div>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <div class="row q-col-gutter-md">
+        <div class="col-4">
+          <q-carousel
+            v-model="slide"
+            animated
+            arrows
+            navigation
+            infinite
+            style="height: 300px"
+          >
+            <q-carousel-slide
+              :name="1"
+              img-src="https://kenh14cdn.com/203336854389633024/2021/4/27/photo-1-1619529782008967751238.jpg"
+              style="width: 100%; height: 300px; object-fit: contain"
+            />
+            <q-carousel-slide
+              :name="2"
+              img-src="https://image.thanhnien.vn/1024/uploaded/caotung/2021_04_25/1_bbrb.jpg"
+              style="width: 100%; height: 300px; object-fit: contain"
+            />
+            <q-carousel-slide
+              :name="3"
+              img-src="https://i.pinimg.com/originals/c2/9a/7d/c29a7d29348b1a3f502803ab9d8355cc.png"
+              style="width: 100%; height: 300px; object-fit: contain"
+            />
+            <q-carousel-slide
+              :name="4"
+              img-src="https://kenh14cdn.com/203336854389633024/2020/12/31/photo-1-16094117624341764656274.jpg"
+              style="width: 100%; height: 300px; object-fit: contain"
+            />
+          </q-carousel>
+        </div>
+
+        <div class="col-8">
+          <q-editor
+            v-model="editor"
+            ref="editorRef"
+            toolbar-text-color="white"
+            toolbar-toggle-color="yellow-8"
+            toolbar-bg="primary"
+            height="266px"
+            :toolbar="[
+              ['token'],
+              ['bold', 'italic', 'underline'],
+              [
+                {
+                  label: $q.lang.editor.formatting,
+                  icon: $q.iconSet.editor.formatting,
+                  list: 'no-icons',
+                  options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
+                },
+              ],
+            ]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
+<script lang="ts" src="./VabAccount.ts"></script>

src/components/artist-information/personal-information/index.vue

@@ -244,10 +244,19 @@
       <div class="row">
         <q-space></q-space>
         <div class="col-auto">
-          <q-btn to="/nghe-sy" color="grey" no-caps label="Quay lại"></q-btn>
+          <q-btn
+            to="/nghe-sy"
+            color="grey"
+            no-caps
+            :label="$t('crudActions.back')"
+          ></q-btn>
         </div>
         <div class="col-auto q-ml-md">
-          <q-btn color="primary" no-caps label="Cập nhật"></q-btn>
+          <q-btn
+            color="primary"
+            no-caps
+            :label="$t('crudActions.update')"
+          ></q-btn>
         </div>
         <div class="col-1"></div>
       </div>

src/i18n/vi/index.ts

@@ -29,6 +29,7 @@ export default {
     delete: 'Xoá',
     search: 'Tìm kiếm',
     details: 'Chi tiết',
+    back: 'Quay lại',
   },
 
   userGroupPage: {

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -56,12 +56,12 @@
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">
-            <div class="text-h6">{{ tab }}</div>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            <VabAccount></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">
-            <div class="text-h6">{{ tab }}</div>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            <div class="text-h6">
+              {{ tab }} Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </div>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
             <div class="text-h6">{{ tab }}</div>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -5,6 +5,7 @@ import routes from 'src/router/routes';
 // import router from 'src/router';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
+import VabAccount from '../../components/artist-information/VAB-account/index.vue';
 import { useRoute } from 'vue-router';
 
 export type ArtistInfoType = {
@@ -32,6 +33,7 @@ export type ArtistInfoType = {
 export default defineComponent({
   components: {
     PersonalInformation,
+    VabAccount,
   },
   watch: {
     tab(value) {