Merge branch 'ui-new' of frappet.github.com:Frappet/jws-frontend into ui-new

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

@@ -82,7 +82,7 @@ onMounted(async () => {
     <q-input
       for="input-name"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -94,7 +94,7 @@ onMounted(async () => {
     <q-input
       for="input-detail"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -108,7 +108,7 @@ onMounted(async () => {
     <div class="col-12">
       <q-field
         class="full-width"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
         :borderless="readonly"
         :label="$t('detail')"
@@ -138,7 +138,7 @@ onMounted(async () => {
     <q-input
       for="input-process"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space

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

@@ -17,7 +17,7 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -28,7 +28,7 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -39,7 +39,7 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space

src/components/home/PersonCard.vue

@@ -235,8 +235,8 @@ defineEmits<{
 
   &.person-box__disabled {
   
-    opacity: 0.7;
+    opacity: 0.5;
-    filter: grayscale(1);
+    filter: grayscale(0.9);
 
     .status-circle {
       background-color: var(--surface-1);

src/i18n/en-US/customer-main-page.ts

@@ -8,6 +8,9 @@ export default {
   customerEmployeeTooltipCaption: 'Click + to add an employee',
   customerEmployerAdd: 'Add employer',
   customerEmployeeAdd: 'Add employee',
+
+ nameEmployee:'Name Employee',
+
   EMPLOYER: 'Employer',
   EMPLOYEE: 'Employee',
   customerEmployerStatTitle: 'Employer data summary',

src/i18n/en-US/product-service.ts

@@ -9,6 +9,8 @@ export default {
 
   service: 'Service',
   product: 'Product',
+  productGroup: 'Product Group: {name}',
+  productType: 'Product Type: {name}',
 
   messageTooltipNoProduct: 'No Product and Service Groups',
   messageTooltipProductCreate: 'Click + for product and service groups.',

src/i18n/th-th/customer-main-page.ts

@@ -8,6 +8,9 @@ export default {
   customerEmployeeTooltipCaption: 'คลิก + เพื่อเพิ่มลูกจ้าง',
   customerEmployerAdd: 'เพิ่มนายจ้าง',
   customerEmployeeAdd: 'เพิ่มลูกจ้าง',
+
+  nameEmployee:'ชื่อลูกจ้าง',
+
   EMPLOYER: 'นายจ้าง',
   EMPLOYEE: 'ลูกจ้าง',
   customerEmployerStatTitle: 'สรุปจำนวนข้อมูลนายจ้าง',

src/i18n/th-th/main.ts

@@ -9,7 +9,7 @@ export default {
   mainCustomerCaption: 'จัดการคนภายในองค์กร',
 
   mainProductTitle: 'สินค้าและบริการ',
-  mainProductCaption: 'รายการสินค้าและบริการ',
+  mainProductCaption: 'ประเภทสินค้าและบริการ',
 
   mainQuotationTitle: 'ใบเสนอราคา',
   mainQuotationCaption: 'รายการใบเสนอราคา',

src/layouts/MainLayout.vue

@@ -265,7 +265,13 @@ onMounted(async () => {
                   class="text-caption cursor-pointer"
                   @click="item.handler?.()"
                 >
-                  {{ item.text ? $t(item.text) : '' }}
+                  {{
+                    item.text
+                      ? $t(item.text, {
+                          ...(item.argsi18n || {}),
+                        })
+                      : ''
+                  }}
                 </span>
                 <q-icon
                   name="mdi-chevron-right"

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

@@ -1049,7 +1049,7 @@ watch(locale, () => {
                           </q-td>
                           <q-td>
                             <q-btn
-                              icon="mdi-eye"
+                              icon="mdi-eye-outline"
                               size="sm"
                               dense
                               round
@@ -1680,7 +1680,6 @@ watch(locale, () => {
   --_branch-status-color: var(--red-4-hsl);
   --_branch-badge-bg: var(--red-4-hsl);
   filter: grayscale(1);
-  background-color: hsl(var(--gray-6-hsl) / 0.1);
   opacity: 0.5;
 }
 

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

@@ -6,6 +6,7 @@ import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
 import useMyBranchStore from 'src/stores/my-branch';
+import useUserStore from 'src/stores/user';
 
 import { Status } from 'src/stores/types';
 
@@ -65,10 +66,53 @@ const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
 const useMyBranch = useMyBranchStore();
+const userStore = useUserStore();
 
 const { fetchListOptionBranch } = useMyBranch;
 
-const columns = [
+const columnsEmployee = [
+  {
+    name: 'firstName',
+    align: 'left',
+    label: 'nameEmployee',
+    field: 'firstName',
+    sortable: true,
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+    sortable: true,
+  },
+  {
+    name: 'formDialogInputNationality',
+    align: 'left',
+    label: 'formDialogInputNationality',
+    field: 'nationality',
+  },
+  {
+    name: 'formDialogEmployeeNRCNo',
+    align: 'left',
+    label: 'formDialogEmployeeNRCNo',
+    field: 'nrcNo',
+  },
+  {
+    name: 'formDialogInputAge',
+    align: 'left',
+    label: 'formDialogInputAge',
+    field: 'dateOfBirth',
+  },
+
+  {
+    name: 'branchLabel',
+    align: 'left',
+    label: 'branchLabel',
+    field: 'customerBranch',
+  },
+] satisfies QTableProps['columns'];
+
+const columnsCustomer = [
   {
     name: 'customerName',
     align: 'left',
@@ -77,7 +121,7 @@ const columns = [
     sortable: true,
   },
   {
-    name: 'customerType',
+    name: 'type',
     align: 'left',
     label: 'type',
     field: 'customerType',
@@ -168,7 +212,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-const fieldDisplay = ref<
+const fieldDisplayEmployer = ref<
   {
     label: string;
     value: string;
@@ -181,7 +225,7 @@ const fieldDisplay = ref<
 
   {
     label: t('type'),
-    value: 'customerType',
+    value: 'type',
   },
 
   {
@@ -199,15 +243,69 @@ const fieldDisplay = ref<
     value: 'branchEmail',
   },
 ]);
+
+const fieldDisplayEmployee = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>([
+  {
+    label: t('nameEmployee'),
+    value: 'firstName',
+  },
+  {
+    label: t('type'),
+    value: 'type',
+  },
+
+  {
+    label: t('formDialogInputNationality'),
+    value: 'formDialogInputNationality',
+  },
+
+  {
+    label: t('formDialogEmployeeNRCNo'),
+    value: 'formDialogEmployeeNRCNo',
+  },
+
+  {
+    label: t('formDialogInputAge'),
+    value: 'formDialogInputAge',
+  },
+
+  {
+    label: t('branchLabel'),
+    value: 'branchLabel',
+  },
+]);
+
 const fieldSelected = ref<
   (
     | 'customerName'
-    | 'customerType'
+    | 'type'
     | 'personName'
     | 'telephoneNo'
     | 'branchEmail'
+    | 'firstName'
+    | 'formDialogInputNationality'
+    | 'formDialogEmployeeNRCNo'
+    | 'formDialogInputAge'
+    | 'branchLabel'
   )[]
->(['customerName', 'customerType', 'personName', 'telephoneNo', 'branchEmail']);
+>([
+  'customerName',
+  'type',
+  'personName',
+  'telephoneNo',
+  'branchEmail',
+  'firstName',
+  'formDialogInputNationality',
+  'formDialogInputNationality',
+  'formDialogEmployeeNRCNo',
+  'formDialogInputAge',
+  'branchLabel',
+]);
 
 const splitterModel = ref(15);
 const modeView = ref(true);
@@ -391,8 +489,8 @@ const inputFile = (() => {
   return element;
 })();
 
-const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-const listEmployee = ref();
+const listEmployee = ref<Employee[]>([]);
 
 const itemCard = [
   {
@@ -1124,7 +1222,7 @@ async function assignFormDataEmployee(id: string) {
     };
 
     formDataEmployee.value = {
-      image: foundEmployee.profileImageUrl,
+      image: null,
       customerBranchId: foundEmployee.customerBranchId,
       nrcNo: foundEmployee.nrcNo,
       dateOfBirth: foundEmployee.dateOfBirth,
@@ -1169,7 +1267,7 @@ async function assignFormDataEmployee(id: string) {
     }
 
     if (infoEmployeePersonCard.value) {
-      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl;
+      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl || '';
     }
   }
   flowStore.rotate();
@@ -1536,12 +1634,15 @@ watch([inputSearch, currentStatus], async () => {
                     { label: $t('statusINACTIVE'), value: 'INACTIVE' },
                   ]"
                 ></q-select>
-
                 <q-select
                   v-if="modeView === false"
                   id="select-field"
                   for="select-field"
-                  :options="fieldDisplay"
+                  :options="
+                    currentTab === 'employer'
+                      ? fieldDisplayEmployer
+                      : fieldDisplayEmployee
+                  "
                   :display-value="$t('displayField')"
                   v-model="fieldSelected"
                   option-label="label"
@@ -1727,7 +1828,7 @@ watch([inputSearch, currentStatus], async () => {
                       bordered
                       :grid="modeView"
                       :rows="listCustomer"
-                      :columns="columns"
+                      :columns="columnsCustomer"
                       card-container-class=" q-col-gutter-md"
                       row-key="name"
                       :rows-per-page-options="[0]"
@@ -1751,6 +1852,8 @@ watch([inputSearch, currentStatus], async () => {
                         <q-tr
                           :class="{
                             'app-text-muted': props.row.status === 'INACTIVE',
+                            'status-active': props.row.status !== 'INACTIVE',
+                            'status-inactive': props.row.status === 'INACTIVE',
                           }"
                           :props="props"
                           @click="
@@ -1769,14 +1872,7 @@ watch([inputSearch, currentStatus], async () => {
                           <q-td v-if="fieldSelected.includes('customerName')">
                             <div class="row items-center">
                               <div
-                                :class="{
+                                :class="{}"
-                                  'status-active':
-                                    props.row.status !== 'INACTIVE',
-                                  'status-inactive':
-                                    props.row.status === 'INACTIVE',
-                                  'branch-card__hq': props.row.isHeadOffice,
-                                  'branch-card__br': !props.row.isHeadOffice,
-                                }"
                                 style="
                                   width: 50px;
                                   display: flex;
@@ -1813,7 +1909,7 @@ watch([inputSearch, currentStatus], async () => {
                               </div>
                             </div>
                           </q-td>
-                          <q-td v-if="fieldSelected.includes('customerType')">
+                          <q-td v-if="fieldSelected.includes('type')">
                             <span
                               class="tags"
                               :class="{
@@ -1838,7 +1934,7 @@ watch([inputSearch, currentStatus], async () => {
                           </q-td>
                           <q-td>
                             <q-btn
-                              icon="mdi-eye"
+                              icon="mdi-eye-outline"
                               size="sm"
                               dense
                               round
@@ -2032,6 +2128,7 @@ watch([inputSearch, currentStatus], async () => {
                                 },
                               ],
                             }"
+                            :disabled="props.row.status === 'INACTIVE'"
                             @history="openHistory(props.row.id)"
                             @update-card="
                               () => {
@@ -2237,7 +2334,332 @@ watch([inputSearch, currentStatus], async () => {
                   class="col column justify-between q-px-md q-pt-md scroll"
                   v-if="listEmployee.length !== 0"
                 >
-                  <!-- eeee -->
+                  <q-table
+                    flat
+                    bordered
+                    :grid="modeView"
+                    :rows="listEmployee"
+                    :columns="columnsEmployee"
+                    card-container-class=" q-col-gutter-md"
+                    row-key="name"
+                    :rows-per-page-options="[0]"
+                    hide-pagination
+                    :visible-columns="fieldSelected"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr class="surface-2" :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          {{ $t(col.label) }}
+                        </q-th>
+                        <q-th auto-width />
+                      </q-tr>
+                    </template>
+
+                    <template v-slot:body="props">
+                      <q-tr
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                          'status-active': props.row.status !== 'INACTIVE',
+                          'status-inactive': props.row.status === 'INACTIVE',
+                        }"
+                        :props="props"
+                        @click="
+                          () => {
+                            currentCustomerName = props.row.customerName;
+                            customerType = props.row.customerType;
+                            currentCustomerUrlImage = props.row.imageUrl;
+                            currentCustomerId = props.row.id;
+
+                            const { branch, ...payload } = props.row;
+                            currentCustomer = payload;
+                            isMainPage = false;
+                          }
+                        "
+                      >
+                        <q-td v-if="fieldSelected.includes('firstName')">
+                          <div class="row items-center">
+                            <div
+                              style="
+                                width: 50px;
+                                display: flex;
+                                margin-bottom: var(--size-2);
+                              "
+                            >
+                              <div class="branch-card__icon">
+                                <q-avatar size="md">
+                                  <q-img
+                                    :src="
+                                      props.row.profileImageUrl ??
+                                      '/no-profile.png'
+                                    "
+                                  >
+                                    <template #error>
+                                      <q-img src="/no-profile.png" />
+                                    </template>
+                                  </q-img>
+                                </q-avatar>
+
+                                <!-- <q-icon
+                                    size="md"
+                                    style="scale: 0.8"
+                                    :name="props.row.imageUrl"
+                                  /> -->
+                              </div>
+                            </div>
+                            <div class="col">
+                              <div class="col">
+                                {{
+                                  `${props.row.firstName} ${props.row.lastName}` ||
+                                  '-'
+                                }}
+                              </div>
+                              <div class="col app-text-muted">
+                                {{
+                                  `${props.row.firstNameEN} ${props.row.lastNameEN}` ||
+                                  '-'
+                                }}
+                              </div>
+                            </div>
+                          </div>
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('type')">
+                          <span class="tags tags__parimary">
+                            {{ $t('EMPLOYEE') }}
+                          </span>
+                        </q-td>
+                        <q-td
+                          v-if="
+                            fieldSelected.includes('formDialogInputNationality')
+                          "
+                        >
+                          {{ props.row.nationality || '-' }}
+                        </q-td>
+                        <q-td
+                          v-if="
+                            fieldSelected.includes('formDialogEmployeeNRCNo')
+                          "
+                        >
+                          {{ props.row.nrcNo || '-' }}
+                        </q-td>
+                        <q-td
+                          v-if="fieldSelected.includes('formDialogInputAge')"
+                        >
+                          {{ userStore.calculateAge(props.row.dateOfBirth) }}
+                        </q-td>
+
+                        <q-td
+                          v-if="fieldSelected.includes('formDialogInputAge')"
+                        >
+                        
+
+                          <div class="row items-center">
+                          <div class="col">
+                              <div class="col">
+                             {{ props.row.customerBranch.code }}
+                              </div>
+                              <div class="col app-text-muted">
+                              {{ 
+                                
+                                 $i18n.locale === 'en-US' ? `${props.row.customerBranch.nameEN}` : `${props.row.customerBranch.name}`
+                                
+                                }}
+                              </div>
+                            </div>
+                          </div>
+
+
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            icon="mdi-eye-outline"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop="
+                              () => {
+                              openDialogInputForm('INFO', props.row.id) }
+                            "
+                          />
+
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                            :key="props.row.id"
+                          >
+                            <q-menu class="bordered">
+                              <q-list v-close-popup>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-view`"
+                                  @click.stop="
+                                    () => {
+                                      openDialogInputForm('INFO', props.row.id);
+                                    }
+                                  "
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                >
+                                  <q-icon
+                                    name="mdi-eye-outline"
+                                    class="col-3"
+                                    size="xs"
+                                    style="color: hsl(var(--green-6-hsl))"
+                                  />
+                                  <span class="col-9 q-px-md flex items-center">
+                                    {{ $t('viewDetail') }}
+                                  </span>
+                                </q-item>
+
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-edit`"
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                  @click="
+                                    () => {
+                                      openDialogInputForm(
+                                        'INFO',
+                                        props.row.id,
+                                        true,
+                                      );
+                                    }
+                                  "
+                                >
+                                  <q-icon
+                                    name="mdi-pencil-outline"
+                                    class="col-3"
+                                    size="xs"
+                                    style="color: hsl(var(--cyan-6-hsl))"
+                                  />
+                                  <span class="col-9 q-px-md flex items-center">
+                                    {{ $t('edit') }}
+                                  </span>
+                                </q-item>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-delete`"
+                                  dense
+                                  :clickable="props.row.status === 'CREATED'"
+                                  class="row"
+                                  :class="{
+                                    'surface-3': props.row.status !== 'CREATED',
+                                    'app-text-muted':
+                                      props.row.status !== 'CREATED',
+                                  }"
+                                  style="white-space: nowrap"
+                                  @click="onDelete(props.row.id)"
+                                >
+                                  <q-icon
+                                    name="mdi-trash-can-outline"
+                                    size="xs"
+                                    class="col-3"
+                                    :class="{
+                                      'app-text-negative':
+                                        props.row.status === 'CREATED',
+                                    }"
+                                  />
+                                  <span class="col-9 q-px-md flex items-center">
+                                    {{ $t('delete') }}
+                                  </span>
+                                </q-item>
+
+                                <q-item dense>
+                                  <q-item-section class="q-py-sm">
+                                    <div class="q-pa-sm surface-2 rounded">
+                                      <q-toggle
+                                        :id="`view-detail-btn-${props.row.name}-status`"
+                                        dense
+                                        size="sm"
+                                        :label="
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        "
+                                        @click="
+                                          async () => {
+                                            toggleStatusEmployee(
+                                              props.row.id,
+                                              props.row.status === 'ACTIVE'
+                                                ? true
+                                                : false,
+                                            );
+                                          }
+                                        "
+                                        :model-value="
+                                          props.row.status !== 'INACTIVE'
+                                        "
+                                      />
+                                    </div>
+                                  </q-item-section>
+                                </q-item>
+                              </q-list>
+                            </q-menu>
+                          </q-btn>
+                        </q-td>
+                      </q-tr>
+                    </template>
+
+                    <template v-slot:item="props">
+                      <div class="col-3">
+                        <PersonCard
+                          :field-selected="fieldSelected"
+                          history
+                          :data="{
+                            code: props.row.code,
+                            name:
+                              $i18n.locale === 'en-US'
+                                ? `${props.row.firstName} ${props.row.lastName} `.trim()
+                                : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
+                            img: props.row.imageUrl,
+                            male: props.row.gender === 'male',
+                            female: props.row.gender === 'female',
+                            detail: [
+                              {
+                                icon: 'mdi-passport',
+                                value: props.row.nationality,
+                              },
+
+                              {
+                                icon: 'mdi-clock-outline',
+                                value: props.row.dateOfBirth
+                                  ? userStore.calculateAge(
+                                      props.row.dateOfBirth,
+                                    ) ?? ''
+                                  : '',
+                              },
+                            ],
+                          }"
+                          :disabled="props.row.status === 'INACTIVE'"
+                          @history="openHistory(props.row.id)"
+                          @update-card="
+                            (action) =>
+                              openDialogInputForm(action, props.row.id, true)
+                          "
+                          @enter-card="
+                            (action) =>
+                              openDialogInputForm(action, props.row.id)
+                          "
+                          @delete-card="onDelete(props.row.id)"
+                          @toggle-status="
+                            toggleStatusEmployee(
+                              props.row.id,
+                              props.row.status === 'ACTIVE' ? true : false,
+                            )
+                          "
+                        />
+                      </div>
+                    </template>
+                  </q-table>
                 </div>
                 <div
                   v-if="listEmployee.length !== 0"
@@ -3643,6 +4065,10 @@ watch([inputSearch, currentStatus], async () => {
   padding-inline: var(--size-2);
 }
 
+.tags__parimary {
+  --_color: var(--blue-6-hsl);
+}
+
 .tags__purple {
   --_color: var(--violet-11-hsl);
 }
@@ -3651,6 +4077,10 @@ watch([inputSearch, currentStatus], async () => {
   --_color: var(--teal-10-hsl);
 }
 
+.dark .tags__parimary {
+  --_color: var(--blue-12-hsl);
+}
+
 .dark .tags__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -3666,8 +4096,7 @@ watch([inputSearch, currentStatus], async () => {
 .status-inactive {
   --_branch-status-color: var(--red-4-hsl);
   --_branch-badge-bg: var(--red-4-hsl);
-  filter: grayscale(1);
+  filter: grayscale(0.5);
-  background-color: hsl(var(--gray-6-hsl) / 0.1);
   opacity: 0.5;
 }
 

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

@@ -469,7 +469,7 @@ async function toggleStatusProduct(id: string, status: Status) {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
 
-  await fetchListOfProduct();
+  await alternativeFetch();
   flowStore.rotate();
 }
 
@@ -478,7 +478,7 @@ async function toggleStatusService(id: string, status: Status) {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
 
-  await fetchListOfService();
+  await alternativeFetch();
   flowStore.rotate();
 }
 async function toggleStatusType(id: string, status: Status) {
@@ -973,6 +973,11 @@ async function fetchStatus() {
 }
 
 async function alternativeFetch() {
+
+
+console.log('asdasds');
+
+  
   if (productAndServiceTab.value === 'all') {
     await fetchListOfProductAndService();
     flowStore.rotate();
@@ -1022,6 +1027,22 @@ onMounted(async () => {
 watch(productMode, () => {
   inputSearch.value = '';
   currentStatus.value = 'All';
+  const tmp: typeof utilsStore.currentTitle.path = [];
+
+  if (productMode.value === 'type' || productMode.value === 'service') {
+    tmp.push({
+      text: 'productGroup',
+      argsi18n: { name: pathGroupName.value },
+      handler: () => {
+        productMode.value = 'type';
+      },
+    });
+  }
+  if (productMode.value === 'service') {
+    tmp.push({ text: 'productType', argsi18n: { name: pathTypeName.value } });
+  }
+
+  utilsStore.currentTitle.path = tmp;
 });
 
 watch(currentStatus, async () => {
@@ -1183,47 +1204,6 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </transition>
 
-      <!-- title type/service -->
-      <div
-        class="row items-center q-mb-md"
-        v-if="productMode === 'service' || productMode === 'type'"
-      >
-        <q-btn
-          round
-          icon="mdi-arrow-left"
-          flat
-          dense
-          @click="productMode = productMode === 'service' ? 'type' : 'group'"
-          class="q-mr-md"
-        />
-        <div
-          class="text-h6 hover-underline"
-          :class="{
-            'app-text-muted': productMode !== 'type',
-            'text-weight-bold': productMode === 'type',
-          }"
-          @click="productMode = 'type'"
-        >
-          {{ pathGroupName }}
-        </div>
-        <div
-          class="text-h6 app-text-muted q-mx-sm"
-          v-if="productMode === 'service'"
-        >
-          /
-        </div>
-        <div
-          v-if="productMode === 'service'"
-          class="text-h6"
-          :class="{
-            'app-text-muted': productMode !== 'service',
-            'text-weight-bold': productMode === 'service',
-          }"
-        >
-          {{ pathTypeName }}
-        </div>
-      </div>
-
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"

src/stores/employee/types.ts

@@ -2,6 +2,8 @@ import { District, Province, SubDistrict } from '../address';
 import { Status } from '../types';
 import { User } from '../user/types';
 
+import { Customer , CustomerBranch } from '../customer/types';
+
 export type Employee = {
   id: string;
   code: string;
@@ -45,6 +47,8 @@ export type Employee = {
   district: District | null;
   province: Province | null;
   profileImageUrl: string | null;
+  customerBranch: CustomerBranch & { customer: Customer } ; 
+  
 };
 
 export type EmployeeCreate = {

src/stores/utils/index.ts

@@ -97,7 +97,11 @@ export function formatNumberDecimal(num: number, point: number): string {
 const useUtilsStore = defineStore('utilsStore', () => {
   const currentTitle = ref<{
     title: string;
-    path: { text: string; handler?: () => unknown }[];
+    path: {
+      text: string;
+      argsi18n?: Record<string, string>;
+      handler?: () => unknown;
+    }[];
   }>({
     title: '',
     path: [