From 8d8b1df4ed1d4263a6df4d890a8aa05b88bf2cd0 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Tue, 11 Feb 2025 13:46:30 +0300
Subject: [PATCH] new version of budget view

---
 src/components/LoadingView.vue             |    2 +-
 src/components/analytics/AnalyticsView.vue |   30 +-
 src/components/budgets/BudgetView2.vue     | 1075 ++++++++++++++++++++
 src/components/budgets/BudgetViewboth.vue  |   32 +
 src/models/Budget.ts                       |    1 +
 src/router/index.ts                        |    5 +-
 src/stores/userStore.ts                    |    3 +-
 7 files changed, 1140 insertions(+), 8 deletions(-)
 create mode 100644 src/components/budgets/BudgetView2.vue
 create mode 100644 src/components/budgets/BudgetViewboth.vue

diff --git a/src/components/LoadingView.vue b/src/components/LoadingView.vue
index 1a4a2ca..50ed209 100644
--- a/src/components/LoadingView.vue
+++ b/src/components/LoadingView.vue
@@ -8,7 +8,7 @@ import ProgressSpinner from "primevue/progressspinner";
 <template>
   <div  class="relative w-full h-screen">
     <!-- Полупрозрачный белый фон -->
-    <div class="absolute top-0 left-0 w-full h-full bg-white opacity-50 z-0"></div>
+    <div class="absolute top-0 left-0 w-full h-full bg-gray-100 z-0"></div>
 
     <!-- Спиннер поверх -->
     <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
diff --git a/src/components/analytics/AnalyticsView.vue b/src/components/analytics/AnalyticsView.vue
index c42414d..1872169 100644
--- a/src/components/analytics/AnalyticsView.vue
+++ b/src/components/analytics/AnalyticsView.vue
@@ -21,6 +21,23 @@ ChartJS.register(Colors);
 
 const loading = ref(true);
 const categoriesCatalog = ref([])
+const categoriesCatalogGrouped = computed(() => {
+  const cats = {}
+   categoriesCatalog.value.forEach(category => {
+    // Получаем значение type.code для текущей категории
+    const typeCode = "<b>"+category.type.name+"</b>";
+
+    // Если группы для данного typeCode ещё нет – создаём пустой массив
+    if (!cats[typeCode]) {
+      cats[typeCode] = [];
+    }
+
+    // Добавляем категорию в соответствующую группу
+     cats[typeCode].push(category);
+  })
+  return cats
+})
+
 const categories = ref([]);
 const dataTableCategories = ref([]);
 const tableColumns = ref([]);
@@ -213,7 +230,7 @@ const fetchCategoriesSums = async () => {
 };
 
 const fetchCategoriesCatalog = async () => {
-  await getCategories("EXPENSE").then((data) => {
+  await getCategories().then((data) => {
     categoriesCatalog.value = data.data
     selectedCategory.value = data.data[0]
   })
@@ -247,10 +264,13 @@ onMounted(async () => {
 <!--                </IconField>-->
                 <ul class=" min-w-fit w-full">
 
-                  <li v-for="category in categoriesCatalog"
-                      class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
-                      :class="selectedCategory.id == category.id? '!bg-emerald-50 text-emerald-700': '' " @click="selectedCategory=category">
-                    {{ category.icon }} {{ category.name }}
+                  <li v-for="(category,catType) in categoriesCatalogGrouped"
+                     >
+                    <span v-html="catType"/>
+                    <ul>
+                      <li v-for="cat in category"  class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp- w-full"
+                          :class="selectedCategory.id == cat.id? '!bg-emerald-50 text-emerald-700': '' " @click="selectedCategory=cat"> {{cat.name}}</li>
+                    </ul>
                   </li>
                 </ul>
               </div>
diff --git a/src/components/budgets/BudgetView2.vue b/src/components/budgets/BudgetView2.vue
new file mode 100644
index 0000000..1a3fff7
--- /dev/null
+++ b/src/components/budgets/BudgetView2.vue
@@ -0,0 +1,1075 @@
+<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
+import {computed, onMounted, ref, watch, reactive} from 'vue';
+import Chart from 'primevue/chart';
+import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
+import {
+  getBudgetCategories,
+  getBudgetInfo,
+  getBudgetTransactions,
+  updateBudgetCategoryRequest,
+  getWarns,
+  hideWarnRequest
+} from "@/services/budgetsService";
+import {Budget, BudgetCategory, Warn} from "@/models/Budget";
+import {useRoute} from "vue-router";
+import {formatAmount, formatDate} from "@/utils/utils";
+import ProgressBar from "primevue/progressbar";
+import ProgressSpinner from "primevue/progressspinner";
+import BudgetCategoryView from "@/components/budgets/BudgetCategoryView.vue";
+import {Transaction} from "@/models/Transaction";
+import Toast from "primevue/toast";
+import Button from "primevue/button";
+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 Divider from "primevue/divider";
+import TransactionForm from "@/components/transactions/TransactionForm.vue";
+
+// Зарегистрируем плагин
+ChartJS.register(ChartDataLabels);
+
+
+const loading = ref(true);
+const updateLoading = ref(false);
+const route = useRoute()
+const detailedShowed = ref(false);
+const selectedChart = ref({"label": "bar", "icon": "pi pi-chart-bar", "value": "bar"});
+const modes = [
+  {label: 'bar', icon: 'pi pi-chart-bar', value: 'bar'},
+  {label: 'pie', icon: 'pi pi-chart-pie', value: 'pie'}
+];
+
+
+const value = ref(50)
+
+const warnsOpened = ref(false);
+
+const hideWarn = async (warnId: string) => {
+  await hideWarnRequest(route.params.id, warnId)
+  await fetchWarns()
+}
+
+const leftForUnplanned = ref(0)
+
+
+const budget = ref<Budget>()
+const warns = ref<[Warn]>()
+const checkWarnsExists = computed(() => {
+  console.log(warns?.value && warns.value.length > 0 ? "true" : "false");
+  return warns?.value?.length > 0;
+});
+const categories = ref<BudgetCategory[]>([])
+const incomeCategories = ref<BudgetCategory[]>([])
+
+const plannedIncomes = ref<Transaction[]>([])
+const totalIncomes = computed(() => {
+  let totalIncome = 0;
+  plannedIncomes.value.forEach((i) => {
+    totalIncome += i.amount
+  })
+  return totalIncome
+})
+
+const totalInstantIncomes = computed(() => {
+  let totalIncome = 0;
+  transactions.value.filter(t => t.type.code == 'INSTANT' && t.category.type.code == 'INCOME').forEach((i) => {
+    totalIncome += i.amount
+  })
+  return totalIncome
+})
+
+const totalIncomeLeftToGet = computed(() => {
+  let totalIncomeLeftToGet = 0;
+  plannedIncomes.value.forEach(i => {
+    if (!i.isDone) {
+      totalIncomeLeftToGet += i.amount
+    }
+  })
+  return totalIncomeLeftToGet
+})
+
+const totalLoans = computed(() => {
+  let value = 0
+  categories.value.filter((cat) => cat.category.id == "677bc767c7857460a491bd49").forEach(cat => {
+    value += cat.currentLimit
+  })
+  return value
+})
+
+const loansRatio = computed(() => {
+
+  return totalExpenses.value == 0 ? 0 : totalLoans.value / totalExpenses.value * 100
+})
+
+
+const savingRatio = computed(() => {
+
+  return totalExpenses.value == 0 ? 0 : totalSaving.value / totalExpenses.value * 100
+})
+
+const totalSaving = computed(() => {
+  let value = 0
+  categories.value.filter((cat) => cat.category.id == "677bc767c7857460a491bd4f").forEach(cat => {
+    value += cat.currentLimit
+  })
+  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 == 0 ? 0 : (totalExpenses.value - totalLoans.value - totalSaving.value) / totalExpenses.value
+
+  return value * 100
+})
+const fetchPlannedIncomes = async () => {
+  plannedIncomes.value = await getBudgetTransactions(route.params.id, 'PLANNED', 'INCOME')
+}
+const plannedExpenses = ref<Transaction[]>([])
+const totalExpenses = computed(() => {
+  let totalExpense = 0;
+  categories.value.forEach((cat) => {
+    let catValue = cat.currentLimit
+
+    //   plannedExpenses.value.filter(t => t.category.id == cat.category.id).forEach((i) => {
+    //
+    //     catValue += i.amount
+    //   })
+    //
+    totalExpense += catValue
+  })
+
+  return totalExpense
+})
+
+
+const totalPlannedExpenses = computed(() => {
+  let expenses = 0
+  plannedExpenses.value.forEach((t) => {
+    expenses += t.amount
+  })
+  return expenses
+})
+
+const totalInstantExpenses = computed(() => {
+  let totalExpenses = 0;
+  transactions.value.filter(t => t.type.code == 'INSTANT' && t.category.type.code == 'EXPENSE').forEach((i) => {
+    totalExpenses += i.amount
+  })
+  return totalExpenses
+})
+const totalExpenseLeftToSpend = computed(() => {
+  let totalExpenseLeftToSpend = 0;
+  plannedExpenses.value.forEach(i => {
+    if (!i.isDone) {
+      totalExpenseLeftToSpend += i.amount
+    }
+  })
+  return totalExpenseLeftToSpend
+})
+const fetchPlannedExpenses = async () => {
+  plannedExpenses.value = await getBudgetTransactions(route.params.id, 'PLANNED', 'EXPENSE')
+  updateLoading.value = false
+}
+const transactions = ref<Transaction[]>([])
+
+const selectedCategoryId = ref()
+const selectCategoryType = (categoryId) => {
+  if (selectedCategoryId.value == categoryId) {
+    selectedCategoryId.value = null
+  } else {
+    selectedCategoryId.value = categoryId
+  }
+}
+const filteredTransactions = computed(() => {
+  return selectedCategoryId.value ? transactions.value.filter(i => i.category.id == selectedCategoryId.value) : transactions.value
+})
+const fetchBudgetTransactions = async () => {
+  transactions.value = await getBudgetTransactions(route.params.id, 'INSTANT')
+  updateLoading.value = false
+}
+// 1️⃣ Создаём отдельное состояние для категорий расходов и доходов
+const expenseCategoriesState = reactive<Record<string, { isOpened: boolean }>>({});
+const incomeCategoriesState = reactive<Record<string, { isOpened: boolean }>>({});
+
+// 2️⃣ Инициализируем состояние для категорий расходов по plannedExpenses
+watch(
+    () => categories.value,
+    (newExpenses) => {
+      newExpenses.forEach((expense) => {
+        // console.log(expense.category.id);
+        const categoryId = expense.category.id;
+        if (!(categoryId in expenseCategoriesState)) {
+          expenseCategoriesState[categoryId] = {isOpened: true};
+        }
+      });
+    },
+    {immediate: true}
+);
+
+// 3️⃣ Инициализируем состояние для категорий доходов по plannedIncomes
+watch(
+    () => plannedIncomes.value,
+    (newIncomes) => {
+      newIncomes.forEach((income) => {
+        const categoryId = income.category.id;
+        if (!(categoryId in incomeCategoriesState)) {
+          incomeCategoriesState[categoryId] = {isOpened: true};
+        }
+      });
+    },
+    {immediate: true}
+);
+
+// 4️⃣ Computed для группировки транзакций расходов по категориям
+const categoriesTransactions = computed(() => {
+  const grouped: Record<string, { name: any; transactions: any[]; isOpened: boolean }> = {};
+
+  // Создаем группу для каждой категории из списка категорий расходов (categories)
+  categories.value.forEach((category) => {
+    grouped[category.category.id] = {
+      name: category,
+      transactions: [],
+      isOpened: expenseCategoriesState[category.category.id]?.isOpened ?? true,
+    };
+  });
+
+  // Добавляем транзакции расходов (plannedExpenses)
+  plannedExpenses.value.forEach((plannedExpense) => {
+    const categoryId = plannedExpense.category.id;
+    if (!grouped[categoryId]) {
+      grouped[categoryId] = {
+        name: plannedExpense.category,
+        transactions: [],
+        isOpened: expenseCategoriesState[categoryId]?.isOpened ?? true,
+      };
+    }
+    grouped[categoryId].transactions.push(plannedExpense);
+  });
+
+  // Преобразуем объект в массив, сортируем, затем превращаем обратно в объект
+  return Object.fromEntries(
+      Object.entries(grouped).sort(([, a], [, b]) => {
+        // Сортируем по количеству транзакций (по убыванию)
+        if (b.transactions.length !== a.transactions.length) {
+          return b.transactions.length - a.transactions.length;
+        }
+        // Если количество транзакций одинаковое, сортируем по currentLimit (по убыванию)
+        return (b.name.currentLimit ?? 0) - (a.name.currentLimit ?? 0);
+      })
+  );
+});
+
+// 5️⃣ Computed для группировки транзакций доходов по категориям
+const categoriesIncomeTransactions = computed(() => {
+  const grouped: Record<string, { name: any; transactions: any[]; isOpened: boolean }> = {};
+
+  plannedIncomes.value.forEach((plannedIncome) => {
+    const categoryId = plannedIncome.category.id;
+    if (!grouped[categoryId]) {
+      const categoryDetails = incomeCategories.value.find(
+          (cat) => cat.category.id === categoryId
+      );
+      grouped[categoryId] = {
+        name: categoryDetails,
+        transactions: [],
+        isOpened: incomeCategoriesState[categoryId]?.isOpened ?? true,
+      };
+    }
+    grouped[categoryId].transactions.push(plannedIncome);
+  });
+
+  return grouped;
+});
+
+const updateTransactions = async () => {
+  setTimeout(async () => {
+    await Promise.all([fetchBudgetInfo(), fetchWarns()])
+
+  },)
+
+}
+
+
+const fetchBudgetCategories = async () => {
+  categories.value = await getBudgetCategories(route.params.id)
+  categories.value = [...categories.value];
+  updateLoading.value = false
+}
+
+const transactionCategoriesSums = computed(() => {
+  // Используем reduce для создания массива сумм по категориям
+  return transactions.value.reduce((acc, transaction) => {
+    const category = transaction.category;
+
+    // Проверяем, существует ли категория в аккумуляторе
+    const existingCategory = acc.find(item => item.category.id === category.id);
+
+    if (existingCategory) {
+      // Если категория существует, добавляем сумму к текущей
+      existingCategory.sum += transaction.amount;
+
+    } else {
+      // Если категории еще нет в аккумуляторе, добавляем ее
+      acc.push({category: category, sum: transaction.amount});
+    }
+
+    return acc;
+  }, []);
+});
+
+
+// const fetchBudgetTransactionCategoriesSums = async () => {
+//
+//   transactionCategoriesSums.value = await getBudgetCategoriesSums(route.params.id)
+//   updateLoading.value = false
+// }
+const editingCategoryId = ref<string | null>(null);
+const editableLimit = ref<Record<string, number>>({});
+
+const startEditing = (category) => {
+  editingCategoryId.value = category.name.category.id;
+  editableLimit.value[category.name.category.id] = category.name.currentLimit;
+};
+
+const saveLimit = async (category) => {
+  const categoryId = category.name.id;
+  if (editableLimit.value[categoryId] !== undefined) {
+    try {
+      await updateLimitOnBackend(categoryId, editableLimit.value[categoryId]);
+      category.name.currentLimit = editableLimit.value[categoryId]; // Обновляем локально
+    } catch (error) {
+      console.error("Ошибка обновления лимита:", error);
+    }
+  }
+  editingCategoryId.value = null; // Закрываем input
+};
+
+// Функция для отправки данных на бэкенд (замени URL и метод)
+const updateLimitOnBackend = async (categoryId, newLimit) => {
+  await fetch(`/api/categories/${categoryId}/limit`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ limit: newLimit }),
+  });
+};
+
+
+const budgetInfo = ref<Budget>();
+const fetchBudgetInfo = async () => {
+  await getBudgetInfo(route.params.id).then((data) => {
+        budget.value = data
+        plannedExpenses.value = budget.value?.plannedExpenses
+        plannedIncomes.value = budget.value?.plannedIncomes
+        transactions.value = budget.value?.transactions
+        categories.value = budget.value?.categories
+        incomeCategories.value = budget.value?.incomeCategories
+        updateLoading.value = false
+      }
+  )
+
+}
+
+
+const updateBudgetCategory = async (category) => {
+
+  // loading.value = true
+  await updateBudgetCategoryRequest(budget.value.id, category)
+  await fetchBudgetInfo()
+  setTimeout(async () => {
+    await fetchWarns()
+  }, 0)
+  editingCategoryId.value = null
+}
+
+const twentyFour = computed(() => {
+  let twentyFour = new Date(budget.value?.dateFrom)
+  twentyFour.setDate(24)
+  return twentyFour
+})
+
+const incomesByPeriod = computed(() => {
+  let incomesUntil25 = 0
+  let incomesFrom25 = 0
+  plannedIncomes.value.forEach((i) => {
+    i.date = new Date(i.date)
+
+    if (i.date >= budget.value?.dateFrom && i.date <= twentyFour.value) {
+
+      incomesUntil25 += i.amount
+    } else {
+      incomesFrom25 += i.amount
+    }
+  })
+
+  return [incomesUntil25, incomesFrom25]
+})
+
+
+const expensesByPeriod = computed(() => {
+  let expensesUntil25 = 0
+  let expensesFrom25 = 0
+  let totalPlannedExpensesSum = 0
+  plannedExpenses.value.forEach((i) => {
+    i.date = new Date(i.date)
+    if (i.date >= budget.value?.dateFrom && i.date <= twentyFour.value) {
+      expensesUntil25 += i.amount
+    } else {
+      expensesFrom25 += i.amount
+    }
+    totalPlannedExpensesSum += i.amount
+  })
+  categories.value.forEach((i) => {
+    expensesUntil25 += (i.currentLimit - i.currentPlanned) / 2
+    expensesFrom25 += (i.currentLimit - i.currentPlanned) / 2
+
+  })
+
+  return [expensesUntil25, expensesFrom25]
+})
+
+const pieChartData = computed(() => {
+
+  let labels = []
+  let values = []
+  categories.value.forEach((i) => {
+    labels.push(i.category.name)
+    values.push(i.currentLimit / totalExpenses.value)
+  })
+  return {
+    labels: labels,
+    datasets: [
+      {
+        clip: {left: 100, top: false, right: 50, bottom: 0},
+        radius: '100%',
+        data: values,
+        backgroundColor: [
+          'rgba(6, 182, 212, 0.2)', 'rgba(249, 115, 22, 0.2)', 'rgba(50, 205, 50, 0.2)',
+          'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)',
+          'rgba(123, 239, 178, 0.2)', 'rgba(255, 105, 180, 0.2)', 'rgba(147, 112, 219, 0.2)',
+          'rgba(60, 179, 113, 0.2)', 'rgba(100, 149, 237, 0.2)', 'rgba(220, 20, 60, 0.2)',
+          'rgba(255, 140, 0, 0.2)', 'rgba(72, 61, 139, 0.2)', 'rgba(210, 105, 30, 0.2)',
+          'rgba(106, 90, 205, 0.2)', 'rgba(199, 21, 133, 0.2)', 'rgba(32, 178, 170, 0.2)',
+          'rgba(65, 105, 225, 0.2)', 'rgba(218, 165, 32, 0.2)', 'rgba(255, 127, 80, 0.2)',
+          'rgba(46, 139, 87, 0.2)', 'rgba(139, 69, 19, 0.2)', 'rgba(75, 0, 130, 0.2)',
+          'rgba(255, 69, 0, 0.2)', 'rgba(244, 164, 96, 0.2)'
+        ],
+        hoverBackgroundColor: [
+          'rgba(6, 182, 212, 1)', 'rgba(249, 115, 22, 1)', 'rgba(50, 205, 50, 1)',
+          'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)',
+          'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)',
+          'rgba(123, 239, 178, 1)', 'rgba(255, 105, 180, 1)', 'rgba(147, 112, 219, 1)',
+          'rgba(60, 179, 113, 1)', 'rgba(100, 149, 237, 1)', 'rgba(220, 20, 60, 1)',
+          'rgba(255, 140, 0, 1)', 'rgba(72, 61, 139, 1)', 'rgba(210, 105, 30, 1)',
+          'rgba(106, 90, 205, 1)', 'rgba(199, 21, 133, 1)', 'rgba(32, 178, 170, 1)',
+          'rgba(65, 105, 225, 1)', 'rgba(218, 165, 32, 1)', 'rgba(255, 127, 80, 1)',
+          'rgba(46, 139, 87, 1)', 'rgba(139, 69, 19, 1)', 'rgba(75, 0, 130, 1)',
+          'rgba(255, 69, 0, 1)', 'rgba(244, 164, 96, 1)'
+        ]
+
+      }
+    ]
+  };
+})
+const pieChartOptions = ref({
+  layout: {
+    padding: {
+      left: 50, // Добавляем отступ слева
+      right: 50 // Добавляем отступ справа
+    }
+  },
+  plugins: {
+    legend: {
+      display: false // Отключаем легенду
+    },
+    datalabels: {
+      anchor: 'end', // Позиция метки относительно данных
+      align: 'top', // Выравнивание метки
+      formatter: (value, context) => {
+        const label = context.chart.data.labels[context.dataIndex];
+        const percentage = (value * 100).toFixed(0);
+        return percentage >= 2 ? `${label} ${percentage}%` : '';
+      },
+      color: 'black', // Цвет текста метки
+      font: {
+        size: 12 // Устанавливаем меньший размер шрифта
+      }
+    },
+    tooltip: {
+      enabled: true, // Включить tooltips
+      callbacks: {
+        title: function (tooltipItems) {
+          return tooltipItems[0].dataset.label;
+        },
+        label: function (tooltipItems) {
+          return Number(tooltipItems.formattedValue * 100).toFixed(0) + '%';
+        }
+      }
+    }
+  }
+});
+
+
+const incomeExpenseChartData = computed(() => {
+
+  return {
+    labels: ['до 25 ', 'с 25'],
+    datasets: [
+      {
+        label: 'Пополнения',
+        data: incomesByPeriod.value,
+        backgroundColor: ['rgba(6, 182, 212, 0.2)', 'rgba(6, 182, 212, 0.2)'],
+        borderColor: ['rgb(6, 182, 212)', 'rgb(6, 182, 212)'],
+        borderWidth: 1
+      },
+      {
+        label: 'Расходы',
+        data: expensesByPeriod.value,
+        backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(249, 115, 22, 0.2)'],
+        borderColor: ['rgb(249, 115, 22)', 'rgb(249, 115, 22)'],
+        borderWidth: 1
+      }
+    ]
+  }
+})
+const incomeExpenseChartOptions = ref({
+
+  plugins: {
+    legend: {
+      display: false // Отключаем легенду
+    },
+    datalabels: {
+      anchor: 'end', // Позиция метки относительно данных
+      align: 'top', // Выравнивание метки
+      formatter: (value) => {
+        // const label = context.chart.data.labels[context.dataIndex];
+
+        return formatAmount(value) + '₽';
+        // return percentage >= 2 ? `${percentage} ` : '';
+      },
+      color: 'black', // Цвет текста метки
+      font: {
+        size: 12 // Устанавливаем меньший размер шрифта
+      }
+    },
+    tooltip: {
+      enabled: true, // Включить tooltips
+      callbacks: {
+        title: function (tooltipItems) {
+          return tooltipItems[0].dataset.label;
+        },
+        label: function (tooltipItems) {
+          return formatAmount(tooltipItems.raw) + '₽';
+        }
+      }
+    }
+  }
+})
+
+const fetchWarns = async (hidden: Boolean = null) => {
+  warns.value = await getWarns(route.params.id, hidden)
+}
+
+const catsExpanded = ref(true);
+
+const expandCats = (value: boolean) => {
+  catsExpanded.value = value;
+
+  // Обновляем состояние для категорий доходов
+  for (const categoryId in incomeCategoriesState) {
+    if (Object.prototype.hasOwnProperty.call(incomeCategoriesState, categoryId)) {
+      incomeCategoriesState[categoryId].isOpened = value;
+      console.log(`Категория ${categoryId}: isOpened = ${incomeCategoriesState[categoryId].isOpened}`);
+    }
+  }
+
+  // Обновляем состояние для категорий расходов
+  for (const categoryId in expenseCategoriesState) {
+    if (Object.prototype.hasOwnProperty.call(expenseCategoriesState, categoryId)) {
+      expenseCategoriesState[categoryId].isOpened = value;
+      console.log(`Категория ${categoryId}: isOpened = ${expenseCategoriesState[categoryId].isOpened}`);
+    }
+  }
+};
+
+onMounted(async () => {
+
+  try {
+    await Promise.all([
+      fetchBudgetInfo(),
+      fetchWarns()
+      // budget.value = await getBudgetInfo(route.params.id),
+      // fetchPlannedIncomes(),
+      // fetchPlannedExpenses(),
+      // fetchBudgetCategories(),
+      // fetchBudgetTransactions(),
+    ]);
+  } catch (error) {
+    console.error('Error during fetching data:', error);
+  } finally {
+    loading.value = false
+  }
+});
+</script>
+
+<template>
+  <Toast/>
+  <LoadingView v-if="loading"/>
+
+  <div v-else class="px-4 bg-gray-100 h-full ">
+    <div v-if="updateLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
+      <ProgressSpinner
+          v-if="updateLoading"
+          class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50"
+          style="width: 50px; height: 50px;"
+          strokeWidth="8"
+          fill="transparent"
+          animationDuration=".5s"
+          aria-label="Custom ProgressSpinner"
+      />
+    </div>
+    <div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
+      <div class="flex flex-row justify-between ">
+        <div class="flex flex-col gap-2">
+          <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>
+
+        <div class="flex flex-col gap-2 justify-center">
+          <button class="flex flex-row bg-white py-6 px-4 shadow-lg rounded-lg items-center h-6 justify-center gap-2"
+                  @click="warnsOpened = !warnsOpened">
+            <span class="bg-gray-300 p-1 rounded font-bold">{{
+                warns ? warns.length : 0
+              }}</span><span>Уведомлений</span>
+          </button>
+
+          <div v-if="warnsOpened"
+               class="absolute h-fit max-h-128 w-128 overflow-auto  bg-white shadow-lg rounded-lg top-32 right-4 z-50">
+            <div v-if="checkWarnsExists" class="flex flex-col p-4">
+              <div v-for="warn in warns">
+                <div class="flex flex-row items-center gap-2 justify-between">
+
+                  <div class="flex flex-row items-center gap-2">
+                    <div class="text-2xl">{{ warn.message.icon }}</div>
+                    <div class="flex flex-col">
+                      <span class="font-bold">{{ warn.message.title }}</span>
+                      <span v-html="warn.message.body"></span>
+                    </div>
+                  </div>
+                  <button @click="hideWarn(warn.id)"><i class="pi pi-times" style="font-size: 0.7rem"></i></button>
+                </div>
+                <Divider/>
+              </div>
+            </div>
+            <div v-else class="flex items-center justify-center p-16">
+              <button @click="fetchWarns(true)">Показать скрытые</button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <!-- Аналитика и плановые доходы/расходы -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start ">
+          <div class="flex flex-col gap-4">
+            <!-- Блок Аналитики (25%) -->
+            <div
+                class="bg-white p-4 shadow-lg rounded-lg flex flex-col gap-4 items-start ">
+              <h3 class="text-xl font-bold">Аналитика</h3>
+
+              <SelectButton v-model="selectedChart" :options="modes" optionLabel="label" optionIcon="icon">
+                <template #option="slotProps">
+                  <i :class="slotProps.option.icon"></i>
+                </template>
+              </SelectButton>
+              <Chart v-if="selectedChart.value=='bar'" type="bar" :data="incomeExpenseChartData"
+                     :options="incomeExpenseChartOptions" class="!w-full"
+                     style="width: 100%"/>
+
+              <Chart v-if="selectedChart.value=='pie'" type="pie" :data="pieChartData" :options="pieChartOptions"
+                     class="chart "/>
+
+              <div class="flex gap-5 items-center  justify-items-center w-full ">
+                <div class="w-full">
+                  <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-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                        +{{ formatAmount(totalIncomes) }}
+                        ₽
+                      </div>
+                      <!--              <p>Total Incomes</p>-->
+                    </div>
+                    <div class="flex flex-col items-center ">
+                      <h4 class="text-lg font-bold ">Расходы</h4>
+
+                      <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>
+                  </button>
+
+
+                  <div class="grid grid-cols-2 !gap-1 mt-4" :class="detailedShowed ? 'block' : 'hidden'">
+                    <div class="flex flex-col items-center font-bold ">
+                      <p class="font-light ">в первый период</p>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
+                        +{{ formatAmount(incomesByPeriod[0]) }} ₽
+                      </div>
+                    </div>
+                    <div class="flex flex-col  items-center">
+                      <p class="font-light ">в первый период</p>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
+                        -{{ formatAmount(expensesByPeriod[0]) }} ₽
+                      </div>
+                    </div>
+                    <div class="flex flex-col  items-center">
+                      <p class="font-light ">во второй период</p>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full ">
+                        +{{ formatAmount(incomesByPeriod[1]) }} ₽
+                      </div>
+
+                    </div>
+                    <div class="flex flex-col  items-center">
+                      <p class="font-light ">во второй период</p>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full ">
+                        -{{ formatAmount(expensesByPeriod[1]) }} ₽
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+
+              </div>
+              <div class="grid gap-5 items-center  justify-items-center w-full">
+                <div class="w-full">
+                  <button class="grid grid-cols-3 justify-between  gap-5 items-end w-full"
+                          @click="detailedShowed = !detailedShowed">
+                    <div class="flex flex-col items-center">
+                      <h4 class="text-sm lg:text-base">Долги</h4>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                        {{ loansRatio.toFixed(0) }} %
+                      </div>
+                      <!--              <p>Total Incomes</p>-->
+                    </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"
+                           :class="savingRatio < 30 ? '!font-bold text-red-700' : ''">
+                        {{ savingRatio.toFixed(0) }} %
+                      </div>
+                    </div>
+                    <div class="flex flex-col items-center ">
+                      <h4 class="text-sm lg:text-base">Ежедневные</h4>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                        {{ dailyRatio.toFixed(0) }} %
+                      </div>
+                    </div>
+                  </button>
+
+                </div>
+                <div class="w-full">
+                  <button class="grid grid-cols-2 justify-between  gap-5 items-end w-full"
+                          @click="detailedShowed = !detailedShowed">
+                    <div class="flex flex-col items-center">
+                      <h4 class="text-sm lg:text-base">Факт. поступления ✅</h4>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                        {{ formatAmount(totalInstantIncomes) }} ₽
+                      </div>
+                      <!--              <p>Total Incomes</p>-->
+                    </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">
+                        {{ formatAmount(totalInstantExpenses) }} ₽
+                      </div>
+                    </div>
+
+                  </button>
+                  <div class="flex flex-col items-center w-full ">
+                    <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">
+                      {{ formatAmount(totalInstantIncomes - totalInstantExpenses) }} ₽
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-2 !gap-1 mt-4" :class="detailedShowed ? 'block' : 'hidden'">
+                    <div v-for="categorySum in transactionCategoriesSums" class="flex flex-col items-center font-bold ">
+                      <p class="font-light ">{{ categorySum.category.icon }} {{ categorySum.category.name }}</p>
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
+                        {{ formatAmount(categorySum.sum) }} ₽
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+              <ProgressBar :value="value" class="mt-2 col-span-2" style="height: 1rem !important;"></ProgressBar>
+
+            </div>
+            <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6  hidden lg:flex">
+              <div class="flex flex-row gap-4">
+                <h3 class="text-2xl font-bold">Транзакции</h3>
+                <button @click="openDrawer('INSTANT', 'EXPENSE')">
+                  <span class="font-light text-sm">+ Добавить</span>
+                </button>
+              </div>
+              <div class=" flex gap-2 overflow-x-auto ">
+
+                <button v-for="categorySum in transactionCategoriesSums"
+                        @click="selectCategoryType(categorySum.category.id)"
+                        class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2"
+                        :class="selectedCategoryId == categorySum.category.id ? '!bg-blue-100' : ''">
+                  <p><span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
+
+                </button>
+              </div>
+              <div class="flex flex-col gap-1 max-h-tlist overflow-y-auto ">
+                <BudgetTransactionView v-for="transaction in filteredTransactions" :key="transaction.id"
+                                       :transaction="transaction"
+                                       :is-list="true"
+                                       @transaction-updated="updateTransactions"
+                                       @transaction-checked="updateTransactions"
+                />
+              </div>
+            </div>
+
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 row-span-3 col-span-2">
+            <div>
+              <!-- Планируемые доходы -->
+              <div>
+                <div class="flex flex-row gap-4 items-center mb-4">
+                  <h3 class="text-2xl font-bold text-emerald-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>
+
+                  <button class="font-light text-sm" @click="catsExpanded ? expandCats(false) : expandCats(true)">{{ catsExpanded ? 'Скрыть все': 'Раскрыть все'}}</button>
+                </div>
+                <ul class="space-y-2">
+
+
+                  <li v-for="(category, categoryId) in categoriesIncomeTransactions" :key="categoryId"
+
+                      class="flex flex-col p-4 shadow-lg rounded-lg bg-white transition-transform duration-300 ">
+
+                    <div class="flex flex-row justify-between w-full items-center transition-transform duration-300">
+<!--                      {{category}}-->
+                      <span class="text-lg font-bold items-center">{{ category.name.category.name }} {{category.name.icon }}</span>
+                      <div class="flex flex-row gap-4">
+
+                        <span>{{
+                            formatAmount(category.name.currentSpent)
+                          }} / {{ formatAmount(category.name.currentLimit) }} ₽</span>
+
+                        <button :class="{'rotate-90': incomeCategoriesState[categoryId].isOpened}"
+                                @click="incomeCategoriesState[categoryId].isOpened = !incomeCategoriesState[categoryId].isOpened">
+                          <i class="pi pi-angle-right transition-transform duration-300 text-5xl"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <transition
+                        enter-active-class="transition ease-out duration-300"
+                        enter-from-class="opacity-0 transform -translate-y-2"
+                        enter-to-class="opacity-100 transform translate-y-0"
+                        leave-active-class="transition ease-in duration-300"
+                        leave-from-class="opacity-100 transform translate-y-0"
+                        leave-to-class="opacity-0 transform -translate-y-2"
+                    >
+                      <div v-if="incomeCategoriesState[categoryId].isOpened">
+                        <BudgetTransactionView
+                            v-for="transaction in category.transactions"
+                            :key="transaction._id"
+                            :transaction="transaction"
+                            :is-list="false"
+                            @transaction-updated="updateTransactions"
+                            @transaction-checked="updateTransactions"
+                        />
+                      </div>
+                    </transition>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div>
+              <!-- Планируемые расходы -->
+              <div>
+                <div class="flex flex-row gap-4 items-center mb-4">
+                  <h3 class="text-2xl font-bold text-rose-500 ">Расходы</h3>
+                  <button @click="openDrawer('PLANNED', 'INCOME')">
+                    <span class="font-light text-sm">+ Добавить</span>
+                  </button>
+                </div>
+                <ul class="space-y-2">
+                  <li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
+                      class="flex flex-col p-4 shadow-lg rounded-lg bg-white  ">
+                    <div class="flex flex-row justify-between w-full items-center">
+                      <span class="text-2xl font-bold">{{ category.name.category.icon }} {{
+                          category.name.category.name
+                        }}</span>
+                      <div class="flex flex-row gap-4">
+
+                        <span>{{
+                            formatAmount(category.name.currentSpent)
+                          }} / </span>
+                        <!-- Если редактируемая категория — показываем input -->
+
+                        <input
+                            v-if="editingCategoryId === category.name.category.id"
+                            v-model.number="category.name.currentLimit"
+                            @blur="(category)"
+                            @keyup.enter="updateBudgetCategory(category.name)"
+                            type="number"
+                            class=" border-b  w-20 "
+                            autofocus
+                        />
+
+                        <!-- Если НЕ редактируем, показываем текст -->
+                        <span v-else @click="startEditing(category)" class="cursor-pointer hover:underline">
+      {{ formatAmount(category.name.currentLimit) }} ₽
+    </span>
+
+                        <button v-if="category.transactions.length>0" :class="{'rotate-90': expenseCategoriesState[categoryId].isOpened}"
+                                @click="expenseCategoriesState[categoryId].isOpened = !expenseCategoriesState[categoryId].isOpened">
+                          <i class="pi pi-angle-right transition-transform duration-300 text-5xl"></i>
+                        </button>
+                      </div>
+                    </div>
+
+                    <transition
+                        enter-active-class="transition ease-out duration-300"
+                        enter-from-class="opacity-0 transform -translate-y-2"
+                        enter-to-class="opacity-100 transform translate-y-0"
+                        leave-active-class="transition ease-in duration-300"
+                        leave-from-class="opacity-100 transform translate-y-0"
+                        leave-to-class="opacity-0 transform -translate-y-2"
+                    >
+                      <div v-if="expenseCategoriesState[categoryId].isOpened" class="pt-2 pl-2">
+                        <BudgetTransactionView
+                            v-for="transaction in category.transactions"
+                            :key="transaction._id"
+                            :transaction="transaction"
+                            :is-list="false"
+                            @transaction-updated="updateTransactions"
+                            @transaction-checked="updateTransactions"
+                        />
+                      </div>
+                    </transition>
+                    <div class="flex flex-col gap-0">
+<!--                      <Divider class="!p-0 !pb-1 !m-0"/>-->
+                      <div class="flex flex-row justify-between w-full items-center">
+                        <span class="font-bold">🗓️ Остаток на внеплановые:</span>
+                        <span class="font-bold text-lg">{{ category.name.currentLimit - category.name.currentPlanned }} ₽</span>
+                      </div>
+                    </div>
+
+                  </li>
+
+                </ul>
+
+              </div>
+            </div>
+
+          </div>
+          <div class=" h-full   gap-4 flex-col row-span-6 lg:hidden ">
+            <div class="flex flex-row ">
+              <h3 class="text-2xl font-bold">Транзакции</h3>
+              <button @click="openDrawer('INSTANT', 'EXPENSE')">
+                <span class="font-light text-sm">+ Добавить</span>
+              </button>
+            </div>
+            <div class=" flex gap-2 overflow-x-auto">
+              <button v-for="categorySum in transactionCategoriesSums"
+                      @click="selectCategoryType(categorySum.category.id)"
+                      class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2"
+                      :class="selectedCategoryId == categorySum.category.id ? '!bg-blue-100' : ''">
+                <p><span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
+
+              </button>
+            </div>
+            <div class="grid  grid-cols-1 gap-1 max-h-tlist overflow-y-auto ">
+              <BudgetTransactionView v-for="transaction in filteredTransactions" :key="transaction.id"
+                                     :transaction="transaction"
+                                     :is-list="true"
+                                     @transaction-updated="updateTransactions"
+
+
+              />
+            </div>
+          </div>
+        </div>
+
+
+      </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"-->
+
+    <!--    />-->
+
+    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"
+                     :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"
+                     @delete-transaction="updateTransactions"
+                     @create-transaction="updateTransactions"/>
+  </div>
+
+</template>
+
+<style scoped>
+/* Добавляем стили для стилизации */
+.card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+
+.max-h-tlist {
+  max-height: 1170px; /* Ограничение высоты списка */
+}
+
+
+.box-shadow-inner {
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+}
+
+.chart {
+  width: 70%;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/budgets/BudgetViewboth.vue b/src/components/budgets/BudgetViewboth.vue
new file mode 100644
index 0000000..759fb1a
--- /dev/null
+++ b/src/components/budgets/BudgetViewboth.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+import {computed, ref} from "vue";
+import BudgetView from "@/components/budgets/BudgetView.vue";
+import BudgetView2 from "@/components/budgets/BudgetView2.vue";
+import ToggleSwitch from "primevue/toggleswitch";
+import {useUserStore} from "@/stores/userStore";
+
+const userStore = useUserStore();
+const newVersion = computed(() => {
+  return userStore.settings["budgetViewVersion"] == "2" ? true : false;
+})
+
+const changeViewVersion = (version: string) => {
+  userStore.settings["budgetViewVersion"] = version
+}
+</script>
+
+<template>
+
+  <div class="bg-gray-100 flex flex-row gap-2 pl-4 pt-2">
+    <span :class="!newVersion? 'font-bold': ''">Старая версия</span>
+    <ToggleSwitch v-model="newVersion" @click="changeViewVersion(!newVersion ? '2' : '1')"/>
+      <span :class="newVersion?  'font-bold': ''">Новая версия</span>
+  </div>
+  <BudgetView v-if="!newVersion"/>
+  <BudgetView2 v-else/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/models/Budget.ts b/src/models/Budget.ts
index dfcfb37..d235a8c 100644
--- a/src/models/Budget.ts
+++ b/src/models/Budget.ts
@@ -10,6 +10,7 @@ export class Budget {
     plannedExpenses: [Transaction]
     plannedIncomes: [Transaction]
     categories: [BudgetCategory]
+    incomeCategories: [BudgetCategory]
     transactions: [Transaction]
     warns: [Warn]
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index c3dcd9d..ce4f506 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,18 +4,21 @@ import CreateCategoryModal from "@/components/settings/categories/CreateCategory
 import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue"; // Импортируем новый компонент
 import BudgetList from "../components/budgets/BudgetList.vue";
 import BudgetView from "@/components/budgets/BudgetView.vue";
+import BudgetView2 from "@/components/budgets/BudgetView2.vue";
 import SettingsView from "@/components/settings/SettingsView.vue";
 import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";
 import TransactionList from "@/components/transactions/TransactionList.vue";
 import LoginView from "@/components/auth/LoginView.vue";
 import AnalyticsView from "@/components/analytics/AnalyticsView.vue";
+import BudgetViewboth from "@/components/budgets/BudgetViewboth.vue";
 
 const routes = [
     {path: '/login', component: LoginView},
     {path: '/', name: 'Budgets main', component: BudgetList, meta: {requiresAuth: true}},
     {path: '/analytics', name: 'Analytics', component: AnalyticsView, meta: {requiresAuth: true}},
     {path: '/budgets', name: 'Budgets', component: BudgetList, meta: {requiresAuth: true}},
-    {path: '/budgets/:id', name: 'BudgetView', component: BudgetView, meta: {requiresAuth: true}},
+    {path: '/budgets/:id', name: 'BudgetView', component: BudgetViewboth, meta: {requiresAuth: true}},
+    {path: '/budgets-new/:id', name: 'BudgetView New', component: BudgetView2, meta: {requiresAuth: true}},
     {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList, meta: {requiresAuth: true}},
     // {path: '/transactions/create', name: 'Transaction List', component: TransactionList},
     {path: '/settings/', name: 'Settings', component: SettingsView, meta: {requiresAuth: true}},
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 9fefb16..72f6abe 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -8,6 +8,7 @@ export const useUserStore = defineStore('user', () => {
     const loadingUser = ref(true);
     const router = useRouter();
     const route = useRoute();
+    const settings = ref({"budgetViewVersion": "2"})
 
     async function fetchUserProfile() {
         // Убираем проверку на `loadingUser`, чтобы не блокировать запрос
@@ -51,5 +52,5 @@ export const useUserStore = defineStore('user', () => {
         }
     };
 
-    return {user, loadingUser, fetchUserProfile, login};
+    return {user, loadingUser, fetchUserProfile, login, settings};
 });