fix: code badge & edit profile on drawer

src/components/04_product-service/WorkManagementComponent.vue

@@ -80,7 +80,7 @@ defineEmits<{
             />
             <div
               for="select-work-name"
-              class="col rounded q-py-sm q-px-md"
+              class="col q-py-sm q-px-md"
               style="background-color: var(--surface-1); z-index: 2"
               @click="() => (readonly ? '' : fetchListOfWork())"
             >

src/components/DrawerInfo.vue

@@ -111,11 +111,14 @@ function reset() {
           <div class="col text-weight-bold text-center">
             <text
               v-if="badgeLabel"
-              class="badge-label text-caption text-grey-8"
+              class="badge-label badge text-caption q-px-sm q-mr-sm"
+              :class="badgeClass"
             >
               {{ badgeLabel }}
             </text>
-            <text v-if="category" class="app-text-muted">{{ category }}</text>
+            <text v-if="category" class="app-text-muted q-mr-sm">
+              {{ category }}
+            </text>
             {{ title }}
 
             <text
@@ -247,4 +250,11 @@ function reset() {
   display: inline-block;
   text-wrap: nowrap;
 }
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>

src/components/UsersDetailCardComponent.vue

@@ -26,6 +26,7 @@ withDefaults(
     };
     hideButton?: boolean;
     badge?: CustomerBranch[];
+    canEditProfile?: boolean;
   }>(),
   {
     hideButton: false,
@@ -36,6 +37,7 @@ withDefaults(
 );
 
 defineEmits<{
+  (e: 'editProfile'): void;
   (e: 'deleteCard', id: string): void;
   (e: 'updateCard', action: 'FORM' | 'INFO', id: string): void;
   (e: 'viewCard', action: 'FORM' | 'INFO', id: string): void;
@@ -161,6 +163,12 @@ defineEmits<{
                 bordered
                 class="avatar"
                 style="border: 2px solid var(--border-color); height: 80px"
+                :class="{ 'edit-profile': canEditProfile }"
+                @click="
+                  () => {
+                    if (canEditProfile) $emit('editProfile');
+                  }
+                "
               >
                 <q-img
                   :src="list.imageUrl ?? '/no-profile.png'"
@@ -345,4 +353,13 @@ defineEmits<{
   justify-content: center;
   align-items: center;
 }
+
+.edit-profile {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 80%;
+  }
+}
 </style>