Feat/pay credit card

resources/js/Pages/Finance/Account.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, toRefs, provide, ref, onMounted, watch , nextTick } from "vue";
-import { router, useForm } from "@inertiajs/vue3";
+import { router, useForm, usePage } from "@inertiajs/vue3";
 import { format } from "date-fns";
 import { NDatePicker } from "naive-ui";
 // @ts-expect-error: no definitions
@@ -22,7 +22,7 @@ import TransactionSearch from "@/domains/transactions/components/TransactionSear
 import TransactionTable from "@/domains/transactions/components/TransactionTable.vue";
 import DraftButtons from "@/domains/transactions/components/DraftButtons.vue";
 
-import { useTransactionModal } from "@/domains/transactions";
+import { useTransactionModal, TRANSACTION_DIRECTIONS } from "@/domains/transactions";
 // import { IServerSearchData, useServerSearch } from "@/composables/useServerSearch";
 import { tableAccountCols } from "@/domains/transactions";
 import { useAppContextStore } from "@/store";
@@ -37,6 +37,7 @@ interface CollectionData<T> {
     data: T[]
 }
 const props = withDefaults(defineProps<{
+    accountDetailTypes: {label: string, id: number| string}[];
     transactions: ITransaction[];
     stats: CollectionData<Record<string, number>>;
     accounts: IAccount[];
@@ -113,20 +114,44 @@ const reconcileForm = useForm({
 		balance: 0,
 })
 
-const reconciliation = () => {
-	reconcileForm.transform(data => ({
-		...data,
-		date: format(data.date, 'yyyy-MM-dd'),
-	})).post(`/finance/reconciliation/accounts/${selectedAccount.value?.id}`, {
-		onFinish() {
-			reconcileForm.reset()
-			reconcileForm.isVisible = false;
-            router.reload({
-                only: ['transactions', 'accounts', 'stats']
-            });
-		}
-	});
-};
+    const reconciliation = () => {
+        reconcileForm.transform(data => ({
+            ...data,
+            date: format(data.date, 'yyyy-MM-dd'),
+        })).post(`/finance/reconciliation/accounts/${selectedAccount.value?.id}`, {
+            onFinish() {
+                reconcileForm.reset()
+                reconcileForm.isVisible = false;
+                router.reload({
+                    only: ['transactions', 'accounts', 'stats']
+                });
+            }
+        });
+    };
+
+    const  { TRANSFER } = TRANSACTION_DIRECTIONS;
+    const page = usePage().props;
+
+    const creditCard = computed(() => {
+        return props.accountDetailTypes.find((type) => type.label.toLowerCase() == "credit cards");
+    });
+    const isCreditCard = computed(() => {
+        return selectedAccount.value?.account_detail_type_id == creditCard.value?.id;
+    });
+
+    const payCreditCard = () => {
+        const accountId = page.accountId
+        const debt = Math.abs(selectedAccount.value?.balance ?? 0);
+        openTransactionModal({
+            mode: TRANSFER,
+            transactionData: {
+                counter_account_id: accountId ?? "",
+                total: debt,
+                description: `Payment of ${selectedAccount.value?.name}`,
+                account_id: props.accounts.find((account) => account.balance > debt)?.id
+            },
+        })
+    }
 
 </script>
 
@@ -156,6 +181,13 @@ const reconciliation = () => {
           >
             Review Reconciliation
           </LogerButton>
+          <LogerButton
+            variant="neutral"
+            v-if="isCreditCard"
+            @click="payCreditCard"
+          >
+            Pay credit card
+          </LogerButton>
           <DraftButtons v-if="isDraft" />
         </div>
       </template>

resources/js/Pages/Finance/Budget.vue

@@ -58,7 +58,7 @@ const { serverSearchOptions } = toRefs(props);
 const { state: pageState, executeSearchWithDelay } = useServerSearch(
   serverSearchOptions,
   {
-    manual: true,
+    manual: false,
     defaultDates: true,
   }
 );

resources/js/Pages/WidgetHeaderRow.vue

@@ -22,7 +22,7 @@ defineProps<{
                 {{ valueBadge }}
             </span>
             <span>
-                {{ {{ value }}}}
+                {{ value }}
             </span>
         </h2>
         <p class="text-xs" v-if="valueSubtitle">

resources/js/composables/useServerSearch.ts

@@ -1,7 +1,6 @@
+import { endOfMonth, startOfMonth, format, parseISO } from 'date-fns';
 // import { format, parseISO } from "date-fns";
-import format from "date-fns/format";
-import parseISO from "date-fns/parseISO";
-import { reactive, Ref, watch, nextTick, computed, ref, inject, toRaw, onMounted } from "vue";
+import { reactive, Ref, watch, nextTick, computed, ref, inject } from "vue";
 import debounce from "lodash/debounce";
 
 export interface IServerSearchData {
@@ -102,10 +101,17 @@ export const parseParams = (state: SearchState) => {
     .join("&");
 };
 
-function parseDateFilters(options: Ref<Partial<IServerSearchData>>) {
-  const dates = options?.value?.filters?.date
+function parseDateFilters(options: Ref<Partial<IServerSearchData>>, setDefaultDate: boolean) {
+
+    const defaultDates = setDefaultDate ? [
+        format(startOfMonth(new Date()), 'yyyy-MM-dd'),
+        format(endOfMonth(new Date()), 'yyyy-MM-dd')
+    ] : [null, null]
+
+   const dates = options?.value?.filters?.date
     ? options.value.filters.date.split("~")
-    : [null, null];
+    : defaultDates;
+
   return {
     startDate: dates[0] && parseISO(dates[0]),
     endDate:

resources/js/domains/transactions/components/CategoryTrendsPreview.vue

@@ -36,21 +36,21 @@ const typeLabel = computed(() => {
 
 <template>
 <WidgetTitleCard
-    title="Trends preview"
+    :title="typeLabel"
     :action="{
         label: 'Go to Trends',
         iconClass: 'fa fa-chevron-right',
     }"
     @action="router.visit('/trends')"
 >
+    <template #afterActions>
+        <button @click="toggleType" class="transform animate" :class="[!isGroup && '-rotate-180']">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ic" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7C6.48 7 2 9.24 2 12c0 2.24 2.94 4.13 7 4.77V20l4-4l-4-4v2.73c-3.15-.56-5-1.9-5-2.73c0-1.06 3.04-3 8-3s8 1.94 8 3c0 .73-1.46 1.89-4 2.53v2.05c3.53-.77 6-2.53 6-4.58c0-2.76-4.48-5-10-5z"></path></svg>
+        </button>
+    </template>
     <article class="w-full">
-        <header class="flex items-center justify-between">
-            <h4 class="font-bold text-body-1/80">{{ typeLabel }}</h4>
-            <button @click="toggleType" class="transform animate" :class="[!isGroup && '-rotate-180']">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ic" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7C6.48 7 2 9.24 2 12c0 2.24 2.94 4.13 7 4.77V20l4-4l-4-4v2.73c-3.15-.56-5-1.9-5-2.73c0-1.06 3.04-3 8-3s8 1.94 8 3c0 .73-1.46 1.89-4 2.53v2.05c3.53-.77 6-2.53 6-4.58c0-2.76-4.48-5-10-5z"></path></svg>
-            </button>
-        </header>
         <DonutChart
+            class="mx-auto flex justify-center"
             style="height:270px; background: white; width: 100%"
             :series="typeData"
             label="name"

resources/js/domains/transactions/models/transactions.ts

@@ -31,7 +31,8 @@ export interface IAccount {
     name: string;
     color: string;
     balance: number;
-    reconciliations_last?: IReconciliation
+    reconciliations_last?: IReconciliation;
+    account_detail_type_id: number;
 }
 
 export interface IReconciliation {