From 523240b092f5f6ef87df89f111699a32c8f98ab3 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Fri, 19 Apr 2024 14:28:32 +0300
Subject: [PATCH] refactor: timeline restructurization [WTEL-3534]

---
 package.json                                  |   1 +
 .../day-row/day-timeline-row-counters.vue     |  34 +++
 .../day-row/day-timeline-row-section.vue      |  68 +++++
 .../components/day-row/day-timeline-row.vue   |  88 ++++++
 .../{utils => }/event-status-detail.vue       |   0
 .../{utils => }/event-type-filter.vue         |   0
 .../components/opened-timeline-call.vue       |  19 --
 .../components/opened-timeline-chat.vue       |   0
 .../components/opened-timeline-day.vue        | 237 ----------------
 .../task-row/call-task-timeline-row.vue       |  11 +
 .../task-row/chat-task-timeline-row.vue       | 255 ++++++++++++++++++
 .../components/task-row/task-timeline-row.vue |  33 +++
 .../timeline/components/the-timeline.vue      |  56 ++--
 .../components/timeline-container.vue         |  31 +++
 .../timeline/components/timeline-day.vue      |  96 -------
 .../timeline/components/timeline-header.vue   |   2 +-
 .../components/utils/event-record.vue         |  23 --
 .../components/utils/timeline-pin.vue         |  68 +++++
 .../utils/timeline-row-duration.vue           |  18 ++
 .../components/utils/timeline-row-info.vue    |  60 +++++
 ...or-name.vue => timeline-row-initiator.vue} |   0
 .../components/utils/timeline-row.vue         |  68 +++++
 .../timeline/enums/TimelinePinType.enum.js    |  10 +
 23 files changed, 773 insertions(+), 405 deletions(-)
 create mode 100644 src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue
 rename src/modules/contacts/modules/timeline/components/{utils => }/event-status-detail.vue (100%)
 rename src/modules/contacts/modules/timeline/components/{utils => }/event-type-filter.vue (100%)
 delete mode 100644 src/modules/contacts/modules/timeline/components/opened-timeline-call.vue
 delete mode 100644 src/modules/contacts/modules/timeline/components/opened-timeline-chat.vue
 delete mode 100644 src/modules/contacts/modules/timeline/components/opened-timeline-day.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/task-row/chat-task-timeline-row.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/timeline-container.vue
 delete mode 100644 src/modules/contacts/modules/timeline/components/timeline-day.vue
 delete mode 100644 src/modules/contacts/modules/timeline/components/utils/event-record.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue
 create mode 100644 src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
 rename src/modules/contacts/modules/timeline/components/utils/{event-initiator-name.vue => timeline-row-initiator.vue} (100%)
 create mode 100644 src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
 create mode 100644 src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js

diff --git a/package.json b/package.json
index 5bc01cd1..d1c65e6a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "test:unit": "vitest",
     "lint:fix": "eslint --fix --ext .js,.vue src"
   },
+  "type": "module",
   "dependencies": {
     "@vue/compat": "^3.3.9",
     "@vuelidate/core": "^2.0.0",
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue
new file mode 100644
index 00000000..2ca47192
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="day-timeline-row-counters">
+    <div class="day-timeline-row-counters__wrapper">
+      <span>Calls: {{ props.callsCount }}</span>
+      <span>Chats: {{ props.chatsCount }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  callsCount: {
+    type: Number,
+    default: 0,
+  },
+  chatsCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.day-timeline-row-counters {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.day-timeline-row-counters__wrapper {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
new file mode 100644
index 00000000..697bca4d
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="day-timeline-row-section">
+    <day-timeline-row
+      :timestamp="props.day.dayTimestamp"
+      @toggle="opened = !opened"
+    />
+
+    <div v-if="opened">
+      <task-timeline-row
+        v-for="(item) of props.day.items"
+        :item="item"
+        :key="item.id"
+      ></task-timeline-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import DayTimelineRow from './day-timeline-row.vue';
+import TaskTimelineRow from '../task-row/task-timeline-row.vue';
+
+const props = defineProps({
+  day: {
+    type: Object,
+  },
+  // TODO!!
+  isLastDay: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const opened = ref(false);
+</script>
+
+<style lang="scss" scoped>
+// TODO
+.timeline-day {
+  &__title {
+    @extend %typo-subtitle-2;
+  }
+
+  &__wrapper {
+    position: relative;
+  }
+
+  &__divider {
+    height: var(--spacing-sm);
+    width: 1px;
+    position: relative;
+    display: block;
+    background-color: var(--btn-secondary-color);
+    bottom: 0;
+    left: 50%;
+    transform: translate(50%, 0);
+  }
+
+  &__counters {
+    @extend %typo-body-2;
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: end;
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue
new file mode 100644
index 00000000..83f8d79f
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue
@@ -0,0 +1,88 @@
+<template>
+  <timeline-row>
+    <template #before-content>
+      {{ props.timestamp }}
+    </template>
+    <template #pin>
+      <timeline-pin
+        :type="TimelinePinType.DAY"
+        text="dday"
+        @click="emit('toggle')"
+      ></timeline-pin>
+    </template>
+    <template v-slot:content>
+      <day-timeline-row-counters
+        :callsCount="props.callsCount"
+        :chatsCount="props.chatsCount"
+      />
+    </template>
+  </timeline-row>
+
+
+  <!--    // TODO -> day-task-line -->
+  <!--    <event-record>-->
+  <!--      <template v-slot:before-content>-->
+  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.dayWeek.${dayWeek}`) }}</p>-->
+  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.mouth.${mouth}`) }}</p>-->
+  <!--      </template>-->
+
+  <!--      <template v-slot:action>-->
+  <!--        <div class="timeline-day__wrapper">-->
+  <!--          <wt-button-->
+  <!--            color="secondary"-->
+  <!--            class="timeline-day__button"-->
+  <!--            @click="isOpenDay = !isOpenDay"-->
+  <!--          >{{ dayNumber }}-->
+  <!--          </wt-button>-->
+  <!--          <div-->
+  <!--            v-if="!isLastDay || (isLastDay && isOpenDay)"-->
+  <!--            class="timeline-day__divider"></div>-->
+  <!--        </div>-->
+  <!--      </template>-->
+
+  <!--      <template v-slot:content>-->
+  <!--        <div class="timeline-day__counters">-->
+  <!--          <p>{{ `${t('channel.type.call')} (${day.callsCount || 0})` }}</p>-->
+  <!--          <p>{{ `${t('channel.type.chat')} (${day.chatsCount || 0})` }}</p>-->
+  <!--        </div>-->
+
+  <!--      </template>-->
+  <!--    </event-record>-->
+</template>
+
+<script setup>
+import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import DayTimelineRowCounters from './day-timeline-row-counters.vue';
+import TimelinePin from '../utils/timeline-pin.vue';
+import TimelineRow from '../utils/timeline-row.vue';
+
+const props = defineProps({
+  timestamp: {
+    type: Number,
+    required: true,
+  },
+  callsCount: {
+    type: Number,
+    default: 0,
+  },
+  chatsCount: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits([
+  'toggle',
+]);
+
+// TODO -> day-task-line
+// const fullDate = computed(() => new Date(+props.day.dayTimestamp));
+// const mouth = computed(() => fullDate.value.toLocaleString('en', { month: 'short' }).toLowerCase());
+// const dayWeek = computed(() => fullDate.value.toLocaleString('en', { weekday: 'short' }).toLowerCase());
+// const dayNumber = computed(() => fullDate.value.getDate());
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/event-status-detail.vue b/src/modules/contacts/modules/timeline/components/event-status-detail.vue
similarity index 100%
rename from src/modules/contacts/modules/timeline/components/utils/event-status-detail.vue
rename to src/modules/contacts/modules/timeline/components/event-status-detail.vue
diff --git a/src/modules/contacts/modules/timeline/components/utils/event-type-filter.vue b/src/modules/contacts/modules/timeline/components/event-type-filter.vue
similarity index 100%
rename from src/modules/contacts/modules/timeline/components/utils/event-type-filter.vue
rename to src/modules/contacts/modules/timeline/components/event-type-filter.vue
diff --git a/src/modules/contacts/modules/timeline/components/opened-timeline-call.vue b/src/modules/contacts/modules/timeline/components/opened-timeline-call.vue
deleted file mode 100644
index ee68f187..00000000
--- a/src/modules/contacts/modules/timeline/components/opened-timeline-call.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="opened-timeline-call">
-    <event-record>
-      <template v-slot:date>
-<!--        <event-status-detail-->
-<!--          :time="createdAt"-->
-<!--          :status="status"-->
-<!--        >-->
-<!--        </event-status-detail>-->
-      </template>
-    </event-record>
-  </div>
-</template>
-
-<script setup>
-import EventRecord from './utils/event-record.vue';
-import EventStatusDetail from './utils/event-status-detail.vue';
-</script>
-<style lang="scss" scoped></style>
diff --git a/src/modules/contacts/modules/timeline/components/opened-timeline-chat.vue b/src/modules/contacts/modules/timeline/components/opened-timeline-chat.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/modules/contacts/modules/timeline/components/opened-timeline-day.vue b/src/modules/contacts/modules/timeline/components/opened-timeline-day.vue
deleted file mode 100644
index dce1df19..00000000
--- a/src/modules/contacts/modules/timeline/components/opened-timeline-day.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-  <div class="opened-timeline-day">
-    <event-record>
-      <template v-slot:date>
-        <event-status-detail
-          :time="createdAt"
-          :status="status"
-        >
-        </event-status-detail>
-      </template>
-
-      <template v-slot:collapse>
-        <wt-rounded-action
-          :icon="eventDetails.icon"
-          :color="eventDetails.color"
-          filled
-          rounded
-          class="opened-timeline-day__collapse"
-          @click="openCallDetails"
-        ></wt-rounded-action>
-
-        <div
-          :class="`opened-timeline-day__divider--${eventDetails.color}`"
-          class="opened-timeline-day__divider"></div>
-      </template>
-
-      <template v-slot:content>
-        <div  class="opened-timeline-day__wrapper">
-          <div class="opened-timeline-day__inner">
-
-            <event-initiator-name
-              :event-type="eventType"
-              :name="eventDetails.name"
-            ></event-initiator-name>
-
-            <wt-chip
-              v-if="notMainUsers.length"
-              @click="isShowNotMainUsers = !isShowNotMainUsers"
-            >{{ `+${notMainUsers.length}` }}
-            </wt-chip>
-
-            <wt-tooltip
-              v-if="isShowNotMainUsers"
-            >
-              <event-initiator-name
-                v-for="(user,idx) of notMainUsers"
-                :key="idx"
-                :name="user.name"
-              ></event-initiator-name>
-            </wt-tooltip>
-
-            <div class="opened-timeline-day-duration">
-              <p class="opened-timeline-day-duration__text">{{ t('vocabulary.duration') }}:</p>
-              <span class="opened-timeline-day-duration__time">{{ ConvertDuration(duration) }}</span>
-            </div>
-          </div>
-
-          <wt-context-menu
-            v-if="eventType !== 'chat'"
-            :options="actionOptions"
-            @click="$event.option.handler()"
-          >
-            <template #activator>
-              <wt-tooltip>
-                <template #activator>
-                  <wt-icon-btn
-                    icon="options"
-                  />
-                </template>
-                {{ t('vocabulary.options', 2) }}
-              </wt-tooltip>
-            </template>
-
-            <template #option="option">
-              <p>{{ option.text }}</p>
-            </template>
-          </wt-context-menu>
-
-
-        </div>
-      </template>
-    </event-record>
-
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import ConvertDuration from '@webitel/ui-sdk/src/scripts/convertDuration';
-import EventInitiatorName from './utils/event-initiator-name.vue';
-import EventRecord from './utils/event-record.vue';
-import EventStatusDetail from './utils/event-status-detail.vue';
-import HistoryAPI from '../api/HistoryAPI';
-
-const props = defineProps({
-  item: {
-    type: Object,
-  },
-});
-
-const { t } = useI18n();
-const isShowNotMainUsers = ref(false);
-const { createdAt, participants, type, isInbound, isMissed, duration, flowScheme, queue, id } = props.item;
-
-const status = computed(() => eventType.value.includes('call-missed') ? 'missed' : 'started')
-const notMainUsers = computed(() => participants.length > 1 && participants.shift());
-const historyLink = computed(() => `${import.meta.env.VITE_HISTORY_URL}/${id}`);
-
-const actionOptions = computed(() => {
-  const openHistory = {
-    text: t('contacts.timeline.actions.openInHistory'),
-    handler: () => window.open(historyLink.value),
-  };
-  return [
-    openHistory,
-  ];
-});
-
-const eventType = computed(() => {
-  if (type === 'chat' || !type) {
-    return 'chat';
-  } else {
-    if (isMissed) {
-      if (props.item.hasOwnProperty('queue')) return 'call-missed-from-queue';
-      return 'call-missed';
-    } else {
-      if (!props.item.hasOwnProperty('queue')) return 'call-inbound-from-ivr';
-      return 'call-inbound';
-    }
-    return 'call-outbound';
-  }
-});
-
-const eventDetails = computed(() => {
-  switch (eventType.value) {
-    case 'chat':
-      return {
-        icon: 'chat',
-        color: '--chat-started-color',
-        name: participants[0].name,
-      };
-    case 'call-outbound':
-      return {
-        icon: 'call-outbound',
-        color: 'success',
-        name: participants[0].name,
-      };
-    case 'call-inbound':
-      return {
-        icon: 'call-inbound',
-        color: 'primary',
-        name: participants[0].name,
-      };
-    case 'call-inbound-from-ivr':
-      return {
-        icon: 'call-inbound',
-        color: 'primary',
-        name: flowScheme.name,
-      };
-    case 'call-missed':
-      return {
-        icon: 'call-missed',
-        color: 'error',
-        name: participants[0].name,
-      };
-    case 'call-missed-from-queue':
-      return {
-        icon: 'call-missed',
-        color: 'error',
-        name: queue.name,
-      };
-  }
-});
-
-function openCallDetails() {
-  HistoryAPI.getHistory({dependencyId: '8e3d9318-dc8a-4f18-81a7-08416f32a5d6'});
-}
-</script>
-
-<style lang="scss" scoped>
-.opened-timeline-day {
-  &__collapse {
-    margin: 0 auto;
-  }
-
-  &__divider {
-    height: var(--spacing-sm);
-    width: 1px;
-    position: relative;
-    display: block;
-    background-color: var(--btn-secondary-color);
-    bottom: 0;
-    left: 50%;
-    transform: translate(50%, 0);
-
-    &--success {
-      background-color: var(--success-color);
-    }
-
-    &--primary {
-      background-color: var(--primary-color);
-    }
-
-    &--error {
-      background-color: var(--error-color);
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--spacing-xs) var(--spacing-sm);
-    border-radius: var(--border-radius);
-    box-shadow: var(--elevation-1);
-  }
-
-  &__inner {
-    display: flex;
-    gap: var(--spacing-sm);
-    align-items: center;
-  }
-
-  &-duration {
-    display: flex;
-
-    &__text {
-      @extend %typo-subtitle-1;
-    }
-
-    &__time {
-      @extend %typo-body-1;
-    }
-  }
-}
-</style>
diff --git a/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
new file mode 100644
index 00000000..762e8b79
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/task-row/chat-task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/chat-task-timeline-row.vue
new file mode 100644
index 00000000..08962e92
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/task-row/chat-task-timeline-row.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="chat-task-timeline-row">
+    <timeline-row>
+      <template v-slot:before-content>
+        <timeline-row-info
+          :timestamp="createdAt"
+        >
+          <template #title="{ time }">
+            {{ time }}
+          </template>
+
+          <template #subtitle="{ weekDay }">
+            {{ weekDay }}
+          </template>
+        </timeline-row-info>
+      </template>
+
+      <template v-slot:action>
+        <timeline-pin
+          :type="pinType"
+        ></timeline-pin>
+      </template>
+
+      <template v-slot:content>
+        <timeline-row-initiator></timeline-row-initiator>
+
+        <wt-chip>
+          COUNT ME
+        </wt-chip>
+
+        <timeline-row-duration
+          :duration="duration"
+        ></timeline-row-duration>
+
+        <!--        <div  class="task-timeline-row__wrapper">-->
+        <!--          <div class="task-timeline-row__inner">-->
+
+        <!--            <event-initiator-name-->
+        <!--              :event-type="eventType"-->
+        <!--              :name="eventDetails.name"-->
+        <!--            ></event-initiator-name>-->
+
+        <!--            <wt-chip-->
+        <!--              v-if="notMainUsers.length"-->
+        <!--              @click="isShowNotMainUsers = !isShowNotMainUsers"-->
+        <!--            >{{ `+${notMainUsers.length}` }}-->
+        <!--            </wt-chip>-->
+
+        <!--            <wt-tooltip-->
+        <!--              v-if="isShowNotMainUsers"-->
+        <!--            >-->
+        <!--              <event-initiator-name-->
+        <!--                v-for="(user,idx) of notMainUsers"-->
+        <!--                :key="idx"-->
+        <!--                :name="user.name"-->
+        <!--              ></event-initiator-name>-->
+        <!--            </wt-tooltip>-->
+
+        <!--            <div class="task-timeline-row-duration">-->
+        <!--              <p class="task-timeline-row-duration__text">{{ t('vocabulary.duration') }}:</p>-->
+        <!--              <span class="task-timeline-row-duration__time">{{ ConvertDuration(duration) }}</span>-->
+        <!--            </div>-->
+        <!--          </div>-->
+
+        <!--          <wt-context-menu-->
+        <!--            v-if="eventType !== 'chat'"-->
+        <!--            :options="actionOptions"-->
+        <!--            @click="$event.option.handler()"-->
+        <!--          >-->
+        <!--            <template #activator>-->
+        <!--              <wt-tooltip>-->
+        <!--                <template #activator>-->
+        <!--                  <wt-icon-btn-->
+        <!--                    icon="options"-->
+        <!--                  />-->
+        <!--                </template>-->
+        <!--                {{ t('vocabulary.options', 2) }}-->
+        <!--              </wt-tooltip>-->
+        <!--            </template>-->
+
+        <!--            <template #option="option">-->
+        <!--              <p>{{ option.text }}</p>-->
+        <!--            </template>-->
+        <!--          </wt-context-menu>-->
+
+
+        <!--        </div>-->
+      </template>
+    </timeline-row>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TimelinePin from '../utils/timeline-pin.vue';
+import TimelineRowDuration from '../utils/timeline-row-duration.vue';
+import TimelineRowInfo from '../utils/timeline-row-info.vue';
+import TimelineRowInitiator from '../utils/timeline-row-initiator.vue';
+import TimelineRow from '../utils/timeline-row.vue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const {
+  createdAt,
+  participants,
+  type,
+  isInbound,
+  isMissed,
+  duration,
+  flowScheme,
+  queue,
+  id,
+} = toRefs(props.item);
+
+const hiddenUsers = computed(() => participants.filter((participant) => participant));
+const historyLink = `${import.meta.env.VITE_HISTORY_URL}/${id}`;
+
+// const actionOptions = computed(() => {
+//   const openHistory = {
+//     text: t('contacts.timeline.actions.openInHistory'),
+//     handler: () => window.open(historyLink.value),
+//   };
+//   return [
+//     openHistory,
+//   ];
+// });
+
+const eventType = computed(() => {
+  if (type === 'chat' || !type) {
+    return 'chat';
+  } else {
+    if (isMissed) {
+      if (props.item.queue) return 'call-missed-from-queue';
+      return 'call-missed';
+    } else {
+      if (!props.item.queue) return 'call-inbound-from-ivr';
+      return 'call-inbound';
+    }
+    return 'call-outbound';
+  }
+});
+
+// const eventDetails = computed(() => {
+//   switch (eventType.value) {
+//     case 'chat':
+//       return {
+//         icon: 'chat',
+//         color: '--chat-started-color',
+//         name: participants[0].name,
+//       };
+//     case 'call-outbound':
+//       return {
+//         icon: 'call-outbound',
+//         color: 'success',
+//         name: participants[0].name,
+//       };
+//     case 'call-inbound':
+//       return {
+//         icon: 'call-inbound',
+//         color: 'primary',
+//         name: participants[0].name,
+//       };
+//     case 'call-inbound-from-ivr':
+//       return {
+//         icon: 'call-inbound',
+//         color: 'primary',
+//         name: flowScheme.name,
+//       };
+//     case 'call-missed':
+//       return {
+//         icon: 'call-missed',
+//         color: 'error',
+//         name: participants[0].name,
+//       };
+//     case 'call-missed-from-queue':
+//       return {
+//         icon: 'call-missed',
+//         color: 'error',
+//         name: queue.name,
+//       };
+//   }
+// });
+
+const pinType = computed(() => {
+  if (true) {
+    return TimelinePinType.CHAT_INVITE;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.task-timeline-row {
+  &__collapse {
+    margin: 0 auto;
+  }
+
+  &__divider {
+    position: relative;
+    bottom: 0;
+    left: 50%;
+    display: block;
+    width: 1px;
+    height: var(--spacing-sm);
+    transform: translate(50%, 0);
+    background-color: var(--btn-secondary-color);
+
+    &--success {
+      background-color: var(--success-color);
+    }
+
+    &--primary {
+      background-color: var(--primary-color);
+    }
+
+    &--error {
+      background-color: var(--error-color);
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-1);
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+
+  &-duration {
+    display: flex;
+
+    &__text {
+      @extend %typo-subtitle-1;
+    }
+
+    &__time {
+      @extend %typo-body-1;
+    }
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue
new file mode 100644
index 00000000..f217fc29
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue
@@ -0,0 +1,33 @@
+<template>
+  <component
+    :is="component"
+    :task="item"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import ChatTaskTimelineRow from './chat-task-timeline-row.vue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const component = computed(() => {
+  switch (props.item.type) {
+    case 'chat': // TODO Yehor enum
+      return ChatTaskTimelineRow;
+    case 'call':  // TODO Yehor enum
+      return ChatTaskTimelineRow;
+    default:
+      return throw new Error(`Unknown item type, ${props.item.type}!`);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/the-timeline.vue b/src/modules/contacts/modules/timeline/components/the-timeline.vue
index 4983477d..9fa6f76b 100644
--- a/src/modules/contacts/modules/timeline/components/the-timeline.vue
+++ b/src/modules/contacts/modules/timeline/components/the-timeline.vue
@@ -1,38 +1,45 @@
 <template>
-  <div class="timeline">
-    <timeline-header
-      v-if="isShowHeader"
-      :namespace="namespace"
-      :filtersNamespace="filtersNamespace"
-    ></timeline-header>
+  <timeline-container>
+    <template #header>
+      <timeline-header
+        v-if="isShowHeader"
+        :filtersNamespace="filtersNamespace"
+        :namespace="namespace"
+      ></timeline-header>
+    </template>
 
-    <wt-dummy
-      v-if="!isLoading && isEmptyDataList"
-      :src="darkMode ? dummyDark : dummyLight"
-    />
+    <template #content>
+      <wt-loader
+        v-if="isLoading"
+      />
+
+      <wt-dummy
+        v-else-if="isEmptyDataList"
+        :src="darkMode ? dummyDark : dummyLight"
+      />
 
-    <div class="timeline__wrapper">
       <timeline-day
         v-for="(day, idx) of dataList"
-        :key="idx"
+        :key="day.dateTimestamp"
         :day="day"
-        :is-last-day="dataList.length - 1 === idx"
+        :last-day="dataList.length - 1 === idx"
       ></timeline-day>
-    </div>
-  </div>
+    </template>
+  </timeline-container>
 
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters';
 import { useTableStore } from '@webitel/ui-sdk/src/modules/TableStoreModule/composables/useTableStore';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
-import TimelineHeader from './timeline-header.vue';
-import TimelineDay from './timeline-day.vue';
-import dummyLight from '../assets/timeline-dummy-light.svg';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import TimelineContainer from './timeline-container.vue';
 import dummyDark from '../assets/timeline-dummy-dark.svg';
+import dummyLight from '../assets/timeline-dummy-light.svg';
+import TimelineDay from './day-row/day-timeline-row-section.vue';
+import TimelineHeader from './timeline-header.vue';
 
 const props = defineProps({
   namespace: {
@@ -59,14 +66,5 @@ const isShowHeader = computed(() => !isEmptyDataList.value || (isEmptyDataList.v
 </script>
 
 <style lang="scss" scoped>
-.timeline {
-  display: flex;
-  flex-direction: column;
 
-  &__wrapper {
-    @extend %wt-scrollbar;
-    overflow: auto;
-    padding: var(--spacing-sm);
-  }
-}
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-container.vue b/src/modules/contacts/modules/timeline/components/timeline-container.vue
new file mode 100644
index 00000000..c73e5b74
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/timeline-container.vue
@@ -0,0 +1,31 @@
+<template>
+  <section
+    class="timeline-container"
+  >
+    <header class="timeline-header">
+      <slot name="header"></slot>
+    </header>
+
+    <article class="timeline-content">
+      <slot name="content"></slot>
+    </article>
+  </section>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  .timeline-content {
+    @extend %wt-scrollbar;
+    overflow: auto;
+    padding: var(--spacing-sm);
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-day.vue b/src/modules/contacts/modules/timeline/components/timeline-day.vue
deleted file mode 100644
index bd7fa9c1..00000000
--- a/src/modules/contacts/modules/timeline/components/timeline-day.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="timeline-day">
-    <event-record>
-      <template v-slot:date>
-        <p class="timeline-day__title">{{ t(`contacts.timeline.dayWeek.${dayWeek}`) }}</p>
-        <p class="timeline-day__title">{{ t(`contacts.timeline.mouth.${mouth}`) }}</p>
-      </template>
-
-      <template v-slot:collapse>
-        <div class="timeline-day__wrapper">
-          <wt-button
-            color="secondary"
-            class="timeline-day__button"
-            @click="isOpenDay = !isOpenDay"
-          >{{ dayNumber }}
-          </wt-button>
-          <div
-            v-if="!isLastDay || (isLastDay && isOpenDay)"
-            class="timeline-day__divider"></div>
-        </div>
-      </template>
-
-      <template v-slot:content>
-        <div class="timeline-day__counters">
-          <p>{{ `${t('channel.type.call')} (${day.callsCount || 0})` }}</p>
-          <p>{{ `${t('channel.type.chat')} (${day.chatsCount || 0})` }}</p>
-        </div>
-
-      </template>
-    </event-record>
-
-    <div v-if="isOpenDay">
-      <opened-timeline-day
-        v-for="item of props.day.items"
-        :item="item"
-        :key="item.id"
-      ></opened-timeline-day>
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import EventRecord from './utils/event-record.vue';
-import OpenedTimelineDay from './opened-timeline-day.vue';
-
-const props = defineProps({
-  day: {
-    type: Object,
-  },
-  isLastDay: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { t } = useI18n();
-const isOpenDay = ref(false);
-
-const fullDate = computed(() => new Date(+props.day.dayTimestamp));
-const mouth = computed(() => fullDate.value.toLocaleString('en', { month: 'short' }).toLowerCase());
-const dayWeek = computed(() => fullDate.value.toLocaleString('en', { weekday: 'short' }).toLowerCase());
-const dayNumber = computed(() => fullDate.value.getDate());
-</script>
-
-<style lang="scss" scoped>
-.timeline-day {
-  &__title {
-    @extend %typo-subtitle-2;
-  }
-
-  &__wrapper {
-    position: relative;
-  }
-
-  &__divider {
-    height: var(--spacing-sm);
-    width: 1px;
-    position: relative;
-    display: block;
-    background-color: var(--btn-secondary-color);
-    bottom: 0;
-    left: 50%;
-    transform: translate(50%, 0);
-  }
-
-  &__counters {
-    @extend %typo-body-2;
-    display: flex;
-    gap: var(--spacing-sm);
-    justify-content: end;
-  }
-}
-</style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
index a0d8d018..001c4854 100644
--- a/src/modules/contacts/modules/timeline/components/timeline-header.vue
+++ b/src/modules/contacts/modules/timeline/components/timeline-header.vue
@@ -22,7 +22,7 @@ import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedS
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import EventTypeFilter from './utils/event-type-filter.vue';
+import EventTypeFilter from './event-type-filter.vue';
 import timelineEventTypes from './enums/timelineEventTypes.enum';
 
 const props = defineProps({
diff --git a/src/modules/contacts/modules/timeline/components/utils/event-record.vue b/src/modules/contacts/modules/timeline/components/utils/event-record.vue
deleted file mode 100644
index f9840068..00000000
--- a/src/modules/contacts/modules/timeline/components/utils/event-record.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="event-record">
-    <section>
-      <slot name="date"></slot>
-    </section>
-
-    <section>
-      <slot name="collapse"></slot>
-    </section>
-
-    <section>
-      <slot name="content"></slot>
-    </section>
-  </div>
-</template>
-<style  lang="scss" scoped>
-.event-record {
-  display: grid;
-
-  grid-template-columns: 2fr 1fr 10fr;
-  grid-template-rows: 1fr;
-}
-</style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
new file mode 100644
index 00000000..dc4bddf2
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -0,0 +1,68 @@
+<template>
+  <component
+    :is="state.component"
+    @click="emit('click')"
+  >
+    {{ text }}
+  </component>
+  <wt-divider
+    :color="state.color"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// maybe, collapse/expand
+const emit = defineEmits(['click']);
+
+const stateMap = {
+  [TimelinePinType.DAY]: {
+    component: 'wt-button',
+    color: 'secondary',
+    // ...
+  },
+  [TimelinePinType.CALL_INBOUND]: {
+    component: 'wt-rounded-action',
+    color: '',
+    icon: '',
+    // ...
+  },
+  [TimelinePinType.CLOSE]: {
+    // ...
+  },
+};
+
+const text = computed(() => {
+  return props.text && '123'; // day number
+});
+
+const state = computed(() => {
+  if (props.collapsed) {
+    return stateMap[TimelinePinType.CLOSE];
+  }
+  return stateMap[props.type];
+});
+</script>
+
+<style scoped lang="scss">
+.wt-divider {
+  //transform: ;
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue
new file mode 100644
index 00000000..7ddf5be0
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="timeline-row-duration">
+    DURATION ME
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  duration: {
+    // TODO
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
new file mode 100644
index 00000000..74aad991
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="timeline-row-info">
+    <p class="timeline-row-info-title">
+      <slot
+        name="title"
+        v-bind="timesScope"
+      >
+        {{ timestamp }}
+      </slot>
+    </p>
+
+    <p class="timeline-row-info-subtitle">
+      <slot
+        name="subtitle"
+        v-bind="timesScope"
+      >
+        {{ timestamp }}
+      </slot>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  timestamp: {
+    type: String,
+    default: 0,
+  },
+});
+
+const timestampTime = computed(() => {
+  const date = new Date(+props.timestamp);
+  return date.toLocaleTimeString();
+});
+
+const timestampWeekDay = computed(() => {
+  const date = new Date(+props.timestamp);
+  return date.toLocaleDateString();
+});
+
+const timestampMonth = computed(() => {
+  const date = new Date(+props.timestamp);
+  return date.toLocaleDateString();
+});
+
+const timesScope = computed(() => {
+  return {
+    timestamp: props.timestamp,
+    time: timestampTime,
+    weekDay: timestampWeekDay,
+    month: timestampMonth,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+// TODO
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/event-initiator-name.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
similarity index 100%
rename from src/modules/contacts/modules/timeline/components/utils/event-initiator-name.vue
rename to src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
new file mode 100644
index 00000000..a8ccaf74
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
@@ -0,0 +1,68 @@
+<template>
+  <article
+    class="timeline-row"
+    :class="{ 'timeline-row--width-fit-content': props.widthFitContent }"
+  >
+    <section class="timeline-row-before-content">
+      <slot name="before-content" />
+    </section>
+
+    <section class="timeline-row-pin">
+      <slot name="pin" />
+    </section>
+
+    <section class="timeline-row-content">
+      <slot name="content" />
+    </section>
+
+    <section
+      v-if="slots['after-content']"
+      class="timeline-row-after-content"
+    >
+      <slot name="after-content" />
+    </section>
+  </article>
+</template>
+
+<script setup>
+import { useSlots } from 'vue';
+
+const props = defineProps({
+  widthFitContent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const slots = useSlots();
+</script>
+
+<style  lang="scss" scoped>
+.timeline-row {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}
+
+.timeline-row-before-content {
+  flex: 0 0 120px;
+}
+
+.timeline-row-pin {
+  flex: 0 0 90px; // wt-button min width
+}
+
+.timeline-row-content {
+  flex: 1;
+}
+
+.timeline-row-after-content {
+  flex: 0 0 24px;
+}
+
+.timeline-row--width-fit-content {
+  .timeline-row-content {
+    flex: 0 0 auto;
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js b/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
new file mode 100644
index 00000000..255afcaa
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
@@ -0,0 +1,10 @@
+const TimelinePinType = Object.freeze({
+  CALL_INBOUND: 'CALL_INBOUND',
+  DAY: 'DAY',
+  CALL_TRANSFER: 'CALL_TRANSFER',
+  CHAT_INVITE: 'CHAT_INVITE',
+  CLOSE: 'CLOSE',
+  // TODO ...
+});
+
+export default TimelinePinType;