From f210053d9d81e471cb0a243946c686673122a6c7 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 20 Oct 2022 14:09:30 +0300
Subject: [PATCH 1/7] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D1=83,=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D0=B4=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D0=B2=20server.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 40 +++++++++++++++
 src/pages/calendar/TheCalendar.vue            | 12 ++++-
 .../components/CalendarBackground.vue         | 18 ++++++-
 .../calendar/components/CalendarColumn.vue    | 49 +++++++++++++++++++
 .../calendar/components/CalendarSchedule.vue  | 13 ++++-
 5 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarColumn.vue

diff --git a/server.js b/server.js
index 84bfc92..8bb4594 100644
--- a/server.js
+++ b/server.js
@@ -35,6 +35,46 @@ export function clientsServer() {
           },
         ],
       }));
+      this.get("/registry/event/", () => ({
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
+            start: "2022-10-20T20:23:49Z",
+            end: "2022-10-20T21:23:53Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                person: {
+                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  last_name: "Гагарин",
+                  first_name: "Юрий",
+                  patronymic: "Алексеевич",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db831a14-e836-481f-a653-6325de7c311e",
+                  last_name: "Жмыхов",
+                  first_name: "Егор",
+                  patronymic: "Сергеевич",
+                },
+                role: "owner",
+              },
+            ],
+          },
+        ],
+      }));
       this.passthrough("http://45.84.227.122:8080/**");
     },
   });
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 02797ec..a43bee5 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -3,6 +3,7 @@
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
+      :column-information="columnInformation"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -24,6 +25,15 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
+      columnInformation: {
+        owners: [
+          "Захарова А.О.",
+          "Константинопольская Ю.В.",
+          "Коломойцев И.К.",
+          "Ситников А.Г.",
+          null,
+        ],
+      },
     };
   },
   methods: {
@@ -40,7 +50,7 @@ export default {
       this.eventsData = res.results;
     },
     fetchEventsData() {
-      fetch("http://45.84.227.122:8080/registry/event/")
+      fetch("/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
     },
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 9af397b..b668ef0 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,6 +1,12 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    calendar-column(
+      v-for="(owner, index) in columnInformation.owners"
+      :key="owner"
+      :column-information="owner"
+      :style="calculateColumnPosition(index)"
+      )
+    .header
     .body.flex.flex-col
       .line-wrapper
         .line.flex.items-center(
@@ -20,19 +26,23 @@
 
 <script>
 import * as moment from "moment/moment";
+import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarBackground",
+  components: { CalendarColumn },
   props: {
     hoursArray: Array,
     currentTime: String,
     currentDate: Object,
     dayStartTime: Number,
     dayEndTime: Number,
+    columnInformation: Object,
   },
   data() {
     return {
       isShownIndicator: true,
       pixelsPerHour: 62,
+      columnWidth: 470,
     };
   },
   computed: {
@@ -67,6 +77,11 @@ export default {
       }
       return result;
     },
+    calculateColumnPosition(elemIndex) {
+      return {
+        left: `${elemIndex * this.columnWidth}px`,
+      };
+    },
   },
   watch: {
     currentDate: function () {
@@ -80,6 +95,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-background-wrapper
   width: 100%
+  position: relative
 
 .header
   height: 48px
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
new file mode 100644
index 0000000..529c9ec
--- /dev/null
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -0,0 +1,49 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col(@click="output")
+    .header.flex.items-center.justify-between.py-2.px-6
+      .flex.items-center
+        img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
+        span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body
+</template>
+
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    columnInformation: String,
+    elementKey: String,
+  },
+  methods: {
+    output(event) {
+      console.log(event.target.id);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  position: absolute
+  width: 470px
+  border-right: 1px solid var(--border-light-grey-color)
+  height: calc(100% - 54px)
+
+.header
+  height: 48px
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.owner-name
+  color: var(--font-dark-blue-color)
+</style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 4ee8b46..d7051f8 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -20,6 +20,7 @@
         :current-date="currentDate"
         :day-start-time="validateStartTime"
         :day-end-time="validateEndTime"
+        :column-information="columnInformation"
         )
 </template>
 
@@ -30,7 +31,11 @@ import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
+  components: {
+    CalendarHeader,
+    CalendarBackground,
+    CalendarClockColumn,
+  },
   props: {
     currentDate: {
       type: Object,
@@ -44,6 +49,12 @@ export default {
         return {};
       },
     },
+    columnInformation: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {

From 0f5b0747b9c35ce522708bbab412eb5b1228b7ec Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 20 Oct 2022 16:48:48 +0300
Subject: [PATCH 2/7] =?UTF-8?q?=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE=D0=BA?=
 =?UTF-8?q?=20=D0=B8=20=D0=BF=D0=BE=D0=B4=D0=BB=D0=BE=D0=B6=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  2 +-
 .../components/CalendarBackground.vue         | 44 ++++++++++++++++---
 .../calendar/components/CalendarColumn.vue    |  8 +---
 .../calendar/components/CalendarSchedule.vue  | 14 +++---
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index a43bee5..234e5d2 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -63,5 +63,5 @@ export default {
 
 <style lang="sass" scoped>
 .calendar-container
-  width: 100%
+  width: calc(100% - 80px)
 </style>
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index b668ef0..39f11c6 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,13 +1,15 @@
 <template lang="pug">
-  .calendar-background-wrapper.flex.flex-col
+  .calendar-background-wrapper.flex.flex-col(
+    ref="backgroundWrapper"
+    )
     calendar-column(
       v-for="(owner, index) in columnInformation.owners"
       :key="owner"
       :column-information="owner"
       :style="calculateColumnPosition(index)"
       )
-    .header
-    .body.flex.flex-col
+    .header(:style="backgroundExtendedWidth")
+    .body.flex.flex-col(:style="backgroundExtendedWidth")
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in hoursArray"
@@ -42,7 +44,9 @@ export default {
     return {
       isShownIndicator: true,
       pixelsPerHour: 62,
-      columnWidth: 470,
+      backgroundWidth: 0,
+      columnWidth: 0,
+      defaultColumnWidth: 470,
     };
   },
   computed: {
@@ -62,6 +66,19 @@ export default {
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },
+    ownersArrayLength() {
+      return this.columnInformation.owners.length;
+    },
+    backgroundExtendedWidth() {
+      if (this.ownersArrayLength > 3) {
+        return {
+          width: `${this.defaultColumnWidth * this.ownersArrayLength}px`,
+        };
+      }
+      return {
+        width: "auto",
+      };
+    },
   },
   methods: {
     calculateIndicatorLocation() {
@@ -78,10 +95,21 @@ export default {
       return result;
     },
     calculateColumnPosition(elemIndex) {
+      if (this.ownersArrayLength < 4) {
+        this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
+        return {
+          width: `${this.columnWidth}px`,
+          left: `${elemIndex * this.columnWidth}px`,
+        };
+      }
       return {
-        left: `${elemIndex * this.columnWidth}px`,
+        width: `${this.defaultColumnWidth}px`,
+        left: `${elemIndex * this.defaultColumnWidth}px`,
       };
     },
+    calculateBackgroundWidth() {
+      this.backgroundWidth = this.$refs.backgroundWrapper.clientWidth;
+    },
   },
   watch: {
     currentDate: function () {
@@ -89,6 +117,9 @@ export default {
         this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
+  mounted() {
+    this.calculateBackgroundWidth();
+  },
 };
 </script>
 
@@ -96,6 +127,7 @@ export default {
 .calendar-background-wrapper
   width: 100%
   position: relative
+  overflow-x: scroll
 
 .header
   height: 48px
@@ -120,6 +152,7 @@ export default {
   width: 100%
   border-top: 1px solid var(--time-indicator-color)
   position: absolute
+  z-index: 10
 
 .time-circle-indicator
   width: 12px
@@ -127,4 +160,5 @@ export default {
   background-color: var(--time-indicator-color)
   border-radius: 50%
   position: absolute
+  z-index: 10
 </style>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 529c9ec..bd4f178 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(@click="output")
+  .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
@@ -18,18 +18,12 @@ export default {
     columnInformation: String,
     elementKey: String,
   },
-  methods: {
-    output(event) {
-      console.log(event.target.id);
-    },
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .calendar-column-wrapper
   position: absolute
-  width: 470px
   border-right: 1px solid var(--border-light-grey-color)
   height: calc(100% - 54px)
 
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index d7051f8..68e8022 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -8,12 +8,13 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex
-      calendar-clock-column(
-        :hours-array="hoursArray"
-        :current-time="currentTime"
-        :is-current-date="isCurrentDate"
-        :day-end-time="validateEndTime"
-        )
+      div
+        calendar-clock-column(
+          :hours-array="hoursArray"
+          :current-time="currentTime"
+          :is-current-date="isCurrentDate"
+          :day-end-time="validateEndTime"
+          )
       calendar-background(
         :hours-array="hoursArray"
         :current-time="currentTime"
@@ -177,4 +178,5 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
+  width: calc(100% - 8px)
 </style>

From 893f7fbfbdc2641b1d6f04b88326d8c0af89eb46 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 20 Oct 2022 19:09:58 +0300
Subject: [PATCH 3/7] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=B2=D1=8B=D1=81=D0=BE=D1=82=D1=83=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE=D0=BA=20=D1=81=20=D1=83?=
 =?UTF-8?q?=D1=87=D0=B5=D1=82=D0=BE=D0=BC=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  3 +-
 .../components/CalendarBackground.vue         | 76 +++----------------
 .../components/CalendarClockColumn.vue        |  3 +-
 .../calendar/components/CalendarColumn.vue    |  4 +-
 .../calendar/components/CalendarSchedule.vue  | 64 +++++++++++++++-
 tailwind.config.js                            |  1 +
 6 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 234e5d2..f16b92a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -30,8 +30,7 @@ export default {
           "Захарова А.О.",
           "Константинопольская Ю.В.",
           "Коломойцев И.К.",
-          "Ситников А.Г.",
-          null,
+          "Зайцев В.С.",
         ],
       },
     };
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 39f11c6..ae7dcf8 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -9,63 +9,35 @@
       :style="calculateColumnPosition(index)"
       )
     .header(:style="backgroundExtendedWidth")
-    .body.flex.flex-col(:style="backgroundExtendedWidth")
+    .body.flex.flex-col(
+      :style="backgroundExtendedWidth"
+      )
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in hoursArray"
           :key="hour"
           )
           .middle-line
-      .time-circle-indicator.-left-6px(
-        v-if="isShownIndicator"
-        :style="circleIndicatorLocation"
-        )
-      span.time-line-indicator.block(
-        v-if="isShownIndicator"
-        :style="lineIndicatorLocation"
-        )
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarBackground",
   components: { CalendarColumn },
   props: {
     hoursArray: Array,
-    currentTime: String,
-    currentDate: Object,
-    dayStartTime: Number,
-    dayEndTime: Number,
     columnInformation: Object,
   },
   data() {
     return {
-      isShownIndicator: true,
-      pixelsPerHour: 62,
       backgroundWidth: 0,
       columnWidth: 0,
       defaultColumnWidth: 470,
+      pixelsPerHour: 62,
     };
   },
   computed: {
-    lineIndicatorLocation() {
-      return {
-        top: `${this.calculateIndicatorLocation()}px`,
-      };
-    },
-    circleIndicatorLocation() {
-      return {
-        top: `${this.calculateIndicatorLocation() - 6}px`,
-      };
-    },
-    scheduleSize() {
-      return (this.dayEndTime - this.dayStartTime) * this.pixelsPerHour;
-    },
-    pixelsPerMinute() {
-      return this.pixelsPerHour / 60;
-    },
     ownersArrayLength() {
       return this.columnInformation.owners.length;
     },
@@ -79,42 +51,28 @@ export default {
         width: "auto",
       };
     },
+    backgroundHeight() {
+      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
+    },
   },
   methods: {
-    calculateIndicatorLocation() {
-      let newTime = this.currentTime
-        .split(":")
-        .map((elem) => parseInt(elem, 10));
-      let result =
-        (newTime[0] - this.dayStartTime) * this.pixelsPerHour +
-        newTime[1] * this.pixelsPerMinute;
-      if (result > this.scheduleSize || result < 0) {
-        this.isShownIndicator = false;
-        return 0;
-      }
-      return result;
-    },
     calculateColumnPosition(elemIndex) {
       if (this.ownersArrayLength < 4) {
         this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
         return {
           width: `${this.columnWidth}px`,
+          height: `${this.backgroundHeight}px`,
           left: `${elemIndex * this.columnWidth}px`,
         };
       }
       return {
         width: `${this.defaultColumnWidth}px`,
+        height: `${this.backgroundHeight}px`,
         left: `${elemIndex * this.defaultColumnWidth}px`,
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.clientWidth;
-    },
-  },
-  watch: {
-    currentDate: function () {
-      this.isShownIndicator =
-        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
   },
   mounted() {
@@ -147,18 +105,4 @@ export default {
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
-
-.time-line-indicator
-  width: 100%
-  border-top: 1px solid var(--time-indicator-color)
-  position: absolute
-  z-index: 10
-
-.time-circle-indicator
-  width: 12px
-  height: 12px
-  background-color: var(--time-indicator-color)
-  border-radius: 50%
-  position: absolute
-  z-index: 10
 </style>
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index 37d3e1f..8bcb639 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
-    span.font-medium.text-base(
+    span.text-base(
       v-for="hour in hoursArray"
       :key="hour"
       :class="currentHourStyle(hour)"
@@ -42,6 +42,7 @@ export default {
       }
       return {
         "current-time": false,
+        "font-medium": true,
       };
     },
     convertTime(str, startIndex, endIndex) {
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index bd4f178..601e965 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,7 @@
         span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .body
+    div
 </template>
 
 <script>
@@ -16,7 +16,6 @@ export default {
   components: { BaseDocOkButton },
   props: {
     columnInformation: String,
-    elementKey: String,
   },
 };
 </script>
@@ -25,7 +24,6 @@ export default {
 .calendar-column-wrapper
   position: absolute
   border-right: 1px solid var(--border-light-grey-color)
-  height: calc(100% - 54px)
 
 .header
   height: 48px
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 68e8022..d2ca793 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -17,12 +17,16 @@
           )
       calendar-background(
         :hours-array="hoursArray"
-        :current-time="currentTime"
-        :current-date="currentDate"
-        :day-start-time="validateStartTime"
-        :day-end-time="validateEndTime"
         :column-information="columnInformation"
         )
+      .time-circle-indicator.left-74px(
+        v-if="isShownIndicator"
+        :style="circleIndicatorLocation"
+        )
+      span.time-line-indicator.block.left-20(
+        v-if="isShownIndicator"
+        :style="lineIndicatorLocation"
+        )  
 </template>
 
 <script>
@@ -63,6 +67,9 @@ export default {
       hoursArray: [],
       timer: null,
       isCurrentDate: true,
+      isShownIndicator: true,
+      pixelsPerHour: 62,
+      columnHeaderHeight: 48,
     };
   },
   computed: {
@@ -81,6 +88,25 @@ export default {
     validateEndTime() {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
+    lineIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+    circleIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation() - 6}px`,
+      };
+    },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
+    scheduleSize() {
+      return (
+        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
+        this.columnHeaderHeight
+      );
+    },
   },
   methods: {
     previousDate() {
@@ -138,6 +164,20 @@ export default {
     convertTime(str, startIndex, endIndex) {
       return parseInt(str.slice(startIndex, endIndex), 10);
     },
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let result =
+        (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
+        newTime[1] * this.pixelsPerMinute +
+        this.columnHeaderHeight;
+      if (result > this.scheduleSize || result < 0) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
+    },
   },
   watch: {
     currentTime() {
@@ -153,6 +193,7 @@ export default {
     currentDate: function () {
       this.isCurrentDate =
         this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+      this.isShownIndicator = this.isCurrentDate;
       if (this.timer) {
         this.stopTimer();
         this.hoursArrayInitialization();
@@ -179,4 +220,19 @@ export default {
 .schedule
   background-color: var(--default-white)
   width: calc(100% - 8px)
+
+.time-line-indicator
+  width: calc(100% - 80px)
+  border-top: 1px solid var(--time-indicator-color)
+  position: absolute
+
+.time-circle-indicator
+  width: 12px
+  height: 12px
+  background-color: var(--time-indicator-color)
+  border-radius: 50%
+  position: absolute
+
+.schedule-body
+  position: relative
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 50b52df..9f09c1a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,7 @@ module.exports = {
         "6px": "6px",
         "10px": "10px",
         "3px": "3px",
+        "74px": "74px",
       },
     },
   },

From 071ef0e030fb90069732c428db2e9bf2f8c12631 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 21 Oct 2022 01:06:18 +0300
Subject: [PATCH 4/7] [WIP] Adding Sidebar on page Calendar

---
 src/pages/calendar/TheCalendar.vue            |  6 ++--
 .../calendar/components/CalendarSchedule.vue  |  2 +-
 .../calendar/components/CalendarSidebar.vue   | 31 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarSidebar.vue

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 02797ec..63a3a29 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
-  .calendar-container
+  .calendar-container.flex
+    calendar-sidebar
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -12,9 +13,10 @@
 <script>
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
+import CalendarSidebar from "./components/CalendarSidebar.vue";
 export default {
   name: "TheCalendar",
-  components: { CalendarSchedule },
+  components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
       calendarLayout: "",
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 4ee8b46..c526233 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2
+  .schedule.ml-2.w-full
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
new file mode 100644
index 0000000..7fc446f
--- /dev/null
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  .sidebar.flex.flex-col.bg-white
+    .sidebar-wrapper.h-full
+      .sidebar-content.items-center
+        base-button-plus
+</template>
+
+<script>
+import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
+export default {
+  components: {
+    BaseButtonPlus,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.sidebar
+  width: 72px
+.sidebar-wrapper
+   border-left: 2px solid var(--btn-blue-color-3)
+   margin: 13px 0
+.sidebar-content
+  padding: 19px 16px
+.button-plus
+  width: 40px
+  height: 40px
+  max-height: 40px
+  background: var(--btn-blue-color)
+  color: var(--default-white)
+</style>

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

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

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

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

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

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

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

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

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