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>