From 726ba370ad2634826cfbe11077d022ae031e9108 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:17:08 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B8=81=E0=B8=94=E0=B8=A2?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=99=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue |  13 +-
 src/pages/04_product-service/MainPage.vue   | 870 +++++++++++---------
 2 files changed, 479 insertions(+), 404 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a85cbea1..452f961c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -151,7 +151,18 @@ async function calculateStats() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'branchManagement';
-  utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }];
+  utilsStore.currentTitle.path = [
+    {
+      text: 'branchManagementCaption',
+      handler: () => {
+        fieldSelectedBranch.value.value = 'branchHQLabel';
+        currentHq.value = {
+          id: '',
+          code: '',
+        };
+      },
+    },
+  ];
 
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index c6f4ca92..8608c651 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -31,7 +31,7 @@ import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
 
 import { dateFormat } from 'src/utils/datetime';
-import {formatNumberDecimal} from 'src/stores/utils';
+import { formatNumberDecimal } from 'src/stores/utils';
 
 const useMyBranch = useMyBranchStore();
 
@@ -207,37 +207,31 @@ const serviceTab = [
 const hideStat = ref(false);
 
 const tbColumn = {
-
   groupAndType: [
-
-  {
-    name: 'name',
-    align:'left',
-    label: 'name',
-    field: 'name',
-  },
-  {
-    name: 'detail',
-    align:'left',
-    label: 'detail',
-    field: 'detail',
-  },
-  {
-    name: 'formDialogInputRemark',
-    align:'left',
-    label: 'formDialogInputRemark',
-    field: 'remark',
-  },
-   {
-    name: 'createdAt',
-    align:'left',
-    label: 'createdAt',
-    field: 'createdAt',
-  }
-
-
-
-    
+    {
+      name: 'name',
+      align: 'left',
+      label: 'name',
+      field: 'name',
+    },
+    {
+      name: 'detail',
+      align: 'left',
+      label: 'detail',
+      field: 'detail',
+    },
+    {
+      name: 'formDialogInputRemark',
+      align: 'left',
+      label: 'formDialogInputRemark',
+      field: 'remark',
+    },
+    {
+      name: 'createdAt',
+      align: 'left',
+      label: 'createdAt',
+      field: 'createdAt',
+    },
   ],
 
   product: [
@@ -280,7 +274,7 @@ const tbColumn = {
       align: 'left',
       label: 'createdAt',
       field: 'createdAt',
-    }
+    },
   ],
 } satisfies {
   groupAndType: QTableProps['columns'];
@@ -289,7 +283,6 @@ const tbColumn = {
 };
 
 const tbControl = reactive({
-
   groupAndType: {
     fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
     fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
@@ -309,8 +302,18 @@ const tbControl = reactive({
     ],
   },
   service: {
-    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
-    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
+    fieldDisplay: [
+      'serviceName',
+      'serviceDetail',
+      'serviceWorkTotal',
+      'createdAt',
+    ],
+    fieldSelected: [
+      'serviceName',
+      'serviceDetail',
+      'serviceWorkTotal',
+      'createdAt',
+    ],
   },
 });
 
@@ -1105,7 +1108,14 @@ function cloneData() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
-  utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }];
+  utilsStore.currentTitle.path = [
+    {
+      text: 'manage',
+      handler: () => {
+        productMode.value = 'group';
+      },
+    },
+  ];
 
   calculateStats();
   await fetchListGroups();
@@ -1115,7 +1125,15 @@ onMounted(async () => {
 watch(productMode, () => {
   inputSearch.value = '';
   currentStatus.value = 'All';
-  const tmp: typeof utilsStore.currentTitle.path = [];
+
+  const tmp: typeof utilsStore.currentTitle.path = [
+    {
+      text: 'manage',
+      handler: () => {
+        productMode.value = 'group';
+      },
+    },
+  ];
 
   if (productMode.value === 'type' || productMode.value === 'service') {
     tmp.push({
@@ -1354,21 +1372,26 @@ watch(inputSearchProductAndService, async () => {
                 </q-menu>
               </q-btn>
 
-                 <q-select
-                  v-if="modeView === false"
-                  id="select-field"
-                  for="select-field"
-                  :options=" tbControl.groupAndType.fieldDisplay.map(x => ({ label: $t(x), value: x })) "
-                  :display-value="$t('displayField')"
-                  v-model="tbControl.groupAndType.fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
+              <q-select
+                v-if="modeView === false"
+                id="select-field"
+                for="select-field"
+                :options="
+                  tbControl.groupAndType.fieldDisplay.map((x) => ({
+                    label: $t(x),
+                    value: x,
+                  }))
+                "
+                :display-value="$t('displayField')"
+                v-model="tbControl.groupAndType.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
 
               <q-btn-toggle
                 v-model="modeView"
@@ -1419,7 +1442,7 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div  class="col flex scroll full-height q-pa-md surface-1 ">
+        <div class="col flex scroll full-height q-pa-md surface-1">
           <div class="full-width">
             <q-table
               flat
@@ -1429,7 +1452,7 @@ watch(inputSearchProductAndService, async () => {
                 (productMode === 'type' ? productType : productGroup) || []
               "
               :columns="tbColumn.groupAndType"
-              class="  full-width  "
+              class="full-width"
               card-container-class="q-gutter-md  "
               row-key="name"
               :rows-per-page-options="[0]"
@@ -1437,281 +1460,303 @@ watch(inputSearchProductAndService, async () => {
               :visible-columns="tbControl.groupAndType.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="async ()=>{
-                   if (productMode === 'type') {
-                          pathTypeName = props.row.name;
-                          currentIdType = props.row.id;
-                          productMode = 'service';
-                          productAndServiceTab = 'service';
-
-                          await fetchListOfProduct();
-                          await fetchListOfService();
-                          await fetchListOfProductAndService();
-                          flowStore.rotate();
-                        }
-                        if (productMode === 'group') {
-
-                              pathGroupName = props.row.name;
-                    currentId = props.row.id;
-                    productMode = 'type';
-                    await fetchListType();
-                    flowStore.rotate();
-                        }
-                }"
-              >
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('name')">
-                  <div class="row items-center">
-                    <div
-                      style="
-                        width: 50px;
-                        display: flex;
-                        margin-bottom: var(--size-2);
-                      "
-                    >
-                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
-
-                   
-                            <q-icon
-                              size="md"
-                              style="scale: 0.8"
-                              :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
-                            />
-
-
-                    
-                      </div>
-                    </div>
-                    <div class="col">
-                      <div class="col">
-                       {{ props.row.name }}
-
-                 
-                      </div>
-                      <div class="col app-text-muted">
-                        {{ props.row.code || '-' }}
-                      </div>
-                    </div>
-                  </div>
-                </q-td>
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('detail')">
-                  {{ props.row.detail || '-' }}
-                </q-td>
-
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('formDialogInputRemark')">
-                  {{ props.row.remark || '-' }}
-                </q-td>
-
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')">
-                {{dateFormat(props.row.createdAt)}}
-                </q-td>
-
-          
-
-                <q-td>
-                  <q-btn
-                    icon="mdi-eye-outline"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop="
-                      () => {
-                      
-   if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-
-
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
-                        }
-
-                      }
-                    "
-                  />
-
-                  <q-btn
-                    icon="mdi-dots-vertical"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop
-                    :key="props.row.id"
+                <q-tr class="surface-2" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
                   >
-                    <q-menu class="bordered">
-                      <q-list v-close-popup>
-                        <q-item
-                          :id="`view-detail-btn-${props.row.name}-view`"
-                          @click.stop="
-                            () => {
-                        if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
+                    {{ $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="
+                    async () => {
+                      if (productMode === 'type') {
+                        pathTypeName = props.row.name;
+                        currentIdType = props.row.id;
+                        productMode = 'service';
+                        productAndServiceTab = 'service';
 
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
-                        }
-                            }
-                          "
-                          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="
-                            () => {
-                             if (productMode === 'type') {
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-
-                            clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = true;
-                    currentId = props.row.id;
-
-                    drawerInfo = 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="()=>{
-                                if (productMode === 'type') {
-                          deleteProductById(props.row.id);
-                        }
-                        if (productMode === 'group') {
-                          deleteProductById(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 () => {
-                                           if (productMode === 'type') {
-                        toggleStatusType(props.row.id, props.row.status);
+                        await fetchListOfProduct();
+                        await fetchListOfService();
+                        await fetchListOfProductAndService();
+                        flowStore.rotate();
                       }
                       if (productMode === 'group') {
-                        toggleStatusGroup(props.row.id, props.row.status);
+                        pathGroupName = props.row.name;
+                        currentId = props.row.id;
+                        productMode = 'type';
+                        await fetchListType();
+                        flowStore.rotate();
                       }
-                                  }
-                                "
-                                :model-value="props.row.status !== 'INACTIVE'"
-                              />
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
+                    }
+                  "
+                >
+                  <q-td
+                    v-if="tbControl.groupAndType.fieldSelected.includes('name')"
+                  >
+                    <div class="row items-center">
+                      <div
+                        style="
+                          width: 50px;
+                          display: flex;
+                          margin-bottom: var(--size-2);
+                        "
+                      >
+                        <div
+                          :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
+                          class="table__icon"
+                        >
+                          <q-icon
+                            size="md"
+                            style="scale: 0.8"
+                            :name="
+                              productMode === 'group'
+                                ? 'mdi-folder'
+                                : 'mdi-folder-table'
+                            "
+                          />
+                        </div>
+                      </div>
+                      <div class="col">
+                        <div class="col">
+                          {{ props.row.name }}
+                        </div>
+                        <div class="col app-text-muted">
+                          {{ props.row.code || '-' }}
+                        </div>
+                      </div>
+                    </div>
+                  </q-td>
+                  <q-td
+                    v-if="
+                      tbControl.groupAndType.fieldSelected.includes('detail')
+                    "
+                  >
+                    {{ props.row.detail || '-' }}
+                  </q-td>
+
+                  <q-td
+                    v-if="
+                      tbControl.groupAndType.fieldSelected.includes(
+                        'formDialogInputRemark',
+                      )
+                    "
+                  >
+                    {{ props.row.remark || '-' }}
+                  </q-td>
+
+                  <q-td
+                    v-if="
+                      tbControl.groupAndType.fieldSelected.includes('createdAt')
+                    "
+                  >
+                    {{ dateFormat(props.row.createdAt) }}
+                  </q-td>
+
+                  <q-td>
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          if (productMode === 'type') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            currentId = props.row.id;
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                    />
+
+                    <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="
+                              () => {
+                                if (productMode === 'type') {
+                                  currentStatusProduct =
+                                    props.row.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  currentIdType = props.row.id;
+                                  assignFormDataGroup(props.row);
+                                  isEdit = false;
+                                  drawerInfo = true;
+                                }
+                                if (productMode === 'group') {
+                                  currentStatusProduct =
+                                    props.row.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  assignFormDataGroup(props.row);
+                                  isEdit = false;
+                                  currentId = props.row.id;
+                                  drawerInfo = true;
+                                }
+                              }
+                            "
+                            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="
+                              () => {
+                                if (productMode === 'type') {
+                                  clearFormGroup();
+                                  currentIdType = props.row.id;
+                                  assignFormDataGroup(props.row);
+                                  isEdit = true;
+                                  drawerInfo = true;
+                                }
+                                if (productMode === 'group') {
+                                  clearFormGroup();
+                                  assignFormDataGroup(props.row);
+                                  isEdit = true;
+                                  currentId = props.row.id;
+
+                                  drawerInfo = 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="
+                              () => {
+                                if (productMode === 'type') {
+                                  deleteProductById(props.row.id);
+                                }
+                                if (productMode === 'group') {
+                                  deleteProductById(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 () => {
+                                      if (productMode === 'type') {
+                                        toggleStatusType(
+                                          props.row.id,
+                                          props.row.status,
+                                        );
+                                      }
+                                      if (productMode === 'group') {
+                                        toggleStatusGroup(
+                                          props.row.id,
+                                          props.row.status,
+                                        );
+                                      }
+                                    }
+                                  "
+                                  :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">
@@ -1754,14 +1799,13 @@ watch(inputSearchProductAndService, async () => {
                           drawerInfo = true;
                         }
                         if (productMode === 'group') {
-
-
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
+                          currentStatusProduct =
+                            props.row.status === 'INACTIVE';
+                          clearFormGroup();
+                          assignFormDataGroup(props.row);
+                          isEdit = false;
+                          currentId = props.row.id;
+                          drawerInfo = true;
                         }
                       }
                     "
@@ -1775,13 +1819,12 @@ watch(inputSearchProductAndService, async () => {
                           drawerInfo = true;
                         }
                         if (productMode === 'group') {
+                          clearFormGroup();
+                          assignFormDataGroup(props.row);
+                          isEdit = true;
+                          currentId = props.row.id;
 
-                            clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = true;
-                    currentId = props.row.id;
-
-                    drawerInfo = true;
+                          drawerInfo = true;
                         }
                       }
                     "
@@ -1791,7 +1834,7 @@ watch(inputSearchProductAndService, async () => {
                           deleteProductById(props.row.id);
                         }
                         if (productMode === 'group') {
-                          deleteProductById(props.row.id)
+                          deleteProductById(props.row.id);
                         }
                       }
                     "
@@ -1809,12 +1852,11 @@ watch(inputSearchProductAndService, async () => {
                           flowStore.rotate();
                         }
                         if (productMode === 'group') {
-
-                              pathGroupName = props.row.name;
-                    currentId = props.row.id;
-                    productMode = 'type';
-                    await fetchListType();
-                    flowStore.rotate();
+                          pathGroupName = props.row.name;
+                          currentId = props.row.id;
+                          productMode = 'type';
+                          await fetchListType();
+                          flowStore.rotate();
                         }
                       }
                     "
@@ -2149,31 +2191,34 @@ watch(inputSearchProductAndService, async () => {
               </q-menu>
             </q-btn>
 
-
-    <q-select
-                  v-if="modeView === false"
-                  id="select-field"
-                  for="select-field"
-                  :options="   {
-                    product: tbControl.product.fieldDisplay,
-                    service: tbControl.service.fieldDisplay,
-                  }[productAndServiceTab].map(x => ({ label: $t(x), value: x })) "
-                  :display-value="$t('displayField')"
-                  :model-value="
-                    { product: tbControl.product.fieldSelected,
-                    service: tbControl.service.fieldSelected,
-                  }[productAndServiceTab]
-"
-                  @update:model-value="(v) => tbControl[productAndServiceTab].fieldSelected = v
-                  "
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
+            <q-select
+              v-if="modeView === false"
+              id="select-field"
+              for="select-field"
+              :options="
+                {
+                  product: tbControl.product.fieldDisplay,
+                  service: tbControl.service.fieldDisplay,
+                }[productAndServiceTab].map((x) => ({ label: $t(x), value: x }))
+              "
+              :display-value="$t('displayField')"
+              :model-value="
+                {
+                  product: tbControl.product.fieldSelected,
+                  service: tbControl.service.fieldSelected,
+                }[productAndServiceTab]
+              "
+              @update:model-value="
+                (v) => (tbControl[productAndServiceTab].fieldSelected = v)
+              "
+              option-label="label"
+              option-value="value"
+              map-options
+              emit-value
+              outlined
+              multiple
+              dense
+            />
 
             <q-btn-toggle
               v-model="modeView"
@@ -2356,11 +2401,18 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'green' : 'orange'}`">
+                          <div
+                            class="table__icon"
+                            :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
+                          >
                             <q-icon
                               size="md"
                               style="scale: 0.8"
-                              :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
+                              :name="
+                                productAndServiceTab === 'product'
+                                  ? 'mdi-folder'
+                                  : 'mdi-server-network'
+                              "
                             />
                           </div>
                         </div>
@@ -2420,37 +2472,55 @@ watch(inputSearchProductAndService, async () => {
                         )
                       "
                     >
-
-                    <div class="row tags-color-green  q-gutter-x-md  no-wrap items-center text-right ">
-                      <div class="tags  col-3 column ellipsis-2-lines  " style=" min-width: 50px;">
-                        <div class="col-4">{{$t('salePrice')}}</div>
-                        <div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.price || 0 , 2) }}</div>
-
+                      <div
+                        class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
+                      >
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('salePrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{ formatNumberDecimal(props.row.price || 0, 2) }}
+                          </div>
+                        </div>
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('agentPrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{
+                              formatNumberDecimal(props.row.agentPrice || 0, 2)
+                            }}
+                          </div>
+                        </div>
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('processingPrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{
+                              formatNumberDecimal(
+                                props.row.processingPrice || 0,
+                                2,
+                              )
+                            }}
+                          </div>
+                        </div>
                       </div>
-                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
-                        <div class="col-4">{{$t('agentPrice')}}</div>
-                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.agentPrice || 0 , 2) }}</div>
-
-                      </div>
-                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
-                        <div class="col-4">{{$t('processingPrice')}}</div>
-                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.processingPrice || 0 , 2) }}</div>
-
-                      </div>
-
-                    </div>
-                     
                     </q-td>
 
-                       <q-td
+                    <q-td
                       v-if="
                         {
                           product: tbControl.product.fieldSelected,
                           service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes( 'createdAt')
+                        }[productAndServiceTab].includes('createdAt')
                       "
                     >
-                      {{  dateFormat(props.row.createdAt) }}
+                      {{ dateFormat(props.row.createdAt) }}
                     </q-td>
                     <q-td>
                       <q-btn
@@ -3346,7 +3416,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-5-hsl);
 }
 
-.icon-color-green  {
+.icon-color-green {
   --_color: var(--teal-10-hsl);
 }
 
@@ -3362,7 +3432,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--violet-10-hsl);
 }
 
-.dark .icon-color-green  {
+.dark .icon-color-green {
   --_color: var(--teal-8-hsl);
 }
 
@@ -3371,10 +3441,9 @@ watch(inputSearchProductAndService, async () => {
 }
 
 .table__icon {
-
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
-  
+
   border-radius: 50%;
   padding: var(--size-1);
   position: relative;
@@ -3393,12 +3462,10 @@ watch(inputSearchProductAndService, async () => {
     background-color: hsla(var(--_branch-status-color) / 1);
   }
 
-    &:deep(.q-icon)  {
+  &:deep(.q-icon) {
     transform: rotate(-45deg);
     color: hsla(var(--_branch-card-bg) / 1);
   }
-
-
 }
 
 .tags {
@@ -3408,7 +3475,4 @@ watch(inputSearchProductAndService, async () => {
   border-radius: var(--radius-2);
   padding-inline: var(--size-2);
 }
-
-
 </style>
-