new version of budget view

src/components/budgets/BudgetView2.vue

@@ -25,6 +25,7 @@ import {Chart as ChartJS} from 'chart.js/auto';
 import SelectButton from "primevue/selectbutton";
 import Divider from "primevue/divider";
 import TransactionForm from "@/components/transactions/TransactionForm.vue";
+import Checkbox from "primevue/checkbox";
 
 // Зарегистрируем плагин
 ChartJS.register(ChartDataLabels);
@@ -370,8 +371,8 @@ const saveLimit = async (category) => {
 const updateLimitOnBackend = async (categoryId, newLimit) => {
   await fetch(`/api/categories/${categoryId}/limit`, {
     method: "PUT",
-    headers: { "Content-Type": "application/json" },
+    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({ limit: newLimit }),
+    body: JSON.stringify({limit: newLimit}),
   });
 };
 
@@ -873,7 +874,9 @@ onMounted(async () => {
                     <span class="font-light text-sm">+ Добавить</span>
                   </button>
 
-                  <button class="font-light text-sm" @click="catsExpanded ? expandCats(false) : expandCats(true)">{{ catsExpanded ? 'Скрыть все': 'Раскрыть все'}}</button>
+                  <button class="font-light text-sm" @click="catsExpanded ? expandCats(false) : expandCats(true)">
+                    {{ catsExpanded ? 'Скрыть все' : 'Раскрыть все' }}
+                  </button>
                 </div>
                 <ul class="space-y-2">
 
@@ -883,8 +886,10 @@ onMounted(async () => {
                       class="flex flex-col p-4 shadow-lg rounded-lg bg-white transition-transform duration-300 ">
 
                     <div class="flex flex-row justify-between w-full items-center transition-transform duration-300">
-<!--                      {{category}}-->
+                      <!--                      {{category}}-->
-                      <span class="text-lg font-bold items-center">{{ category.name.category.name }} {{category.name.icon }}</span>
+                      <span class="text-lg font-bold items-center">{{
+                          category.name.category.name
+                        }} {{ category.name.icon }}</span>
                       <div class="flex flex-row gap-4">
 
                         <span>{{
@@ -922,83 +927,91 @@ onMounted(async () => {
             </div>
             <div>
               <!-- Планируемые расходы -->
-              <div>
+              <div class="pb-4">
                 <div class="flex flex-row gap-4 items-center mb-4">
                   <h3 class="text-2xl font-bold text-rose-500 ">Расходы</h3>
                   <button @click="openDrawer('PLANNED', 'INCOME')">
                     <span class="font-light text-sm">+ Добавить</span>
                   </button>
                 </div>
-                <ul class="space-y-2">
+                <ul class="grid grid-cols-2 gap-4">
                   <li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
-                      class="flex flex-col p-4 shadow-lg rounded-lg bg-white  ">
+                      class="flex flex-col justify-between p-4 shadow-lg rounded-lg bg-white  ">
-                    <div class="flex flex-row justify-between w-full items-center">
+                    <div class="">
-                      <span class="text-2xl font-bold">{{ category.name.category.icon }} {{
-                          category.name.category.name
-                        }}</span>
-                      <div class="flex flex-row gap-4">
-
-                        <span>{{
-                            formatAmount(category.name.currentSpent)
-                          }} / </span>
-                        <!-- Если редактируемая категория — показываем input -->
-
-                        <input
-                            v-if="editingCategoryId === category.name.category.id"
-                            v-model.number="category.name.currentLimit"
-                            @blur="(category)"
-                            @keyup.enter="updateBudgetCategory(category.name)"
-                            type="number"
-                            class=" border-b  w-20 "
-                            autofocus
-                        />
-
-                        <!-- Если НЕ редактируем, показываем текст -->
-                        <span v-else @click="startEditing(category)" class="cursor-pointer hover:underline">
-      {{ formatAmount(category.name.currentLimit) }} ₽
-    </span>
-
-                        <button v-if="category.transactions.length>0" :class="{'rotate-90': expenseCategoriesState[categoryId].isOpened}"
-                                @click="expenseCategoriesState[categoryId].isOpened = !expenseCategoriesState[categoryId].isOpened">
-                          <i class="pi pi-angle-right transition-transform duration-300 text-5xl"></i>
-                        </button>
-                      </div>
-                    </div>
-
-                    <transition
-                        enter-active-class="transition ease-out duration-300"
-                        enter-from-class="opacity-0 transform -translate-y-2"
-                        enter-to-class="opacity-100 transform translate-y-0"
-                        leave-active-class="transition ease-in duration-300"
-                        leave-from-class="opacity-100 transform translate-y-0"
-                        leave-to-class="opacity-0 transform -translate-y-2"
-                    >
-                      <div v-if="expenseCategoriesState[categoryId].isOpened" class="pt-2 pl-2">
-                        <BudgetTransactionView
-                            v-for="transaction in category.transactions"
-                            :key="transaction._id"
-                            :transaction="transaction"
-                            :is-list="false"
-                            @transaction-updated="updateTransactions"
-                            @transaction-checked="updateTransactions"
-                        />
-                      </div>
-                    </transition>
-                    <div class="flex flex-col gap-0">
-<!--                      <Divider class="!p-0 !pb-1 !m-0"/>-->
                       <div class="flex flex-row justify-between w-full items-center">
-                        <span class="font-bold">🗓️ Остаток на внеплановые:</span>
+                      <span class="text-2xl font-bold line-clamp-1">{{
-                        <span class="font-bold text-lg">{{ category.name.currentLimit - category.name.currentPlanned }} ₽</span>
+                          category.name.category.icon
+                        }} {{ category.name.category.name }}</span>
+                        <div class="flex flex-row line-clamp-1">
+
+                          <span>{{ formatAmount(category.name.currentSpent) }} / </span>
+                          <!-- Если редактируемая категория — показываем input -->
+                          <input
+                              v-if="editingCategoryId === category.name.category.id"
+                              v-model.number="category.name.currentLimit"
+                              @blur="(category)"
+                              @keyup.enter="updateBudgetCategory(category.name)"
+                              type="number"
+                              class=" border-b  w-20 p-0 "
+                              autofocus
+                          />
+                          <!-- Если НЕ редактируем, показываем текст -->
+                          <span v-else @click="startEditing(category)"
+                                class=" p-0 cursor-pointer hover:underline text-left">{{
+                              formatAmount(category.name.currentLimit)
+                            }} ₽</span>
+                          <button v-if="category.transactions.length>0"
+                                  :class="{'rotate-90': expenseCategoriesState[categoryId].isOpened}"
+                                  @click="expenseCategoriesState[categoryId].isOpened = !expenseCategoriesState[categoryId].isOpened">
+                            <i class="pi pi-angle-right transition-transform duration-300 text-5xl"></i>
+                          </button>
+                        </div>
+                      </div>
+                      <transition
+                          enter-active-class="transition ease-out duration-300"
+                          enter-from-class="opacity-0 transform -translate-y-2"
+                          enter-to-class="opacity-100 transform translate-y-0"
+                          leave-active-class="transition ease-in duration-300"
+                          leave-from-class="opacity-100 transform translate-y-0"
+                          leave-to-class="opacity-0 transform -translate-y-2"
+                      >
+                        <div v-if="expenseCategoriesState[categoryId].isOpened" class="pt-2 pl-2">
+                          <BudgetTransactionView
+                              v-for="transaction in category.transactions"
+                              :key="transaction._id"
+                              :transaction="transaction"
+                              :is-list="false"
+                              @transaction-updated="updateTransactions"
+                              @transaction-checked="updateTransactions"
+                          />
+                          <div
+                              class="flex justify-between bg-white  min-w-fit  max-h-fit flex-row items-center  gap-4 w-full ">
+                            <div>
+                              <p class=" font-bold text-gray-700 dark:text-gray-400">
+                                🗓️ Остаток на внеплановые
+                              </p>
+                            </div>
+                            <div class="text-lg line-clamp-1 ">
+                              {{
+                                formatAmount(category.name.currentLimit - category.name.currentPlanned)
+                              }} ₽
+                            </div>
+                          </div>
+                        </div>
+                      </transition>
+                    </div>
+                    <div class="flex flex-col gap-0">
+                      <div class="flex flex-row justify-between w-full items-center">
+                        <span class="font-bold">🗓️ Остаток всего:</span>
+                        <span class="font-bold text-lg">{{
+                            formatAmount(category.name.currentLimit - category.name.currentSpent)
+                          }} ₽</span>
                       </div>
                     </div>
-
                   </li>
-
                 </ul>
-
               </div>
             </div>
-
           </div>
           <div class=" h-full   gap-4 flex-col row-span-6 lg:hidden ">
             <div class="flex flex-row ">
@@ -1031,16 +1044,6 @@ onMounted(async () => {
 
       </div>
     </div>
-    <!--    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"-->
-    <!--                           :transaction-type="transactionType"-->
-    <!--                           :category-type="categoryType"-->
-    <!--                           :transactions="transactions.slice(0,3)"-->
-    <!--                           @transaction-updated="updateTransactions"-->
-    <!--                           @delete-transaction="updateTransactions"-->
-    <!--                           @create-transaction="updateTransactions"-->
-    <!--                           @close-drawer="closeDrawer"-->
-
-    <!--    />-->
 
     <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"
                      :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"
@@ -1048,6 +1051,8 @@ onMounted(async () => {
                      @create-transaction="updateTransactions"/>
   </div>
 
+  <div id="footer" class="h-24 bg-gray-100"/>
+
 </template>
 
 <style scoped>