Several budget tweaks

front/components/list-items/budget-list-item.vue

@@ -15,8 +15,8 @@
               <div class="flex-1">{{ displayName }}</div>
               <div class="text-size-12">{{ budgetLimitSpent }} / {{ budgetAmount }}</div>
             </div>
-            <bar-chart-item-horizontal :percent="budgetLimitPercent" class="p-0 mb-10" />
-            <div class="display-flex flex-wrap gap-1">
+<!--            <bar-chart-item-horizontal :percent="budgetLimitPercent" class="p-0 mb-10" />-->
+            <div class="display-flex flex-wrap gap-1 mt-5">
               <div class="tag-gray list-item-subtitle text-size-12">{{ budgetType }}</div>
               <div v-if="budgetAmount" class="tag-gray list-item-subtitle text-size-12">{{ budgetPeriod }}</div>
             </div>

front/pages/budgets/[[id]].vue

@@ -7,6 +7,16 @@
     </app-top-toolbar>
 
     <van-form ref="form" @submit="saveItem" @failed="onValidationError" class="">
+
+      <van-cell-group v-if="itemId" inset>
+        <div class="van-cell-group-title">Status:</div>
+        <div class="px-3 pb-15 flex-column text-size-12">
+          <div>Spent: {{ budgetLimitSpent }} / {{ amount }}</div>
+          <div>Percent: {{ budgetLimitPercent }}</div>
+          <div>Interval: {{ budgetLimitDateStart }} -> {{ budgetLimitDateEnd }}</div>
+        </div>
+      </van-cell-group>
+
       <van-cell-group inset>
         <app-field
           v-model="name"
@@ -30,12 +40,16 @@
         </template>
       </van-cell-group>
 
+
+
       <div style="margin: 16px">
         <app-button-form-save />
 
         <app-button-form-delete class="mt-10" v-if="itemId" @click="onDelete" />
       </div>
     </van-form>
+
+
   </div>
 </template>
 
@@ -72,6 +86,12 @@ const fetchItem = () => {
 
 const isPeriodVisible = computed(() => get(type.value, 'fireflyCode') !== Budget.types.manual.fireflyCode)
 
+const budgetLimit = computed(() => Budget.getLimit(item.value))
+const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.percent`, 0))
+const budgetLimitSpent = computed(() => Math.abs(get(budgetLimit.value, `attributes.spent`, 0)))
+const budgetLimitDateStart = computed(() => DateUtils.dateToUI(get(budgetLimit.value, `attributes.start`)))
+const budgetLimitDateEnd = computed(() => DateUtils.dateToUI(get(budgetLimit.value, `attributes.end`)))
+
 const onEvent = (event, payload) => {
   if (event === 'onPostSave') {
     let newItem = _.get(payload, 'data.data')

front/pages/dashboard.vue

@@ -52,6 +52,7 @@ const onRefresh = () => {
   dataStore.fetchDashboardTransactionsForWeek()
   dataStore.fetchTransactionsWithTodos()
   dataStore.fetchExchangeRate()
+  dataStore.fetchBudgets()
 }
 
 const onRefreshDebounce = debounce(onRefresh, 200)

front/transformers/BudgetLimitTransformer.js

@@ -13,6 +13,10 @@ export default class BudgetLimitTransformer extends ApiTransformer {
       return null
     }
 
+    item.attributes.start = DateUtils.autoToDate(item.attributes.start)
+    item.attributes.end = DateUtils.autoToDate(item.attributes.end)
+
+
     item.attributes.spent = parseFloat(get(item, 'attributes.spent') ?? "0")
     item.attributes.amount = parseFloat(get(item, 'attributes.amount') ?? "0")