Completed Budget App Assignment

angular.json

@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "76107f24-8e12-4df1-a9df-8af53d7f2aea"
   }
 }

src/app/app.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { BalanceComponent } from './components/balance/balance.component';
+import { SavingComponent } from './components/saving/saving.component';
+import { TransactionComponent } from './components/transaction/transaction.component';
 
 @Component({
   selector: 'app-root',

src/app/app.routes.ts

@@ -1,3 +1,23 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        loadComponent: ()=> {
+            return import('./components/transaction/transaction.component').then((m) => m.TransactionComponent);
+        },
+    },
+    {
+        path: 'balance',
+        loadComponent: ()=> {
+            return import('./components/balance/balance.component').then((m) => m.BalanceComponent);
+        },
+    },
+    {
+        path: 'saving',
+        loadComponent: ()=> {
+            return import('./components/saving/saving.component').then((m) => m.SavingComponent);
+        },
+    },
+];

src/app/components/balance/balance.component.css

@@ -0,0 +1,9 @@
+.nav-button {
+  margin-right: 10px;
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

src/app/components/balance/balance.component.html

@@ -0,0 +1,12 @@
+<h2>Balance</h2>
+<p>Current Balance: ${{ budgetService.balance }}</p>
+<p>Savings: ${{ budgetService.savings }}</p>
+
+<input type="number" [(ngModel)]="transferAmount" placeholder="Amount" />
+<button (click)="transferToSavings()">Transfer to Savings</button>
+<button (click)="transferFromSavings()">Transfer from Savings</button>
+
+<div style="margin-top: 20px;">
+  <button (click)="goToSavings()" class="nav-button">Go to Savings</button>
+  <button (click)="goToTransaction()" class="nav-button">Go to Transaction</button>
+</div>

src/app/components/balance/balance.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BalanceComponent } from './balance.component';
+
+describe('BalanceComponent', () => {
+  let component: BalanceComponent;
+  let fixture: ComponentFixture<BalanceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BalanceComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BalanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/balance/balance.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { BudgetService } from '../../services/budget-service.service';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'app-balance',
+  templateUrl: './balance.component.html',
+  styleUrl: './balance.component.css',
+  imports: [FormsModule]
+})
+export class BalanceComponent {
+  transferAmount: number = 0;
+
+  constructor(public budgetService: BudgetService,private router: Router) {}
+
+  transferToSavings() {
+    this.budgetService.transferToSavings(this.transferAmount);
+    this.transferAmount = 0;
+  }
+
+  transferFromSavings() {
+    this.budgetService.transferFromSavings(this.transferAmount);
+    this.transferAmount = 0;
+  }
+
+  goToSavings() {
+    this.router.navigate(['/saving']);
+  }
+
+  goToTransaction() {
+    this.router.navigate(['/']);
+  }
+}

src/app/components/saving/saving.component.css

@@ -0,0 +1,9 @@
+.nav-button {
+  margin-right: 10px;
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

src/app/components/saving/saving.component.html

@@ -0,0 +1,21 @@
+<h2>Saving Goals</h2>
+
+<input
+  type="number"
+  [(ngModel)]="savingTarget"
+  placeholder="Set saving target"
+/>
+<button (click)="setTarget()">Set Target</button>
+
+<p>Saved: ${{ budgetService.savings }} / ${{ budgetService.savingTarget }}</p>
+
+<div style="background: #eee; height: 20px; width: 100%; margin-top: 10px;">
+  <div
+    style="background: green; height: 100%;"
+    [style.width.%]="budgetService.getSavingsProgress()"
+  ></div>
+</div>
+
+<br />
+<button (click)="goToBalance()" class="nav-button">Go to Balance</button>
+<button (click)="goToTransaction()" class="nav-button">Go to Transactions</button>

src/app/components/saving/saving.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingComponent } from './saving.component';
+
+describe('SavingComponent', () => {
+  let component: SavingComponent;
+  let fixture: ComponentFixture<SavingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SavingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SavingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/saving/saving.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { BudgetService } from '../../services/budget-service.service';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'app-saving',
+  templateUrl: './saving.component.html',
+  styleUrl: './saving.component.css',
+  imports: [FormsModule]
+})
+export class SavingComponent {
+  savingTarget: number = 0;
+  constructor(public budgetService: BudgetService, private router: Router) {}
+
+  ngOnInit() {
+    this.savingTarget = this.budgetService.savingTarget;
+  }
+
+  setTarget() {
+    this.budgetService.setSavingTarget(this.savingTarget);
+  }
+
+  goToBalance() {
+    this.router.navigate(['/balance']);
+  }
+
+  goToTransaction() {
+    this.router.navigate(['/']);
+  }
+}

src/app/components/transaction/transaction.component.css

@@ -0,0 +1,9 @@
+.nav-button {
+  margin-right: 10px;
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

src/app/components/transaction/transaction.component.html

@@ -0,0 +1,27 @@
+<h2>Transactions</h2>
+
+<form (ngSubmit)="addTransaction()">
+  <input
+    type="number"
+    [(ngModel)]="amount"
+    name="amount"
+    required
+    placeholder="Amount"
+  />
+  <select [(ngModel)]="type" name="type">
+    <option value="income">Income</option>
+    <option value="expense">Expense</option>
+  </select>
+  <button type="submit">Add</button>
+</form>
+
+<ul>
+  <li *ngFor="let t of budgetService.transactions">
+    {{ t.type }}: ${{ t.amount }}
+  </li>
+</ul>
+
+<div style="margin-top: 20px;">
+  <button (click)="goToBalance()" class="nav-button">Go to Balance</button>
+  <button (click)="goToSavings()" class="nav-button">Go to Savings</button>
+</div>

src/app/components/transaction/transaction.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransactionComponent } from './transaction.component';
+
+describe('TransactionComponent', () => {
+  let component: TransactionComponent;
+  let fixture: ComponentFixture<TransactionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransactionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TransactionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/transaction/transaction.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { BudgetService } from '../../services/budget-service.service';
+import { FormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'app-transaction',
+  templateUrl: './transaction.component.html',
+  styleUrls: ['./transaction.component.css'],
+  imports: [FormsModule, NgFor]
+})
+export class TransactionComponent {
+  amount: number = 0;
+  type: 'income' | 'expense' = 'income';
+
+  constructor(public budgetService: BudgetService,private router: Router) {}
+
+  addTransaction() {
+    if (this.amount > 0) {
+      this.budgetService.addTransaction(this.amount, this.type);
+      this.amount = 0;
+    }
+  }
+
+  goToBalance() {
+    this.router.navigate(['/balance']);
+  }
+
+  goToSavings() {
+    this.router.navigate(['/saving']);
+  }
+}

src/app/services/budget-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BudgetServiceService } from './budget-service.service';
+
+describe('BudgetServiceService', () => {
+  let service: BudgetServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BudgetServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});