feat(infra): implement delete functionality for transactions with UI integration

src/FiscalOS.Web/src/components/TransactionCard.vue

@@ -5,6 +5,10 @@
     transaction: Transaction;
   }>();
 
+  const emit = defineEmits<{
+    delete: [id: string];
+  }>();
+
   function formatDate(date: string) {
     const formatter = new Intl.DateTimeFormat('en-US', {
       year: 'numeric',
@@ -39,6 +43,14 @@
     <div class="bottom">
       <p>{{ transaction.description }}</p>
     </div>
+    <div class="actions">
+      <button
+        class="delete-btn"
+        @click="emit('delete', transaction.id)"
+      >
+        Delete
+      </button>
+    </div>
   </div>
 </template>
 
@@ -69,4 +81,26 @@
     font-size: 0.875rem;
     color: #666666;
   }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .delete-btn {
+    background: none;
+    border: 0.0625rem solid var(--state-error);
+    border-radius: 0.25rem;
+    color: var(--state-error);
+    cursor: pointer;
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .delete-btn:hover {
+    background: var(--state-error);
+    color: var(--text-primary);
+  }
 </style>

src/FiscalOS.Web/src/services/transactionService.ts

@@ -20,6 +20,7 @@ export class TransactionServiceFactory implements ITransactionServiceFactory {
 
 export interface ITransactionService {
   get: (pageNumber?: number, pageSize?: number) => Promise<Result<Page<Transaction>, Error[]>>;
+  deleteById: (id: string) => Promise<Result<boolean, Error[]>>;
 }
 
 export class TransactionService implements ITransactionService {
@@ -32,6 +33,24 @@ export class TransactionService implements ITransactionService {
     this.client = client;
   }
 
+  async deleteById(id: string): Promise<Result<boolean, Error[]>> {
+    const url = this.endpoints.get + '/' + id;
+    const request = new ClientRequest(url);
+
+    try {
+      const res = await this.client.delete(request);
+
+      if (res.ok === false) {
+        return Err([new Error('Failed to delete transaction.')]);
+      }
+
+      return Ok(true);
+    } catch (error) {
+      console.error(error);
+      return Err([new Error('Failed to delete transaction.')]);
+    }
+  }
+
   async get(pageNumber: number = 1, pageSize: number = 500) {
     const queryParams = new URLSearchParams({
       pageNumber: pageNumber.toString(),

src/FiscalOS.Web/src/views/TransactionsView.vue

@@ -10,6 +10,17 @@
 
   const transactions = ref<Transaction[]>([]);
 
+  async function handleDelete(id: string) {
+    const result = await transactionService.deleteById(id);
+
+    if (result.err) {
+      alert(result.val.map(e => e.message).join('\n'));
+      return;
+    }
+
+    transactions.value = transactions.value.filter(t => t.id !== id);
+  }
+
   onMounted(async () => {
     const result = await transactionService.get();
 
@@ -30,7 +41,10 @@
         v-for="transaction in transactions"
         :key="transaction.id"
       >
-        <TransactionCard :transaction="transaction" />
+        <TransactionCard
+          :transaction="transaction"
+          @delete="handleDelete"
+        />
       </li>
     </ul>
   </div>