From 7ae38604d274c9e02efe786281ea710832ae6a91 Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Mon, 4 Nov 2024 17:41:35 +0300
Subject: [PATCH] fixes

---
 src/App.vue                                   |   6 +-
 src/assets/main.css                           |   2 +
 src/components/MenuBar.vue                    |  12 +--
 src/components/OverlayView.vue                |   4 +-
 src/components/budgets/BudgetCategoryView.vue |  40 ++++---
 .../budgets/BudgetTransactionView.vue         |  30 ++++--
 src/components/budgets/BudgetView.vue         | 100 +++++++++++++-----
 .../budgets/TransactionEditDrawer.vue         |  38 ++++---
 src/services/budgetsService.ts                |   2 +-
 src/services/categoryService.ts               |   2 +-
 src/services/transactionService.ts            |  14 ++-
 11 files changed, 168 insertions(+), 82 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2e2a829..5c6d55e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,18 +10,16 @@
       <Button label="Sub" :class="checkNotif ? 'flex' : '!hidden'" @click="checkSubscribe"/>
       <router-view/>
     </div>
-    <OverlayView class="w-full sticky  invisible lg:visible top-0 z-10"/>
+<!--    <OverlayView class="w-full sticky  invisible lg:visible top-0 z-10"/>-->
 
   </div>
 </template>
 
 <script setup lang="ts">
 import MenuBar from "./components/MenuBar.vue";
-import OverlayView from "@/components/OverlayView.vue";
 import ToolBar from "@/components/ToolBar.vue";
 import Button from "primevue/button";
-import axiosSetup from "@/services/axiosSetup";
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted} from "vue";
 import {subscribeUserToPush} from "@/services/pushManager";
 import apiClient from '@/services/axiosSetup';
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 194c318..ef7adb3 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -17,6 +17,8 @@
     height: 0.5rem !important;
 }
 
+
+
 canvas {
     /*margin-top: 1rem;*/
     /*height: 12    8px !important*/
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index bd6cb06..d00bb29 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -42,18 +42,18 @@ import Menubar from "primevue/menubar";
 
 const items = ref([
   {
-    label: 'Home',
+    label: 'Главная',
     icon: 'pi pi-home',
     url: '/'
   },
   {
-    label: 'Analytics',
+    label: 'Аналитика',
     icon: 'pi pi-star',
     url: '/analytics'
   },
   {
-    label: 'Budgets',
-    icon: 'pi pi-search',
+    label: 'Бюджеты',
+    icon: 'pi pi-briefcase',
     url: '/budgets'
     // items: [
     //   {
@@ -93,12 +93,12 @@ const items = ref([
     // ]
   },
   {
-    label: 'Transactions',
+    label: 'Транзакции',
     icon: "pi pi-star",
     url: '/transactions'
   },
   {
-    label: 'Settings',
+    label: 'Настройки',
     icon: 'pi pi-envelope',
     url: '/settings',
     // badge: 3
diff --git a/src/components/OverlayView.vue b/src/components/OverlayView.vue
index 92329c8..4253d24 100644
--- a/src/components/OverlayView.vue
+++ b/src/components/OverlayView.vue
@@ -28,6 +28,7 @@ const openDrawer = (selectedTransactionType = null, selectedCategoryType = null)
 }
 
 
+
 const closeDrawer = () => {
   drawerOpened.value = false;
 }
@@ -76,11 +77,8 @@ onMounted(() => {
   <div v-if="loading">Loding...</div>
   <div v-else>
     <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
-
-
                            :transaction-type="transactionType"
                            :category-type="categoryType"
-
                            @close-drawer="closeDrawer()"
     />
 
diff --git a/src/components/budgets/BudgetCategoryView.vue b/src/components/budgets/BudgetCategoryView.vue
index af385f8..0936284 100644
--- a/src/components/budgets/BudgetCategoryView.vue
+++ b/src/components/budgets/BudgetCategoryView.vue
@@ -3,9 +3,9 @@ import Button from "primevue/button";
 import InputNumber from "primevue/inputnumber";
 import ProgressBar from "primevue/progressbar";
 
-import { Category } from "@/models/Category";
-import { computed, ref, watch } from "vue";
-import { formatAmount } from "@/utils/utils";
+import {Category} from "@/models/Category";
+import {computed, ref, watch} from "vue";
+import {formatAmount} from "@/utils/utils";
 
 const props = defineProps({
   category: {
@@ -29,7 +29,7 @@ const startEditing = () => {
 
 const stopEditing = () => {
   isEditing.value = false;
-  emits("category-updated", { ...props.category, currentLimit: currentLimit.value });
+  emits("category-updated", {...props.category, currentLimit: currentLimit.value});
 };
 
 // Реактивное вычисление отношения затрат к плану
@@ -54,34 +54,42 @@ watch(
 
     <div class="flex flex-row justify-between w-full">
       <div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6 justify-between ">
-        <h4 class="text-lg line-clamp-1">{{props.category.category.icon }} {{ props.category.category.name }}</h4>
-<!--        <p class="text-sm text-gray-500 line-clamp-1 min-w-1 ">{{ editedCategory.category.description }}</p>-->
+        <h4 class="text-lg line-clamp-1">{{ props.category.category.icon }} {{ props.category.category.name }}</h4>
+        <!--        <p class="text-sm text-gray-500 line-clamp-1 min-w-1 ">{{ editedCategory.category.description }}</p>-->
       </div>
       <div class="flex flex-row gap-2 justify-end  items-center w-4/6 ">
 
         <!-- Сумма, которая становится редактируемой при клике -->
         <button v-if="!isEditing" @click="startEditing"
                 class="text-lg font-bold cursor-pointer w-fit text-end line-clamp-1">
-          <div class="flex flex-row gap-2 items-baseline" >
-          <p class="font-light text-sm" :class="spentPlannedRatio == 0 ? 'hidden': ''">{{spentPlannedRatio.toFixed(0)}} %</p>
-          <p class="line-clamp-1 w-fit">{{ formatAmount(props.category.currentSpent) }} /
-            {{ formatAmount(currentLimit) }} ₽</p>
+          <div class="flex flex-row gap-2 items-baseline">
+            <p class="font-light text-sm" :class="spentPlannedRatio == 0 ? 'hidden': ''">
+              {{ spentPlannedRatio.toFixed(0) }} %</p>
+            <p class="line-clamp-1 w-fit">{{ formatAmount(props.category.currentSpent) }} /
+              {{ formatAmount(currentLimit) }} ₽</p>
           </div>
         </button>
 
         <InputNumber v-else ref="inputRefs" type="text" v-model="props.category.currentLimit"
-                     class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500  w-32 text-right"
-                     :min="props.category.categoryPlannedLimit" :max="900000" :invalid="currentLimit < props.category.categoryPlannedLimit"
+                     class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-none !w-24 text-right"
+                     :min="props.category.categoryPlannedLimit" :max="900000"
+                     :invalid="currentLimit < props.category.categoryPlannedLimit"
                      v-tooltip.top="'Сумма не должна быть ниже суммы запланированных!'"
-                     unstyled />
-        <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check"  severity="success" rounded outlined
+                     unstyled
+               />
+        <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
                 aria-label="Search"/>
 
       </div>
     </div>
     <div class="flex flex-col w-full">
-    <ProgressBar :value="Number(spentPlannedRatio.toFixed(0))" class="w-full" :show-value="false"> </ProgressBar>
-<!--    <div class="z-50">{{formatAmount(spentPlannedRatio.toFixed(0))}}%</div>-->
+      <ProgressBar :value="Number(spentPlannedRatio.toFixed(0))" class="w-full .your-parent-class"
+                   :pt=" {
+        value: {
+          style: spentPlannedRatio >=100 ?'background: red !important' : '',
+        }
+      }" :color="'red-200'" :show-value="false"></ProgressBar>
+      <!--    <div class="z-50">{{formatAmount(spentPlannedRatio.toFixed(0))}}%</div>-->
     </div>
 
   </div>
diff --git a/src/components/budgets/BudgetTransactionView.vue b/src/components/budgets/BudgetTransactionView.vue
index f77c7d7..0c067fb 100644
--- a/src/components/budgets/BudgetTransactionView.vue
+++ b/src/components/budgets/BudgetTransactionView.vue
@@ -7,7 +7,7 @@ import {Transaction} from "@/models/Transaction";
 import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
 import {Category, CategoryType} from "@/models/Category";
 import {getCategories, getCategoryTypes} from "@/services/categoryService";
-import {updateTransactionRequest} from "@/services/transactionService";
+import {setTransactionDoneRequest} from "@/services/transactionService";
 import {formatAmount, formatDate} from "@/utils/utils";
 
 
@@ -20,15 +20,19 @@ const props = defineProps(
       isList: {
         type: Boolean,
         required: true,
+      },
+      transactions: {
+        type: Array as () => Array<Transaction>,
+        required: false
       }
     }
 )
-const emits = defineEmits(['open-drawer', 'transaction-checked', 'transaction-updated'])
+const emits = defineEmits(['open-drawer', 'transaction-checked', 'transaction-updated', 'delete-transaction'])
 
 
 const setIsDoneTrue = async () => {
   setTimeout(async () => {
-    await updateTransactionRequest(props.transaction)
+    await setTransactionDoneRequest(props.transaction)
     emits('transaction-checked')
   }, 10);
   // showedTransaction.value.isDone = !showedTransaction.value.isDone;
@@ -113,7 +117,8 @@ onMounted(async () => {
         <p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-bold">{{
             transaction.comment
           }}</p>
-        <p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-light">{{
+        <p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-light">
+          {{ isPlanned ? transaction.category.icon : '' }} {{
             transaction.category.name
           }} |
           {{ formatDate(transaction.date) }}</p>
@@ -128,13 +133,18 @@ onMounted(async () => {
       </div>
 
     </button>
-    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
-                           :incomeCategories="incomeCategories" :transaction="transaction"
-                           :category-types="categoryTypes"
-                           @transaction-updated="transactionUpdate"
-                           @close-drawer="closeDrawer()"
-    />
   </div>
+  <div>
+  <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
+                         :incomeCategories="incomeCategories" :transaction="transaction"
+                         :category-types="categoryTypes"
+                         @transaction-updated="transactionUpdate"
+                         @delete-transaction="transactionUpdate"
+                         @create-transaction="transactionUpdate"
+                         @close-drawer="closeDrawer()"
+  />
+  </div>
+
 </template>
 
 <style scoped>
diff --git a/src/components/budgets/BudgetView.vue b/src/components/budgets/BudgetView.vue
index 7e20df0..17d8b04 100644
--- a/src/components/budgets/BudgetView.vue
+++ b/src/components/budgets/BudgetView.vue
@@ -18,9 +18,9 @@
       <div class="flex flex-col ">
         <!--        {{ budget }}-->
         <h2 class="text-4xl  font-bold">Бюджет {{ budget.name }} </h2>
-        <!--        <div class="flex flex-row gap-2 text-xl">{{ formatDate(budget.dateFrom) }} - -->
-        <!--          {{ formatDate(budget.dateTo) }}-->
-        <!--        </div>  -->
+                <div class="flex flex-row gap-2 text-xl">{{ formatDate(budget.dateFrom) }} -
+                  {{ formatDate(budget.dateTo) }}
+                </div>
       </div>
       <div class="flex flex-col gap-2">
         <!-- Аналитика и плановые доходы/расходы -->
@@ -49,7 +49,8 @@
                   <button class="grid grid-cols-2 gap-5 items-center w-full" @click="detailedShowed = !detailedShowed">
                     <div class="flex flex-col items-center font-bold ">
                       <h4 class="text-lg font-bold">Поступления</h4>
-                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+
+                      <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                         +{{ formatAmount(totalIncomes) }}
                         ₽
                       </div>
@@ -57,8 +58,8 @@
                     </div>
                     <div class="flex flex-col items-center ">
                       <h4 class="text-lg font-bold ">Расходы</h4>
-                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
-                        -{{ formatAmount(totalExpenses) }}
+                      <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center" :class="totalExpenses > totalIncomes ? ' text-red-700' : ''">
+                        -{{ formatAmount(totalExpenses) }} ({{formatAmount(totalExpenses- totalIncomes)}})
                         ₽
                       </div>
                     </div>
@@ -107,7 +108,7 @@
                     </div>
                     <div class="flex flex-col items-center ">
                       <span class="text-sm lg:text-base">Сбережения</span>
-                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center" :class="savingRatio < 30 ? '!font-bold text-red-700' : ''">
                         {{ savingRatio.toFixed(0) }} %
                       </div>
                     </div>
@@ -133,21 +134,26 @@
 
             </div>
             <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6  hidden lg:flex">
-              <div class="flex flex-row ">
+              <div class="flex flex-row gap-4">
                 <h3 class="text-2xl font-bold">Транзакции</h3>
+                <button @click="openDrawer('INSTANT', 'EXPENSE')">
+                  <!--                    <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
+                  <span class="font-light text-sm">+ Добавить</span>
+                </button>
               </div>
               <div class=" flex gap-2 overflow-x-auto ">
 
                 <button v-for="categorySum in transactionCategoriesSums"
                         class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2">
-                  <p> <span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
+                  <p><span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
 
                 </button>
               </div>
               <div class="grid  grid-cols-1 gap-4 max-h-tlist overflow-y-auto pe-2">
                 <BudgetTransactionView v-for="transaction in transactions" :key="transaction.id"
                                        :transaction="transaction"
-                                       :is-list="true" class=""
+                                       :is-list="true"
+                                       @transaction-updated="updateTransactions"
                 />
               </div>
             </div>
@@ -158,9 +164,12 @@
             <div class="card p-4 shadow-lg rounded-lg col-span-1  h-fit">
               <!-- Планируемые доходы -->
               <div>
-                <div class="flex flex-row gap-4 items-center">
-                  <h3 class="text-xl font-bold text-green-500 mb-4 ">Плановые поступления</h3>
-                  <!--                  <Button icon="pi pi-plus" rounded outlined size="small"/>-->
+                <div class="flex flex-row gap-4 items-center mb-4">
+                  <h3 class="text-xl font-bold text-green-500 ">Плановые поступления</h3>
+                  <button @click="openDrawer('PLANNED', 'INCOME')">
+                    <!--                    <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
+                    <span class="font-light text-sm">+ Добавить</span>
+                  </button>
                 </div>
                 <div class="grid grid-cols-2 mb-2">
                   <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
@@ -185,7 +194,13 @@
             <div class="card p-4 shadow-lg rounded-lg col-span-1  h-fit">
               <!-- Планируемые расходы -->
               <div class>
-                <h3 class="text-xl font-bold text-red-500 mb-4">Плановые расходы</h3>
+                <div class="flex flex-row gap-4 items-center mb-4">
+                  <h3 class="text-xl font-bold text-red-500">Плановые расходы</h3>
+                  <button @click="openDrawer('PLANNED', 'EXPENSE')">
+                    <!--                    <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
+                    <span class="font-light text-sm">+ Добавить</span>
+                  </button>
+                </div>
                 <div class="grid grid-cols-2 mb-2">
                   <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                     {{ formatAmount(totalPlannedExpenses) }}
@@ -219,19 +234,25 @@
           </div>
           <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6 lg:hidden ">
             <div class="flex flex-row ">
-              <h3 class="text-2xl font-bold">Транзакций</h3>
+              <h3 class="text-2xl font-bold">Транзакции</h3>
+              <button @click="openDrawer('INSTANT', 'EXPENSE')">
+                <!--                    <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
+                <span class="font-light text-sm">+ Добавить</span>
+              </button>
             </div>
             <div class=" flex gap-2">
               <button v-for="categorySum in transactionCategoriesSums"
                       class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2">
-                <p> <span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
+                <p><span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
 
               </button>
             </div>
             <div class="grid  grid-cols-1 gap-4 max-h-tlist overflow-y-auto pe-2">
               <BudgetTransactionView v-for="transaction in transactions" :key="transaction.id"
                                      :transaction="transaction"
-                                     :is-list="true" class=""
+                                     :is-list="true"
+                                     @transaction-updated="updateTransactions"
+
               />
             </div>
           </div>
@@ -240,7 +261,18 @@
 
       </div>
     </div>
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
+                           :transaction-type="transactionType"
+                           :category-type="categoryType"
+                           :transactions="transactions.slice(0,3)"
+                           @transaction-updated="updateTransactions"
+                           @delete-transaction="updateTransactions"
+                           @create-transaction="updateTransactions"
+                           @close-drawer="closeDrawer"
+
+    />
   </div>
+
 </template>
 
 
@@ -256,7 +288,7 @@ import {
 } from "@/services/budgetsService";
 import {Budget, BudgetCategory, BudgetInfo} from "@/models/Budget";
 import {useRoute} from "vue-router";
-import {formatAmount} from "@/utils/utils";
+import {formatAmount, formatDate} from "@/utils/utils";
 import ProgressBar from "primevue/progressbar";
 import ProgressSpinner from "primevue/progressspinner";
 import BudgetCategoryView from "@/components/budgets/BudgetCategoryView.vue";
@@ -267,6 +299,7 @@ import LoadingView from "@/components/LoadingView.vue";
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import {Chart as ChartJS} from 'chart.js/auto';
 import SelectButton from "primevue/selectbutton";
+import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
 
 // Зарегистрируем плагин
 ChartJS.register(ChartDataLabels);
@@ -334,7 +367,26 @@ const totalSaving = computed(() => {
   return value
 })
 
-//
+const drawerOpened = ref(false)
+const transactionType = ref('')
+const categoryType = ref('')
+const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
+  if (selectedTransactionType && selectedCategoryType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = selectedCategoryType;
+  } else if (selectedTransactionType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = 'EXPENSE'
+  }
+
+  drawerOpened.value = true;
+}
+
+
+const closeDrawer = async () => {
+  drawerOpened.value = false;
+  // await updateTransactions()
+}
 
 const dailyRatio = computed(() => {
   const value = (totalExpenses.value - totalLoans.value - totalSaving.value) / totalExpenses.value
@@ -384,15 +436,12 @@ const fetchPlannedExpenses = async () => {
 }
 const transactions = ref<Transaction[]>([])
 const fetchBudgetTransactions = async () => {
-
-
   transactions.value = await getBudgetTransactions(route.params.id, 'INSTANT')
   updateLoading.value = false
 }
 
 const updateTransactions = async () => {
-
-  await Promise.all([fetchPlannedIncomes(), fetchPlannedExpenses(), fetchBudgetCategories(),])
+  await Promise.all([fetchPlannedIncomes(), fetchPlannedExpenses(), fetchBudgetCategories(), fetchBudgetTransactions()])
 }
 
 const categories = ref<BudgetCategory[]>([])
@@ -480,8 +529,9 @@ const incomesByPeriod = computed(() => {
   let incomesUntil25 = 0
   let incomesFrom25 = 0
   plannedIncomes.value.forEach((i) => {
-
-    if (i.date <= budget.value?.dateFrom && i.date <= twentyFour.value) {
+    console.log(i.date)
+    if (i.date >= budget.value?.dateFrom && i.date <= twentyFour.value) {
+      console.log(i.date)
       incomesUntil25 += i.amount
     } else {
       incomesFrom25 += i.amount
diff --git a/src/components/budgets/TransactionEditDrawer.vue b/src/components/budgets/TransactionEditDrawer.vue
index 5bc4b1e..b935e43 100644
--- a/src/components/budgets/TransactionEditDrawer.vue
+++ b/src/components/budgets/TransactionEditDrawer.vue
@@ -15,11 +15,12 @@ import {
   createTransactionRequest,
   getTransactionTypes,
   updateTransactionRequest,
-  deleteTransactionRequest
+  deleteTransactionRequest, getTransactions
 } from "@/services/transactionService";
 import {getCategories, getCategoryTypes} from "@/services/categoryService";
 import {useToast} from "primevue/usetoast";
 import LoadingView from "@/components/LoadingView.vue";
+import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
 
 const props = defineProps({
   visible: {
@@ -37,6 +38,10 @@ const props = defineProps({
   categoryType: {
     type: String,
     required: false
+  },
+  transactions: {
+    type: Array as () => Array<Transaction>,
+    required: false
   }
 });
 
@@ -247,6 +252,7 @@ const closeDrawer = () => emit('close-drawer');
 const keyboardOpen = ref(false);
 const isMobile = ref(false);
 const userAgent = ref(null);
+const transactions = ref<Transaction[]>(props.transactions);
 // Мониторинг при монтировании
 onMounted(async () => {
   loading.value = true;
@@ -254,7 +260,12 @@ onMounted(async () => {
   await fetchCategoriesAndTypes();
 
   prepareData();
-
+  if (!transactions.value && !isEditing.value) {
+    console.log()
+    await getTransactions('INSTANT', 'EXPENSE' ).then(transactionsResponse => transactions.value = transactionsResponse.data);
+    transactions.value = transactions.value.slice(0,3)
+    console.log(transactions.value.slice(0,3))
+  }
   loading.value = false;
   const deviceInfo = platform;
   isMobile.value = deviceInfo.os.family === 'iOS' || deviceInfo.os.family === 'Android';
@@ -267,7 +278,7 @@ onMounted(async () => {
   <div class="card flex justify-center h-dvh">
 
 
-    <Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
+    <Drawer :visible="visible" :header="isEditing ? 'Изменить транзакцию' : 'Создать транзакцию'" :showCloseIcon="false"
             position="right" @hide="closeDrawer"
             class="!w-128  ">
       <div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
@@ -363,13 +374,13 @@ onMounted(async () => {
                          @blur="keyboardOpen=false"
 
             />
-            <label for="amount" class="">Amount</label>
+            <label for="amount" class="">Сумма</label>
           </FloatLabel>
 
           <!-- Comment Input -->
 
           <FloatLabel variant="on" class="w-full">
-            <label for="comment">Comment</label>
+            <label for="comment">Комментарий</label>
             <InputText class="w-full"
                        :invalid="!editedTransaction.comment"
                        id="comment"
@@ -384,7 +395,7 @@ onMounted(async () => {
         <!-- Date Picker -->
         <div class="field col-12 gap-0">
           <FloatLabel variant="on">
-            <label for="date">Date </label>
+            <label for="date">Дата</label>
 
             <DatePicker class="w-full"
                         inline
@@ -401,18 +412,17 @@ onMounted(async () => {
 
           </FloatLabel>
         </div>
+        <div>
+        <BudgetTransactionView v-if="!isEditing && transactions" v-for="transaction in transactions" :is-list="true"
+                               :transaction="transaction"/>
+        </div>
 
-        <!-- Amount Input -->
-
-
-        <!-- Buttons -->
-        {{ keyboardOpen }}
         <div class="fixed  col-12  flex justify-content-end gap-4 bottom-8">
 
-          <Button label="Save" icon="pi pi-check" class="p-button-success"
+          <Button label="Сохранить" icon="pi pi-check" class="p-button-success"
                   @click="isEditing ? updateTransaction() : createTransaction()"/>
-          <Button label="Cancel" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
-          <Button v-if="isEditing" label="Delete" icon="pi pi-times" class="p-button-success" severity="danger"
+          <Button label="Отмена" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
+          <Button v-if="isEditing" label="Удалить" icon="pi pi-times" class="p-button-success" severity="danger"
                   @click="deleteTransaction"/>
         </div>
 
diff --git a/src/services/budgetsService.ts b/src/services/budgetsService.ts
index 8230080..fa8cd1e 100644
--- a/src/services/budgetsService.ts
+++ b/src/services/budgetsService.ts
@@ -28,7 +28,7 @@ export const getBudgetTransactions = async (budgetId, transactionType, categoryT
 
     let url = `/budgets/${budgetId}/transactions`
     if (transactionType && !categoryType) {
-        url += '/?type=' + transactionType
+        url += '?type=' + transactionType
     }
     if (transactionType && categoryType) {
         url += '/'+transactionType+'/'+categoryType
diff --git a/src/services/categoryService.ts b/src/services/categoryService.ts
index c167cf5..f75d7e4 100644
--- a/src/services/categoryService.ts
+++ b/src/services/categoryService.ts
@@ -9,7 +9,7 @@ export const getCategories = async (type = null) => {
 };
 
 export const getCategoryTypes = async () => {
-    return await apiClient.get('/categories/types/');
+    return await apiClient.get('/categories/types');
 }
 
 export const createCategory = async (category: Category) => {
diff --git a/src/services/transactionService.ts b/src/services/transactionService.ts
index a1ba1f9..95d69bc 100644
--- a/src/services/transactionService.ts
+++ b/src/services/transactionService.ts
@@ -36,7 +36,7 @@ export const createTransactionRequest = async (transaction: Transaction) => {
 
 export const updateTransactionRequest = async (transaction: Transaction) => {
     const id = transaction.id
-    // transaction.date = format(transaction.date, 'yyyy-MM-dd')
+    transaction.date = format(transaction.date, 'yyyy-MM-dd')
     const response = await apiClient.put(`/transactions/${id}`, transaction);
     transaction = response.data
     transaction.date = new Date(transaction.date);
@@ -44,10 +44,20 @@ export const updateTransactionRequest = async (transaction: Transaction) => {
     return transaction
 };
 
+export const setTransactionDoneRequest = async (transaction: Transaction) => {
+    const id = transaction.id
+    // transaction.date = format(transaction.date, 'yyyy-MM-dd')
+    const response = await apiClient.put(`/transactions/${id}/done`, transaction);
+    transaction = response.data
+    transaction.date = new Date(transaction.date);
+
+    return transaction
+};
+
 export const deleteTransactionRequest = async (id: number) => {
     return await apiClient.delete(`/transactions/${id}`);
 };
 
 export const getTransactionTypes = async () => {
-    return await apiClient.get('/transactions/types/');
+    return await apiClient.get('/transactions/types');
 }
\ No newline at end of file