initial

apps/client/components/settings/finance-notification-table.vue

@@ -0,0 +1,61 @@
+<template>
+  <SettingsRawTable :columns="columns" :data="data">
+    <template #cell(finance_notifications)="{ row }">
+      <div class="d-flex align-items-center text-clr-grey-600">
+        <Component :is="resolveComponent(`ui-icon-${row.original.icon}`)" :style="`color: ${row.original.color}`" />
+        <h4 class="ml-10">
+          {{ row.original.finance_notifications }}
+        </h4>
+      </div>
+    </template>
+
+    <template #cell(telegram)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="telegram" />
+      </div>
+    </template>
+
+    <template #cell(mail)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="mail" :model-value="true" disabled />
+      </div>
+    </template>
+
+    <template #cell(push)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="push" :model-value="true" />
+      </div>
+    </template>
+  </SettingsRawTable>
+</template>
+
+<script setup>
+import { createColumnHelper } from '@tanstack/vue-table'
+
+const columnHelper = createColumnHelper()
+
+const columns = [
+  columnHelper.display({
+    id: 'finance_notifications',
+    header: 'Finance Notifications',
+  }),
+  columnHelper.display({
+    id: 'telegram',
+    header: 'Telegram',
+  }),
+  columnHelper.display({
+    id: 'mail',
+    header: 'Mail',
+  }),
+  columnHelper.display({
+    id: 'push',
+    header: 'Push',
+  }),
+]
+
+const data = [
+  { finance_notifications: 'Поступления средств', icon: 'ArrowReceive', color: '#10C44C' },
+  { finance_notifications: 'Выводы', icon: 'ArrowSend', color: '#1464D3' },
+  { finance_notifications: 'Счет частично оплачен', icon: 'InstallmentPlan' },
+]
+</script>

apps/client/components/settings/limit-progress.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="block">
+    <span class="text-small">Spent</span>
+    <span class="text-small">Remaining limit </span>
+  </div>
+
+  <UiProgressBar class="progress" :progress="(amount / maxAmount) * 100" />
+
+  <div class="block">
+    <span class="text-amount">{{ amount }} <span class="text-currency">{{ currency }}</span></span>
+    <span class="text-amount">{{ maxAmount - amount }} <span class="text-currency">{{ currency }}</span> </span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  currency: { type: String, required: true },
+  amount: { type: Number, required: true },
+  maxAmount: { type: Number, required: true },
+})
+</script>
+
+<style lang="scss" scoped>
+.block{
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress{
+  margin-block: 8px;
+}
+
+.text-small {
+  @include txt-r;
+  color: $clr-grey-500;
+}
+
+.text-currency {
+  @include txt-i-sb;
+  color: $clr-grey-400;
+}
+.text-amount{
+  @include txt-i-sb;
+}
+</style>

apps/client/components/settings/property-item.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="settings-property-item">
+    <Component
+      :is="resolveComponent(`ui-icon-${icon}`)"
+      class="settings-property-item__icon"
+    />
+
+    <div class="settings-property-item-content">
+      <p class="settings-property-item-content__title">
+        {{ title }}
+      </p>
+      <p v-if="text" class="settings-property-item-content__text">
+        {{ text }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  text: { type: String },
+})
+</script>
+
+<style lang="scss">
+.settings-property-item {
+  display: flex;
+  align-items: center;
+
+  &__icon{
+    color: $clr-cyan-500;
+    margin-right: 10px;
+  }
+
+}
+
+.settings-property-item-content{
+  &__title {
+    @include txt-i-sb;
+  }
+
+  &__text {
+    @include txt-s-m;
+    margin-top: 4px;
+    color: $clr-grey-500;
+  }
+}
+</style>

apps/client/components/settings/property.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="settings-property">
+    <SettingsPropertyItem :icon="icon" :text="text" :title="title" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  text: { type: String },
+})
+</script>
+
+<style lang="scss">
+.settings-property {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 62px;
+}
+</style>

apps/client/components/settings/raw-table.vue

@@ -0,0 +1,112 @@
+<template>
+  <table class="settings-table">
+    <thead>
+      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+        <th
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :colSpan="header.colSpan"
+          :class="[header.id]"
+          :style="{
+            width: `${header.getSize()}px`,
+          }"
+        >
+          <template v-if="!header.isPlaceholder">
+            <FlexRender
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+          </template>
+        </th>
+      </tr>
+    </thead>
+
+    <slot>
+      <tbody>
+        <tr v-for="row in table.getRowModel().rows" :key="row.id">
+          <td
+            v-for="cell in row.getVisibleCells()"
+            :key="cell.id"
+            :class="[cell.column.id]"
+          >
+            <slot :name="`cell(${cell.column.id})`" v-bind="cell.getContext()">
+              <FlexRender
+                :render="cell.column.columnDef.cell"
+                :props="cell.getContext()"
+              />
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </slot>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table'
+import type { ColumnDef } from '@tanstack/vue-table'
+
+export interface Props {
+  columns: ColumnDef<unknown>[]
+  data: unknown[]
+}
+
+defineOptions({
+  name: 'SettingsTable',
+})
+
+const props = defineProps<Props>()
+
+const table = useVueTable({
+  get data() {
+    return props.data
+  },
+  get columns() {
+    return props.columns
+  },
+  getCoreRowModel: getCoreRowModel(),
+})
+</script>
+
+<style lang="scss">
+.settings-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+
+  margin-block: -8px;
+
+  th {
+    @include h5;
+
+    background-color: $clr-grey-100;
+    color: $clr-grey-500;
+
+    &:first-child {
+
+      border-top-left-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+  }
+
+  td{
+
+  }
+
+  td,
+  th {
+    padding: 16px 24px;
+
+    &:first-child {
+      width: 300px;
+      text-align: left;
+    }
+  }
+
+}
+</style>

apps/client/components/settings/service-notification-table.vue

@@ -0,0 +1,59 @@
+<template>
+  <SettingsRawTable :columns="columns" :data="data">
+    <template #cell(service_notifications)="{ row }">
+      <div class="d-flex align-items-center text-clr-grey-600">
+        <Component :is="resolveComponent(`ui-icon-${row.original.icon}`)" />
+        <h4 class="ml-10">
+          {{ row.original.service_notifications }}
+        </h4>
+      </div>
+    </template>
+
+    <template #cell(telegram)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="telegram" />
+      </div>
+    </template>
+
+    <template #cell(mail)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="mail" :model-value="true" />
+      </div>
+    </template>
+
+    <template #cell(push)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="push" :model-value="true" />
+      </div>
+    </template>
+  </SettingsRawTable>
+</template>
+
+<script setup>
+import { createColumnHelper } from '@tanstack/vue-table'
+
+const columnHelper = createColumnHelper()
+
+const columns = [
+  columnHelper.display({
+    id: 'service_notifications',
+    header: 'Service Notifications',
+  }),
+  columnHelper.display({
+    id: 'telegram',
+    header: 'Telegram',
+  }),
+  columnHelper.display({
+    id: 'mail',
+    header: 'Mail',
+  }),
+  columnHelper.display({
+    id: 'push',
+    header: 'Push',
+  }),
+]
+
+const data = [
+  { service_notifications: 'Вход в аккаунт', icon: 'signin' },
+]
+</script>

apps/client/components/settings/tariff-card.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="settings-tariff-card">
+    <div class="settings-tariff-card__header">
+      <div>
+        <slot name="icon" />
+        <h4 class="d-inline-block ml-8 text-clr-grey-600">
+          {{ title }}
+        </h4>
+      </div>
+
+      <slot name="subtitle" />
+    </div>
+    <div class="settings-tariff-card__content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+})
+</script>
+
+<style lang="scss">
+.settings-tariff-card {
+  &__header{
+    padding: 24px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    background-color: $clr-grey-100;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__content{
+    padding: 24px;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border: 2px solid $clr-grey-100;
+
+    display: flex;
+    gap: 32px;
+  }
+}
+</style>