diff --git a/src/assets/icons/table.svg b/src/assets/icons/table.svg
new file mode 100644
index 0000000..3f6e357
--- /dev/null
+++ b/src/assets/icons/table.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/white-star.svg b/src/assets/icons/white-star.svg
new file mode 100644
index 0000000..55bd478
--- /dev/null
+++ b/src/assets/icons/white-star.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/charge-person-avatar.svg b/src/assets/images/charge-person-avatar.svg
new file mode 100644
index 0000000..81d9c8d
--- /dev/null
+++ b/src/assets/images/charge-person-avatar.svg
@@ -0,0 +1,16 @@
+
diff --git a/src/components/HeaderAddClientButton.vue b/src/components/HeaderAddClientButton.vue
new file mode 100644
index 0000000..0b21dbf
--- /dev/null
+++ b/src/components/HeaderAddClientButton.vue
@@ -0,0 +1,28 @@
+
+ button.add-client-button.flex.items-center.justify-center
+ .icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
+ .icon-wrapper.flex.items-center.justify-center.icon-person.text-m
+
+
+
+
+
diff --git a/src/components/HeaderChargePerson.vue b/src/components/HeaderChargePerson.vue
new file mode 100644
index 0000000..06e6f3e
--- /dev/null
+++ b/src/components/HeaderChargePerson.vue
@@ -0,0 +1,88 @@
+
+ .change-person-wrapper(:class="openOptions")
+ .header.flex.items-center.pl-1.pr-2
+ img.img-wrapper.mr-2(: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 Данные
+
+
+
+
+
diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index 3a1a968..d39e0b1 100644
--- a/src/components/HeaderInputs.vue
+++ b/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: 1px solid var(--border-light-grey-color)
- border-right: none
+ border-right: 1px solid var(--border-light-grey-color)
.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)
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 4e7ea63..949cecd 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,12 +1,15 @@
- .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
- .flex.items-center.box-border.cursor-pointer
- img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
- .flex.flex-row
- header-inputs.mr-10
+ .header-wrapper.flex.justify-center.box-border.py-2.px-6
+ .flex.items-center.box-border.cursor-pointer.mr-auto
+ img.logo-img.mr-16(src="@/assets/images/logo.svg" alt="Logo")
+ header-inputs
+ .charge-person-container
+ header-charge-person(:info="chargePersonInfo")
+ .flex.ml-auto
+ header-add-client-button.mr-9
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 +17,20 @@