new version of budget view

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">

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"
+                  <li v-for="(category,catType) in categoriesCatalogGrouped"
-                      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">
+                    <span v-html="catType"/>
-                    {{ category.icon }} {{ category.name }}
+                    <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>

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>

src/models/Budget.ts

@@ -10,6 +10,7 @@ export class Budget {
     plannedExpenses: [Transaction]
     plannedIncomes: [Transaction]
     categories: [BudgetCategory]
+    incomeCategories: [BudgetCategory]
     transactions: [Transaction]
     warns: [Warn]
 }

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}},

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};
 });