fix(profiles): Fix profiles transactions summary (#371)

jesusantguerrero · Mar 10, 2024 · 68dd142 · 68dd142
1 parent d2fa8d8
commit 68dd142
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 61 deletions.
diff --git a/app/Domains/LogerProfile/Services/LogerProfileService.php b/app/Domains/LogerProfile/Services/LogerProfileService.php
@@ -63,7 +63,8 @@ public function getTransactionsByProfileId(int $profileId, $startDate, $endDate)
 
         $teamId = $entities[0]->team_id;
 
-        $transactions = TransactionLine::query()->byTeam($teamId)
+        $transactions = TransactionLine::query()
+            ->byTeam($teamId)
             ->inDateFrame($startDate, $endDate)
             ->expenseCategories($categories)
             ->verified()
@@ -72,7 +73,7 @@ public function getTransactionsByProfileId(int $profileId, $startDate, $endDate)
 
         return [
             "data" => $transactions,
-            "total" => $transactions->sum('total'),
+            "total" => $transactions->sum('amount'),
         ];
     }
 }
diff --git a/resources/js/Components/molecules/ColorSelector.vue b/resources/js/Components/molecules/ColorSelector.vue
@@ -2,11 +2,10 @@
     import { NPopover } from "naive-ui"
     import { computed } from "vue";
 
-    const props = defineProps({
-        modelValue: {
-            type: String
-        }
-    })
+    const props = defineProps<{
+        modelValue: string;
+        type: boolean;
+    }>();
 
     const colors = [
         '#037F4C',
@@ -29,10 +28,6 @@
         '#808080'
     ]
 
-    const currentColor = computed(() => {
-        return props.modelValue || colors[0];
-    })
-
     const styleColor = computed(() => {
         return { 
             backgroundColor:  props.modelValue || colors[0] 
@@ -42,7 +37,7 @@
 
 <template>
 <div>
-    <NPopover trigger="click">
+    <NPopover trigger="click" :disabled="disabled">
         <template #trigger>
             <div class="w-4 h-4 rounded-sm cursor-pointer" :style="styleColor" />
         </template>

diff --git a/resources/js/Components/templates/LogerProfileTemplate.vue b/resources/js/Components/templates/LogerProfileTemplate.vue
@@ -68,8 +68,8 @@
             <slot />
         </main>
 
-        <aside class="relative w-full h-screen overflow-auto md:px-2 md:block" :class="panelStyles">
-            <section class="px-2 md:fixed aside-content md:pr-8">
+        <aside class="relative w-full h-screen overflow-auto md:px-2 md:block " :class="panelStyles">
+            <section class="px-2 md:fixed aside-content md:pr-8 ic-scroller">
                 <slot name="prepend-panel" />
                 <slot name="panel">
                     <WidgetCard title="Accounts" class="mt-4 rounded-t-md">

diff --git a/resources/js/Components/templates/ProfileSectionNav.vue b/resources/js/Components/templates/ProfileSectionNav.vue
@@ -17,13 +17,7 @@ const sections = computed(() => {
             name: profile.name,
             label: profile.name,
             url: `/loger-profiles/${profile.id}`
-        })) ?? []),
-        {
-            icon: 'plus',
-            name: 'add',
-            label: 'Add',
-            action: 'add'
-        }
+        })) ?? [])
     ]
 })
 </script>

diff --git a/resources/js/Pages/LogerProfile/ProfileView.vue b/resources/js/Pages/LogerProfile/ProfileView.vue
@@ -18,8 +18,9 @@ import BudgetDetailForm from '@/domains/budget/components/BudgetDetailForm.vue';
 
 import { IOccurrenceCheck } from '@/Components/Modules/occurrence/models';
 import { ITransaction } from '@/domains/transactions/models';
-import { transactionDBToTransaction } from '@/domains/transactions';
+import { transactionLinesDBToTransaction } from '@/domains/transactions';
 import axios from 'axios';
+import { formatMoney } from '@/utils';
 
 
 const { entities } = defineProps<{
@@ -50,12 +51,14 @@ function fetchProfileEntities() {
 }
 
 const transactions = ref<ITransaction[]>([]);
+const transactionsTotal = ref(0);
 const isLoading = ref(false);
 const fetchTransactions = (params = location.toString()) => {
     return axios.get(`${location.pathname}/transactions`).then(({ data }: { data : {
         data: ITransaction[]
     }}) => {
         transactions.value = data.data;
+        transactionsTotal.value = data.total;
         isLoading.value = false
     })
 }
@@ -107,8 +110,8 @@ const budgets = computed(() => {
         <LogerProfileTemplate title="Loger Profiles"  ref="profileTemplateRef">
             <section class="space-y-4">
                 <WelcomeCard class="mt-5" :message="profile.name">
-                    <section class="flex flex-col items-center mx-auto ">
-                        <img :src="profile.image_url" />
+                    <section class="flex flex-col items-center mx-auto h-56">
+                        <img :src="profile.image_url" class="h-full object-contain w-full object-top"/>
                     </section>
 
                     <template #action>
@@ -129,11 +132,14 @@ const budgets = computed(() => {
                     <p v-if="areEntitiesLoading"> ...loading</p>
                     <section v-else class="w-full">
                         <WidgetTitleCard title="Transaction history" class="w-full">
+                            <template #action>
+                                {{  formatMoney(transactionsTotal) }}
+                            </template>
                             <TransactionsTable
                                 class="w-full"
                                 table-class="overflow-auto text-sm"
                                 :transactions="transactions"
-                                :parser="transactionDBToTransaction"
+                                :parser="transactionLinesDBToTransaction"
                                 @edit="''"
                             />
                         </WidgetTitleCard>
@@ -143,17 +149,21 @@ const budgets = computed(() => {
 
             <template #panel>
                 <p v-if="areEntitiesLoading"> ...loading</p>
-                <section v-else class="w-full">
-                    <OccurrenceCard :checks="occurrenceChecks" class="mx-auto mt-4" />
-                    <BudgetDetailForm
-                        v-for="budget in budgets"
-                        class="mt-5"
-                        full
-                        :category="budget.category"
-                        :item="budget"
-                        :hide-details="true"
-                        :editable="false"
-                    />
+                <section v-else class="w-full ic-scroller-slim mb-96">
+                    <OccurrenceCard :checks="occurrenceChecks" class="mx-auto mt-4 mb-4" />
+
+                    <article class="grid md:grid-cols-2 gap-2">
+                        <BudgetDetailForm
+                            v-for="budget in budgets"
+
+                            full
+                            compact
+                            :category="budget.category"
+                            :item="budget"
+                            :hide-details="true"
+                            :editable="false"
+                        />
+                    </article>
                 </section>
               </template>
             <LogerProfileModal

diff --git a/resources/js/domains/budget/budgetTotals.ts b/resources/js/domains/budget/budgetTotals.ts
@@ -140,4 +140,4 @@ const getMonthInstanceCount = (frequency: string, weekDay: string, date = new Da
 export const getBudgetTarget = (budgetTarget: BudgetTarget, date?: Date) => {
     const monthInstanceCount = getMonthInstanceCount(budgetTarget.frequency, budgetTarget.frequency_week_day, date)
     return budgetTarget.amount * monthInstanceCount
-}
+}
diff --git a/resources/js/domains/budget/components/BudgetDetailForm.vue b/resources/js/domains/budget/components/BudgetDetailForm.vue
@@ -15,21 +15,24 @@
 
     import { generateRandomColor } from "@/utils"
     import { ICategory } from '@/Modules/transactions/models/transactions';
+    import { BudgetTarget, getTargetName } from '../models/budget';
 
     const props = withDefaults(defineProps<{
         category: ICategory,
-        item: Record<string, string>,
+        item: BudgetTarget,
         parentId?: number;
         full?: boolean;
         hideDetails?: boolean,
         editable?: boolean;
+        compact?: boolean
     }>(), {
         hideDetails: true,
-        editable: true
+        editable: true,
+        compact: false,
     });
 
 
-    const emit = defineEmits(['update:category'])
+    const emit = defineEmits(['update:category', 'close', 'delete'])
 
     const form = useForm({
         category_id: null,
@@ -101,23 +104,30 @@
                 <template #prefix>
                     <div class="flex items-center justify-center px-1 ">
                         <ColorSelector
+                            :disabled="compact"
                             v-model="category.color"
                             @update:modelValue="onBlur(category)"
                         />
                     </div>
                 </template>
             </AtInput>
-            {{ category.id }}
-            <LogerButtonTab @click="$emit('close')" v-if="editable">
-                <IconClose />
-            </LogerButtonTab>
+            <section>
+                <span v-if="compact" class="capitalize">
+                    {{ getTargetName(item.target_type) }}
+                </span>
+                <LogerButtonTab @click="$emit('close')" v-if="editable">
+                    <IconClose />
+                </LogerButtonTab>
+            </section>
         </header>
 
         <BudgetTargetForm
+            v-if="!compact"
             :parent-id="parentId"
-            :category="category"
             :item="item"
+            :category="category"
             :editable="editable"
+            :compact="compact"
             @delete="$emit('delete')"
         />
 
@@ -138,6 +148,6 @@
             </section>
 
             <BudgetCategoryTransactions :category-id="category.id" v-else />
-          </section>
+        </section>
     </section>
 </template>
diff --git a/resources/js/domains/budget/components/BudgetTargetCard.vue b/resources/js/domains/budget/components/BudgetTargetCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { differenceInCalendarMonths, parseISO } from "date-fns";
 import { computed } from "vue";
+// @ts-ignore: no definitions
 import exactMath from "exact-math";
 
 import MoneyPresenter from "@/Components/molecules/MoneyPresenter.vue";
@@ -10,7 +11,7 @@ import BudgetMoneyLine from "./BudgetMoneyLine.vue";
 
 import { getBudgetTarget } from "@/domains/budget/budgetTotals";
 import { isSavingBalance, isSpendingTarget } from "@/domains/budget";
-import { BudgetTarget } from "@/domains/budget/models/budget";
+import { BudgetTarget, getTargetName } from "@/domains/budget/models/budget";
 import { ICategory } from "@/domains/transactions/models";
 import { formatDate, formatMoney, formatMonth, toOrdinals } from "@/utils";
 import LogerButton from "@/Components/atoms/LogerButton.vue";
@@ -31,11 +32,13 @@ const targetDate = computed(() => {
     } else if (props.item.frequency_month_date) {
         return `The ${toOrdinals(props.item.frequency_month_date)}`
     }
-    return formatDate(props.item.frequency_date)
+    return props.item.frequency_date && formatDate(props.item.frequency_date)
 })
 
 function instancesLeft() {
-    return  !props.item.frequency_date ? 1 : differenceInCalendarMonths(parseISO(props.item.frequency_date), parseISO(props.category.month));
+    return  !props.item.frequency_date 
+    ? 1 
+    : differenceInCalendarMonths(parseISO(props.item.frequency_date), parseISO(props.category.month));
 }
 
 const monthlyContribution = computed(() => {
@@ -74,14 +77,6 @@ const targetAmount = computed(() => {
     return getBudgetTarget(props.item)
 })
 
-const targetTypeNames = {
-    saving_balance: 'saving balance'
-}
-
-const getTargetName = (code: string) => {
-    return targetTypeNames[code] ?? code;
-}
-
 const isGoal = computed(() => {
     return isSavingBalance(props.item);
 })

diff --git a/resources/js/domains/budget/components/BudgetTargetForm.vue b/resources/js/domains/budget/components/BudgetTargetForm.vue
@@ -16,11 +16,12 @@ import { BudgetTarget } from "../models/budget";
 // import IconPicker from '../IconPicker.vue';
 
 const props = defineProps<{
-  parentId: number;
-  full: boolean;
+  parentId?: number;
+  full?: boolean;
   category: ICategory;
   editable: boolean;
   item: BudgetTarget;
+  compact?: boolean;
 }>();
 
 const emit = defineEmits(["cancel", "deleted"]);
@@ -302,7 +303,7 @@ const handleOptions = (option: string) => {
       :editable="editable"
       :is-processing="formComplete.processing"
       class="w-full"
-      v-else
+      v-else-if="!compact"
       @edit="state.isEditing = true"
       @completed="markAsComplete(item)"
     />

diff --git a/resources/js/domains/budget/models/budget.ts b/resources/js/domains/budget/models/budget.ts
@@ -21,6 +21,7 @@ export interface BudgetTarget {
     target_type:string;
     team_id:number;
     updated_at: string;
+    completed_at: string;
     user_id: number;
 }
 
@@ -82,3 +83,12 @@ export interface IBudgetCategory extends ICategory {
     overAssigned: boolean;
     subCategories: any[]
 }
+
+
+const targetTypeNames = {
+    saving_balance: 'saving balance'
+}
+
+export const getTargetName = (code: string) => {
+    return targetTypeNames[code] ?? code;
+}
diff --git a/resources/js/domains/transactions/formatters.ts b/resources/js/domains/transactions/formatters.ts
@@ -10,6 +10,17 @@ export const transactionDBToTransaction = (transactions: any[]) => {
         currencyCode: transaction.currency_code,
     }))
 }
+export const transactionLinesDBToTransaction = (transactions: any[]) => {
+    return transactions.map(transaction => ({
+        id: transaction.id || v4(),
+        date: transaction.date,
+        title: transaction.concept,
+        subtitle: transaction.account_from?.name ? `${transaction.account_from?.name} -> ${transaction.category?.name}` : '',
+        value: transaction.amount,
+        status: transaction.status,
+        currencyCode: transaction.currency_code,
+    }))
+}
 export const draftsDBToTransaction = (transactions: any[]) => {
     return transactions.map(transaction => ({
         id: transaction.id || v4(),

diff --git a/resources/js/domains/transactions/models/transactions.ts b/resources/js/domains/transactions/models/transactions.ts
@@ -23,6 +23,7 @@ export interface ITransactionLine {
 }
 
 export interface ICategory {
+    month: string;
     id?: number;
     name: string;
     color: string;

diff --git a/resources/js/utils/index.ts b/resources/js/utils/index.ts
@@ -74,7 +74,7 @@ export enum MonthTypeFormat {
     long = 'MMMM',
     monthYear = 'MMMM yyyy'
 }
-export const formatMonth = (dateString: string | Date, type: MonthTypeFormat = MonthTypeFormat.short ) => {
+export const formatMonth = (dateString: string | Date, type: string = MonthTypeFormat.short ) => {
     try {
         if (typeof dateString == 'string') {
             return format(parseISO(dateString), type)