From f08cc4841574e131a5c87285978c8bb81f594d4b Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 20 Oct 2022 19:26:51 +0300
Subject: [PATCH 1/4] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=20=D0=BF=D0=BE=20?=
 =?UTF-8?q?=D1=83=D1=81=D0=BB=D0=BE=D0=B2=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue                   |  1 -
 src/pages/calendar/components/CalendarBackground.vue | 10 +++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 63c4728..a1c144d 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -32,7 +32,6 @@ export default {
           "Захарова А.О.",
           "Константинопольская Ю.В.",
           "Коломойцев И.К.",
-          "Зайцев В.С.",
         ],
       },
     };
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index ae7dcf8..6b83c59 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
+    :class="addScroll"
     )
     calendar-column(
       v-for="(owner, index) in columnInformation.owners"
@@ -54,6 +55,11 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
+    addScroll() {
+      return {
+        scroll: this.ownersArrayLength > 3,
+      };
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -82,10 +88,12 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.scroll
+  overflow-x: scroll
+
 .calendar-background-wrapper
   width: 100%
   position: relative
-  overflow-x: scroll
 
 .header
   height: 48px

From b08f91f9ae3ce37595e61212ae3c541a3cbe34d1 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 21 Oct 2022 16:53:21 +0300
Subject: [PATCH 2/4] =?UTF-8?q?=D0=A0=D0=B0=D1=81=D0=BF=D1=80=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B8=D0=BB=D0=B0=20=D0=B8=D0=B7=20events=20=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=B4=D0=B5=D0=BB=D1=8C=D1=86=D0=B5=D0=B2=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 141 +++++++++++++++++-
 src/pages/calendar/TheCalendar.vue            |  11 +-
 .../components/CalendarBackground.vue         |  50 ++++++-
 .../calendar/components/CalendarColumn.vue    |  15 +-
 .../calendar/components/CalendarSchedule.vue  |  10 +-
 5 files changed, 203 insertions(+), 24 deletions(-)

diff --git a/server.js b/server.js
index 344db13..ff1f748 100644
--- a/server.js
+++ b/server.js
@@ -132,7 +132,7 @@ export function clientsServer() {
         dataClients,
       }));
       this.get("/registry/event/", () => ({
-        count: 1,
+        count: 4,
         next: null,
         previous: null,
         results: [
@@ -157,6 +157,16 @@ export function clientsServer() {
               },
             ],
             employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
               {
                 id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
                 employee: {
@@ -169,6 +179,135 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
+            start: "2022-10-20T10:00:00Z",
+            end: "2022-10-20T11:10:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                person: {
+                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  last_name: "Гагарин",
+                  first_name: "Юрий",
+                  patronymic: "Алексеевич",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: "owner",
+              },
+            ],
+          },
+          {
+            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-20T10:00:00Z",
+            end: "2022-10-20T11:10:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                person: {
+                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  last_name: "Гагарин",
+                  first_name: "Юрий",
+                  patronymic: "Алексеевич",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: "owner",
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+            ],
+          },
+          {
+            id: "6faa6bb2-1de4-425c-a401-1b35cd455303",
+            start: "2022-10-20T20:23:49Z",
+            end: "2022-10-20T21:23:53Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                person: {
+                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  last_name: "Гагарин",
+                  first_name: "Юрий",
+                  patronymic: "Алексеевич",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db831a14-e836-481f-a653-6325de7c311e",
+                  last_name: "Жмыхов",
+                  first_name: "Егор",
+                  patronymic: "Сергеевич",
+                },
+                role: null,
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index a1c144d..88e5e96 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -4,7 +4,7 @@
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
-      :column-information="columnInformation"
+      :events-data="eventsData"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -27,13 +27,6 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
-      columnInformation: {
-        owners: [
-          "Захарова А.О.",
-          "Константинопольская Ю.В.",
-          "Коломойцев И.К.",
-        ],
-      },
     };
   },
   methods: {
@@ -63,5 +56,5 @@ export default {
 
 <style lang="sass" scoped>
 .calendar-container
-  width: calc(100% - 80px)
+  width: calc(100vw - 80px)
 </style>
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 6b83c59..238cef4 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="addScroll"
+    :class="scrollPresence"
     )
     calendar-column(
-      v-for="(owner, index) in columnInformation.owners"
-      :key="owner"
-      :column-information="owner"
+      v-for="(owner, index) in filteredOwners"
+      :key="owner.id"
+      :owner-data="owner"
       :style="calculateColumnPosition(index)"
       )
     .header(:style="backgroundExtendedWidth")
@@ -28,7 +28,7 @@ export default {
   components: { CalendarColumn },
   props: {
     hoursArray: Array,
-    columnInformation: Object,
+    eventsData: Array,
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
   },
   computed: {
     ownersArrayLength() {
-      return this.columnInformation.owners.length;
+      return this.filteredOwners.length;
     },
     backgroundExtendedWidth() {
       if (this.ownersArrayLength > 3) {
@@ -55,11 +55,42 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
-    addScroll() {
+    scrollPresence() {
       return {
         scroll: this.ownersArrayLength > 3,
       };
     },
+    filteredOwners() {
+      let filteredArray = [];
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
+      };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyObjectPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyObjectPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -80,6 +111,11 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   mounted() {
     this.calculateBackgroundWidth();
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 601e965..7789820 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -3,7 +3,7 @@
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
-        span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
+        span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     div
@@ -15,7 +15,18 @@ export default {
   name: "CalendarColumn",
   components: { BaseDocOkButton },
   props: {
-    columnInformation: String,
+    ownerData: Object,
+  },
+  computed: {
+    ownerName() {
+      if (this.ownerData.id) {
+        return `${this.ownerData.last_name} ${this.ownerData.first_name.slice(
+          0,
+          1
+        )}.${this.ownerData.patronymic.slice(0, 1)}.`;
+      }
+      return null;
+    },
   },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 0391cd1..74c5ce5 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -17,7 +17,7 @@
           )
       calendar-background(
         :hours-array="hoursArray"
-        :column-information="columnInformation"
+        :events-data="eventsData"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"
@@ -54,10 +54,10 @@ export default {
         return {};
       },
     },
-    columnInformation: {
-      type: Object,
+    eventsData: {
+      type: Array,
       default() {
-        return {};
+        return [];
       },
     },
   },
@@ -219,7 +219,7 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
-  width: calc(100% - 8px)
+  width: calc(100% - 80px)
 
 .time-line-indicator
   width: calc(100% - 80px)

From f488a547433744fb7ce7c05c53d0264c69145602 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 21 Oct 2022 18:46:36 +0300
Subject: [PATCH 3/4] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=BE=D1=82=D1=81=D1=82=D1=83=D0=BF=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                           | 2 +-
 src/components/HeaderActiveClientPanel.vue            | 2 +-
 src/components/HeaderInputs.vue                       | 1 +
 src/components/TheHeader.vue                          | 1 +
 src/pages/calendar/components/CalendarClockColumn.vue | 2 +-
 tailwind.config.js                                    | 1 +
 6 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 31469bc..8d75741 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-4
+  .flex.flex-col.w-full.h-full.gap-y-2
     the-header
     .flex.flex-auto
       the-sidebar
diff --git a/src/components/HeaderActiveClientPanel.vue b/src/components/HeaderActiveClientPanel.vue
index 6fd2c18..cab3cdb 100644
--- a/src/components/HeaderActiveClientPanel.vue
+++ b/src/components/HeaderActiveClientPanel.vue
@@ -56,7 +56,7 @@ export default {
 
 .header
   width: 314px
-  height: 42px
+  height: 40px
   position: relative
   background-color: var(--btn-blue-color)
   border-radius: 40px
diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index fe5de17..f059a56 100644
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -40,6 +40,7 @@ export default {
     transform: rotate(180deg)
 
 .header-inputs-wrapper
+  height: 40px
   background-color: var(--default-white)
   border-radius: 4px
   border: 1px solid var(--border-light-grey-color)
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 0883360..52349a4 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -45,6 +45,7 @@ export default {
 
 .header-wrapper
   width: 100%
+  height: 56px
   background-color: var(--default-white)
   position: relative
   z-index: 2
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index 8bcb639..e56aa62 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
     span.text-base(
       v-for="hour in hoursArray"
       :key="hour"
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f09c1a..7646c1f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
         "10px": "10px",
         "3px": "3px",
         "74px": "74px",
+        "45px": "45px",
       },
     },
   },

From df32fa5da6cce0eea4818167012f8f760301a654 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 21 Oct 2022 20:43:17 +0300
Subject: [PATCH 4/4] =?UTF-8?q?WIP=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B5=D1=82=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 352 ++++++++++++------
 src/assets/sass/variables.sass                |   3 +
 src/components/base/buttons/BaseButtonOk.vue  |  45 +++
 .../base/buttons/BaseButtonPlus.vue           |  29 +-
 .../components/ClientDetailInfoSection.vue    |  75 +++-
 .../components/ClientDetailInfoWrapper.vue    |   4 +-
 .../clients/components/ClientDetailInput.vue  |  27 ++
 src/pages/clients/components/ClientsTable.vue |   4 +-
 .../clients/components/ClientsTableHat.vue    |   2 +-
 .../clients/components/ClientsTableRow.vue    |  10 +-
 src/pages/clients/utils/tableConfig.js        |  34 +-
 11 files changed, 423 insertions(+), 162 deletions(-)
 create mode 100644 src/components/base/buttons/BaseButtonOk.vue
 create mode 100644 src/pages/clients/components/ClientDetailInput.vue

diff --git a/server.js b/server.js
index 0f5cf7f..fb25cb1 100644
--- a/server.js
+++ b/server.js
@@ -3,138 +3,260 @@ import { createServer } from "miragejs";
 const dataClients = [
   {
     id: "1",
-    fullName: "Вильгейльм Арнольд Витальевич",
-    age: "34",
-    jobTitle: "Менеджер",
-    priority: "Высокий",
-    phone: "+7 (915) 657–21–14",
-    email: "Superboyband@yandex.ru",
-    networks: [],
-    meeting: {
-      date: "02.06.22",
-      time: "18:30–19:30",
+    last_name: "Вильгейльм",
+    first_name: "Арнольд",
+    patronymic: "Витальевич",
+    identity_document_to_person: {
+      pass: {
+        number: {
+          value: "5261 918732",
+          copy: true,
+        },
+        issuedBy: {
+          value: "Отделом УФМС России по рязанской области",
+        },
+        divisionCode: {
+          value: "426–234",
+        },
+        dateIssue: {
+          value: "02.04.2022",
+        },
+      },
+    },
+    note_to_person: {
+      basic_info: {
+        age: "34",
+        jobTitle: "Менеджер",
+        priority: "Высокий",
+        phone: "+7 (915) 657–21–14",
+        email: "Superboyband@yandex.ru",
+        networks: [],
+        meeting: {
+          date: "02.06.22",
+          time: "18:30–19:30",
+        },
+      },
+      additional_info: {
+        snils: {
+          number: {
+            value: "812–183–139 21",
+            copy: true,
+          },
+        },
+        inn: {
+          number: {
+            value: "138291382731",
+            copy: true,
+          },
+        },
+        birthday: {
+          date: {
+            value: "21.04.1999",
+          },
+        },
+        addresses: {
+          registrationPlace: {
+            value:
+              "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
+          },
+          actualPlace: {
+            value:
+              "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
+          },
+        },
+        docs: [
+          {
+            name: "Договор оферты.pdf",
+            type: "application/pdf",
+          },
+          {
+            name: "Договор о долевом строительстве.pdf",
+            type: "application/pdf",
+          },
+          {
+            name: "Какое-то очень очень очень очень длинное название.doc",
+            type: "application/msword",
+          },
+          {
+            name: "Договор об оплате.doc",
+            type: "application/msword",
+          },
+          {
+            name: "Коммерческое предложение.xls",
+            type: "application/vnd.ms-excel",
+          },
+          {
+            name: "Таблица заказов.xls",
+            type: "application/vnd.ms-excel",
+          },
+        ],
+        additional: [
+          {
+            header: "Предпочтения",
+            value: "Разговор на “Вы”\nТолько по делу\nТолько официальный стиль",
+            name: "",
+            type: "",
+          },
+          {
+            header: "Доп.документы",
+            value: "",
+            name: "Памятка с вопросами на созвоне.pdf",
+            type: "application/pdf",
+          },
+          {
+            header: "Его должность",
+            value: "Вроде бы важная шишка, пусть будет – Гуру в дизайне",
+            name: "",
+            type: "",
+          },
+          {
+            header: "Чтобы не забыть",
+            value: "Не забудь!",
+            name: "",
+            type: "",
+          },
+        ],
+      },
     },
   },
   {
     id: "2",
-    fullName: "Астафоркина Екатерина Геннадьевна",
-    age: "54",
-    jobTitle: "Менеджер",
-    priority: "-",
-    phone: "+7 (574) 364–53–36",
-    email: "antimag@gmail.com",
-    networks: [],
-    meeting: {
-      date: "14.07.22",
-      time: "17:30–21:30",
-    },
-  },
-];
-
-const clientsDetail = [
-  {
-    id: "5",
-    idClient: "1",
-    pass: {
-      number: {
-        value: "5261 918732",
-        copy: true,
-      },
-      issuedBy: {
-        value: "Отделом УФМС России по рязанской области",
-      },
-      divisionCode: {
-        value: "426–234",
-      },
-      dateIssue: {
-        value: "02.04.2022",
+    last_name: "Астафоркина",
+    first_name: "Екатерина",
+    patronymic: "Геннадьевна",
+    identity_document_to_person: {
+      pass: {
+        number: {
+          value: "1324 103496",
+          copy: true,
+        },
+        issuedBy: {
+          value: "Отделом УФМС России по владимирской области",
+        },
+        divisionCode: {
+          value: "675–901",
+        },
+        dateIssue: {
+          value: "01.01.2011",
+        },
       },
     },
-    snils: {
-      number: {
-        value: "812–183–139 21",
-        copy: true,
+    note_to_person: {
+      basic_info: {
+        age: "54",
+        jobTitle: "Менеджер",
+        priority: "-",
+        phone: "+7 (574) 364–53–36",
+        email: "antimag@gmail.com",
+        networks: [],
+        meeting: {
+          date: "14.07.22",
+          time: "17:30–21:30",
+        },
       },
-    },
-    inn: {
-      number: {
-        value: "138291382731",
-        copy: true,
+      additional_info: {
+        snils: {
+          number: {
+            value: "834–001–555 35",
+            copy: true,
+          },
+        },
+        inn: {
+          number: {
+            value: "371942327342",
+            copy: true,
+          },
+        },
+        birthday: {
+          date: {
+            value: "07.12.1993",
+          },
+        },
+        addresses: {
+          registrationPlace: {
+            value:
+              "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
+          },
+          actualPlace: {
+            value:
+              "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
+          },
+        },
+        docs: [
+          {
+            name: "Договор покупки.pdf",
+            type: "application/pdf",
+          },
+          {
+            name: "Договор о оптовых поставках.pdf",
+            type: "application/pdf",
+          },
+          {
+            name: "Договор о предоставлении услуг.pdf",
+            type: "application/pdf",
+          },
+          {
+            name: "Какое-то очень очень очень очень короткое название.doc",
+            type: "application/msword",
+          },
+          {
+            name: "Документация.doc",
+            type: "application/msword",
+          },
+          {
+            name: "Отчет.xls",
+            type: "application/vnd.ms-excel",
+          },
+          {
+            name: "Заказы.xls",
+            type: "application/vnd.ms-excel",
+          },
+        ],
+        additional: [
+          {
+            header: "По каким вопросам обращатся",
+            value: "Обращатся только по вопросам закупок",
+            name: "",
+            type: "",
+          },
+          {
+            header: "Доп.документы",
+            value: "Ответственные за работу",
+            name: "Список ответсвенных.xls",
+            type: "application/vnd.ms-excel",
+          },
+          {
+            header: "Портфолио",
+            value: "Информация о клиенте",
+            name: "Портфолио.doc",
+            type: "application/msword",
+          },
+        ],
       },
     },
-    birthday: {
-      date: {
-        value: "21.04.1999",
-      },
-    },
-    addresses: {
-      registrationPlace: {
-        value:
-          "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
-      },
-      actualPlace: {
-        value:
-          "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
-      },
-    },
-    docs: {
-      info: [
-        {
-          value: "Договор оферты.pdf",
-        },
-        {
-          value: "Договор о долевом строительстве.pdf",
-        },
-        {
-          value: "Какое-то очень очень очень очень длинное название.doc",
-        },
-        {
-          value: "Договор об оплате.doc",
-        },
-        {
-          value: "Коммерческое предложение.xls",
-        },
-        {
-          value: "Таблица заказов.xls",
-        },
-      ],
-    },
-    additional: {
-      info: [
-        {
-          name: "Предпочтения",
-          value: "Разговор на “Вы”\nТолько по делу\nТолько официальный стиль",
-          file: "",
-        },
-        {
-          name: "Доп.документы",
-          value: "",
-          file: "Памятка с вопросами на созвоне.pdf",
-        },
-        {
-          name: "Его должность",
-          value: "Вроде бы важная шишка, пусть будет – Гуру в дизайне",
-          file: "",
-        },
-        {
-          name: "Чтобы не забыть",
-          value: "Не забудь!",
-          file: "",
-        },
-      ],
-    },
   },
 ];
 export function clientsServer() {
   createServer({
     routes() {
-      this.get("/api/clients", () => ({
-        dataClients,
-      }));
+      this.get("/api/clients", () => {
+        return dataClients.map((el) => ({
+          ...el.note_to_person.basic_info,
+          id: el.id,
+          last_name: el.last_name,
+          first_name: el.first_name,
+          patronymic: el.patronymic,
+        }));
+      });
       this.passthrough("http://45.84.227.122:8080/**");
       this.get("/api/detail/:id", (schema, request) => {
         let id = request.params.id;
-        return clientsDetail.find((el) => el.idClient === id);
+        let client = dataClients.find((el) => el.id === id);
+        return {
+          ...client.note_to_person.additional_info,
+          id: client.id,
+          pass: client.identity_document_to_person.pass,
+        };
       });
     },
   });
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 6d60274..7b18a9e 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -20,3 +20,6 @@
   --btn-red-color: #ff6f6f
   --time-indicator-color: #e93131
   --font-obligatory-color: #ff0000
+  --light-grey-bg-color: #f8f9fa
+  --btn-green-color: rgba(60, 217, 75, 1)
+  --btn-light-green-color: rgba(60, 217, 75, 0.2)
diff --git a/src/components/base/buttons/BaseButtonOk.vue b/src/components/base/buttons/BaseButtonOk.vue
new file mode 100644
index 0000000..dad1ec5
--- /dev/null
+++ b/src/components/base/buttons/BaseButtonOk.vue
@@ -0,0 +1,45 @@
+<template lang="pug">
+  button.button-ok.flex.items-center.justify-center.cursor-pointer.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:darkStyle}")
+    .flex.w-fit.h-fit
+      span.icon-ok.leading-none(:style="{fontSize:iconSize + 'px'}")
+</template>
+
+<script>
+export default {
+  name: "BaseButtonOk",
+  props: {
+    size: {
+      default: 24,
+    },
+    iconSize: {
+      default: 14,
+    },
+    darkStyle: {
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button-ok
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-color-3)
+  border-radius: 50%
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color-3)
+  &:active
+    border: none
+    background-color: var(--btn-light-green-color)
+    color: var(--btn-green-color)
+.change
+  border-color: var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+  &:active
+    background-color: var(--btn-light-green-color)
+    color: var(--btn-green-color)
+</style>
diff --git a/src/components/base/buttons/BaseButtonPlus.vue b/src/components/base/buttons/BaseButtonPlus.vue
index cde6574..24971ab 100644
--- a/src/components/base/buttons/BaseButtonPlus.vue
+++ b/src/components/base/buttons/BaseButtonPlus.vue
@@ -1,10 +1,23 @@
 <template lang="pug">
-  button.cursor-pointer.icon-plus.button-plus.text-xs.pt-1
+  button.flex.items-center.justify-center.cursor-pointer.button-plus.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:withBorder}")
+    .flex.w-fit.h-fit
+      span.icon-plus.leading-none(:style="{fontSize:iconSize + 'px'}")
 </template>
 
 <script>
 export default {
-  name: "ButtonPlus",
+  name: "BaseButtonPlus",
+  props: {
+    size: {
+      default: 24,
+    },
+    iconSize: {
+      default: 14,
+    },
+    withBorder: {
+      default: false,
+    },
+  },
 };
 </script>
 
@@ -12,10 +25,14 @@ export default {
 .button-plus
   outline: none
   border: none
-  width: 24px
-  height: 24px
-  max-height: 24px
   color: var(--btn-blue-color)
-  background-color: var(--bg-ligth-blue-color)
   border-radius: 50%
+.change
+  background-color: var(--btn-blue-color-0)
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
 </style>
diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 945a245..2509942 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,30 +1,56 @@
 <template lang="pug">
-  .section-wrapper.flex.flex-col.h-fit(:style="{ minWidth : settings.width + 'px' }" :class="{flexRow:settings.rollFlex}")
-    .section-header.flex.items-center.justify-start.pt-4.pb-3.pl-4(:class="{styleBorder:settings.rollFlex}")
-      span.text-sm.font-semibold {{settings.title}}
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(@dblclick="openInterfaceChange" :class="{click:isOpenChange}" :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}")
+    .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
+      span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
+      .flex.items-center.gap-x-8(v-if="isOpenChange")
+        base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
+        .edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
+        base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
     .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
       .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="settings.options") {{settings.options[key]}}
-        .flex.gap-x-4
-          .icon-files.cursor-pointer(v-if="!!item.file" style="color:red")
-          span.text-sm.text-sm.text-center.w-fit(v-if="!!item.value" :style="{fontWeight:item.copy&&600}") {{item.value}}
-          span.text-sm.text-center(v-if="!!item.file") {{item.file}}
-          .icon-copy.cursor-pointer(v-if="item.copy")
+        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
+        span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
+        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
+          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+        .flex.gap-x-4(v-if="item.value && !isChange")
+          span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
+          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+        .flex.gap-x-4(v-if="item.name")
+          .icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
+          span.text-sm {{item.name}}
 </template>
 
 <script>
+import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
+import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
+import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientDetailInfoSection",
+  components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
   props: {
     sectionInfo: Object,
     section: String,
   },
   data() {
     return {
-      settings: detail.find((el) => el.name === this.section),
+      isOpenChange: false,
+      isChange: false,
+      settings: detail,
     };
   },
+  methods: {
+    openInterfaceChange() {
+      this.isOpenChange = !this.isOpenChange;
+    },
+    changeClientData() {
+      this.isChange = true;
+    },
+    saveChange() {
+      this.isOpenChange = false;
+      this.isChange = false;
+    },
+  },
 };
 </script>
 
@@ -33,13 +59,32 @@ export default {
   border: 1px solid var(--border-light-grey-color)
   border-radius: 4px
   color: var(--font-dark-blue-color)
-  &.flex-row
-    flex-direction: row
+  &.click
+    background-color: var(--light-grey-bg-color)
 .section-header
+  min-height: 44px
   border-bottom: 1px solid var(--border-light-grey-color)
-  &.style-border
-    border-bottom: none
-    border-right: 1px solid var(--border-light-grey-color)
+.small
+  border-bottom: none
+  border-right: 1px solid var(--border-light-grey-color)
+  min-width: 180px
 .title-section
   color: var(--font-grey-color)
+.copy
+  color: var(--btn-blue-color)
+  opacity: 0.6
+.section-body
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
+.edit
+  color: var(--btn-blue-color)
+  &:hover
+    opacity: 0.6
 </style>
diff --git a/src/pages/clients/components/ClientDetailInfoWrapper.vue b/src/pages/clients/components/ClientDetailInfoWrapper.vue
index c9a0bdc..a7f0230 100644
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -1,12 +1,14 @@
 <template lang="pug">
   .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
-    client-detail-info-section(:section-info="dataDetail.pass" section="pass")
+    client-detail-info-section(v-model:section-info="dataDetail.pass" section="pass")
     .flex.flex-col.gap-y-2
       client-detail-info-section(:section-info="dataDetail.snils" section="snils" )
       client-detail-info-section(:section-info="dataDetail.inn" section="inn" )
     .flex.flex-col.gap-y-2
       client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
       client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
+    client-detail-info-section(:section-info="dataDetail.docs" section="docs")
+    client-detail-info-section(:section-info="dataDetail.additional" section="additional")
 </template>
 
 <script>
diff --git a/src/pages/clients/components/ClientDetailInput.vue b/src/pages/clients/components/ClientDetailInput.vue
new file mode 100644
index 0000000..261cca4
--- /dev/null
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -0,0 +1,27 @@
+<template lang="pug">
+  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
+    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none(:rows="Math.ceil(value.length/heightInput)" :value="value" @input="$emit('update:value', $event.target.value)")
+    slot
+</template>
+
+<script>
+export default {
+  name: "ClientDetailInput",
+  props: {
+    value: String,
+    width: Number,
+  },
+  computed: {
+    heightInput() {
+      return ((this.width / 100) * 70) / 8;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-wrapper
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+  background-color: var(--default-white)
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index de46158..5a892e9 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -10,7 +10,7 @@
           :id="client.id"
           :is-check="marked.includes(client.id)"
           :check="selectedCheck"
-          :full-name="client.fullName"
+          :full-name="`${client.last_name} ${client.first_name} ${client.patronymic}`"
           :age="client.age"
           :job-title="client.jobTitle"
           :priority="client.priority"
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     saveDataClients(data) {
-      this.dataClients = data.dataClients;
+      this.dataClients = data;
     },
     fetchDataClients() {
       // eslint-disable-next-line
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
index 40f4c1e..9155cc5 100644
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -18,7 +18,7 @@ import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
 import BassExportButton from "@/components/base/buttons/BassExportButton";
 import BaseInput from "@/components/base/BaseInput";
 export default {
-  name: "ClientsTAbleHeader",
+  name: "ClientsTableHat",
   components: {
     BaseInput,
     BassExportButton,
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index c972622..77680b7 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .row-wrapper.flex.flex-col.w-full
-    .row-body.flex.w-full.cursor-pointer(@click="openDetailInfo")
+    .row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)")
       .check-box.flex.justify-center.items-center
         clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
       table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
@@ -67,9 +67,9 @@ export default {
     meetingTime: Object,
   },
   methods: {
-    fetchClientDetail() {
+    fetchClientDetail(id) {
       // eslint-disable-next-line
-      fetch("/api/detail/1").then((res) => res.json()).then((data) => this.saveClientDetail(data))
+      fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
     },
     saveClientDetail(data) {
       this.dataDetail = data;
@@ -78,9 +78,9 @@ export default {
       e.target.focus();
       this.isOpenPopup = !this.isOpenPopup;
     },
-    openDetailInfo() {
+    openDetailInfo(e) {
       this.isOpenDetailInfo = !this.isOpenDetailInfo;
-      this.isOpenDetailInfo && this.fetchClientDetail();
+      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
     },
     handleUnFocusPopup() {
       this.isOpenPopup = false;
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 0cc703c..478c424 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -60,9 +60,8 @@ export const column = [
   },
 ];
 
-export const detail = [
-  {
-    name: "pass",
+export const detail = {
+  pass: {
     title: "Паспортные данные",
     options: {
       number: "Серия и номер",
@@ -72,30 +71,26 @@ export const detail = [
     },
     width: 280,
   },
-  {
-    name: "snils",
+  snils: {
     title: "СНИЛС",
     options: {
       number: "Номер",
     },
     width: 180,
   },
-  {
-    name: "inn",
+  inn: {
     title: "ИНН",
     options: {
       number: "Номер",
     },
     width: 180,
   },
-  {
-    name: "birthday",
+  birthday: {
     title: "Дата рождения",
     width: 292,
-    rollFlex: true,
+    rowFlex: true,
   },
-  {
-    name: "addresses",
+  addresses: {
     title: "Адреса",
     options: {
       registrationPlace: "Адрес постоянной регистрации",
@@ -103,16 +98,21 @@ export const detail = [
     },
     width: 292,
   },
-  {
-    name: "docs",
+  docs: {
     title: "Документы",
     height: 280,
     width: 360,
+    addFile: true,
   },
-  {
-    name: "additional",
+  additional: {
     title: "Дополнительные данные",
     height: 280,
     width: 360,
+    addFile: true,
   },
-];
+  docsColor: {
+    "application/pdf": "#ff6969",
+    "application/msword": "#6993ff",
+    "application/vnd.ms-excel": "#61c57d",
+  },
+};