From 709c98e08cab11f84b83f40e5958e509aee93319 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 20 Aug 2024 09:39:18 +0700
Subject: [PATCH] refactor: add border

---
 .../03_customer-management/TableEmpoloyee.vue | 110 +++++++++++++-----
 1 file changed, 82 insertions(+), 28 deletions(-)

diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index 85d9b320..e1371050 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -98,36 +98,52 @@ const prop = withDefaults(
             <div
               style="width: 50px; display: flex; margin-bottom: var(--size-2)"
             >
-              <div class="full-width full-height">
-                <q-avatar size="md">
-                  <q-img
-                    :src="
-                      props.row.profileImageUrl || '/images/employee-avatar.png'
-                    "
-                    class="text-center"
-                    :ratio="1"
-                  >
-                    <template #error>
-                      <span>
-                        <q-img
-                          class="text-center"
-                          :ratio="1"
-                          src="/images/employee-avatar.png"
-                        />
-                      </span>
-                    </template>
-                  </q-img>
+              <div
+                style="
+                  border-radius: 50%;
+                  border-style: solid;
+                  border-width: 2px;
+                  border-color: hsl(var(--pink-6-hsl));
+                  padding: 3px;
+                "
+              >
+                <div class="full-width full-height">
+                  <q-avatar size="md">
+                    <q-img
+                      :src="
+                        props.row.profileImageUrl ||
+                        '/images/employee-avatar.png'
+                      "
+                      class="text-center"
+                      :ratio="1"
+                    >
+                      <template #error>
+                        <span>
+                          <q-img
+                            class="text-center"
+                            :ratio="1"
+                            src="/images/employee-avatar.png"
+                          />
+                        </span>
+                      </template>
+                    </q-img>
 
-                  <q-badge
-                    class="absolute-bottom-right no-padding"
-                    style="border-radius: 50%; min-width: 8px; min-height: 8px"
-                    :style="{
-                      background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                    }"
-                  ></q-badge>
-                </q-avatar>
+                    <q-badge
+                      class="absolute-bottom-right no-padding"
+                      style="
+                        border-radius: 50%;
+                        min-width: 8px;
+                        min-height: 8px;
+                      "
+                      :style="{
+                        background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                      }"
+                    ></q-badge>
+                  </q-avatar>
+                </div>
               </div>
             </div>
+
             <div class="col">
               <div class="col">
                 {{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
@@ -346,4 +362,42 @@ const prop = withDefaults(
   </q-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+.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>