fix: profile banner icon & title

src/components/ProfileBanner.vue

@@ -189,10 +189,7 @@ const smallBanner = ref(false);
         class="absolute-bottom relative-position column text-cover justify-between no-wrap"
         :class="{ dark: $q.dark.isActive }"
       >
-        <div
-          class="row justify-between full-height"
-          style="padding-left: 150px"
-        >
+        <div class="row justify-between full-height" style="padding-left: 9vw">
           <div class="col column">
             <span
               class="text-bold ellipsis q-pt-xs text-body1"
@@ -226,13 +223,13 @@ const smallBanner = ref(false);
               @click="$emit('update:toggleStatus', toggleStatus)"
             />
             <q-separator
-              v-if="useToggle"
+              v-if="useToggle && menu"
               vertical
               class="q-my-lg"
               spaced="lg"
               style="background: hsl(var(--text-mute))"
             />
-            <div class="q-gutter-x-sm">
+            <div v-if="menu" class="q-gutter-x-sm">
               <q-btn
                 v-for="(item, n) in menu"
                 :key="n"

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

@@ -120,23 +120,6 @@ const modal = ref<boolean>(false);
 const hideStat = ref(false);
 const currentId = ref<string>('');
 const expandedTree = ref<string[]>([]);
-const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
-  {
-    icon: 'mdi-phone-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-map-marker-radius-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-map-legend',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-]);
 
 const formBankBook = ref<BankBook[]>([
   {
@@ -1725,7 +1708,6 @@ watch(currentHq, () => {
                   ? '--violet-10'
                   : '--violet-11'
         }-hsl)/${imageUrl ? '0' : '0.15'})`"
-        :menu="formMenuIcon"
         v-model:current-tab="currentTab"
         @view="
           () => {
@@ -2099,7 +2081,6 @@ watch(currentHq, () => {
               await fetchList({ tree: true, pageSize: 99999, withHead: true });
             }
           "
-          :menu="formMenuIcon"
         />
       </div>
 

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

@@ -103,25 +103,6 @@ const onCreateImageList = ref<{
   list: { url: string; imgFile: File | null; name: string }[];
 }>({ selectedImage: '', list: [] });
 
-const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
-  {
-    icon: 'mdi-account-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-
-  {
-    icon: 'mdi-map-marker-radius-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-briefcase-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-]);
-
 const defaultFormData = {
   provinceId: null,
   districtId: null,
@@ -1543,7 +1524,6 @@ watch(
           "
           v-model:toggle-status="formData.status"
           hideFade
-          :menu="formMenuIcon"
           :toggle-title="$t('status.title')"
           :title="`${locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
           :caption="userCode"
@@ -1813,7 +1793,6 @@ watch(
         icon="mdi-account-plus-outline"
         bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
         v-model:toggle-status="formData.status"
-        :menu="formMenuIcon"
         :img="
           urlProfile ||
           {

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

@@ -60,7 +60,6 @@ import {
 import {
   columnsCustomer,
   columnsEmployee,
-  formMenuIconEmployee,
   uploadFileListEmployee,
   columnsAttachment,
   dialogCreateCustomerItem,
@@ -107,19 +106,6 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   },
 );
 
-const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
-  {
-    icon: 'mdi-office-building-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-briefcase-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-]);
-
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
@@ -2393,7 +2379,6 @@ const emptyCreateDialog = ref(false);
             return true;
           })
         "
-        :menu="formMenuIconEmployee"
         :toggleTitle="$t('status.title')"
         hideFade
         @view="
@@ -3396,7 +3381,6 @@ const emptyCreateDialog = ref(false);
           hide-fade
           use-toggle
           v-model:toggle-status="customerFormData.status"
-          :menu="formMenuIcon"
           :toggle-title="$t('status.title')"
           :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
           :img="
@@ -3853,7 +3837,6 @@ const emptyCreateDialog = ref(false);
             },
             { name: 'other', label: 'customerEmployee.form.group.other' },
           ]"
-          :menu="formMenuIconEmployee"
           :toggle-title="$t('status.title')"
         />
       </div>

src/pages/03_customer-management/constant.ts

@@ -164,19 +164,6 @@ export const uploadFileListEmployee: {
   },
 ];
 
-export const formMenuIconEmployee = [
-  {
-    icon: 'mdi-briefcase-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-map-marker-radius-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-];
-
 export const columnsAttachment = [
   {
     name: 'orderNumber',

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

@@ -2940,13 +2940,6 @@ watch(
         "
         :title="formDataGroup.name"
         :caption="formDataGroup.code"
-        :menu="[
-          {
-            icon: 'mdi-office-building-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
         :fallback-cover="`/images/product-service-${productMode}-banner.png`"
         :color="`hsla(var(${
           productMode === 'group'
@@ -3102,13 +3095,6 @@ watch(
           :title="formDataGroup.name"
           :caption="formDataGroup.code"
           :toggle-title="$t('status.title')"
-          :menu="[
-            {
-              icon: 'mdi-office-building-outline',
-              color: 'hsl(var(--info-bg))',
-              bgColor: 'var(--surface-1)',
-            },
-          ]"
           @update:toggle-status="
             async (v) => {
               await triggerChangeStatus(currentIdGroupType, v, productMode);
@@ -3435,13 +3421,6 @@ watch(
         :img="profileUrl || '/images/product-avatar-add.png'"
         fallback-cover="/images/product-banner.png"
         :bg-color="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-        :menu="[
-          {
-            icon: 'mdi-office-building-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
         @view="
           () => {
             imageDialog = true;
@@ -3580,13 +3559,6 @@ watch(
         "
         fallback-cover="/images/product-banner.png"
         :bg-color="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-        :menu="[
-          {
-            icon: 'mdi-office-building-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
         v-model:toggle-status="formDataProduct.status"
         @view="
           () => {
@@ -3768,18 +3740,6 @@ watch(
         :img="profileUrl || '/images/service-avatar-add.png'"
         fallback-cover="/images/service-banner.png"
         :bg-color="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
-        :menu="[
-          {
-            icon: 'mdi-office-building-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-          {
-            icon: 'mdi-briefcase-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
         @view="
           () => {
             imageDialog = true;
@@ -4080,18 +4040,6 @@ watch(
         fallback-img="/images/service-avatar.png"
         fallback-cover="/images/service-banner.png"
         :bg-color="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
-        :menu="[
-          {
-            icon: 'mdi-office-building-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-          {
-            icon: 'mdi-briefcase-outline',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
         v-model:toggle-status="formDataProductService.status"
         @view="
           () => {