Сделала HeaderChargePerson

src/assets/icons/table.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.8125 16.25H9.0625M2.8125 16.25H10M2.8125 16.25V16.25C2.29473 16.25 1.875 15.8303 1.875 15.3125V15.3125M1.875 15.3125V14.0625M1.875 15.3125V13.125M18.125 15.3125V14.0625M18.125 15.3125V15.3125C18.125 15.8303 17.7053 16.25 17.1875 16.25V16.25M18.125 15.3125V13.125M17.1875 16.25H10.9375M17.1875 16.25H10M18.125 4.6875V5.9375M18.125 4.6875V6.875M18.125 4.6875V4.6875C18.125 4.16973 17.7053 3.75 17.1875 3.75V3.75H2.8125V3.75C2.29473 3.75 1.875 4.16973 1.875 4.6875V4.6875M1.875 4.6875V5.9375M1.875 4.6875V6.875M2.8125 6.875H9.0625M2.8125 6.875H10M2.8125 6.875H1.875M17.1875 6.875H10.9375M17.1875 6.875H18.125M17.1875 6.875H10M1.875 9.0625V7.8125M10 9.0625V7.8125M18.125 9.0625V7.8125M1.875 12.1875V10.9375M10 12.1875V10.9375M10 15.3125V14.0625M18.125 12.1875V10.9375M18.125 10H17.1875H10.9375H10M18.125 10V6.875M18.125 10V13.125M10 16.25V13.125M10 6.875V10M10 10H9.0625H2.8125H1.875M10 10V13.125M10 13.125H10.9375H17.1875H18.125M10 13.125H9.0625H2.8125H1.875M1.875 13.125V10M1.875 10V6.875" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/white-star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.56712 2.91557C9.72724 2.53059 10.2726 2.53059 10.4327 2.91557L12.2044 7.17511C12.2719 7.33741 12.4245 7.4483 12.5997 7.46235L17.1983 7.83101C17.6139 7.86433 17.7824 8.38301 17.4658 8.65426L13.9621 11.6555C13.8287 11.7698 13.7704 11.9492 13.8111 12.1202L14.8815 16.6076C14.9783 17.0132 14.5371 17.3338 14.1813 17.1164L10.2443 14.7117C10.0943 14.6201 9.90559 14.6201 9.75558 14.7117L5.81859 17.1164C5.46277 17.3338 5.02155 17.0132 5.1183 16.6076L6.18871 12.1202C6.22949 11.9492 6.17119 11.7698 6.0377 11.6555L2.53409 8.65426C2.21744 8.38301 2.38596 7.86433 2.80158 7.83101L7.40012 7.46235C7.57534 7.4483 7.72797 7.33741 7.79547 7.17511L9.56712 2.91557Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/HeaderChargePerson.vue

@@ -0,0 +1,88 @@
+<template lang="pug">
+  .change-person-wrapper(:class="openOptions")
+    .header.flex.items-center.pl-1.pr-2
+      img.img-wrapper.mr-1(:src="info.avatarSrc" alt="Charge person avatar")
+      span.font-bold.text-sm.mr-6px {{ info.name }}
+      .dot.mr-4
+      .icon-wrapper.icon-down-arrow.flex.items-center.justify-center.text-xxs(@click="changeState")
+    .options.flex.flex-col.p-4.mt-1.font-medium.text-sm.gap-y-3(v-if="isOpen")
+      .flex.items-center
+        img.options-icon-wrapper.mr-2(src="@/assets/icons/white-star.svg")
+        span Снять с ведения
+      .flex.items-center
+        img.options-icon-wrapper.mr-2(src="@/assets/icons/table.svg")
+        span Перейти в таблицу
+      .flex.items-center
+        .options-icon-wrapper.flex.items-center.justify-center.icon-user-data.text-base.mr-2(src="@/assets/icons/table.svg")
+        span Данные 
+</template>
+
+<script>
+export default {
+  name: "HeaderChargePerson",
+  props: {
+    info: Object,
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  computed: {
+    openOptions() {
+      return {
+        "open-options": this.isOpen,
+      };
+    },
+  },
+  methods: {
+    changeState() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.change-person-wrapper
+  color: var(--default-white)
+
+.open-options
+  .header
+    border-radius: 24px 24px 4px 4px
+    color: var(-time-indicator-color)
+  .icon-wrapper
+    transform: rotate(180deg)
+
+.header
+  width: 310px
+  height: 42px
+  position: relative
+  background-color: var(--btn-blue-color)
+  border-radius: 40px
+  position: relative
+
+.img-wrapper
+  width: 34px
+  height: 34px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.dot
+  width: 6px
+  height: 6px
+  border-radius: 50%
+  background-color: var(--btn-red-color)
+
+.options
+  position: absolute
+  background-color: var(--btn-blue-color)
+  width: 100%
+  border-radius: 4px 4px 24px 24px
+
+.options-icon-wrapper
+  width: 20px
+  height: 20px
+</style>

src/components/HeaderInputs.vue

@@ -41,11 +41,11 @@ export default {
 
 .header-inputs-wrapper
   background-color: var(--default-white)
+  border-radius: 4px
+  border: 1px solid var(--border-light-grey-color)
 
 .select-container
-  border-radius: 4px 0 0 4px
+  border-right: 1px solid var(--border-light-grey-color)
-  border: 1px solid var(--border-light-grey-color)
-  border-right: none
 
 .icon-wrapper
   width: 24px
@@ -74,8 +74,6 @@ export default {
   box-shadow: var(--default-shadow)
 
 .search-input
-  border-radius: 0 4px 4px 0
-  border: 1px solid var(--border-light-grey-color)
   &::placeholder
     color: var(--font-grey-color)
 

src/components/TheHeader.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
-  .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
+  .header-wrapper.flex.justify-center.box-border.py-2.px-6
-    .flex.items-center.box-border.cursor-pointer
+    .flex.items-center.box-border.cursor-pointer.mr-auto
-      img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
+      img.logo-img.mr-16(src="@/assets/images/logo.svg" alt="Logo")
-    .flex.flex-row
+      header-inputs
-      header-inputs.mr-10
+    .charge-person-container
+      header-charge-person(:info="chargePersonInfo")
+    .flex.ml-auto
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
-      .flex.flex-row.justify-centflexer.items-center
+      .flex.justify-centflexer.items-center
         img.avatar-img.mr-2(:src="avatarSrc")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
@@ -14,13 +16,19 @@
 
 <script>
 import img from "@/assets/images/avatar.svg";
+import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
+import HeaderChargePerson from "./HeaderChargePerson.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs },
+  components: { HeaderInputs, HeaderChargePerson },
   data() {
     return {
       avatarSrc: img,
+      chargePersonInfo: {
+        avatarSrc: chargePersonAvatar,
+        name: "Гордеев Николай Степанович",
+      },
     };
   },
 };
@@ -55,4 +63,7 @@ export default {
 .avatar-img
   width: 32px
   height: 32px
+
+.charge-person-container
+  position: absolute
 </style>