From 810c789f15ba6ace8983e1cff77cbdac552c5f4c Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 11 Apr 2021 22:10:18 +0200
Subject: [PATCH 1/5] refactor: simplify avatar and smallNameAndAvatar
 components

---
 resources/js/Pages/Adminland/Audit/Index.vue  |  2 +-
 .../Employee/Partials/EmployeeList.vue        |  2 +-
 .../Adminland/Expense/Partials/Employees.vue  |  2 +-
 .../Pages/Adminland/General/Partials/Stat.vue |  3 +-
 .../js/Pages/Adminland/Hardware/Index.vue     |  3 +-
 .../js/Pages/Adminland/Hardware/Show.vue      |  3 +-
 resources/js/Pages/Adminland/Team/Logs.vue    |  2 +-
 .../js/Pages/Company/Partials/Birthdays.vue   |  2 +-
 .../js/Pages/Company/Partials/Employees.vue   |  2 +-
 .../js/Pages/Company/Partials/NewHires.vue    |  2 +-
 resources/js/Pages/Company/Partials/Teams.vue |  2 +-
 resources/js/Pages/Company/Project/Create.vue |  2 +-
 .../Pages/Company/Project/Decisions/Index.vue |  5 +-
 .../js/Pages/Company/Project/Files/Index.vue  |  3 +-
 .../Pages/Company/Project/Members/Index.vue   |  2 +-
 .../Pages/Company/Project/Messages/Index.vue  |  3 +-
 .../Pages/Company/Project/Messages/Show.vue   |  2 +-
 .../Company/Project/Partials/ProjectLead.vue  |  2 +-
 .../Company/Project/Partials/ProjectMenu.vue  |  2 +-
 .../Tasks/Partials/ProjectTaskCheckbox.vue    |  3 +-
 .../js/Pages/Company/Project/Tasks/Show.vue   |  2 +-
 resources/js/Pages/Company/Question/Show.vue  |  5 +-
 resources/js/Pages/Company/Skill/Show.vue     |  2 +-
 .../js/Pages/Dashboard/Expenses/Approve.vue   |  6 +--
 .../js/Pages/Dashboard/Expenses/Index.vue     | 12 ++---
 .../Dashboard/HR/Partials/Timesheets.vue      |  2 +-
 .../Pages/Dashboard/HR/Timesheets/Index.vue   |  2 +-
 .../Dashboard/Manager/ApproveExpense.vue      |  4 +-
 .../Manager/Partials/ContractRenewal.vue      |  2 +-
 .../Dashboard/Manager/Partials/Expense.vue    |  3 +-
 .../Partials/OneOnOneWithDirectReport.vue     |  2 +-
 .../Manager/Partials/TimesheetApprovals.vue   |  2 +-
 .../Dashboard/Manager/Timesheets/Index.vue    |  2 +-
 .../Pages/Dashboard/Me/Partials/ECoffee.vue   |  4 +-
 .../Me/Partials/OneOnOneWithManager.vue       |  2 +-
 .../Pages/Dashboard/Me/Partials/Projects.vue  |  2 +-
 .../Pages/Dashboard/Me/Partials/Question.vue  |  5 +-
 .../js/Pages/Dashboard/OneOnOnes/Show.vue     |  6 +--
 .../Dashboard/Partials/DashboardMenu.vue      |  2 +-
 .../Dashboard/Team/Partials/Birthdays.vue     |  2 +-
 .../Dashboard/Team/Partials/RecentShips.vue   |  2 +-
 .../UpcomingHiringDateAnniversaries.vue       |  2 +-
 .../Team/Partials/UpcomingNewHires.vue        |  2 +-
 .../Dashboard/Team/Partials/WorkFromHome.vue  |  2 +-
 .../Dashboard/Team/Partials/Worklogs.vue      |  5 +-
 resources/js/Pages/Employee/ECoffee/Index.vue |  2 +-
 resources/js/Pages/Employee/Index.vue         |  2 +-
 resources/js/Pages/Employee/Logs/Index.vue    |  4 +-
 .../js/Pages/Employee/Partials/Avatar.vue     | 10 ++--
 .../js/Pages/Employee/Partials/ECoffee.vue    |  2 +-
 .../js/Pages/Employee/Partials/Hierarchy.vue  |  4 +-
 .../Employee/Performance/OneOnOnes/Index.vue  |  4 +-
 .../Employee/Performance/OneOnOnes/Show.vue   |  6 +--
 .../Partials/OneOnOneWithManager.vue          |  3 +-
 .../Employee/Performance/Surveys/Show.vue     |  7 +--
 .../Employee/Work/Partials/RecentShips.vue    |  2 +-
 resources/js/Pages/Team/Index.vue             |  2 +-
 .../js/Pages/Team/Partials/Birthdays.vue      |  2 +-
 resources/js/Pages/Team/Partials/Members.vue  |  2 +-
 .../js/Pages/Team/Partials/RecentShips.vue    |  2 +-
 resources/js/Pages/Team/Partials/TeamLead.vue |  2 +-
 resources/js/Pages/Team/Ship/Create.vue       |  2 +-
 resources/js/Pages/Team/Ship/Index.vue        |  2 +-
 resources/js/Pages/Team/Ship/Show.vue         |  2 +-
 resources/js/Shared/Avatar.vue                | 50 ++++++++++++-------
 resources/js/Shared/EditableCheckbox.vue      |  3 +-
 resources/js/Shared/ExpenseStatus.vue         |  9 ++--
 resources/js/Shared/SmallNameAndAvatar.vue    | 44 +++++++++-------
 68 files changed, 141 insertions(+), 158 deletions(-)

diff --git a/resources/js/Pages/Adminland/Audit/Index.vue b/resources/js/Pages/Adminland/Audit/Index.vue
index e477e440e..2e218ee63 100644
--- a/resources/js/Pages/Adminland/Audit/Index.vue
+++ b/resources/js/Pages/Adminland/Audit/Index.vue
@@ -46,7 +46,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar v-if="log.author.avatar" :avatar="log.author.avatar" :size="35" :class="'author-avatar br-100'" />
+              <avatar :member="log.author" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue b/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
index db2cb324c..6a6e10720 100644
--- a/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
+++ b/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
@@ -22,7 +22,7 @@
         v-for="currentEmployee in employees" :key="currentEmployee.id"
         class="flex items-center lh-copy pa3-l pa1 ph0-l bb b--black-10 employee-item"
       >
-        <avatar :avatar="currentEmployee.avatar" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
+        <avatar :member="currentEmployee" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
 
         <div class="pl3 flex-auto">
           <!-- name -->
diff --git a/resources/js/Pages/Adminland/Expense/Partials/Employees.vue b/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
index 9b200dcae..b34f84795 100644
--- a/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
+++ b/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
@@ -73,7 +73,7 @@
     <div v-show="localEmployees.length > 0" class="ba bb-gray mt2 br2 employees-list">
       <div v-for="employee in localEmployees" :key="employee.id" class="pa2 db bb-gray bb bb-gray-hover" data-cy="employees-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="23" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="23" :class="'br-100 absolute avatar'" />
 
           <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
 
diff --git a/resources/js/Pages/Adminland/General/Partials/Stat.vue b/resources/js/Pages/Adminland/General/Partials/Stat.vue
index f5d106b39..a8b47cd39 100644
--- a/resources/js/Pages/Adminland/General/Partials/Stat.vue
+++ b/resources/js/Pages/Adminland/General/Partials/Stat.vue
@@ -23,8 +23,7 @@
         <ul class="dib list pl0">
           <li v-for="admin in information.administrators" :key="admin.id" class="db pb2 admin">
             <small-name-and-avatar
-              :name="admin.name"
-              :avatar="admin.avatar"
+              :member="admin"
               :class="'f4 fw4'"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Adminland/Hardware/Index.vue b/resources/js/Pages/Adminland/Hardware/Index.vue
index d67eb9174..856261cd8 100644
--- a/resources/js/Pages/Adminland/Hardware/Index.vue
+++ b/resources/js/Pages/Adminland/Hardware/Index.vue
@@ -130,8 +130,7 @@
                   <li class="mr3 di-ns db mb0-ns mb2" :data-cy="'hardware-item-user-' + item.id">
                     <small-name-and-avatar
                       v-if="item.employee"
-                      :name="item.employee.name"
-                      :avatar="item.employee.avatar"
+                      :member="item.employee"
                       :class="'gray'"
                       :size="'18px'"
                       :top="'0px'"
diff --git a/resources/js/Pages/Adminland/Hardware/Show.vue b/resources/js/Pages/Adminland/Hardware/Show.vue
index 3c720b8c3..2a7770f37 100644
--- a/resources/js/Pages/Adminland/Hardware/Show.vue
+++ b/resources/js/Pages/Adminland/Hardware/Show.vue
@@ -55,8 +55,7 @@
           <div class="mr3 db mb3" :data-cy="'hardware-item-lend-' + hardware.id">
             <small-name-and-avatar
               v-if="hardware.employee"
-              :name="hardware.employee.name"
-              :avatar="hardware.employee.avatar"
+              :member="hardware.employee"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"
             />
diff --git a/resources/js/Pages/Adminland/Team/Logs.vue b/resources/js/Pages/Adminland/Team/Logs.vue
index e3cf2e4cb..a4e9cd2a1 100644
--- a/resources/js/Pages/Adminland/Team/Logs.vue
+++ b/resources/js/Pages/Adminland/Team/Logs.vue
@@ -49,7 +49,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar v-if="log.author.avatar" :avatar="log.author.avatar" :size="35" :class="'author-avatar br-100'" />
+              <avatar :member="log.author" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Company/Partials/Birthdays.vue b/resources/js/Pages/Company/Partials/Birthdays.vue
index 1f6edf3ac..b6216a3ca 100644
--- a/resources/js/Pages/Company/Partials/Birthdays.vue
+++ b/resources/js/Pages/Company/Partials/Birthdays.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="birthdays.length != 0" class="list pl0 ma0">
         <li v-for="birthday in birthdays" :key="birthday.id" class="mb3 pl3 db relative person">
-          <avatar :avatar="birthday.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="birthday" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="birthday.url" class="mb2">
diff --git a/resources/js/Pages/Company/Partials/Employees.vue b/resources/js/Pages/Company/Partials/Employees.vue
index aef3fe7ab..5cb865ea3 100644
--- a/resources/js/Pages/Company/Partials/Employees.vue
+++ b/resources/js/Pages/Company/Partials/Employees.vue
@@ -28,7 +28,7 @@
         <p>{{ $t('company.employees_total', { count: statistics.number_of_employees }) }}</p>
 
         <div class="flex items-center relative tr employees">
-          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :avatar="employee.avatar" :size="32" :url="employee.url"
+          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :member="employee" :size="32" :url="employee.url"
                   :class="'br-100 small-avatar pointer'"
           />
           <div v-if="employees.number_of_employees_left > 0" class="pl2 f7 more-members relative gray">
diff --git a/resources/js/Pages/Company/Partials/NewHires.vue b/resources/js/Pages/Company/Partials/NewHires.vue
index de32df1c3..d7d667a94 100644
--- a/resources/js/Pages/Company/Partials/NewHires.vue
+++ b/resources/js/Pages/Company/Partials/NewHires.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="hires.length != 0" class="list pl0 ma0">
         <li v-for="hire in hires" :key="hire.id" class="mb3 pl3 db relative person">
-          <avatar :avatar="hire.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="hire" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="hire.url" class="mb2">
diff --git a/resources/js/Pages/Company/Partials/Teams.vue b/resources/js/Pages/Company/Partials/Teams.vue
index 54051b16f..0b04716ae 100644
--- a/resources/js/Pages/Company/Partials/Teams.vue
+++ b/resources/js/Pages/Company/Partials/Teams.vue
@@ -30,7 +30,7 @@
           <inertia-link :href="team.url" class="ma0">{{ team.name }}</inertia-link>
           <div class="flex items-center">
             <div class="di">
-              <avatar v-for="employee in team.employees" :key="employee.id" :url="employee.url" :avatar="employee.avatar" :size="32"
+              <avatar v-for="employee in team.employees" :key="employee.id" :member="employee" :size="32"
                       :class="'br-100 small-avatar pointer'"
               />
             </div>
diff --git a/resources/js/Pages/Company/Project/Create.vue b/resources/js/Pages/Company/Project/Create.vue
index 71aa0e4a6..65549376e 100644
--- a/resources/js/Pages/Company/Project/Create.vue
+++ b/resources/js/Pages/Company/Project/Create.vue
@@ -136,7 +136,7 @@
             <div v-if="form.projectLead" class="mb3 mt2 bt bb-gray pt3">
               <p class="mt0 db fw4 lh-copy f6 mb1">Lead by</p>
               <span class="ba bb-gray br3 pa2 pl3 db relative team-member">
-                <avatar :avatar="form.projectLead.avatar" :size="23" :class="'br-100 absolute avatar'" />
+                <avatar :member="form.projectLead" :size="23" :class="'br-100 absolute avatar'" />
 
                 {{ form.projectLead.name }}
 
diff --git a/resources/js/Pages/Company/Project/Decisions/Index.vue b/resources/js/Pages/Company/Project/Decisions/Index.vue
index f18392c78..ab4e49f93 100644
--- a/resources/js/Pages/Company/Project/Decisions/Index.vue
+++ b/resources/js/Pages/Company/Project/Decisions/Index.vue
@@ -139,7 +139,7 @@
             <div v-show="form.employees.length > 0" class="ba bb-gray mb3 mt4">
               <div v-for="employee in form.employees" :key="employee.id" class="pa2 db bb-gray bb" data-cy="members-list">
                 <span class="pl3 db relative deciders">
-                  <avatar :avatar="employee.avatar" :size="22" :class="'br-100 absolute avatar'" />
+                  <avatar :member="employee" :size="22" :class="'br-100 absolute avatar'" />
 
                   {{ employee.name }}
 
@@ -186,8 +186,7 @@
                   <ul class="list pl0">
                     <li v-for="decider in decision.deciders" :key="decider.id" class="di mr2">
                       <small-name-and-avatar
-                        :name="decider.name"
-                        :avatar="decider.avatar"
+                        :member="decider"
                         :class="'f4 fw4'"
                         :top="'0px'"
                         :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Company/Project/Files/Index.vue b/resources/js/Pages/Company/Project/Files/Index.vue
index 552723fc0..a065cb1b8 100644
--- a/resources/js/Pages/Company/Project/Files/Index.vue
+++ b/resources/js/Pages/Company/Project/Files/Index.vue
@@ -85,8 +85,7 @@
                 <span>
                   <small-name-and-avatar
                     v-if="file.uploader.name"
-                    :name="file.uploader.name"
-                    :avatar="file.uploader.avatar"
+                    :member="file.uploader"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'0px'"
diff --git a/resources/js/Pages/Company/Project/Members/Index.vue b/resources/js/Pages/Company/Project/Members/Index.vue
index 85fddf4f2..5ecdc15d3 100644
--- a/resources/js/Pages/Company/Project/Members/Index.vue
+++ b/resources/js/Pages/Company/Project/Members/Index.vue
@@ -172,7 +172,7 @@
                 <li v-for="member in localMembers" :key="member.id" :data-cy="'member-' + member.id" class="pa3 bb bb-gray flex items-center">
                   <!-- avatar -->
                   <div class="mr3">
-                    <avatar :avatar="member.avatar" :size="64" :class="'br-100'" />
+                    <avatar :member="member" :size="64" :class="'br-100'" />
                   </div>
 
                   <!-- name + information -->
diff --git a/resources/js/Pages/Company/Project/Messages/Index.vue b/resources/js/Pages/Company/Project/Messages/Index.vue
index 7eb05cc05..03e95f0c4 100644
--- a/resources/js/Pages/Company/Project/Messages/Index.vue
+++ b/resources/js/Pages/Company/Project/Messages/Index.vue
@@ -74,8 +74,7 @@
 
               <div v-if="message.author" class="author tr">
                 <small-name-and-avatar
-                  :name="message.author.name"
-                  :avatar="message.author.avatar"
+                  :member="message.author"
                   :class="'f4 fw4'"
                   :top="'0px'"
                   :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Company/Project/Messages/Show.vue b/resources/js/Pages/Company/Project/Messages/Show.vue
index 3335828e4..5e921fb23 100644
--- a/resources/js/Pages/Company/Project/Messages/Show.vue
+++ b/resources/js/Pages/Company/Project/Messages/Show.vue
@@ -76,7 +76,7 @@
 
           <div v-if="message.author" class="flex mb4">
             <div class="mr3">
-              <avatar :avatar="message.author.avatar" :size="64" :class="'br-100'" />
+              <avatar :member="message.author" :size="64" :class="'br-100'" />
             </div>
 
             <div>
diff --git a/resources/js/Pages/Company/Project/Partials/ProjectLead.vue b/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
index e7af094c8..366272a75 100644
--- a/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
+++ b/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
@@ -34,7 +34,7 @@
     <template v-if="localProject.project_lead">
       <div class="lh-copy ma0">
         <span class="db project-lead relative">
-          <avatar :avatar="localProject.project_lead.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="localProject.project_lead" :size="35" :class="'br-100 absolute avatar'" />
           <inertia-link :href="'/' + $page.props.auth.company.id + '/employees/' + localProject.project_lead.id" class="mb2" data-cy="current-project-lead">
             {{ localProject.project_lead.name }}
           </inertia-link>
diff --git a/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue b/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
index 02e27292e..79e0261be 100644
--- a/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
+++ b/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
@@ -35,7 +35,7 @@
       <div v-if="project.members.length > 0">
         <p class="mt0 mb2 f7 gray">Project members</p>
         <div class="flex items-center relative tr">
-          <avatar v-for="member in project.members" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+          <avatar v-for="member in project.members" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
           <div v-if="project.other_members_counter > 0" class="pl2 f7 more-members relative gray">
             {{ $t('project.menu_other_member', { count: project.other_members_counter }) }}
           </div>
diff --git a/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue b/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
index 88b2c7f8a..cdb2d10d0 100644
--- a/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
+++ b/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
@@ -105,8 +105,7 @@ input[type=checkbox] {
 
           <small-name-and-avatar
             v-if="assignee"
-            :name="assignee.name"
-            :avatar="assignee.avatar"
+            :member="assignee"
             :class="'gray'"
             :size="'15px'"
             :font-size="'f7'"
diff --git a/resources/js/Pages/Company/Project/Tasks/Show.vue b/resources/js/Pages/Company/Project/Tasks/Show.vue
index 1afb16f28..b3e1b0a83 100644
--- a/resources/js/Pages/Company/Project/Tasks/Show.vue
+++ b/resources/js/Pages/Company/Project/Tasks/Show.vue
@@ -233,7 +233,7 @@ input[type=checkbox] {
           <!-- information about the author -->
           <div v-if="localTask.author" class="flex mb4">
             <div class="mr2">
-              <avatar :avatar="localTask.author.avatar" :size="35" :class="'br-100'" />
+              <avatar :member="localTask.author" :size="35" :class="'br-100'" />
             </div>
 
             <div>
diff --git a/resources/js/Pages/Company/Question/Show.vue b/resources/js/Pages/Company/Question/Show.vue
index 55ce4adcb..477af8afa 100644
--- a/resources/js/Pages/Company/Question/Show.vue
+++ b/resources/js/Pages/Company/Question/Show.vue
@@ -53,10 +53,7 @@
 
           <div v-for="answer in answers" :key="answer.id" class="bb-gray relative answer-entry" :data-cy="'answer-content-' + answer.id">
             <!-- avatar -->
-            <small-name-and-avatar
-              :name="answer.employee.name"
-              :avatar="answer.employee.avatar"
-            />
+            <small-name-and-avatar :member="answer.employee" />
 
             <!-- content of the answer -->
             <div class="lh-copy content mt2 br3" v-html="answer.body">
diff --git a/resources/js/Pages/Company/Skill/Show.vue b/resources/js/Pages/Company/Skill/Show.vue
index 6b013336f..f099bcfb7 100644
--- a/resources/js/Pages/Company/Skill/Show.vue
+++ b/resources/js/Pages/Company/Skill/Show.vue
@@ -115,7 +115,7 @@
         <!-- list of employees with this skill -->
         <ul class="list pl0 mb0" data-cy="list-of-employees">
           <li v-for="employee in employees" :key="employee.id" :data-cy="'employee-' + employee.id" class="relative ba bb-gray bb-gray-hover pa3 br3 flex items-center employee">
-            <avatar :avatar="employee.avatar" :size="64" :class="'avatar br-100'" />
+            <avatar :member="employee" :size="64" :class="'avatar br-100'" />
 
             <div class="ml3 mw-100">
               <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
diff --git a/resources/js/Pages/Dashboard/Expenses/Approve.vue b/resources/js/Pages/Dashboard/Expenses/Approve.vue
index a7c95eee6..6d5a3d5db 100644
--- a/resources/js/Pages/Dashboard/Expenses/Approve.vue
+++ b/resources/js/Pages/Dashboard/Expenses/Approve.vue
@@ -128,8 +128,7 @@
               <span>
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :font-size="'f5'"
                   :size="'18px'"
                   :top="'0px'"
@@ -165,8 +164,7 @@
               <span>
                 <small-name-and-avatar
                   v-if="expense.manager.id"
-                  :name="expense.manager.name"
-                  :avatar="expense.manager.avatar"
+                  :member="expense.manager"
                   :class="'gray'"
                   :font-size="'f5'"
                   :size="'18px'"
diff --git a/resources/js/Pages/Dashboard/Expenses/Index.vue b/resources/js/Pages/Dashboard/Expenses/Index.vue
index 210d6279a..459613888 100644
--- a/resources/js/Pages/Dashboard/Expenses/Index.vue
+++ b/resources/js/Pages/Dashboard/Expenses/Index.vue
@@ -63,8 +63,7 @@
               <div class="mb3">
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :class="'gray'"
                   :size="'18px'"
                   :top="'0px'"
@@ -120,8 +119,7 @@
                 <p class="ma0 mb2 f6 gray">{{ $t('dashboard.accounting_expense_managers_submitted_by') }}</p>
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :size="'18px'"
                   :top="'1px'"
                   :margin-between-name-avatar="'25px'"
@@ -135,8 +133,7 @@
                 <small-name-and-avatar
                   v-for="manager in expense.managers"
                   :key="manager.id"
-                  :name="manager.name"
-                  :avatar="manager.avatar"
+                  :member="manager"
                   :class="'mr2'"
                   :size="'18px'"
                   :top="'1px'"
@@ -208,8 +205,7 @@
                 <div class="dtc-ns db mb3 mb0-ns">
                   <small-name-and-avatar
                     v-if="expense.employee.id"
-                    :name="expense.employee.name"
-                    :avatar="expense.employee.avatar"
+                    :member="expense.employee"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'1px'"
diff --git a/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue b/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
index a15831d59..a2979198d 100644
--- a/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
+++ b/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
@@ -56,7 +56,7 @@
           <!-- avatars -->
           <div v-if="data.number_of_timesheets > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in data.employees" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in data.employees" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
             </div>
           </div>
         </div>
diff --git a/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue b/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
index 3d15a93c4..9efc4e790 100644
--- a/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
+++ b/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
@@ -78,7 +78,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="directReport.avatar" :size="64" :class="'br-100 absolute avatar'" />
+                  <avatar :member="directReport" :size="64" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue b/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
index 911675cfd..1328b6b48 100644
--- a/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
+++ b/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
@@ -123,9 +123,7 @@
               <span class="di-ns db mb0-ns mb2 gray">{{ $t('dashboard.manager_expense_detail_employee_section') }}</span>
               <span>
                 <small-name-and-avatar
-                  v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :font-size="'f5'"
                   :size="'18px'"
                   :top="'0px'"
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue b/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
index 3d1225521..1c8e369cf 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue b/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
index e7bd936da..312b144f8 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
@@ -55,8 +55,7 @@
             <div class="mb3">
               <small-name-and-avatar
                 v-if="expense.employee.id"
-                :name="expense.employee.name"
-                :avatar="expense.employee.avatar"
+                :member="expense.employee"
                 :class="'gray'"
                 :size="'18px'"
                 :top="'0px'"
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue b/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
index 2c0ba519c..58fb30c2f 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue b/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
index c9dd6012b..e0e414e83 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
@@ -46,7 +46,7 @@
           <!-- avatars -->
           <div v-if="timesheetsStats.employees.length > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
             </div>
           </div>
         </div>
diff --git a/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue b/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
index 7550456dc..f7f6334d6 100644
--- a/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
+++ b/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
@@ -79,7 +79,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+                  <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue b/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
index 90c3e64c8..ddfa33eab 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
@@ -46,7 +46,7 @@
       <!-- avatars -->
       <div class="absolute-ns avatars tc">
         <img class="avatar br-100" loading="lazy" src="/img/streamline-icon-coffee-idea-sparking@140x140.png" alt="avatar" />
-        <avatar :avatar="localeCoffee.other_employee.avatar" :size="55" :class="'avatar br-100'" />
+        <avatar :member="localeCoffee.other_employee" :size="55" :class="'avatar br-100'" />
       </div>
     </div>
 
@@ -58,7 +58,7 @@
       <!-- avatars -->
       <div class="absolute-ns avatars tc">
         <img class="avatar br-100" loading="lazy" src="/img/streamline-icon-coffee-idea-sparking@140x140.png" alt="avatar" />
-        <avatar :avatar="localeCoffee.other_employee.avatar" :size="55" :class="'avatar br-100'" />
+        <avatar :member="localeCoffee.other_employee" :size="55" :class="'avatar br-100'" />
       </div>
     </div>
   </div>
diff --git a/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue b/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
index 6dce23b25..5207a4fa8 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :avatar="manager.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="manager" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="manager.url" class="mb2">{{ manager.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ manager.position }}
diff --git a/resources/js/Pages/Dashboard/Me/Partials/Projects.vue b/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
index 2b11bc79a..6cb20afa6 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
@@ -42,7 +42,7 @@
 
         <!-- project members -->
         <div class="flex items-center relative tr">
-          <avatar v-for="member in project.preview_members" :key="member.id" :avatar="member.avatar" :url="member.url" :size="32"
+          <avatar v-for="member in project.preview_members" :key="member.id" :member="member" :size="32"
                   :class="'br-100 small-avatar'"
           />
           <div v-if="project.remaining_members_count > 0" class="pl2 f7 more-members relative gray">
diff --git a/resources/js/Pages/Dashboard/Me/Partials/Question.vue b/resources/js/Pages/Dashboard/Me/Partials/Question.vue
index 08342bf9b..427ec43fb 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/Question.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/Question.vue
@@ -75,10 +75,7 @@
 
             <div v-for="answer in answers" :key="answer.id" class="bb-gray relative answer-entry" :data-cy="'answer-content-' + answer.id">
               <!-- avatar -->
-              <small-name-and-avatar
-                :name="answer.employee.name"
-                :avatar="answer.employee.avatar"
-              />
+              <small-name-and-avatar :member="answer.employee" />
 
               <!-- actions (only for the employee) -->
               <span v-if="employee.id == answer.employee.id && idToUpdate != answer.id && !editMode" class="absolute top-0 right-0">
diff --git a/resources/js/Pages/Dashboard/OneOnOnes/Show.vue b/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
index 3bf9fa1e7..1e54a0543 100644
--- a/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
+++ b/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
@@ -66,8 +66,7 @@
             <li data-cy="employee-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.employee.id"
-                :name="entry.employee.name"
-                :avatar="entry.employee.avatar"
+                :member="entry.employee"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
@@ -79,8 +78,7 @@
             <li data-cy="manager-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.manager.id"
-                :name="entry.manager.name"
-                :avatar="entry.manager.avatar"
+                :member="entry.manager"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue b/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
index f1f643263..9818037c0 100644
--- a/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
+++ b/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
@@ -14,7 +14,7 @@
   <div class="cf mw7 center br3 mt5 mb5">
     <!-- employee information -->
     <div class="flex items-center mb5">
-      <avatar :avatar="employee.avatar" :size="55" :class="'pointer avatar br-100 mr4'" />
+      <avatar :member="employee" :size="55" :class="'pointer avatar br-100 mr4'" />
 
       <div>
         <h2 class="fw3 mt0 mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue b/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
index c474642f5..34dd5a271 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
@@ -31,7 +31,7 @@
       <!-- all birthdays -->
       <div v-for="employee in birthdays" :key="employee.id" class="pa3 fl w-third-l w-100" data-cy="birthdays-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue b/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
index aa6c97c22..b0f6ace3e 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
@@ -26,7 +26,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'ship-list-item-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :avatar="employee.avatar" :url="employee.url" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :member="employee" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue b/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
index 52d79b739..90a0eadb0 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
@@ -25,7 +25,7 @@
     <div class="cf mw7 center br3 mb3 bg-white box">
       <div v-for="employee in hiringDateAnniversaries" :key="employee.id" class="pa3 w-100" data-cy="new-hires-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue b/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
index 042142e1d..d433e9f16 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
@@ -25,7 +25,7 @@
     <div class="cf mw7 center br3 mb3 bg-white box">
       <div v-for="employee in newHires" :key="employee.id" class="pa3 w-100" data-cy="new-hires-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue b/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
index e480c5e03..719d98182 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
@@ -31,7 +31,7 @@
       <!-- all people working from homes -->
       <div v-for="employee in workFromHomes" :key="employee.id" class="pa3 fl w-third-l w-100" data-cy="work-from-home-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :url="employee.url" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue b/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
index 4d97a33f3..818138cfe 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
@@ -98,10 +98,7 @@
 
         <!-- list of worklogs -->
         <div v-for="worklogEntry in updatedWorklogEntries" :key="worklogEntry.id" class="worklog-entry bb-gray">
-          <small-name-and-avatar
-            :name="worklogEntry.name"
-            :avatar="worklogEntry.avatar"
-          />
+          <small-name-and-avatar :member="worklogEntry" />
           <div class="lh-copy content mt2 br3" v-html="worklogEntry.content">
           </div>
         </div>
diff --git a/resources/js/Pages/Employee/ECoffee/Index.vue b/resources/js/Pages/Employee/ECoffee/Index.vue
index cdadc624d..8ebbf1abd 100644
--- a/resources/js/Pages/Employee/ECoffee/Index.vue
+++ b/resources/js/Pages/Employee/ECoffee/Index.vue
@@ -43,7 +43,7 @@
         <ul v-if="eCoffees.length > 0" class="list pl0 ma0">
           <li v-for="ecoffee in eCoffees" :key="ecoffee.id" class="pa3 bb bb-gray bb-gray-hover flex items-center justify-between ecoffee-item" :data-cy="'ecoffee-title-' + ecoffee.id">
             <div class="mb1 relative">
-              <avatar :avatar="ecoffee.with_employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="ecoffee.with_employee" :size="35" :class="'br-100 absolute avatar'" />
 
               <span class="employee-name db">
                 <inertia-link :href="ecoffee.with_employee.url" class="mb2">{{ ecoffee.with_employee.name }}</inertia-link>
diff --git a/resources/js/Pages/Employee/Index.vue b/resources/js/Pages/Employee/Index.vue
index f62445d0f..b72621969 100644
--- a/resources/js/Pages/Employee/Index.vue
+++ b/resources/js/Pages/Employee/Index.vue
@@ -34,7 +34,7 @@
               v-for="employee in employees" :key="employee.id"
               class="flex lh-copy pa3-l pa1 ph0-l pv0-ns pv2 bb b--black-10 employee-item"
             >
-              <avatar :avatar="employee.avatar" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
+              <avatar :member="employee" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
 
               <div class="pl3">
                 <!-- name -->
diff --git a/resources/js/Pages/Employee/Logs/Index.vue b/resources/js/Pages/Employee/Logs/Index.vue
index d99b58003..f063758eb 100644
--- a/resources/js/Pages/Employee/Logs/Index.vue
+++ b/resources/js/Pages/Employee/Logs/Index.vue
@@ -44,7 +44,7 @@
       <div class="mw7 center br3 mb5 bg-white box relative z-1">
         <div class="relative pt5">
           <!-- AVATAR -->
-          <avatar :avatar="employee.avatar" :size="80" :class="'avatar absolute br-100 db center'" />
+          <avatar :member="employee" :size="80" :class="'avatar absolute br-100 db center'" />
 
           <h2 class="pa3 tc normal mb4">
             {{ $t('employee.audit_log_title') }}
@@ -53,7 +53,7 @@
           <ul class="list pl0 mt0 mb0 center" data-cy="logs-list">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar :avatar="log.author.avatar" :size="34" :class="'author-avatar br-100'" />
+              <avatar :member="log.author" :size="34" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Employee/Partials/Avatar.vue b/resources/js/Pages/Employee/Partials/Avatar.vue
index 76d770668..0a28c4b23 100644
--- a/resources/js/Pages/Employee/Partials/Avatar.vue
+++ b/resources/js/Pages/Employee/Partials/Avatar.vue
@@ -19,7 +19,7 @@
                 @success="onSuccess"
                 @error="onError"
     >
-      <the-avatar :avatar="localAvatar" :size="300" />
+      <the-avatar :member="localMember" :size="300" />
     </uploadcare>
   </div>
 </template>
@@ -37,7 +37,7 @@ export default {
   props: {
     employee: {
       type: Object,
-      default: null,
+      default: () => {},
     },
     permissions: {
       type: Object,
@@ -51,7 +51,7 @@ export default {
 
   data() {
     return {
-      localAvatar: null,
+      localMember: {},
       form: {
         uuid: null,
         name: null,
@@ -67,7 +67,7 @@ export default {
   },
 
   mounted() {
-    this.localAvatar = this.employee.avatar;
+    this.localMember = this.employee;
 
     if (localStorage.success) {
       this.flash(localStorage.success, 'success');
@@ -97,7 +97,7 @@ export default {
 
       axios.put(`/${this.$page.props.auth.company.id}/employees/${this.employee.id}/avatar/update`, this.form)
         .then(response => {
-          this.localAvatar = response.data.avatar;
+          this.localMember = { avatar: response.data.avatar };
         })
         .catch(error => {
           this.loadingState = null;
diff --git a/resources/js/Pages/Employee/Partials/ECoffee.vue b/resources/js/Pages/Employee/Partials/ECoffee.vue
index 77206470a..d4172fa39 100644
--- a/resources/js/Pages/Employee/Partials/ECoffee.vue
+++ b/resources/js/Pages/Employee/Partials/ECoffee.vue
@@ -39,7 +39,7 @@
       <ul v-if="ecoffees.eCoffees.length > 0" data-cy="e-coffee-list" class="list pl0 ma0">
         <li v-for="ecoffee in ecoffees.eCoffees" :key="ecoffee.id" class="pa3 bb bb-gray bb-gray-hover flex items-center justify-between ecoffee-item" :data-cy="'ecoffee-title-' + ecoffee.id">
           <div class="mb1 relative">
-            <avatar :avatar="ecoffee.with_employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+            <avatar :member="ecoffee.with_employee" :size="35" :class="'br-100 absolute avatar'" />
             <span class="employee-name db">
               <inertia-link :href="ecoffee.with_employee.url" class="mb2">{{ ecoffee.with_employee.name }}</inertia-link>
             </span>
diff --git a/resources/js/Pages/Employee/Partials/Hierarchy.vue b/resources/js/Pages/Employee/Partials/Hierarchy.vue
index f7ea10399..e86688599 100644
--- a/resources/js/Pages/Employee/Partials/Hierarchy.vue
+++ b/resources/js/Pages/Employee/Partials/Hierarchy.vue
@@ -151,7 +151,7 @@
           </p>
           <ul class="list mv0">
             <li v-for="manager in localManagersOfEmployee" :key="manager.id" class="mb3 relative bb-gray-hover">
-              <avatar :avatar="manager.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="manager" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="manager.url" class="mb2">
                 {{ manager.name }}
               </inertia-link>
@@ -205,7 +205,7 @@
           <ul class="list mv0">
             <li v-for="directReport in localDirectReports" :key="directReport.id" class="mb3 relative bb-gray-hover">
               <!-- avatar -->
-              <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
 
               <!-- name -->
               <inertia-link :href="directReport.url" class="mb2">
diff --git a/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue b/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
index 79d53496a..b0027f212 100644
--- a/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
+++ b/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
@@ -70,9 +70,7 @@
               <div class="tr">
                 <span class="db f6">with
                   <small-name-and-avatar
-                    :name="entry.manager.name"
-                    :avatar="entry.manager.avatar"
-                    :url="entry.manager.url"
+                    :member="entry.manager"
                     :class="'f4 fw4'"
                     :top="'0px'"
                     :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue b/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
index 811674029..a836eed86 100644
--- a/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
+++ b/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
@@ -72,8 +72,7 @@
             <li data-cy="employee-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.employee.id"
-                :name="entry.employee.name"
-                :avatar="entry.employee.avatar"
+                :member="entry.employee"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
@@ -85,8 +84,7 @@
             <li data-cy="manager-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.manager.id"
-                :name="entry.manager.name"
-                :avatar="entry.manager.avatar"
+                :member="entry.manager"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue b/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
index fd59786b5..382740103 100644
--- a/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
+++ b/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
@@ -32,8 +32,7 @@
             </span>
             <small-name-and-avatar
               v-if="oneOnOne.manager.id"
-              :name="oneOnOne.manager.name"
-              :avatar="oneOnOne.manager.avatar"
+              :member="oneOnOne.manager"
               :class="'gray'"
               :size="'18px'"
               :top="'2px'"
diff --git a/resources/js/Pages/Employee/Performance/Surveys/Show.vue b/resources/js/Pages/Employee/Performance/Surveys/Show.vue
index 2f2e9c94e..1eec0a76b 100644
--- a/resources/js/Pages/Employee/Performance/Surveys/Show.vue
+++ b/resources/js/Pages/Employee/Performance/Surveys/Show.vue
@@ -77,9 +77,7 @@
           <div v-for="currentEmployee in survey.direct_reports" :key="currentEmployee.id" class="mr3 mb3">
             <small-name-and-avatar
               v-if="currentEmployee.id"
-              :name="currentEmployee.name"
-              :avatar="currentEmployee.avatar"
-              :url="currentEmployee.url"
+              :member="currentEmployee"
               :size="'22px'"
               :top="'0px'"
               :margin-between-name-avatar="'28px'"
@@ -94,8 +92,7 @@
             <span v-if="answer.reveal_identity_to_manager" class="db mb2 gray">
               <small-name-and-avatar
                 v-if="answer.employee.id"
-                :name="answer.employee.name"
-                :avatar="answer.employee.avatar"
+                :member="answer.employee"
                 :class="'gray'"
                 :size="'18px'"
                 :top="'0px'"
diff --git a/resources/js/Pages/Employee/Work/Partials/RecentShips.vue b/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
index f795765b9..6347214bd 100644
--- a/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
+++ b/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
@@ -30,7 +30,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'ship-list-item-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :avatar="employee.avatar" :url="employee.url" :size="22" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :member="employee" :size="22" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Index.vue b/resources/js/Pages/Team/Index.vue
index dcb02c7be..bfb8051d8 100644
--- a/resources/js/Pages/Team/Index.vue
+++ b/resources/js/Pages/Team/Index.vue
@@ -32,7 +32,7 @@
           <!-- team members -->
           <ul v-show="team.employees.length > 0" class="list relative pl0 mb0">
             <li v-for="employee in team.employees" :key="employee.id" class="di relative">
-              <avatar :avatar="employee.avatar" :url="employee.url" :size="23" :class="'br-100 mr2'" />
+              <avatar :member="employee" :size="23" :class="'br-100 mr2'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Partials/Birthdays.vue b/resources/js/Pages/Team/Partials/Birthdays.vue
index 7e2cbdf26..3926585bd 100644
--- a/resources/js/Pages/Team/Partials/Birthdays.vue
+++ b/resources/js/Pages/Team/Partials/Birthdays.vue
@@ -29,7 +29,7 @@
       <!-- all birthdays -->
       <div v-for="employee in birthdays" :key="employee.id" class="pa3 fl w-third-l w-100">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Team/Partials/Members.vue b/resources/js/Pages/Team/Partials/Members.vue
index 7ebb8de5b..f9279f670 100644
--- a/resources/js/Pages/Team/Partials/Members.vue
+++ b/resources/js/Pages/Team/Partials/Members.vue
@@ -70,7 +70,7 @@
       <div v-if="listOfEmployees.length > 0" class="pa3 flex flex-wrap employee-list">
         <div v-for="employee in listOfEmployees" :key="employee.id" class="mb4 mr3" data-cy="members-list">
           <span class="pl3 db relative team-member">
-            <avatar :avatar="employee.avatar" :size="35" :class="'br-100 absolute avatar'" />
+            <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
 
             <!-- normal mode -->
             <inertia-link v-show="!editMode" :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Team/Partials/RecentShips.vue b/resources/js/Pages/Team/Partials/RecentShips.vue
index 1167724a2..334952566 100644
--- a/resources/js/Pages/Team/Partials/RecentShips.vue
+++ b/resources/js/Pages/Team/Partials/RecentShips.vue
@@ -32,7 +32,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'recent-ship-list-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :avatar="employee.avatar" :url="employee.url" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :member="employee" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Partials/TeamLead.vue b/resources/js/Pages/Team/Partials/TeamLead.vue
index 820c572a9..a4cf65a64 100644
--- a/resources/js/Pages/Team/Partials/TeamLead.vue
+++ b/resources/js/Pages/Team/Partials/TeamLead.vue
@@ -33,7 +33,7 @@
       <div class="lh-copy ma0 pa3 bb bb-gray">
         <p class="silver f6 ma0 mb1">{{ $t('team.team_lead_label') }}</p>
         <span class="pl3 db team-lead relative">
-          <avatar :avatar="localTeam.team_leader.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :member="localTeam.team_leader" :size="35" :class="'br-100 absolute avatar'" />
           <inertia-link :href="'/' + $page.props.auth.company.id + '/employees/' + localTeam.team_leader.id" class="mb2" data-cy="current-team-lead">
             {{ localTeam.team_leader.name }}
           </inertia-link>
diff --git a/resources/js/Pages/Team/Ship/Create.vue b/resources/js/Pages/Team/Ship/Create.vue
index c96c8b70f..d5d65b6db 100644
--- a/resources/js/Pages/Team/Ship/Create.vue
+++ b/resources/js/Pages/Team/Ship/Create.vue
@@ -125,7 +125,7 @@
             <div v-show="form.employees.length > 0" class="ba bb-gray mb3 mt4">
               <div v-for="employee in form.employees" :key="employee.id" class="pa2 db bb-gray bb" data-cy="members-list">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="employee.avatar" :size="23" :class="'br-100 absolute avatar'" />
+                  <avatar :member="employee" :size="23" :class="'br-100 absolute avatar'" />
 
                   {{ employee.name }}
 
diff --git a/resources/js/Pages/Team/Ship/Index.vue b/resources/js/Pages/Team/Ship/Index.vue
index 61a5480ab..5092ad8d6 100644
--- a/resources/js/Pages/Team/Ship/Index.vue
+++ b/resources/js/Pages/Team/Ship/Index.vue
@@ -47,7 +47,7 @@
             <!-- list of employees -->
             <ul class="list ma0">
               <li v-for="employee in recentShip.employees" :key="employee.id" class="mr1 di">
-                <avatar :avatar="employee.avatar" :class="'ship-avatar br-100 relative mr1 dib-ns dn'" :size="21" :data-cy="'ship-list-' + recentShip.id + '-avatar-' + employee.id" />
+                <avatar :member="employee" :class="'ship-avatar br-100 relative mr1 dib-ns dn'" :size="21" :data-cy="'ship-list-' + recentShip.id + '-avatar-' + employee.id" />
               </li>
             </ul>
           </div>
diff --git a/resources/js/Pages/Team/Ship/Show.vue b/resources/js/Pages/Team/Ship/Show.vue
index e1a6d51b5..298ccea8d 100644
--- a/resources/js/Pages/Team/Ship/Show.vue
+++ b/resources/js/Pages/Team/Ship/Show.vue
@@ -80,7 +80,7 @@
             <ul class="list ma0 pa0">
               <li v-for="employee in ship.employees" :key="employee.id" class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="employee.avatar" :class="'ship-avatar br-100 absolute'" :url="employee.url" :size="44" />
+                  <avatar :member="employee" :class="'ship-avatar br-100 absolute'" :size="44" />
 
                   <div class="name relative">
                     <inertia-link :href="employee.url" class="mb2" :data-cy="'ship-list-employee-' + employee.id">{{ employee.name }}</inertia-link>
diff --git a/resources/js/Shared/Avatar.vue b/resources/js/Shared/Avatar.vue
index fc5666cb0..33bcbbc8e 100644
--- a/resources/js/Shared/Avatar.vue
+++ b/resources/js/Shared/Avatar.vue
@@ -1,29 +1,37 @@
 <style lang="scss" scoped>
-span {
-  margin-left: 29px;
+.link {
+  border-bottom: 0;
+  text-decoration: none;
 }
 </style>
 
+
 <template>
-  <img v-if="avatar" :loading="loading" class="pointer" :src="avatar.normal"
-       :width="size"
-       :height="size"
-       :srcset="avatar.normal + ' 1x,' + avatar.retina + ' 2x'" :alt="alt"
-       @click="navigateTo()"
-  />
+  <div v-if="member && member.avatar" v-bind="$attrs">
+    <inertia-link v-if="url" :href="url" class="link">
+      <img :loading="loading" :width="size" :height="size"
+           :src="member.avatar.normal" :srcset="srcset"
+           :alt="altValue"
+           v-bind="$attrs"
+      />
+    </inertia-link>
+    <img v-else :loading="loading" :width="size" :height="size"
+         :src="member.avatar.normal" :srcset="srcset"
+         :alt="altValue"
+         v-bind="$attrs"
+    />
+  </div>
 </template>
 
 <script>
 export default {
+  inheritAttrs: false,
+
   props: {
-    avatar: {
+    member: {
       type: Object,
       default: null,
     },
-    url: {
-      type: String,
-      default: null,
-    },
     size: {
       type: Number,
       default: 0,
@@ -38,12 +46,16 @@ export default {
     }
   },
 
-  methods: {
-    navigateTo() {
-      if (this.url) {
-        this.$inertia.visit(this.url);
-      }
+  computed: {
+    url() {
+      return typeof this.member.url === 'string' ? this.member.url : '';
     },
-  },
+    srcset() {
+      return this.member.avatar.normal + ' 1x,' + this.member.avatar.retina + ' 2x';
+    },
+    altValue() {
+      return this.member.name ? this.member.name : this.alt;
+    }
+  }
 };
 </script>
diff --git a/resources/js/Shared/EditableCheckbox.vue b/resources/js/Shared/EditableCheckbox.vue
index a66b0ec4f..f6e969442 100644
--- a/resources/js/Shared/EditableCheckbox.vue
+++ b/resources/js/Shared/EditableCheckbox.vue
@@ -91,8 +91,7 @@ input[type=checkbox] {
 
           <small-name-and-avatar
             v-if="assignee"
-            :name="assignee.name"
-            :avatar="assignee.avatar"
+            :member="assignee"
             :class="'gray'"
             :size="'15px'"
             :font-size="'f7'"
diff --git a/resources/js/Shared/ExpenseStatus.vue b/resources/js/Shared/ExpenseStatus.vue
index 4cba43149..11acbdfd7 100644
--- a/resources/js/Shared/ExpenseStatus.vue
+++ b/resources/js/Shared/ExpenseStatus.vue
@@ -107,8 +107,7 @@
           <span>
             <small-name-and-avatar
               v-if="expense.employee.id"
-              :name="expense.employee.name"
-              :avatar="expense.employee.avatar"
+              :member="expense.employee"
               :font-size="'f5'"
               :size="'18px'"
               :top="'0px'"
@@ -144,8 +143,7 @@
           <span>
             <small-name-and-avatar
               v-if="expense.manager.id"
-              :name="expense.manager.name"
-              :avatar="expense.manager.avatar"
+              :member="expense.manager"
               :class="'gray'"
               :font-size="'f5'"
               :size="'18px'"
@@ -197,8 +195,7 @@
           <span>
             <small-name-and-avatar
               v-if="expense.accountant.id"
-              :name="expense.accountant.name"
-              :avatar="expense.accountant.avatar"
+              :member="expense.accountant"
               :class="'gray'"
               :font-size="'f5'"
               :size="'18px'"
diff --git a/resources/js/Shared/SmallNameAndAvatar.vue b/resources/js/Shared/SmallNameAndAvatar.vue
index 4b7488457..2ca3c3835 100644
--- a/resources/js/Shared/SmallNameAndAvatar.vue
+++ b/resources/js/Shared/SmallNameAndAvatar.vue
@@ -5,13 +5,22 @@ span {
 </style>
 
 <template>
-  <div class="relative di">
-    <img loading="lazy" :src="avatar.normal" :srcset="avatar.normal + ' 1x,' + avatar.retina + ' 2x'" class="absolute br-100" alt="avatar"
-         :style="style"
-    />
-    <inertia-link v-if="url" :href="url" :class="fontSize" :style="avatarMarginLeft" v-bind="$attrs">{{ name }}</inertia-link>
+  <div v-if="member" class="relative di">
+    <inertia-link v-if="member.url" :href="member.url"
+                  :class="fontSize" :style="avatarMarginLeft" v-bind="$attrs"
+    >
+      <img v-if="member.avatar" loading="lazy"
+           :src="member.avatar.normal" :srcset="srcset"
+           :alt="altValue"
+           :style="style" class="absolute br-100"
+      />{{ member.name }}
+    </inertia-link>
     <span v-else :class="fontSize" :style="avatarMarginLeft" v-bind="$attrs">
-      {{ name }}
+      <img v-if="member.avatar" loading="lazy"
+           :src="member.avatar.normal" :srcset="srcset"
+           :alt="altValue"
+           :style="style" class="absolute br-100"
+      />{{ member.name }}
     </span>
   </div>
 </template>
@@ -21,11 +30,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    name: {
-      type: String,
-      default: null,
-    },
-    avatar: {
+    member: {
       type: Object,
       default: null,
     },
@@ -33,10 +38,6 @@ export default {
       type: String,
       default: '-2px',
     },
-    url: {
-      type: String,
-      default: null,
-    },
     size: {
       type: String,
       default: '22px',
@@ -48,16 +49,25 @@ export default {
     marginBetweenNameAvatar: {
       type: String,
       default: '29px',
-    }
+    },
+    alt: {
+      type: String,
+      default: 'avatar',
+    },
   },
 
   computed: {
     style: function () {
       return 'top:' + this.top + '; height:' + this.size + '; width:' + this.size + ';';
     },
-
     avatarMarginLeft: function () {
       return 'margin-left:' + this.marginBetweenNameAvatar;
+    },
+    srcset() {
+      return this.member.avatar.normal + ' 1x,' + this.member.avatar.retina + ' 2x';
+    },
+    altValue() {
+      return this.member.name ? this.member.name : this.alt;
     }
   }
 };

From 517f02b4e9d62af65d67bd38bbca9613277580a0 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 11 Apr 2021 22:33:32 +0200
Subject: [PATCH 2/5] add class

---
 resources/js/Shared/Avatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Shared/Avatar.vue b/resources/js/Shared/Avatar.vue
index 33bcbbc8e..482c8eaf1 100644
--- a/resources/js/Shared/Avatar.vue
+++ b/resources/js/Shared/Avatar.vue
@@ -7,7 +7,7 @@
 
 
 <template>
-  <div v-if="member && member.avatar" v-bind="$attrs">
+  <div v-if="member && member.avatar" v-bind="$attrs" class="di">
     <inertia-link v-if="url" :href="url" class="link">
       <img :loading="loading" :width="size" :height="size"
            :src="member.avatar.normal" :srcset="srcset"

From ea0e6028113967953dd4c7a37cf7541e397a67d2 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 23 May 2021 11:20:59 +0200
Subject: [PATCH 3/5] update

---
 resources/js/Pages/Adminland/Audit/Index.vue  |  2 +-
 .../Employee/Partials/EmployeeList.vue        |  2 +-
 .../Adminland/Expense/Partials/Employees.vue  |  2 +-
 resources/js/Pages/Adminland/Team/Logs.vue    |  2 +-
 .../js/Pages/Company/Partials/Birthdays.vue   |  2 +-
 .../js/Pages/Company/Partials/Employees.vue   |  3 ++-
 .../js/Pages/Company/Partials/NewHires.vue    |  2 +-
 resources/js/Pages/Company/Partials/Teams.vue |  3 ++-
 resources/js/Pages/Company/Project/Create.vue |  2 +-
 .../Pages/Company/Project/Decisions/Index.vue |  2 +-
 .../Pages/Company/Project/Members/Index.vue   |  2 +-
 .../Pages/Company/Project/Messages/Show.vue   |  2 +-
 .../Company/Project/Partials/ProjectLead.vue  |  2 +-
 .../Company/Project/Partials/ProjectMenu.vue  |  4 +++-
 .../js/Pages/Company/Project/Tasks/Show.vue   |  2 +-
 resources/js/Pages/Company/Skill/Show.vue     |  2 +-
 .../Dashboard/HR/Partials/Timesheets.vue      |  4 +++-
 .../Pages/Dashboard/HR/Timesheets/Index.vue   |  2 +-
 .../Manager/Partials/ContractRenewal.vue      |  2 +-
 .../Partials/OneOnOneWithDirectReport.vue     |  2 +-
 .../Manager/Partials/TimesheetApprovals.vue   |  4 +++-
 .../Dashboard/Manager/Timesheets/Index.vue    |  2 +-
 .../Pages/Dashboard/Me/Partials/ECoffee.vue   |  4 ++--
 .../Me/Partials/OneOnOneWithManager.vue       |  2 +-
 .../Pages/Dashboard/Me/Partials/Projects.vue  |  3 ++-
 .../Dashboard/Partials/DashboardMenu.vue      |  2 +-
 .../Dashboard/Team/Partials/Birthdays.vue     |  2 +-
 .../Dashboard/Team/Partials/RecentShips.vue   |  2 +-
 .../UpcomingHiringDateAnniversaries.vue       |  2 +-
 .../Team/Partials/UpcomingNewHires.vue        |  2 +-
 .../Dashboard/Team/Partials/WorkFromHome.vue  |  2 +-
 resources/js/Pages/Employee/ECoffee/Index.vue |  2 +-
 resources/js/Pages/Employee/Index.vue         |  2 +-
 resources/js/Pages/Employee/Logs/Index.vue    |  4 ++--
 .../js/Pages/Employee/Partials/ECoffee.vue    |  2 +-
 .../js/Pages/Employee/Partials/Hierarchy.vue  |  4 ++--
 .../Employee/Work/Partials/RecentShips.vue    |  2 +-
 resources/js/Pages/Team/Index.vue             |  2 +-
 .../js/Pages/Team/Partials/Birthdays.vue      |  2 +-
 resources/js/Pages/Team/Partials/Members.vue  |  2 +-
 .../js/Pages/Team/Partials/RecentShips.vue    |  2 +-
 resources/js/Pages/Team/Partials/TeamLead.vue |  2 +-
 resources/js/Pages/Team/Ship/Create.vue       |  2 +-
 resources/js/Pages/Team/Ship/Index.vue        |  2 +-
 resources/js/Pages/Team/Ship/Show.vue         |  2 +-
 resources/js/Shared/Avatar.vue                | 23 +++++++++++--------
 46 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/resources/js/Pages/Adminland/Audit/Index.vue b/resources/js/Pages/Adminland/Audit/Index.vue
index 2e218ee63..4f2a09212 100644
--- a/resources/js/Pages/Adminland/Audit/Index.vue
+++ b/resources/js/Pages/Adminland/Audit/Index.vue
@@ -46,7 +46,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar :member="log.author" :size="35" :class="'author-avatar br-100'" />
+              <avatar :avatar="log.author.avatar" :url="log.author.url" :name="log.author.name" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue b/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
index 5b31248cc..c3c547108 100644
--- a/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
+++ b/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
@@ -33,7 +33,7 @@
         v-for="currentEmployee in employees" :key="currentEmployee.id"
         class="flex items-center lh-copy pa3-l pa1 ph0-l bb b--black-10 employee-item"
       >
-        <avatar :member="currentEmployee" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
+        <avatar :avatar="currentEmployee.avatar" :url="currentEmployee.url" :name="currentEmployee.name" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
 
         <div class="pl3 flex-auto">
           <!-- name -->
diff --git a/resources/js/Pages/Adminland/Expense/Partials/Employees.vue b/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
index b34f84795..f2be880d6 100644
--- a/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
+++ b/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
@@ -73,7 +73,7 @@
     <div v-show="localEmployees.length > 0" class="ba bb-gray mt2 br2 employees-list">
       <div v-for="employee in localEmployees" :key="employee.id" class="pa2 db bb-gray bb bb-gray-hover" data-cy="employees-list">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="23" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="23" :class="'br-100 absolute avatar'" />
 
           <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
 
diff --git a/resources/js/Pages/Adminland/Team/Logs.vue b/resources/js/Pages/Adminland/Team/Logs.vue
index a4e9cd2a1..e5fe50c37 100644
--- a/resources/js/Pages/Adminland/Team/Logs.vue
+++ b/resources/js/Pages/Adminland/Team/Logs.vue
@@ -49,7 +49,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar :member="log.author" :size="35" :class="'author-avatar br-100'" />
+              <avatar :avatar="log.author.avatar" :url="log.author.url" :name="log.author.name" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Company/Partials/Birthdays.vue b/resources/js/Pages/Company/Partials/Birthdays.vue
index b6216a3ca..bfa94c5ab 100644
--- a/resources/js/Pages/Company/Partials/Birthdays.vue
+++ b/resources/js/Pages/Company/Partials/Birthdays.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="birthdays.length != 0" class="list pl0 ma0">
         <li v-for="birthday in birthdays" :key="birthday.id" class="mb3 pl3 db relative person">
-          <avatar :member="birthday" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="birthday.avatar" :url="birthday.url" :name="birthday.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="birthday.url" class="mb2">
diff --git a/resources/js/Pages/Company/Partials/Employees.vue b/resources/js/Pages/Company/Partials/Employees.vue
index 5cb865ea3..f0f236e82 100644
--- a/resources/js/Pages/Company/Partials/Employees.vue
+++ b/resources/js/Pages/Company/Partials/Employees.vue
@@ -28,7 +28,8 @@
         <p>{{ $t('company.employees_total', { count: statistics.number_of_employees }) }}</p>
 
         <div class="flex items-center relative tr employees">
-          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :member="employee" :size="32" :url="employee.url"
+          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :avatar="employee.avatar" :url="employee.url" :name="employee.name"
+                  :size="32"
                   :class="'br-100 small-avatar pointer'"
           />
           <div v-if="employees.number_of_employees_left > 0" class="pl2 f7 more-members relative gray">
diff --git a/resources/js/Pages/Company/Partials/NewHires.vue b/resources/js/Pages/Company/Partials/NewHires.vue
index a92004b7b..0ac506784 100644
--- a/resources/js/Pages/Company/Partials/NewHires.vue
+++ b/resources/js/Pages/Company/Partials/NewHires.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="hires.length != 0" class="list pl0 ma0">
         <li v-for="hire in hires" :key="hire.id" class="mb3 pl3 db relative person">
-          <avatar :member="hire" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="hire.avatar" :url="hire.url" :name="hire.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="hire.url" class="mb2">
diff --git a/resources/js/Pages/Company/Partials/Teams.vue b/resources/js/Pages/Company/Partials/Teams.vue
index 0b04716ae..445245c97 100644
--- a/resources/js/Pages/Company/Partials/Teams.vue
+++ b/resources/js/Pages/Company/Partials/Teams.vue
@@ -30,7 +30,8 @@
           <inertia-link :href="team.url" class="ma0">{{ team.name }}</inertia-link>
           <div class="flex items-center">
             <div class="di">
-              <avatar v-for="employee in team.employees" :key="employee.id" :member="employee" :size="32"
+              <avatar v-for="employee in team.employees" :key="employee.id" :avatar="employee.avatar" :url="employee.url" :name="employee.name"
+                      :size="32"
                       :class="'br-100 small-avatar pointer'"
               />
             </div>
diff --git a/resources/js/Pages/Company/Project/Create.vue b/resources/js/Pages/Company/Project/Create.vue
index 65549376e..50f16df4a 100644
--- a/resources/js/Pages/Company/Project/Create.vue
+++ b/resources/js/Pages/Company/Project/Create.vue
@@ -136,7 +136,7 @@
             <div v-if="form.projectLead" class="mb3 mt2 bt bb-gray pt3">
               <p class="mt0 db fw4 lh-copy f6 mb1">Lead by</p>
               <span class="ba bb-gray br3 pa2 pl3 db relative team-member">
-                <avatar :member="form.projectLead" :size="23" :class="'br-100 absolute avatar'" />
+                <avatar :avatar="form.projectLead.avatar" :url="form.projectLead.url" :name="form.projectLead.name" :size="23" :class="'br-100 absolute avatar'" />
 
                 {{ form.projectLead.name }}
 
diff --git a/resources/js/Pages/Company/Project/Decisions/Index.vue b/resources/js/Pages/Company/Project/Decisions/Index.vue
index ab4e49f93..ac43da6b6 100644
--- a/resources/js/Pages/Company/Project/Decisions/Index.vue
+++ b/resources/js/Pages/Company/Project/Decisions/Index.vue
@@ -139,7 +139,7 @@
             <div v-show="form.employees.length > 0" class="ba bb-gray mb3 mt4">
               <div v-for="employee in form.employees" :key="employee.id" class="pa2 db bb-gray bb" data-cy="members-list">
                 <span class="pl3 db relative deciders">
-                  <avatar :member="employee" :size="22" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="22" :class="'br-100 absolute avatar'" />
 
                   {{ employee.name }}
 
diff --git a/resources/js/Pages/Company/Project/Members/Index.vue b/resources/js/Pages/Company/Project/Members/Index.vue
index 9de038eb7..c49800173 100644
--- a/resources/js/Pages/Company/Project/Members/Index.vue
+++ b/resources/js/Pages/Company/Project/Members/Index.vue
@@ -171,7 +171,7 @@
                 <li v-for="member in localMembers" :key="member.id" :data-cy="'member-' + member.id" class="pa3 bb bb-gray flex items-center">
                   <!-- avatar -->
                   <div class="mr3">
-                    <avatar :member="member" :size="64" :class="'br-100'" />
+                    <avatar :avatar="member.avatar" :url="member.url" :name="member.name" :size="64" :class="'br-100'" />
                   </div>
 
                   <!-- name + information -->
diff --git a/resources/js/Pages/Company/Project/Messages/Show.vue b/resources/js/Pages/Company/Project/Messages/Show.vue
index b120314be..fdc15925c 100644
--- a/resources/js/Pages/Company/Project/Messages/Show.vue
+++ b/resources/js/Pages/Company/Project/Messages/Show.vue
@@ -76,7 +76,7 @@
 
           <div v-if="message.author" class="flex mb4">
             <div class="mr3">
-              <avatar :member="message.author" :size="64" :class="'br-100'" />
+              <avatar :avatar="message.author.avatar" :url="message.author.url" :name="message.author.name" :size="64" :class="'br-100'" />
             </div>
 
             <div>
diff --git a/resources/js/Pages/Company/Project/Partials/ProjectLead.vue b/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
index 366272a75..98c3db45d 100644
--- a/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
+++ b/resources/js/Pages/Company/Project/Partials/ProjectLead.vue
@@ -34,7 +34,7 @@
     <template v-if="localProject.project_lead">
       <div class="lh-copy ma0">
         <span class="db project-lead relative">
-          <avatar :member="localProject.project_lead" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="localProject.project_lead.avatar" :url="localProject.project_lead.url" :name="localProject.project_lead.name" :size="35" :class="'br-100 absolute avatar'" />
           <inertia-link :href="'/' + $page.props.auth.company.id + '/employees/' + localProject.project_lead.id" class="mb2" data-cy="current-project-lead">
             {{ localProject.project_lead.name }}
           </inertia-link>
diff --git a/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue b/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
index 375e9ec40..a57eeda4d 100644
--- a/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
+++ b/resources/js/Pages/Company/Project/Partials/ProjectMenu.vue
@@ -35,7 +35,9 @@
       <div v-if="project.members.length > 0">
         <p class="mt0 mb2 f7 gray">{{ $t('project.menu_members_icons') }}</p>
         <div class="flex items-center relative tr">
-          <avatar v-for="member in project.members" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
+          <avatar v-for="member in project.members" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                  :size="32" :class="'br-100 small-avatar'"
+          />
           <div v-if="project.other_members_counter > 0" class="pl2 f7 more-members relative gray">
             {{ $t('project.menu_other_member', { count: project.other_members_counter }) }}
           </div>
diff --git a/resources/js/Pages/Company/Project/Tasks/Show.vue b/resources/js/Pages/Company/Project/Tasks/Show.vue
index adf0a7d48..ec0f13bb4 100644
--- a/resources/js/Pages/Company/Project/Tasks/Show.vue
+++ b/resources/js/Pages/Company/Project/Tasks/Show.vue
@@ -233,7 +233,7 @@ input[type=checkbox] {
           <!-- information about the author -->
           <div v-if="localTask.author" class="flex mb4">
             <div class="mr2">
-              <avatar :member="localTask.author" :size="35" :class="'br-100'" />
+              <avatar :avatar="localTask.author.avatar" :url="localTask.author.url" :name="localTask.author.name" :size="35" :class="'br-100'" />
             </div>
 
             <div>
diff --git a/resources/js/Pages/Company/Skill/Show.vue b/resources/js/Pages/Company/Skill/Show.vue
index f099bcfb7..317c3e683 100644
--- a/resources/js/Pages/Company/Skill/Show.vue
+++ b/resources/js/Pages/Company/Skill/Show.vue
@@ -115,7 +115,7 @@
         <!-- list of employees with this skill -->
         <ul class="list pl0 mb0" data-cy="list-of-employees">
           <li v-for="employee in employees" :key="employee.id" :data-cy="'employee-' + employee.id" class="relative ba bb-gray bb-gray-hover pa3 br3 flex items-center employee">
-            <avatar :member="employee" :size="64" :class="'avatar br-100'" />
+            <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="64" :class="'avatar br-100'" />
 
             <div class="ml3 mw-100">
               <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
diff --git a/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue b/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
index a2979198d..dd296846e 100644
--- a/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
+++ b/resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue
@@ -56,7 +56,9 @@
           <!-- avatars -->
           <div v-if="data.number_of_timesheets > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in data.employees" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in data.employees" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                      :size="32" :class="'br-100 small-avatar'"
+              />
             </div>
           </div>
         </div>
diff --git a/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue b/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
index 9efc4e790..141e24f00 100644
--- a/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
+++ b/resources/js/Pages/Dashboard/HR/Timesheets/Index.vue
@@ -78,7 +78,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :member="directReport" :size="64" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="64" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue b/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
index 1c8e369cf..226c3b1d5 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue b/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
index 58fb30c2f..cfd25084e 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue b/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
index e0e414e83..612a27ab3 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue
@@ -46,7 +46,9 @@
           <!-- avatars -->
           <div v-if="timesheetsStats.employees.length > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :member="member" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                      :size="32" :class="'br-100 small-avatar'"
+              />
             </div>
           </div>
         </div>
diff --git a/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue b/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
index f7f6334d6..7f41df324 100644
--- a/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
+++ b/resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue
@@ -79,7 +79,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}
diff --git a/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue b/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
index ddfa33eab..48624608b 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/ECoffee.vue
@@ -46,7 +46,7 @@
       <!-- avatars -->
       <div class="absolute-ns avatars tc">
         <img class="avatar br-100" loading="lazy" src="/img/streamline-icon-coffee-idea-sparking@140x140.png" alt="avatar" />
-        <avatar :member="localeCoffee.other_employee" :size="55" :class="'avatar br-100'" />
+        <avatar :avatar="localeCoffee.other_employee.avatar" :url="localeCoffee.other_employee.url" :name="localeCoffee.other_employee.name" :size="55" :class="'avatar br-100'" />
       </div>
     </div>
 
@@ -58,7 +58,7 @@
       <!-- avatars -->
       <div class="absolute-ns avatars tc">
         <img class="avatar br-100" loading="lazy" src="/img/streamline-icon-coffee-idea-sparking@140x140.png" alt="avatar" />
-        <avatar :member="localeCoffee.other_employee" :size="55" :class="'avatar br-100'" />
+        <avatar :avatar="localeCoffee.other_employee.avatar" :url="localeCoffee.other_employee.url" :name="localeCoffee.other_employee.name" :size="55" :class="'avatar br-100'" />
       </div>
     </div>
   </div>
diff --git a/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue b/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
index 5207a4fa8..f27125bfe 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/OneOnOneWithManager.vue
@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :member="manager" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="manager.avatar" :url="manager.url" :name="manager.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="manager.url" class="mb2">{{ manager.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ manager.position }}
diff --git a/resources/js/Pages/Dashboard/Me/Partials/Projects.vue b/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
index 6cb20afa6..3ad41273e 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/Projects.vue
@@ -42,7 +42,8 @@
 
         <!-- project members -->
         <div class="flex items-center relative tr">
-          <avatar v-for="member in project.preview_members" :key="member.id" :member="member" :size="32"
+          <avatar v-for="member in project.preview_members" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                  :size="32"
                   :class="'br-100 small-avatar'"
           />
           <div v-if="project.remaining_members_count > 0" class="pl2 f7 more-members relative gray">
diff --git a/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue b/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
index 9818037c0..ead193ab6 100644
--- a/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
+++ b/resources/js/Pages/Dashboard/Partials/DashboardMenu.vue
@@ -14,7 +14,7 @@
   <div class="cf mw7 center br3 mt5 mb5">
     <!-- employee information -->
     <div class="flex items-center mb5">
-      <avatar :member="employee" :size="55" :class="'pointer avatar br-100 mr4'" />
+      <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="55" :class="'pointer avatar br-100 mr4'" />
 
       <div>
         <h2 class="fw3 mt0 mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue b/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
index 34dd5a271..3e15c41b3 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/Birthdays.vue
@@ -31,7 +31,7 @@
       <!-- all birthdays -->
       <div v-for="employee in birthdays" :key="employee.id" class="pa3 fl w-third-l w-100" data-cy="birthdays-list">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue b/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
index b0f6ace3e..2778ff754 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/RecentShips.vue
@@ -26,7 +26,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'ship-list-item-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :member="employee" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue b/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
index 90a0eadb0..2406d4c43 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/UpcomingHiringDateAnniversaries.vue
@@ -25,7 +25,7 @@
     <div class="cf mw7 center br3 mb3 bg-white box">
       <div v-for="employee in hiringDateAnniversaries" :key="employee.id" class="pa3 w-100" data-cy="new-hires-list">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue b/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
index d433e9f16..95989eed9 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/UpcomingNewHires.vue
@@ -25,7 +25,7 @@
     <div class="cf mw7 center br3 mb3 bg-white box">
       <div v-for="employee in newHires" :key="employee.id" class="pa3 w-100" data-cy="new-hires-list">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue b/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
index 719d98182..3d643a804 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/WorkFromHome.vue
@@ -31,7 +31,7 @@
       <!-- all people working from homes -->
       <div v-for="employee in workFromHomes" :key="employee.id" class="pa3 fl w-third-l w-100" data-cy="work-from-home-list">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Employee/ECoffee/Index.vue b/resources/js/Pages/Employee/ECoffee/Index.vue
index 8ebbf1abd..2b72b548f 100644
--- a/resources/js/Pages/Employee/ECoffee/Index.vue
+++ b/resources/js/Pages/Employee/ECoffee/Index.vue
@@ -43,7 +43,7 @@
         <ul v-if="eCoffees.length > 0" class="list pl0 ma0">
           <li v-for="ecoffee in eCoffees" :key="ecoffee.id" class="pa3 bb bb-gray bb-gray-hover flex items-center justify-between ecoffee-item" :data-cy="'ecoffee-title-' + ecoffee.id">
             <div class="mb1 relative">
-              <avatar :member="ecoffee.with_employee" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="ecoffee.with_employee.avatar" :url="ecoffee.with_employee.url" :name="ecoffee.with_employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
               <span class="employee-name db">
                 <inertia-link :href="ecoffee.with_employee.url" class="mb2">{{ ecoffee.with_employee.name }}</inertia-link>
diff --git a/resources/js/Pages/Employee/Index.vue b/resources/js/Pages/Employee/Index.vue
index b72621969..5873ba16d 100644
--- a/resources/js/Pages/Employee/Index.vue
+++ b/resources/js/Pages/Employee/Index.vue
@@ -34,7 +34,7 @@
               v-for="employee in employees" :key="employee.id"
               class="flex lh-copy pa3-l pa1 ph0-l pv0-ns pv2 bb b--black-10 employee-item"
             >
-              <avatar :member="employee" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
+              <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
 
               <div class="pl3">
                 <!-- name -->
diff --git a/resources/js/Pages/Employee/Logs/Index.vue b/resources/js/Pages/Employee/Logs/Index.vue
index f063758eb..218aa9b5a 100644
--- a/resources/js/Pages/Employee/Logs/Index.vue
+++ b/resources/js/Pages/Employee/Logs/Index.vue
@@ -44,7 +44,7 @@
       <div class="mw7 center br3 mb5 bg-white box relative z-1">
         <div class="relative pt5">
           <!-- AVATAR -->
-          <avatar :member="employee" :size="80" :class="'avatar absolute br-100 db center'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="80" :class="'avatar absolute br-100 db center'" />
 
           <h2 class="pa3 tc normal mb4">
             {{ $t('employee.audit_log_title') }}
@@ -53,7 +53,7 @@
           <ul class="list pl0 mt0 mb0 center" data-cy="logs-list">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar :member="log.author" :size="34" :class="'author-avatar br-100'" />
+              <avatar :avatar="log.author.avatar" :url="log.author.url" :name="log.author.name" :size="34" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">
diff --git a/resources/js/Pages/Employee/Partials/ECoffee.vue b/resources/js/Pages/Employee/Partials/ECoffee.vue
index d4172fa39..b80165b01 100644
--- a/resources/js/Pages/Employee/Partials/ECoffee.vue
+++ b/resources/js/Pages/Employee/Partials/ECoffee.vue
@@ -39,7 +39,7 @@
       <ul v-if="ecoffees.eCoffees.length > 0" data-cy="e-coffee-list" class="list pl0 ma0">
         <li v-for="ecoffee in ecoffees.eCoffees" :key="ecoffee.id" class="pa3 bb bb-gray bb-gray-hover flex items-center justify-between ecoffee-item" :data-cy="'ecoffee-title-' + ecoffee.id">
           <div class="mb1 relative">
-            <avatar :member="ecoffee.with_employee" :size="35" :class="'br-100 absolute avatar'" />
+            <avatar :avatar="ecoffee.with_employee.avatar" :url="ecoffee.with_employee.url" :name="ecoffee.with_employee.name" :size="35" :class="'br-100 absolute avatar'" />
             <span class="employee-name db">
               <inertia-link :href="ecoffee.with_employee.url" class="mb2">{{ ecoffee.with_employee.name }}</inertia-link>
             </span>
diff --git a/resources/js/Pages/Employee/Partials/Hierarchy.vue b/resources/js/Pages/Employee/Partials/Hierarchy.vue
index e86688599..2d0c44cb7 100644
--- a/resources/js/Pages/Employee/Partials/Hierarchy.vue
+++ b/resources/js/Pages/Employee/Partials/Hierarchy.vue
@@ -151,7 +151,7 @@
           </p>
           <ul class="list mv0">
             <li v-for="manager in localManagersOfEmployee" :key="manager.id" class="mb3 relative bb-gray-hover">
-              <avatar :member="manager" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="manager.avatar" :url="manager.url" :name="manager.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="manager.url" class="mb2">
                 {{ manager.name }}
               </inertia-link>
@@ -205,7 +205,7 @@
           <ul class="list mv0">
             <li v-for="directReport in localDirectReports" :key="directReport.id" class="mb3 relative bb-gray-hover">
               <!-- avatar -->
-              <avatar :member="directReport" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
 
               <!-- name -->
               <inertia-link :href="directReport.url" class="mb2">
diff --git a/resources/js/Pages/Employee/Work/Partials/RecentShips.vue b/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
index 6347214bd..33698bf29 100644
--- a/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
+++ b/resources/js/Pages/Employee/Work/Partials/RecentShips.vue
@@ -30,7 +30,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'ship-list-item-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :member="employee" :size="22" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="22" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Index.vue b/resources/js/Pages/Team/Index.vue
index bfb8051d8..4cd689a6c 100644
--- a/resources/js/Pages/Team/Index.vue
+++ b/resources/js/Pages/Team/Index.vue
@@ -32,7 +32,7 @@
           <!-- team members -->
           <ul v-show="team.employees.length > 0" class="list relative pl0 mb0">
             <li v-for="employee in team.employees" :key="employee.id" class="di relative">
-              <avatar :member="employee" :size="23" :class="'br-100 mr2'" />
+              <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="23" :class="'br-100 mr2'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Partials/Birthdays.vue b/resources/js/Pages/Team/Partials/Birthdays.vue
index 307658a53..84563d8d5 100644
--- a/resources/js/Pages/Team/Partials/Birthdays.vue
+++ b/resources/js/Pages/Team/Partials/Birthdays.vue
@@ -31,7 +31,7 @@
       <!-- all birthdays -->
       <div v-for="employee in birthdays" :key="employee.id" class="pa3 fl w-third-l w-100">
         <span class="pl3 db relative team-member">
-          <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Team/Partials/Members.vue b/resources/js/Pages/Team/Partials/Members.vue
index c5c0f9879..e9b24c621 100644
--- a/resources/js/Pages/Team/Partials/Members.vue
+++ b/resources/js/Pages/Team/Partials/Members.vue
@@ -72,7 +72,7 @@
       <div v-if="listOfEmployees.length > 0" class="pa3 flex flex-wrap employee-list">
         <div v-for="employee in listOfEmployees" :key="employee.id" class="mb4 mr3" data-cy="members-list">
           <span class="pl3 db relative team-member">
-            <avatar :member="employee" :size="35" :class="'br-100 absolute avatar'" />
+            <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="35" :class="'br-100 absolute avatar'" />
 
             <!-- normal mode -->
             <inertia-link v-show="!editMode" :href="employee.url" class="mb2">
diff --git a/resources/js/Pages/Team/Partials/RecentShips.vue b/resources/js/Pages/Team/Partials/RecentShips.vue
index 563d8fc44..297f0ce40 100644
--- a/resources/js/Pages/Team/Partials/RecentShips.vue
+++ b/resources/js/Pages/Team/Partials/RecentShips.vue
@@ -34,7 +34,7 @@
           <inertia-link :href="ship.url" class="ma0 pa0" :data-cy="'recent-ship-list-' + ship.id">{{ ship.title }}</inertia-link>
           <ul class="list ma0">
             <li v-for="employee in ship.employees" :key="employee.id" class="mr1 di">
-              <avatar :member="employee" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
+              <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="17" :class="'br-100 relative mr1 dib-ns dn'" />
             </li>
           </ul>
         </div>
diff --git a/resources/js/Pages/Team/Partials/TeamLead.vue b/resources/js/Pages/Team/Partials/TeamLead.vue
index a4cf65a64..743489a50 100644
--- a/resources/js/Pages/Team/Partials/TeamLead.vue
+++ b/resources/js/Pages/Team/Partials/TeamLead.vue
@@ -33,7 +33,7 @@
       <div class="lh-copy ma0 pa3 bb bb-gray">
         <p class="silver f6 ma0 mb1">{{ $t('team.team_lead_label') }}</p>
         <span class="pl3 db team-lead relative">
-          <avatar :member="localTeam.team_leader" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="localTeam.team_leader.avatar" :url="localTeam.team_leader.url" :name="localTeam.team_leader.name" :size="35" :class="'br-100 absolute avatar'" />
           <inertia-link :href="'/' + $page.props.auth.company.id + '/employees/' + localTeam.team_leader.id" class="mb2" data-cy="current-team-lead">
             {{ localTeam.team_leader.name }}
           </inertia-link>
diff --git a/resources/js/Pages/Team/Ship/Create.vue b/resources/js/Pages/Team/Ship/Create.vue
index d5d65b6db..2fc6bbe6d 100644
--- a/resources/js/Pages/Team/Ship/Create.vue
+++ b/resources/js/Pages/Team/Ship/Create.vue
@@ -125,7 +125,7 @@
             <div v-show="form.employees.length > 0" class="ba bb-gray mb3 mt4">
               <div v-for="employee in form.employees" :key="employee.id" class="pa2 db bb-gray bb" data-cy="members-list">
                 <span class="pl3 db relative team-member">
-                  <avatar :member="employee" :size="23" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="23" :class="'br-100 absolute avatar'" />
 
                   {{ employee.name }}
 
diff --git a/resources/js/Pages/Team/Ship/Index.vue b/resources/js/Pages/Team/Ship/Index.vue
index 6f89a1ce6..8b19e2c08 100644
--- a/resources/js/Pages/Team/Ship/Index.vue
+++ b/resources/js/Pages/Team/Ship/Index.vue
@@ -41,7 +41,7 @@
             <!-- list of employees -->
             <ul class="list ma0">
               <li v-for="employee in recentShip.employees" :key="employee.id" class="mr1 di">
-                <avatar :member="employee" :class="'br-100 relative mr1 dib-ns dn'" :size="23" />
+                <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :class="'br-100 relative mr1 dib-ns dn'" :size="23" />
               </li>
             </ul>
           </div>
diff --git a/resources/js/Pages/Team/Ship/Show.vue b/resources/js/Pages/Team/Ship/Show.vue
index 08c969dd2..a7859e787 100644
--- a/resources/js/Pages/Team/Ship/Show.vue
+++ b/resources/js/Pages/Team/Ship/Show.vue
@@ -80,7 +80,7 @@
             <ul class="list ma0 pa0">
               <li v-for="employee in ship.employees" :key="employee.id" class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :member="employee" :class="'ship-avatar br-100 absolute'" :size="44" />
+                  <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :class="'ship-avatar br-100 absolute'" :size="44" />
 
                   <div class="name relative">
                     <inertia-link :href="employee.url" class="mb2" :data-cy="'ship-list-employee-' + employee.id">{{ employee.name }}</inertia-link>
diff --git a/resources/js/Shared/Avatar.vue b/resources/js/Shared/Avatar.vue
index 482c8eaf1..bff729500 100644
--- a/resources/js/Shared/Avatar.vue
+++ b/resources/js/Shared/Avatar.vue
@@ -7,16 +7,16 @@
 
 
 <template>
-  <div v-if="member && member.avatar" v-bind="$attrs" class="di">
+  <div v-if="avatar" v-bind="$attrs" class="di">
     <inertia-link v-if="url" :href="url" class="link">
       <img :loading="loading" :width="size" :height="size"
-           :src="member.avatar.normal" :srcset="srcset"
+           :src="avatar.normal" :srcset="srcset"
            :alt="altValue"
            v-bind="$attrs"
       />
     </inertia-link>
     <img v-else :loading="loading" :width="size" :height="size"
-         :src="member.avatar.normal" :srcset="srcset"
+         :src="avatar.normal" :srcset="srcset"
          :alt="altValue"
          v-bind="$attrs"
     />
@@ -28,10 +28,18 @@ export default {
   inheritAttrs: false,
 
   props: {
-    member: {
+    avatar: {
       type: Object,
       default: null,
     },
+    url: {
+      type: String,
+      default: null,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
     size: {
       type: Number,
       default: 0,
@@ -47,14 +55,11 @@ export default {
   },
 
   computed: {
-    url() {
-      return typeof this.member.url === 'string' ? this.member.url : '';
-    },
     srcset() {
-      return this.member.avatar.normal + ' 1x,' + this.member.avatar.retina + ' 2x';
+      return this.avatar.normal + ' 1x,' + this.avatar.retina + ' 2x';
     },
     altValue() {
-      return this.member.name ? this.member.name : this.alt;
+      return this.name ? this.name : this.alt;
     }
   }
 };

From 46026127215d45db44eac992148770f8202fcc90 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 23 May 2021 11:36:43 +0200
Subject: [PATCH 4/5] update

---
 .../Pages/Adminland/General/Partials/Stat.vue |  4 ++-
 .../js/Pages/Adminland/Hardware/Index.vue     |  4 ++-
 .../js/Pages/Adminland/Hardware/Show.vue      |  4 ++-
 .../Pages/Company/Project/Decisions/Index.vue |  4 ++-
 .../js/Pages/Company/Project/Files/Index.vue  |  4 ++-
 .../Pages/Company/Project/Messages/Index.vue  |  4 ++-
 .../Tasks/Partials/ProjectTaskCheckbox.vue    |  4 ++-
 resources/js/Pages/Company/Question/Show.vue  |  5 +++-
 .../js/Pages/Dashboard/Expenses/Approve.vue   |  4 ++-
 .../js/Pages/Dashboard/Expenses/Index.vue     |  4 ++-
 .../Dashboard/Manager/ApproveExpense.vue      |  4 ++-
 .../Dashboard/Manager/Partials/Expense.vue    |  4 ++-
 .../Pages/Dashboard/Me/Partials/Question.vue  |  5 +++-
 .../js/Pages/Dashboard/OneOnOnes/Show.vue     |  4 ++-
 .../Dashboard/Team/Partials/Worklogs.vue      |  5 +++-
 .../Employee/Performance/OneOnOnes/Index.vue  |  4 ++-
 .../Employee/Performance/OneOnOnes/Show.vue   |  4 ++-
 .../Partials/OneOnOneWithManager.vue          |  4 ++-
 .../Employee/Performance/Surveys/Show.vue     |  4 ++-
 resources/js/Shared/EditableCheckbox.vue      |  4 ++-
 resources/js/Shared/ExpenseStatus.vue         |  4 ++-
 resources/js/Shared/SmallNameAndAvatar.vue    | 30 ++++++++++++-------
 22 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/resources/js/Pages/Adminland/General/Partials/Stat.vue b/resources/js/Pages/Adminland/General/Partials/Stat.vue
index a8b47cd39..943514559 100644
--- a/resources/js/Pages/Adminland/General/Partials/Stat.vue
+++ b/resources/js/Pages/Adminland/General/Partials/Stat.vue
@@ -23,7 +23,9 @@
         <ul class="dib list pl0">
           <li v-for="admin in information.administrators" :key="admin.id" class="db pb2 admin">
             <small-name-and-avatar
-              :member="admin"
+              :avatar="admin.avatar"
+              :url="admin.url"
+              :name="admin.name"
               :class="'f4 fw4'"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Adminland/Hardware/Index.vue b/resources/js/Pages/Adminland/Hardware/Index.vue
index 856261cd8..fce5511cd 100644
--- a/resources/js/Pages/Adminland/Hardware/Index.vue
+++ b/resources/js/Pages/Adminland/Hardware/Index.vue
@@ -130,7 +130,9 @@
                   <li class="mr3 di-ns db mb0-ns mb2" :data-cy="'hardware-item-user-' + item.id">
                     <small-name-and-avatar
                       v-if="item.employee"
-                      :member="item.employee"
+                      :avatar="item.employee.avatar"
+                      :url="item.employee.url"
+                      :name="item.employee.name"
                       :class="'gray'"
                       :size="'18px'"
                       :top="'0px'"
diff --git a/resources/js/Pages/Adminland/Hardware/Show.vue b/resources/js/Pages/Adminland/Hardware/Show.vue
index 2a7770f37..1b1e74eb8 100644
--- a/resources/js/Pages/Adminland/Hardware/Show.vue
+++ b/resources/js/Pages/Adminland/Hardware/Show.vue
@@ -55,7 +55,9 @@
           <div class="mr3 db mb3" :data-cy="'hardware-item-lend-' + hardware.id">
             <small-name-and-avatar
               v-if="hardware.employee"
-              :member="hardware.employee"
+              :avatar="hardware.employee.avatar"
+              :url="hardware.employee.url"
+              :name="hardware.employee.name"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"
             />
diff --git a/resources/js/Pages/Company/Project/Decisions/Index.vue b/resources/js/Pages/Company/Project/Decisions/Index.vue
index ac43da6b6..d9825a3c5 100644
--- a/resources/js/Pages/Company/Project/Decisions/Index.vue
+++ b/resources/js/Pages/Company/Project/Decisions/Index.vue
@@ -186,7 +186,9 @@
                   <ul class="list pl0">
                     <li v-for="decider in decision.deciders" :key="decider.id" class="di mr2">
                       <small-name-and-avatar
-                        :member="decider"
+                        :avatar="decider.avatar"
+                        :url="decider.url"
+                        :name="decider.name"
                         :class="'f4 fw4'"
                         :top="'0px'"
                         :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Company/Project/Files/Index.vue b/resources/js/Pages/Company/Project/Files/Index.vue
index a065cb1b8..b818b61db 100644
--- a/resources/js/Pages/Company/Project/Files/Index.vue
+++ b/resources/js/Pages/Company/Project/Files/Index.vue
@@ -85,7 +85,9 @@
                 <span>
                   <small-name-and-avatar
                     v-if="file.uploader.name"
-                    :member="file.uploader"
+                    :avatar="file.uploader.avatar"
+                    :url="file.uploader.url"
+                    :name="file.uploader.name"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'0px'"
diff --git a/resources/js/Pages/Company/Project/Messages/Index.vue b/resources/js/Pages/Company/Project/Messages/Index.vue
index 03e95f0c4..fd2b31529 100644
--- a/resources/js/Pages/Company/Project/Messages/Index.vue
+++ b/resources/js/Pages/Company/Project/Messages/Index.vue
@@ -74,7 +74,9 @@
 
               <div v-if="message.author" class="author tr">
                 <small-name-and-avatar
-                  :member="message.author"
+                  :avatar="message.author.avatar"
+                  :url="message.author.url"
+                  :name="message.author.name"
                   :class="'f4 fw4'"
                   :top="'0px'"
                   :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue b/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
index cdb2d10d0..39a8bd721 100644
--- a/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
+++ b/resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue
@@ -105,7 +105,9 @@ input[type=checkbox] {
 
           <small-name-and-avatar
             v-if="assignee"
-            :member="assignee"
+            :avatar="assignee.avatar"
+            :url="assignee.url"
+            :name="assignee.name"
             :class="'gray'"
             :size="'15px'"
             :font-size="'f7'"
diff --git a/resources/js/Pages/Company/Question/Show.vue b/resources/js/Pages/Company/Question/Show.vue
index 477af8afa..6b3415f45 100644
--- a/resources/js/Pages/Company/Question/Show.vue
+++ b/resources/js/Pages/Company/Question/Show.vue
@@ -53,7 +53,10 @@
 
           <div v-for="answer in answers" :key="answer.id" class="bb-gray relative answer-entry" :data-cy="'answer-content-' + answer.id">
             <!-- avatar -->
-            <small-name-and-avatar :member="answer.employee" />
+            <small-name-and-avatar :avatar="answer.employee.avatar"
+                                   :url="answer.employee.url"
+                                   :name="answer.employee.name"
+            />
 
             <!-- content of the answer -->
             <div class="lh-copy content mt2 br3" v-html="answer.body">
diff --git a/resources/js/Pages/Dashboard/Expenses/Approve.vue b/resources/js/Pages/Dashboard/Expenses/Approve.vue
index 6d5a3d5db..1c85af3ee 100644
--- a/resources/js/Pages/Dashboard/Expenses/Approve.vue
+++ b/resources/js/Pages/Dashboard/Expenses/Approve.vue
@@ -164,7 +164,9 @@
               <span>
                 <small-name-and-avatar
                   v-if="expense.manager.id"
-                  :member="expense.manager"
+                  :avatar="expense.manager.avatar"
+                  :url="expense.manager.url"
+                  :name="expense.manager.name"
                   :class="'gray'"
                   :font-size="'f5'"
                   :size="'18px'"
diff --git a/resources/js/Pages/Dashboard/Expenses/Index.vue b/resources/js/Pages/Dashboard/Expenses/Index.vue
index 459613888..9ebd1fc2a 100644
--- a/resources/js/Pages/Dashboard/Expenses/Index.vue
+++ b/resources/js/Pages/Dashboard/Expenses/Index.vue
@@ -205,7 +205,9 @@
                 <div class="dtc-ns db mb3 mb0-ns">
                   <small-name-and-avatar
                     v-if="expense.employee.id"
-                    :member="expense.employee"
+                    :avatar="expense.employee.avatar"
+                    :url="expense.employee.url"
+                    :name="expense.employee.name"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'1px'"
diff --git a/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue b/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
index 1328b6b48..f7d934383 100644
--- a/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
+++ b/resources/js/Pages/Dashboard/Manager/ApproveExpense.vue
@@ -123,7 +123,9 @@
               <span class="di-ns db mb0-ns mb2 gray">{{ $t('dashboard.manager_expense_detail_employee_section') }}</span>
               <span>
                 <small-name-and-avatar
-                  :member="expense.employee"
+                  :avatar="expense.employee.avatar"
+                  :url="expense.employee.url"
+                  :name="expense.employee.name"
                   :font-size="'f5'"
                   :size="'18px'"
                   :top="'0px'"
diff --git a/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue b/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
index 312b144f8..45f7f966c 100644
--- a/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
+++ b/resources/js/Pages/Dashboard/Manager/Partials/Expense.vue
@@ -55,7 +55,9 @@
             <div class="mb3">
               <small-name-and-avatar
                 v-if="expense.employee.id"
-                :member="expense.employee"
+                :avatar="expense.employee.avatar"
+                :url="expense.employee.url"
+                :name="expense.employee.name"
                 :class="'gray'"
                 :size="'18px'"
                 :top="'0px'"
diff --git a/resources/js/Pages/Dashboard/Me/Partials/Question.vue b/resources/js/Pages/Dashboard/Me/Partials/Question.vue
index 34f812909..6f619208e 100644
--- a/resources/js/Pages/Dashboard/Me/Partials/Question.vue
+++ b/resources/js/Pages/Dashboard/Me/Partials/Question.vue
@@ -77,7 +77,10 @@
 
             <div v-for="answer in answers" :key="answer.id" class="bb-gray relative answer-entry" :data-cy="'answer-content-' + answer.id">
               <!-- avatar -->
-              <small-name-and-avatar :member="answer.employee" />
+              <small-name-and-avatar :avatar="answer.employee.avatar"
+                                     :url="answer.employee.url"
+                                     :name="answer.employee.name"
+              />
 
               <!-- actions (only for the employee) -->
               <span v-if="employee.id == answer.employee.id && idToUpdate != answer.id && !editMode" class="absolute top-0 right-0">
diff --git a/resources/js/Pages/Dashboard/OneOnOnes/Show.vue b/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
index 1e54a0543..65c93954b 100644
--- a/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
+++ b/resources/js/Pages/Dashboard/OneOnOnes/Show.vue
@@ -78,7 +78,9 @@
             <li data-cy="manager-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.manager.id"
-                :member="entry.manager"
+                :avatar="entry.manager.avatar"
+                :url="entry.manager.url"
+                :name="entry.manager.name"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue b/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
index b0fd085be..4b2023e37 100644
--- a/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
+++ b/resources/js/Pages/Dashboard/Team/Partials/Worklogs.vue
@@ -101,7 +101,10 @@
 
         <!-- list of worklogs -->
         <div v-for="worklogEntry in updatedWorklogEntries" :key="worklogEntry.id" class="worklog-entry bb-gray">
-          <small-name-and-avatar :member="worklogEntry" />
+          <small-name-and-avatar :avatar="worklogEntry.avatar"
+                                 :url="worklogEntry.url"
+                                 :name="worklogEntry.name"
+          />
           <div class="lh-copy content mt2 br3" v-html="worklogEntry.content">
           </div>
         </div>
diff --git a/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue b/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
index b0027f212..efd06ba0a 100644
--- a/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
+++ b/resources/js/Pages/Employee/Performance/OneOnOnes/Index.vue
@@ -70,7 +70,9 @@
               <div class="tr">
                 <span class="db f6">with
                   <small-name-and-avatar
-                    :member="entry.manager"
+                    :avatar="entry.manager.avatar"
+                    :url="entry.manager.url"
+                    :name="entry.manager.name"
                     :class="'f4 fw4'"
                     :top="'0px'"
                     :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue b/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
index a836eed86..e040bf62a 100644
--- a/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
+++ b/resources/js/Pages/Employee/Performance/OneOnOnes/Show.vue
@@ -84,7 +84,9 @@
             <li data-cy="manager-name" class="di tl">
               <small-name-and-avatar
                 v-if="entry.manager.id"
-                :member="entry.manager"
+                :avatar="entry.manager.avatar"
+                :url="entry.manager.url"
+                :name="entry.manager.name"
                 :size="'22px'"
                 :top="'0px'"
                 :margin-between-name-avatar="'29px'"
diff --git a/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue b/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
index 382740103..035da82cc 100644
--- a/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
+++ b/resources/js/Pages/Employee/Performance/Partials/OneOnOneWithManager.vue
@@ -32,7 +32,9 @@
             </span>
             <small-name-and-avatar
               v-if="oneOnOne.manager.id"
-              :member="oneOnOne.manager"
+              :avatar="oneOnOne.manager.avatar"
+              :url="oneOnOne.manager.url"
+              :name="oneOnOne.manager.name"
               :class="'gray'"
               :size="'18px'"
               :top="'2px'"
diff --git a/resources/js/Pages/Employee/Performance/Surveys/Show.vue b/resources/js/Pages/Employee/Performance/Surveys/Show.vue
index 1eec0a76b..ec2a1af0c 100644
--- a/resources/js/Pages/Employee/Performance/Surveys/Show.vue
+++ b/resources/js/Pages/Employee/Performance/Surveys/Show.vue
@@ -92,7 +92,9 @@
             <span v-if="answer.reveal_identity_to_manager" class="db mb2 gray">
               <small-name-and-avatar
                 v-if="answer.employee.id"
-                :member="answer.employee"
+                :avatar="answer.employee.avatar"
+                :url="answer.employee.url"
+                :name="answer.employee.name"
                 :class="'gray'"
                 :size="'18px'"
                 :top="'0px'"
diff --git a/resources/js/Shared/EditableCheckbox.vue b/resources/js/Shared/EditableCheckbox.vue
index f6e969442..0e9b734f5 100644
--- a/resources/js/Shared/EditableCheckbox.vue
+++ b/resources/js/Shared/EditableCheckbox.vue
@@ -91,7 +91,9 @@ input[type=checkbox] {
 
           <small-name-and-avatar
             v-if="assignee"
-            :member="assignee"
+            :avatar="assignee.avatar"
+            :url="assignee.url"
+            :name="assignee.name"
             :class="'gray'"
             :size="'15px'"
             :font-size="'f7'"
diff --git a/resources/js/Shared/ExpenseStatus.vue b/resources/js/Shared/ExpenseStatus.vue
index 11acbdfd7..50375be05 100644
--- a/resources/js/Shared/ExpenseStatus.vue
+++ b/resources/js/Shared/ExpenseStatus.vue
@@ -195,7 +195,9 @@
           <span>
             <small-name-and-avatar
               v-if="expense.accountant.id"
-              :member="expense.accountant"
+              :avatar="expense.accountant.avatar"
+              :url="expense.accountant.url"
+              :name="expense.accountant.name"
               :class="'gray'"
               :font-size="'f5'"
               :size="'18px'"
diff --git a/resources/js/Shared/SmallNameAndAvatar.vue b/resources/js/Shared/SmallNameAndAvatar.vue
index ae6a1bba1..196f2b338 100644
--- a/resources/js/Shared/SmallNameAndAvatar.vue
+++ b/resources/js/Shared/SmallNameAndAvatar.vue
@@ -9,22 +9,22 @@ a {
 </style>
 
 <template>
-  <div v-if="member" class="relative di">
-    <inertia-link v-if="member.url" :href="member.url"
+  <div v-if="avatar || url" class="relative di">
+    <inertia-link v-if="url" :href="url"
                   :class="fontSize" :style="avatarMarginLeft" v-bind="$attrs"
     >
-      <img v-if="member.avatar" loading="lazy"
-           :src="member.avatar.normal" :srcset="srcset"
+      <img v-if="avatar" loading="lazy"
+           :src="avatar.normal" :srcset="srcset"
            :alt="altValue"
            :style="style" class="absolute br-100"
-      />{{ member.name }}
+      />{{ name }}
     </inertia-link>
     <span v-else :class="fontSize" :style="avatarMarginLeft" v-bind="$attrs">
-      <img v-if="member.avatar" loading="lazy"
-           :src="member.avatar.normal" :srcset="srcset"
+      <img v-if="avatar" loading="lazy"
+           :src="avatar.normal" :srcset="srcset"
            :alt="altValue"
            :style="style" class="absolute br-100"
-      />{{ member.name }}
+      />{{ name }}
     </span>
   </div>
 </template>
@@ -34,10 +34,18 @@ export default {
   inheritAttrs: false,
 
   props: {
-    member: {
+    avatar: {
       type: Object,
       default: null,
     },
+    url: {
+      type: String,
+      default: null,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
     top: {
       type: String,
       default: '-2px',
@@ -68,10 +76,10 @@ export default {
       return 'margin-left:' + this.marginBetweenNameAvatar;
     },
     srcset() {
-      return this.member.avatar.normal + ' 1x,' + this.member.avatar.retina + ' 2x';
+      return this.avatar.normal + ' 1x,' + this.avatar.retina + ' 2x';
     },
     altValue() {
-      return this.member.name ? this.member.name : this.alt;
+      return this.name ? this.name : this.alt;
     }
   }
 };

From 461368760d398297ca496b5991ea9446787141b4 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 23 May 2021 16:54:52 +0200
Subject: [PATCH 5/5] fixmem

---
 resources/js/Pages/Employee/Partials/Avatar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/Employee/Partials/Avatar.vue b/resources/js/Pages/Employee/Partials/Avatar.vue
index 0a28c4b23..8bd77eb5b 100644
--- a/resources/js/Pages/Employee/Partials/Avatar.vue
+++ b/resources/js/Pages/Employee/Partials/Avatar.vue
@@ -19,7 +19,7 @@
                 @success="onSuccess"
                 @error="onError"
     >
-      <the-avatar :member="localMember" :size="300" />
+      <the-avatar :avatar="localAvatar" :size="300" />
     </uploadcare>
   </div>
 </template>
@@ -51,7 +51,7 @@ export default {
 
   data() {
     return {
-      localMember: {},
+      localAvatar: null,
       form: {
         uuid: null,
         name: null,
@@ -67,7 +67,7 @@ export default {
   },
 
   mounted() {
-    this.localMember = this.employee;
+    this.localAvatar = this.employee.avatar;
 
     if (localStorage.success) {
       this.flash(localStorage.success, 'success');
@@ -97,7 +97,7 @@ export default {
 
       axios.put(`/${this.$page.props.auth.company.id}/employees/${this.employee.id}/avatar/update`, this.form)
         .then(response => {
-          this.localMember = { avatar: response.data.avatar };
+          this.localAvatar = response.data.avatar;
         })
         .catch(error => {
           this.loadingState = null;