From ae840001f72989c163c2ac897bda27ac0973ee0c Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Mon, 18 Nov 2024 14:14:50 +0300
Subject: [PATCH] fixessome

---
 src/components/budgets/BudgetCategoryView.vue |  2 +-
 src/components/budgets/BudgetView.vue         | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/budgets/BudgetCategoryView.vue b/src/components/budgets/BudgetCategoryView.vue
index 0936284..f6b4869 100644
--- a/src/components/budgets/BudgetCategoryView.vue
+++ b/src/components/budgets/BudgetCategoryView.vue
@@ -86,7 +86,7 @@ watch(
       <ProgressBar :value="Number(spentPlannedRatio.toFixed(0))" class="w-full .your-parent-class"
                    :pt=" {
         value: {
-          style: spentPlannedRatio >=100 ?'background: red !important' : '',
+          style: spentPlannedRatio >100 ?'background: red !important' : spentPlannedRatio == 100 ? 'background: #FFAA33 !important':'',
         }
       }" :color="'red-200'" :show-value="false"></ProgressBar>
       <!--    <div class="z-50">{{formatAmount(spentPlannedRatio.toFixed(0))}}%</div>-->
diff --git a/src/components/budgets/BudgetView.vue b/src/components/budgets/BudgetView.vue
index ad94b06..faa23d6 100644
--- a/src/components/budgets/BudgetView.vue
+++ b/src/components/budgets/BudgetView.vue
@@ -141,6 +141,12 @@
                     </div>
 
                   </button>
+                  <div class="flex flex-col items-center w-full ">
+                    <span class="text-sm lg:text-base">Остаток на траты</span>
+                    <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                      {{ formatAmount(totalInstantIncomes - totalInstantExpenses)}} ₽
+                    </div>
+                  </div>
                   <div class="grid grid-cols-2 !gap-1 mt-4" :class="detailedShowed ? 'block' : 'hidden'">
                     <div v-for="categorySum in transactionCategoriesSums" class="flex flex-col items-center font-bold ">
                       <p class="font-light ">{{ categorySum.category.icon }} {{ categorySum.category.name }}</p>
@@ -170,7 +176,7 @@
 
                 </button>
               </div>
-              <div class="grid  grid-cols-1 gap-1 max-h-tlist overflow-y-auto pe-2">
+              <div class="flex flex-col gap-1 max-h-tlist overflow-y-auto ">
                 <BudgetTransactionView v-for="transaction in filteredTransactions" :key="transaction.id"
                                        :transaction="transaction"
                                        :is-list="true"
@@ -253,7 +259,7 @@
 
             </div>
           </div>
-          <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6 lg:hidden ">
+          <div class=" h-full   gap-4 flex-col row-span-6 lg:hidden ">
             <div class="flex flex-row ">
               <h3 class="text-2xl font-bold">Транзакции</h3>
               <button @click="openDrawer('INSTANT', 'EXPENSE')">
@@ -261,14 +267,14 @@
                 <span class="font-light text-sm">+ Добавить</span>
               </button>
             </div>
-            <div class=" flex gap-2">
+            <div class=" flex gap-2 overflow-x-auto">
               <button v-for="categorySum in transactionCategoriesSums" @click="selectCategoryType(categorySum.category.id)"
                       class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2" :class="selectedCategoryId == categorySum.category.id ? '!bg-blue-100' : ''">
                 <p><span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>
 
               </button>
             </div>
-            <div class="grid  grid-cols-1 gap-1 max-h-tlist overflow-y-auto pe-2">
+            <div class="grid  grid-cols-1 gap-1 max-h-tlist overflow-y-auto ">
               <BudgetTransactionView v-for="transaction in filteredTransactions" :key="transaction.id"
                                      :transaction="transaction"
                                      :is-list="true"