refactor: show Empoloyee in table Customer

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

@@ -132,6 +132,8 @@ const customerTypeSelected = ref<{
   label: t('all'),
   value: 'all',
 });
+
+const currentBtnOpen = ref<boolean[]>([]);
 const employeeStats = ref(0);
 const gridView = ref(false);
 const splitPercent = ref(15); // Customer only
@@ -1069,6 +1071,36 @@ const emptyCreateDialog = ref(false);
                           {{ props.row.branch[0]?.email || '-' }}
                         </q-td>
                         <q-td>
+                          <q-btn
+                            dense
+                            flat
+                            @click.stop="
+                              async () => {
+                                const res = await employeeStore.fetchList({
+                                  customerId: props.row.id,
+                                });
+
+                                if (res) {
+                                  listEmployee = res.result;
+                                  currentBtnOpen[props.rowIndex] =
+                                    !currentBtnOpen[props.rowIndex];
+                                }
+                              }
+                            "
+                          >
+                            <div class="row items-center">
+                              <q-icon name="mdi-account-group-outline" />
+                              <q-icon
+                                class="btn-arrow-right"
+                                :class="{
+                                  active: currentBtnOpen[props.rowIndex],
+                                }"
+                                size="xs"
+                                name="mdi-chevron-right"
+                              />
+                            </div>
+                          </q-btn>
+
                           <q-btn
                             icon="mdi-eye-outline"
                             :id="`btn-eye-${props.row.customerName}`"
@@ -1205,6 +1237,30 @@ const emptyCreateDialog = ref(false);
                           </q-btn>
                         </q-td>
                       </q-tr>
+
+                      <q-tr
+                        v-show="currentBtnOpen[props.rowIndex]"
+                        :props="props"
+                      >
+                        <q-td colspan="100%" style="padding: 16px">
+                          <div class="text-center">
+                            <TableEmpoloyee
+                              :list-employee="listEmployee"
+                              :columns-employee="columnsEmployee"
+                              @history="(item) => {}"
+                              @view="
+                                (item) => {
+                                  employeeFormState.drawerModal = true;
+                                  //employeeFormState.isEmployeeEdit = true;
+                                  employeeFormStore.assignFormDataEmployee(
+                                    item.id,
+                                  );
+                                }
+                              "
+                            />
+                          </div>
+                        </q-td>
+                      </q-tr>
                     </template>
 
                     <template v-slot:item="props">
@@ -2821,4 +2877,14 @@ const emptyCreateDialog = ref(false);
     --_fg: var(--gender-female);
   }
 }
+
+.btn-arrow-right {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.btn-arrow-right.active {
+  transform: rotate(90deg);
+  transition: transform 0.3s ease;
+}
 </style>