/* * Task: Debug Expense Tracker Component * * The `ExpenseListComponent` is intended to display a list of expenses, * calculate the total expense, and allow filtering by category. * * Currently, the total expense calculation is incorrect, and the category * filter does not update the displayed list. * * Your goal is to identify and fix these logical bugs to ensure: * 1. The total expense accurately reflects the sum of all visible expenses. * 2. Filtering by category correctly updates the displayed expense list. */ import { Component, OnInit } from '@angular/core'; import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; interface Expense { id: number; category: string; amount: number; date: Date; } @Component({ selector: 'app-expense-list', standalone: true, imports: [CommonModule, FormsModule], template: `

Expense Tracker

Category	Amount	Date
{{ expense.category }}	{{ expense.amount \| currency:'INR':'symbol':'1.2-2' }}	{{ expense.date \| date:'shortDate' }}

Total Expenses: {{ calculateTotal() | currency:'INR':'symbol':'1.2-2' }}

`, styles: [` table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .filter-section { margin-bottom: 15px; } select { padding: 5px; } `] }) export class ExpenseListComponent implements OnInit { expenses: Expense[] = [ { id: 1, category: 'Food', amount: 500, date: new Date('2023-10-26') }, { id: 2, category: 'Travel', amount: 1200, date: new Date('2023-10-25') }, { id: 3, category: 'Movie', amount: 350, date: new Date('2023-10-26') }, { id: 4, category: 'Food', amount: 200, date: new Date('2023-10-24') }, { id: 5, category: 'Utilities', amount: 750, date: new Date('2023-10-23') } ]; selectedCategory: string = ''; categories: string[] = []; ngOnInit() { this.categories = [...new Set(this.expenses.map(e => e.category))]; } // BUG: This getter is not reactive to `selectedCategory` changes. get filteredExpenses(): Expense[] { if (!this.selectedCategory) { return this.expenses; } return this.expenses.filter(expense => expense.category === this.selectedCategory); } // BUG: This method calculates total based on *all* expenses, not filtered ones. calculateTotal(): number { return this.expenses.reduce((sum, expense) => sum + expense.amount, 0); } }