From 4bfe1ccd3442e71d3e2f8d2a9d096b4a8761b66c Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:29:06 +0700
Subject: [PATCH] feat: update Person Card

---
 src/components/DrawerComponent.vue            |  10 +-
 src/components/StatCardComponent.vue          |  30 +-
 src/components/home/PersonCard.vue            | 543 +++++++++---------
 .../02_personnel-management/MainPage.vue      | 145 +++--
 4 files changed, 391 insertions(+), 337 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 36001796..5795ffec 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -102,12 +102,12 @@ function branchSetting() {}
     side="left"
     :breakpoint="599"
     class="column justify-between no-wrap"
-    :width="mini ? 110 : 256"
+    :width="mini ? 80 : 256"
   >
     <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
-    <div class="scroll" style="overflow-x: hidden">
+    <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
       <div
-        class="flex justify-center items-center q-pa-md cursor-pointer"
+        class="flex justify-center items-center q-pl-sm cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
         style="height: 128px"
@@ -120,12 +120,12 @@ function branchSetting() {}
         />
       </div>
 
-      <div id="drawer-menu" class="q-px-md">
+      <div id="drawer-menu" class="q-pl-md q-mr-xs">
         <q-item
           v-for="v in labelMenu"
           dense
           clickable
-          class="row items-center q-my-xs"
+          class="row items-center q-my-xs q-px-xs"
           :key="v.label"
           :disable="!!v.disabled"
           :class="{
diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index e2d20c30..b5ddd3ef 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -5,7 +5,15 @@ const props = withDefaults(
       icon: string;
       count: number;
       label: string;
-      color: 'pink' | 'purple' | 'green' | 'orange';
+      color:
+        | 'pink'
+        | 'purple'
+        | 'green'
+        | 'orange'
+        | 'cyan'
+        | 'yellow'
+        | 'red'
+        | 'magenta';
     }[];
     dark?: boolean;
     labelI18n?: boolean;
@@ -79,10 +87,26 @@ const props = withDefaults(
   --_color: var(--teal-10-hsl);
 }
 
+.stat-card__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.stat-card__red {
+  --_color: var(--red-6-hsl);
+}
+
+.stat-card__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
 .stat-card__orange {
   --_color: var(--orange-5-hsl);
 }
 
+.stat-card__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
 .dark .stat-card__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -94,4 +118,8 @@ const props = withDefaults(
 .dark .stat-card__orange {
   --_color: var(--orange-6-hsl);
 }
+
+.dark .stat-card__magenta {
+  --_color: var(--pink-7-hsl);
+}
 </style>
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index df3e3813..6983b07e 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -5,264 +5,222 @@ import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
 
 defineProps<{
-  list: {
-    id: string;
+  data: {
     name: string;
-    detail?: { label: string; value: string }[];
+    code: string;
     male?: boolean;
     female?: boolean;
-    disabled?: boolean;
-    badge?: string;
     img?: string;
-  }[];
-  gridColumns?: number;
+    detail?: { icon: string; value: string }[];
+  };
+  tag?: [{ color: string; value: string }];
+  disabled?: boolean;
   noHover?: boolean;
   noAction?: boolean;
-  noDetail?: boolean;
   noBg?: boolean;
-  detailColumnCount?: number;
-  canEditProfile?: boolean;
   history?: boolean;
 }>();
 
 defineEmits<{
   (e: 'editProfile'): void;
-  (e: 'history', id: string): void;
-  (e: 'deleteCard', id: string): void;
-  (
-    e: 'updateCard',
-    action: 'FORM' | 'INFO',
-    id: string,
-    isEdit?: boolean,
-  ): void;
-  (e: 'enterCard', action: 'FORM' | 'INFO', id: string): void;
-  (e: 'toggleStatus', id: string, status: boolean): void;
+  (e: 'history'): void;
+  (e: 'deleteCard'): void;
+  (e: 'updateCard', action: 'FORM' | 'INFO', isEdit?: boolean): void;
+  (e: 'enterCard', action: 'FORM' | 'INFO'): void;
+  (e: 'toggleStatus', status: boolean): void;
 }>();
 </script>
 
 <template>
-  <div
-    class="person-container"
-    :style="`grid-template-columns: repeat( ${
-      gridColumns
-        ? `${gridColumns}, 1fr`
-        : $q.screen.gt.sm
-          ? '4, 1fr'
-          : $q.screen.gt.xs
-            ? '2, 1fr'
-            : '1, 1fr'
-    })`"
+  <AppBox
+    bordered
+    no-padding
+    class="column person-box"
+    :class="{
+      'person-box__disabled': disabled,
+      'person-box__no-hover': noHover,
+      'person-box__no-detail': !data.detail,
+      'person-box__no-bg': noBg,
+    }"
+    @click="$emit('enterCard', 'INFO')"
   >
-    <AppBox
-      bordered
-      class="column person-box"
-      :class="{
-        'person-box__disabled': v.disabled,
-        'person-box__no-hover': noHover,
-        'person-box__no-detail': noDetail,
-        'person-box__no-bg': noBg,
-      }"
-      @click="$emit('enterCard', 'INFO', v.id)"
-      v-for="(v, i) in list"
-      :key="i"
-    >
-      <div class="q-pa-sm column items-center">
-        <!-- kebab menu -->
-        <div class="full-width text-right" v-if="!noAction">
-          <q-btn
-            v-if="history"
-            flat
-            round
-            class="app-text-muted-2"
-            padding="xs"
-            icon="mdi-history"
-            size="sm"
-            @click.stop="$emit('history', v.id)"
-          />
-
-          <q-btn
-            flat
-            round
-            padding="xs"
-            class="app-text-muted-2"
-            icon="mdi-dots-vertical"
-            size="sm"
-            @click.stop
+    <div class="column items-center">
+      <!-- kebab menu -->
+      <div class="full-width flex" v-if="!noAction">
+        <div style="margin-right: auto">
+          <span
+            class="tags"
+            v-for="v in tag"
+            :class="{ [`tags__${v.color}`]: true }"
           >
-            <q-menu class="bordered">
-              <q-list v-close-popup>
-                <q-item
-                  clickable
-                  dense
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('enterCard', 'INFO', v.id)"
-                >
-                  <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
-                  dense
-                  clickable
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('updateCard', 'INFO', v.id, true)"
-                  v-close-popup
-                >
-                  <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
-                  dense
-                  clickable
-                  @click="$emit('deleteCard', v.id)"
-                  v-close-popup
-                >
-                  <q-icon
-                    name="mdi-trash-can-outline"
-                    size="xs"
-                    class="col-3 app-text-negative"
-                  />
-                  <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
-                        dense
-                        size="sm"
-                        @click="
-                          $emit('toggleStatus', v.id, v.disabled === false)
-                        "
-                        :model-value="!v.disabled"
-                        val="xs"
-                        padding="none"
-                      >
-                        <div class="q-ml-xs">
-                          {{
-                            !v.disabled
-                              ? $t('switchOnLabel')
-                              : $t('switchOffLabel')
-                          }}
-                        </div>
-                      </q-toggle>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-
-        <!-- profile -->
-        <div style="position: relative">
-          <AppCircle
-            bordered
-            class="avatar"
-            style="border: 2px solid var(--border-color)"
-            :class="{ 'edit-profile': canEditProfile }"
-            @click="
-              () => {
-                if (canEditProfile) $emit('editProfile');
-              }
-            "
-          >
-            <q-img
-              :src="v.img"
-              style="object-fit: cover; width: 100%; height: 100%"
-            />
-            <div class="status-circle">
-              <q-icon
-                :name="`mdi-${v.disabled ? 'close' : 'check'}`"
-                :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
-              />
-            </div>
-          </AppCircle>
-        </div>
-
-        <!-- name symbol -->
-        <span class="items-center row q-my-sm">
-          {{ v.name }}
-          <Icon
-            class="q-pl-sm"
-            :class="{
-              'symbol-gender': v.male || v.female,
-              'symbol-gender__male': !v.disabled && v.male,
-              'symbol-gender__female': !v.disabled && v.female,
-              'symbol-gender__disable': v.disabled,
-            }"
-            :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
-            width="24px"
-          />
-          <!-- <Icon class="locale q-pl-sm" icon="circle-flags:th" width="24px" /> -->
-        </span>
-        <span
-          v-if="v.badge"
-          class="badge q-px-sm"
-          :class="{
-            'bg-gender': v.male || v.female,
-            'bg-gender__male': !v.disabled && v.male,
-            'bg-gender__female': !v.disabled && v.female,
-            'bg-gender__disable': v.disabled,
-            empty: !v.male && !v.female,
-          }"
-        >
-          {{ v.badge }}
-        </span>
-      </div>
-
-      <!-- detail -->
-      <q-separator v-if="!noDetail" />
-      <div
-        v-if="!noDetail"
-        class="q-pt-sm q-px-md q-pb-md person-detail rounded-b full-width"
-        :class="{
-          'bg-gender': v.male || v.female,
-          'bg-gender__light':
-            (!v.disabled && v.male) || (!v.disabled && v.female),
-          'bg-gender__male': !v.disabled && v.male,
-          'bg-gender__female': !v.disabled && v.female,
-          'bg-gender__disable': v.disabled,
-        }"
-        :style="
-          (detailColumnCount &&
-            `grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
-          ''
-        "
-      >
-        <div v-for="(d, j) in v.detail" :key="j">
-          <span class="app-text-muted-2">
-            {{ d.label }}
+            {{ v.value }}
           </span>
-          <span>{{ d.value || '-' }}</span>
+        </div>
+        <q-btn
+          v-if="history"
+          flat
+          round
+          class="app-text-muted-2"
+          padding="xs"
+          icon="mdi-history"
+          size="sm"
+          @click.stop="$emit('history')"
+        />
+
+        <q-btn
+          flat
+          round
+          padding="xs"
+          class="app-text-muted-2"
+          icon="mdi-dots-vertical"
+          size="sm"
+          @click.stop
+        >
+          <q-menu class="bordered">
+            <q-list v-close-popup>
+              <q-item
+                clickable
+                dense
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('enterCard', 'INFO')"
+              >
+                <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
+                dense
+                clickable
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('updateCard', 'INFO', true)"
+                v-close-popup
+              >
+                <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
+                dense
+                clickable
+                @click="$emit('deleteCard')"
+                v-close-popup
+              >
+                <q-icon
+                  name="mdi-trash-can-outline"
+                  size="xs"
+                  class="col-3 app-text-negative"
+                />
+                <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
+                      dense
+                      size="sm"
+                      @click="$emit('toggleStatus', disabled === false)"
+                      :model-value="!disabled"
+                      val="xs"
+                      padding="none"
+                    >
+                      <div class="q-ml-xs">
+                        {{
+                          !disabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                        }}
+                      </div>
+                    </q-toggle>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div>
+
+      <!-- profile -->
+      <AppCircle
+        bordered
+        class="avatar"
+        style="border: 2px solid var(--border-color); overflow: visible"
+        @click="$emit('editProfile')"
+      >
+        <q-img
+          :src="data.img"
+          style="
+            object-fit: cover;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          "
+        />
+        <div class="avatar__status"></div>
+      </AppCircle>
+
+      <!-- name symbol -->
+      <span class="items-center row">
+        {{ data.name }}
+        <Icon
+          class="q-pl-xs"
+          :class="{
+            'symbol-gender': data.male || data.female,
+            'symbol-gender__male': !disabled && data.male,
+            'symbol-gender__female': !disabled && data.female,
+            'symbol-gender__disable': disabled,
+          }"
+          :icon="`material-symbols:${data.male ? 'male' : 'female'}`"
+          width="24px"
+        />
+      </span>
+      <span style="color: hsl(var(--text-mute)); scale: 0.9">
+        {{ data.code || '-' }}
+      </span>
+    </div>
+
+    <!-- detail -->
+    <q-separator v-if="data.detail" class="q-my-sm q-mx-md" />
+
+    <div class="row" v-for="v in data.detail" :key="v.value" v-if="data.detail">
+      <div class="column items-center" style="width: min-content">
+        <div class="detail-icon">
+          <q-icon size="md" style="scale: 0.5" :name="v.icon" />
         </div>
       </div>
-    </AppBox>
-  </div>
+      <div class="col row items-center full-width">
+        <span class="ellipsis">{{ v.value || '-' }}</span>
+        <q-tooltip
+          anchor="bottom left"
+          self="bottom left"
+          :offset="[10, 20]"
+          :delay="500"
+        >
+          {{ v.value || '-' }}
+        </q-tooltip>
+      </div>
+    </div>
+  </AppBox>
 </template>
 
 <style scoped>
 .person-box {
-  background-color: var(--surface-2);
-  border-radius: var(--radius-2) !important;
+  background-color: var(--surface-1);
   transition: 100ms ease-in-out;
-  padding: 0;
+  padding: var(--size-2);
 
   &.person-box__disabled {
     opacity: 0.4;
@@ -284,6 +242,13 @@ defineEmits<{
     background-color: transparent;
   }
 
+  & .detail-icon {
+    color: hsl(var(--text-mute-2));
+    background-color: hsla(var(--stone-6-hsl) / 0.15);
+    border-radius: 50%;
+    scale: 0.8;
+  }
+
   & .bg-gender {
     color: hsla(var(--_fg));
     background-color: hsl(var(--_bg));
@@ -297,16 +262,6 @@ defineEmits<{
       color: unset;
       background-color: hsla(var(--_bg) / 0.1);
     }
-
-    &.bg-gender__male {
-      --_fg: 0 100 100%;
-      --_bg: var(--gender-male);
-    }
-
-    &.bg-gender__female {
-      --_fg: 0 100 100%;
-      --_bg: var(--gender-female);
-    }
   }
 
   & .symbol-gender {
@@ -325,23 +280,6 @@ defineEmits<{
     }
   }
 
-  & .person-detail {
-    display: grid;
-    flex-grow: 1;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--size-2);
-    overflow-x: scroll;
-
-    & > * {
-      display: flex;
-      flex-direction: column;
-
-      & > :first-child {
-        font-size: var(--font-size-0);
-      }
-    }
-  }
-
   & .status-circle {
     width: 18px;
     height: 18px;
@@ -360,11 +298,6 @@ defineEmits<{
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);
-
-    & .person-detail {
-      --_hover: hsl(var(--_bg));
-      box-shadow: inset 0em -5px hsl(var(--_bg));
-    }
   }
 }
 
@@ -374,17 +307,25 @@ defineEmits<{
 }
 
 .avatar {
-  block-size: 7rem;
-}
+  block-size: 5rem;
+  transform: rotate(45deg);
 
-.badge {
-  display: inline-block;
-  border-radius: var(--radius-6);
-  background-color: var(--surface-2);
-  text-wrap: nowrap;
+  & .avatar__status {
+    content: ' ';
+    display: block;
+    block-size: 1rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.5rem;
+    border: 1px solid var(--border-color);
+    top: calc(50% - 0.5rem);
+    bottom: calc(50% - 0.5rem);
+    background-color: hsla(var(--positive-bg) / 1);
+  }
 
-  &.empty {
-    background-color: var(--surface-tab);
+  & :deep(.q-img) {
+    transform: rotate(-45deg);
   }
 }
 
@@ -396,4 +337,60 @@ defineEmits<{
     opacity: 80%;
   }
 }
+
+.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__purple {
+  --_color: var(--violet-11-hsl);
+}
+
+.tags__pink {
+  --_color: var(--pink-6-hsl);
+}
+
+.tags__green {
+  --_color: var(--teal-10-hsl);
+}
+
+.tags__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.tags__red {
+  --_color: var(--red-6-hsl);
+}
+
+.tags__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
+.tags__orange {
+  --_color: var(--orange-5-hsl);
+}
+
+.tags__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
+.dark .tags__purple {
+  --_color: var(--violet-10-hsl);
+}
+
+.dark .tags__green {
+  --_color: var(--teal-8-hsl);
+}
+
+.dark .tags__orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.dark .tags__magenta {
+  --_color: var(--pink-7-hsl);
+}
 </style>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index c3ffdc0a..c00d6310 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
-import useUtilsStore, { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -91,7 +91,7 @@ const statusToggle = ref(true);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const inputSearch = ref('');
 const userId = ref<string>();
-const selectorLabel = ref<string>('');
+const selectorLabel = ref<string>('MESSENGER');
 const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
@@ -170,7 +170,7 @@ const selectorList = computed(() => [
 
 async function openDialog(
   action?: 'FORM' | 'INFO',
-  idEdit?: string,
+  id?: string,
   isPersonEdit: boolean = false,
 ) {
   if (userStore.userOption.hqOpts.length === 0) {
@@ -181,12 +181,12 @@ async function openDialog(
     await userStore.fetchRoleOption();
   }
 
-  if (idEdit && userData.value) {
-    assignFormData(idEdit);
+  if (id && userData.value) {
+    assignFormData(id);
     isEdit.value = true;
 
     if (formData.value.userType === 'AGENCY') {
-      const result = await userStore.fetchAttachment(idEdit);
+      const result = await userStore.fetchAttachment(id);
 
       if (result) {
         agencyFileList.value = result;
@@ -201,7 +201,7 @@ async function openDialog(
 
     infoDrawerEdit.value = isPersonEdit ? true : false;
     infoDrawer.value = true;
-    const user = userData.value.result.find((x) => x.id === idEdit);
+    const user = userData.value.result.find((x) => x.id === id);
     infoPersonCard.value = user
       ? [
           {
@@ -377,7 +377,7 @@ async function assignFormData(idEdit: string) {
     infoPersonId.value = currentUser.value.id;
 
     formData.value = {
-      branchId: foundUser.branch[0].id,
+      branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
       districtId: foundUser.districtId,
       subDistrictId: foundUser.subDistrictId,
@@ -556,13 +556,21 @@ watch(inputSearch, async () => await fetchUserList());
       <div v-if="!hideStat" class="scroll q-mb-md">
         <div style="display: inline-block">
           <StatCardComponent
-            v-if="sortedUserStats"
+            v-if="typeStats"
             :branch="
-              sortedUserStats.map((v) => ({
-                count: v.count,
-                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              Object.entries(typeStats).map(([key, val]) => ({
+                count: val,
+                label: key,
                 icon: 'mdi-account',
-                color: v.isHeadOffice ? 'pink' : 'purple',
+                color:
+                  (
+                    {
+                      USER: 'cyan',
+                      MESSENGER: 'yellow',
+                      DELEGATE: 'red',
+                      AGENCY: 'magenta',
+                    } as const
+                  )[key] || 'pink',
               }))
             "
             :dark="$q.dark.isActive"
@@ -633,51 +641,69 @@ watch(inputSearch, async () => await fetchUserList());
           </q-btn>
         </div>
       </div>
-      <div class="col column scroll q-pa-md">
-        <PersonCard
-          :list="
-            userData?.result
-              .filter((v) => {
-                if (
-                  statusFilter === 'statusACTIVE' &&
-                  v.status === 'INACTIVE'
-                ) {
-                  return false;
-                }
-                if (
-                  statusFilter === 'statusINACTIVE' &&
-                  v.status !== 'INACTIVE'
-                ) {
-                  return false;
-                }
-                return true;
-              })
-              .map((v) => ({
-                id: v.id,
-                img: `${v.profileImageUrl}`,
+      <div class="col scroll">
+        <div class="q-pa-md q-col-gutter-md row">
+          <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}`
-                    : `${v.firstName} ${v.lastName}`,
+                    ? `${v.firstNameEN} ${v.lastNameEN}`.trim()
+                    : `${v.firstName} ${v.lastName}`.trim(),
+                img: v.profileImageUrl,
                 male: v.gender === 'male',
                 female: v.gender === 'female',
                 detail: [
-                  { label: $t('personnelCardUserType'), value: $t(v.userType) },
-                  { label: $t('personnelCardTelephone'), value: v.telephoneNo },
                   {
-                    label: $t('personnelCardAge'),
-                    value: userStore.calculateAge(v.birthDate as Date) || '',
+                    icon: 'mdi-phone',
+                    value: v.telephoneNo,
+                  },
+                  {
+                    icon: 'mdi-clock-outline',
+                    value: (v.birthDate && calculateAge(v.birthDate)) || '-',
                   },
                 ],
-                badge: v.code,
-                disabled: v.status === 'INACTIVE',
-              })) || []
-          "
-          @update-card="openDialog"
-          @delete-card="onDelete"
-          @enter-card="openDialog"
-          @toggle-status="toggleStatus"
-        />
+              }"
+              :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>
         <template v-if="userData && userData.total === 0 && !inputSearch">
           <div class="col-1 self-end">
             <div class="row">
@@ -807,17 +833,20 @@ watch(inputSearch, async () => await fetchUserList());
             <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-detail
                 no-bg
-                :list="infoPersonCard"
-                :gridColumns="1"
-                @edit-profile="
-                  () => {
-                    inputFile.click();
-                  }
-                "
+                @edit-profile="inputFile.click()"
               />
             </AppBox>
           </div>