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

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>