Merge branch 'master' into 'UC-190'

# Conflicts: # src/pages/schedule/components/FormChangeShift.vue
2022-12-29 14:44:08 +00:00
parent 01e5ed06b2 fb80446d24
commit 6d24f1d5ee
42 changed files with 614 additions and 381 deletions
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -2,7 +2,7 @@
  .flex.w-full(class="gap-x-1.5")
    .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
-    base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
+    base-input.w-full(v-model="value.username", placeholder="Ссылкa")
 </template>

 <script>
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -38,7 +38,7 @@
                  img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
                  base-button(:rounded="true", :size="48", @click="closeAddImage")
                    .icon-ok
-        base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
+        base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
    .flex.flex-col.flex-auto.l.gap-y-8
      .flex.px-4
        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -1,10 +1,13 @@
 <template lang="pug">
+  .flex.flex-col.gap-y-2
+    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+      ref="select",
      @click="open = !open",
      :class="{'open': open, 'border-none': borderNone}",
    )
      .placeholder.text-base.flex.items-center(
-      :class="{'value-color': value.label || placeholderOpacity}"
+        :class="{'value-color': value.label || placeholderOpacity}",
      ) {{ value.label || placeholder }}
      .flex.items-center
        .select-form-separator.cursor-pointer.mr-4(v-if="separator")
@@ -14,7 +17,8 @@
      )
        .items-container.mt-1(
          @click="closeOptions",
-        v-click-outside="leaveSelect"
+          v-click-outside="leaveSelect",
+          :class="textClass"
        )
          .item.py-2.px-4.cursor-pointer(
            v-for="item in items",
@@ -40,6 +44,8 @@ export default {
    separator: Boolean,
    placeholderOpacity: Boolean,
    center: Boolean,
+    label: String,
+    textStyle: String,
  },
  emits: ["update:modelValue"],
  data() {
@@ -56,6 +62,15 @@ export default {
        this.$emit("update:modelValue", value);
      },
    },
+    textClass() {
+      return this.textStyle
+        ? {
+            [this.textStyle]: true,
+          }
+        : {
+            "text-base": true,
+          };
+    },
  },
  methods: {
    clickItem(id, label) {
@@ -82,13 +97,14 @@ export default {
  border-radius: 4px
  background-color: white
  user-select: none
+  height: 40px
  &.open
    border: 1.5px solid #4772F2
 .items-container
  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
  border-radius: 4px
  background-color: white
-  max-height: 140px
+  max-height: 142px
  overflow-y: auto
 .placeholder
  color: #090A15
--- a/src/components/base/BaseDetailInfo.vue
+++ b/src/components/base/BaseDetailInfo.vue
@@ -0,0 +1,34 @@
+<template lang="pug">
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
+    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4
+      span.text-sm.font-semibold.whitespace-normal {{title}}
+    .flex.items-center.gap-x-8
+    .section-add.flex.justify-center.items-center.cursor-pointer Добавить данные
+</template>
+
+<script>
+export default {
+  name: "BaseDetailInfo",
+  props: {
+    title: String,
+    height: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.section-wrapper
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+  &.click
+    background-color: var(--light-grey-bg-color)
+
+.section-header
+  min-height: 44px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.section-add
+  height: 100%
+  color: var(--btn-blue-color)
+</style>
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,32 +1,28 @@
 <template lang="pug">
+  .flex.flex-col.gap-y-2
+    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
    .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    :class="{'border-none': borderNone, 'date-input': dateInput}",
-    :style="{ minWidth: widthInput + 'px' }"
+      :class="{'border-none': borderNone, 'border-error': borderError }"
+      :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
    )
      input.input.w-full.outline-0.not-italic(
-      :class="{date:type === 'date'}",
-      :value="value",
-      :type="type",
-      @input="$emit('update:value', $event.target.value)",
+        v-model="value",
        :placeholder="placeholder",
-      :maxLength="maxLength",
-      :max="maxDate",
-      :disabled="disabled"
+        :disabled="disabled",
+        :type="type"
      )
      .slot(v-if="withIcon", :class="iconPosition")
        slot.cursor-pointer
 </template>

 <script>
-//TODO: Переписать v-model:value, убрать лишнии пропсы, добавить label или вынести в отдельную компоненту
 export default {
  name: "BaseInput",
  props: {
    type: {
      default: "text",
    },
-    maxLength: Number,
-    value: String,
+    modelValue: String,
    withIcon: {
      default: false,
    },
@@ -34,11 +30,21 @@ export default {
      default: "right",
    },
    placeholder: String,
-    widthInput: Number,
    borderNone: Boolean,
+    borderError: Boolean,
    disabled: Boolean,
-    maxDate: String,
-    dateInput: Boolean,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
  },
 };
 </script>
@@ -55,12 +61,14 @@ export default {
  background-color: var(--default-white)
  color: var(--font-black-color)
  height: 40px
-.date
-  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
-  &::-webkit-calendar-picker-indicator
-    opacity: 0
 .border-none
  border: none
+.border-error
+  border-color: var(--border-red-color)
 .input
  background-color: inherit
+  &:disabled, &[disabled]
+    background-color: var(--bg-disable-grey-color)
+.label
+  color: var(--font-black-color)
 </style>
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col
+  .flex.flex-col.gap-y-2
    .label(v-if="!!label") {{label}}
    .field
      input(
@@ -37,7 +37,7 @@ export default {

 <style lang="sass" scoped>
 .field
-  height: 100%
+  height: 40px
  display: flex
  align-items: center
  border: 1.5px solid var(--border-light-grey-color)
@@ -56,5 +56,6 @@ export default {
 .label
  font-weight: 600
  font-size: 14px
-  line-height: 135%
+  line-height: 16px
+  opacity: 0.4
 </style>
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -1,14 +1,11 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(
-    class="py-2.5"
-    :style="{ minWidth: widthInput + 'px' }"
-  )
+  .flex.flex-col.gap-y-2
+    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+    .input-wrapper.flex.gap-x-2.px-4.box-border.py-2.h-10
      input.input.w-full.outline-0.not-italic.cursor-text(
-      :value="value"
+        v-model="value"
        type="time"
-      @input="$emit('update:value', $event.target.value)"
        :placeholder="placeholder"
-      :maxlength="maxLength"
      )
      .slot(v-if="withIcon" :class="iconPosition")
        slot.cursor-pointer
@@ -18,8 +15,7 @@
 export default {
  name: "BaseInputTime",
  props: {
-    maxLength: Number,
-    value: String,
+    modelValue: String,
    withIcon: {
      default: false,
    },
@@ -27,7 +23,18 @@ export default {
      default: "right",
    },
    placeholder: String,
-    widthInput: Number,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
  },
 };
 </script>
@@ -41,6 +48,7 @@ export default {
  border-radius: 4px
  background-color: var(--default-white)
  color: var(--font-black-color)
+  border: 1.5px solid var(--border-light-grey-color)
 input::-webkit-calendar-picker-indicator
  cursor: pointer
 </style>
--- a/src/components/base/BaseOptions.vue
+++ b/src/components/base/BaseOptions.vue
@@ -8,7 +8,7 @@ export default {
  name: "BaseOptions",
  computed: {
    parent() {
-      return this.$parent.$el;
+      return this.$parent.$refs.select;
    },
    parentSize() {
      return this.parent?.getBoundingClientRect();
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-  .base-select(@click="invertOpen", :class="{'open': open && !disable, 'border-none': borderNone}")
+  .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}"
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -7,53 +7,44 @@
      .flex.pt-2
        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
    .flex.flex-col.gap-y-8
-      .flex.flex-col.gap-y-2
-        span.text-xxs.opacity-40.font-bold.leading-3 Статус приема
-        base-custom-select.select(
+      base-custom-select(
        v-if="selectedEventData.id"
        v-model="status",
        :items="eventStatuses",
-          placeholder="Статус приема"
+        label="Статус приема"
      )
      base-input(
        v-else,
        disabled,
-          v-model:value="status.label"
+        v-model="status.label",
+        label="Статус приема"
      )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-xxs.opacity-40.font-bold Сотрудник
-        base-custom-select.select(
+      base-custom-select(
        :items="ownersList",
        v-model="employees.employee",
        placeholder="Выберите сотрудника"
+        label="Сотрудник"
      )
-        
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-xxs.opacity-40.font-bold Клиент
-        base-custom-select.select(
+      base-custom-select(
        :items="membersList",
        v-model="members.person",
        placeholder="Выберите клиента",
+        label="Клиент"
      )
-    .flex.flex-col.gap-y-8
    .flex.gap-x-4
-        .flex.gap-x-2
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Дата
-            base-input-date.h-10(v-model="eventDate")
+      base-input-date(
+        v-model="eventDate",
+        label="Дата"
+      )
      .flex.gap-x-2.items-center
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Начало
-            base-input-time.item-input.text-base.select(
-              v-model:value="startTime",
-              :width-input="72"
+        base-input-time.item-input.text-base(
+          v-model="startTime",
+          label="Начало"
        )
        span.mt-4 —
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Конец
-            base-input-time.item-input.text-base.select(
-              v-model:value="endTime",
-              :width-input="72"
+        base-input-time.item-input.text-base(
+          v-model="endTime",
+          label="Конец"
        )
    base-button.create-button.text-base.font-semibold(
      v-if="!selectedEventData.id",
@@ -597,7 +588,6 @@ export default {

 <style lang="sass" scoped>
 .event-form
-  height: fit-content
  width: 634px
  background-color: var(--default-white)
  box-shadow: var(--default-shadow)
@@ -613,18 +603,12 @@ export default {
  appearance: none
  border: none
  outline: none
-  height: 40px
  &::-webkit-calendar-picker-indicator
    display: none
    -webkit-appearance: none
  &::placeholder
    color: var(--font-black-color-1)

-.time-input
-  width: 72px
-  border-radius: 4px
-  background-color: var(--default-white)
-
 .date-input
  width: 174px
  border-radius: 4px
@@ -644,7 +628,6 @@ export default {
  width: 183px

 .select
-  height: 40px
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px

--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -106,7 +106,7 @@
            client-detail-input.text-sm.w-max-fit(
              v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
              :style="{fontWeight:key === 'number'&&600}",
-              v-model:value="sectionInfo[key]",
+              v-model="sectionInfo[key]",
              :rows="section ==='pass' ? 2 : 1",
              :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
              :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
@@ -138,7 +138,7 @@
              client-detail-input.text-sm.w-max-fit.pr-12.relative(
                :maxLength="40",
                :style="{fontWeight:key === 'number'&&600}",
-                v-model:value="sectionInfo[key].title",
+                v-model="sectionInfo[key].title",
                placeholder="Заголовок"
              )
                .text.flex.absolute.text-xsx.top-18px(
@@ -149,7 +149,7 @@
              client-detail-input.text-sm.w-max-fit(
                :maxLength="40",
                :style="{fontWeight:key === 'number'&&600}",
-                v-model:value="sectionInfo[key].description",
+                v-model="sectionInfo[key].description",
                placeholder="Описание"
              )
            .flex.items-center(v-if="item?.title && section !== 'additional'")
@@ -250,7 +250,7 @@ export default {
        pdf: pdfIcon,
        xls: exelIcon,
      },
-      isOpenPackage: true,
+      isOpenPackage: false,
      isOpenAddDoc: false,
      showModal: false,
    };
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -3,16 +3,14 @@
    textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
      v-if="!sharp"
      :rows="textareaRows",
-      :value="value",
+      v-model="value",
      :cols="24",
-      @input="$emit('update:value', $event.target.value)",
      :placeholder="placeholder",
      :maxLength="maxLength"
    )
    input.w-full.outline-0.not-italic.font-medium(
      v-else,
-      :value="value",
-      @input="$emit('update:value', $event.target.value)",
+      v-model="value",
      :placeholder="placeholder",
      v-mask="sharp"
    ) 
@@ -23,15 +21,14 @@
 import { mask } from "vue-the-mask";
 export default {
  name: "ClientDetailInput",
+  emits: ["update:modelValue"],
  props: {
-    value: String,
+    modelValue: String,
    width: Number,
    sharp: String,
-    placeholder: {
-      default: "Поиск",
-    },
    rows: Number,
    maxLength: Number,
+    placeholder: String,
  },
  directives: { mask },
  computed: {
@@ -42,6 +39,14 @@ export default {
      if (this.value.length <= 22) return this.rows;
      return Math.ceil(this.value.length / 22);
    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/src/pages/clients/components/ClientDetailSectionAddress.vue
@@ -14,7 +14,7 @@
      base-input.text-sm.input-info(
        disabled,
        placeholder="Введите область",
-        v-model:value="dopeAddress.region",
+        v-model="dopeAddress.region",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
    .flex.flex-col(class="gap-y-1.5")
@@ -22,7 +22,7 @@
      base-input.text-sm.input-info(
        disabled,
        placeholder="Введите улицу",
-        v-model:value="dopeAddress.street",
+        v-model="dopeAddress.street",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
    .flex.gap-x-4
@@ -31,7 +31,7 @@
        base-input.text-sm.input-info(
          disabled,
          placeholder="Дом",
-          v-model:value="dopeAddress.house",
+          v-model="dopeAddress.house",
          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
        )
      .flex.flex-col(class="gap-y-1.5")
@@ -39,7 +39,7 @@
        base-input.text-sm.input-info(
          disabled,
          placeholder="Квартира",
-          v-model:value="dopeAddress.flat",
+          v-model="dopeAddress.flat",
          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
        )
    .flex.flex-col(class="gap-y-1.5")
@@ -48,7 +48,7 @@
        disabled,
        v-mask="'######'",
        placeholder="000000",
-        v-model:value="dopeAddress.index",
+        v-model="dopeAddress.index",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
 </template>
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/src/pages/clients/components/ClientsActionPopup.vue
@@ -8,7 +8,7 @@
      .button.keep-redaction.flex.gap-x-3
        .icon-star-off.icon
        span На ведение
-      .button.keep-redaction.flex.gap-x-3(@click="createMedicalCard(clientId)")
+      .button.keep-redaction.flex.gap-x-3(@click="createMedicalCard")
        .icon-star-off.icon
        span Мед. карта
      .button.delete.flex.gap-x-3(
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -271,9 +271,7 @@ export default {
      }
      if (action === "medical") {
        if (id) {
-          fetchWrapper
-            .get(`medical_card/medical_history/${id}/detail/`)
-            .then((res) => this.saveDataMedicalHistory(res));
+          localStorage.setItem("medicalId", id);
          this.$router.push("medical-card");
        } else {
          this.titleModal = "Создать мед.карту";
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -5,7 +5,7 @@
        base-input(
          :with-icon="true",
          icon-position="left",
-          v-model:value="searchClient",
+          v-model="searchClient",
          placeholder="Введите фамилию",
          @keyup.enter="searchLastName"
        )
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -21,7 +21,6 @@
            clients-action-popup(
              v-if="isOpenPopup",
              :open-change-data="openChangeData",
-              :client-id="client.id",
              :disabled-delete="!!deletedClientId && !rowOverlay",
              @delete-client="transmitDeleteClient",
              :create-medical-card="transmitMedicalCard"
--- a/src/pages/clients/components/FormCreateAdditional.vue
+++ b/src/pages/clients/components/FormCreateAdditional.vue
@@ -3,7 +3,7 @@
    .flex.flex-col.gap-y-6.w-full.px-4
      .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="Заголовок")
+          base-input(v-model="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
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -1,66 +1,51 @@
 <template lang="pug">
  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
    .flex.flex-col.gap-y-6.px-4
-      .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
-        span.text-sm.font-semibold Полный адрес
      base-input.input-info(
-          v-model:value="addresses.full_address",
-          placeholder="Введите адрес целиком"
+        v-model="addresses.full_address",
+        placeholder="Введите адрес целиком",
+        label="Полный адрес"
      )
      .flex.items-center.justify-center.relative
        .line.absolute
        span.text-sm.separator.px-2 или
      .grid.grid-cols-2.gap-y-6.gap-x-4
-        .flex.flex-col(class="gap-y-1.5")
-          .text-info.text-xxs.font-semibold Город
        base-input.input-info(
          disabled,
          placeholder="Введите город",
-            v-model:value="addresses.city",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.city",
+          label="Город"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Область
        base-input.input-info(
          disabled,
          placeholder="Введите область",
-            v-model:value="addresses.region",
-
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.region",
+          label="Область"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Улица
        base-input.input-info(
          disabled,
          placeholder="Введите улицу",
-            v-model:value="addresses.street",
-
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.street",
+          label="Введите улицу"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Дом
        base-input.input-info(
          disabled,
          placeholder="Номер дома",
-            v-model:value="addresses.house_number",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.house_number",
+          label="Дом"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Квартира
        base-input.input-info(
          disabled,
          placeholder="Номер квартиры",
-            v-model:value="addresses.apartment_number",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.apartment_number",
+          label="Квартира"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Индекс
        base-input.input-info(
          disabled,
          placeholder="000000",
          v-mask="'######'",
-            v-model:value="addresses.zip_code",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          v-model="addresses.zip_code",
+          label="Индекс"
        )
    .px-4
      base-button(@click="saveClient" :size="40")
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -1,35 +1,29 @@
 <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.px-4
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Приоритет
-        base-custom-select(
+      base-custom-select.input-info(
        :items="priorityList",
        placeholder="Приоритет клиента",
-          v-model="basicInfo.priority"
+        v-model="basicInfo.priority",
+        label="Приоритет"
      )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Дата рождения
      base-input-date.input-info(
        v-model="basicInfo.birth_date",
+        label="Дата рождения"
      )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Номер телефона
      base-input.input-info(
-          v-model:value="phone.username",
+        v-model="phone.username",
        placeholder="+7 (915) 644–92–23",
        v-mask="'+7 (###) ###-##-##'",
-          :width-input="277"
+        label="Номер телефона"
      )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Email
      base-input.input-info(
-          v-model:value="email.username",
+        v-model="email.username",
        placeholder="user@yandex.ru",
-          :width-input="277"
+        label="Email"
      )
      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
-        span.text-sm Ссылки на соцсети
+        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
          base-adding-network(
            :list-adding-networks="networks.settings",
@@ -100,7 +94,6 @@ export default {
    background-color: var(--btn-blue-color)
 .input-info
  color: var(--font-dark-blue-color)
-  height: 40px
 .obligatory
  color: var(--font-obligatory-color)
 .add-network
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -3,58 +3,44 @@
    .flex.flex-col.gap-y-6.px-4
      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-mask="'#### ######'",
-            v-model:value="identityDocument.pass.series_number",
+          v-model="identityDocument.pass.series_number",
          placeholder="0000 000000",
-            :width-input="277"
+          label="Серия и номер"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Кем выдан
        base-input.input-info(
-            v-model:value="identityDocument.pass.issued_by_org",
+          v-model="identityDocument.pass.issued_by_org",
          placeholder="Точно как в паспорте",
-            :width-input="277"
+          label="Кем выдан"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Код подразделения
        base-input.input-info(
          v-mask="'###-###'",
-            v-model:value="identityDocument.pass.issued_by_org_code",
+          v-model="identityDocument.pass.issued_by_org_code",
          placeholder="000–000",
-            :width-input="277"
+          label="Код подразделения"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Дата выдачи
        base-input-date.input-info.h-10(
          v-model="identityDocument.pass.issued_by_date",
          placeholder="Дата",
-            :width-input="277"
+          label="Дата выдачи"
        )
    .flex.flex-col.gap-y-6.px-4
      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(
          disabled,
          v-mask="'###-###-### ##'",
-            v-model:value="identityDocument.snils.number",
+          v-model="identityDocument.snils.number",
          placeholder="000–000–000 00",
-            :width-input="277",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          label="Номер СНИЛС"
        )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Номер ИНН
        base-input.input-info(
          disabled,
          v-mask="'############'",
-            v-model:value="identityDocument.inn.number",
+          v-model="identityDocument.inn.number",
          placeholder="000000000000",
-            :width-input="277",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+          label="Номер ИНН"
        )
    .px-4
      base-button(@click="saveClient" :size="40")
--- a/src/pages/clients/components/FormCreateMedicalCard.vue
+++ b/src/pages/clients/components/FormCreateMedicalCard.vue
@@ -51,9 +51,6 @@ export default {
    MedicalPolicyDocuments,
    BaseStepper,
  },
-  props: {
-    selectedClientId: String,
-  },
  data() {
    return {
      isBaseData: true,
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -4,7 +4,7 @@
      .font-semibold.text-smm ФИО пациента 
      base-input(
        :width-input="200",
-        v-model:value="patient.full_name"
+        v-model="patient.full_name"
      )
    .flex
      .flex-col
@@ -17,7 +17,7 @@
      .flex-col
        .font-semibold.text-smm Серия и номер
        base-input(
-          v-model:value="patient.seriesAndNumber", 
+          v-model="patient.seriesAndNumber", 
          disabled,                  
        )
    .flex
@@ -37,7 +37,7 @@
      .font-semibold.text-smm ФИО Заказчика 
      base-input(
        :width-input="200",
-        v-model:value="patient.full_name"
+        v-model="patient.full_name"
      )
    .flex
      .flex-col
@@ -50,7 +50,7 @@
      .flex-col
        .font-semibold.text-smm Серия и номер
        base-input(
-          v-model:value="patient.seriesAndNumber", 
+          v-model="patient.seriesAndNumber", 
          disabled,                  
        )
    .flex
@@ -80,9 +80,15 @@ export default {
    return {
      patient: {
        full_name: "",
-        doc_type: "",
+        doc_type: {
+          id: null,
+          label: "",
+        },
        seriesAndNumber: "2354 125423",
-        phone: {},
+        phone: {
+          id: null,
+          label: "",
+        },
      },
    };
  },
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -15,21 +15,21 @@
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="signedDate"
+              v-model="signedDate"
            )
        .flex-col
          .font-semibold.text-smm Начало оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="startDate"
+              v-model="startDate"
            )
        .flex-col
          .font-semibold.text-smm Окончание оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="endDate"
+              v-model="endDate"
            )
      
      .flex-col.w-full.my-6
--- a/src/pages/clients/components/StepperCreateAgreement.vue
+++ b/src/pages/clients/components/StepperCreateAgreement.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.justify-between(style="height: 500px")
+  .flex.flex-col.gap-y-6.justify-between
    .flex.flex-col.gap-y-6
      span.font-bold.text-xl Договор
      .flex.self-center
--- a/src/pages/clients/components/TableAddingNewAdditional.vue
+++ b/src/pages/clients/components/TableAddingNewAdditional.vue
@@ -3,7 +3,7 @@
    .corner
    .wrap.flex.flex-col.p-4.gap-y-4
      .flex.flex-col.gap-y-1
-        base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
+        base-input(:with-icon="true" v-model="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
          span.counter {{`${newAdditionalData.header.length}/140`}}
        .description.flex.px-4.py-3
          textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
--- a/src/pages/clients/components/TableCreateNote.vue
+++ b/src/pages/clients/components/TableCreateNote.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .flex.flex-col.gap-y-3
    .flex.flex-col.gap-y-3.relative
-      base-input.text-smm(placeholder="Заголовок", v-model:value="title", :maxLength="40")
+      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40")
      .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
    .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
      textarea.place-input.w-full.outline-0.not-italic.resize-none(
--- a/src/pages/clients/components/TableCreatePackageDoc.vue
+++ b/src/pages/clients/components/TableCreatePackageDoc.vue
@@ -16,7 +16,7 @@
        .flex.flex-col(class="gap-y-1.5")
          .counter.font-semibold.text-smm ФИО
          base-input(
-            v-model:value="patient",
+            v-model="patient",
            placeholder="Введите название для пакета документов"
          )
            span.counter 
--- a/src/pages/clients/components/cells/ClientsTableCellHeader.vue
+++ b/src/pages/clients/components/cells/ClientsTableCellHeader.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .flex.box-border.justify-between.items-center(
-    :style="{ minWidth : width + 'px', maxWidth: width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
+    :style="{ width : width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
    :class="{width:generateWidth}"
  )
    span.text-sm(v-if="title") {{title}}
--- a/src/pages/clients/components/cells/TableCellBodyBirthday.vue
+++ b/src/pages/clients/components/cells/TableCellBodyBirthday.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full.text-sm(
-    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }"
+    :style="{ width : width + 'px'}"
  )
    span(v-if="!isOpenChange") {{ birthday }}
    base-input-date.input.h-10(
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -7,11 +7,11 @@
      @mouseover="changeHover",
      @mouseleave="changeHover"
    ) {{maxValue}}
+    .email
      base-input(
        v-if="isOpenChange",
-      :width-input="234",
        @click.stop,
-      v-model:value="value.email.username",
+        v-model="value.email.username",
        :placeholder="value.email.username"
      )
 </template>
@@ -45,3 +45,8 @@ export default {
  },
 };
 </script>
+
+<style lang="sass" scoped>
+.email
+  width: 234px
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,17 +1,15 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
-    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
+    :style="{ width : width + 'px'}",
  )
    base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
    base-avatar(:size="36", v-else)
      img.h-full.object-cover(:src="url + photo")
    span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
+    .name(v-if="isOpenChange")
      base-input(
-      v-if="isOpenChange",
        @click.stop,
-      type="text",
-      v-model:value="value.fullName",
-      :width-input="300",
+        v-model="value.fullName",
        placeholder="Фамилия Имя Отчество"
      )
 </template>
@@ -41,4 +39,6 @@ export default {
  border-radius: 50%
  background-color: var(--font-grey-color)
  color: var(--font-dark-blue-color)
+.name
+  width: 300px
 </style>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth: width + 'px', maxWidth: width + 'px' }")
+  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
    .flex.gap-x-1
      .text-xl.icon.relative(
        v-for="network in getNetworks",
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -1,13 +1,12 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ width : width + 'px' }")
    span.text-sm(
      v-if="!isOpenChange"
    ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
+    .phone(v-if="isOpenChange")
      base-input(
-      v-if="isOpenChange",
        @click.stop,
-      :width-input="154",
-      v-model:value="value.phone.username",
+        v-model="value.phone.username",
        :placeholder="value.phone.username",
        v-mask="'+7 (###) ###-##-##'"
      )
@@ -27,3 +26,8 @@ export default {
  directives: { mask },
 };
 </script>
+
+<style lang="sass" scoped>
+.phone
+  width: 158px
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ width : width + 'px'}")
    .flex.gap-x-2.items-center(v-if="!isOpenChange")
      .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
      span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}
    .flex.gap-x-2.text-sm(class="w-[164px]")
-      base-select(v-if="isOpenChange", @click.stop :items="getPriorityList", v-model="value.priority")
+      base-select(
+        v-if="isOpenChange",
+        @click.stop :items="getPriorityList",
+        v-model="value.priority",
+        textStyle="text-sm"
+      )
 </template>

 <script>
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -53,7 +53,7 @@ export const column = [
    name: "phone",
    title: "Телефон",
    iconHead: false,
-    width: 170,
+    width: 200,
  },
  {
    name: "email",
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -9,19 +9,17 @@
          .text-under.flex.not-italic.font-medium.text-base(
            :style="{color: this.underTextColor}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
        .flex.flex-col.gap-y-5
-          .flex.flex-col.gap-y-6px
-            .flex.non-italic.font-semibold.text-xss Логин
-            base-input.h-12.font-medium(
-              :style="{borderColor: wrongData ? this.redColor : ''}",
-              v-model:value="user.username",
-              type="text",
-              placeholder="Введите ваш логин"
+          base-input.font-medium(
+            :borderError="wrongData",
+            v-model="user.username",
+            placeholder="Введите ваш логин",
+            label="Логин"
          )
          .flex.flex-col.gap-y-6px.relative
-            .flex.non-italic.font-semibold.text-xss Пароль
-            base-input.h-12(
-              :style="{borderColor: wrongData ? this.redColor : ''}",
-              v-model:value="user.password",
+            .flex.non-italic.font-semibold.text-sm.opacity-40 Пароль
+            base-input(
+              :borderError="wrongData",
+              v-model="user.password",
              :type="changeType",
              placeholder="Введите ваш пароль"
            )
--- a/src/pages/medicalCard/components/MedicalCardWrapper.vue
+++ b/src/pages/medicalCard/components/MedicalCardWrapper.vue
@@ -1,10 +1,96 @@
 <template lang="pug">
  .wrapper.flex.w-full.relative.mx-2
    .wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
+      base-detail-info(:title="configData.identity_document.title" :height="configData.identity_document.height")
+      .flex.flex-col.gap-30px
+        base-detail-info(:title="configData.registration_address.title" :height="configData.registration_address.height")
+        base-detail-info(:title="configData.temporary_address.title" :height="configData.temporary_address.height")
+      .flex.flex-col.gap-2
+        base-detail-info(:title="configData.snils.title" :height="configData.snils.height")
+        base-detail-info(:title="configData.policy_number_series.title" :height="configData.policy_number_series.height")
+      base-detail-info(:title="configData.policy_organization.title" :height="configData.policy_organization.height")
+      .flex.flex-col.gap-4
+        base-detail-info(:title="configData.additional.title" :height="configData.additional.height")
+        base-detail-info(:title="configData.agreement_form.title" :height="configData.agreement_form.height")
 </template>

 <script>
-export default { name: "MedicalCardWrapper" };
+import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import BaseInput from "@/components/base/BaseInput.vue";
+import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
+export default {
+  name: "MedicalCardWrapper",
+  components: { ClientDetailInput, BaseInput, BaseDetailInfo },
+  data() {
+    return {
+      configData: medicalDetailConfig,
+      medicalDataInit: {},
+    };
+  },
+  methods: {
+    saveDataMedical(data) {
+      const confidant = data ? data["confidant"] : undefined;
+      const pass = data
+        ? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
+        : null;
+      this.medicalDataInit = {
+        ...data,
+        identity_document: {
+          ...pass,
+          number_series: `${pass.series} ${pass.number}`,
+        },
+        registration_address: {
+          registration_address: data?.person?.address?.find(
+            (el) => !el["registration_flg"]
+          )?.join_adress,
+        },
+        temporary_address: {
+          temporary_address: data?.person?.address?.find(
+            (el) => !el["temporary_registration_flg"]
+          )?.join_adress,
+        },
+        snils: {
+          ...data?.person["insurance_number"],
+        },
+        policy: {
+          ...data?.person["insurance_policy"][0],
+        },
+        policy_organization: {
+          ...data?.person["insurance_policy"][0],
+        },
+        additional: {
+          name_confidant: confidant
+            ? `${confidant?.last_name} ${confidant?.last_name} ${confidant?.patronymic}`
+            : null,
+          phone_confidant: confidant?.contacts?.find(
+            (el) => el?.kind === "PHONE"
+          ),
+        },
+        benefit_code: {
+          benefit_code: data?.benefit_code,
+        },
+        agreement_form: {
+          agreement: data?.agreement,
+          agreement_date: null,
+        },
+      };
+    },
+    async fetchDataMedicalCard() {
+      await fetchWrapper
+        .get(
+          `medical_card/medical_history/${localStorage.getItem(
+            "medicalId"
+          )}/detail/`
+        )
+        .then((res) => this.saveDataMedical(res));
+    },
+  },
+  mounted() {
+    this.fetchDataMedicalCard();
+  },
+};
 </script>

 <style lang="sass" scoped>
@@ -15,4 +101,17 @@ export default { name: "MedicalCardWrapper" };
 .wrapper-medical
  background-color: var(--default-white)
  height: calc(100vh - 64px)
+  display: grid
+  grid-template-columns: 280px 292px 180px 360px 463px
+  gap: 16px
+  overflow: auto
+  &::-webkit-scrollbar
+    height: 4px
+    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)
 </style>
--- a/src/pages/medicalCard/utils/medicalConfig.js
+++ b/src/pages/medicalCard/utils/medicalConfig.js
@@ -0,0 +1,128 @@
+export const medicalDetailConfig = {
+  identity_document: {
+    height: 366,
+    title: "Паспортные данные",
+    fields: [
+      {
+        label: "number_series",
+        title: "Серия и номер",
+        type: "input",
+        copy: true,
+      },
+      {
+        label: "issued_by_org",
+        title: "Выдан",
+        type: "input",
+      },
+      {
+        label: "issued_by_org_code",
+        title: "Код подразделения",
+        type: "input",
+      },
+      {
+        label: "issued_by_date",
+        title: "Дата выдачи",
+        type: "data",
+      },
+    ],
+  },
+  registration_address: {
+    height: 130,
+    title: "Адреес регистрации",
+    fields: [
+      {
+        label: "registration_address",
+        title: "Полный адрес",
+        type: "input",
+      },
+    ],
+  },
+  temporary_address: {
+    height: 130,
+    title: "Адреес проживания",
+    fields: [
+      {
+        label: "temporary_address",
+        title: "Полный адрес",
+        type: "input",
+      },
+    ],
+  },
+  snils: {
+    height: 108,
+    title: "СНИЛС",
+    fields: [
+      {
+        label: "insurance_number",
+        title: "Номер",
+        type: "input",
+        copy: true,
+      },
+    ],
+  },
+  policy_number_series: {
+    height: 170,
+    title: "ПОЛИС",
+    fields: [
+      {
+        label: "series",
+        title: "Серия",
+        type: "input",
+      },
+      {
+        label: "number",
+        title: "Номер",
+        type: "input",
+      },
+    ],
+  },
+  policy_organization: {
+    height: 111,
+    title: "Страховая организация",
+    fields: [
+      {
+        label: "organization",
+        title: "Название",
+        type: "input",
+      },
+    ],
+  },
+  additional: {
+    height: 202,
+    title: "Дополнительная информация",
+    fields: [
+      {
+        label: "name_confidant",
+        title: "Доверенное лицо",
+        type: "input",
+      },
+      {
+        label: "phone_confidant",
+        title: "",
+        type: "input",
+      },
+      {
+        label: "benefit_code",
+        title: "Код категории льготы",
+        type: "input",
+      },
+    ],
+  },
+  agreement_form: {
+    height: 163,
+    title:
+      "Информированное добровольное согласие на виды медицинских вмешательств, включенные в Перечень определенных видов медицинских вмешательств:",
+    fields: [
+      {
+        label: "agreement",
+        title: "Получено",
+        type: "check_box",
+      },
+      {
+        label: "agreement_date",
+        title: "Дата",
+        type: "date",
+      },
+    ],
+  },
+};
--- a/src/pages/schedule/components/FormChangeShift.vue
+++ b/src/pages/schedule/components/FormChangeShift.vue
@@ -7,28 +7,12 @@
      .flex.pt-2
        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
    .flex.flex-col.gap-y-6
-      .flex.flex-col.gap-y-2
-        span.text-smm.font-semibold Дата
-        base-input-date
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-smm.font-semibold Текущий сотрудник
-        base-custom-select.h-10(v-model="currentEmployee")
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-smm.font-semibold Замена сотрудника
-        base-custom-select.h-10(v-model="currentEmployee")
+      base-input-date(label="Дата")
+      base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
+      base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
      .time-wrapper.flex.justify-center
-        .flex.flex-col.py-14px.px-4.gap-y-14px.items-center
-          .text-xxs.opacity-40.font-bold Начало
-          base-input-time.item-input.text-base.select(
-            :width-input="40",
-            v-model:value="timesShift.start_time"
-          )
-        .flex.flex-col.py-14px.px-4.gap-y-14px.items-center
-          .text-xxs.opacity-40.font-bold Конец
-          base-input-time.item-input.text-base.select(
-            :width-input="40",
-            v-model:value="timesShift.end_time"
-          )
+        base-input-time.px-4.item-input.text-base(label="Начало", v-model="timesShift.start_time")
+        base-input-time.px-4.item-input.text-base(label="Конец", v-model="timesShift.end_time")
      .flex.justify-center
        base-button.font-semibold(:size="40") Сохранить
 </template>
@@ -59,9 +43,4 @@ export default {
  box-shadow: var(--default-shadow)
  border-radius: 4px
  z-index: 5
-
-.select
-  height: 40px
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
 </style>
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -2,12 +2,8 @@
  .wrapper-bar.flex.flex-col.gap-y-4
    .flex.px-5.py-5.w-full.justify-around.gap-x-4
      .time-wrapper.flex.justify-between
-        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
-          .text.text-smm Начало
-          base-input-time.select(v-model:value="times.start_time")
-        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
-          .text.span.text-smm Конец
-          base-input-time.select(v-model:value="times.end_time")
+        base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
+        base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
      .status-wrapper.flex.flex-col
        .flex.justify-center.items-center.h-10
          span.font-semibold Статусы
@@ -138,9 +134,4 @@ export default {
 .graph-template
  width: 218px
  height: 40px
-
-.select
-  height: 40px
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
 </style>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
      gap: {
        "6px": "6px",
        "11px": "11px",
+        "30px": "30px",
        43: "43px",
      },
      spacing: {