From ea1eb7b7bced66e8a49cbaf46a083604b3622154 Mon Sep 17 00:00:00 2001
From: isKonstantin <me@knst.su>
Date: Fri, 22 Dec 2023 20:06:48 +0300
Subject: [PATCH] Accumulation support

---
 components/accounts/entry.vue                 |  15 +-
 components/accounts/tagGroup.vue              |  26 +++-
 components/buttons/walletButton.vue           |  16 ++
 components/modal/account/edit.vue             |   9 +-
 components/modal/accumulation/set.vue         | 138 ++++++++++++++++++
 components/modal/accumulation/stepEntry.vue   |  51 +++++++
 components/modal/transaction/edit/edit.vue    |   2 +-
 .../modal/transaction/edit/internal.vue       |   4 +-
 components/select/account.vue                 |  10 +-
 components/transactions/table/tableEntry.vue  |  38 ++++-
 composables/useApiLoader.ts                   |   5 +
 lang/en-US.json                               |  24 ++-
 lang/ru-RU.json                               |  27 +++-
 libs/api/accumulations/AccumulationsApi.ts    |  61 ++++++++
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 pages/transactions.vue                        |   1 +
 17 files changed, 406 insertions(+), 27 deletions(-)
 create mode 100644 components/buttons/walletButton.vue
 create mode 100644 components/modal/accumulation/set.vue
 create mode 100644 components/modal/accumulation/stepEntry.vue
 create mode 100644 libs/api/accumulations/AccumulationsApi.ts

diff --git a/components/accounts/entry.vue b/components/accounts/entry.vue
index c3664dd..29a2aa1 100644
--- a/components/accounts/entry.vue
+++ b/components/accounts/entry.vue
@@ -14,7 +14,7 @@
             {{account.name}}
           </p>
 
-          <div  class="flex gap-1">
+          <div class="flex gap-1" v-if="!hideButtons">
             <hide-button class="btn btn-xs btn-ghost m-0 p-0.5" :hide-status="account.hidden" @hide="hide" @unHide="unHide"/>
             <edit-button v-if="!account.hidden" class="btn btn-xs btn-ghost m-0 p-0.5" @event="emit('edit-modal')"/>
           </div>
@@ -36,16 +36,23 @@
 import HideButton from "~/components/buttons/hideButton.vue";
 import EditButton from "~/components/buttons/editButton.vue";
 import DeleteButton from "~/components/buttons/deleteButton.vue";
+import WalletButton from "~/components/buttons/walletButton.vue";
 
-const emit = defineEmits(['edit-modal']);
+const emit = defineEmits(['edit-modal', 'accumulation-modal']);
 
 const props = defineProps({
-  account: {}
+  account: {
+    required: true
+  },
+  hideButtons: {
+    default: false,
+    required: false
+  }
 })
 
 const { t, locale } = useI18n();
 const { $currenciesApi, $accountsApi, $toastsManager } = useNuxtApp();
-const currency = (await $currenciesApi.getCurrencies()).value.find(c => c.currencyId === props.account.currencyId)
+const currency = $currenciesApi.getCurrencies().value.find(c => c.currencyId === props.account.currencyId)
 
 const formatAmount = (delta) => {
   const formatter = Intl.NumberFormat(locale.value, {
diff --git a/components/accounts/tagGroup.vue b/components/accounts/tagGroup.vue
index 6f17c04..d6e75f4 100644
--- a/components/accounts/tagGroup.vue
+++ b/components/accounts/tagGroup.vue
@@ -22,9 +22,17 @@
     <div v-if="!hideStatus" class="bg-base-300 rounded-b-2xl p-2">
       <div v-if="accounts.length > 0" class="flex flex-col gap-2">
         <transition-group name="accounts">
-          <entry v-for="account in showedAccounts" :account="account" @edit-modal="openEditAccountModal(account)" :key="account.accountId"/>
-
-          <entry v-for="account in hiddenAccounts" :account="account" @edit-modal="openEditAccountModal(account)" :key="account.accountId"/>
+          <entry v-for="account in showedAccounts"
+                 :account="account"
+                 @edit-modal="openEditAccountModal(account)"
+                 :key="account.accountId"
+          />
+
+          <entry v-for="account in hiddenAccounts"
+                 :account="account"
+                 @edit-modal="openEditAccountModal(account)"
+                 :key="account.accountId"
+          />
         </transition-group>
       </div>
       <div v-else class="card min-w-max templateBorder">
@@ -49,7 +57,8 @@
     </confirmation>
 
     <modal-account-tag-edit @close="tagEditModal = false" :opened="tagEditModal" :tag="tag"/>
-    <modal-account-edit :account="accountToEdit" :opened="accountEditModal" @close="accountEditModal = false"></modal-account-edit>
+    <modal-account-edit :account="accountToEdit" :opened="accountEditModal" @close="accountEditModal = false" @open-accumulation="openAccumulationModal(accountToEdit)" ></modal-account-edit>
+    <modal-accumulation-set @close="accumulationSetModal = false" :opened="accumulationSetModal" :account="accountToAccumulation" ></modal-accumulation-set>
   </div>
 </template>
 
@@ -87,11 +96,11 @@ const hiddenAccounts = computed(() => props.accounts.filter((a) => a.hidden));
 const createAccountModal = ref(false);
 const tagDeleteModal = ref(false);
 const tagEditModal = ref(false);
+const accumulationSetModal = ref(false);
 
 const accountEditModal = ref(false);
-
 const accountToEdit = ref(null);
-
+const accountToAccumulation = ref(null);
 const setHide = () => {
   emit('hide');
 }
@@ -109,6 +118,11 @@ const openEditAccountModal = (account) => {
   accountEditModal.value = true;
 }
 
+const openAccumulationModal = (account) => {
+  accountToAccumulation.value = account;
+  accumulationSetModal.value = true;
+}
+
 const confirmDelete = () => {
   tagDeleteModal.value = false;
 
diff --git a/components/buttons/walletButton.vue b/components/buttons/walletButton.vue
new file mode 100644
index 0000000..b49cd75
--- /dev/null
+++ b/components/buttons/walletButton.vue
@@ -0,0 +1,16 @@
+<template>
+  <div @click="emit('event')">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['event']);
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/modal/account/edit.vue b/components/modal/account/edit.vue
index 5825dc6..6d62a3e 100644
--- a/components/modal/account/edit.vue
+++ b/components/modal/account/edit.vue
@@ -24,7 +24,7 @@
                 v-model="tag"
                 @change="syncTag">
           <option disabled value="-1">{{ $t('modals.editAccount.placeholders.tagSelect') }}</option>
-          <option v-for="tag in allTags" :value="tag.tagId">{{ tag.name + (tag.description !== undefined ? ` (${tag.description})` : "") }}</option>
+          <option v-for="tag in allTags" :value="tag.tagId">{{ tag.name + (tag.description ? ` (${tag.description})` : "") }}</option>
         </select>
       </div>
 
@@ -36,7 +36,9 @@
                 :maxlength="configs.maxDescriptionLength">
       </textarea>
 
-      <div class="modal-action">
+      <div class="modal-action justify-between items-center">
+        <button @click="emit('openAccumulation')" class="btn btn-sm">{{ $t('modals.editAccount.accumulation') }}</button>
+
         <button @click="close" class="btn btn-sm">{{ $t('modals.buttons.close') }}</button>
       </div>
     </div>
@@ -75,6 +77,7 @@
 
 import Default from "~/components/modal/transaction/create/default.vue";
 import Internal from "~/components/modal/transaction/create/internal.vue";
+import WalletButton from "~/components/buttons/walletButton.vue";
 
 const props = defineProps({
   opened: {
@@ -87,7 +90,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'openAccumulation'])
 const tab = ref(0);
 
 const { t } = useI18n();
diff --git a/components/modal/accumulation/set.vue b/components/modal/accumulation/set.vue
new file mode 100644
index 0000000..9d6f32f
--- /dev/null
+++ b/components/modal/accumulation/set.vue
@@ -0,0 +1,138 @@
+<template>
+  <modal-base :title="$t('modals.setAccumulation.title')" :opened="opened" :name="'accumulation-set-modal'">
+    <div class="w-full flex flex-col gap-2">
+      <div class="flex justify-center">
+         <accounts-entry class="templateBorder w-1/2" v-if="account" :account="account" :hide-buttons="true"/>
+      </div>
+
+      <div class="flex gap-2">
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">{{ $t('modals.setAccumulation.placeholders.targetAccount') }}</span>
+          </label>
+
+          <select-account v-model="targetAccountId" :exclude-account="sourceAccountId" :currency-filter="currencyFilter"/>
+        </div>
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">{{ $t('modals.setAccumulation.placeholders.tag') }}</span>
+          </label>
+
+          <select-transaction-tag v-model="tagId" :can-be-without-parent="false" :tags-tree="tagsTree"/>
+        </div>
+      </div>
+
+      <step-entry v-for="(step, index) in steps" :model-value="step" @update:model-value="args => steps[index] = args"/>
+
+      <div class="w-full" v-if="configs.maxStepsPerAccount > steps.length">
+        <plus-button class="btn w-full" @event="steps.push({from: null, to: null, step: null})" />
+      </div>
+    </div>
+
+    <div class="modal-action justify-between">
+      <delete-button @click="deleteAccumulation" class="btn btn-sm btn-error" :class="{'btn-warning' : !allValid}">{{ $t('modals.buttons.delete') }}</delete-button>
+
+      <div class="flex gap-2">
+        <button @click="close" class="btn btn-sm btn-ghost">{{ $t('modals.buttons.cancel') }}</button>
+        <button @click="set" class="btn btn-sm btn-success" :class="{'btn-warning' : !allValid}">{{ $t('modals.buttons.set') }}</button>
+      </div>
+    </div>
+  </modal-base>
+</template>
+
+<script setup>
+import StepEntry from "~/components/modal/accumulation/stepEntry.vue";
+import PlusButton from "~/components/buttons/plusButton.vue";
+import DeleteButton from "~/components/buttons/deleteButton.vue";
+
+const props = defineProps({
+  opened: {
+    type: Boolean,
+    required: true
+  },
+
+  account: {
+    required: true
+  }
+})
+
+const { t } = useI18n();
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+  emit('close')
+}
+
+const {$serverConfigs, $accumulationsApi, $transactionsTagsApi, $toastsManager} = useNuxtApp();
+const configs = $serverConfigs.configs.accumulation;
+
+const accumulationMap = $accumulationsApi.getAccumulationMap();
+const tagsTree = $transactionsTagsApi.getTagsTree();
+
+const highlightErrors = ref(false);
+const allValid = computed(() => sourceAccountId.value && targetAccountId.value && tagId.value && steps.value.length > 0 && !steps.value.find(v => !v.step))
+
+const account = ref();
+const steps = ref([]);
+const sourceAccountId = ref();
+const targetAccountId = ref();
+const tagId = ref();
+const currencyFilter = ref();
+
+watch(() => props.opened, (value) => {
+  if (!value)
+    return;
+
+  const v = accumulationMap.value.get(props.account.accountId) || {};
+
+  sourceAccountId.value = props.account.accountId;
+  targetAccountId.value = v.targetAccountId;
+  tagId.value = v.tagId;
+  steps.value = v.steps || [{from: null, to: null, steps: null}];
+  account.value = props.account;
+  currencyFilter.value = props.account.currencyId;
+})
+
+const set = () => {
+  if (!allValid.value) {
+    highlightErrors.value = true;
+
+    return;
+  }
+
+  const result = {
+    sourceAccountId: sourceAccountId.value,
+    targetAccountId: targetAccountId.value,
+    tagId: tagId.value,
+    steps: steps.value
+  }
+
+  highlightErrors.value = false;
+  close();
+
+  $accumulationsApi.setAccumulation(result).then((s) => {
+    if (s)
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.success"), 2500, "success")
+    else
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.error"), 3000,"error")
+  });
+}
+
+const deleteAccumulation = () => {
+  close();
+
+  $accumulationsApi.removeAccumulation(sourceAccountId.value).then((s) => {
+    if (s)
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.deleted"), 2500, "success")
+    else
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.error"), 3000,"error")
+  });
+}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/modal/accumulation/stepEntry.vue b/components/modal/accumulation/stepEntry.vue
new file mode 100644
index 0000000..b7a69d4
--- /dev/null
+++ b/components/modal/accumulation/stepEntry.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="join flex">
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.from')" v-model.lazy="from" @change="update"/>
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.to')" v-model.lazy="to" @change="update"/>
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.step')" v-model.lazy="step" @change="update"/>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+
+  }
+})
+
+const { t } = useI18n();
+
+const from = ref(null);
+const to = ref(null);
+const step = ref(10);
+
+const emit = defineEmits(['update:modelValue', 'updated'])
+
+const update = () => {
+  if (from.value === props.modelValue.from && to.value === props.modelValue.to && step.value === props.modelValue.step)
+    return;
+
+  emit("update:modelValue", {
+    from: from.value,
+    to: to.value,
+    step: step.value
+  });
+
+  emit("updated");
+}
+
+watch(() => props.modelValue, () => {
+  from.value = props.modelValue.from;
+  to.value = props.modelValue.to;
+  step.value = props.modelValue.step;
+});
+
+from.value = props.modelValue.from;
+to.value = props.modelValue.to;
+step.value = props.modelValue.step;
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/modal/transaction/edit/edit.vue b/components/modal/transaction/edit/edit.vue
index b4d0db0..50d70fa 100644
--- a/components/modal/transaction/edit/edit.vue
+++ b/components/modal/transaction/edit/edit.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <default :opened="typeOpened === 0" :transaction="transaction"  @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
+    <default :opened="typeOpened === 0 || typeOpened === 2 || typeOpened === 3" :transaction="transaction"  @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
     <internal :opened="typeOpened === 1" :transaction="transaction" @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
   </div>
 </template>
diff --git a/components/modal/transaction/edit/internal.vue b/components/modal/transaction/edit/internal.vue
index b9844d1..a93a76d 100644
--- a/components/modal/transaction/edit/internal.vue
+++ b/components/modal/transaction/edit/internal.vue
@@ -123,7 +123,7 @@ const tagsTree = $transactionsTagsApi.getTagsTree();
 const tagsMap = $transactionsTagsApi.getTagsTreeMap();
 
 const excludeAccount = computed(() => {
-  if (!props.transaction)
+  if (!props.transaction || !props.opened)
     return null;
 
   return tab.value === 1 ? props.transaction.accountId : (props.transaction.metadata ? props.transaction.metadata.linkedTransaction.accountId : -1);
@@ -147,7 +147,7 @@ watch(() => props.opened, (newV, oldV) => {
 })
 
 const transactionToEdit = computed(() => {
-  if (!props.transaction)
+  if (!props.transaction || !props.opened)
     return null;
 
   return tab.value === 0 ? props.transaction : (props.transaction.metadata ? props.transaction.metadata.linkedTransaction : null);
diff --git a/components/select/account.vue b/components/select/account.vue
index 8d3d9ba..7ce3a29 100644
--- a/components/select/account.vue
+++ b/components/select/account.vue
@@ -20,6 +20,10 @@ const props = defineProps({
 
   excludeAccount: {
     type: Number
+  },
+
+  currencyFilter: {
+    type: Number
   }
 })
 
@@ -27,13 +31,13 @@ const emit = defineEmits(['update:modelValue', 'selected'])
 const { t } = useI18n();
 const {$accountsApi, $accountsTagsApi} = useNuxtApp();
 
-const tags = await $accountsTagsApi.getTags();
-const accounts = await $accountsApi.getAccounts();
+const tags = $accountsTagsApi.getTags();
+const accounts = $accountsApi.getAccounts();
 
 const value = ref(props.modelValue || null);
 
 const getTagAccounts = (t) => {
-  return useArrayFilter(accounts, a => a.tagId === t.tagId).value
+  return useArrayFilter(accounts, a => a.tagId === t.tagId && (!props.currencyFilter || a.currencyId === props.currencyFilter)).value
 }
 
 const options = computed(() => {
diff --git a/components/transactions/table/tableEntry.vue b/components/transactions/table/tableEntry.vue
index e4ba4f0..532ad25 100644
--- a/components/transactions/table/tableEntry.vue
+++ b/components/transactions/table/tableEntry.vue
@@ -6,6 +6,8 @@
         {{ formatDelta(transaction.delta, transaction.currencyId) }}
       </th>
 
+      <th></th>
+
       <td class="w-48">{{ tagsMap.get(transaction.tagId).tag.name }}</td>
       <td class="w-48">{{ new Date(transaction.createdAt).toLocaleString(locale, {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'}) }}</td>
       <td class="w-48">{{ accountsMap.get(transaction.accountId).name }}</td>
@@ -25,7 +27,11 @@
               {{ formatDelta(transaction.metadata.linkedTransaction.delta, transaction.metadata.linkedTransaction.currencyId) }}
             </p>
           </div>
+        </div>
+      </th>
 
+      <th>
+        <div class="flex justify-center items-center">
           <div class="tooltip btn btn-sm m-0 p-1 btn-ghost z-10" :data-tip="formatExchangeRate(transaction, exchangeRateMode)" @click="exchangeRateMode = !exchangeRateMode">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
@@ -59,15 +65,43 @@
       </td>
     </template>
     <template v-else-if="transaction.metadata.type === 2">
+      <th class="w-32">
+        <p :class="{'text-success' : transaction.delta > 0, 'text-error' : transaction.delta < 0}">
+          {{ formatDelta(transaction.delta, transaction.currencyId) }}
+        </p>
+      </th>
+
+      <th>
+        <div class="flex justify-center items-center">
+          <div class="tooltip z-10" :data-tip="$t('transactionsPage.placeholders.recurring')">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+            </svg>
+          </div>
+        </div>
+      </th>
+
+      <td class="w-48">{{ tagsMap.get(transaction.tagId).tag.name }}</td>
+      <td class="w-48">{{ new Date(transaction.createdAt).toLocaleString(locale, {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'}) }}</td>
+      <td class="w-48">{{ accountsMap.get(transaction.accountId).name }}</td>
+      <td>
+        {{ transaction.description }}
+      </td>
+    </template>
+    <template v-else-if="transaction.metadata.type === 3">
       <th class="w-32">
         <div class="flex gap-2 items-center">
           <p :class="{'text-success' : transaction.delta > 0, 'text-error' : transaction.delta < 0}">
             {{ formatDelta(transaction.delta, transaction.currencyId) }}
           </p>
+        </div>
+      </th>
 
-          <div class="tooltip z-10" :data-tip="$t('transactionsPage.placeholders.recurring')">
+      <th>
+        <div class="flex justify-center items-center">
+          <div class="tooltip z-10" :data-tip="$t('transactionsPage.placeholders.accumulation')">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" />
             </svg>
           </div>
         </div>
diff --git a/composables/useApiLoader.ts b/composables/useApiLoader.ts
index fd267fd..b4be99d 100644
--- a/composables/useApiLoader.ts
+++ b/composables/useApiLoader.ts
@@ -14,6 +14,7 @@ import {NotificationApi} from "~/libs/api/notification/NotificationApi";
 import {AdminApi} from "~/libs/api/admin/AdminApi";
 import {ConfigManager} from "~/libs/config/ConfigManager";
 import {ServerConfigs} from "~/libs/config/ServerConfigs";
+import {AccumulationsApi} from "~/libs/api/accumulations/AccumulationsApi";
 
 export const useApiLoader = new class ApiLoader {
     private serverConfigs: ConfigManager;
@@ -33,6 +34,7 @@ export const useApiLoader = new class ApiLoader {
     private notificationsApi : NotificationApi;
 
     private adminApi : AdminApi;
+    protected accumulationsApi: AccumulationsApi;
 
     constructor() {
         this.serverConfigs = new ConfigManager();
@@ -50,6 +52,7 @@ export const useApiLoader = new class ApiLoader {
         this.analyticsApi = new AnalyticsApi();
         this.notesApi = new NotesApi();
         this.notificationsApi = new NotificationApi();
+        this.accumulationsApi = new AccumulationsApi();
 
         this.adminApi = new AdminApi();
     }
@@ -74,6 +77,7 @@ export const useApiLoader = new class ApiLoader {
             this.analyticsApi.init(),
             this.notesApi.init(),
             this.notificationsApi.init(),
+            this.accumulationsApi.init(),
             this.adminApi.init()
         ]).then(results => {
             return results.map(r => typeof r == "boolean" ? r : true).find((v) => !v) === undefined;
@@ -95,6 +99,7 @@ export const useApiLoader = new class ApiLoader {
                 userApi: this.userApi,
                 sessionsApi: this.sessionsApi,
                 notificationsApi: this.notificationsApi,
+                accumulationsApi: this.accumulationsApi,
                 adminApi: this.adminApi
             }
         }
diff --git a/lang/en-US.json b/lang/en-US.json
index b1d6f0d..953aa84 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -59,7 +59,8 @@
         "time": "Filter by time",
         "description": "Filter by description"
       },
-      "recurring": "Recurring"
+      "recurring": "Recurring",
+      "accumulation": "Accumulation Applied"
     },
     "table": {
       "amount": "Amount",
@@ -238,6 +239,7 @@
       "cancel": "Cancel",
       "confirm": "Confirm",
       "apply": "Apply",
+      "set": "Set",
       "close": "Close"
     },
 
@@ -359,6 +361,24 @@
       }
     },
 
+    "setAccumulation": {
+      "title": "Set Accumulation",
+      "placeholders": {
+        "targetAccount": "Target Account",
+        "tag": "Tag",
+        "stepEntry": {
+          "from": "From",
+          "to": "To",
+          "step": "Step"
+        }
+      },
+      "messages": {
+        "success": "Accumulation set",
+        "deleted": "Accumulation deleted",
+        "error": "Oops, failed to set accumulation"
+      }
+    },
+
     "newCurrency": {
       "title": "New currency",
       "placeholders": {
@@ -431,6 +451,8 @@
         "amount": "Amount"
       },
 
+      "accumulation": "Accumulation Settings",
+
       "placeholders": {
         "accountName": "Account name",
         "accountDescription": "Account description",
diff --git a/lang/ru-RU.json b/lang/ru-RU.json
index afec4ea..3038790 100644
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@@ -60,7 +60,8 @@
         "description": "Фильтр по описанию"
       },
 
-      "recurring": "Автоматическая"
+      "recurring": "Автоматическая",
+      "accumulation": "Применено Автонакопление"
     },
     "table": {
       "amount": "Сумма",
@@ -248,6 +249,7 @@
       "cancel": "Отмена",
       "confirm": "Подтвердить",
       "apply": "Применить",
+      "set": "Установить",
       "close": "Закрыть"
     },
 
@@ -369,6 +371,24 @@
       }
     },
 
+    "setAccumulation": {
+      "title": "Настроить Автонакопление",
+      "placeholders": {
+        "targetAccount": "Куда",
+        "tag": "Тег",
+        "stepEntry": {
+          "from": "От",
+          "to": "До",
+          "step": "Шаг"
+        }
+      },
+      "messages": {
+        "success": "Автонакопление настроено",
+        "deleted": "Автонакопление удалено",
+        "error": "Ошибка настройки автонакопления"
+      }
+    },
+
     "newCurrency": {
       "title": "Новая валюта",
       "placeholders": {
@@ -440,6 +460,9 @@
         "general": "Основное",
         "amount": "Сумма"
       },
+
+      "accumulation": "Настройки Автонакопления",
+
       "placeholders": {
         "accountName": "Название",
         "accountDescription": "Описание",
@@ -546,7 +569,7 @@
         "transactionDescription": "Описание"
       },
       "messages": {
-        "success": "Транзакция редактирована",
+        "success": "Транзакция отредактирована",
         "error": "Ошибка изменения транзакции"
       }
     },
diff --git a/libs/api/accumulations/AccumulationsApi.ts b/libs/api/accumulations/AccumulationsApi.ts
new file mode 100644
index 0000000..598039a
--- /dev/null
+++ b/libs/api/accumulations/AccumulationsApi.ts
@@ -0,0 +1,61 @@
+import {AbstractApi} from "~/libs/api/AbstractApi";
+import {Ref} from "vue";
+
+export class AccumulationsApi extends AbstractApi {
+    private accumulationsMap: Ref<Map<number, any>> = ref(new Map<number, any>);
+
+    async init(): Promise<void | boolean> {
+        await this.fetchMap();
+    }
+
+    protected async fetchMap() : Promise<void> {
+        const {data} = await useApi<any>("/user/accumulations/getList");
+
+        const newMap = new Map<number, any>();
+
+        data.value.accumulations.forEach((accumulation) => {
+            newMap.set(accumulation.sourceAccountId, accumulation);
+        })
+
+        this.accumulationsMap.value = newMap;
+    }
+
+    public async setAccumulation(accumulation: any) {
+        const opts = {
+            method: "POST",
+            body: accumulation
+        };
+
+        const { error } = await useApi("/user/accumulations/set", opts);
+
+        if (error.value !== null) {
+            return false;
+        }
+
+        this.accumulationsMap.value.set(accumulation.sourceAccountId, accumulation);
+
+        return true;
+    }
+
+    public getAccumulationMap(): Ref<Map<number, any>> {
+        return this.accumulationsMap;
+    }
+
+    public async removeAccumulation(accountId: number) {
+        const opts = {
+            method: "POST",
+            params: { accountId: accountId}
+        };
+
+        const { error } = await useApi("/user/accumulations/remove", opts);
+
+        if (error.value !== null) {
+            return false;
+        }
+
+        this.accumulationsMap.value.delete(accountId);
+
+        return true;
+    }
+
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b0ebf43..cb66cad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "finwave",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "finwave",
-      "version": "0.6.4",
+      "version": "0.7.0",
       "hasInstallScript": true,
       "dependencies": {
         "@coingecko/cryptoformat": "^0.5.4",
diff --git a/package.json b/package.json
index 5ab06ed..5b00a90 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finwave",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
diff --git a/pages/transactions.vue b/pages/transactions.vue
index 2924c24..c9107b7 100644
--- a/pages/transactions.vue
+++ b/pages/transactions.vue
@@ -10,6 +10,7 @@
           <thead>
           <tr>
             <th>{{$t("transactionsPage.table.amount")}}</th>
+            <th class="w-8"></th>
             <th>{{$t("transactionsPage.table.tag")}}</th>
             <th>{{$t("transactionsPage.table.createdAt")}}</th>
             <th>{{$t("transactionsPage.table.account")}}</th>