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

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import useUtilsStore, { dialog } from 'src/stores/utils';
import { calculateAge } from 'src/utils/datetime';
import type { QTableProps } from 'quasar';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow';
import useUserStore from 'stores/user';
import useBranchStore from 'src/stores/branch';

import {
  User,
  UserAttachmentCreate,
  UserCreate,
  UserTypeStats,
} from 'src/stores/user/types';
import { BranchUserStats } from 'src/stores/branch/types';
import useAddressStore from 'src/stores/address';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import PersonCard from 'components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'components/FormDialog.vue';
import FormInformation from 'components/02_personnel-management/FormInformation.vue';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import FormByType from 'components/02_personnel-management/FormByType.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import NoData from 'components/NoData.vue';
import ProfileUpload from 'components/ProfileUpload.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';

const { locale, t } = useI18n();

const utilsStore = useUtilsStore();
const flowStore = useFlowStore();
const userStore = useUserStore();
const branchStore = useBranchStore();
const adrressStore = useAddressStore();
const { data: userData } = storeToRefs(userStore);

const defaultFormData = {
  provinceId: null,
  districtId: null,
  subDistrictId: null,
  telephoneNo: '',
  email: '',
  zipCode: '',
  gender: '',
  addressEN: '',
  address: '',
  trainingPlace: null,
  importNationality: null,
  sourceNationality: null,
  licenseExpireDate: null,
  licenseIssueDate: null,
  licenseNo: null,
  discountCondition: null,
  retireDate: null,
  startDate: null,
  registrationNo: null,
  lastNameEN: '',
  lastName: '',
  firstNameEN: '',
  firstName: '',
  userRole: '',
  userType: '',
  profileImage: null,
  birthDate: null,
  responsibleArea: null,
  username: '',
  status: 'CREATED',
  checkpoint: null,
  checkpointEN: null,
};

const modeView = ref(false);

const fieldSelectedOption = ref<{ label: string; value: string }[]>([
  {
    label: 'fullname',
    value: 'name',
  },
  {
    label: 'type',
    value: 'type',
  },
  {
    label: 'telephone',
    value: 'telephoneNo',
  },
  {
    label: 'personnelCardAge',
    value: 'birthDate',
  },
  {
    label: 'formDialogInputEmail',
    value: 'email',
  },
  {
    label: 'userRole',
    value: 'userRole',
  },
]);

const fieldSelected = ref<
  ('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
const fieldDisplay = ref();
const hideStat = ref(false);
const userCode = ref<string>();
const currentUser = ref<User>();
const infoDrawerEdit = ref(false);
const infoPersonId = ref<string>('');
const infoPersonCard = ref();
const infoDrawer = ref(false);
const profileSubmit = ref(false);
const urlProfile = ref<string>();
const isEdit = ref(false);
const modal = ref(false);
const statusToggle = ref(true);
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
const inputSearch = ref('');
const userId = ref<string>();
const selectorLabel = ref<string>('ALL');
const hqId = ref<string>();
const brId = ref<string>();
const formDialogRef = ref();
const userStats = ref<BranchUserStats[]>();
const sortedUserStats = computed(() => {
  return userStats.value?.slice().sort((a, b) => b.count - a.count);
});
const typeStats = ref<UserTypeStats>();
const agencyFile = ref<File[]>([]);
const agencyFileList = ref<{ name: string; url: string }[]>([]);
const formData = ref<UserCreate>({
  branchId: '',
  provinceId: null,
  districtId: null,
  subDistrictId: null,
  telephoneNo: '',
  email: '',
  zipCode: '',
  gender: '',
  addressEN: '',
  address: '',
  trainingPlace: null,
  importNationality: null,
  sourceNationality: null,
  licenseExpireDate: null,
  licenseIssueDate: null,
  licenseNo: null,
  discountCondition: null,
  retireDate: null,
  startDate: null,
  registrationNo: null,
  lastNameEN: '',
  lastName: '',
  firstNameEN: '',
  firstName: '',
  userRole: '',
  userType: '',
  profileImage: null,
  birthDate: null,
  responsibleArea: null,
  checkpoint: null,
  checkpointEN: null,
  username: '',
  status: 'CREATED',
});

const profileFile = ref<File | undefined>(undefined);
const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';

const reader = new FileReader();

const columns = [
  {
    name: 'name',
    align: 'left',
    label: 'fullname',
    field: 'firstName',
  },
  {
    name: 'type',
    align: 'left',
    label: 'type',
    field: 'type',
  },
  {
    name: 'telephoneNo',
    align: 'left',
    label: 'telephone',
    field: 'telephoneNo',
  },
  {
    name: 'birthDate',
    align: 'left',
    label: 'personnelCardAge',
    field: 'birthDate',
  },
  {
    name: 'email',
    align: 'left',
    label: 'formDialogInputEmail',
    field: 'email',
  },

  {
    name: 'userRole',
    align: 'left',
    label: 'userRole',
    field: 'userRole',
  },
] satisfies QTableProps['columns'];

reader.addEventListener('load', () => {
  if (typeof reader.result === 'string') {
    urlProfile.value = reader.result;
  }

  if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
});

watch(profileFile, () => {
  if (profileFile.value) reader.readAsDataURL(profileFile.value);
});

inputFile.addEventListener('change', (e) => {
  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
});

const selectorList = computed(() => [
  { label: 'USER', count: typeStats.value?.USER || 0 },
  { label: 'MESSENGER', count: typeStats.value?.MESSENGER || 0 },
  { label: 'DELEGATE', count: typeStats.value?.DELEGATE || 0 },
  { label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
]);

async function openDialog(
  action?: 'FORM' | 'INFO',
  id?: string,
  isPersonEdit: boolean = false,
) {
  if (userStore.userOption.hqOpts.length === 0) {
    await userStore.fetchHqOption();
  }

  if (userStore.userOption.roleOpts.length === 0) {
    await userStore.fetchRoleOption();
  }

  if (id && userData.value) {
    assignFormData(id);
    isEdit.value = true;

    if (formData.value.userType === 'AGENCY') {
      const result = await userStore.fetchAttachment(id);

      if (result) {
        agencyFileList.value = result;
      }
    }
  }
  if (userStore.userOption.hqOpts.length !== 0) {
    hqId.value = userStore.userOption.hqOpts[0].value;
  }
  if (userStore.userOption.hqOpts.length === 0) {
    console.log('no hq');

    dialog({
      color: 'warning',
      icon: 'mdi-alert',
      title: t('warning'),
      actionText: t('agree'),
      persistent: true,
      message: t('headquartersNotEstablished'),
      action: async () => {},
    });

    return;
  }

  if (action === 'FORM') {
    modal.value = true;
  } else if (action === 'INFO') {
    if (!userData.value) return;

    infoDrawerEdit.value = isPersonEdit ? true : false;
    infoDrawer.value = true;
    const user = userData.value.result.find((x) => x.id === id);
    infoPersonCard.value = user
      ? [
          {
            id: user.id,
            img: `${user.profileImageUrl}`,
            name:
              locale.value === 'en-US'
                ? `${user.firstNameEN} ${user.lastNameEN}`
                : `${user.firstName} ${user.lastName}`,
            male: user.gender === 'male',
            female: user.gender === 'female',
            badge: user.code,
            disabled: user.status === 'INACTIVE',
          },
        ]
      : [];
  }

  statusToggle.value = true;
  userStore.userOption.brOpts = [];
}

function undo() {
  if (!infoPersonId.value) return;
  infoDrawerEdit.value = false;
  assignFormData(infoPersonId.value);
}

function onClose() {
  hqId.value = '';
  brId.value = '';
  userId.value = '';
  userCode.value = '';
  urlProfile.value = undefined;
  profileFile.value = undefined;
  agencyFile.value = [];
  modal.value = false;
  isEdit.value = false;
  infoDrawer.value = false;
  profileSubmit.value = false;
  statusToggle.value = true;
  Object.assign(formData.value, defaultFormData);
  mapUserType(selectorLabel.value);
  flowStore.rotate();
}

async function onSubmit() {
  if (profileSubmit.value) {
    formData.value.profileImage = profileFile.value as File;
  } else {
    formData.value.profileImage = null;
  }

  if (isEdit.value && userId.value) {
    if (!userId.value) return;

    formData.value.branchId = brId.value
      ? brId.value
      : hqId.value
        ? hqId.value
        : '';
    const formDataEdit = {
      ...formData.value,
      status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
    } as const;

    await userStore.editById(userId.value, formDataEdit);

    if (userId.value && formDataEdit.userType === 'AGENCY') {
      if (!agencyFile.value) return;
      const payload: UserAttachmentCreate = {
        file: agencyFile.value,
      };

      if (payload?.file) {
        await userStore.addAttachment(userId.value, payload);
      }
    }

    await fetchUserList();
    typeStats.value = await userStore.typeStats();
    const res = await branchStore.userStats(formData.value.userType);
    if (res) {
      userStats.value = res;
    }
    onClose();
  } else {
    if (!hqId.value) return;

    statusToggle.value
      ? (formData.value.status = 'CREATED')
      : (formData.value.status = 'INACTIVE');

    formData.value.branchId = brId.value
      ? brId.value
      : hqId.value
        ? hqId.value
        : '';

    const result = await userStore.create(formData.value);

    if (result && formData.value.userType === 'AGENCY') {
      if (!agencyFile.value) return;

      const payload: UserAttachmentCreate = {
        file: agencyFile.value,
      };

      if (payload?.file) {
        await userStore.addAttachment(result.id, payload);
      }
    }

    selectorLabel.value = formData.value.userType;

    await fetchUserList();

    typeStats.value = await userStore.typeStats();
    const res = await branchStore.userStats(formData.value.userType);
    if (res) {
      userStats.value = res;
    }
    onClose();
  }
  flowStore.rotate();
}

async function onDelete(id: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-trash-can-outline',
    title: t('deleteConfirmTitle'),
    actionText: t('agree'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await userStore.deleteById(id);

      await fetchUserList();
      typeStats.value = await userStore.typeStats();
      flowStore.rotate();
    },
  });
}

function mapUserType(label: string) {
  const userTypeMap: { [key: string]: string } = {
    USER: 'USER',
    MESSENGER: 'MESSENGER',
    DELEGATE: 'DELEGATE',
    AGENCY: 'AGENCY',
  };
  formData.value.userType = userTypeMap[label];
}

async function toggleStatus(id: string) {
  const record = userData.value?.result.find((v) => v.id === id);

  if (!record) return;

  const res = await userStore.editById(record.id, {
    status: record.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
  });
  if (res) record.status = res.status;
}

async function assignFormData(idEdit: string) {
  if (!userData.value) return;
  const foundUser = userData.value.result.find((user) => user.id === idEdit);

  if (foundUser) {
    currentUser.value = foundUser;
    infoPersonId.value = currentUser.value.id;

    formData.value = {
      branchId: foundUser.branch[0]?.id,
      provinceId: foundUser.provinceId,
      districtId: foundUser.districtId,
      subDistrictId: foundUser.subDistrictId,
      telephoneNo: foundUser.telephoneNo,
      email: foundUser.email,
      zipCode: foundUser.zipCode,
      gender: foundUser.gender,
      addressEN: foundUser.addressEN,
      address: foundUser.address,
      trainingPlace: foundUser.trainingPlace,
      importNationality: foundUser.importNationality,
      sourceNationality: foundUser.sourceNationality,
      licenseNo: foundUser.licenseNo,
      discountCondition: foundUser.discountCondition,
      registrationNo: foundUser.registrationNo,
      lastNameEN: foundUser.lastNameEN,
      lastName: foundUser.lastName,
      firstNameEN: foundUser.firstNameEN,
      firstName: foundUser.firstName,
      userRole: foundUser.userRole,
      userType: foundUser.userType,
      username: foundUser.username,
      checkpoint: foundUser.checkpoint,
      checkpointEN: foundUser.checkpointEN,
      responsibleArea: foundUser.responsibleArea,
      status: foundUser.status,
      licenseExpireDate:
        (foundUser.licenseExpireDate &&
          new Date(foundUser.licenseExpireDate)) ||
        null,
      licenseIssueDate:
        (foundUser.licenseIssueDate && new Date(foundUser.licenseIssueDate)) ||
        null,
      retireDate:
        (foundUser.retireDate && new Date(foundUser.retireDate)) || null,
      startDate: (foundUser.startDate && new Date(foundUser.startDate)) || null,
      birthDate: (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
    };

    formData.value.status === 'ACTIVE' || 'CREATED'
      ? (statusToggle.value = true)
      : (statusToggle.value = false);
    userId.value = foundUser.id;

    if (foundUser.branch[0]) {
      if (foundUser.branch[0].isHeadOffice) {
        hqId.value = foundUser.branch[0].id as string;
      } else {
        hqId.value = foundUser.branch[0].headOfficeId as string;
        brId.value = foundUser.branch[0].id;
      }
    }

    userCode.value = foundUser.code;
    urlProfile.value = foundUser.profileImageUrl;

    isEdit.value = true;
    profileSubmit.value = true;
    hqId.value && (await userStore.fetchBrOption(hqId.value));
    if (infoPersonCard.value) {
      infoPersonCard.value[0].img = foundUser.profileImageUrl;
    }
    if (formData.value.districtId) {
      await adrressStore.fetchSubDistrictByProvinceId(
        formData.value.districtId,
      );
    }
  }
}

onMounted(async () => {
  utilsStore.currentTitle.title = 'personnelManagement';
  utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];

  await fetchUserList();

  userStore.userOption.roleOpts.length === 0
    ? await userStore.fetchRoleOption()
    : '';
  typeStats.value = await userStore.typeStats();

  // const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
  //   (v) => v[1] > 0,
  // );

  // firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);

  const res = await branchStore.userStats(formData.value.userType);
  if (res) {
    userStats.value = res;
  }
  flowStore.rotate();
});

watch(
  () => selectorLabel.value,
  async (label) => {
    mapUserType(label);
    await fetchUserList();
    const res = await branchStore.userStats(label);
    if (res) {
      userStats.value = res;
    }
  },
);

watch(
  () => formData.value.userType,
  async () => {
    if (!infoDrawerEdit.value) return;
    formData.value.registrationNo = null;
    formData.value.startDate = null;
    formData.value.retireDate = null;
    formData.value.responsibleArea = null;
    formData.value.discountCondition = null;
    formData.value.sourceNationality = null;
    formData.value.importNationality = null;
    formData.value.trainingPlace = null;
    formData.value.checkpoint = null;
    formData.value.checkpointEN = null;
    agencyFile.value = [];
  },
);

const currentPage = ref(1);
const pageSize = ref(30);
const currentMaxPage = computed(() =>
  userData.value ? Math.ceil(userData.value?.total / pageSize.value) : 1,
);

async function fetchUserList() {
  await userStore.fetchList({
    includeBranch: true,
    pageSize: pageSize.value,
    page: currentPage.value,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
  });
}

watch(inputSearch, async () => await fetchUserList());
</script>

<template>
  <ButtonAddComponent style="z-index: 999">
    <q-fab-action
      id="btn-add-personne"
      :label="$t('personnelAdd')"
      external-label
      label-position="left"
      @click="openDialog('FORM')"
      color="primary"
      padding="xs"
      icon="mdi-account-plus"
    ></q-fab-action>
  </ButtonAddComponent>

  <!-- stat -->
  <div class="column full-height no-wrap">
    <div class="text-body-2 q-mb-xs flex items-center">
      {{ $t('personnelStatTitle') }}
      <q-badge
        v-if="typeStats"
        rounded
        class="q-ml-sm"
        style="
          background-color: hsla(var(--info-bg) / 0.15);
          color: hsl(var(--info-bg));
        "
      >
        {{
          selectorLabel === 'ALL'
            ? Object.values(typeStats).reduce((acc, val) => acc + val, 0)
            : typeStats[selectorLabel]
        }}
      </q-badge>
      <q-btn
        class="q-ml-sm"
        icon="mdi-pin"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="hideStat = !hideStat"
        :style="hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </div>

    <transition name="slide">
      <div v-if="!hideStat" class="scroll q-mb-md">
        <div style="display: inline-block">
          <StatCardComponent
            v-if="typeStats && userData?.result"
            labelI18n
            :branch="
              selectorLabel === 'ALL'
                ? Object.entries(typeStats).map(([key, val]) => ({
                    count: val,
                    label: key,
                    icon: 'mdi-account',
                    color:
                      (
                        {
                          USER: 'cyan',
                          MESSENGER: 'yellow',
                          DELEGATE: 'red',
                          AGENCY: 'magenta',
                        } as const
                      )[key] || 'pink',
                  }))
                : [
                    {
                      label: selectorLabel,
                      count: typeStats[selectorLabel],
                      icon: 'mdi-account',
                      color:
                        selectorLabel === 'USER'
                          ? 'cyan'
                          : selectorLabel === 'MESSENGER'
                            ? 'yellow'
                            : selectorLabel === 'DELEGATE'
                              ? 'red'
                              : 'magenta',
                    },
                  ]
            "
            :dark="$q.dark.isActive"
          />
        </div>
      </div>
    </transition>

    <!-- main -->
    <div
      class="col surface-2 rounded justify-between column no-wrap bordered"
      style="overflow: hidden"
    >
      <div class="column">
        <div
          class="row surface-3 justify-between full-width items-center bordered-b"
          style="z-index: 1"
        >
          <div class="row q-py-sm q-px-md justify-between full-width">
            <q-input
              for="input-search"
              outlined
              dense
              :label="$t('search')"
              class="q-mr-md 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-12 col-md-5"
              :class="{ 'q-pt-xs': $q.screen.lt.md }"
              style="white-space: nowrap"
            >
              <q-select
                v-model="statusFilter"
                outlined
                dense
                option-value="value"
                option-label="label"
                class="col"
                map-options
                emit-value
                :hide-dropdown-icon="$q.screen.lt.sm"
                :options="[
                  { label: $t('all'), value: 'all' },
                  { label: $t('statusACTIVE'), value: 'statusACTIVE' },
                  { label: $t('statusINACTIVE'), value: 'statusINACTIVE' },
                ]"
              ></q-select>

              <q-select
                v-if="!modeView"
                id="select-field"
                for="select-field"
                class="col q-mx-sm"
                :options="
                  fieldSelectedOption.map((v) => ({
                    ...v,
                    label: $t(v.label),
                  }))
                "
                :display-value="$t('displayField')"
                :hide-dropdown-icon="$q.screen.lt.sm"
                v-model="fieldSelected"
                option-label="label"
                option-value="value"
                map-options
                emit-value
                outlined
                multiple
                dense
              />

              <q-btn-toggle
                id="btn-mode"
                v-model="modeView"
                dense
                class="no-shadow bordered rounded surface-1"
                :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
                    name="mdi-view-grid-outline"
                    size="16px"
                    class="q-px-sm q-py-xs rounded"
                    :style="{
                      color: $q.dark.isActive
                        ? modeView
                          ? '#C9D3DB '
                          : '#787B7C'
                        : modeView
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
                <template v-slot:list>
                  <q-icon
                    name="mdi-format-list-bulleted"
                    class="q-px-sm q-py-xs rounded"
                    size="16px"
                    :style="{
                      color: $q.dark.isActive
                        ? modeView === false
                          ? '#C9D3DB'
                          : '#787B7C'
                        : modeView === false
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
              </q-btn-toggle>
            </div>
          </div>
        </div>

        <div class="surface-2 bordered-b q-px-md">
          <q-tabs
            dense
            v-model="selectorLabel"
            align="left"
            class="full-height"
            active-color="info"
          >
            <q-tab
              name="ALL"
              @click="
                async () => {
                  currentPage = 1;
                  inputSearch = '';
                  selectorLabel = 'ALL';
                  statusFilter = 'all';
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t('all') }}
              </div>
            </q-tab>
            <q-tab
              name="USER"
              @click="
                async () => {
                  selectorLabel = 'USER';
                  statusFilter = 'all';
                  currentPage = 1;
                  inputSearch = '';
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t('USER') }}
              </div>
            </q-tab>
            <q-tab
              name="MESSENGER"
              @click="
                async () => {
                  selectorLabel = 'MESSENGER';
                  statusFilter = 'all';
                  currentPage = 1;
                  inputSearch = '';
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t('MESSENGER') }}
              </div>
            </q-tab>
            <q-tab
              name="DELEGATE"
              @click="
                async () => {
                  selectorLabel = 'DELEGATE';
                  statusFilter = 'all';
                  currentPage = 1;
                  inputSearch = '';
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t('DELEGATE') }}
              </div>
            </q-tab>
            <q-tab
              name="AGENCY"
              @click="
                async () => {
                  selectorLabel = 'AGENCY';
                  statusFilter = 'all';
                  currentPage = 1;
                  inputSearch = '';
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t('AGENCY') }}
              </div>
            </q-tab>
          </q-tabs>
        </div>
      </div>

      <div class="col scroll q-pa-md full-width">
        <div v-if="userData && userData.total > 0 && !inputSearch">
          <q-table
            flat
            bordered
            :grid="modeView"
            :rows="
              userData.result.filter((v) => {
                if (
                  statusFilter === 'statusACTIVE' &&
                  v.status === 'INACTIVE'
                ) {
                  return false;
                }

                if (
                  statusFilter === 'statusINACTIVE' &&
                  v.status !== 'INACTIVE'
                ) {
                  return false;
                }

                return true;
              })
            "
            :columns="columns"
            class="full-width"
            card-container-class="q-gutter-md  "
            row-key="name"
            :rows-per-page-options="[0]"
            hide-pagination
            :visible-columns="fieldSelected"
          >
            <template v-slot:header="props">
              <q-tr class="surface-2" :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  {{ $t(col.label) }}
                </q-th>
                <q-th auto-width />
              </q-tr>
            </template>

            <template v-slot:body="props">
              <q-tr
                :class="{
                  'app-text-muted': props.row.status === 'INACTIVE',
                  'status-active': props.row.status !== 'INACTIVE',
                  'status-inactive': props.row.status === 'INACTIVE',
                }"
                :props="props"
              >
                <q-td v-if="fieldSelected.includes('name')">
                  <div class="row items-center">
                    <div
                      style="
                        width: 50px;
                        display: flex;
                        margin-bottom: var(--size-2);
                      "
                    >
                      <div class="branch-card__icon">
                        <q-avatar size="md">
                          <q-img
                            :src="
                              props.row.profileImageUrl ?? '/no-profile.png'
                            "
                          >
                            <template #error>
                              <q-img src="/no-profile.png" />
                            </template>
                          </q-img>
                        </q-avatar>
                      </div>
                    </div>
                    <div class="col">
                      <div class="col">
                        {{
                          $i18n.locale === 'en-US'
                            ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                            : `${props.row.firstName} ${props.row.lastName}`.trim()
                        }}

                        <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.code || '-' }}
                      </div>
                    </div>
                  </div>
                </q-td>
                <q-td v-if="fieldSelected.includes('type')">
                  <span
                    class="tags"
                    :class="{
                      [`tags__${
                        {
                          USER: 'cyan',
                          MESSENGER: 'yellow',
                          DELEGATE: 'red',
                          AGENCY: 'magenta',
                        }[props.row.userType as string] || 'pink'
                      } }`]: true,
                    }"
                  >
                    {{
                      $t(
                        {
                          USER: 'USER',
                          MESSENGER: 'MESSENGER',
                          DELEGATE: 'DELEGATE',
                          AGENCY: 'AGENCY',
                        }[props.row.userType as string] || 'USER',
                      )
                    }}
                  </span>
                </q-td>

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

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

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

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

                <q-td>
                  <q-btn
                    icon="mdi-eye-outline"
                    size="sm"
                    dense
                    round
                    flat
                    @click.stop="
                      () => {
                        openDialog('INFO', props.row.id);
                      }
                    "
                  />

                  <q-btn
                    icon="mdi-dots-vertical"
                    size="sm"
                    dense
                    round
                    flat
                    @click.stop
                    :key="props.row.id"
                  >
                    <q-menu class="bordered">
                      <q-list v-close-popup>
                        <q-item
                          :id="`view-detail-btn-${props.row.name}-view`"
                          @click.stop="
                            () => {
                              openDialog('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="
                            () => {
                              openDialog('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
                          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="onDelete(props.row.id)"
                        >
                          <q-icon
                            name="mdi-trash-can-outline"
                            size="xs"
                            class="col-3"
                            :class="{
                              'app-text-negative':
                                props.row.status === 'CREATED',
                            }"
                          />
                          <span class="col-9 q-px-md flex items-center">
                            {{ $t('delete') }}
                          </span>
                        </q-item>

                        <q-item dense>
                          <q-item-section class="q-py-sm">
                            <div class="q-pa-sm surface-2 rounded">
                              <q-toggle
                                :id="`view-detail-btn-${props.row.name}-status`"
                                dense
                                size="sm"
                                :label="
                                  props.row.status !== 'INACTIVE'
                                    ? $t('switchOnLabel')
                                    : $t('switchOffLabel')
                                "
                                @click="
                                  async () => {
                                    toggleStatus(props.row.id);
                                  }
                                "
                                :model-value="props.row.status !== 'INACTIVE'"
                              />
                            </div>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </q-td>
              </q-tr>
            </template>

            <template v-slot:item="props">
              <div class="col-3">
                <PersonCard
                  :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-phone',
                        value: props.row.telephoneNo,
                      },
                      {
                        icon: 'mdi-clock-outline',
                        value:
                          (props.row.birthDate &&
                            calculateAge(props.row.birthDate)) ||
                          '-',
                      },
                    ],
                  }"
                  :tag="[
                    {
                      color:
                        {
                          USER: 'cyan',
                          MESSENGER: 'yellow',
                          DELEGATE: 'red',
                          AGENCY: 'magenta',
                        }[props.row.userType as string] || 'pink',
                      value: $t(props.row.userType),
                    },
                  ]"
                  :disabled="props.row.status === 'INACTIVE'"
                  @update-card="(a, b) => openDialog(a, props.row.id, b)"
                  @delete-card="onDelete(props.row.id)"
                  @enter-card="(a) => openDialog(a, props.row.id)"
                  @toggle-status="toggleStatus(props.row.id)"
                />
              </div>
            </template>
          </q-table>

          <!-- <div
            v-for="v in userData?.result.filter((v) => {
              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
                return false;
              }

              if (
                statusFilter === 'statusINACTIVE' &&
                v.status !== 'INACTIVE'
              ) {
                return false;
              }

              return true;
            })"
            :key="v.id"
            class="col-3"
          >
            <PersonCard
              :data="{
                code: v.code,
                name:
                  $i18n.locale === 'en-US'
                    ? `${v.firstNameEN} ${v.lastNameEN}`.trim()
                    : `${v.firstName} ${v.lastName}`.trim(),
                img: v.profileImageUrl,
                male: v.gender === 'male',
                female: v.gender === 'female',
                detail: [
                  {
                    icon: 'mdi-phone',
                    value: v.telephoneNo,
                  },
                  {
                    icon: 'mdi-clock-outline',
                    value: (v.birthDate && calculateAge(v.birthDate)) || '-',
                  },
                ],
              }"
              :tag="[
                {
                  color:
                    (
                      {
                        USER: 'cyan',
                        MESSENGER: 'yellow',
                        DELEGATE: 'red',
                        AGENCY: 'magenta',
                      } as const
                    )[v.userType] || 'pink',
                  value: $t(v.userType),
                },
              ]"
              :disabled="v.status === 'INACTIVE'"
              @update-card="(a, b) => openDialog(a, v.id, b)"
              @delete-card="onDelete(v.id)"
              @enter-card="(a) => openDialog(a, v.id)"
              @toggle-status="toggleStatus(v.id)"
            />
          </div> -->
        </div>

        <div
          v-if="userData && userData.total === 0 && !inputSearch"
          class="full-height column"
        >
          <div class="flex justify-end">
            <TooltipComponent
              title="personnelTooltipTitle"
              caption="personnelTooltipCaption"
              imgSrc="personnel-table-"
            />
          </div>

          <div class="col items-center flex justify-center">
            <AddButton
              :label="'personnelAdd'"
              :cyanOn="true"
              @trigger="openDialog('FORM')"
            />
          </div>
        </div>

        <div
          v-if="userData?.total === 0 && !!inputSearch"
          class="row col full-width items-center justify-center"
          style="min-height: 250px"
        >
          <NoData :not-found="!!inputSearch" />
        </div>
      </div>

      <div
        class="row justify-between items-center q-px-md q-py-sm"
        v-if="currentMaxPage > 0"
      >
        <div class="col-4">
          <div class="row items-center">
            <div class="app-text-muted" style="width: 80px">
              {{ $t('showing') }}
            </div>
            <div>
              <q-btn-dropdown
                dense
                unelevated
                :label="pageSize"
                class="bordered q-pl-md"
              >
                <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 fetchUserList();
                      }
                    "
                  >
                    <q-item-section>
                      <q-item-label>{{ v }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </div>
          </div>
        </div>

        <div class="col-4 row justify-center app-text-muted">
          {{
            $t('recordsPage', {
              resultcurrentPage: userData?.result.length,
              total: userData?.total,
            })
          }}
        </div>
        <div class="col-4 row justify-end">
          <PaginationComponent
            v-model:current-page="currentPage"
            v-model:max-page="currentMaxPage"
            :fetch-data="async () => await fetchUserList()"
          />
        </div>
      </div>
    </div>
  </div>

  <DrawerInfo
    v-if="currentUser"
    :category="$t('personnelTitle')"
    bg-on
    :badgeClass="
      formData.gender === 'male'
        ? 'app-bg-male text-white'
        : formData.gender === 'female'
          ? 'app-bg-female text-white'
          : ''
    "
    :badgeLabel="userCode"
    :isEdit="infoDrawerEdit"
    :title="
      $i18n.locale === 'en-US'
        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
        : `${currentUser.firstName} ${currentUser.lastName}`
    "
    v-model:drawerOpen="infoDrawer"
    :deleteData="() => onDelete(infoPersonId)"
    :submit="() => onSubmit()"
    :close="() => onClose()"
    :undo="() => undo()"
    :editData="() => (infoDrawerEdit = true)"
  >
    <template #info>
      <InfoForm
        :readonly="!infoDrawerEdit"
        v-model:address="formData.address"
        v-model:addressEN="formData.addressEN"
        v-model:provinceId="formData.provinceId"
        v-model:districtId="formData.districtId"
        v-model:subDistrictId="formData.subDistrictId"
        v-model:zipCode="formData.zipCode"
      >
        <template #person-card>
          <div class="q-ma-md">
            <AppBox class="surface-1" style="padding: 0">
              <PersonCard
                :can-edit-profile="infoDrawerEdit"
                :data="{
                  code: currentUser.code,
                  name:
                    $i18n.locale === 'en-US'
                      ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`.trim()
                      : `${currentUser.firstName} ${currentUser.lastName}`.trim(),
                  img: currentUser.profileImageUrl,
                  male: currentUser.gender === 'male',
                  female: currentUser.gender === 'female',
                }"
                no-hover
                no-action
                no-bg
                @edit-profile="inputFile.click()"
              />
            </AppBox>
          </div>
        </template>
        <template #information>
          <FormInformation
            dense
            outlined
            separator
            :readonly="!infoDrawerEdit"
            :usernameReadonly="isEdit"
            v-model:hqId="hqId"
            v-model:brId="brId"
            v-model:userType="formData.userType"
            v-model:userRole="formData.userRole"
            v-model:username="formData.username"
            v-model:userCode="userCode"
          />
        </template>
        <template #person>
          <FormPerson
            dense
            outlined
            separator
            :readonly="!infoDrawerEdit"
            v-model:firstName="formData.firstName"
            v-model:lastName="formData.lastName"
            v-model:firstNameEN="formData.firstNameEN"
            v-model:lastNameEN="formData.lastNameEN"
            v-model:telephoneNo="formData.telephoneNo"
            v-model:email="formData.email"
            v-model:gender="formData.gender"
            v-model:birthDate="formData.birthDate"
          />
        </template>
        <template #by-type>
          <FormByType
            dense
            outlined
            separator
            :readonly="!infoDrawerEdit"
            v-model:userType="formData.userType"
            v-model:registrationNo="formData.registrationNo"
            v-model:startDate="formData.startDate"
            v-model:retireDate="formData.retireDate"
            v-model:responsibleArea="formData.responsibleArea"
            v-model:discountCondition="formData.discountCondition"
            v-model:sourceNationality="formData.sourceNationality"
            v-model:importNationality="formData.importNationality"
            v-model:trainingPlace="formData.trainingPlace"
            v-model:checkpoint="formData.checkpoint"
            v-model:checkpointEN="formData.checkpointEN"
            v-model:agencyFile="agencyFile"
            v-model:agencyFileList="agencyFileList"
            v-model:userId="userId"
          />
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>

  <!-- form -->
  <FormDialog
    removeDialog
    ref="formDialogRef"
    :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
    :badgeLabel="userCode"
    :title="$t('personnelAdd')"
    v-model:modal="modal"
    v-model:address="formData.address"
    v-model:addressEN="formData.addressEN"
    v-model:provinceId="formData.provinceId"
    v-model:districtId="formData.districtId"
    v-model:subDistrictId="formData.subDistrictId"
    v-model:zipCode="formData.zipCode"
    :addressSeparator="formData.userType !== ''"
    :submit="() => onSubmit()"
    :close="() => onClose()"
  >
    <template #prepend>
      <ProfileUpload
        v-model:url-profile="urlProfile"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <template #information>
      <FormInformation
        dense
        outlined
        separator
        :usernameReadonly="isEdit"
        v-model:hqId="hqId"
        v-model:brId="brId"
        v-model:userType="formData.userType"
        v-model:userRole="formData.userRole"
        v-model:username="formData.username"
        v-model:userCode="userCode"
      />
    </template>
    <template #person>
      <FormPerson
        dense
        outlined
        separator
        v-model:firstName="formData.firstName"
        v-model:lastName="formData.lastName"
        v-model:firstNameEN="formData.firstNameEN"
        v-model:lastNameEN="formData.lastNameEN"
        v-model:telephoneNo="formData.telephoneNo"
        v-model:email="formData.email"
        v-model:gender="formData.gender"
        v-model:birthDate="formData.birthDate"
      />
    </template>
    <template #by-type>
      <FormByType
        dense
        outlined
        separator
        v-model:userType="formData.userType"
        v-model:registrationNo="formData.registrationNo"
        v-model:startDate="formData.startDate"
        v-model:retireDate="formData.retireDate"
        v-model:responsibleArea="formData.responsibleArea"
        v-model:discountCondition="formData.discountCondition"
        v-model:sourceNationality="formData.sourceNationality"
        v-model:importNationality="formData.importNationality"
        v-model:trainingPlace="formData.trainingPlace"
        v-model:checkpoint="formData.checkpoint"
        v-model:checkpointEN="formData.checkpointEN"
        v-model:agencyFile="agencyFile"
      />
    </template>
  </FormDialog>
</template>
<style scoped>
.upload-img-preview {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  height: 12vw;
  background-color: var(--surface-1);
}

.upload-img-btn {
  color: hsl(var(--info-bg));
  border: 1px solid hsl(var(--info-bg));
  background-color: hsla(var(--info-bg) / 0.1);
  border-radius: var(--radius-2);

  &.dark {
    background-color: transparent;
  }
}

.edit-img-btn {
  color: hsl(var(--info-bg));
  border: 1px solid hsl(var(--info-bg));
  background-color: transparent;
  border-radius: var(--radius-2);
}

.cancel-img-btn {
  color: hsl(var(--negative-bg));
  border: 1px solid hsl(var(--negative-bg));
  background-color: transparent;
  border-radius: var(--radius-2);
}

.submit-img-btn {
  color: var(--surface-1);
  border: 1px solid hsl(var(--positive-bg));
  background-color: hsl(var(--positive-bg));
  border-radius: var(--radius-2);
}

.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;
}

.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);
  }
}

.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__cyan {
  --_color: var(--cyan-7-hsl);
}

.tags__yellow {
  --_color: var(--orange-4-hsl);
}

.tags__red {
  --_color: var(--red-6-hsl);
}

.tags__magenta {
  --_color: var(--pink-8-hsl);
}

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

.dark .tags__magenta {
  --_color: var(--pink-7-hsl);
}

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

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

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