feat: add attachment tab and improve layout for product and customer management pages

src/components/04_product-service/PriceDataComponent.vue

@@ -100,8 +100,9 @@ withDefaults(
 </script>
 
 <template>
-  <div class="row col-12">
+  <div class="row col-12 full-width">
     <div class="col-12 q-pb-sm row items-center">
+      <div :class="{ 'col-12': $q.screen.lt.sm }">
         <q-icon
           flat
           size="xs"
@@ -110,10 +111,11 @@ withDefaults(
           name="mdi-cash"
           style="background-color: var(--surface-3)"
         />
-      <span class="text-body1 text-weight-bold">
+        <span class="text-body1 q-pr-md text-weight-bold">
           {{ $t('productService.product.priceInformation') }}
         </span>
-      <section class="q-px-md">
+      </div>
+      <section class="q-pr-md">
         <input
           id="input-calc-vat"
           type="checkbox"

src/components/ProfileBanner.vue

@@ -269,7 +269,7 @@ const smallBanner = ref(false);
                 v-bind:key="tab.name"
                 class="content-tab text-capitalize"
                 :name="tab.name"
-                :label="$t(tab.label)"
+                :label="tab.label"
               />
             </q-tabs>
           </div>
@@ -283,12 +283,12 @@ const smallBanner = ref(false);
     v-if="(!$q.screen.gt.sm && smallBanner) || smallBanner || $q.screen.lt.sm"
     fit="cover"
     class="cover rounded bordered relative-position"
-    :style="`height: 45px`"
+    :style="`height: ${tabsList ? '100' : '45'}px`"
     :src="coverUrl || fallbackCover || '/blank-cover.png'"
     @error="coverUrl = ''"
   >
     <nav
-      class="full-width full-height row no-wrap items-center"
+      class="full-width full-height column"
       :style="`background-image: linear-gradient(
           90deg, ${
             $q.dark.isActive
@@ -298,6 +298,7 @@ const smallBanner = ref(false);
         )`"
     >
       <!-- profile -->
+      <span class="row col items-center">
         <div class="flex items-center full-height q-pl-lg" style="z-index: 1">
           <div
             class="surface-1"
@@ -398,8 +399,8 @@ const smallBanner = ref(false);
           </div>
         </div>
 
-      <div class="col column full-height text-caption q-ml-md">
+        <div class="col column full-height justify-center text-caption q-ml-md">
-        <span class="text-bold ellipsis absolute" style="bottom: 16px">
+          <span class="text-bold ellipsis" style="bottom: 16px">
             {{ title }}
             <q-tooltip anchor="bottom left" self="center left" :delay="300">
               {{ title }}
@@ -407,15 +408,38 @@ const smallBanner = ref(false);
           </span>
           <span
             v-if="title"
-          class="absolute"
             :class="$q.dark.isActive ? 'foreground' : 'app-text-muted'"
             style="font-size: 10px; bottom: 4px"
           >
             {{ caption }}
           </span>
         </div>
+      </span>
+
+      <span class="row full-width" v-if="tabsList && currentTab">
+        <q-tabs
+          dense
+          inline-label
+          mobile-arrows
+          v-model="currentTab"
+          active-class="active-tab text-weight-bold"
+          class="app-text-muted full-width"
+          align="left"
+          v-if="typeof tabsList === 'object'"
+        >
+          <q-tab
+            v-for="tab in tabsList"
+            :id="`${prefix}-tab-${tab.label}`"
+            v-bind:key="tab.name"
+            class="content-tab text-capitalize"
+            :name="tab.name"
+            :label="tab.label"
+          />
+        </q-tabs>
+      </span>
 
       <q-btn
+        v-if="$q.screen.gt.xs"
         class="absolute-top-right q-ma-xs"
         color="primary"
         flat

src/pages/03_customer-management/MainPage.vue

@@ -4322,25 +4322,25 @@ const emptyCreateDialog = ref(false);
           :tabs-list="[
             {
               name: 'personalInfo',
-              label: 'customerEmployee.form.group.personalInfo',
+              label: $t('customerEmployee.form.group.personalInfo'),
             },
             {
               name: 'passport',
-              label: 'customerEmployee.fileType.passport',
+              label: $t('customerEmployee.fileType.passport'),
             },
             {
               name: 'visa',
-              label: 'customerEmployee.form.group.visa',
+              label: $t('customerEmployee.form.group.visa'),
             },
             {
               name: 'healthCheck',
-              label: 'customerEmployee.form.group.healthCheck',
+              label: $t('customerEmployee.form.group.healthCheck'),
             },
             {
               name: 'workHistory',
-              label: 'customerEmployee.form.group.workHistory',
+              label: $t('customerEmployee.form.group.workHistory'),
             },
-            { name: 'other', label: 'customerEmployee.form.group.other' },
+            { name: 'other', label: $t('customerEmployee.form.group.other') },
           ]"
           :toggle-title="$t('status.title')"
         />

src/pages/04_product-service/MainPage.vue

@@ -3709,6 +3709,10 @@ watch(
                   name: 2,
                   label: $t('productService.product.priceInformation'),
                 },
+                {
+                  name: 3,
+                  label: $t('general.attachment'),
+                },
               ]
         "
         v-model:current-tab="productTab"
@@ -3871,6 +3875,10 @@ watch(
                   name: 2,
                   label: $t('productService.product.priceInformation'),
                 },
+                {
+                  name: 3,
+                  label: $t('general.attachment'),
+                },
               ]
         "
         v-model:currentTab="productTab"
@@ -3878,7 +3886,7 @@ watch(
     </div>
 
     <div
-      class="col surface-1 rounded bordered scroll row relative-position"
+      class="col surface-1 rounded bordered scroll row relative-position full-width"
       id="product-form"
       :class="{
         'q-mb-lg q-mx-lg ': $q.screen.gt.sm,