Fix emploee

src/assets/css/temporary.css

@@ -1,4 +1,4 @@
-.addDeal, .p-dialog {
+.addDeal, .p-dialog, .p-component {
     .p-2 {
         padding: calc(var(--spacing) * 2)!important;
     }
@@ -96,6 +96,12 @@
     .block {
         display: block;
     }
+    .d-flex {
+        display: flex;
+    }
+    .align-items-center {
+        align-items: center;
+    }
     .font-medium {
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
@@ -104,3 +110,30 @@
         font-size: var(--text-sm);
     }
 }
+
+.emp-avatar {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    background-color: #e0e0e0;
+    color: #666;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 32px;
+}
+
+.emp-avatar img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.p-multiselect-overlay .emp-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/deal/addEdit/EmployeeAddModal.vue

@@ -17,6 +17,14 @@
       <template #dropdownicon>
         <DropdownIcon />
       </template>
+      <template #option="{ option }">
+        <div class="d-flex align-items-center gap-2">
+          <img v-if="option.user_logo" :src="`https://joywork.ru/photos/agency/${option.user_logo}`"
+               class="emp-avatar" alt="">
+          <div v-else class="emp-avatar text-center">{{ getInitials(option) }}</div>
+          <span class="align-self-center">{{ option.fullName }}</span>
+        </div>
+      </template>
     </MultiSelect>
     <div class="mt-4 flex justify-center">
       <button @click="handleSelect" class="p-2 rounded add-employee-btn">
@@ -54,6 +62,16 @@ const handleSelect = () => {
 
   dialogRef.value.close(selectedEmployeeObjects);
 };
+
+const getInitials = (emp) => {
+  const last = (emp.last_name || '').charAt(0);
+  const first = (emp.first_name || '').charAt(0);
+  return (last + first).toUpperCase() || '?';
+};
+
+const getEmployeeById = (id) => {
+  return employeesWithFullName.value.find(e => e.id === id);
+};
 </script>
 
 <style>
@@ -74,4 +92,18 @@ const handleSelect = () => {
     font-size: 14px;
   }
 }
+
+.emp-avatar {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: #e0e0e0;
+  color: #666;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 32px;
+  text-align: center;
+}
 </style>