From 4904fe4547934edd650f9fd5d88c91edf6a2036c Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Tue, 18 Oct 2022 19:54:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BB=D0=B8=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/download.svg                 |   5 +
 src/assets/sass/variables.sass                |   2 +
 src/components/base/BaseInput.vue             |  14 +-
 src/components/base/BaseSelect.vue            |  38 +++-
 .../base/buttons/BaseCreateButton.vue         |   2 +-
 .../clients/components/ClientsFormCreate.vue  | 198 ++++++++++++++++++
 src/pages/clients/components/ClientsTable.vue |   5 +-
 .../clients/components/ClientsTableHeader.vue |   9 +-
 .../clients/components/ClientsWrapper.vue     |  21 +-
 .../components/FormCreateAdditional.vue       |  67 ++++++
 .../components/FormCreateBasicInfo.vue        |  69 ++++++
 .../clients/components/FormCreateDoc.vue      |  40 ++++
 .../components/FormCreateSecondaryInfo.vue    |  76 +++++++
 13 files changed, 526 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/icons/download.svg
 create mode 100644 src/pages/clients/components/ClientsFormCreate.vue
 create mode 100644 src/pages/clients/components/FormCreateAdditional.vue
 create mode 100644 src/pages/clients/components/FormCreateBasicInfo.vue
 create mode 100644 src/pages/clients/components/FormCreateDoc.vue
 create mode 100644 src/pages/clients/components/FormCreateSecondaryInfo.vue

diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
new file mode 100644
index 0000000..5aeb996
--- /dev/null
+++ b/src/assets/icons/download.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
+<title>download</title>
+<path fill="none" stroke="#4772f2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.5714" d="M28.952 21.905v5.143c0 1.893-1.535 3.429-3.429 3.429h-20.571c-1.894 0-3.429-1.535-3.429-3.429v-5.143M8.381 15.048l6.857 6.857M15.238 21.905l6.857-6.857M15.238 21.905v-20.571"></path>
+</svg>
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 5e6a4ec..6d60274 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -11,6 +11,7 @@
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)
   --btn-blue-color-3: rgba(65, 105, 225, 0.2)
   --btn-blue-color-4: rgba(65, 105, 225, 0.8)
+  --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
@@ -18,3 +19,4 @@
   --default-white: #fff
   --btn-red-color: #ff6f6f
   --time-indicator-color: #e93131
+  --font-obligatory-color: #ff0000
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 44b2fc0..a353b87 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,17 +1,25 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5")
+  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
     img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
-    input.input-search.outline-0.text-base.not-italic(placeholder="Искать")
+    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
 </template>
 
 <script>
 export default {
   name: "BaseInput",
   props: {
+    type: {
+      default: "text",
+    },
+    value: String,
     withIcon: {
       default: false,
     },
     iconPosition: String,
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
   },
   computed: {
     position() {
@@ -32,6 +40,4 @@ export default {
 .input-wrapper
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
-.input-search
-  min-width: 220px
 </style>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 5c3311f..b9cb34b 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
+  .flex.justify-between.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
     .relative.flex.flex-col
-      .not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
-        .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
-          .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
-    .select-form-separator.cursor-pointer
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
+      .not-italic.text-base.select.cursor-pointer.w-full {{optionData}}
+        .absolute.options(v-show="isSelectOpen" :id="id")
+          .not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
+    .select-form-separator.cursor-pointer(v-if="withSeparator" )
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -13,12 +13,29 @@ export default {
   name: "BaseSelect",
   props: {
     id: String,
-    width: String,
+    styleBorder: {
+      default: false,
+    },
+    widthSelect: Number,
+    withSeparator: {
+      default: false,
+    },
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    isOpen: Boolean,
-    selectOpen: Function,
+  },
+  data() {
+    return {
+      isSelectOpen: false,
+    };
+  },
+  methods: {
+    openSelect() {
+      this.isSelectOpen = !this.isSelectOpen;
+    },
+    closeSelect() {
+      this.isSelectOpen = false;
+    },
   },
 };
 </script>
@@ -28,6 +45,9 @@ export default {
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
+  &.border
+    background-color: rgba(255, 255, 255, 0)
+    border: 2px solid var(--border-light-grey-color)
 .select
   appearance: none
   border: none
diff --git a/src/components/base/buttons/BaseCreateButton.vue b/src/components/base/buttons/BaseCreateButton.vue
index 9b62519..1efd708 100644
--- a/src/components/base/buttons/BaseCreateButton.vue
+++ b/src/components/base/buttons/BaseCreateButton.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.button.flex.gap-x-2.text-base.pt-3.pb-2.px-6
+  button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
     .flex.text-xs.w-fit.pt-1(v-if="withIcon")
       span.icon-plus
     span.text-base.font-semibold {{text}}
diff --git a/src/pages/clients/components/ClientsFormCreate.vue b/src/pages/clients/components/ClientsFormCreate.vue
new file mode 100644
index 0000000..9b4958f
--- /dev/null
+++ b/src/pages/clients/components/ClientsFormCreate.vue
@@ -0,0 +1,198 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.absolute.top-28.right-0.px-8.py-7.gap-y-8
+    .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
+    span.title.text-xl.font-bold Создание клиента
+    .flex.gap-x-4.h-fit
+      .flex.gap-x-3.w-full
+        .export-avatar.cursor-pointer.flex.justify-center.items-center
+          img.icon-download(src="@/assets/icons/download.svg" alt="Download")
+        base-input(v-model:value="infoClient.fullName" placeholder="ФИО*" :width-input="326" )
+      base-select(:list-data="priorityList" :option-data="priorityOption" :width-select="176" :style-border="true" :choose-option="chooseOptionSelect")
+    .flex.flex-col.flex-auto.l.gap-y-8
+      .flex
+        button.title-info.px-6.py-2.cursor-pointer(v-for="(info, index) in infoTitleArray" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
+      .flex(:style="{display :'block'}" ref="basic")
+        form-create-basic-info( :basic-info="infoClient.basicInfo" :add-network="addNewNetwork" :save-client="saveClient")
+      .flex(:style="{display :'none'}" ref="secondary")
+        form-create-secondary-info(:secondary-info="infoClient.secondaryInfo" :save-client="saveClient")
+      .flex(:style="{display :'none'}" ref="doc")
+        form-create-doc(:doc="infoClient.doc" :save-file="saveDocFile" :save-client="saveClient")
+      .flex(:style="{display :'none'}" ref="additional")
+        form-create-additional(:additional-info="infoClient.additional" :add-new-additional="addNewAdditionalInfo" :save-file="saveAdditionalFiles" :save-client="saveClient")
+</template>
+
+<script>
+import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
+import FormCreateSecondaryInfo from "@/pages/clients/components/FormCreateSecondaryInfo";
+import FormCreateDoc from "@/pages/clients/components/FormCreateDoc";
+import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
+import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
+export default {
+  name: "ClientsFormCreate",
+  components: {
+    BaseInput,
+    BaseSelect,
+    FormCreateBasicInfo,
+    FormCreateSecondaryInfo,
+    FormCreateDoc,
+    FormCreateAdditional,
+  },
+  props: {
+    closeForm: Function,
+  },
+  data() {
+    return {
+      name: "sdasdasd",
+      infoClient: {
+        fullName: "",
+        priority: "",
+        basicInfo: {
+          age: "",
+          jobTitle: "",
+          number: "",
+          email: "",
+          networks: [
+            {
+              id: "network",
+              network: "",
+            },
+          ],
+        },
+        secondaryInfo: {
+          pass: {
+            number: "",
+            issuedBy: "",
+            divisionCode: "",
+            dateIssue: "",
+          },
+          snilsInn: {
+            inn: "",
+            snils: "",
+          },
+          dates: {
+            birthday: "",
+          },
+          addresses: {
+            actualPlace: "",
+            registrationPlace: "",
+          },
+        },
+        doc: {},
+        additional: [
+          {
+            id: "add",
+            header: "",
+            description: "",
+            file: {},
+          },
+        ],
+      },
+      infoTitleArray: [
+        {
+          title: "Основное",
+          key: "basic",
+          active: true,
+        },
+        {
+          title: "Вторичное",
+          key: "secondary",
+          active: false,
+        },
+        {
+          title: "Документы",
+          key: "doc",
+          active: false,
+        },
+        {
+          title: "Дополнительное",
+          key: "additional",
+          active: false,
+        },
+      ],
+      priorityOption: "Приоритет",
+      priorityList: ["Высокий", "Средний", "Низкий", "-"],
+    };
+  },
+  methods: {
+    chooseOptionSelect(e) {
+      this.priorityOption = this.priorityList[e.target.id];
+      this.infoClient.priority = this.priorityList[e.target.id];
+    },
+    saveClient() {
+      console.log(this.infoClient);
+    },
+    saveDocFile(e) {
+      this.infoClient.doc = e.target.files;
+    },
+    saveAdditionalFiles(e) {
+      console.log(e.target.id, e.target.files[0]);
+      this.infoClient.additional.find((el) => el.id === e.target.id).file =
+        e.target.file;
+    },
+    addNewAdditionalInfo() {
+      this.infoClient.additional.push({
+        id:
+          this.infoClient.additional[0].id + this.infoClient.additional.length,
+        header: "",
+        description: "",
+        file: {},
+      });
+    },
+    addNewNetwork() {
+      this.infoClient.basicInfo.networks.push({
+        id:
+          this.infoClient.basicInfo.networks[0].id +
+          this.infoClient.basicInfo.networks.length,
+        network: "",
+      });
+    },
+    selectTab(event) {
+      this.infoTitleArray.forEach((el) => {
+        if (el.title === event.target.id) {
+          el.active = true;
+          this.$refs[el.key].style.display = "block";
+        } else {
+          el.active = false;
+          this.$refs[el.key].style.display = "none";
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  z-index: 1
+  background-color: var(--default-white)
+  width: fit-content
+  border-radius: 4px
+  min-width: 634px
+  max-height: 700px
+  min-height: 700px
+  box-shadow: var(--default-shadow)
+.title
+  color: var(--font-dark-blue-color)
+.icon-download
+  width: 18px
+  height: 18px
+.export-avatar
+  width: 40px
+  height: 40px
+  border-radius: 50%
+  background-color: var(--bg-btn-icons-color)
+  color: var(--btn-blue-color)
+  &:hover
+    color: var(--default-white)
+    background-color: var(--btn-blue-color)
+.title-info
+  color: var(--font-grey-color)
+  border-bottom: 1.5px solid var(--font-grey-color)
+  &:hover
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
+  &.active
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index e1cbd53..6e07ed3 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
-    clients-table-header(:is-open-actions="marked.length")
+    clients-table-header(:is-open-actions="marked.length" :open-form-create="openFormCreate" )
     table.w-full
       thead.head-table
         tr.head-row
@@ -62,6 +62,9 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
 export default {
   name: "ClientsTable",
   components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
+  props: {
+    openFormCreate: Function,
+  },
   data() {
     return {
       selectAll: false,
diff --git a/src/pages/clients/components/ClientsTableHeader.vue b/src/pages/clients/components/ClientsTableHeader.vue
index 128c08b..40f4c1e 100644
--- a/src/pages/clients/components/ClientsTableHeader.vue
+++ b/src/pages/clients/components/ClientsTableHeader.vue
@@ -1,13 +1,14 @@
 <template lang="pug">
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
-      base-input(:with-icon="true")
+      .input
+        base-input(:with-icon="true")
       button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
         .icon-filter.text-xl.leading-4
     clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
       bass-export-button(:only-icon="true")
-      base-create-button(:with-icon="true")
+      base-create-button(@click="openFormCreate" :with-icon="true")
 
 </template>
 
@@ -25,12 +26,16 @@ export default {
     ClientsTableHeaderActions,
   },
   props: {
+    openFormCreate: Function,
     isOpenActions: Number,
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.input
+  width: 280px
+  height: fit-content
 .filter-button
   border-radius: 4px
   border: 2px solid var(--border-light-grey-color)
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index be1d1d4..84b4c57 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,12 +1,27 @@
 <template lang="pug">
-  .flex.w-full.mx-6
-    clients-table
+  .flex.w-full.relative.mx-6
+    clients-table(:open-form-create="openFormCreateClient")
+    clients-form-create(v-if="isOpenForm" :close-form="closeFormCreateClient")
 </template>
 
 <script>
+import ClientsFormCreate from "@/pages/clients/components/ClientsFormCreate";
 import ClientsTable from "@/pages/clients/components/ClientsTable";
 export default {
   name: "ClientsWrapper",
-  components: { ClientsTable },
+  components: { ClientsTable, ClientsFormCreate },
+  data() {
+    return {
+      isOpenForm: false,
+    };
+  },
+  methods: {
+    openFormCreateClient() {
+      this.isOpenForm = true;
+    },
+    closeFormCreateClient() {
+      this.isOpenForm = false;
+    },
+  },
 };
 </script>
diff --git a/src/pages/clients/components/FormCreateAdditional.vue b/src/pages/clients/components/FormCreateAdditional.vue
new file mode 100644
index 0000000..6e09f99
--- /dev/null
+++ b/src/pages/clients/components/FormCreateAdditional.vue
@@ -0,0 +1,67 @@
+<template lang="pug">
+  .wrapper-additional.flex.flex-col.gap-y-8.justify-between.text-base
+    .flex.flex-col.gap-y-6.w-full
+      .flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
+        .flex.flex-col.gap-y-1
+          base-input(v-model:value="info.header" placeholder="Заголовок")
+          .flex.px-4.py-3.description
+            textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10")
+        .upload-wrapper.flex.flex-col.justify-center.items-center
+          .upload-text.text-center.flex.w-fit
+            input.hidden(@change="(e) => saveFile(e)" type="file" :id="info.id")
+            span Загрузите элемент
+              label.label.cursor-pointer(:for="info.id")  с комьютера
+              span  или перетащите их сюда
+      .add-additional.flex.gap-x-3.cursor-pointer(@click="addNewAdditional")
+        .icon-plus
+        span Добавить еще пункт
+    base-create-button(@click="saveClient" text="Создать клиента")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+export default {
+  name: "FormCreateAdditional",
+  components: { BaseCreateButton, BaseInput },
+  props: {
+    additionalInfo: Object,
+    saveClient: Function,
+    addNewAdditional: Function,
+    saveFile: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-additional
+  min-height: 443px
+  max-height: 443px
+  overflow-y: auto
+  color: var(--font-dark-blue-color)
+  &::-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)
+.upload-wrapper
+  min-height: 92px
+  max-height: 92px
+  width: 100%
+  color: var(--font-grey-color)
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+.upload-text
+  max-width: 278px
+.label
+  color: var(--btn-blue-color)
+.description
+  min-height: 77px
+  border-radius: 4px
+  border: 2px solid var(--border-light-grey-color)
+.add-additional
+  color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
new file mode 100644
index 0000000..ccda080
--- /dev/null
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -0,0 +1,69 @@
+<template lang="pug">
+  .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+    .grid.grid-cols-2.gap-x-4.gap-y-6
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Возраст
+          span.obligatory *
+        base-input.input-info(v-model:value="basicInfo.age" placeholder="Колличество полных лет" :width-input="277")
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Должность
+        base-input.input-info(v-model:value="basicInfo.jobTitle" placeholder="Должность клиента" :width-input="277")
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Номер телефона
+          span.obligatory *
+        base-input.input-info(v-model:value="basicInfo.number" placeholder="+7 (915) 644–92–23" :width-input="277")
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Email
+          span.obligatory *
+        base-input.input-info(v-model:value="basicInfo.email" placeholder="user@yandex.ru" :width-input="277")
+      .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
+        span.text-sm Ссылки на соцсети
+        .flex(class="gap-x-1.5" v-for="network in basicInfo.networks" :key="network.id")
+          .icon.flex.justify-center.items-center
+            span.icon-telegram.leading-2.text-lg
+          base-input.input-info.w-full(v-model:value="network.network" :id="network.id" placeholder="Ссылкa")
+        span.add-network.cursor-pointer(@click="addNetwork") Добавить соцсеть
+    base-create-button(text="Создать клиента" @click="saveClient")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "FormCreateBasicInfo",
+  components: { BaseInput, BaseCreateButton },
+  props: {
+    basicInfo: Object,
+    saveClient: Function,
+    addNetwork: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-info
+  min-height: 443px
+  max-height: 443px
+  overflow-y: auto
+  color: var(--font-grey-color)
+  &::-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)
+.input-info
+  color: var(--font-dark-blue-color)
+.obligatory
+  color: var(--font-obligatory-color)
+.add-network
+  color: var(--btn-blue-color)
+.icon
+  color: var(--border-light-grey-color)
+  width: 48px
+  height: 100%
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+</style>
diff --git a/src/pages/clients/components/FormCreateDoc.vue b/src/pages/clients/components/FormCreateDoc.vue
new file mode 100644
index 0000000..9711a08
--- /dev/null
+++ b/src/pages/clients/components/FormCreateDoc.vue
@@ -0,0 +1,40 @@
+<template lang="pug">
+  .wrapper-doc.flex.flex-col.justify-between
+    .upload-wrapper.flex.flex-col.justify-center.items-center
+      .upload-text.text-center.flex.w-fit
+        input.hidden(@change="(e) => saveFile(e)" type="file" id="file-upload")
+        span Загрузите элемент
+          label.label.cursor-pointer(for="file-upload")  с комьютера
+          span  или перетащите их сюда
+    base-create-button(@click="saveClient" text="Создать клиента")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+export default {
+  name: "FormCreateDoc",
+  components: { BaseCreateButton },
+  props: {
+    saveClient: Function,
+    saveFile: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-doc
+  min-height: 443px
+  max-height: 443px
+  overflow-y: auto
+  color: var(--font-grey-color)
+.upload-wrapper
+  min-height: 92px
+  max-height: 92px
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+.upload-text
+  max-width: 278px
+.label
+  color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/clients/components/FormCreateSecondaryInfo.vue b/src/pages/clients/components/FormCreateSecondaryInfo.vue
new file mode 100644
index 0000000..610794c
--- /dev/null
+++ b/src/pages/clients/components/FormCreateSecondaryInfo.vue
@@ -0,0 +1,76 @@
+<template lang="pug">
+  .wrapper-secondary.flex.flex-col.gap-y-8
+    .flex.flex-col.gap-y-6
+      span.title-info.text-base.font-bold Паспортные данные
+      .grid.grid-cols-2.gap-x-4.gap-y-6
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Серия и номер
+          base-input.input-info(v-model:value="secondaryInfo.pass.number" placeholder="0000 000000" :width-input="277")
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Кем и когда выдан
+          base-input.input-info(v-model:value="secondaryInfo.pass.issuedBy" placeholder="Точно как в паспорте" :width-input="277")
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Код подразделения
+          base-input.input-info(v-model:value="secondaryInfo.pass.divisionCode" placeholder="000–000" :width-input="277")
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Дата выдачи
+          base-input.input-info(type="date" v-model:value="secondaryInfo.pass.dateIssue" placeholder="Дата" :width-input="277")
+    .flex.flex-col.gap-y-6
+      span.title-info.text-base.font-bold СНИЛС и ИНН
+      .grid.grid-cols-2.gap-x-4.gap-y-6
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Номер СНИЛС
+          base-input.input-info(v-model:value="secondaryInfo.snilsInn.snils" placeholder="000–000–000 00" :width-input="277")
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Номер ИНН
+          base-input.input-info(v-model:value="secondaryInfo.snilsInn.inn" placeholder="000000000000" :width-input="277")
+    .flex.flex-col.gap-y-6
+      span.title-info.text-base.font-bold Даты
+      .grid.grid-cols-2.gap-x-4.gap-y-6
+        .flex.flex-col(class="gap-y-1.5")
+          span.text-sm Дата рождения
+          base-input.input-info(type="date" v-model:value="secondaryInfo.dates.birthday" placeholder="00,00,0000" :width-input="277")
+    .flex.flex-col.gap-y-6
+      span.title-info.text-base.font-bold Адреса
+      .grid.grid-cols-2.gap-x-4.gap-y-6
+        .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
+          span.text-sm Адрес постоянной регистрации
+          base-input.input-info(v-model:value="secondaryInfo.addresses.actualPlace" placeholder="Место регистрации  (в паспорте)")
+        .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
+          span.text-sm Адрес фактического проживания
+          base-input.input-info(v-model:value="secondaryInfo.addresses.registrationPlace" placeholder="Место проживания на данный момент")
+    base-create-button(text="Создать клиента" @click="saveClient")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "FormCreateSecondaryInfo",
+  components: { BaseCreateButton, BaseInput },
+  props: {
+    secondaryInfo: Object,
+    saveClient: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-secondary
+  max-height: 443px
+  overflow-y: auto
+  flex: auto
+  color: var(--font-grey-color)
+  &::-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)
+.input-info
+  color: var(--font-dark-blue-color)
+.title-info
+  color: var(--font-dark-blue-color)
+</style>