Добавлена таблица клиентов и popup окно для удаления и редактирования клиента

src/App.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-4
     the-header
     .flex.flex-auto
       the-sidebar

src/assets/sass/variables.sass

@@ -8,3 +8,6 @@
   --font-grey-color: #9294A7
   --border-light-grey-color: #9294A7
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
+  --bg-hover-row-table: rgba(215, 217, 255, 0.25)
+  --default-white: #FFFFFF
+  --btn-red-color: #FF6F6F

src/components/TheSidebar.vue

@@ -5,7 +5,7 @@
         .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
         .icon-calendar-2
-      the-button-sidebar(id="user" path="#/user")
+      the-button-sidebar(id="user" path="#/clients")
         .icon-person-2
     .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
@@ -24,5 +24,6 @@ export default {
 <style lang="sass" scoped>
 .sidebar
   max-width: 80px
-  background-color: #F8F8FF
+  background-color: #FFFFFF
+  border-top-right-radius: 4px
 </style>

src/pages/calendar/TheCalendar.vue

@@ -1,8 +1,28 @@
 <template lang="pug">
+    div {{persons["person"]}}
 </template>
 
 <script>
+/* eslint-disable */
+
 export default {
   name: "TheCalendar",
+  data() {
+    return {
+      persons: { person: "dasda"},
+    };
+  },
+  methods: {
+    savePersons(data) {
+      console.log(data)
+      this.persons = data
+    },
+  },
+  mounted() {
+    fetch("https://afae35de-056c-4544-96a5-07f01c158778.mock.pstmn.io/urban")
+        .then((res) => res.json())
+        .then((data) => this.savePersons(data))
+  },
 };
 </script>
+,

src/pages/clients/TheClients.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+  clients-wrapper
+</template>
+
+<script>
+import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
+export default {
+  name: "TheClients",
+  components: { ClientsWrapper },
+};
+</script>

src/pages/clients/components/ClientsActionPopup.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+  .popup-wrapper.absolute.flex.flex-col.gap-y-3.w-10.h-10.right-2.top-5.p-4
+    .keep-redaction.flex.gap-x-3
+      .icon-edit.icon-redaction
+      span Редактировать
+    .keep-redaction.flex.gap-x-3
+      .icon-star.icon-redaction
+      span На ведение
+    .delete.flex.gap-x-3
+      .icon-basket
+      span Удалить
+</template>
+
+<script>
+export default {
+  name: "ClientsActionPopup",
+};
+</script>
+
+<style lang="sass" scoped>
+.popup-wrapper
+  width: 180px
+  height: 136px
+  border-radius: 4px 0 4px 4px
+  background-color: var(--default-white)
+  box-shadow: var(--default-shadow)
+.keep-redaction
+  color: var(--font-dark-blue-color)
+.icon-redaction
+  color: var(--btn-blue-color)
+.delete
+  color: var(--btn-red-color)
+</style>

src/pages/clients/components/ClientsTable.vue

@@ -0,0 +1,99 @@
+<template lang="pug">
+  .wrapper.px-6.pt-6.h-full.w-full.min-w-fit
+    table.w-full
+      thead.head-table
+        tr.head-row
+          th.w-3
+            .checkbox.px-4.py-3
+              clients-table-checkbox
+          th.name
+            .flex.px-4.justify-between.gap-x-40
+              span.text-sm ФИО
+              .icon-down-arrow.text-xsm.mt-1
+          th.age
+            .flex.px-4.justify-between
+              span.text-sm Возраст
+              .icon-down-arrow.text-xsm.mt-1
+          th
+            .px-4.text-left
+              span.text-sm Должность
+          th.priority
+            .flex.px-4.justify-between
+              span.text-sm Приоритет
+              .icon-down-arrow.text-xsm.mt-1
+          th
+            .phone.px-4.text-left
+              span.text-sm Телефон
+          th
+            .email.px-4.text-left
+              span.text-sm Email
+          th
+            .networks.px-4.text-left
+              span.text-sm Сети
+          th.meeting
+            .flex.px-4.justify-between.gap-x-11
+              span.text-sm Ближайшая встреча
+              .icon-down-arrow.text-xsm.mt-1
+          th.w-5
+            .do.px-4
+              span.text-sm Do
+      tbody
+        clients-table-row(v-for="client in dataClients"
+          :key="client.id"
+          :id="client.id"
+          :full-name="client.fullName"
+          :age="client.age"
+          :job-title="client.jobTitle"
+          :priority="client.priority"
+          :phone="client.phone"
+          :email="client.email"
+          :networks="client.networks"
+          :meeting-time="client.meetingTime"
+          )
+</template>
+
+<script>
+import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+export default {
+  name: "ClientsTable",
+  components: { ClientsTableCheckbox, ClientsTableRow },
+  data() {
+    return {
+      dataClients: [
+        {
+          id: "1",
+          fullName: "Вильгейльм Арнольд Витальевич",
+          age: "34",
+          jobTitle: "Менеджер",
+          priority: "Высокий",
+          phone: "+7 (915) 657–21–14",
+          email: "Superboyband@yandex.ru",
+          networks: [],
+          meetingTime: {
+            date: "02.06.22",
+            time: "18:30–19:30",
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.head-table
+  color: var(--font-grey-color)
+  border-collapse: separate
+  border-bottom: 8px solid transparent
+.meeting
+  max-width: 180px
+.priority
+  max-width: 80px
+.head-row
+  border-bottom: 1px solid #D3D4DC
+.wrapper
+  background-color: var(--default-white)
+.color
+  background-color: red
+</style>

src/pages/clients/components/ClientsTableCheckbox.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  input.checkbox(type="checkbox")
+</template>
+
+<script>
+export default {
+  name: "ClientsTableCheckBox",
+};
+</script>
+
+<style lang="sass" scoped>
+.checkbox
+  border-color: var(--font-grey-color)
+</style>

src/pages/clients/components/ClientsTableRow.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+  tr.row-client.text-ms.cursor-pointer(:id="id")
+    td.py-5
+      .px-4.items-center
+        clients-table-checkbox
+    td.py-5
+      .px-4.font-semibold {{fullName}}
+    td.py-5
+      .px-4 {{age}}
+    td.py-5
+      .px-4 {{jobTitle}}
+    td.py-5
+      .px-4.flex.items-center.gap-x-2
+        .circle.w-2.h-2
+        span {{priority}}
+    td.py-5
+      .px-4 {{phone}}
+    td.py-5
+      .px-4 {{email}}
+    td.py-5
+      .px-4.flex
+        .w-fit.h-fit(v-for="network in networks" :key="network")
+    td.py-5
+      .px-4.gap-x-2.flex
+        span {{meetingTime.date}}
+        span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
+    td.py-5
+      .px-4
+        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6
+          clients-action-popup
+</template>
+
+<script>
+import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+export default {
+  name: "ClientsTableRow",
+  components: { ClientsTableCheckbox, ClientsActionPopup },
+  props: {
+    id: String,
+    fullName: String,
+    age: String,
+    jobTitle: String,
+    priority: String,
+    phone: String,
+    email: String,
+    networks: Array,
+    meetingTime: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.row-client
+  color: var(--font-dark-blue-color)
+  border-bottom: 1px solid #D3D4DC
+  &:hover
+    background-color: var(--bg-hover-row-table)
+.circle
+  background-color: var(--font-grey-color)
+  border-radius: 50%
+.meeting-time
+  color: var(--font-grey-color)
+.dots-button
+  width: 20px
+  height: 20px
+  border-radius: 50%
+  color: var(--font-grey-color)
+  &:hover
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+</style>

src/pages/clients/components/ClientsWrapper.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.w-full.mx-6
+    clients-table
+</template>
+
+<script>
+import ClientsTable from "@/pages/clients/components/ClientsTable";
+export default {
+  name: "ClientsWrapper",
+  components: { ClientsTable },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/user/TheUser.vue

@@ -1,9 +0,0 @@
-<template lang="pug">
-  div UserPage
-</template>
-
-<script>
-export default {
-  name: "TheUser",
-};
-</script>

src/router.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import TheHome from "@/pages/home/TheHome.vue";
 import TheCalendar from "@/pages/calendar/TheCalendar";
-import TheUser from "@/pages/user/TheUser";
+import TheUser from "@/pages/clients/TheClients";
 import TheSettings from "@/pages/settings/TheSettings";
 
 export default createRouter({
@@ -9,7 +9,7 @@ export default createRouter({
   routes: [
     { path: "/", component: TheHome },
     { path: "/calendar", component: TheCalendar },
-    { path: "/user", component: TheUser },
+    { path: "/clients", component: TheUser },
     { path: "/settings", component: TheSettings },
   ],
 });

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
         sans: ["Raleway", "sans-serif"],
       },
       fontSize: {
+        xsm: ["10px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],
         xs: ["13px", { lineHeight: "15px" }],
         sm: ["14px", { lineHeight: "16px" }],