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

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>