From f843bbcb86595c8a8168244cdcaa15f048077189 Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Fri, 29 Mar 2024 17:29:02 -0400
Subject: [PATCH 1/3] style: add emergency fund widget styles

---
 .../Dashboard/Partials/BudgetFundWidget.vue   | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/resources/js/Pages/Dashboard/Partials/BudgetFundWidget.vue b/resources/js/Pages/Dashboard/Partials/BudgetFundWidget.vue
index 8f3729e5..a6913775 100644
--- a/resources/js/Pages/Dashboard/Partials/BudgetFundWidget.vue
+++ b/resources/js/Pages/Dashboard/Partials/BudgetFundWidget.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, computed } from 'vue';
+    import axios from 'axios';
 
     import WidgetContainer from '@/Components/WidgetContainer.vue';
-    import axios from 'axios';
-import { formatMoney } from '@/utils';
+    import BudgetProgress from '@/domains/budget/components/BudgetProgress.vue';
+    import MoneyPresenter from '@/Components/molecules/MoneyPresenter.vue';
 
     const budgetData = ref({})
 
@@ -13,6 +14,12 @@ import { formatMoney } from '@/utils';
         });
     }
 
+
+    const fundMetrics = computed(() => ({
+        target: budgetData?.value.monthlyExpense * budgetData?.value.target_times,
+        balance: budgetData.value?.balance ?? 0
+    }))
+
     onMounted(() => {
         fetchChecks()
     })
@@ -23,16 +30,32 @@ import { formatMoney } from '@/utils';
         :message="$t('Emergency Fund Builder')"
     >
         <template #content>
-            <section>
-                <p>
-                    {{ formatMoney(budgetData.balance) }}
-                </p>
-                <p>
-                    {{ formatMoney(budgetData.monthlyExpense) }}
-                </p>
-                <p>
-                    {{ budgetData.total?.toFixed?.(2) }} Months
-                </p>
+            <section class="my-2">
+                <BudgetProgress
+                    class="h-1.5 rounded-sm"
+                    :goal="fundMetrics.target"
+                    :current="budgetData.balance"
+                    :progress-class="['bg-primary', 'bg-secondary/5']"
+                    :show-labels="false"
+                >
+                 <template #before>
+                    <header class="mb-1 font-bold flex justify-between">
+                        <span>
+                            <MoneyPresenter :value="fundMetrics.target" />
+                        </span>
+                        <span>
+                            {{ budgetData.target_times }} Months
+                        </span>
+                    </header>
+                </template>
+
+                    <template v-slot:after="{ progress }">
+                    <div class="flex justify-between w-full mt-1">
+                        <span> <MoneyPresenter :value="fundMetrics.balance" />({{ progress}}%) </span>
+                        <span>{{ budgetData.total?.toFixed?.(2) }} Months</span>
+                    </div>
+                </template>
+                </BudgetProgress>
             </section>
         </template>
     </WidgetContainer>

From 927155fc740b2c8fbc84820eea9b1705fcfd7699 Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Sat, 30 Mar 2024 12:42:43 -0400
Subject: [PATCH 2/3] style: fix spacing

---
 resources/js/Components/WidgetContainer.vue            |  2 +-
 .../js/Pages/Dashboard/Partials/DashboardDrafts.vue    | 10 +++++++---
 .../js/domains/budget/components/BudgetProgress.vue    |  8 ++++----
 .../js/domains/budget/components/BudgetTargetCard.vue  |  6 +++---
 resources/js/domains/meal/components/MealWidget.vue    |  2 +-
 .../transactions/components/NextPaymentsWidget.vue     |  6 +++---
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/resources/js/Components/WidgetContainer.vue b/resources/js/Components/WidgetContainer.vue
index efc5f5bf..e9174a81 100644
--- a/resources/js/Components/WidgetContainer.vue
+++ b/resources/js/Components/WidgetContainer.vue
@@ -71,7 +71,7 @@ const { isTab: isCurrentTab, selectedTab, tabs: widgetTabs } = useTabs(
 
       <div class="w-full flex justify-end" v-if="$slots.actions || actionLabel || tabs.length">
         <section
-            class="flex justify-end w-full space-x-2 px-4 py-2.5"
+            class="flex justify-end w-full space-x-2 px-4 py-2"
             v-if="tabs.length"
         >
             <button
diff --git a/resources/js/Pages/Dashboard/Partials/DashboardDrafts.vue b/resources/js/Pages/Dashboard/Partials/DashboardDrafts.vue
index e398b0aa..8ab22c09 100644
--- a/resources/js/Pages/Dashboard/Partials/DashboardDrafts.vue
+++ b/resources/js/Pages/Dashboard/Partials/DashboardDrafts.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
     import { ref, onMounted } from 'vue';
-    import { ITransaction } from '@/domains/transactions/models';
     import axios from 'axios';
+
     import WidgetTitleCard from '@/Components/molecules/WidgetTitleCard.vue';
     import TransactionsList from '@/domains/transactions/components/TransactionsList.vue';
-    import { removeTransaction, draftsDBToTransaction, useTransactionModal } from '@/domains/transactions';
     import LogerButton from '@/Components/atoms/LogerButton.vue';
     import { useTransactionStore } from '@/store/transactions';
+    // @ts-expect-error: no types
     import MdiSync from '~icons/mdi/sync'
 
+    import { ITransaction } from '@/domains/transactions/models';
+    import { removeTransaction, draftsDBToTransaction, useTransactionModal } from '@/domains/transactions';
+
 
     const transactionsDraft = ref([]);
     const isLoadingDrafts = ref(false);
@@ -17,6 +20,7 @@
         return axios.get(url).then<ITransaction[]>(({ data }) => {
             transactionsDraft.value = data;
             isLoadingDrafts.value = false
+            return data;
         })
     }
 
@@ -57,7 +61,7 @@
     }) => {
         after((result) => {
             const [savedValue, action, originalData] = args;
-            if ((originalData && originalData.status == 'draft' && savedValue.status == 'verified') || action == 'delete') {
+            if ((originalData && originalData.status == 'draft' && savedValue?.status == 'verified') || action == 'delete') {
                 fetchTransactions();
             }
 
diff --git a/resources/js/domains/budget/components/BudgetProgress.vue b/resources/js/domains/budget/components/BudgetProgress.vue
index 3332cd95..9b2eede1 100644
--- a/resources/js/domains/budget/components/BudgetProgress.vue
+++ b/resources/js/domains/budget/components/BudgetProgress.vue
@@ -83,10 +83,10 @@ const filledStyle = computed(() => {
 .bg-spent {
     background: repeating-linear-gradient(
         45deg,
-        rgba(0,0,0, .6),
-        rgba(0,0,0, .6) 10px,
-        rgba(0,0,0, .2) 10px,
-        rgba(0,0,0, .2) 20px
+        rgba(255,255,255, .6),
+        rgba(255,255,255, .6) 10px,
+        rgba(255,255,255, .2) 10px,
+        rgba(255,255,255, .2) 20px
     );
 }
 </style>
diff --git a/resources/js/domains/budget/components/BudgetTargetCard.vue b/resources/js/domains/budget/components/BudgetTargetCard.vue
index 5fcf9644..cc486774 100644
--- a/resources/js/domains/budget/components/BudgetTargetCard.vue
+++ b/resources/js/domains/budget/components/BudgetTargetCard.vue
@@ -124,9 +124,9 @@ const isGoal = computed(() => {
             </span>
         </div>
 
-        <BudgetMoneyLine title="Total needed" :value="item.amount" />
-        <BudgetMoneyLine :title="fundedLabel" :value="category.available" />
-        <BudgetMoneyLine title="To go" :value="item.amount - category.available" />
+        <BudgetMoneyLine title="Total needed" :value="targetAmount" />
+        <BudgetMoneyLine :title="fundedLabel" :value="currentAmount" />
+        <BudgetMoneyLine title="To go" :value="targetAmount - currentAmount" />
 
         <section class="border-t py-2 items-center justify-center flex" v-if="!item.completed_at && isGoal">
             <LogerButton variant="secondary" @click="$emit('completed', item)" :processing="isProcessing">
diff --git a/resources/js/domains/meal/components/MealWidget.vue b/resources/js/domains/meal/components/MealWidget.vue
index ab51c54e..f1f31dfd 100644
--- a/resources/js/domains/meal/components/MealWidget.vue
+++ b/resources/js/domains/meal/components/MealWidget.vue
@@ -14,7 +14,7 @@ const defaultShadow = window?.cardShadow ?? "";
 <template>
     <div  :class="defaultShadow">
         <RandomMealCard class="border-b rounded-b-none" />
-        <div class="px-4 py-2 space-y-4 cursor-pointer rounded-b-md min-h-min bg-base-lvl-3">
+        <div class="px-4 py-2 space-y-2 cursor-pointer rounded-b-md min-h-min bg-base-lvl-3">
             <div class="text-center">
                 <SectionTitle type="secondary"> {{ $t('Menu for today') }}</SectionTitle>
             </div>
diff --git a/resources/js/domains/transactions/components/NextPaymentsWidget.vue b/resources/js/domains/transactions/components/NextPaymentsWidget.vue
index 4c5741d8..440ac867 100644
--- a/resources/js/domains/transactions/components/NextPaymentsWidget.vue
+++ b/resources/js/domains/transactions/components/NextPaymentsWidget.vue
@@ -18,11 +18,11 @@ const handleEdit = (transaction: ITransaction) => {
 
 <template>
 <div
-    class="mt-4 mb-10 overflow-hidden bg-white sm:rounded-lg"
+    class="mt-4 mb-4 overflow-hidden bg-white sm:rounded-lg"
     :class="cardShadow"
 >
-    <h4 class="p-4 pb-2 font-bold">Next Payments</h4>
-    <section class="space-y-2 mb-4">
+    <h4 class="pb-2 font-bold">Next Payments</h4>
+    <section class="space-y-2">
         <NextPaymentItem
             v-for="transaction in payments"
             :key="transaction.id"

From c84dc06769c8e0f06b32d0d119a827b74c6cd6cd Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Sat, 30 Mar 2024 17:14:07 -0400
Subject: [PATCH 3/3] fix: Improve hom widgets

---
 .../System/DashboardController.php            |   2 +
 resources/js/Pages/Dashboard/Index.vue        |  45 ++++----
 .../Partials/BudgetDistributionWidget.vue     |   8 +-
 .../Pages/Dashboard/Partials/BudgetWidget.vue | 101 +++++++-----------
 .../Dashboard/Partials/DashboardSpendings.vue |   4 +-
 .../Dashboard/Partials/NetWorthWidget.vue     |  24 +----
 resources/js/Pages/Trends/NetWorth.vue        |  26 +----
 resources/js/domains/budget/models/budget.ts  |   6 ++
 .../components/AccountsTracker.vue}           |  51 +++++----
 .../components/ExpenseChartWidgetRow.vue      |   2 +-
 .../js/domains/transactions/useNetWorth.ts    |  31 ++++++
 11 files changed, 140 insertions(+), 160 deletions(-)
 rename resources/js/domains/{budget/components/BudgetTracker.vue => transactions/components/AccountsTracker.vue} (68%)
 create mode 100644 resources/js/domains/transactions/useNetWorth.ts

diff --git a/app/Http/Controllers/System/DashboardController.php b/app/Http/Controllers/System/DashboardController.php
index 511c9a9b..11f10ae5 100644
--- a/app/Http/Controllers/System/DashboardController.php
+++ b/app/Http/Controllers/System/DashboardController.php
@@ -29,6 +29,7 @@ public function __invoke()
         $teamId = $request->user()->current_team_id;
         $budget = BudgetMonth::getMonthAssignmentTotal($teamId, $startDate);
         $transactionsTotal = TransactionService::getExpensesTotal($teamId, $startDate, $endDate);
+        $netWorth = collect(TransactionService::getNetWorth($teamId, $startDate, $endDate))->reverse()->values();
         $plannedMeals = $this->mealService->getMealSchedule($teamId);
         $nextPayments = $this->plannedService->getPlanned($teamId);
 
@@ -37,6 +38,7 @@ public function __invoke()
             'meals' => PlannedMealResource::collection($plannedMeals),
             'budgetTotal' => $budget,
             'transactionTotal' => $transactionsTotal,
+            'netWorth' => $netWorth,
             'expenses' => ReportService::generateCurrentPreviousReport($teamId, 'month', 1),
             'spendingSummary' => ReportService::generateExpensesByPeriod($teamId, $startDate),
             'onboarding' => function () use ($team) {
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 7b2f459a..71c28300 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -10,14 +10,17 @@
 
     import NextPaymentsWidget from "@/domains/transactions/components/NextPaymentsWidget.vue";
     import MealWidget from "@/domains/meal/components/MealWidget.vue";
-    import BudgetTracker from "@/domains/budget/components/BudgetTracker.vue";
+    import AccountsTracker from "@/domains/transactions/components/AccountsTracker.vue";
     import OccurrenceCard from '@/Components/Modules/occurrence/OccurrenceCard.vue';
-    import DashboardSpendings from './Partials/DashboardSpendings.vue';
+    import DashboardSpending from './Partials/DashboardSpendings.vue';
     import BudgetFundWidget from './Partials/BudgetFundWidget.vue';
+    import NetWorthWidget from './Partials/NetWorthWidget.vue';
+    import BudgetWidget from "./Partials/BudgetWidget.vue";
 
     import { useAppContextStore } from '@/store';
     import { IOccurrenceCheck } from '@/Components/Modules/occurrence/models';
     import { IAccount, ICategory } from '@/domains/transactions/models';
+    import { IBudgetStat } from '@/domains/budget/models';
 
     withDefaults(defineProps<{
         spendingSummary: {
@@ -40,21 +43,20 @@
         user: {
             name: string;
         },
-        budgetTotal: number,
+        netWorth: any,
+        budgetTotal: IBudgetStat,
         nextPayments: any[],
         transactionTotal: Record<string, any>,
         categories: ICategory[],
         accounts: IAccount[],
         onboarding: Record<string, any>,
         checks: IOccurrenceCheck[]
-    }>(), {
-
-    });
+    }>(), {});
     const contextStore = useAppContextStore()
 
     const selected = ref(null);
 
-    const budgetTrackerRef = ref();;
+    const AccountsTrackerRef = ref();;
 
 
     const areChecksLoading = ref(true);
@@ -89,29 +91,23 @@
         <main class="px-5 mx-auto mt-5 mb-10 md:space-y-0 md:space-x-10 md:flex max-w-screen-2xl sm:px-6 lg:px-8">
             <section class="mt-6 md:w-9/12 space-y-4">
                 <section class="flex flex-col md:flex-row md:space-x-4">
-                    <BudgetTracker
+                    <AccountsTracker
                         class="md:w-7/12 w-full order-1  mt-2 md:mt-0"
-                        ref="budgetTrackerRef"
-                        :budget="budgetTotal"
+                        ref="AccountsTrackerRef"
+                        :net-worth="netWorth"
                         :expenses="transactionTotal.total_amount"
                         :message="$t('dashboard.welcome')"
                         :username="user.name"
                         @section-click="selected=$event"
                     />
-                    <BudgetTracker
-                        class="md:w-5/12 w-full order-1  mt-2 md:mt-0"
-                        ref="budgetTrackerRef"
-                        :budget="budgetTotal"
-                        :message="$t('Net-worth trend')"
-                        @section-click="selected=$event"
-                    />
-
+                    <BudgetFundWidget    class="md:w-5/12 w-full order-1  mt-2 md:mt-0" />
                 </section>
 
-                <DashboardSpendings
+                <DashboardSpending
                     :expenses="expenses"
                     :spending-summary="spendingSummary"
                 />
+                <MealWidget :meals="meals?.data" />
             </section>
             <section class="py-6 space-y-4 md:w-3/12">
                 <OccurrenceCard   :checks="checks" :wrap="true" />
@@ -122,8 +118,6 @@
                     :steps="onboarding.steps"
                     :percentage="onboarding.percentage"
                 />
-
-                <MealWidget :meals="meals?.data" />
                 <WidgetContainer
                     :message="$t('Transactions')"
                     :tabs="transactionsTabs"
@@ -143,7 +137,14 @@
                         <DashboardDrafts  v-else />
                     </template>
                 </WidgetContainer>
-                <BudgetFundWidget />
+                <BudgetWidget :budget="budgetTotal"/>
+                <!-- <NetWorthWidget
+                    ref="NetWorthWidgetRef"
+                    :budget="budgetTotal"
+                    :message="$t('Net-worth trend')"
+                    @section-click="selected=$event"
+                /> -->
+
             </section>
         </main>
     </AppLayout>
diff --git a/resources/js/Pages/Dashboard/Partials/BudgetDistributionWidget.vue b/resources/js/Pages/Dashboard/Partials/BudgetDistributionWidget.vue
index 2114e097..5a23bf99 100644
--- a/resources/js/Pages/Dashboard/Partials/BudgetDistributionWidget.vue
+++ b/resources/js/Pages/Dashboard/Partials/BudgetDistributionWidget.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
     import { ref, onMounted } from 'vue';
-    import { ITransaction } from '@/domains/transactions/models';
     import axios from 'axios';
+    import { router } from '@inertiajs/vue3';
+
+    import LogerButton from '@/Components/atoms/LogerButton.vue';
     import WidgetTitleCard from '@/Components/molecules/WidgetTitleCard.vue';
     import TransactionsList from '@/domains/transactions/components/TransactionsList.vue';
+
+    import { ITransaction } from '@/domains/transactions/models';
     import { removeTransaction, draftsDBToTransaction, useTransactionModal } from '@/domains/transactions';
-    import LogerButton from '@/Components/atoms/LogerButton.vue';
     import { useTransactionStore } from '@/store/transactions';
-    import { router } from '@inertiajs/vue3';
 
 
     const transactionsDraft = ref([]);
diff --git a/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue b/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
index 26941cd8..0c890335 100644
--- a/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
+++ b/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
@@ -4,31 +4,37 @@ import { ITransaction } from '@/domains/transactions/models';
 import axios from 'axios';
 import WidgetTitleCard from '@/Components/molecules/WidgetTitleCard.vue';
 import LogerButton from '@/Components/atoms/LogerButton.vue';
-import { useTransactionStore } from '@/store/transactions';
 import { useI18n } from "vue-i18n";
-// import VueApexCharts from "vue3-apexcharts";
+import VueApexCharts from "vue3-apexcharts";
 import { formatMoney } from '@/utils';
 import BudgetProgress from '@/domains/budget/components/BudgetProgress.vue';
+import { IBudgetStat } from '@/domains/budget/models/budget';
 
 interface Stat {
     label: string;
     value: string|number;
 }
+
+const props = defineProps<{
+    budget: IBudgetStat
+}>();
+
+
 const stats = ref<{
     budgeted: Stat;
     spending: Stat;
     budgetedSpending: Stat;
 }>({
     budgeted: {
-        value: 2000,
+        value: props.budget.spending,
         label: 'Budgeted'
     },
     spending: {
-        value: 1000,
-        label: 'spending'
+        value: props.budget.savings,
+        label: 'Savings'
     },
     budgetedSpending: {
-        value: 1500,
+        value: 0,
         label: 'Budgeted spending'
     },
 });
@@ -81,51 +87,14 @@ const chartConfig = {
   series: Object.values(stats.value).map(item => item.value),
 };
 const legend = computed(() => {
-return chartConfig.options.labels.map((label, index) => {
-    return {
-    label: label,
-    value: chartConfig.series[index],
-    color: "",
-    };
-});
+    return chartConfig.options.labels.map((label, index) => {
+        return {
+        label: label,
+        value: chartConfig.series[index],
+        color: "",
+        };
+    });
 });
-
-const transactionsDraft = ref([]);
-const isLoadingDrafts = ref(false);
-const fetchTransactions = async () => {
-    const url = `/api/finance/transactions?filter[status]=draft&limit=10`;
-    return axios.get(url).then<ITransaction[]>(({ data }) => {
-        transactionsDraft.value = data;
-        isLoadingDrafts.value = false
-    })
-}
-
-onMounted(() => {
-    fetchTransactions()
-})
-
-const isLoading = ref(false);
-const updateTransactions = () => {
-    isLoading.value = true;
-    fetchTransactions().finally(() => {
-        isLoading.value = false;
-    })
-}
-
-const transactionStore = useTransactionStore();
-const unsubscribe =  transactionStore.$onAction(({
-    name,
-    store,
-    args,
-    after
-}) => {
-    after((result) => {
-        const [savedValue, action, originalData] = args;
-        if (originalData && originalData.status == 'draft' && savedValue.status == 'verified') {
-            fetchTransactions();
-        }
-    })
-})
 </script>
 
 <template>
@@ -133,14 +102,14 @@ const unsubscribe =  transactionStore.$onAction(({
         <section class="w-full">
             <section class="w-full  py-3 relative h-[155px]">
                 <article style="width: 100%; height: 300px" class="relative py-1 mb-10">
-                  <!-- <VueApexCharts
+                  <VueApexCharts
                     ref="chartRef"
                     width="100%"
                     height="100%"
                     type="donut"
                     :options="chartConfig.options"
                     :series="chartConfig.series.map((value) => Number(value))"
-                  /> -->
+                  />
                 </article>
               </section>
               <header class="mt-4 border-t py-4 flex items-start justify-between pb-2">
@@ -149,7 +118,7 @@ const unsubscribe =  transactionStore.$onAction(({
                         >
                             <IMdiBankTransfer />
                         </section>
-                        Budget total
+                        Total
                     </h1>
                     <section class="space-x-2 w-full">
                         <h2 class="text-lg flex items-center  font-bold">
@@ -168,18 +137,18 @@ const unsubscribe =  transactionStore.$onAction(({
               <article class="space-y-2 mt-4">
                 <BudgetProgress
                     class="h-2 rounded-sm"
-                    :goal="2000"
-                    :current="1500"
+                    :goal="budget.total"
+                    :current="budget.spending"
                     :progress-class="['bg-white', 'bg-primaryDark/60']"
                     :show-labels="false"
                 >
                     <template v-slot:before="{ progress }">
                         <header class="mb-1 font-bold text-xs flex justify-between w-full ">
                         <section>
-                            Class a
+                            For spending
                         </section>
                         <section >
-                            {{ formatMoney(totals?.paid) }} / {{ formatMoney(totals?.total) }}
+                            {{ formatMoney(budget.spending) }} / {{ formatMoney(budget?.total) }}
                             ({{ progress }}%)
                         </section>
                         </header>
@@ -187,11 +156,23 @@ const unsubscribe =  transactionStore.$onAction(({
                 </BudgetProgress>
                 <BudgetProgress
                     class="h-2 rounded-sm"
-                    :goal="1200"
-                    :current="700"
+                    :goal="budget.total"
+                    :current="budget.savings"
                     :progress-class="['bg-white', 'bg-primaryDark/60']"
                     :show-labels="false"
-                />
+                >
+                <template v-slot:before="{ progress }">
+                    <header class="mb-1 font-bold text-xs flex justify-between w-full ">
+                    <section>
+                        For savings
+                    </section>
+                    <section >
+                        {{ formatMoney(budget.savings) }} / {{ formatMoney(budget?.total) }}
+                        ({{ progress }}%)
+                    </section>
+                    </header>
+                </template>
+                </BudgetProgress>
               </article>
         </section>
 
diff --git a/resources/js/Pages/Dashboard/Partials/DashboardSpendings.vue b/resources/js/Pages/Dashboard/Partials/DashboardSpendings.vue
index a4d0ae4c..8882b6c1 100644
--- a/resources/js/Pages/Dashboard/Partials/DashboardSpendings.vue
+++ b/resources/js/Pages/Dashboard/Partials/DashboardSpendings.vue
@@ -53,10 +53,10 @@
 
     const financeTabs = [{
       name: "monthVsPrevious",
-      label: "vs Previous Month",
+      label: "Previous",
     },{
       name: "spendingSummary",
-      label: "Spending Summary",
+      label: "Spending",
     }];
 
 
diff --git a/resources/js/Pages/Dashboard/Partials/NetWorthWidget.vue b/resources/js/Pages/Dashboard/Partials/NetWorthWidget.vue
index 8ec64081..f7ebacf0 100644
--- a/resources/js/Pages/Dashboard/Partials/NetWorthWidget.vue
+++ b/resources/js/Pages/Dashboard/Partials/NetWorthWidget.vue
@@ -95,6 +95,7 @@ const fetchTransactions = async () => {
   return axios.get(url).then<ITransaction[]>(({ data }) => {
     transactionsDraft.value = data;
     isLoadingDrafts.value = false;
+    return data;
   });
 };
 
@@ -102,32 +103,11 @@ onMounted(() => {
   fetchTransactions();
 });
 
-const isLoading = ref(false);
-const updateTransactions = () => {
-  isLoading.value = true;
-  fetchTransactions().finally(() => {
-    isLoading.value = false;
-  });
-};
-
-const transactionStore = useTransactionStore();
-const unsubscribe = transactionStore.$onAction(({ name, store, args, after }) => {
-  after((result) => {
-    const [savedValue, action, originalData] = args;
-    if (
-      originalData &&
-      originalData.status == "draft" &&
-      savedValue.status == "verified"
-    ) {
-      fetchTransactions();
-    }
-  });
-});
 </script>
 
 <template>
   <WidgetTitleCard
-    title="Financial indicators"
+    title="Net-Worth Balance"
     class="hidden md:block base-lvl-3 text-body-1"
     :hide-divider="true"
   >
diff --git a/resources/js/Pages/Trends/NetWorth.vue b/resources/js/Pages/Trends/NetWorth.vue
index 1478e225..3d8a42e6 100644
--- a/resources/js/Pages/Trends/NetWorth.vue
+++ b/resources/js/Pages/Trends/NetWorth.vue
@@ -13,6 +13,7 @@ import WidgetTitleCard from "@/Components/molecules/WidgetTitleCard.vue";
 import { useServerSearch } from "@/composables/useServerSearch";
 import RangeFilters from "@/domains/transactions/components/RangeFilters.vue";
 import { formatMoney } from "@/utils";
+import { useNetWorth } from "@/domains/transactions/useNetWorth";
 
 const props = defineProps({
   user: {
@@ -76,29 +77,8 @@ const trends = [
     }
 ]
 
-const isYearSpending = computed(() => {
-    return ['spendingYear'].includes(props.metaData.name)
-})
-
-
-const getEntryBalance = (monthEntry: { assets: number, debts: number }) => {
-    return parseFloat(monthEntry.assets) + parseFloat(monthEntry.debts);
-};
-
-const lastMonth = computed(() => {
-    return getEntryBalance(props.data?.at?.(-2) ?? { debts: 0, assets: 0})
-});
-
-const thisMonth = computed(() => {
-    return getEntryBalance(props.data?.at?.(-1) ?? { debts: 0, assets: 0})
-});
-const monthMovement = computed(() => {
-    return  parseFloat(thisMonth.value) - parseFloat(lastMonth.value);
-});
-
-const monthMovementVariance = computed(() => {
-    return  (monthMovement.value /  parseFloat(lastMonth.value) * 100.00).toFixed(2);
-});
+const { data } = toRefs(props)
+const { lastMonth, thisMonth, monthMovement, monthMovementVariance } = useNetWorth(data);
 </script>
 
 <template>
diff --git a/resources/js/domains/budget/models/budget.ts b/resources/js/domains/budget/models/budget.ts
index 5997c3c8..e6b4fb98 100644
--- a/resources/js/domains/budget/models/budget.ts
+++ b/resources/js/domains/budget/models/budget.ts
@@ -1,5 +1,10 @@
 import { ICategory } from "@/domains/transactions/models";
 
+export interface IBudgetStat {
+    spending: number;
+    total: number;
+    saving: number;
+}
 export interface BudgetTarget {
     amount: number
     category_id: number;
@@ -91,5 +96,6 @@ const targetTypeNames = {
 }
 
 export const getTargetName = (code: string) => {
+    // @ts-ignore: is name
     return targetTypeNames[code] ?? code;
 }
diff --git a/resources/js/domains/budget/components/BudgetTracker.vue b/resources/js/domains/transactions/components/AccountsTracker.vue
similarity index 68%
rename from resources/js/domains/budget/components/BudgetTracker.vue
rename to resources/js/domains/transactions/components/AccountsTracker.vue
index 46f04c39..585f0bda 100644
--- a/resources/js/domains/budget/components/BudgetTracker.vue
+++ b/resources/js/domains/transactions/components/AccountsTracker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { AtButton } from "atmosphere-ui";
-import { computed } from "vue";
+import { computed , toRefs } from "vue";
 import { useI18n } from "vue-i18n";
 import { router } from "@inertiajs/vue3";
 
@@ -8,33 +8,31 @@ import SectionTitle from "@/Components/atoms/SectionTitle.vue";
 import NumberHider from "@/Components/molecules/NumberHider.vue";
 
 import formatMoney from "@/utils/formatMoney";
+import { useNetWorth , INetWorthEntry} from "../useNetWorth";
+import MoneyPresenter from "@/Components/molecules/MoneyPresenter.vue";
 
-const props = defineProps({
-  username: {
-    type: String,
-    required: true,
-  },
-  budget: {
-    type: Number,
-  },
-  expenses: {
-    type: [Number, String],
-  },
-  message: {
-    default: "Welcome to Loger",
-  },
+const props = withDefaults(defineProps<{
+    username: string;
+    netWorth: INetWorthEntry[];
+    expenses: number | string;
+    message: string
+}>(), {
+  message:  "Welcome to Loger",
 });
 
 const { t } = useI18n();
 
+const { netWorth } = toRefs(props)
+const { lastMonth, thisMonth, monthMovement, monthMovementVariance } = useNetWorth(netWorth);
+
 const sections = computed(() => ({
   expenses: {
     label: t("Current Expenses"),
     value: props.expenses,
   },
   budget: {
-    label: t("Monthly Budget"),
-    value: props.budget,
+    label: t("Net-Worth Balance"),
+    value: thisMonth.value
   },
 }));
 
@@ -44,11 +42,11 @@ const isMultiple = (value: any) => {
 </script>
 
 <template>
-  <div
+  <article
     class="px-5 py-3 transition border divide-y rounded-lg divide-base border-base bg-base-lvl-3"
     :class="[cardShadow]"
   >
-    <div class="items-center pb-2 md:justify-between md:flex">
+    <header class="items-center pb-2 md:justify-between md:flex">
       <h1 class="font-bold text-body">
         {{ message }} <span class="text-primary">{{ username }}</span>
       </h1>
@@ -56,14 +54,14 @@ const isMultiple = (value: any) => {
         <AtButton
           class="text-sm text-primary"
           rounded
-          @click="router.visit(route('budgets.index'))"
+          @click="router.visit('/finance/transactions')"
         >
           <i class="fa fa-wallet"></i>
-          Edit budget
+          Transactions
         </AtButton>
       </div>
-    </div>
-    <div class="flex py-3">
+    </header>
+    <main class="flex py-3">
       <div
         class="w-full transition cursor-pointer hover:opacity-75"
         @click="$emit('section-click', sectionName)"
@@ -82,12 +80,11 @@ const isMultiple = (value: any) => {
         </SectionTitle>
         <SectionTitle class="mt-2" v-else>
           <span class="relative w-72">
-            <NumberHider />
-            {{ formatMoney(section.value) }}
+            <MoneyPresenter :value="section.value" />
           </span>
         </SectionTitle>
       </div>
-    </div>
+    </main>
     <slot />
-  </div>
+  </article>
 </template>
diff --git a/resources/js/domains/transactions/components/ExpenseChartWidgetRow.vue b/resources/js/domains/transactions/components/ExpenseChartWidgetRow.vue
index bc38ce87..9f95e4a5 100644
--- a/resources/js/domains/transactions/components/ExpenseChartWidgetRow.vue
+++ b/resources/js/domains/transactions/components/ExpenseChartWidgetRow.vue
@@ -70,7 +70,7 @@ const detailColumn = computed(() => {
         <template #trigger>
             <p class="inline-flex justify-between px-4 cursor-pointer " :class="classes" @click="$emit('open-details')">
                 <span class="font-bold" v-if="!hideTitle">
-                    {{ title ?? item.name }}: {{ classes }}
+                    {{ title ?? item.name }}:
                 </span>
                 <span
                     class="flex items-center ml-4 hover:underline group hover:text-primary"
diff --git a/resources/js/domains/transactions/useNetWorth.ts b/resources/js/domains/transactions/useNetWorth.ts
new file mode 100644
index 00000000..d6d21c7a
--- /dev/null
+++ b/resources/js/domains/transactions/useNetWorth.ts
@@ -0,0 +1,31 @@
+import { computed, Ref } from "vue";
+
+export interface INetWorthEntry { assets: string, debts: string }
+export const useNetWorth = (netWorthData: Ref<INetWorthEntry[]>) => {
+
+    const getEntryBalance = (monthEntry: INetWorthEntry = {  assets: "0", debts: "0"}) => {
+        return parseFloat(monthEntry.assets) + parseFloat(monthEntry.debts) ?? 0;
+    };
+
+    const lastMonth = computed(() => {
+        return getEntryBalance(netWorthData.value?.at?.(-2))
+    });
+
+    const thisMonth = computed(() => {
+        return getEntryBalance(netWorthData?.value.at?.(-1))
+    });
+    const monthMovement = computed(() => {
+        return  thisMonth.value - lastMonth.value;
+    });
+
+    const monthMovementVariance = computed(() => {
+        return  (monthMovement.value /  lastMonth.value * 100.00).toFixed(2);
+    });
+
+    return {
+        monthMovementVariance,
+        monthMovement,
+        thisMonth,
+        lastMonth
+    }
+}