Feat/house planner

README.md

@@ -21,10 +21,8 @@
 
 ![example workflow](https://github.com/jesusantguerrero/atmosphere/actions/workflows/laravel.yml/badge.svg)
 
-![example workflow](https://github.com/jesusantguerrero/atmosphere/actions/workflows/laravel.yml/badge.svg?event-push)
 
-
-![image](https://user-images.githubusercontent.com/17421742/212417292-19f319c5-1cf4-48a8-ba40-1e9b040e820f.png)
+![image](./public/images/full-sized-dashboard.png)
 
 ## About Loger
 

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) {

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

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>

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([]);

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>