Chore: Upgraded to Angular v17 and all the refactoring for that

Chore: Updated all dependencies in overlord

overlord/src/app/ledger/ledger.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Ledger</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -52,7 +54,9 @@
             [displayWith]="displayFn"
             (optionSelected)="selected($event)"
           >
-            <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+            @for (account of accounts | async; track account) {
+              <mat-option [value]="account">{{ account.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>

overlord/src/app/ledger/ledger.component.ts

@@ -4,7 +4,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';