Task3 update balance navbar bug v1

frontend/src/app/app.module.ts

@@ -28,7 +28,7 @@ import { balanceReducer } from './state/balance.reducer';
 import { RewardPointsComponent } from './reward-points/reward-points.component';
 import {AuthInterceptor} from "./services/auth.interceptor";
 import { ApplyLoanComponent } from './apply-loan/apply-loan.component';
-
+import { NavbarBalanceComponent } from './components/navbar/navbar-balance.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +45,7 @@ import { ApplyLoanComponent } from './apply-loan/apply-loan.component';
     ProfileComponent,
     RewardPointsComponent,
     ApplyLoanComponent,
+    NavbarBalanceComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/components/navbar/navbar-balance.component.ts

@@ -0,0 +1,63 @@
+import { Component } from "@angular/core";
+import { MenuList, Account } from "src/app/dto/types";
+import { menuList } from "src/app/menu";
+import { AuthenticationService } from "src/app/services/authentication.service";
+import { Store } from "@ngrx/store";
+import { updateBalance } from "src/app/state/balance.actions";
+import { DarkThemeSelectorService } from "src/app/services/themeToggle.service";
+import { Observable } from "rxjs";
+import { selectBalance, selectBalanceLoaded } from "src/app/state/balance.selectors";
+import { skip, take, map, filter, withLatestFrom } from "rxjs/operators";
+
+@Component({
+    selector: "app-navbar-balance",
+    template: `
+        <span 
+            id="balance-display" 
+            [ngStyle]="{ 'color': getBalanceColor((balance$ | async) || 0) }"
+        >
+            Balance: $ {{ numberFormat((balance$ | async) || 0) }}
+        </span>
+    `,
+})
+export class NavbarBalanceComponent {
+    public menuList: MenuList[] = menuList;
+    public isAuth = false;
+    public account?: Account;
+    public balance$!: Observable<number>;
+
+    constructor(
+        private authenticationService: AuthenticationService,
+        private store: Store,
+        protected darkThemeSelectorService: DarkThemeSelectorService,
+    ) {
+        this.authenticationService.isAuthenticate().subscribe((status: boolean) => {
+            this.isAuth = status;
+        });
+
+        this.authenticationService.account().subscribe((account: Account) => {
+            this.account = account;
+            this.store.dispatch(updateBalance({ balance: Number(account.balance) || 0 }));
+        });
+
+        this.balance$ = this.store.select(selectBalance).pipe(
+            withLatestFrom(this.store.select(selectBalanceLoaded)),
+            filter(([_, loaded]: [number, boolean]) => loaded),
+            map(([value]) => value),
+            take(1)
+        );
+    }
+
+    numberFormat(value: any): string {
+        if (!value) return "0.00";
+        return value;
+    }
+
+    getBalanceColor(balance: any): string {
+        const value = Number(this.numberFormat(balance));
+        if (value === 0) return "pink";
+        if (value > 0 && value >= 500) return "orange";
+        if (value > 500) return "green";
+        return "black";
+    }
+}

frontend/src/app/components/navbar/navbar.component.html

@@ -21,6 +21,7 @@
         class="text-primary-blue cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
         type="button"
         (click)="toggleNavbar()"
+        aria-label="Open main menu"
       >
         <span class="sr-only">Open main menu</span>
         <svg
@@ -46,11 +47,10 @@
       class="lg:flex lg:flex-grow items-center"
     >
       <ul class="flex flex-col lg:flex-row list-none ml-auto">
-        <li *ngIf="balance !== 0" class="nav-item">
-          <div
-            class="px-3 py-2 flex items-center text-lg leading-snug text-red-500 font-bold"
-          >
-            Balance: $ {{ numberFormat(balance) }}
+        <!-- Balance moved to its own component -->
+        <li class="nav-item" *ngIf="isAuth">
+          <div class="px-3 py-2 flex items-center text-lg leading-snug text-red-500 font-bold">
+            <app-navbar-balance></app-navbar-balance>
           </div>
         </li>
         <li *ngFor="let menu of menuList" class="nav-item">

frontend/src/app/components/navbar/navbar.component.ts

@@ -9,6 +9,7 @@ import { HttpErrorResponse } from "@angular/common/http";
 import { Store } from "@ngrx/store";
 import { updateBalance } from "src/app/state/balance.actions";
 import { AppTheme, DarkThemeSelectorService } from "src/app/services/themeToggle.service";
+import { take } from "rxjs/operators";
 
 @Component({
   selector: "app-navbar",
@@ -21,7 +22,7 @@ export class NavbarComponent {
   public currentUrl?: string;
   public isAuth: boolean = false;
   public account?: Account;
-  public balance: Number = 0;
+  public balance!: number | string;
   public isDarkMode: boolean = false;
   public themeText = '';
 
@@ -38,14 +39,20 @@ export class NavbarComponent {
     this.authenticationService.isAuthenticate().subscribe((status: boolean) => {
       this.isAuth = status;
     });
+  }
+  getBalance() {
+    this.store
+      .select('balance')
+      .pipe(take(1))
+      .subscribe((state: any) => {
+        const val = (typeof state === 'object' && state.data?.balaance !== undefined)
+          ? state.balance
+          : state;
 
-    this.authenticationService.account().subscribe((account: Account) => {
-      this.account = account;
-      this.store.dispatch(updateBalance({ balance: Number(account.balance) }));
-      this.balance = Number(account.balance);
-    });
+        this.balance = String(val ?? '');
+      });
   }
-  getBalance() {}
+
 
   ngOnInit() {
     // Always set to light theme
@@ -85,14 +92,4 @@ export class NavbarComponent {
       },
     });
   }
-  numberFormat(value: any) {
-    if (!value) return "0.00";
-    if (typeof value === "string") {
-      return Number(value).toFixed(2);
-    }
-    if (typeof value === "number") {
-      return value.toFixed(2);
-    }
-    return "0.00";
-  }
 }

frontend/src/app/send-money/send-money.component.ts

@@ -20,6 +20,7 @@ import { updateBalance } from 'src/app/state/balance.actions';
   styleUrls: ['./send-money.component.scss']
 })
 export class SendMoneyComponent {
+	public resData?: { balance: number };
 	public isAuth: boolean = false;
 	public account?: Account;
 	public accountId!: number
@@ -92,6 +93,11 @@ export class SendMoneyComponent {
 		return "";
 	}
 
+	updateBalanceFromResponse() {
+		const balance = Number(this.account?.balance) - this.sendMoneyForm.get("transferAmount")!.value
+		this.store.dispatch(updateBalance({ balance: balance }));
+	}
+
   	onSubmit() {
 		if (this.sendMoneyForm.invalid) {
 			this.toastr.error("Please fill in all the required fields.");
@@ -124,8 +130,7 @@ export class SendMoneyComponent {
 							this.loader = false;
 						},
 						complete: () => {
-							const balance = Number(this.account?.balance) - this.sendMoneyForm.get("transferAmount")!.value
-							this.store.dispatch(updateBalance({ balance: balance }));
+							this.updateBalanceFromResponse();
 
 							this.loader = false;
 							this.toastr.success("Money Sent Successfully");

frontend/src/app/state/balance.reducer.ts

@@ -1,11 +1,22 @@
+// balance.reducer.ts
 import { createReducer, on } from '@ngrx/store';
 import { updateBalance } from './balance.actions';
 
-export const initialState = {
-    balance: 0,
+export interface BalanceState {
+  value: number;
+  loaded: boolean;
+}
+
+export const initialState: BalanceState = {
+  value: 0,
+  loaded: false
 };
 
 export const balanceReducer = createReducer(
-    initialState,
-    on(updateBalance, (state, { balance }) => ({ ...state, balance })),
-  );
+  initialState,
+  on(updateBalance, (state, { balance }) => ({
+    ...state,
+    value: balance,
+    loaded: true   
+  }))
+);

frontend/src/app/state/balance.selectors.ts

@@ -0,0 +1,15 @@
+// balance.selectors.ts
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import { BalanceState } from './balance.reducer';
+
+export const selectBalanceState = createFeatureSelector<BalanceState>('balance');
+
+export const selectBalance = createSelector(
+  selectBalanceState,
+  (state: BalanceState) => state.value
+);
+
+export const selectBalanceLoaded = createSelector(
+  selectBalanceState,
+  (state: BalanceState) => state.loaded
+);