feat: แก้ สถานะ ของCustomer

src/components/UsersDetailCardComponent.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import AppBox from './app/AppBox.vue';
 
+import AppCircle from 'components/app/AppCircle.vue';
+
 import { CustomerBranch } from 'stores/customer/types';
 
 withDefaults(
@@ -20,6 +22,7 @@ withDefaults(
       name: string;
       code: string;
       detail?: { label: string; value: string }[];
+      status: string;
     };
     hideButton?: boolean;
     badge?: CustomerBranch[];
@@ -48,6 +51,7 @@ defineEmits<{
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
+        'status-inactive': list.status === 'INACTIVE',
       }"
     >
       <AppBox
@@ -132,7 +136,7 @@ defineEmits<{
                       dense
                       size="sm"
                       @click="$emit('toggleStatus', metadata.id)"
-                      :model-value="!metadata.disabled"
+                      :model-value="metadata.disabled"
                       val="xs"
                       padding="none"
                     >
@@ -152,9 +156,35 @@ defineEmits<{
         </q-btn>
         <div class="row justify-center relative-position">
           <q-card-section class="q-pt-md img-decoration">
-            <q-avatar size="80px">
+            <div style="position: relative">
+              <AppCircle
+                bordered
+                class="avatar"
+                style="border: 2px solid var(--border-color); height: 80px"
+              >
+                <q-img
+                  :src="list.imageUrl ?? '/no-profile.png'"
+                  style="object-fit: cover; width: 100%; height: 100%"
+                />
+                <div class="status-circle" style="">
+                  <q-icon
+                    :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
+                    :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+                  />
+                </div>
+              </AppCircle>
+            </div>
+
+            <!-- <q-avatar size="80px">
               <img :src="list.imageUrl ?? '/no-profile.png'" />
             </q-avatar>
+
+            <div class="status-circle">
+              <q-icon
+                :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
+                :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+              />
+            </div> -->
           </q-card-section>
         </div>
         <div class="box-title">
@@ -293,4 +323,26 @@ defineEmits<{
   display: flex;
   justify-content: center;
 }
+
+.status-inactive {
+  opacity: 0.5;
+
+  .status-circle {
+    background-color: var(--surface-1);
+  }
+}
+
+.status-circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--teal-6);
+  border: 2px solid var(--border-color);
+  bottom: 0.5rem;
+  right: 0.3rem;
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>