Moved to Angular v20 and Tailwind v4 plus all related dependencies

Renamed Docker directory.

Also serving static files from FastAPI.

overlord/src/app/account/account-detail/account-detail.component.ts

@@ -1,35 +1,34 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import {
   MatCard,
-  MatCardHeader,
-  MatCardTitleGroup,
-  MatCardTitle,
-  MatCardContent,
   MatCardActions,
+  MatCardContent,
+  MatCardHeader,
+  MatCardTitle,
+  MatCardTitleGroup,
 } from '@angular/material/card';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatOption } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSuffix, MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
 import { MatSelect } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Account } from '../../core/account';
 import { AccountType } from '../../core/account-type';
 import { AccountService } from '../../core/account.service';
 import { CostCentre } from '../../core/cost-centre';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-account-detail',
   templateUrl: './account-detail.component.html',
   styleUrls: ['./account-detail.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -50,6 +49,12 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
   ],
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
+  private ser = inject(AccountService);
+
   @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
   form: FormGroup<{
     code: FormControl<number | string>;
@@ -64,13 +69,7 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
   costCentres: CostCentre[] = [];
   item: Account = new Account();
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private snackBar: MatSnackBar,
-    private ser: AccountService,
-  ) {
+  constructor() {
     this.form = new FormGroup({
       code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
       name: new FormControl<string | null>(null),

overlord/src/app/account/account-list.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Account } from '../core/account';
-
 import { accountListResolver } from './account-list.resolver';
 
 describe('accountListResolver', () => {

overlord/src/app/account/account-list/account-list.component.ts

@@ -1,23 +1,23 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatAnchor } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitleGroup, MatCardTitle, MatCardContent } from '@angular/material/card';
+import { MatCard, MatCardContent, MatCardHeader, MatCardTitle, MatCardTitleGroup } from '@angular/material/card';
 import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
   MatCell,
-  MatHeaderRowDef,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
   MatHeaderRow,
-  MatRowDef,
+  MatHeaderRowDef,
   MatRow,
+  MatRowDef,
+  MatTable,
 } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -25,14 +25,12 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
 import { AccountType } from '../../core/account-type';
-
 import { AccountListDataSource } from './account-list-datasource';
 
 @Component({
   selector: 'app-account-list',
   templateUrl: './account-list.component.html',
   styleUrls: ['./account-list.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -63,6 +61,8 @@ import { AccountListDataSource } from './account-list-datasource';
   ],
 })
 export class AccountListComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+
   @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
   @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort!: MatSort;
@@ -78,7 +78,7 @@ export class AccountListComponent implements OnInit, AfterViewInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'type', 'isActive', 'isReconcilable', 'costCentre'];
 
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.form = new FormGroup({
       filter: new FormControl<string>('', { nonNullable: true }),
     });

overlord/src/app/account/account-type.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { AccountType } from '../core/account-type';
-
 import { accountTypeResolver } from './account-type.resolver';
 
 describe('accountTypeResolver', () => {

overlord/src/app/account/account-type.resolver.ts

@@ -2,7 +2,6 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 
 import { AccountType } from '../core/account-type';
-
 import { AccountTypeService } from './account-type.service';
 
 export const accountTypeResolver: ResolveFn<AccountType[]> = () => {

overlord/src/app/account/account-type.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -13,10 +13,8 @@ const serviceName = 'AccountTypeService';
   providedIn: 'root',
 })
 export class AccountTypeService {
-  constructor(
-    private http: HttpClient,
-    private log: ErrorLoggerService,
-  ) {}
+  private http = inject(HttpClient);
+  private log = inject(ErrorLoggerService);
 
   list(): Observable<AccountType[]> {
     return this.http.get<AccountType[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<

overlord/src/app/account/account.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Account } from '../core/account';
-
 import { accountResolver } from './account.resolver';
 
 describe('accountResolver', () => {

overlord/src/app/account/account.routes.ts

@@ -2,10 +2,9 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
-
 import { AccountDetailComponent } from './account-detail/account-detail.component';
-import { AccountListComponent } from './account-list/account-list.component';
 import { accountListResolver } from './account-list.resolver';
+import { AccountListComponent } from './account-list/account-list.component';
 import { accountTypeResolver } from './account-type.resolver';
 import { accountResolver } from './account.resolver';