feat: Implement direct transaction status updates via API, add navigation to edit transactions, and display toasts for update operations.

src/components/dashboard/UpcomingTransactions.vue

@@ -5,6 +5,17 @@ import dayjs from 'dayjs';
 import { formatAmount } from '@/utils/utils';
 import { Checkbox } from 'primevue';
 import { Divider } from 'primevue';
+import { useRouter } from 'vue-router';
+import { UpdateTransactionDTO } from '@/models/transaction';
+import { useSpaceStore } from '@/stores/spaceStore';
+import { TransactionService } from '@/services/transactions-service';
+import { useToast } from 'primevue';
+
+const toast = useToast()
+const spaceStore = useSpaceStore()
+
+const router = useRouter()
+
 
 const props = defineProps<{
     transactions: Transaction[];
@@ -33,8 +44,27 @@ const getAmountColor = (type: string) => {
     return type === 'INCOME' ? '!text-green-600 !dark:text-green-400' : '!text-red-600 !dark:text-red-400';
 };
 
-const setTxDone = (tx: Transaction) => {
-    emits("set-tx-done", tx)
+const setTransactionDone = async (transaction: Transaction): Promise<void> => {
+    const updateTransaction = {
+        type: transaction.type,
+        kind: transaction.kind,
+        categoryId: transaction.category.id,
+        comment: transaction.comment,
+        amount: transaction.amount,
+        fees: 0,
+        isDone: transaction.isDone,
+        date: new Date(transaction.date),
+    } as UpdateTransactionDTO
+    try {
+        await TransactionService.updateTransaction(spaceStore.selectedSpaceId as number, transaction.id, updateTransaction)
+    } catch (error) {
+        toast.add({
+            severity: 'error',
+            summary: 'Failed to update transactions.',
+            detail: String(error),
+            life: 3000,
+        })
+    }
 }
 
 
@@ -51,7 +81,8 @@ const setTxDone = (tx: Transaction) => {
             <span v-if="transactions.length == 0">Looks like you haven't plan any transactions yet. <router-link
                     to="/transactions/create" class="!text-blue-400">Try to create some.</router-link></span>
             <div v-else v-for="key in transactions.keys()" :key="transactions[key].id"
-                class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
+                class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold "
+                @click="router.push(`/transactions/${transactions[key].id}/edit`)">
                 <div class="flex flex-row  w-full items-center gap-4">
                     <Checkbox v-model="transactions[key].isDone" binary class="text-3xl"
                         @change="setTransactionDone(transactions[key])">