- Added icons synonyms for better search

- budget display interval

front/assets/styles/theme-dark.css

@@ -353,8 +353,9 @@
 .van-theme-dark .app-loading {
   background: #222;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
+}
 
-
-
+.van-theme-dark .budget-icon {
+  background: #333;
 }
 

front/assets/styles/theme.css

@@ -991,4 +991,8 @@ img, svg {
 
 .transaction-foreign-amount-field .van-field__body {
     border: 1.5px solid #0288D1;
+}
+
+.budget-icon {
+    background: #eee;
 }

front/components/budget/budget-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="pie" class="pie" :style="{ '--circle-colorircle-percentage': budgetLimitPercent }">
+  <div ref="budget-icon" class="budget-icon" :style="{ '--circle-colorircle-percentage': budgetLimitPercent }">
     <app-icon :icon="icon ?? TablerIconConstants.budget" :size="TablerIconConstants.defaultSize" />
   </div>
 </template>
@@ -13,25 +13,15 @@ const props = defineProps({
   value: {},
 })
 
-const pie = ref(null)
 
 const icon = computed(() => Budget.getIcon(props.value))
 const budgetLimit = computed(() => Budget.getLimit(props.value))
 const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.percent`, 0))
 
-// watch(
-//   budgetLimitPercent,
-//   async (newValue) => {
-//     await nextTick()
-//     pie.value.style.setProperty('--circle-colorircle-percentage', newValue)
-//   },
-//   { immediate: true },
-// )
-
 </script>
 
 <style>
-.pie {
+.budget-icon {
   --circle-colorircle-percentage: 20; /* the percentage */
   --circle-colorircle-thickness: 5px; /* the thickness */
   --circle-color: #66bb6a; /* the color */
@@ -44,25 +34,24 @@ const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.per
   margin: 5px;
   place-content: center;
   border-radius: 50%;
-  background: #eee;
 }
 
-.pie:before,
-.pie:after {
+.budget-icon:before,
+.budget-icon:after {
   content: '';
   position: absolute;
   border-radius: 50%;
 }
 
-.pie:before {
+.budget-icon:before {
   inset: 0;
   background:
     radial-gradient(farthest-side, var(--circle-color) 98%, #0000) top/var(--circle-colorircle-thickness) var(--circle-colorircle-thickness) no-repeat,
     conic-gradient(var(--circle-color) calc(var(--circle-colorircle-percentage) * 1%), #0000 0);
   mask: radial-gradient(farthest-side, #0000 calc(99% - var(--circle-colorircle-thickness)), #000 calc(100% - var(--circle-colorircle-thickness)));
 }
 
-.pie:after {
+.budget-icon:after {
   inset: calc(50% - var(--circle-colorircle-thickness) / 2);
   background: var(--circle-color);
   transform: rotate(calc(var(--circle-colorircle-percentage) * 3.6deg - 90deg)) translate(calc(var(--circle-size) / 2 - 50%));

front/components/dashboard/dashboard-budgets/dashboard-budget-item.vue

@@ -5,8 +5,9 @@
     </template>
     <template #text>
       <div class="display-flex flex-column align-items-center">
-        <div class="font-400 text-size-12 text-center text-muted">{{ displayName }}</div>
-        <div class="font-500 text-size-10 text-center">{{ budgetLimitSpent }} / {{ budgetAmount }}</div>
+        <div class="font-600 text-size-12 text-center">{{ displayName }}</div>
+        <div class="font-500 text-size-10 text-center ">{{ budgetLimitSpent }} / {{ budgetAmount }}</div>
+        <div class="font-500 text-size-10 text-center text-muted">{{ budgetLimitInterval }} </div>
       </div>
     </template>
   </van-grid-item>
@@ -18,6 +19,7 @@ import Transaction from '~/models/Transaction.js'
 import { get } from 'lodash'
 import Budget from '~/models/Budget.js'
 import RouteConstants from '~/constants/RouteConstants.js'
+import BudgetLimit from '~/models/BudgetLimit.js'
 
 const dataStore = useDataStore()
 
@@ -32,6 +34,8 @@ const budgetPeriod = computed(() => get(props.value, 'attributes.auto_budget_per
 const budgetAmount = computed(() => get(props.value, 'attributes.amount', ' - '))
 const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.percent`, 0))
 const budgetLimitSpent = computed(() => Math.abs(get(budgetLimit.value, `attributes.spent`, 0)))
+const budgetLimitInterval = computed(() => BudgetLimit.getLimitInterval(budgetLimit.value))
+
 
 const onGoToBudget = async () => {
   let budgetId = get(props.value, 'id')