feat: refactor for path support

src/components/01_branch-management/BranchCard.vue

@@ -35,12 +35,14 @@ defineProps<{
     @click="$emit('open')"
   >
     <div class="branch-card__header">
-      <div class="branch-card__icon">
-        <q-icon
-          size="md"
-          style="scale: 0.8"
-          name="mdi-office-building-outline"
-        />
+      <div class="branch-card__wrapper">
+        <div class="branch-card__icon">
+          <q-icon
+            size="md"
+            style="scale: 0.8"
+            name="mdi-office-building-outline"
+          />
+        </div>
       </div>
       <div class="branch-card__name">
         <b>{{ data.branchLabelName }}</b>
@@ -96,6 +98,7 @@ defineProps<{
       padding: var(--size-1);
       position: relative;
       transform: rotate(45deg);
+      aspect-ratio: 1;
 
       &::after {
         content: ' ';

src/layouts/MainLayout.vue

@@ -259,13 +259,20 @@ onMounted(async () => {
                     : 'Jobs Worker Service'
               }}
             </span>
-            <span class="text-caption">
-              {{
-                utilsStore.currentTitle?.caption
-                  ? $t(utilsStore.currentTitle?.caption)
-                  : ''
-              }}
-            </span>
+            <div class="flex items-center" style="gap: var(--size-1)">
+              <template v-for="(item, i) in utilsStore.currentTitle.path">
+                <span
+                  class="text-caption cursor-pointer"
+                  @click="item.handler?.()"
+                >
+                  {{ item.text ? $t(item.text) : '' }}
+                </span>
+                <q-icon
+                  name="mdi-chevron-right"
+                  v-if="i + 1 !== utilsStore.currentTitle.path.length"
+                />
+              </template>
+            </div>
           </div>
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">

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

@@ -151,7 +151,7 @@ async function calculateStats() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'branchManagement';
-  utilsStore.currentTitle.caption = 'branchManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }];
 
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();

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

@@ -453,7 +453,7 @@ async function assignFormData(idEdit: string) {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
-  utilsStore.currentTitle.caption = 'personnelManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
 
   await fetchUserList();
 

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

@@ -1240,7 +1240,7 @@ async function fetchListStatsEmployeeGender() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'customerManagement';
-  utilsStore.currentTitle.caption = 'customerManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }];
 
   const resultStats = await getStatsCustomer();
 
@@ -1493,7 +1493,10 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <div class="surface-1 bordered rounded col column">
+      <div
+        class="surface-1 bordered rounded col column"
+        style="overflow: hidden"
+      >
         <!-- tabs -->
         <div class="column">
           <div

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

@@ -1012,7 +1012,7 @@ function cloneData() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
-  utilsStore.currentTitle.caption = 'mainProductCaption';
+  utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }];
 
   calculateStats();
   await fetchListGroups();
@@ -1229,7 +1229,7 @@ watch(inputSearchProductAndService, async () => {
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded column no-wrap"
       >
-        <div class="row surface-2 bordered-b q-px-md q-py-sm">
+        <div class="row surface-2 bordered-b q-px-md q-py-sm items-center">
           <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
             {{ $t('productAndServiceType') }}
           </div>
@@ -1433,7 +1433,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="row items-center justify-between"
+            class="row items-center justify-between q-px-md q-py-sm"
           >
             <div class="col-4">
               <div class="row items-center">

src/pages/MainPage.vue

@@ -99,7 +99,7 @@ const menu = [
 
 onMounted(() => {
   utilsStore.currentTitle.title = '';
-  utilsStore.currentTitle.caption = '';
+  utilsStore.currentTitle.path = [{ text: '' }];
 });
 </script>
 

src/stores/utils/index.ts

@@ -95,9 +95,17 @@ export function formatNumberDecimal(num: number, point: number): string {
 }
 
 const useUtilsStore = defineStore('utilsStore', () => {
-  const currentTitle = ref<{ title: string; caption: string }>({
+  const currentTitle = ref<{
+    title: string;
+    path: { text: string; handler?: () => unknown }[];
+  }>({
     title: '',
-    caption: '',
+    path: [
+      {
+        text: '',
+        handler: () => {},
+      },
+    ],
   });
 
   return {