Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="donate"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Amount Collected' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -21,7 +21,7 @@
     <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
-    <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
+    <div *ngIf="showFallback" class="fallback align-center-center">
       <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="money-bill"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Amount Pending / Disbursed' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -21,7 +21,7 @@
     <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
-    <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
+    <div *ngIf="showFallback" class="fallback align-center-center">
       <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="chart-line"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Client Trends' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">

src/app/home/dashboard/dashboard.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
-    <div fxLayout="row" class="search">
+  <mat-card class="card layout-column gap-40px">
+    <div class="layout-row search">
       <mat-card-content>
         <mat-form-field>
           <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
@@ -15,13 +15,13 @@
       </mat-card-content>
     </div>
 
-    <div fxLayout="row" class="top-card">
+    <div class="layout-row top-card">
       <div class="trends-bar">
         <mifosx-client-trends-bar></mifosx-client-trends-bar>
       </div>
     </div>
 
-    <div fxLayout="row" class="bottom-card">
+    <div class="layout-row bottom-card">
       <div class="amount-disbursed">
         <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
       </div>