From 9fe57eda5e48a29764f3f99d512726be5ae24b08 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 30 Dec 2022 15:39:34 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=D0=B0=20inputs=20=D0=B2=20agreement=20=D0=B8?=
 =?UTF-8?q?=20medical?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |   1 +
 src/components/base/BaseCustomSelect.vue      |   2 +-
 src/components/base/BaseInput.vue             |   1 +
 src/components/base/BaseInputDate.vue         |   5 +-
 .../components/CalendarFormAddEvent.vue       |   8 +-
 .../FormsAgreementCreate/AgreementCommon.vue  |  64 ++++-----
 .../FormsAgreementCreate/AgreementPerson.vue  | 123 ++++++++----------
 .../AgreementServices.vue                     |  73 ++++-------
 .../components/MedicalBaseData.vue            |  47 ++++---
 .../components/MedicalIdentityDocuments.vue   |  35 +++--
 .../components/MedicalPolicyDocuments.vue     |  46 +++----
 11 files changed, 178 insertions(+), 227 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index e456214..b96acdc 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,6 +17,7 @@
   --btn-blue-color-4: rgba(65, 105, 225, 0.8)
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
+  --font-grey-color-0: #85858b
   --border-light-grey-color: #d3d4dc
   --row-overlay-color: #f5f6ff
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
diff --git a/src/components/base/BaseCustomSelect.vue b/src/components/base/BaseCustomSelect.vue
index 7c3e403..4d3853b 100644
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -108,7 +108,7 @@ export default {
   overflow-y: auto
 .placeholder
   color: #090A15
-  opacity: 0.5
+  opacity: 0.4
   text-overflow: ellipsis
   overflow: hidden
 .item
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 4cfb358..9adb94c 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -7,6 +7,7 @@
     )
       input.input.w-full.outline-0.not-italic(
         v-model="value",
+        :style="{'color': disabled && 'var(--font-grey-color-0)'}"
         :placeholder="placeholder",
         :disabled="disabled",
         :type="type"
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index c344d6d..e94ca5a 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
     .label(v-if="!!label") {{label}}
-    .field
+    .field(:class="{'placeholder-color': !modelValue}")
       input(
         v-model="value",
         type="date",      
@@ -52,10 +52,11 @@ export default {
     &::-webkit-calendar-picker-indicator
       opacity: 0
       cursor: pointer
-
 .label
   font-weight: 600
   font-size: 14px
   line-height: 16px
   opacity: 0.4
+.placeholder-color
+  color: var(--font-grey-color)
 </style>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index f4a42bc..ac88424 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -523,8 +523,8 @@ export default {
             schedules: [
               {
                 date: elem.date,
-                end_time: elem.end_time.slice(0, elem.end_time.length - 3),
-                start_time: elem.start_time.slice(
+                end_time: elem.end_time?.slice(0, elem.end_time.length - 3),
+                start_time: elem.start_time?.slice(
                   0,
                   elem.start_time.length - 3
                 ),
@@ -536,8 +536,8 @@ export default {
         } else {
           foundedElem.schedules.push({
             date: elem.date,
-            end_time: elem.end_time.slice(0, elem.end_time.length - 3),
-            start_time: elem.start_time.slice(0, elem.start_time.length - 3),
+            end_time: elem.end_time?.slice(0, elem.end_time.length - 3),
+            start_time: elem.start_time?.slice(0, elem.start_time.length - 3),
             status: elem.status,
             id: elem.id,
           });
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
index 741a00a..21b7cf0 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
@@ -1,53 +1,43 @@
 <template lang="pug">
-  .flex-col
+  .flex.flex-col.gap-y-6
     span.font-bold Общая информация
-    .flex-col
-      .flex-col.my-6
-        .counter.font-semibold.text-smm Категория
-        base-custom-select.select.text-sm(
-          placeholder="Категория договора",
-          v-model="category",
-          :items="categories",            
-        )
-      .flex.justify-between.w-full.gap-4
-        base-input-date(
-          v-model="signedDate",
-          label="Дата подписания"
-        )        
-        base-input-date(
-          v-model="startDate",
-          label="Начало оказания услуг"
-        )        
-        base-input-date(
-          v-model="endDate",
-          label="Окончание оказания услуг"
-        )
-      
-      .flex-col.w-full.my-6
-        .font-semibold.text-smm Исполнитель             
-        base-custom-select.select.text-sm(
-          placeholder="Поручить",
-          v-model="employee",
-          :items="employees",
-        )
+    base-custom-select(
+      placeholder="Категория договора",
+      v-model="category",
+      :items="categories",
+      label="Категория"          
+    )
+    .flex.justify-between.gap-4
+      base-input-date.w-48(
+        v-model="signedDate",
+        label="Дата подписания"
+      )        
+      base-input-date.w-48(
+        v-model="startDate",
+        label="Начало оказания услуг"
+      )        
+      base-input-date.w-48(
+        v-model="endDate",
+        label="Окончание оказания услуг"
+      )         
+    base-custom-select(
+      placeholder="Поручить",
+      v-model="employee",
+      :items="employees",
+      label="Исполнитель"
+    )
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton";
 import BaseStepper from "@/components/base/BaseStepper";
-import BaseSelect from "@/components/base/BaseSelect";
 import BaseInputDate from "@/components/base/BaseInputDate";
-import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 
 export default {
   name: "AgreementCommon",
   components: {
-    BaseButton,
     BaseStepper,
-    BaseSelect,
     BaseInputDate,
-    BaseInput,
     BaseCustomSelect,
   },
   data() {
@@ -72,5 +62,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped></style>
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
index e69b10b..bef81ab 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -1,81 +1,72 @@
 <template lang="pug">
-  .flex-col
-    .flex-col
-      .font-semibold.text-smm ФИО пациента 
-      base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+  .flex.flex-col.gap-y-6
+    base-input(
+      label="ФИО пациента",
+      v-model="patient.full_name"
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
       )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes"    
-        )
-    .flex-col
-      .font-semibold.text-smm ФИО Заказчика 
       base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
+      )
+    base-input(
+      v-model="patient.full_name"
+      label="ФИО Заказчика",
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
+      )
+      base-input(
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
       )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes" )
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import { mask } from "vue-the-mask";
 export default {
   name: "AgreementPerson",
   components: {
     BaseInput,
     BaseCustomSelect,
   },
+  directives: { mask },
   data() {
     return {
       patient: {
@@ -85,10 +76,8 @@ export default {
           label: "",
         },
         seriesAndNumber: "2354 125423",
-        phone: {
-          id: null,
-          label: "",
-        },
+        phone: "",
+        address: "",
       },
     };
   },
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
index fe7151b..bc3f60c 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -1,62 +1,41 @@
 <template lang="pug">
-  .flex-col
+  .flex.flex-col.gap-y-6
     span.font-bold Общая информация
-    .flex-col
-      .flex-col.my-6
-        .counter.font-semibold.text-smm Категория
-        base-custom-select.select.text-sm(
-          placeholder="Категория договора",
-          v-model="category",
-          :items="categories",            
-        )
-      .flex.w-full.my-6
-        .flex-col
-          .font-semibold.text-smm Дата подписания 
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="signedDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Начало оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="startDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Окончание оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="endDate"
-            )
-      
-      .flex-col.w-full.my-6
-        .font-semibold.text-smm Исполнитель             
-        base-custom-select.select.text-sm(
-          placeholder="Поручить",
-          v-model="employee",
-          :items="employees",
-        )
+    base-custom-select(
+      placeholder="Категория договора",
+      v-model="category",
+      :items="categories",
+      label="Категория"   
+    )
+    .flex.gap-x-4
+      base-input-date.w-48(
+        v-model="signedDate",
+        label="Дата подписания"
+      )
+      base-input-date.w-48(
+        v-model="startDate",
+        label="Начало оказания услуг"
+      )
+      base-input-date.w-48(
+        v-model="endDate",
+        label="Окончание оказания услуг"
+      )         
+    base-custom-select(
+      placeholder="Поручить",
+      v-model="employee",
+      :items="employees",
+      label="Исполнитель"
+    )
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton";
-import BaseStepper from "@/components/base/BaseStepper";
-import BaseSelect from "@/components/base/BaseSelect";
 import BaseInputDate from "@/components/base/BaseInputDate";
-import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 
 export default {
   name: "AgreementServices",
   components: {
-    BaseButton,
-    BaseStepper,
-    BaseSelect,
     BaseInputDate,
-    BaseInput,
     BaseCustomSelect,
   },
   data() {
diff --git a/src/pages/medicalCard/components/MedicalBaseData.vue b/src/pages/medicalCard/components/MedicalBaseData.vue
index bced744..ac8b23b 100644
--- a/src/pages/medicalCard/components/MedicalBaseData.vue
+++ b/src/pages/medicalCard/components/MedicalBaseData.vue
@@ -10,34 +10,35 @@
           v-model="gender",
         )
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Дата рождения
-            base-input-date.input-date.h-10(:width-input="277")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm СНИЛС
+          .input
+            base-input-date(label="Дата рождения")
+          .input
             base-input(
-              :width-input="277",
               placeholder="000–000–000 00",
-              v-mask="'###-###-### ##'"
+              v-mask="'###-###-### ##'",
+              label="СНИЛС"
             )
         .flex.flex-col.gap-y-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Адрес регистрации
-            base-input(:width-input="277", placeholder="Введите полный адрес")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Фактический адрес места жительства
-            base-input(:width-input="277", placeholder="Введите полный адрес")
+          base-input(
+            label="Адрес регистрации",
+            placeholder="Введите полный адрес"
+          )
+          base-input(
+            label="Фактический адрес места жительства",
+            placeholder="Введите полный адрес"
+          )
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Номер телефона
+          .input
             base-input(
-              :width-input="277",
+              label="Номер телефона",
               placeholder="+7 (915) 644–92–23",
               v-mask="'+7 (###) ###-##-##'"
             )
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Email
-            base-input(:width-input="277", placeholder="user@yandex.ru")
+          .input
+            base-input(
+              label="Email",
+              placeholder="user@yandex.ru"
+            )
 </template>
 
 <script>
@@ -79,10 +80,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>
diff --git a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
index c3a4978..6fac737 100644
--- a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
@@ -4,19 +4,22 @@
       span.font-bold Паспортные данные
       .flex.flex-col.gap-y-6
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер
-            base-input(:width-input="277", placeholder="0000 000000")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Дата выдачи
-            base-input-date.input-date.h-10(:width-input="277")
+          .input
+            base-input(
+              label="Серия и номер",
+              placeholder="0000 000000"
+            )
+          .input
+            base-input-date(label="Дата выдачи")
         .flex.flex-col.gap-y-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Кем выдан
-            base-input(:width-input="277", placeholder="Точно как в паспорте")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Страховая оганизация
-            base-input(:width-input="277", placeholder="Введите название организации")
+          base-input(
+            label="Кем выдан",
+            placeholder="Точно как в паспорте"
+          )
+          base-input(
+            label="Страховая оганизация",
+            placeholder="Введите название организации"
+          )
 </template>
 
 <script>
@@ -37,10 +40,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>
diff --git a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
index 7955ce1..6e5e109 100644
--- a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
@@ -4,25 +4,25 @@
       .flex.flex-col.gap-y-6
         span.font-bold Полис
         .flex.gap-x-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер полиса ОМС
-            base-input(:width-input="277", placeholder="0000 000000")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер полиса ДМС
-            base-input(:width-input="277", placeholder="0000 000000")
-    .flex.flex-col.gap-y-2
-      .counter.font-semibold.text-smm Код категории льготы
-      base-input(:width-input="277", placeholder="000")
-    .flex.flex-col.gap-y-6
-      .flex.flex-col.gap-y-2
-        .counter.font-semibold.text-smm К кому обращаться в случае необходимости 
-        base-input.w-full(placeholder="ФИО*")
-      .flex.flex-col.gap-y-2
-        .counter.font-semibold.text-smm Номер телефона
-        base-input(
-          :width-input="277",
-          placeholder="+7 (915) 644–92–23"
-        )
+          .input
+            base-input(
+              label="Серия и номер полиса ОМС",
+              placeholder="0000 000000"
+            )
+          .input
+            base-input(
+              label="Серия и номер полиса ДМС",
+              placeholder="0000 000000"
+            )
+    base-input(label="Код категории льготы", placeholder="000")
+    base-input(
+      label="К кому обращаться в случае необходимости",
+      placeholder="ФИО*"
+    )
+    base-input(
+      label="Номер телефона",
+      placeholder="+7 (915) 644–92–23"
+    )
 </template>
 
 <script>
@@ -40,10 +40,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>

From bda481cfe54c9d57a81fef90d0ccbc4a5e4692fc Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 30 Dec 2022 17:07:40 +0300
Subject: [PATCH 2/2] =?UTF-8?q?WIP=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20inputs=20=D0=B2=20SectionAddress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCustomSelect.vue      |  15 ++-
 src/components/base/BaseInput.vue             |  28 ++++-
 src/components/base/BaseSelect.vue            |  56 ++++++----
 .../components/ClientDetailSectionAddress.vue | 104 ++++++++----------
 .../schedule/components/ScheduleHeader.vue    |   2 +-
 5 files changed, 125 insertions(+), 80 deletions(-)

diff --git a/src/components/base/BaseCustomSelect.vue b/src/components/base/BaseCustomSelect.vue
index 4d3853b..ddeb22e 100644
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -1,6 +1,9 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+    .font-semibold.text-sm.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
     .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
       ref="select",
       @click="open = !open",
@@ -46,6 +49,7 @@ export default {
     center: Boolean,
     label: String,
     textStyle: String,
+    labelStyle: String,
   },
   emits: ["update:modelValue"],
   data() {
@@ -71,6 +75,15 @@ export default {
             "text-base": true,
           };
     },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
   methods: {
     clickItem(id, label) {
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 9adb94c..59aaf82 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,13 +1,17 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+    .label.font-semibold.text-sm.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
     .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
       :class="{'border-none': borderNone, 'border-error': borderError }"
       :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
     )
       input.input.w-full.outline-0.not-italic(
         v-model="value",
-        :style="{'color': disabled && 'var(--font-grey-color-0)'}"
+        :style="{'color': disabled && 'var(--font-grey-color-0)'}",
+        :class="textClass",
         :placeholder="placeholder",
         :disabled="disabled",
         :type="type"
@@ -35,6 +39,8 @@ export default {
     borderError: Boolean,
     disabled: Boolean,
     label: String,
+    textStyle: String,
+    labelStyle: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -46,6 +52,24 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    textClass() {
+      return this.textStyle
+        ? {
+            [this.textStyle]: true,
+          }
+        : {
+            "text-base": true,
+          };
+    },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
 };
 </script>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 98d7c67..028a483 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,23 +1,29 @@
 <template lang="pug">
-  .base-select(
-    @click="invertOpen",
-    :class="{'open': open && !disable, 'border-none': borderNone}",
-    ref="select"
-  )
-    .placeholder(
-      :class="{'value-color': value || placeholderOpacity, ...textClass}",
-      :style="{'color': !disable || '#9ca3af', 'opacity': 1}"
-    ) {{ value || placeholder }}
-    .flex.items-center
-      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
-      span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
-    base-menu(v-if="open")
-      .items-container(
-        @click="open = false",
-        v-click-outside="leaveSelect",
-        :class="textClass"
-      )
-        .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
+  .flex.flex-col.gap-y-2
+    .font-semibold.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
+    .base-select(
+      @click="invertOpen",
+      :class="{'open': open && !disable, 'border-none': borderNone}",
+      :style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
+      ref="select"
+    )
+      .placeholder(
+        :class="{'value-color': value || placeholderOpacity, ...textClass}",
+        :style="{'color': !disable || '#9ca3af', 'opacity': 1}"
+      ) {{ value || placeholder }}
+      .flex.items-center
+        .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+        span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
+      base-menu(v-if="open")
+        .items-container(
+          @click="open = false",
+          v-click-outside="leaveSelect",
+          :class="textClass"
+        )
+          .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
 </template>
 
 <script>
@@ -37,6 +43,8 @@ export default {
     placeholderOpacity: Boolean,
     disable: Boolean,
     textStyle: String,
+    labelStyle: String,
+    label: String,
   },
   emits: ["update:modelValue"],
   data() {
@@ -62,6 +70,15 @@ export default {
             "text-base": true,
           };
     },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
   methods: {
     clickItem(id) {
@@ -80,6 +97,7 @@ export default {
 <style scoped lang="sass">
 .base-select
   width: 100%
+  height: 40px
   border: 1.5px solid #D3D4DC
   border-radius: 4px
   padding: 9px 16px
diff --git a/src/pages/clients/components/ClientDetailSectionAddress.vue b/src/pages/clients/components/ClientDetailSectionAddress.vue
index 2dbb071..3e8d9de 100644
--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/src/pages/clients/components/ClientDetailSectionAddress.vue
@@ -1,56 +1,55 @@
 <template lang="pug">
   .flex.flex-col.gap-y-4
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Город
-      base-select.select.text-sm(
-        disable,
-        textStyle="text-sm",
-        placeholder="Введите город",
-        v-model="dopeAddress.city",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Область
-      base-input.text-sm.input-info(
-        disabled,
-        placeholder="Введите область",
-        v-model="dopeAddress.region",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Улица
-      base-input.text-sm.input-info(
-        disabled,
-        placeholder="Введите улицу",
-        v-model="dopeAddress.street",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
+    base-select(
+      disable,
+      textStyle="text-sm",
+      labelStyle="text-xxs",
+      placeholder="Введите город",
+      v-model="dopeAddress.city",
+      label="Город"
+    )
+    base-input(
+      disabled,
+      placeholder="Введите область",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+      v-model="dopeAddress.region",
+      label="Область"
+    )
+    base-input(
+      disabled,
+      placeholder="Введите улицу",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+      v-model="dopeAddress.street",
+      label="Улица"
+    )
     .flex.gap-x-4
-      .flex.flex-col(class="gap-y-1.5")
-        .text-info.text-xxs.font-semibold Дом
-        base-input.text-sm.input-info(
-          disabled,
-          placeholder="Дом",
-          v-model="dopeAddress.house",
-          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-        )
-      .flex.flex-col(class="gap-y-1.5")
-        .text-info.text-xxs.font-semibold Квартира
-        base-input.text-sm.input-info(
-          disabled,
-          placeholder="Квартира",
-          v-model="dopeAddress.flat",
-          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-        )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Индекс
-      base-input.text-sm.input-info(
+      base-input(
         disabled,
-        v-mask="'######'",
-        placeholder="000000",
-        v-model="dopeAddress.index",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+        placeholder="Дом",
+        label="Дом"
+        v-model="dopeAddress.house",
+        labelStyle="text-xxs",
+        textStyle="text-sm",
       )
+      base-input(
+        disabled,
+        placeholder="Квартира",
+        label="Квартира",
+        v-model="dopeAddress.flat",
+        labelStyle="text-xxs",
+        textStyle="text-sm",
+      )
+    base-input(
+      disabled,
+      v-mask="'######'",
+      placeholder="000000",
+      label="Индекс",
+      v-model="dopeAddress.index",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+    )
 </template>
 
 <script>
@@ -69,12 +68,3 @@ export default {
   directives: { mask },
 };
 </script>
-
-<style lang="sass" scoped>
-.input-info
-  color: var(--font-dark-blue-color)
-.text-info
-  color: var(--font-grey-color)
-.select
-  height: 40px
-</style>
diff --git a/src/pages/schedule/components/ScheduleHeader.vue b/src/pages/schedule/components/ScheduleHeader.vue
index 0282513..c730d96 100644
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -28,7 +28,7 @@
           )
           .text.flex.items-center
             .text.font-medium.text-base {{ dateString }}
-              .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
+            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
         base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>