init

2024-10-24 17:32:14 +03:00
parent 41a6a15936
commit c5257376a3
52 changed files with 19652 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "no-budger-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.1.0",
+    "@vue/cli-service": "^5.0.8",
+    "axios": "^1.7.7",
+    "chart.js": "^4.4.4",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.1.0",
+    "tailwindcss-primeui": "^0.3.4",
+    "vue": "^3.5.11",
+    "vue-class-component": "^8.0.0-0",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "~4.5.5",
+    "vite": "^5.4.8"
+  },
+  "type": "module"
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="app" class="flex flex-col h-screen bg-gray-100">
+    <!-- MenuBar всегда фиксирован сверху -->
+    <MenuBar class="w-full fixed top-0 z-10"/>
+
+    <!-- Контентная часть заполняет оставшееся пространство -->
+    <div class="flex-grow mt-16 ">
+
+      <router-view class="w-full h-full "/>
+    </div>
+      <OverlayView/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MenuBar from "./components/MenuBar.vue";
+import OverlayView from "@/components/OverlayView.vue";
+
+
+// @Options({
+//   components: {
+//     TransactionEditDrawer, SpeedDial,
+//     MenuBar,
+//   },
+// })
+// export default class App extends Vue {}
+</script>
+
+<style scoped>
+/* Пример настройки высоты для поддержки flexbox */
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,39 @@
+@import './base.css';
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*#app {*/
+/*  !*max-width: 1280px;*!*/
+/*  !*margin: 0 auto;*!*/
+/*  !*padding: 2rem;*!*/
+/*  !*font-weight: normal;*!*/
+/*}*/
+
+/*a,*/
+/*.green {*/
+/*  text-decoration: none;*/
+/*  color: hsla(160, 100%, 37%, 1);*/
+/*  transition: 0.4s;*/
+/*  padding: 3px;*/
+/*}*/
+
+/*@media (hover: hover) {*/
+/*  a:hover {*/
+/*    background-color: hsla(160, 100%, 37%, 0.2);*/
+/*  }*/
+/*}*/
+
+/*@media (min-width: 1024px) {*/
+/*  body {*/
+/*    display: flex;*/
+/*    place-items: center;*/
+/*  }*/
+
+/*  #app {*/
+/*    display: grid;*/
+/*    !*grid-template-columns: 1fr 1fr;*!*/
+/*    padding: 0 2rem;*/
+/*  }*/
+/*}*/
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+  props: {
+    msg: String
+  }
+})
+export default class HelloWorld extends Vue {
+  msg!: string
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -0,0 +1,106 @@
+
+<template>
+  <div class="card">
+    <Menubar :model="items">
+      <template #start>
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+          <path
+              d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+              fill="var(--p-primary-color)"
+          />
+          <path
+              d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+              fill="var(--p-text-color)"
+          />
+        </svg>
+      </template>
+      <template #item="{ item, props, hasSubmenu, root }">
+        <router-link :to="item.url" v-ripple class="flex items-center" v-bind="props.action">
+          <span :class="item.icon" />
+          <span class="ml-2">{{ item.label }}</span>
+          <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+          <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+          <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+        </router-link>
+      </template>
+      <template #end>
+        <div class="flex items-center gap-2">
+<!--          <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />-->
+          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+      </template>
+    </Menubar>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Badge from "primevue/badge";
+import Avatar from "primevue/avatar";
+import Menubar from "primevue/menubar";
+
+const items = ref([
+  {
+    label: 'Home',
+    icon: 'pi pi-home',
+    url: '/'
+  },
+  {
+    label: 'Analytics',
+    icon: 'pi pi-star',
+    url: '/analytics'
+  },
+  {
+    label: 'Budgets',
+    icon: 'pi pi-search',
+    url: '/budgets'
+    // items: [
+    //   {
+    //     label: 'Core',
+    //     icon: 'pi pi-bolt',
+    //     shortcut: '⌘+S'
+    //   },
+    //   {
+    //     label: 'Blocks',
+    //     icon: 'pi pi-server',
+    //     shortcut: '⌘+B'
+    //   },
+    //   {
+    //     label: 'UI Kit',
+    //     icon: 'pi pi-pencil',
+    //     shortcut: '⌘+U'
+    //   },
+    //   {
+    //     separator: true
+    //   },
+    //   {
+    //     label: 'Templates',
+    //     icon: 'pi pi-palette',
+    //     items: [
+    //       {
+    //         label: 'Apollo',
+    //         icon: 'pi pi-palette',
+    //         badge: 2
+    //       },
+    //       {
+    //         label: 'Ultima',
+    //         icon: 'pi pi-palette',
+    //         badge: 3
+    //       }
+    //     ]
+    //   }
+    // ]
+  },
+  {
+    label: 'Transactions',
+    icon: "pi pi-star",
+    url: '/transactions'
+  },
+  {
+    label: 'Settings',
+    icon: 'pi pi-envelope',
+    url: '/settings',
+    // badge: 3
+  }
+]);
+</script>
--- a/src/components/OverlayView.vue
+++ b/src/components/OverlayView.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+
+import SpeedDial from "primevue/speeddial";
+import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
+import { onMounted, ref} from "vue";
+import {TransactionType} from "@/models/Transaction";
+import {CategoryType} from "@/models/Category";
+import {useRoute} from "vue-router";
+
+const loading = ref(false);
+const drawerOpened = ref(false);
+const transactionType = ref<TransactionType>()
+const categoryType = ref<CategoryType>()
+
+const route = useRoute()
+
+
+const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
+  if (selectedTransactionType && selectedCategoryType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = selectedCategoryType;
+  } else if (selectedTransactionType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = 'EXPENSE'
+  }
+  console.log('we tut testsete')
+  drawerOpened.value = true;
+}
+
+
+const closeDrawer = () => {
+  drawerOpened.value = false;
+}
+
+const items = ref([
+  {
+    label: 'Create instant transaction',
+    icon: 'pi pi-pencil',
+    command: () => {
+      openDrawer('INSTANT')
+    }
+  },
+  {
+    label: 'Create planned income',
+    icon: 'pi pi-refresh',
+    command: () => {
+      openDrawer('PLANNED', 'INCOME')
+    }
+  },
+  {
+    label: 'Create planned expense',
+    icon: 'pi pi-trash',
+    command: () => {
+      openDrawer('PLANNED', 'EXPENSE')
+    }
+  }
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    console.log(route.params['mode']);
+    if (route.params['mode']) {
+      console.log(route.params['mode']);
+
+      openDrawer('INSTANT')
+
+    }
+  }, 10)
+})
+
+</script>
+
+<template>
+
+  {{ drawerOpened }}
+  <div v-if="loading">Loding...</div>
+  <div v-else>
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
+
+
+                           :transaction-type="transactionType"
+                           :category-type="categoryType"
+
+                           @close-drawer="closeDrawer()"
+    />
+
+    <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
+               class=" mb-10 h-fit" :style="{ position: 'fixed', right: 0, bottom: 0 }"
+               pt:menuitem="m-2">
+      <template #item="{ item, toggleCallback }">
+        <div
+            class="flex flex-row items-center justify-between  p-2 border w-56 bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
+            @click="toggleCallback"> <!-- Установлена минимальная ширина -->
+
+          <span>{{ item.label }}</span>
+          <span :class="item.icon"></span>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -0,0 +1,88 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/components/budgets/BudgetList.vue
+++ b/src/components/budgets/BudgetList.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="p-4">
+    <!-- Заголовок -->
+    <h2 class="text-4xl mb-6  mt-14 font-bold">Monthly Budgets</h2>
+
+    <!-- Плитка с бюджетами -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <!-- Будущие и текущие бюджеты -->
+      <div v-for="budget in upcomingBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-white">
+        <div class="flex flex-row justify-between">
+          <div class="text-xl font-bold mb-2">{{ budget.month }}</div>
+          <router-link to="/budgets/1">
+            <Button icon="pi pi-arrow-circle-right" rounded text size="large"/>
+          </router-link>
+        </div>
+        <div class="text-sm text-gray-600 mb-4">
+          {{ budget.startDate }} - {{ budget.endDate }}
+        </div>
+        <div class="mb-4">
+          <div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
+          <div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
+          <div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
+          <div class="text-sm flex items-center">
+            Unplanned Expenses:
+            <span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
+            <!-- Прогресс бар -->
+            <ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- Прошедшие бюджеты (забеленные) -->
+      <div v-for="budget in pastBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-gray-100 opacity-60">
+        <div class="text-xl font-bold mb-2">{{ budget.month }}</div>
+        <div class="text-sm text-gray-600 mb-4">
+          {{ budget.startDate }} - {{ budget.endDate }}
+        </div>
+        <div class="mb-4">
+          <div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
+          <div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
+          <div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
+          <div class="text-sm flex items-center">
+            Unplanned Expenses:
+            <span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
+            <!-- Прогресс бар -->
+            <ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {ref} from 'vue';
+import ProgressBar from 'primevue/progressbar';
+import Button from "primevue/button";
+
+export default {
+  components: {
+    ProgressBar,
+    Button
+  },
+  setup() {
+    const upcomingBudgets = ref([
+      {
+        id: 1,
+        month: 'October 2024',
+        startDate: '2024-10-01',
+        endDate: '2024-10-31',
+        totalIncome: '500,000 RUB',
+        totalExpenses: '350,000 RUB',
+        plannedExpenses: '300,000 RUB',
+        remainingForUnplanned: '50,000 RUB',
+        unplannedProgress: 60, // Прогресс в процентах
+      },
+      {
+        id: 2,
+        month: 'November 2024',
+        startDate: '2024-11-01',
+        endDate: '2024-11-30',
+        totalIncome: '550,000 RUB',
+        totalExpenses: '320,000 RUB',
+        plannedExpenses: '250,000 RUB',
+        remainingForUnplanned: '70,000 RUB',
+        unplannedProgress: 50,
+      },
+    ]);
+
+    const pastBudgets = ref([
+      {
+        id: 3,
+        month: 'September 2024',
+        startDate: '2024-09-01',
+        endDate: '2024-09-30',
+        totalIncome: '450,000 RUB',
+        totalExpenses: '400,000 RUB',
+        plannedExpenses: '350,000 RUB',
+        remainingForUnplanned: '50,000 RUB',
+        unplannedProgress: 90,
+      },
+      {
+        id: 4,
+        month: 'August 2024',
+        startDate: '2024-08-01',
+        endDate: '2024-08-31',
+        totalIncome: '400,000 RUB',
+        totalExpenses: '370,000 RUB',
+        plannedExpenses: '320,000 RUB',
+        remainingForUnplanned: '50,000 RUB',
+        unplannedProgress: 85,
+      },
+    ]);
+
+    return {
+      upcomingBudgets,
+      pastBudgets,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Стили для плиток и общего вида */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+</style>
--- a/src/components/budgets/BudgetTransactionView.vue
+++ b/src/components/budgets/BudgetTransactionView.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+
+import Button from "primevue/button";
+import Checkbox from "primevue/checkbox";
+import {computed, onMounted, PropType, ref} from "vue";
+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 {formatAmount, formatDate} from "@/utils/utils";
+
+
+const props = defineProps(
+    {
+      transaction: {
+        type: Object as PropType<Transaction>,
+        required: true,
+      }
+    }
+)
+const emits = defineEmits(['open-drawer'])
+
+
+const setIsDoneTrue = async () => {
+  setTimeout(async () => {
+    await updateTransactionRequest(props.transaction)
+  }, 10);
+  // showedTransaction.value.isDone = !showedTransaction.value.isDone;
+
+
+}
+
+const drawerOpened = ref(false)
+const toggleDrawer = () => {
+  if (drawerOpened.value) {
+    drawerOpened.value = false;
+  }
+  drawerOpened.value = !drawerOpened.value
+  emits('open-drawer', props.transaction)
+}
+
+const isPlanned = computed(() => {
+  return props.transaction?.transactionType.code === "PLANNED"
+})
+
+
+const entireCategories = ref<Category[]>([])
+const expenseCategories = ref<Category[]>([])
+const incomeCategories = ref<Category[]>([])
+const fetchCategories = async () => {
+  try {
+    const response = await getCategories();
+    entireCategories.value = response.data
+    expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
+    incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+}
+
+
+const categoryTypes = ref<CategoryType[]>([]);
+const selectedCategoryType = ref<CategoryType | null>(null);
+const fetchCategoryTypes = async () => {
+
+  try {
+    const response = await getCategoryTypes();
+    categoryTypes.value = response.data;
+    selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
+  } catch (error) {
+    console.error('Error fetching category types:', error);
+  }
+};
+
+const closeDrawer = () => {
+  drawerOpened.value = false;
+}
+
+
+onMounted(async () => {
+  // await fetchCategories();
+  // await fetchCategoryTypes()
+})
+
+</script>
+
+<template>
+  <div :class="transaction.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' &&
+          transaction.transactionType.code == 'INSTANT' ? ' bg-gradient-to-r shadow-lg  border-2 gap-5 p-2 rounded-xl '  : 'border-b pb-2'
+"
+       class="flex  bg-white  min-w-fit  max-h-fit flex-row items-center  gap-4 w-full ">
+    <div>
+      <p v-if="transaction.transactionType.code=='INSTANT'"
+         class="text-6xl font-bold text-gray-700 dark:text-gray-400">
+        {{ transaction.category.icon }}</p>
+      <Checkbox v-model="transaction.isDone" v-else-if="transaction.transactionType.code=='PLANNED'"
+                :binary="true"
+                @click="setIsDoneTrue"/>
+    </div>
+    <button class="flex flex-row  items-center p-x-4  justify-between w-full " @click="toggleDrawer">
+
+      <div class="flex flex-col items-start justify-items-start">
+        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-bold">{{
+            transaction.comment
+          }}</p>
+        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-light">{{
+            transaction.category.name
+          }} |
+          {{ formatDate(transaction.date) }}</p>
+      </div>
+      <div
+          :class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' &&  transaction.isDone  && isPlanned ? 'line-through' : ''"
+          class="text-2xl font-bold line-clamp-1 ">
+
+        {{ formatAmount(transaction.amount) }} ₽
+
+
+      </div>
+
+    </button>
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
+                           :incomeCategories="incomeCategories" :transaction="transaction"
+                           :category-types="categoryTypes"
+
+                           @close-drawer="closeDrawer()"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/budgets/BudgetView.vue
+++ b/src/components/budgets/BudgetView.vue
@@ -0,0 +1,357 @@
+<template>
+  <Toast/>
+  <div v-if="loading" 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 flex items-center justify-center z-50">
+      <ProgressSpinner
+          style="width: 50px; height: 50px;"
+          strokeWidth="8"
+          fill="transparent"
+          animationDuration=".5s"
+          aria-label="Custom ProgressSpinner"
+      />
+    </div>
+  </div>
+
+  <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-col ">
+        <h2 class="text-4xl  font-bold">Budget for {{ budgetInfo.budget.name }} </h2>
+        <div class="flex flex-row gap-2 text-xl">{{ formatDate(budgetInfo.budget.dateFrom) }} -
+          {{ formatDate(budgetInfo.budget.dateTo) }}
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+      <!-- Аналитика и плановые доходы/расходы -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start ">
+        <!-- Блок Аналитики (25%) -->
+        <div class="card p-4 shadow-lg rounded-lg col-span-2 h-fit">
+          <h3 class="text-xl mb-4 font-bold">Analytics</h3>
+          <div class="flex ">
+            <div class="w-128">
+              <Chart type="bar" :data="incomeExpenseChartData" class=""/>
+            </div>
+            <div class="h-fit">
+<!--              <Chart type="pie" :data="incomeExpenseChartData" class="h-64"/>-->
+            </div>
+          </div>
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 items-center  justify-items-center mt-4">
+            <div class="grid grid-cols-2 gap-5 items-center w-full">
+              <div class="flex flex-col items-center font-bold ">
+                <h4 class="text-xl font-bold text-green-500">Total Incomes:</h4>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                  +{{ formatAmount(budgetInfo.totalIncomes) }}
+                  ₽
+                </div>
+                <!--              <p>Total Incomes</p>-->
+              </div>
+              <div class="flex flex-col items-center ">
+                <h4 class="text-xl font-bold text-red-500">Total Expenses:</h4>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                  -{{ formatAmount(budgetInfo.totalExpenses) }}
+                  ₽
+                </div>
+              </div>
+              <div class="flex flex-col gap-2 items-center font-bold">
+                <p class="font-bold ">Income at 10th:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full px-2">
+                  +{{ formatAmount(budgetInfo.chartData[0][0]) }} ₽
+                </div>
+              </div>
+              <div class="flex flex-col gap-2 items-center">
+                <p class="font-bold ">Income at 25th:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full px-2">
+                  +{{ formatAmount(budgetInfo.chartData[0][1]) }} ₽
+                </div>
+              </div>
+              <div class="flex flex-col gap-2 items-center">
+                <p class="font-bold ">Expenses at 10th:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full px-2">
+                  -{{ formatAmount(budgetInfo.chartData[1][0]) }} ₽
+                </div>
+
+              </div>
+              <div class="flex flex-col gap-2 items-center">
+                <p class="font-bold ">Expenses at 25th:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full px-2">
+                  -{{ formatAmount(budgetInfo.chartData[1][1]) }} ₽
+                </div>
+              </div>
+              <div class="flex flex-col gap-2 items-center ">
+                <p class="font-bold">Left for unplanned:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                  {{ formatAmount(leftForUnplanned) }} ₽
+
+                </div>
+              </div>
+              <div class="flex flex-col gap-2 items-center ">
+                <p class="font-bold">Current spending:</p>
+                <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                  {{ formatAmount(leftForUnplanned) }} ₽
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+          <ProgressBar :value="value" class="mt-2"></ProgressBar>
+          <div class="flex flex-col w-full items-end">
+
+            <div class="flex flex-row items-end ">
+              {{ formatAmount(leftForUnplanned) }} ₽
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 gap-4 row-span-3">
+          <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 ">Planned Incomes</h3>
+                <Button icon="pi pi-plus" rounded outlined size="small"/>
+              </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(budgetInfo.totalIncomes) }}
+                  ₽
+                </div>
+                <div class="font-bold bg-gray-100  p-1 rounded-lg box-shadow-inner w-full text-center">
+                  {{ formatAmount(totalIncomeLeftToGet) }}
+                  ₽
+                </div>
+              </div>
+              <ul class="space-y-2">
+
+                <BudgetTransactionView v-for="transaction in budgetInfo.plannedIncomes" :transaction="transaction"/>
+
+              </ul>
+
+            </div>
+          </div>
+          <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">Planned Expenses</h3>
+              <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(budgetInfo.totalExpenses) }}
+                  ₽
+                </div>
+                <div class="font-bold bg-gray-100  p-1 rounded-lg box-shadow-inner w-full text-center">
+                  {{ formatAmount(totalExpenseLeftToSpend) }}
+                  ₽
+                </div>
+              </div>
+              <ul class="space-y-2">
+
+                <BudgetTransactionView v-for="transaction in budgetInfo.plannedExpenses" :transaction="transaction"/>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="row-span-1 col-span-2 h-fit">
+          <h3 class="text-2xl font-bold mb-4">Unplanned Categories</h3>
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
+            <UnplannedCategoryView v-for="category in budgetInfo.unplannedCategories" :key="category.id"
+                                   :category="category" :budget-id="budgetInfo.budget.id"
+                                   @category-updated="updateBudgetCategory"
+                                   class="p-4 shadow-lg rounded-lg bg-white flex justify-between items-center"/>
+
+          </div>
+        </div>
+        <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-2 col-span-2">
+          <div class="flex flex-row ">
+            <h3 class="text-2xl font-bold mb-4 ">Transactions List</h3>
+          </div>
+          <div class=" flex gap-2">
+            <button v-for="categorySum in budgetInfo.transactionCategoriesSums" :key="categorySum.category.id"
+                    class="rounded-full border p-1 bg-white border-gray-300 mb-2 px-2">
+              <strong>{{ categorySum.category.name }}</strong>:
+              {{ categorySum.sum }} ₽
+            </button>
+          </div>
+          <div class="grid  grid-cols-1 gap-4 max-h-tlist overflow-y-auto">
+            <BudgetTransactionView v-for="transaction in budgetInfo.transactions" :key="transaction.id"
+                                   :transaction="transaction"
+                                   @open-drawer="openDrawer"/>
+          </div>
+        </div>
+      </div>
+
+
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import {computed, onMounted, ref} from 'vue';
+import Chart from 'primevue/chart';
+import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
+import {CategoryType} from "@/models/Category";
+import {getBudgetInfo, updateBudgetCategoryRequest} from "@/services/budgetsService";
+import {BudgetInfo} 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 UnplannedCategoryView from "@/components/budgets/UnplannedCategoryView.vue";
+import {TransactionType} from "@/models/Transaction";
+import Toast from "primevue/toast";
+import Button from "primevue/button";
+
+const loading = ref(true);
+const updateLoading = ref(false);
+const route = useRoute()
+
+const budgetInfo = ref<BudgetInfo>();
+
+const value = ref(50)
+
+const leftForUnplanned = ref(0)
+
+const drawerOpened = ref(false);
+const transactionType = ref<TransactionType>()
+const categoryType = ref<CategoryType>()
+
+
+const totalIncomeLeftToGet = computed(() => {
+  let totalIncomeLeftToGet = 0;
+  budgetInfo.value?.plannedIncomes.forEach(i => {
+    if (!i.isDone) {
+      totalIncomeLeftToGet += i.amount
+    }
+  })
+  return totalIncomeLeftToGet
+})
+
+const totalExpenseLeftToSpend = computed(() => {
+  let totalExpenseLeftToSpend = 0;
+  budgetInfo.value?.plannedExpenses.forEach(i => {
+    if (!i.isDone) {
+      totalExpenseLeftToSpend += i.amount
+    }
+  })
+  return totalExpenseLeftToSpend
+})
+const fetchBudgetInfo = async () => {
+  updateLoading.value = true
+  console.log('Trying to get budget Info')
+  budgetInfo.value = await getBudgetInfo(route.params.id);
+
+
+  console.log(budgetInfo.value)
+  console.log(budgetInfo.value?.chartData[0])
+  incomeExpenseChartData.value = {
+    labels: ['10.10', '25.10'],
+    datasets: [
+      {
+        label: 'Income',
+        backgroundColor: ['#2E8B57'],
+        data: budgetInfo.value?.chartData[0],
+      },
+      {
+        label: 'Expense',
+        backgroundColor: ['#B22222'],
+        data: budgetInfo.value?.chartData[1],
+      },
+    ],
+  }
+  leftForUnplanned.value =
+      budgetInfo.value.chartData[0][0] +
+      budgetInfo.value.chartData[0][1] -
+      budgetInfo.value.chartData[1][0] -
+      budgetInfo.value.chartData[1][1]
+
+  updateLoading.value = false
+}
+
+const updateBudgetCategory = async (category) => {
+  console.log(category)
+  loading.value = true
+  await updateBudgetCategoryRequest(budgetInfo.value.budget.id, category)
+  budgetInfo.value = await getBudgetInfo(route.params.id)
+  console.log(budgetInfo.value)
+  console.log(budgetInfo.value?.chartData[0])
+  incomeExpenseChartData.value = {
+    labels: ['10.10', '25.10'],
+    datasets: [
+      {
+        label: 'Income',
+        backgroundColor: ['#2E8B57'],
+        data: budgetInfo.value?.chartData[0],
+      },
+      {
+        label: 'Expense',
+        backgroundColor: ['#B22222'],
+        data: budgetInfo.value?.chartData[1],
+      },
+    ],
+  }
+  leftForUnplanned.value =
+      budgetInfo.value.chartData[0][0] +
+      budgetInfo.value.chartData[0][1] -
+      budgetInfo.value.chartData[1][0] -
+      budgetInfo.value.chartData[1][1]
+  loading.value = false
+
+}
+
+// Пример данных
+const incomeExpenseChartData = ref();
+
+
+onMounted(async () => {
+  loading.value = true;
+  try {
+    await Promise.all([
+      fetchBudgetInfo()
+    ]);
+  } catch (error) {
+    console.error('Error during fetching data:', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+/* Добавляем стили для стилизации */
+.card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.grid {
+  gap: 1rem;
+}
+
+.max-h-tlist {
+  max-height: 45dvh; /* Ограничение высоты списка */
+}
+
+
+
+.box-shadow-inner {
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+}
+
+</style>
--- a/src/components/budgets/TransactionEditDrawer.vue
+++ b/src/components/budgets/TransactionEditDrawer.vue
@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import Drawer from "primevue/drawer";
+import InputText from "primevue/inputtext";
+import DatePicker from "primevue/datepicker";
+import FloatLabel from "primevue/floatlabel";
+import InputNumber from "primevue/inputnumber";
+import Button from "primevue/button";
+import {ref, onMounted, computed} from 'vue';
+import {Transaction,  TransactionType} from "@/models/Transaction";
+import {CategoryType} from "@/models/Category";
+import SelectButton from "primevue/selectbutton";
+import {
+  createTransactionRequest,
+  getTransactionTypes,
+  updateTransactionRequest,
+  deleteTransactionRequest
+} from "@/services/transactionService";
+import {getCategories, getCategoryTypes} from "@/services/categoryService";
+import {useToast} from "primevue/usetoast";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  transaction: {
+    type: Object as () => Transaction,
+    required: false
+  },
+  transactionType: {
+    type: String,
+    required: false
+  },
+  categoryType: {
+    type: String,
+    required: false
+  }
+});
+
+const emit = defineEmits(['create-transaction', 'update-transaction', 'delete-transaction', 'close-drawer']);
+const toast = useToast();
+const categoryTypeChanged = () => {
+  console.log(selectedCategoryType.value)
+  editedTransaction.value.category = selectedCategoryType.value.code == "EXPENSE" ? expenseCategories.value[0] : incomeCategories.value[0];
+
+}
+const selectCategory = (category) => {
+  isCategorySelectorOpened.value = false;
+  editedTransaction.value.category = category;
+};
+
+
+// Состояние
+const loading = ref(false);
+const isEditing = ref(!!props.transaction);
+const isCategorySelectorOpened = ref(false);
+const editedTransaction = ref<Transaction | null>(null);
+
+const selectedCategoryType = ref<CategoryType | null>(null);
+const selectedTransactionType = ref<TransactionType | null>(null);
+
+const entireCategories = ref<Category[]>([]);
+const expenseCategories = ref<Category[]>([]);
+const incomeCategories = ref<Category[]>([]);
+const categoryTypes = ref<CategoryType[]>([]);
+const transactionTypes = ref<TransactionType[]>([]);
+
+// Получение категорий и типов транзакций
+const fetchCategoriesAndTypes = async () => {
+  try {
+    const [categoriesResponse, categoryTypesResponse, transactionTypesResponse] = await Promise.all([
+      getCategories(),
+      getCategoryTypes(),
+      getTransactionTypes()
+    ]);
+    entireCategories.value = categoriesResponse.data;
+    expenseCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'EXPENSE');
+    incomeCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'INCOME');
+
+    categoryTypes.value = categoryTypesResponse.data;
+    transactionTypes.value = transactionTypesResponse.data;
+  } catch (error) {
+    console.error('Error fetching categories and types:', error);
+  }
+};
+
+// Инициализация данных
+const prepareData = () => {
+  if (!props.transaction) {
+    editedTransaction.value = new Transaction();
+    editedTransaction.value.transactionType = transactionTypes.value.find(type => type.code === props.transactionType) || transactionTypes.value[0];
+    selectedCategoryType.value = categoryTypes.value.find(type => type.code === props.categoryType) || categoryTypes.value[0];
+    editedTransaction.value.category = props.categoryType === 'EXPENSE' ? expenseCategories.value[0] : incomeCategories.value[0];
+    editedTransaction.value.date = new Date();
+  } else {
+    editedTransaction.value = {...props.transaction};
+    selectedCategoryType.value = editedTransaction.value.category.type;
+    selectedTransactionType.value = editedTransaction.value.transactionType;
+  }
+
+};
+
+// Создание транзакции
+const createTransaction = async () => {
+  try {
+    loading.value = true;
+    if (editedTransaction.value.transactionType.code === 'INSTANT') {
+      editedTransaction.value.isDone = true;
+    }
+    await createTransactionRequest(editedTransaction.value);
+    toast.add({severity: 'success', summary: 'Transaction created!', detail: 'Транзакция создана!', life: 3000});
+    emit('create-transaction', editedTransaction.value);
+    resetForm();
+  } catch (error) {
+    console.error('Error creating transaction:', error);
+  } finally {
+    loading.value = false;
+    console.log(editedTransaction.value)
+  }
+};
+
+// Обновление транзакции
+const updateTransaction = async () => {
+  try {
+    loading.value = true;
+    const response = await updateTransactionRequest(editedTransaction.value);
+    editedTransaction.value = response.data;
+    toast.add({severity: 'success', summary: 'Transaction updated!', detail: 'Транзакция обновлена!', life: 3000});
+    emit('update-transaction', editedTransaction.value);
+  } catch (error) {
+    console.error('Error updating transaction:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Удаление транзакции
+const deleteTransaction = async () => {
+  try {
+    loading.value = true;
+    await deleteTransactionRequest(editedTransaction.value.id);
+    toast.add({severity: 'success', summary: 'Transaction deleted!', detail: 'Транзакция удалена!', life: 3000});
+    emit('delete-transaction', editedTransaction.value);
+    closeDrawer()
+  } catch (error) {
+    console.error('Error deleting transaction:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Сброс формы
+const resetForm = () => {
+
+  editedTransaction.value.date = new Date();
+  editedTransaction.value.amount = null;
+  editedTransaction.value.comment = '';
+
+};
+
+const dateErrorMessage = computed(() => {
+  console.log('tut')
+  if (editedTransaction.value.transactionType.code != 'PLANNED' && editedTransaction.value.date > new Date()) {
+    console.log('tut2')
+      return 'При мгновенных тратах дата должна быть меньше текущей!'
+  } else if (editedTransaction.value.transactionType.code == 'PLANNED' && editedTransaction.value.date < new Date()){
+    console.log('tu3')
+    return 'При плановых тратах дата должна быть больше текущей!'
+  }
+  else {
+    console.log('tu4')
+    return ''
+  }
+})
+
+// Закрытие окна
+const closeDrawer = () => emit('close-drawer');
+
+// Мониторинг при монтировании
+onMounted(async () => {
+  loading.value = true;
+  await fetchCategoriesAndTypes();
+  prepareData();
+  loading.value = false;
+});
+</script>
+
+<template>
+
+  <div class="card flex justify-center">
+
+    <Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
+            position="right" @hide="closeDrawer"
+            class="!w-128  ">
+      <div v-if="loading">
+        Loading...
+      </div>
+      <div v-else class="p-fluid grid formgrid p-4 w-full gap-5">
+
+        <div class="relative w-full justify-center justify-items-center ">
+          <div class="flex flex-col justify-items-center gap-2">
+
+            <!--            {{editedTransaction.value.transactionType}}-->
+            <SelectButton v-if="!isEditing" v-model="editedTransaction.transactionType" :allow-empty="false"
+                          :options="transactionTypes"
+                          optionLabel="name"
+                          aria-labelledby="basic"
+                          class="justify-center"/>
+            <SelectButton v-model="selectedCategoryType" :options="categoryTypes" :allow-empty="false"
+                          optionLabel="name"
+                          aria-labelledby="basic"
+                          @change="categoryTypeChanged" class="justify-center"/>
+            <button class="border border-gray-300 rounded-lg w-full z-50"
+                    @click="isCategorySelectorOpened = !isCategorySelectorOpened">
+              <div class="flex flex-row  items-center pe-4 py-2 ">
+                <div class="flex flex-row justify-between w-full gap-4 px-4 items-center">
+                  <p class="text-3xl font-bold text-gray-700 dark:text-gray-400">{{
+                      editedTransaction.category.icon
+                    }}</p>
+                  <div class="flex flex-col items-start justify-items-start justify-around w-full">
+                    <p class="font-bold text-start">{{ editedTransaction.category.name }}</p>
+                    <p class="font-light line-clamp-1 items-start text-start">{{
+                        editedTransaction.category.description
+                      }}</p>
+                  </div>
+                </div>
+                <div>
+              <span :class="{'rotate-90': isCategorySelectorOpened}"
+                    class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
+                </div>
+              </div>
+            </button>
+          </div>
+
+          <!-- Анимированное открытие списка категорий -->
+          <div v-show="isCategorySelectorOpened"
+               class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x  rounded-b-lg bg-white shadow-lg transition-all duration-500"
+               :class="{ 'max-h-0': !isCategorySelectorOpened, 'max-h-[500px]': isCategorySelectorOpened }">
+            <div class="grid grid-cols-2  mt-2">
+              <button
+                  v-for="category in editedTransaction.category.type.code == 'EXPENSE' ? expenseCategories : incomeCategories"
+                  :key="category.id" class="border rounded-lg mx-2 mb-2"
+                  @click="selectCategory(category)">
+                <div class="flex flex-row justify-between w-full px-2">
+                  <p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
+                  <div class="flex flex-col items-start justify-items-start justify-around w-full">
+                    <p class="font-bold text-start">{{ category.name }}</p>
+                    <p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Comment Input -->
+        <div class="field col-12 w-full">
+          <FloatLabel variant="on" class="w-full">
+            <label for="comment">Comment</label>
+            <InputText class="w-full"
+                       :invalid="!editedTransaction.comment"
+                       id="comment"
+                       v-model="editedTransaction.comment"
+
+            />
+          </FloatLabel>
+        </div>
+
+        <!-- Date Picker -->
+        <div class="field col-12 gap-0">
+          <FloatLabel variant="on">
+            <label for="date">Date </label>
+
+            <DatePicker class="w-full"
+                        inline
+                        :invalid="editedTransaction.transactionType.code != 'PLANNED' ? editedTransaction.date > new Date() : true"
+                        id="date"
+                        v-model="editedTransaction.date"
+                        dateFormat="yy-mm-dd"
+                        showIcon
+            />
+            <p :class="dateErrorMessage != '' ? 'visible' : 'invisible'"
+               class="text-red-400">{{dateErrorMessage}}</p>
+
+
+          </FloatLabel>
+        </div>
+
+        <!-- Amount Input -->
+        <div class="field col-12">
+          <FloatLabel variant="on">
+            <InputNumber class="w-full"
+                         :invalid="!editedTransaction.amount"
+                         :minFractionDigits="0"
+                         id="amount"
+                         v-model="editedTransaction.amount"
+                         mode="currency"
+                         currency="RUB"
+                         locale="ru-RU"
+
+            />
+            <label for="amount">Amount</label>
+          </FloatLabel>
+        </div>
+
+        <!-- Buttons -->
+        <div class="field col-12 flex justify-content-end gap-4">
+
+          <Button label="Save" 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"
+                  @click="deleteTransaction"/>
+        </div>
+
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<style scoped>
+.formgrid .field {
+  margin-bottom: 1rem;
+}
+</style>
--- a/src/components/budgets/UnplannedCategoryView.vue
+++ b/src/components/budgets/UnplannedCategoryView.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import Select from "primevue/select";
+import InputNumber from "primevue/inputnumber";
+
+import {Category} from "@/models/Category";
+import {ref} from "vue";
+import {formatAmount} from "@/utils/utils";
+
+const props = defineProps({
+  category: {
+    type: Object as Category,
+    require: true
+  },
+  budgetId: {
+    type: Number,
+    require: true
+  }
+})
+
+const emits = defineEmits(['category-updated'])
+
+const isEditing = ref(false);
+const startEditing = (a) => {
+  isEditing.value = true;
+  console.log(a)
+}
+
+const stopEditing = () => {
+  isEditing.value = false;
+
+  emits('category-updated', editedCategory.value);
+
+}
+const selectedCategorySettingType = ref(props.category.categorySetting.type)
+
+const categorySettingTypes = ref([
+  {
+    code: 'CONST',
+    name: 'По значению'
+  },
+  {
+    code: 'AVG',
+    name: 'По среднему'
+  },
+  {
+    code: 'PERCENT',
+    name: 'По проценту'
+  },
+  {
+    code: 'LIMIT',
+    name: 'По лимиту'
+  }
+])
+const categoryAmount = ref(1000)
+
+const editedCategory = ref(props.category);
+</script>
+
+<template>
+
+  <div class="p-2 shadow-lg rounded-lg bg-white flex justify-between ">
+
+    <div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6">
+      <h4 class="text-lg line-clamp-1">{{ editedCategory.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 w-fit ">
+
+      <Select v-if="isEditing" v-model="editedCategory.categorySetting.type" :options="categorySettingTypes"
+              optionLabel="name"
+              class="line-clamp-1   w-fit"/>
+      <!-- Сумма, которая становится редактируемой при клике -->
+      <button v-if="!isEditing" @click="startEditing"
+              class="text-lg font-bold cursor-pointer w-full line-clamp-1">
+        <p class="line-clamp-1 w-fit">{{ formatAmount(editedCategory.categorySetting.value) }} ₽</p>
+      </button>
+      <!--      @blur="stopEditing('unplannedCategories')" @keyup.enter="stopEditing('unplannedCategories')"&ndash;&gt;-->
+
+      <InputNumber v-else ref="inputRefs" type="text" v-model="editedCategory.categorySetting.settingValue"
+                   :disabled=" editedCategory.categorySetting.type.code == 'PERCENT' ? false : editedCategory.categorySetting.type.code == 'LIMIT' ? true : editedCategory.categorySetting.type.code == 'AVG' "
+                   :class="editedCategory.categorySetting.type.code != 'CONST' || editedCategory.categorySetting.type.code != 'PERCENT' ? 'text-gray-500' : 'text-black' "
+                   class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500   text-right"
+                   :min="0" :max="editedCategory.categorySetting.type.code == 'PERCENT' ? 100 : 9000000000"/>
+      <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
+              aria-label="Search"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,18 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/src/components/settings/CategorySettingView.vue
+++ b/src/components/settings/CategorySettingView.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+
+import {Category} from "@/models/Category";
+import {onMounted, ref} from "vue";
+import {getCategories} from "@/services/categoryService";
+import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue";
+import Button from "primevue/button";
+
+const loading = ref(true);
+const categories = ref<Category[]>([]);
+
+const fetchCategories = async () => {
+  loading.value = true;
+  try {
+    console.log('loaded')
+    const result = await getCategories();
+    categories.value = result.data;
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+  loading.value = false
+}
+onMounted(async () => {
+      await fetchCategories()
+    }
+)
+
+
+</script>
+
+<template>
+  <div v-if="loading" class="flex flex-row mt-40">
+    Loading...
+  </div>
+  <div v-else class="">
+    <div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
+      <div class="flex flex-row items-center min-w-fit  justify-between">
+        <p class="text-2xl font-bold">Categories</p>
+        <router-link to="/settings/categories">
+          <Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
+        </router-link>
+      </div>
+      <div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
+        <CategoryListItem v-for="category in categories" :category="category"/>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.overflow-x-auto {
+  max-height: 60vh; /* Ограничение высоты для появления прокрутки */
+}
+</style>
--- a/src/components/settings/RecurrentSettingView.vue
+++ b/src/components/settings/RecurrentSettingView.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+
+import Button from "primevue/button";
+import {RecurrentPayment} from "@/models/Recurrent";
+import {onMounted, ref} from "vue";
+import {getRecurrentPayments} from "@/services/recurrentService";
+
+const loading = ref(true);
+
+const recurrentPayments = ref<RecurrentPayment[]>([]);
+const fetchRecurrentPayments = async () => {
+  loading.value = true;
+  try {
+    console.log('loaded')
+    const result = await getRecurrentPayments();
+    recurrentPayments.value = result.data;
+  } catch (error) {
+    console.error('Error fetching recurrent payments:', error);
+  }
+  loading.value = false
+}
+
+onMounted(async () => {
+  await fetchRecurrentPayments()
+})
+
+</script>
+
+<template>
+  <div v-if="loading" class="flex flex-row mt-40">
+    Loading...
+  </div>
+  <div v-else class="">
+    <div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
+      <div class="flex flex-row items-center min-w-fit  justify-between">
+        <p class="text-2xl font-bold">Recurrent operations</p>
+        <router-link to="/settings/recurrents">
+          <Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
+        </router-link>
+      </div>
+      <div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
+        <div v-for="recurrent in recurrentPayments"
+             class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit  max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
+
+
+          <div class="flex flex-row  items-center p-x-4 gap-4">
+            <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ recurrent.category.icon }}</p>
+            <div class="flex flex-col items-start justify-items-start w-full">
+              <p class="font-bold">{{ recurrent.name }}</p>
+              <p class="font-light">{{ recurrent.description }}</p>
+            </div>
+          </div>
+          <div class="flex flex-col items-center p-x-4 justify-items-end text-end ">
+            <p :class="recurrent.category.type.code == 'EXPENSE' ? 'text-red-400' : 'text-green-400' " class=" font-bold">- {{ recurrent.amount }} руб.</p>
+            <p class="text-end"> {{ recurrent.atDay }} числа</p>
+            <!--            <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>-->
+            <!--            <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>-->
+          </div>
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/settings/SettingsView.vue
+++ b/src/components/settings/SettingsView.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import CategorySettingView from "@/components/settings/CategorySettingView.vue";
+import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue";
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full ">
+    <h1 class="text-2xl font-bold">Settings</h1>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4  h-full w-full px-6">
+        <CategorySettingView />
+        <RecurrentSettingView />
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/settings/categories/CategoriesList.vue
+++ b/src/components/settings/categories/CategoriesList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div v-if="loading">
+
+  </div>
+  <div v-else class="flex flex-col bg-gray-100 dark:bg-gray-800 h-screen p-4">
+    <!-- Заголовок и кнопка добавления категории -->
+    <div class="flex flex-row justify-between  bg-gray-100">
+      <h2 class="text-5xl font-bold">Categories</h2>
+      <Button label="Add Category" icon="pi pi-plus" class="p-button-success" @click="openCreateDialog(null)"/>
+    </div>
+
+    <!-- Поле для поиска -->
+    <div class="my-4 w-full">
+      <span class="p-input-icon-left flex flex-row gap-2  items-center ">
+        <i class="pi pi-search"></i>
+        <InputText v-model="searchTerm" placeholder="Search categories..." class="w-full"/>
+      </span>
+    </div>
+
+    <!-- Переключатель категорий (доходы/расходы) -->
+    <div class="card flex sm:hidden justify-center mb-4">
+      <SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
+                    aria-labelledby="category-switch"/>
+    </div>
+
+    <!-- Список категорий с прокруткой для больших экранов -->
+    <div class="flex">
+      <div class="hidden sm:grid grid-cols-2 gap-x-10 w-full h-full justify-items-center overflow-y-auto">
+        <!-- Категории доходов -->
+        <div class="grid  h-full w-full  min-w-fit overflow-y-auto">
+          <div class=" gap-4    ">
+            <div class="flex flex-row gap-2 ">
+              <h3 class="text-2xl">Income Categories</h3>
+              <Button icon="pi pi-plus" rounded outlined class="p-button-success" @click="openCreateDialog('INCOME')"/>
+            </div>
+          </div>
+          <div class="  overflow-y-auto   mt-2 space-y-2 px-2">
+            <CategoryListItem
+                class=""
+                v-for="category in filteredIncomeCategories"
+                :key="category.id"
+                :category="category"
+                v-bind="category"
+                @open-edit="openEdit"
+                @delete-category="deleteCat"
+            />
+          </div>
+        </div>
+
+        <!-- Категории расходов -->
+        <div class="grid h-full w-full  min-w-fit overflow-y-auto">
+          <div class=" gap-4 justify-between  ">
+            <div class="flex flex-row gap-2">
+              <h3 class="text-2xl">Expense Categories</h3>
+              <Button icon="pi pi-plus" rounded outlined class="p-button-success !hover:bg-green-600"
+                      @click="openCreateDialog('EXPENSE')"/>
+            </div>
+          </div>
+          <div class=" overflow-y-auto  pb-10 mt-2 space-y-2 px-2">
+            <CategoryListItem
+                v-for="category in filteredExpenseCategories"
+                :key="category.id"
+                :category="category"
+                v-bind="category"
+                @open-edit="openEdit"
+                @delete-category="deleteCat"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Для маленьких экранов -->
+    <div class="flex sm:hidden flex-wrap rounded w-full">
+      <CategoryListItem
+          v-for="category in filteredCategories"
+          :key="category.id"
+          :category="category"
+          v-bind="category"
+          class="mt-2"
+          @open-edit="openEdit"
+          @delete-category="deleteCat"
+      />
+    </div>
+
+    <CreateCategoryModal
+        :show="isDialogVisible"
+        :categoryTypes="categoryTypes"
+        :selectedCategoryType="selectedCategoryType"
+        :category="editingCategory"
+        @saveCategory="saveCategory"
+        @close-modal="closeCreateDialog"
+        @update:visible="closeCreateDialog"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, nextTick, onMounted, ref, watch} from 'vue';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import SelectButton from 'primevue/selectbutton';
+import CreateCategoryModal from './CreateCategoryModal.vue';
+import CategoryListItem from '@/components/settings/categories/CategoryListItem.vue';
+import {Category, CategoryType} from '@/models/Category';
+import {
+  createCategory,
+  deleteCategory,
+  getCategories,
+  getCategoryTypes,
+  updateCategory
+} from "@/services/categoryService";
+
+export default {
+  components: {
+    Button,
+    InputText,
+    SelectButton,
+    CreateCategoryModal,
+    CategoryListItem,
+  },
+  setup() {
+    const loading = ref(true);
+    const entireCategories = ref<Category[]>([]);
+    const expenseCategories = ref<Category[]>([]);
+    const incomeCategories = ref<Category[]>([]);
+    const editingCategory = ref<Category | null>(null);
+    const isDialogVisible = ref(false);
+
+    const fetchCategories = async () => {
+      loading.value = true
+      try {
+        const response = await getCategories();
+        entireCategories.value = response.data
+        expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
+        incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
+      } catch (error) {
+        console.error('Error fetching categories:', error);
+      }
+      loading.value = false
+    };
+
+    const categoryTypes = ref<CategoryType[]>([]);
+    const selectedCategoryType = ref<CategoryType | null>(null);
+    const fetchCategoryTypes = async () => {
+      loading.value = true
+      try {
+        const response = await getCategoryTypes();
+        categoryTypes.value = response.data;
+        selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
+      } catch (error) {
+        console.error('Error fetching category types:', error);
+      }
+      loading.value = false
+    };
+
+    const searchTerm = ref('');
+
+    const filteredExpenseCategories = computed(() =>
+        expenseCategories.value.filter(category =>
+            category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
+        )
+    );
+
+    const filteredIncomeCategories = computed(() =>
+        incomeCategories.value.filter(category =>
+            category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
+        )
+    );
+
+    const filteredCategories = computed(() => {
+      if (selectedCategoryType.value?.code === 'EXPENSE') {
+        return filteredExpenseCategories.value;
+      } else {
+        return filteredIncomeCategories.value;
+      }
+    });
+
+    const openCreateDialog = (categoryType: CategoryType | null = null) => {
+      if (categoryType) {
+        selectedCategoryType.value = categoryType;
+      } else if (editingCategory.value) {
+        selectedCategoryType.value = editingCategory.value.type;
+      } else {
+        selectedCategoryType.value = categoryTypes.value.find(category => category.code === 'EXPENSE');
+      }
+      isDialogVisible.value = true;
+    };
+
+    const closeCreateDialog = () => {
+      isDialogVisible.value = false;
+      editingCategory.value = null; // Сбрасываем категорию при закрытии
+    };
+
+    const saveCategory = async (newCategory: Category) => {
+      if (newCategory.id) {
+        await updateCategory(newCategory.id, newCategory);
+      } else {
+        await createCategory(newCategory);
+      }
+      await fetchCategories()
+      closeCreateDialog();
+    };
+
+    const deleteCat = async (categoryId: number) => {
+      await deleteCategory(categoryId);
+      await fetchCategories();
+    }
+
+    const openEdit = (category: Category) => {
+      editingCategory.value = category;
+      nextTick(() => {
+        openCreateDialog(category.type); // Обновляем форму для редактирования
+      });
+    };
+
+    watch(editingCategory, (newCategory) => {
+      if (newCategory) {
+        selectedCategoryType.value = newCategory.type; // Обновляем тип при редактировании
+      }
+    });
+
+    onMounted(async () => {
+      await fetchCategories();
+      await fetchCategoryTypes();
+      loading.value = false;
+    });
+
+    return {
+      expenseCategories,
+      incomeCategories,
+      selectedCategoryType,
+      categoryTypes,
+      searchTerm,
+      filteredExpenseCategories,
+      filteredIncomeCategories,
+      filteredCategories,
+      isDialogVisible,
+      openCreateDialog,
+      closeCreateDialog,
+      saveCategory,
+      deleteCat,
+      openEdit,
+      editingCategory,
+      loading,
+    };
+  },
+};
+</script>
+
+
+<style scoped>
+/* Прокрутка для категорий */
+.overflow-y-auto {
+  max-height: 80vh; /* Ограничение высоты для появления прокрутки */
+}
+</style>
--- a/src/components/settings/categories/CategoryListItem.vue
+++ b/src/components/settings/categories/CategoryListItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Category } from "@/models/Category";
+import { PropType } from "vue";
+import Button from "primevue/button";
+
+// Определение входных параметров (props)
+const props = defineProps({
+  category: { type: Object as PropType<Category>, required: true }
+});
+
+// Определение событий (emits)
+const emit = defineEmits(["open-edit", "delete-category"]);
+
+// Функция для открытия редактора категории
+const openEdit = () => {
+  emit("open-edit", props.category); // Использование события для открытия редактора
+};
+
+// Функция для удаления категории
+const deleteCategory = () => {
+  console.log('deleteCategory ' + props.category?.id);
+  emit("delete-category", props.category.id); // Использование события для удаления категории
+};
+
+</script>
+
+<template>
+  <div class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit  max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
+    <div class="flex flex-row  items-center p-x-4 gap-4">
+      <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
+      <div class="flex flex-col items-start justify-items-start w-full">
+        <p class="font-bold">{{ category.name }}</p>
+        <p class="font-light">{{ category.description }}</p>
+      </div>
+    </div>
+    <div class="flex flex-row items-center p-x-4 gap-2  ">
+      <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>
+      <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Внешний вид компонента */
+</style>
--- a/src/components/settings/categories/CreateCategoryModal.vue
+++ b/src/components/settings/categories/CreateCategoryModal.vue
@@ -0,0 +1,171 @@
+<template>
+  <Dialog :visible="show" modal :header="isEditing ? 'Edit Category' : 'Create New Category'" :closable="false"
+          class="!w-1/3">
+    <div class="flex justify-center gap-4">
+      <Button rounded outlined @click="toggleEmojiPicker" class=" flex justify-center !rounded-full !text-4xl !p-4"
+              size="large" :label="icon"/>
+    </div>
+
+    <div
+        class="absolute pt-1 border rounded-lg shadow-2xl border-gray-300 bg-white grid grid-cols-6 gap-4 h-40 z-50 ml-3 mt-1 overflow-scroll"
+        v-if="showEmojiPicker">
+      <Button v-for="emoji in emojis" class="!p-4" @click="selectEmoji(emoji)" :label="emoji" text/>
+    </div>
+
+    <!-- SelectButton для выбора типа категории -->
+    <div class="flex justify-center mt-4">
+      <SelectButton v-model="categoryType" :options="categoryTypes" optionLabel="name" />
+    </div>
+
+    <!-- Поля для создания/редактирования категории -->
+    <label for="newCategoryName">Category Name:</label>
+    <input v-model="name" type="text" id="newCategoryName"/>
+
+    <label for="newCategoryDesc">Category Description:</label>
+    <input v-model="description" type="text" id="newCategoryDesc"/>
+
+    <!-- Кнопки -->
+    <div class="button-group">
+      <button @click="saveCategory" class="create-category-btn">{{ isEditing ? 'Save' : 'Create' }}</button>
+      <button @click="closeModal" class="close-modal-btn">Cancel</button>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts">
+import {ref, watch, computed,  PropType} from 'vue';
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import SelectButton from "primevue/selectbutton";
+import {Category, CategoryType} from '@/models/Category';
+
+export default {
+  components: {
+    Dialog,
+    Button, SelectButton
+  },
+  props: {
+    show: Boolean,
+    categoryTypes: Object as PropType<CategoryType[]>,
+    category: Object as PropType<Category | null>, // Категория для редактирования (null, если создание)
+  },
+  emits: ['saveCategory', 'close-modal'],
+  setup(props, {emit}) {
+    const icon = ref('🐱');
+    const name = ref('');
+    const description = ref('');
+    const showEmojiPicker = ref(false);
+    const categoryType = ref(props.category?.type || props.categoryTypes[0]); // Тип по умолчанию
+    const isEditing = computed(() => !!props.category); // Если есть категория, значит редактирование
+
+
+    // Если мы редактируем категорию, заполняем поля данными
+    watch(() => props.category, (newCategory) => {
+      if (newCategory) {
+        name.value = newCategory.name;
+        description.value = newCategory.description;
+        icon.value = newCategory.icon;
+        categoryType.value = newCategory.type;
+      } else {
+        resetForm(); // Сбрасываем форму, если не редактируем
+      }
+    });
+
+    const emojis = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '😍', '🥰', '😘'];
+
+    const toggleEmojiPicker = () => {
+      showEmojiPicker.value = !showEmojiPicker.value;
+    };
+
+    const selectEmoji = (emoji: string) => {
+      icon.value = emoji;
+      showEmojiPicker.value = false;
+    };
+
+    const saveCategory = () => {
+      const categoryData = new Category(categoryType.value, name.value, description.value, icon.value);
+      if (isEditing.value && props.category) {
+        categoryData.id = props.category.id; // Сохраняем ID при редактировании
+      }
+      emit('saveCategory', categoryData);
+      resetForm();
+      closeModal();
+    };
+
+    const closeModal = () => {
+      emit('close-modal');
+      resetForm();
+    };
+
+    const resetForm = () => {
+      name.value = '';
+      description.value = '';
+      icon.value = '🐱';
+      categoryType.value = 'EXPENSE';
+      showEmojiPicker.value = false;
+    };
+
+
+    return {
+      icon,
+      name,
+      description,
+      showEmojiPicker,
+      categoryType,
+      emojis,
+      toggleEmojiPicker,
+      selectEmoji,
+      saveCategory,
+      closeModal,
+      isEditing
+    };
+  }
+};
+</script>
+
+<style scoped>
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+.button-group {
+  display: flex;
+  justify-content: space-between;
+}
+
+.create-category-btn {
+  background-color: #1abc9c;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.create-category-btn:hover {
+  background-color: #16a085;
+}
+
+.close-modal-btn {
+  background-color: #e74c3c;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.close-modal-btn:hover {
+  background-color: #c0392b;
+}
+</style>
--- a/src/components/settings/recurrent/CreateRecurrentModal.vue
+++ b/src/components/settings/recurrent/CreateRecurrentModal.vue
@@ -0,0 +1,233 @@
+<template>
+  <Dialog :visible="show" modal :header="isEditing ? 'Edit Recurrent Payment' : 'Create Recurrent Payment'"
+          :closable="true" class="!w-1/3">
+    <div v-if="loading">
+      Loading...
+    </div>
+    <div v-else class="p-fluid flex flex-col gap-6 w-full py-6 items-start">
+      <!-- Название -->
+      <FloatLabel class="w-full">
+        <label for="paymentName">Payment Name</label>
+        <InputText v-model="name" id="paymentName" class="!w-full"/>
+      </FloatLabel>
+
+      <!-- Категория -->
+      <div class="relative w-full justify-center justify-items-center ">
+        <div class="flex flex-col justify-items-center gap-2">
+          <SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
+                        aria-labelledby="basic"
+                        @change="categoryTypeChanged(selectedCategoryType.code)" class="justify-center"/>
+          <button class="border border-gray-300 rounded-lg w-full z-50"
+                  @click="isCategorySelectorOpened = !isCategorySelectorOpened">
+            <div class="flex flex-row  items-center pe-4 py-2 gap-4">
+              <div class="flex flex-row justify-between w-full px-4">
+                <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ selectedCategory.icon }}</p>
+                <div class="flex flex-col items-start justify-items-start justify-around w-full">
+                  <p class="font-bold text-start">{{ selectedCategory.name }}</p>
+                  <p class="font-light line-clamp-1 items-start text-start">{{ selectedCategory.description }}</p>
+                </div>
+              </div>
+              <div>
+              <span :class="{'rotate-90': isCategorySelectorOpened}"
+                    class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <!-- Анимированное открытие списка категорий -->
+        <div v-show="isCategorySelectorOpened"
+             class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x  rounded-b-lg bg-white shadow-lg transition-all duration-500"
+             :class="{ 'max-h-0': !isCategorySelectorOpened, 'max-h-[500px]': isCategorySelectorOpened }">
+          <div class="grid grid-cols-2  mt-2">
+            <button v-for="category in selectedCategoryType.code == 'EXPENSE' ? expenseCategories : incomeCategories"
+                    :key="category.id" class="border rounded-lg mx-2 mb-2"
+                    @click="selectCategory(category)">
+              <div class="flex flex-row justify-between w-full px-2">
+                <p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
+                <div class="flex flex-col items-start justify-items-start justify-around w-full">
+                  <p class="font-bold text-start">{{ category.name }}</p>
+                  <p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Описание -->
+      <FloatLabel class="w-full">
+        <label for="description">Description</label>
+        <Textarea v-model="description" id="description" rows="3"/>
+      </FloatLabel>
+
+      <!-- Дата повторения (выпадающий список) -->
+      <div class="w-full relative">
+        <button class="border border-gray-300 rounded-lg w-full z-50"
+                @click="isDaySelectorOpened = !isDaySelectorOpened">
+          <div class="flex flex-row items-center pe-4 py-2 gap-4">
+            <div class="flex flex-row justify-between w-full px-4">
+              <p class="font-bold">Повторять каждый {{ repeatDay || 'N' }} день месяца</p>
+            </div>
+            <div>
+              <span :class="{'rotate-90': isDaySelectorOpened}"
+                    class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
+            </div>
+          </div>
+        </button>
+
+        <!-- Анимированное открытие списка дней -->
+        <div v-show="isDaySelectorOpened"
+             class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
+             :class="{ 'max-h-0': !isDaySelectorOpened, 'max-h-[500px]': isDaySelectorOpened }">
+          <div class="grid grid-cols-7 p-2">
+            <button v-for="day in days" :key="day" class=" border"
+                    @click="selectDay(day)">
+              {{ day }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Сумма -->
+      <InputGroup class="w-full">
+        <InputGroupAddon>₽</InputGroupAddon>
+        <InputNumber v-model="amount" placeholder="Amount"/>
+        <InputGroupAddon>.00</InputGroupAddon>
+      </InputGroup>
+
+      <!-- Кнопки -->
+      <div class="flex justify-content-end gap-2 mt-4">
+        <Button label="Save" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
+        <Button label="Cancel" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {ref, watch, computed, defineEmits} from 'vue';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Textarea from "primevue/textarea";
+
+import Dialog from 'primevue/dialog';
+import FloatLabel from 'primevue/floatlabel';
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from "primevue/inputgroupaddon";
+import SelectButton from 'primevue/selectbutton';
+import {saveRecurrentPayment} from "@/services/recurrentService";
+
+const props = defineProps({
+  show: Boolean,                  // Показать/скрыть модальное окно
+  expenseCategories: Array,               // Внешние данные для списка категорий
+  incomeCategories: Array,               // Внешние данные для списка категорий
+  categoryTypes: Array,
+  payment: Object | null           // Для редактирования существующего платежа
+})
+
+const emits = defineEmits(["open-edit", "save-payment", "close-modal"]);
+
+const loading = ref(false)
+// Поля для формы
+const name = ref('');
+const selectedCategoryType = ref(props.payment ? props.payment.type : props.categoryTypes[0]);
+const selectedCategory = ref(selectedCategoryType.code == 'EXPESE' ? props.expenseCategories[0] : props.incomeCategories[0]);
+
+const categoryTypeChanged = (code) => {
+
+  selectedCategory.value = code == "EXPENSE" ? props.expenseCategories[0] : props.incomeCategories[0];
+}
+
+const description = ref('');
+const repeatDay = ref<number | null>(null);
+const amount = ref<number | null>(null);
+
+// Открытие/закрытие списка категорий
+const isCategorySelectorOpened = ref(false);
+const isDaySelectorOpened = ref(false);
+
+// Список дней (1–31)
+const days = Array.from({length: 31}, (_, i) => i + 1);
+
+// Выбор дня
+const selectDay = (day: number) => {
+  repeatDay.value = day;
+  isDaySelectorOpened.value = false;
+};
+
+// Выбор категории
+const selectCategory = (category) => {
+  isCategorySelectorOpened.value = false;
+  selectedCategory.value = category;
+};
+
+// Определение, редактируем ли мы существующий платеж
+const isEditing = computed(() => !!props.payment);
+
+// Слушаем изменения, если редактируем существующий платеж
+watch(() => props.payment, (newPayment) => {
+  if (newPayment) {
+    name.value = newPayment.name;
+    selectedCategory.value = newPayment.category;
+    description.value = newPayment.description;
+    repeatDay.value = newPayment.repeatDay;
+    amount.value = newPayment.amount;
+  } else {
+    resetForm();
+  }
+});
+
+// Функция для сохранения платежа
+const savePayment = async () => {
+  loading.value = true;
+  const paymentData = {
+    name: name.value,
+    category: selectedCategory.value,
+    description: description.value,
+    atDay: repeatDay.value,
+    amount: amount.value
+  };
+
+  if (isEditing.value && props.payment) {
+    paymentData.id = props.payment.id; // Если редактируем, сохраняем ID
+  }
+  try {
+    await saveRecurrentPayment(paymentData)
+    loading.value = false
+    resetForm();
+  } catch (error) {
+    console.error('Error saving payment:', error);
+  }
+  emits('save-payment', paymentData);
+  resetForm();
+  closeModal();
+};
+
+// Закрытие окна и сброс формы
+const closeModal = () => {
+  emits('close-modal');
+  resetForm();
+};
+
+const resetForm = () => {
+  name.value = '';
+  selectedCategory.value = props.expenseCategories[0];
+  description.value = '';
+  repeatDay.value = null;
+  amount.value = null;
+};
+</script>
+
+<style scoped>
+/* Плавная анимация поворота */
+.rotate-90 {
+  transform: rotate(90deg);
+}
+
+/* Для анимации открытия высоты */
+.overflow-hidden {
+  overflow: hidden;
+}
+</style>
--- a/src/components/settings/recurrent/RecurrentList.vue
+++ b/src/components/settings/recurrent/RecurrentList.vue
@@ -0,0 +1,138 @@
+<!-- RecurrentPaymentsList.vue -->
+<template>
+  <div v-if="loading" class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
+    Loading...
+  </div>
+  <div v-else class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
+    <!-- Заголовок -->
+    <h1 class="text-4xl font-extrabold mb-8 text-gray-800">Recurrent Payments</h1>
+
+    <!-- Список рекуррентных платежей -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4">
+      <RecurrentListItem
+          v-for="payment in recurrentPayments"
+          :key="payment.id"
+          :payment="payment"
+          @edit-payment="editPayment"
+          @delete-payment="deletePayment"
+      />
+      <div>
+        <div
+            class="recurrent-card bg-white shadow-lg rounded-lg p-6 w-full transition duration-300 transform hover:scale-105">
+          <div class="flex justify-between  items-center">
+            <div class="flex items-center w-full justify-center gap-4" style="height: 160px;">
+
+              <Button text class="flex-col" @click="toggleModal">
+                <i class="pi pi-plus-circle" style="font-size: 2.5rem"></i>
+                <p>Add new</p>
+              </Button>
+              <CreateRecurrentModal
+                  :show="showModal"
+                  :expenseCategories="expenseCategories"
+                  :incomeCategories="incomeCategories"
+                  :categoryTypes="categoryTypes"
+                  @save-payment="savePayment"
+                  @close-modal="toggleModal"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
+// import RecurrentPaymentCard from './RecurrentPaymentCard.vue';
+import RecurrentListItem from "@/components/settings/recurrent/RecurrentListItem.vue";
+import Button from "primevue/button";
+import {RecurrentPayment} from "@/models/Recurrent";
+import {getRecurrentPayments} from "@/services/recurrentService";
+import CreateRecurrentModal from "@/components/settings/recurrent/CreateRecurrentModal.vue";
+import {Category, CategoryType} from "@/models/Category";
+import {getCategories, getCategoryTypes} from "@/services/categoryService";
+
+const loading = ref(true);
+
+const showModal = ref(false);
+
+const toggleModal = () => {
+  showModal.value = !showModal.value;
+}
+
+
+const recurrentPayments = ref<RecurrentPayment[]>([]);
+const fetchRecurrentPayments = async () => {
+  // loading.value = true;
+  try {
+    console.log('loaded')
+    const result = await getRecurrentPayments();
+    recurrentPayments.value = result.data;
+  } catch (error) {
+    console.error('Error fetching recurrent payments:', error);
+  }
+  loading.value = false
+}
+
+const categories = ref<Category[]>([]);
+const expenseCategories = ref<Category[]>([]);
+const incomeCategories = ref<Category[]>([]);
+const categoryTypes = ref<CategoryType[]>([]);
+const fetchCategories = async () => {
+  loading.value = true
+  try {
+    const categoriesResponse = await getCategories();
+    const categoryTypesResponse = await getCategoryTypes();
+    categories.value = categoriesResponse.data
+    expenseCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'EXPENSE');
+    incomeCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'INCOME');
+    categoryTypes.value = categoryTypesResponse.data
+
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+  loading.value = false
+};
+
+const savePayment = async () => {
+
+  // loading.value = true;
+  try {
+    // await saveRecurrentPayment(payment);
+    await fetchRecurrentPayments();
+    loading.value = false
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+
+}
+
+
+// Обработчики событий
+const editPayment = (payment: any) => {
+  console.log('Edit payment:', payment);
+};
+
+const deletePayment = (payment: any) => {
+  console.log('Delete payment:', payment);
+};
+
+onMounted(async () => {
+  await fetchRecurrentPayments()
+  await fetchCategories()
+})
+</script>
+
+<style scoped>
+.grid {
+  gap: 2rem;
+}
+
+.text-gray-800 {
+  color: #1f2937;
+}
+
+.bg-gray-100 {
+  background-color: #f3f4f6;
+}
+</style>
--- a/src/components/settings/recurrent/RecurrentListItem.vue
+++ b/src/components/settings/recurrent/RecurrentListItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <div :class="payment.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' "
+       class="recurrent-card bg-gradient-to-r  shadow-xl rounded-lg p-6 w-full hover:shadow-2xl transition duration-300 transform hover:scale-105">
+    <div class="flex flex-col gap-5 justify-between items-start">
+      <!-- Дата и Сумма -->
+      <div class="flex flex-row justify-between w-full items-center">
+        <div class="text-gray-500">
+          <strong class="text-3xl text-green-600">{{ payment.atDay }} </strong> числа
+        </div>
+
+        <div class="flex items-center gap-4">
+          <Button icon="pi pi-pencil" class="p-button-rounded p-button-text p-button-sm" @click="editPayment"/>
+          <Button icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger p-button-sm"
+                  @click="deletePayment"/>
+        </div>
+
+
+
+      </div>
+
+      <!-- Категория и Описание -->
+      <div class="flex items-center gap-4 w-full justify-between">
+        <!-- Иконка категории -->
+
+        <!-- Информация о платеже -->
+        <div class="flex flex-row">
+          <div class="flex items-center gap-4">
+            <span class="text-4xl">{{ payment.category.icon }}</span>
+          </div>
+          <div class="flex flex-col">
+          <h2 class="text-xl font-semibold text-gray-800">{{ payment.name }}</h2>
+          <p class="text-sm text-gray-500 line-clamp-1">{{ payment.description }}</p>
+          </div>
+        </div>
+        <div
+            :class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700'"
+            class="text-2xl font-bold line-clamp-1 ">{{ formatAmount(payment.amount) }} ₽
+        </div>
+      </div>
+
+      <!-- Действия -->
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, defineEmits, PropType} from 'vue';
+import Button from 'primevue/button';
+import {RecurrentPayment} from '@/models/Recurrent';
+
+const props = defineProps({
+  payment: {
+    type: Object as PropType<RecurrentPayment>,
+    required: true,
+  },
+});
+
+const formatAmount = (amount: number) => {
+  return new Intl.NumberFormat('ru-RU').format(amount);
+};
+
+const emit = defineEmits(['edit-payment', 'delete-payment']);
+
+const editPayment = () => {
+  emit('edit-payment', props.payment);
+};
+
+const deletePayment = () => {
+  emit('delete-payment', props.payment);
+};
+</script>
+
+<style scoped>
+.recurrent-card {
+  transition: all 0.3s ease;
+  //background: linear-gradient(135deg, #f0fff4, #c6f6d5);
+}
+
+.recurrent-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+
+</style>
--- a/src/components/transactions/TransactionList.vue
+++ b/src/components/transactions/TransactionList.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+
+
+import {computed, onMounted, ref} from "vue";
+import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import InputText from "primevue/inputtext";
+import {getTransactions} from "@/services/transactionService";
+import {Transaction} from "@/models/Transaction";
+import {useRoute} from "vue-router";
+
+const loading = ref(false);
+const searchText = ref("");
+
+const route = useRoute()
+
+
+
+
+const fetchCategories = async () => {
+  loading.value = true
+  try {
+    const response = await getTransactions('INSTANT');
+    transactions.value = response.data
+    console.log(transactions.value)
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+  loading.value = false
+}
+
+
+const transactions = ref<Transaction[]>([])
+
+const filteredTransactions = computed(() => {
+  if (searchText.value.length === 0) {
+    return transactions.value;  // Return the full list when there's no search text
+  } else {
+    return transactions.value.filter(transaction => {
+      const search = searchText.value.toLowerCase();
+      return (
+          transaction.transaction.comment.toLowerCase().includes(search) ||
+          transaction.transaction.category.name.toLowerCase().includes(search)
+      );
+    });
+  }
+});
+
+onMounted(async () => {
+  await fetchCategories();
+})
+
+</script>
+
+<template>
+  <div class="p-4">
+    <!-- Заголовок -->
+    <h2 class="text-4xl mb-6  mt-14 font-bold">Transaction list</h2>
+    <div class="flex flex-col gap-2">
+      <IconField>
+        <InputIcon class="pi pi-search"/>
+        <InputText v-model="searchText" placeholder="Search"></InputText>
+      </IconField>
+      {{route}}
+      <div class="mt-4">
+        <BudgetTransactionView class="mb-2" v-for="transaction in filteredTransactions" :transaction="transaction"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,22 @@
+import './assets/main.css'
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import PrimeVue from 'primevue/config';
+import 'primeicons/primeicons.css'
+import Aura from '@primevue/themes/aura';
+import router from './router';
+import Ripple from "primevue/ripple";
+import ToastService from 'primevue/toastservice'
+
+const app = createApp(App);
+app.use(router);
+app.use(ToastService);
+app.directive('ripple', Ripple);
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+});
+
+app.mount('#app');
--- a/src/models/Budget.ts
+++ b/src/models/Budget.ts
@@ -0,0 +1,28 @@
+import {Transaction} from "@/models/Transaction";
+import {Category, CategorySetting} from "@/models/Category";
+
+export class BudgetInfo {
+    budget: Budget
+    plannedExpenses: [Transaction]
+    plannedIncomes: [Transaction]
+    transactions: [Transaction]
+    transactionCategoriesSums: []
+    totalIncomes: number
+    totalExpenses: number
+    chartData: [[]]
+    unplannedCategories: [BudgetCategory]
+}
+
+
+export class Budget {
+    id: number
+    name: string
+    dateFrom: Date
+    dateTo: Date
+    createdAt: Date
+}
+
+export class BudgetCategory {
+    category: Category;
+    categorySetting: CategorySetting
+}
--- a/src/models/Category.ts
+++ b/src/models/Category.ts
@@ -0,0 +1,38 @@
+export class CategoryType {
+    code: string;
+    name: string;
+}
+
+export class CategorySettingType {
+    code: string;
+    name: string;
+}
+
+
+export class Category {
+    id: number = null;
+    type: CategoryType;
+    name: string;
+    description: string;
+    icon: string;
+
+    constructor(type: CategoryType, name: string, description: string, icon: string,) {
+        this.type = type;
+        this.name = name;
+        this.description = description;
+        this.icon = icon;
+    }
+
+    // Метод, который возвращает краткое описание
+    getSummary(): string {
+        return `${this.name}: ${this.description}`;
+    }
+}
+
+
+
+export class CategorySetting {
+    type: CategorySettingType
+    settingValue: number
+    value: number
+}
--- a/src/models/Recurrent.ts
+++ b/src/models/Recurrent.ts
@@ -0,0 +1,11 @@
+import {Category} from "@/models/Category";
+
+export class RecurrentPayment {
+    public id: number;
+    public atDay: number;
+    public category: Category;
+    public name: string;
+    public description: string;
+    public amount: number;
+    public createdAt: Date;
+}
--- a/src/models/Transaction.ts
+++ b/src/models/Transaction.ts
@@ -0,0 +1,24 @@
+import {Category} from "@/models/Category";
+
+export class Transaction {
+    id: number;
+    transactionType: TransactionType;
+    category: Category;
+    comment: string;
+    date: Date;
+    amount: number
+    isDone: boolean;
+}
+
+export class TransactionCategoriesSum{
+    category: Category;
+    sum: number
+}
+
+
+
+
+export class TransactionType {
+    code: string;
+    name: string;
+}
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@@ -0,0 +1,13 @@
+// src/plugins/axios.ts
+import axios from 'axios';
+
+// Создание экземпляра axios с базовым URL
+const apiClient = axios.create({
+    baseURL: 'http://localhost:8000/api/v1',
+    headers: {
+        'Content-Type': 'application/json',
+
+    }
+});
+
+export default apiClient;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,30 @@
+import {createRouter, createWebHistory} from 'vue-router';
+import CategoriesList from '@/components/settings/categories/CategoriesList.vue';
+import CreateCategoryModal from "@/components/settings/categories/CreateCategoryModal.vue";
+import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue"; // Импортируем новый компонент
+import BudgetList from "../components/budgets/BudgetList.vue";
+import BudgetView from "@/components/budgets/BudgetView.vue";
+import SettingsView from "@/components/settings/SettingsView.vue";
+import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";
+import TransactionList from "@/components/transactions/TransactionList.vue";
+
+const routes = [
+
+    {path: '/', name: 'Budgets', component: BudgetList},
+    {path: '/budgets', name: 'Budgets', component: BudgetList},
+    {path: '/budgets/:id', name: 'BudgetView', component: BudgetView},
+    {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList},
+    // {path: '/transactions/create', name: 'Transaction List', component: TransactionList},
+    {path: '/settings/', name: 'Settings', component: SettingsView},
+    {path: '/settings/categories', name: 'Categories', component: CategoriesList},
+    {path: '/settings/recurrents', name: 'Recurrent operations list', component: RecurrentList},
+    {path: '/settings/categories/create', name: "Categories Creation", component: CreateCategoryModal},// Добавляем новый маршрут
+    {path: '/settings/categories/one', name: "Categories Creation", component: CategoryListItem}// Добавляем новый маршрут
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
--- a/src/services/budgetsService.ts
+++ b/src/services/budgetsService.ts
@@ -0,0 +1,27 @@
+import apiClient from '@/plugins/axios';
+import {BudgetCategory} from "@/models/Budget";
+// Импортируете настроенный экземпляр axios
+
+export const getBudgetInfo = async (budget_id: number) => {
+    console.log('getBudgetInfo');
+    let budgetInfo = await apiClient.get('/budgets/' + budget_id);
+    budgetInfo = budgetInfo.data;
+
+    budgetInfo.plannedExpenses.forEach(e => {
+        e.date = new Date(e.date)
+    })
+
+    budgetInfo.plannedIncomes.forEach(e => {
+        e.date = new Date(e.date)
+    })
+
+    budgetInfo.transactions.forEach(e => {
+        e.date = new Date(e.date)
+    })
+    return budgetInfo
+
+};
+
+export const updateBudgetCategoryRequest = async (budget_id, category: BudgetCategory) => {
+    await apiClient.put('/budgets/' + budget_id + '/category', category);
+}
--- a/src/services/categoryService.ts
+++ b/src/services/categoryService.ts
@@ -0,0 +1,25 @@
+// src/services/categoryService.ts
+import apiClient from '@/plugins/axios';
+import {Category} from "@/models/Category";  // Импортируете настроенный экземпляр axios
+
+export const getCategories = async (type = null) => {
+
+     type = type ? type : ''
+    return await apiClient.get('/categories/?type=' + type);
+};
+
+export const getCategoryTypes = async () => {
+    return await apiClient.get('/categories/types/');
+}
+
+export const createCategory = async (category: Category) => {
+    return await apiClient.post('/categories', category);
+};
+
+export const updateCategory = async (id: number, category: any) => {
+    return await apiClient.put(`/categories/${id}`, category);
+};
+
+export const deleteCategory = async (id: number) => {
+    return await apiClient.delete(`/categories/${id}`);
+};
--- a/src/services/recurrentService.ts
+++ b/src/services/recurrentService.ts
@@ -0,0 +1,30 @@
+// src/services/recurrentyService.ts
+import apiClient from '@/plugins/axios';
+import { RecurrentPayment} from "@/models/Recurrent";  // Импортируете настроенный экземпляр axios
+
+export const getRecurrentPayments = async () => {
+    console.log('getRecurrentPayments');
+    return await apiClient.get('/recurrents/');
+};
+
+
+export const saveRecurrentPayment = async (payment: RecurrentPayment) => {
+    console.log('saveRecurrentPayment');
+    return await apiClient.post('/recurrents/', payment)
+}
+//
+// export const getCategoryTypes = async () => {
+//     return await apiClient.get('/categories/types/');
+// }
+//
+// export const createCategory = async (category: Category) => {
+//     return await apiClient.post('/categories', category);
+// };
+//
+// export const updateCategory = async (id: number, category: any) => {
+//     return await apiClient.put(`/categories/${id}`, category);
+// };
+//
+// export const deleteCategory = async (id: number) => {
+//     return await apiClient.delete(`/categories/${id}`);
+// };
--- a/src/services/transactionService.ts
+++ b/src/services/transactionService.ts
@@ -0,0 +1,49 @@
+import apiClient from '@/plugins/axios';
+import {Transaction} from "@/models/Transaction";
+import {format} from "date-fns";
+// Импортируете настроенный экземпляр axios
+
+export const getTransaction = async (transactionId: int) => {
+    return await apiClient.post(`/transactions/${transactionId}`,);
+}
+
+export const getTransactions = async (transaction_type = null, category_type = null, category_id = null) => {
+    const params = {};
+
+    // Add the parameters to the params object if they are not null
+    if (transaction_type) {
+        params.transaction_type = transaction_type;
+    }
+
+    if (category_type) {
+        params.category_type = category_type;
+    }
+
+    if (category_id) {
+        params.category_id = category_id;
+    }
+
+    // Use axios to make the GET request, passing the params as the second argument
+    return await apiClient.get('/transactions/', {
+        params: params
+    });
+}
+
+export const createTransactionRequest = async (transaction: Transaction) => {
+    transaction.date = format(transaction.date, 'yyyy-MM-dd')
+    return await apiClient.post('/transactions', transaction);
+};
+
+export const updateTransactionRequest = async (transaction: Transaction) => {
+    const id = transaction.id
+    transaction.date = format(transaction.date, 'yyyy-MM-dd')
+    return await apiClient.put(`/transactions/${id}`, transaction);
+};
+
+export const deleteTransactionRequest = async (id: number) => {
+    return await apiClient.delete(`/transactions/${id}`);
+};
+
+export const getTransactionTypes = async () => {
+    return await apiClient.get('/transactions/types/');
+}
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -0,0 +1,18 @@
+export const formatAmount = (amount: number) => {
+    return new Intl.NumberFormat('ru-RU').format(amount);
+};
+
+export const formatDate = (date) => {
+    const validDate = typeof date === 'string' ? new Date(date) : date;
+
+    // Проверяем, является ли validDate корректной датой
+    if (isNaN(validDate.getTime())) {
+        return 'Invalid Date'; // Если дата неверная, возвращаем текст ошибки
+    }
+
+    return validDate.toLocaleDateString('ru-RU', {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+    });
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            spacing: {
+                '128': '38rem',
+                '136': '54rem',
+                '15': '60px',
+            }
+        },
+    },
+    plugins: [require('tailwindcss-primeui')],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`