refactor: header img error

src/components/03_customer-management/TableEmpoloyee.vue

@@ -89,7 +89,7 @@ const prop = withDefaults(
           }
         "
       >
-        <q-td v-if="fieldSelected.includes('orderNumber')">
+        <q-td class="text-center" v-if="fieldSelected.includes('orderNumber')">
           {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
         </q-td>
 
@@ -98,17 +98,33 @@ const prop = withDefaults(
             <div
               style="width: 50px; display: flex; margin-bottom: var(--size-2)"
             >
-              <div class="branch-card__icon">
+              <div class="full-width full-height">
                 <q-avatar size="md">
                   <q-img
                     :src="
-                      props.row.profileImageUrl ?? '/images/employee-avatar.png'
+                      props.row.profileImageUrl || '/images/employee-avatar.png'
                     "
+                    class="text-center"
+                    :ratio="1"
                   >
                     <template #error>
-                      <q-img src="/images/employee-avatar.png" />
+                      <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>
               </div>
             </div>
@@ -134,6 +150,10 @@ const prop = withDefaults(
           </div>
         </q-td>
 
+        <q-td v-if="fieldSelected.includes('formDialogInputAge')">
+          {{ calculateAge(props.row.dateOfBirth) || '-' }}
+        </q-td>
+
         <q-td v-if="fieldSelected.includes('formDialogInputNationality')">
           {{ props.row.nationality || '-' }}
         </q-td>
@@ -142,12 +162,8 @@ const prop = withDefaults(
           {{ 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) }}
+          {{ dateFormat(props.row.passportExpiryDate) || '-' }}
         </q-td>
 
         <q-td v-if="fieldSelected.includes('formDialogEmployeeNRCNo')">
@@ -158,7 +174,7 @@ const prop = withDefaults(
           <div class="row items-center" v-if="props.row.customerBranch">
             <div class="col text-left">
               <div class="col">
-                {{ props.row.customerBranch.code }}
+                {{ props.row.customerBranch.code || '-' }}
               </div>
               <div class="col app-text-muted">
                 {{
@@ -171,11 +187,6 @@ const prop = withDefaults(
           </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"
@@ -335,4 +346,4 @@ const prop = withDefaults(
   </q-table>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped></style>