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

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak';

import { calculateAge, dateFormat } from 'src/utils/datetime';

import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useMyBranchStore from 'stores/my-branch';
import useUtilsStore, { dialog } from 'stores/utils';
import useFlowStore from 'stores/flow';
import { Status } from 'stores/types';
import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
import { Employee, EmployeeHistory } from 'stores/employee/types';

import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import PersonCard from 'components/home/PersonCard.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import AddButton from 'components/AddButton.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import SideMenu from 'components/SideMenu.vue';
import DialogForm from 'components/DialogForm.vue';

import FormBasicInfo from './components/FormBasicInfo.vue';
import { columnsCustomer, columnsEmployee } from './constant';
import { useCustomerForm } from './form';
import { storeToRefs } from 'pinia';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';

const { t, locale } = useI18n();
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const customerStore = useCustomerStore();
const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore();
const customerFormStore = useCustomerForm();

const { state: customerFormState, currentFormData: customerFormData } =
  storeToRefs(customerFormStore);

async function init() {
  utilsStore.currentTitle.title = 'customerManagement';
  utilsStore.currentTitle.path = [
    {
      text: 'customerManagementCaption',
      handler: () => router.push('/customer-management'),
    },
  ];

  gridView.value = $q.screen.lt.md ? true : false;

  if (route.name === 'CustomerManagement') await fetchListCustomer(true);

  if (
    route.name === 'CustomerBranchManagement' &&
    typeof route.params.customerId === 'string'
  ) {
    const _data = await customerStore.fetchById(route.params.customerId);

    if (_data) {
      currentCustomer.value = _data;
      utilsStore.currentTitle.path.push({
        text: currentCustomer.value.customerName,
      });
    } else {
      router.push('/customer-management');
    }
  }

  flowStore.rotate();
}
onMounted(init);

// NOTE: Page Data
const currentCustomer = ref<Customer>();
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
const listEmployee = ref<Employee[]>([]);
const hideStats = ref(false);
const statsCustomerType = ref<CustomerStats>({
  CORP: 0,
  PERS: 0,
});

// NOTE: Page State
const currentTab = ref<'employer' | 'employee'>('employer');
const inputSearch = ref('');
const currentStatus = ref<Status | 'All'>('All');
const customerTypeSelected = ref<{
  label: string;
  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
}>({
  label: t('all'),
  value: 'all',
});
const employeeStats = ref(0);
const gridView = ref(false);
const splitPercent = ref(15); // Customer only
const currentPageCustomer = ref<number>(1);
const maxPageCustomer = ref<number>(1);
const currentPageEmployee = ref<number>(1);
const maxPageEmployee = ref<number>(1);
const pageSize = ref<number>(10);
const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();

watch(() => route.name, init);
watch(
  [currentTab, currentStatus, inputSearch, customerTypeSelected],
  async ([tabName]) => {
    if (tabName === 'employer') {
      currentPageCustomer.value = 1;
      await fetchListCustomer(true);
    }
    if (tabName === 'employee') {
      currentPageEmployee.value = 1;
      await fetchListEmployee(true);
    }
    flowStore.rotate();
  },
);
watch(locale, () => {
  customerTypeSelected.value = {
    label: `${customerTypeSelected.value.label}`,
    value: customerTypeSelected.value?.value,
  };
});
watch(
  () => $q.screen.lt.md,
  () => $q.screen.lt.md && (gridView.value = true),
);

const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([
  { label: 'corporation', value: 'customerName' },
  { label: 'type', value: 'type' },
  { label: 'name', value: 'personName' },
  {
    label: 'telephone',
    value: 'telephoneNo',
  },
  { label: 'formDialogInputEmail', value: 'branchEmail' },
]);

const fieldDisplayEmployee = ref<
  {
    label: string;
    value: string;
  }[]
>([
  { label: 'nameEmployee', value: 'firstName' },
  { label: 'formDialogInputNationality', value: 'formDialogInputNationality' },
  { label: 'formDialogInputPassportNo', value: 'formDialogInputPassportNo' },
  { label: 'formDialogInputAge', value: 'formDialogInputAge' },
  { label: 'passportExpire', value: 'passportExpiryDate' },
  {
    label: 'formDialogEmployeeNRCNo',
    value: 'formDialogEmployeeNRCNo',
  },
  { label: 'branchLabel', value: 'branchLabel' },
  { label: 'type', value: 'type' },
]);

const fieldSelected = ref<
  (
    | 'customerName'
    | 'type'
    | 'personName'
    | 'telephoneNo'
    | 'branchEmail'
    | 'firstName'
    | 'formDialogInputNationality'
    | 'formDialogInputPassportNo'
    | 'passportExpiryDate'
    | 'formDialogEmployeeNRCNo'
    | 'formDialogInputAge'
    | 'branchLabel'
    | 'action'
  )[]
>([
  'customerName',
  'personName',
  'telephoneNo',
  'branchEmail',
  'firstName',
  'formDialogInputNationality',
  'formDialogInputPassportNo',
  'passportExpiryDate',
  'type',
  'formDialogEmployeeNRCNo',
  'formDialogInputAge',
  'branchLabel',
  'action',
]);

const registerAbleBranchOption = ref<{ id: string; name: string }[]>();

const branch = ref<CustomerBranch[]>();

const customerStats = [
  { id: 1, count: 2, name: 'CORP' },
  { id: 2, count: 3, name: 'PERS' },
];

const fieldCustomer = [
  'all',
  'customerLegalEntity',
  'customerNaturalPerson',
] as const;

const employeeHistoryDialog = ref(false);
const employeeHistory = ref<EmployeeHistory[]>();

function deleteCustomerById(id: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await customerStore.deleteById(id);

      await fetchListCustomer(true);
      flowStore.rotate();
    },
    cancel: () => {},
  });
}

async function fetchListOfOptionBranch() {
  if (registerAbleBranchOption.value) return;

  const uid = getUserId();
  const role = getRole();

  if (!uid) return; // should not possible as the system require login to be able to access resource.

  if (role?.includes('system')) {
    const result = await userBranchStore.fetchListOptionBranch();
    if (result && result.total > 0)
      registerAbleBranchOption.value = result.result;
  } else {
    const result = await userBranchStore.fetchListMyBranch(uid);
    if (result && result.total > 0)
      registerAbleBranchOption.value = result.result;
  }

  // TODO: Assign (first) branch of the user as register branch of the data
}

async function fetchListCustomer(fetchStats = false) {
  const resultList = await customerStore.fetchList({
    includeBranch: true,
    page: currentPageCustomer.value,
    pageSize: pageSize.value,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
    query: inputSearch.value,
    customerType: (
      {
        all: undefined,
        customerLegalEntity: 'CORP',
        customerNaturalPerson: 'PERS',
      } as const
    )[customerTypeSelected.value.value],
  });

  if (resultList) {
    currentPageCustomer.value = resultList.page;
    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
    listCustomer.value = resultList.result;
  }

  if (fetchStats) {
    statsCustomerType.value = await customerStore
      .getStatsCustomer()
      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
  }
}

async function fetchListEmployee(fetchStats = false) {
  const resultListEmployee = await employeeStore.fetchList({
    page: currentPageEmployee.value,
    pageSize: pageSize.value,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
    query: inputSearch.value,
  });
  if (resultListEmployee) {
    maxPageEmployee.value = Math.ceil(
      resultListEmployee.total / pageSize.value,
    );
    listEmployee.value = resultListEmployee.result;
  }

  if (fetchStats) employeeStats.value = await employeeStore.getStatsEmployee();
}

async function triggerChangeStatus(id: string, status: string) {
  return await new Promise((resolve, reject) => {
    dialog({
      color: status !== 'INACTIVE' ? 'warning' : 'info',
      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
      title: t('confirmChangeStatusTitle'),
      actionText:
        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
      message:
        status !== 'INACTIVE'
          ? t('confirmChangeStatusOffMessage')
          : t('confirmChangeStatusOnMessage'),
      action: async () => {
        if (currentTab.value === 'employee') {
          await toggleStatusEmployee(id, status === 'ACTIVE' ? true : false)
            .then(resolve)
            .catch(reject);
        } else {
          await toggleStatusCustomer(id, status === 'ACTIVE' ? true : false)
            .then(resolve)
            .catch(reject);
        }
      },
      cancel: () => {},
    });
  });
}

async function toggleStatusEmployee(id: string, status: boolean) {
  await employeeStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });

  await fetchListEmployee();
  flowStore.rotate();
}

async function toggleStatusCustomer(id: string, status: boolean) {
  await customerStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
  await fetchListCustomer();
  flowStore.rotate();
}

async function deleteEmployeeById(id: string) {
  if (!id) return;
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await employeeStore.deleteById(id);
      const resultList = await employeeStore.fetchList();
      if (resultList) listEmployee.value = resultList.result;
      flowStore.rotate();
    },
    cancel: () => {},
  });
}

async function openHistory(id: string) {
  const res = await employeeStore.getEditHistory(id);
  employeeHistory.value = res.reverse();
  employeeHistoryDialog.value = true;
}

async function editCustomerForm(id: string) {
  await customerFormStore.assignFormData(id);
  customerFormState.value.dialogType = 'edit';
  customerFormState.value.dialogModal = true;
  customerFormState.value.editCustomerId = id;
}

function createCustomerForm(customerType: 'CORP' | 'PERS') {
  customerFormState.value.dialogModal = true;
  customerFormState.value.dialogType = 'create';
  customerFormData.value.customerType = customerType;
}

// TODO: When in employee form, if select address same as customer then auto fill
</script>

<template>
  <ButtonAddComponent style="z-index: 999">
    <div v-if="$route.name === 'CustomerManagement'">
      <q-fab-action
        v-if="currentTab === 'employer'"
        id="add-customer-legal-entity"
        style="color: white; background-color: hsla(var(--violet-11-hsl))"
        @click="createCustomerForm('CORP')"
        padding="xs"
        icon="mdi-office-building"
        :label="$t('add') + ' ' + $t('customerLegalEntity')"
        external-label
        label-position="left"
      />
      <q-fab-action
        v-if="currentTab === 'employer'"
        id="add-customer-natural-person"
        :label="$t('add') + ' ' + $t('customerNaturalPerson')"
        external-label
        label-position="left"
        @click="createCustomerForm('PERS')"
        style="color: white; background-color: hsla(var(--teal-10-hsl))"
        padding="xs"
        icon="mdi-account-plus"
      />
      <q-fab-action
        v-if="currentTab === 'employee'"
        :label="$t('add') + ' ' + $t('EMPLOYEE')"
        external-label
        id="add-employee"
        label-position="left"
        @click=""
        color="primary"
        padding="xs"
        icon="mdi-account-plus"
      />
    </div>
    <div v-else>
      <q-fab-action
        id="add-branch"
        :style="{
          color: 'white',
          'background-color':
            currentCustomer?.customerType === 'CORP'
              ? 'hsla(var(--violet-11-hsl))'
              : 'hsla(var(--pink-6-hsl))',
        }"
        @click=""
        padding="xs"
        icon="mdi-office-building"
        :label="$t('formDialogTitleCreateSubBranch')"
        external-label
        label-position="left"
      />
    </div>
  </ButtonAddComponent>

  <div class="column full-height no-wrap">
    <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
      <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
        {{ $t('dataSum') }}
        <q-badge
          v-if="listCustomer"
          rounded
          class="q-ml-sm"
          style="
            background-color: hsla(var(--info-bg) / 0.15);
            color: hsl(var(--info-bg));
          "
        >
          {{
            currentTab === 'employer'
              ? listCustomer?.length
              : listEmployee.length
          }}
        </q-badge>
        <q-btn
          class="q-ml-sm"
          icon="mdi-pin"
          color="primary"
          size="sm"
          flat
          dense
          rounded
          @click="hideStats = !hideStats"
          :style="hideStats ? 'rotate: 90deg' : ''"
          style="transition: 0.1s ease-in-out"
        />
      </div>

      <div class="row full-width">
        <!-- stat -->
        <transition name="slide">
          <div v-if="!hideStats" class="col-12 q-mb-md">
            <div class="scroll">
              <StatCardComponent
                v-if="customerStats"
                labelI18n
                :branch="
                  customerStats &&
                  (currentTab === 'employer'
                    ? customerStats.map((v) => ({
                        count:
                          v.name === 'CORP'
                            ? statsCustomerType?.CORP ?? 0
                            : statsCustomerType?.PERS ?? 0,
                        label:
                          v.name === 'CORP'
                            ? 'customerLegalEntity'
                            : 'customerNaturalPerson',
                        icon:
                          v.name === 'CORP'
                            ? 'mdi-office-building'
                            : 'mdi-account',
                        color: v.name === 'CORP' ? 'purple' : 'green',
                      }))
                    : [
                        {
                          label: 'EMPLOYEE',
                          count: employeeStats,
                          icon: 'mdi-account',
                          color: 'pink',
                        },
                      ])
                "
                :dark="$q.dark.isActive"
              />
            </div>
          </div>
        </transition>
      </div>

      <!-- main -->
      <div
        class="surface-2 bordered rounded col column full-width"
        style="overflow: hidden"
      >
        <!-- tabs -->
        <div class="column">
          <div
            class="row q-px-md q-py-sm justify-between full-width surface-3 bordered-b"
          >
            <q-input
              lazy-rules="ondemand"
              for="input-search"
              outlined
              dense
              :label="$t('search')"
              class="col-12 col-md-3"
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              v-model="inputSearch"
              debounce="200"
            >
              <template #prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>

            <div
              class="row col-md-5 col-12"
              :class="{ 'q-pt-xs': $q.screen.lt.md }"
              style="white-space: nowrap"
            >
              <q-select
                lazy-rules="ondemand"
                id="select-status"
                for="select-status"
                v-model="currentStatus"
                outlined
                dense
                option-value="value"
                option-label="label"
                class="col"
                :class="{ 'offset-md-5': gridView }"
                map-options
                emit-value
                :hide-dropdown-icon="$q.screen.lt.sm"
                :options="[
                  { label: $t('all'), value: 'All' },
                  { label: $t('statusACTIVE'), value: 'ACTIVE' },
                  { label: $t('statusINACTIVE'), value: 'INACTIVE' },
                ]"
              ></q-select>
              <q-select
                lazy-rules="ondemand"
                id="select-field"
                v-if="gridView === false"
                for="select-field"
                class="q-ml-sm col"
                :options="
                  currentTab === 'employer'
                    ? fieldDisplayEmployer
                    : fieldDisplayEmployee
                "
                :display-value="$t('displayField')"
                :hide-dropdown-icon="$q.screen.lt.sm"
                v-model="fieldSelected"
                :option-label="(l) => $t(l.label)"
                option-value="value"
                map-options
                emit-value
                outlined
                multiple
                dense
              />

              <q-btn-toggle
                id="btn-mode"
                v-model="gridView"
                dense
                class="no-shadow bordered rounded surface-1 q-ml-sm"
                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                size="xs"
                :options="[
                  { value: true, slot: 'folder' },
                  { value: false, slot: 'list' },
                ]"
              >
                <template v-slot:folder>
                  <q-icon
                    id="icon-mode-grid"
                    name="mdi-view-grid-outline"
                    size="16px"
                    class="q-px-sm q-py-xs rounded"
                    :style="{
                      color: $q.dark.isActive
                        ? gridView
                          ? '#C9D3DB '
                          : '#787B7C'
                        : gridView
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
                <template v-slot:list>
                  <q-icon
                    id="icon-mode-list"
                    name="mdi-format-list-bulleted"
                    class="q-px-sm q-py-xs rounded"
                    size="16px"
                    :style="{
                      color: $q.dark.isActive
                        ? gridView === false
                          ? '#C9D3DB'
                          : '#787B7C'
                        : gridView === false
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
              </q-btn-toggle>
            </div>
          </div>

          <div class="surface-2 bordered-b q-px-md">
            <q-tabs
              dense
              v-model="currentTab"
              align="left"
              class="full-height"
              active-color="info"
            >
              <q-tab
                name="employer"
                id="tab-employer"
                @click="
                  () => {
                    currentPageCustomer = 1;
                    inputSearch = '';
                    currentStatus = 'All';
                    flowStore.rotate();
                  }
                "
              >
                <div
                  class="row"
                  :class="
                    currentTab === 'employer' ? 'text-bold' : 'app-text-muted'
                  "
                >
                  {{ $t('EMPLOYER') }}
                </div>
              </q-tab>
              <q-tab
                name="employee"
                id="tab-employee"
                @click="
                  () => {
                    currentPageEmployee = 1;
                    inputSearch = '';
                    currentStatus = 'All';
                    flowStore.rotate();
                  }
                "
              >
                <div
                  class="row"
                  :class="
                    currentTab === 'employee' ? 'text-bold' : 'app-text-muted'
                  "
                >
                  {{ $t('EMPLOYEE') }}
                </div>
              </q-tab>
            </q-tabs>
          </div>
        </div>

        <!-- body -->

        <q-splitter
          v-model="splitPercent"
          :limits="[0, 100]"
          class="col full-width"
          before-class="overflow-hidden"
          after-class="overflow-hidden"
        >
          <template v-slot:before>
            <div
              class="column q-pa-md surface-1 full-height full-width"
              style="gap: var(--size-1)"
            >
              <template v-if="currentTab === 'employer'">
                <q-item
                  v-close-popup
                  clickable
                  v-for="v in fieldCustomer"
                  :key="v"
                  dense
                  class="no-padding items-center rounded full-width"
                  active-class="employer-active"
                  :active="customerTypeSelected.value === v"
                  @click="customerTypeSelected = { label: v, value: v }"
                >
                  <span class="q-px-md ellipsis">
                    {{ $t(v) }}
                  </span>
                </q-item>
              </template>
              <template v-else>
                <q-item
                  active
                  dense
                  active-class="employer-active"
                  class="no-padding items-center rounded full-width"
                  v-close-popup
                  clickable
                >
                  <span class="q-px-md ellipsis">
                    {{ $t('totalEmployee') }}
                  </span>
                </q-item>
              </template>
            </div>
          </template>

          <template v-slot:after>
            <div class="column full-height no-wrap">
              <!-- employer -->
              <template
                v-if="
                  listCustomer &&
                  statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
                  currentTab === 'employer'
                "
              >
                <div
                  v-if="listCustomer.length === 0"
                  class="row col full-width items-center justify-center"
                  style="min-height: 250px"
                >
                  <NoData :not-found="!!inputSearch" />
                </div>

                <div
                  v-if="listCustomer.length !== 0"
                  class="col q-pa-md scroll full-width"
                >
                  <q-table
                    flat
                    bordered
                    :grid="gridView"
                    :rows="listCustomer"
                    :columns="columnsCustomer"
                    class="full-width"
                    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
                        style="background-color: hsla(var(--info-bg) / 0.07)"
                        :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',
                        }"
                        :id="`row-table-${props.row.customerName}`"
                        :props="props"
                        @click="
                          $router.push(
                            `/customer-management/${props.row.id}/branch`,
                          )
                        "
                      >
                        <q-td v-if="fieldSelected.includes('customerName')">
                          <div class="row items-center">
                            <div
                              class="q-mr-sm"
                              style="
                                display: flex;
                                margin-bottom: var(--size-2);
                              "
                            >
                              <div class="branch-card__icon">
                                <q-avatar size="md">
                                  <q-img
                                    :src="
                                      props.row.imageUrl ?? '/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.customerName || '-' }}
                              </div>
                              <div class="col app-text-muted">
                                {{ props.row.customerNameEN || '-' }}
                              </div>
                            </div>
                          </div>
                        </q-td>
                        <q-td v-if="fieldSelected.includes('type')">
                          <span
                            class="tags"
                            :class="{
                              [`tags__${props.row.customerType === 'CORP' ? 'purple' : 'green'}`]: true,
                            }"
                          >
                            {{
                              props.row.customerType === 'CORP'
                                ? $t('customerLegalEntity')
                                : $t('customerNaturalPerson')
                            }}
                          </span>
                        </q-td>
                        <q-td v-if="fieldSelected.includes('personName')">
                          {{ props.row.personName }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('telephoneNo')">
                          {{ props.row.branch[0]?.telephoneNo || '-' }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('branchEmail')">
                          {{ props.row.branch[0]?.email || '-' }}
                        </q-td>
                        <q-td>
                          <q-btn
                            icon="mdi-eye-outline"
                            :id="`btn-eye-${props.row.customerName}`"
                            size="sm"
                            dense
                            round
                            flat
                            @click.stop="editCustomerForm(props.row.id)"
                          />

                          <q-btn
                            icon="mdi-dots-vertical"
                            :id="`btn-dots-${props.row.code}`"
                            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="
                                    () => {
                                      const { branch, ...payload } = props.row;
                                      currentCustomer = payload;
                                      // assignFormData(props.row.id);
                                      // openDialogInputForm('INFO', props.row.id);
                                    }
                                  "
                                  v-close-popup
                                  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`"
                                  v-close-popup
                                  clickable
                                  dense
                                  class="row q-py-sm"
                                  style="white-space: nowrap"
                                  @click="() => {}"
                                >
                                  <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
                                  v-close-popup
                                  :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="deleteCustomerById(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 () => {
                                            triggerChangeStatus(
                                              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-12 col-md-3 col-sm-6">
                        <PersonCard
                          :id="`card-${props.row.customerName}`"
                          :field-selected="fieldSelected"
                          separateEnter
                          history
                          :prefix-id="
                            props.row.customerNameEN ?? props.rowIndex
                          "
                          :data="{
                            code: props.row.code,
                            name:
                              $i18n.locale === 'en-US'
                                ? `${props.row.customerName} `.trim()
                                : `${props.row.customerNameEN} `.trim(),
                            img: props.row.imageUrl,
                            male: undefined,
                            female: undefined,
                            detail: [
                              {
                                icon: 'mdi-cellphone',
                                value: props.row.branch[0]?.telephoneNo || '-',
                              },
                              {
                                icon: 'mdi-account',
                                value: props.row.personName || '-',
                              },
                            ],
                          }"
                          :tag="[
                            {
                              color:
                                {
                                  CORP: 'purple',
                                  PERS: 'green',
                                }[props.row.customerType as string] || 'CORP',
                              value: $t(
                                props.row.customerType === 'CORP'
                                  ? 'customerLegalEntity'
                                  : 'customerNaturalPerson',
                              ),
                            },
                          ]"
                          :disabled="props.row.status === 'INACTIVE'"
                          @history="openHistory(props.row.id)"
                          @update-card="() => {}"
                          @enter-card="
                            $router.push(
                              `/customer-management/${props.row.id}/branch`,
                            )
                          "
                          @view-card=""
                          @delete-card="deleteCustomerById(props.row.id)"
                          @toggle-status="
                            triggerChangeStatus(props.row.id, props.row.status)
                          "
                        />
                      </div>
                    </template>
                  </q-table>
                </div>

                <div
                  v-if="listCustomer.length !== 0"
                  class="row justify-between items-center q-px-md q-py-sm"
                >
                  <div class="row col-4 items-center">
                    <div
                      class="app-text-muted"
                      style="width: 80px"
                      v-if="$q.screen.gt.sm"
                    >
                      {{ $t('showing') }}
                    </div>
                    <div>
                      <q-btn-dropdown
                        dense
                        unelevated
                        class="bordered q-pl-md rounded"
                        :label="pageSize"
                        style="background-color: var(--surface-1)"
                      >
                        <q-list>
                          <q-item
                            v-for="v in [10, 30, 50, 100, 500, 1000]"
                            :key="v"
                            clickable
                            v-close-popup
                            @click="
                              async () => {
                                pageSize = v;
                                await fetchListCustomer();
                              }
                            "
                          >
                            <q-item-section>
                              <q-item-label>{{ v }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </div>
                  </div>

                  <div class="col-4 flex justify-center app-text-muted">
                    {{
                      $t('recordsPage', {
                        resultcurrentPage: listCustomer.length,
                        total: statsCustomerType.PERS + statsCustomerType.CORP,
                      })
                    }}
                  </div>

                  <div class="col-4 flex justify-end">
                    <PaginationComponent
                      v-model:current-page="currentPageCustomer"
                      v-model:max-page="maxPageCustomer"
                      :fetch-data="
                        async () => {
                          await fetchListCustomer();
                          flowStore.rotate();
                        }
                      "
                    />
                  </div>
                </div>
              </template>

              <!-- employee -->
              <template
                v-if="
                  listEmployee && employeeStats > 0 && currentTab === 'employee'
                "
              >
                <div
                  v-if="listEmployee.length === 0"
                  class="row col full-width items-center justify-center"
                  style="min-height: 250px"
                >
                  <NoData :not-found="!!inputSearch" />
                </div>

                <div
                  v-if="listEmployee.length !== 0"
                  class="surface-2 q-pa-md scroll col full-width"
                >
                  <q-table
                    flat
                    bordered
                    :grid="gridView"
                    :rows="listEmployee"
                    :columns="columnsEmployee"
                    class="full-width"
                    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
                        style="background-color: hsla(var(--info-bg) / 0.07)"
                        :props="props"
                      >
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <span v-if="col.label !== ''">
                            {{ $t(col.label) }}
                          </span>
                        </q-th>
                      </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"
                        :id="`row-table-${props.row.firstNameEN}`"
                        @click="
                          () => {
                            // openDialogInputForm('INFO', props.row.id);
                          }
                        "
                      >
                        <q-td v-if="fieldSelected.includes('firstName')">
                          <div
                            class="row items-center"
                            style="flex-wrap: nowrap"
                          >
                            <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>
                              </div>
                            </div>
                            <div class="col">
                              <div class="col">
                                {{
                                  `${props.row.firstName} ${props.row.lastName}` ||
                                  '-'
                                }}

                                <q-icon
                                  class="q-pl-xs"
                                  :class="{
                                    'symbol-gender': props.row.gender,
                                    'symbol-gender__male':
                                      props.row.gender === 'male',
                                    'symbol-gender__female':
                                      props.row.gender === 'female',
                                  }"
                                  :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
                                  width="24px"
                                />
                              </div>
                              <div class="col app-text-muted">
                                {{
                                  `${props.row.firstNameEN} ${props.row.lastNameEN}` ||
                                  '-'
                                }}
                              </div>
                            </div>
                          </div>
                        </q-td>

                        <q-td
                          v-if="
                            fieldSelected.includes('formDialogInputNationality')
                          "
                        >
                          {{ props.row.nationality || '-' }}
                        </q-td>

                        <q-td
                          v-if="
                            fieldSelected.includes('formDialogInputPassportNo')
                          "
                        >
                          {{ props.row.passportNumber || '-' }}
                        </q-td>

                        <q-td
                          v-if="fieldSelected.includes('formDialogInputAge')"
                        >
                          {{ calculateAge(props.row.dateOfBirth) }}
                        </q-td>

                        <q-td
                          v-if="fieldSelected.includes('passportExpiryDate')"
                        >
                          {{ dateFormat(props.row.passportExpiryDate) }}
                        </q-td>

                        <q-td
                          v-if="
                            fieldSelected.includes('formDialogEmployeeNRCNo')
                          "
                        >
                          {{ props.row.nrcNo || '-' }}
                        </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 v-if="fieldSelected.includes('type')">
                          <span class="tags tags__pink">
                            {{ $t('EMPLOYEE') }}
                          </span>
                        </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"
                            :id="`btn-dots-${props.row.code}`"
                            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="deleteEmployeeById(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 () => {
                                            triggerChangeStatus(
                                              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-12 col-md-3 col-sm-6">
                        <PersonCard
                          :id="`card-${props.row.firstNameEN}`"
                          :field-selected="fieldSelected"
                          history
                          :prefix-id="props.row.firstNameEN ?? props.rowIndex"
                          :data="{
                            code: props.row.code,
                            name:
                              $i18n.locale === 'en-US'
                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                                : `${props.row.firstName} ${props.row.lastName} `.trim(),
                            img: props.row.profileImageUrl,
                            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
                                  ? calculateAge(props.row.dateOfBirth) ?? ''
                                  : '',
                              },
                            ],
                          }"
                          :tag="[
                            {
                              color: 'pink',
                              value: $t('EMPLOYEE'),
                            },
                          ]"
                          :disabled="props.row.status === 'INACTIVE'"
                          @history="openHistory(props.row.id)"
                          @update-card=""
                          @enter-card=""
                          @delete-card="deleteEmployeeById(props.row.id)"
                          @toggle-status="
                            triggerChangeStatus(props.row.id, props.row.status)
                          "
                        />
                      </div>
                    </template>
                  </q-table>
                </div>
                <div
                  v-if="listEmployee.length !== 0"
                  class="row justify-between items-center q-px-md q-py-sm"
                >
                  <div class="row col-4 items-center">
                    <div
                      class="app-text-muted"
                      style="width: 80px"
                      v-if="$q.screen.gt.sm"
                    >
                      {{ $t('showing') }}
                    </div>
                    <div>
                      <q-btn-dropdown
                        dense
                        unelevated
                        :label="pageSize"
                        class="bordered q-pl-md"
                        style="background-color: var(--surface-1)"
                      >
                        <q-list>
                          <q-item
                            v-for="v in [10, 30, 50, 100, 500, 1000]"
                            :key="v"
                            clickable
                            v-close-popup
                            @click="
                              async () => {
                                pageSize = v;
                                await fetchListEmployee();
                              }
                            "
                          >
                            <q-item-section>
                              <q-item-label>{{ v }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </div>
                  </div>

                  <div class="col-4 flex justify-center app-text-muted">
                    {{
                      $t('recordsPage', {
                        resultcurrentPage: listEmployee.length,
                        total: employeeStats,
                      })
                    }}
                  </div>

                  <div class="col-4 flex justify-end">
                    <PaginationComponent
                      v-model:current-page="currentPageEmployee"
                      v-model:max-page="maxPageEmployee"
                      :fetch-data="
                        async () => {
                          await fetchListEmployee();
                          flowStore.rotate();
                        }
                      "
                    />
                  </div>
                </div>
              </template>

              <template
                v-if="
                  (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
                    currentTab === 'employer') ||
                  (employeeStats === 0 && currentTab === 'employee')
                "
              >
                <TooltipComponent
                  class="self-end q-ma-md"
                  :title="
                    currentTab === 'employer'
                      ? 'customerEmployerTooltipTitle'
                      : 'customerEmployeeTooltipTitle'
                  "
                  :caption="
                    currentTab === 'employer'
                      ? 'customerEmployerTooltipCaption'
                      : 'customerEmployeeTooltipCaption'
                  "
                  imgSrc="personnel-table-"
                />

                <div
                  class="row items-center justify-center"
                  style="flex-grow: 1"
                >
                  <AddButton
                    :label="
                      currentTab === 'employer'
                        ? 'customerEmployerAdd'
                        : 'customerEmployeeAdd'
                    "
                    @trigger="() => {}"
                  />
                </div>
              </template>
            </div>
          </template>
        </q-splitter>
      </div>
    </div>

    <div class="col column" v-if="$route.name === 'CustomerBranchManagement'">
      <CustomerInfoComponent
        v-if="currentCustomer"
        :customer-id="currentCustomer.id"
        :customer-type="currentCustomer.customerType"
        v-model:mode-view="gridView"
        @back="$router.push('/customer-management')"
        @view-detail="
          async (value) => {
            await fetchListOfOptionBranch();
            // TODO: Assign data to form
          }
        "
        v-model:branch="branch"
        v-model:current-customer-name="currentCustomer.customerName"
        v-model:current-customer-url-image="currentCustomer.imageUrl"
      />
    </div>
  </div>

  <DialogForm
    v-model:modal="customerFormState.dialogModal"
    :title="$t('form.title.create', { name: 'Employer' })"
    :show="
      async () =>
        await fetchListOfOptionBranch().then(() => {
          customerFormStore.resetForm(
            customerFormState.dialogType === 'create',
          );
        })
    "
    :submit="
      async () => {
        await customerFormStore.submitForm();
        await fetchListCustomer();
      }
    "
    :close="() => (customerFormState.dialogModal = false)"
    no-footer
  >
    <div class="q-mx-lg q-mt-lg">
      <ProfileBanner
        active
        v-model:cover-url="customerFormState.customerImageUrl"
        :hide-fade="
          customerFormState.customerImageUrl === '' ||
          customerFormState.customerImageUrl === null
        "
        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
        :img="
          customerFormState.customerImageUrl ||
          `/images/customer-${customerFormData.customerType}-avartar.png`
        "
        color="hsla(var(--pink-6-hsl)/1)"
        bg-color="hsla(var(--pink-6-hsl)/0.15)"
        @view="customerFormState.imageDialog = true"
        @edit="dialogCustomerImageUpload?.browse()"
      />
    </div>
    <div
      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
      id="customer-form"
    >
      <div
        class="col"
        style="height: 100%; max-height: 100; overflow-y: auto"
        v-if="$q.screen.gt.sm"
      >
        <div class="q-py-md q-pl-md">
          <SideMenu
            :menu="[
              {
                name: $t('customer.form.group.basicInfo'),
                anchor: 'form-basic-info-customer',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#customer-form-content"
          />
        </div>
      </div>
      <div
        class="col-12 col-md-10 q-pa-md"
        id="customer-form-content"
        style="height: 100%; max-height: 100%; overflow-y: auto"
      >
        <FormBasicInfo
          :readonly="
            customerFormState.dialogType === 'edit' &&
            customerFormState.editReadonly === true
          "
          id="form-basic-info-customer"
          @save="customerFormState.saveMode = 'customer'"
          :customer-type="customerFormData.customerType"
          v-model:tax-no="customerFormData.taxNo"
          v-model:customer-name="customerFormData.customerName"
          v-model:customer-name-en="customerFormData.customerNameEN"
          v-model:person-name="customerFormData.personName"
          v-model:registered-branch-id="customerFormData.registeredBranchId"
          v-model:branch-options="registerAbleBranchOption"
        />
      </div>
    </div>

    <!-- <q-btn -->
    <!--   @click="customerFormState.saveMode = 'customer'" -->
    <!--   type="submit" -->
    <!--   label="Save" -->
    <!-- /> -->
    <!-- <q-btn -->
    <!--   @click="customerFormState.saveMode = 'branch'" -->
    <!--   type="submit" -->
    <!--   label="Save" -->
    <!-- /> -->
  </DialogForm>

  <ImageUploadDialog
    ref="dialogCustomerImageUpload"
    v-model:dialog-state="customerFormState.imageDialog"
    v-model:file="customerFormData.image"
    v-model:image-url="customerFormState.customerImageUrl"
    :hidden-footer="
      !customerFormData.image ||
      !customerFormState.customerImageUrl ||
      customerFormState.dialogType === 'edit'
    "
    :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
    clear-button
    @save="() => {}"
  ></ImageUploadDialog>
</template>

<style scoped>
.customer-row {
  display: grid;
  gap: var(--size-6);
  transition: 0.3s ease-in-out;
}

.hover-card:hover {
  cursor: pointer;
  border-radius: 10px;
  box-shadow: var(--shadow-3);
}

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.employer-active {
  background-color: hsla(var(--info-bg) / 0.1);
  color: hsl(var(--info-bg));
}

.tags {
  display: inline-block;
  color: hsla(var(--_color) / 1);
  background: hsla(var(--_color) / 0.15);
  border-radius: var(--radius-2);
  padding-inline: var(--size-2);
}

.tags__pink {
  --_color: var(--pink-6-hsl);
}

.tags__purple {
  --_color: var(--violet-11-hsl);
}

.tags__green {
  --_color: var(--teal-10-hsl);
}

.dark .tags__purple {
  --_color: var(--violet-10-hsl);
}

.dark .tags__green {
  --_color: var(--teal-8-hsl);
}

.status-active {
  --_branch-status-color: var(--green-6-hsl);
}

.status-inactive {
  --_branch-status-color: var(--red-4-hsl);
  --_branch-badge-bg: var(--red-4-hsl);
  filter: grayscale(0.5);
  opacity: 0.5;
}

.branch-card__icon {
  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-1);
  position: relative;
  transform: rotate(45deg);

  &::after {
    content: ' ';
    display: block;
    block-size: 0.5rem;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    right: -0.1rem;
    top: calc(50% - 0.25rem);
    bottom: calc(50% - 0.25rem);
    background-color: hsla(var(--_branch-status-color) / 1);
  }

  & :deep(.q-avatar) {
    transform: rotate(-45deg);
    color: hsla(var(--_branch-card-bg) / 1);
  }
}

& .symbol-gender {
  color: hsla(var(--_fg));

  &.symbol-gender__male {
    --_fg: var(--gender-male);
  }

  &.symbol-gender__female {
    --_fg: var(--gender-female);
  }
}
</style>