Moved to Angular v20 and Tailwind v4 plus all related dependencies

Renamed Docker directory.

Also serving static files from FastAPI.

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -1,28 +1,29 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatButton } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
-import { MatChipSet, MatChipOption } from '@angular/material/chips';
+import { MatCard, MatCardActions, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
+import { MatChipOption, MatChipSet } from '@angular/material/chips';
 import { MatOption } from '@angular/material/core';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
+import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 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 {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
   MatCell,
-  MatHeaderRowDef,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
   MatHeaderRow,
-  MatRowDef,
+  MatHeaderRowDef,
   MatRow,
+  MatRowDef,
+  MatTable,
 } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
@@ -31,10 +32,8 @@ import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { AttendanceType } from '../attendance/attendance-type';
 import { AuthService } from '../auth/auth.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { Employee } from '../employee/employee';
 import { EmployeeService } from '../employee/employee.service';
-
 import { EmployeeAttendance } from './employee-attendance';
 import { EmployeeAttendanceDataSource } from './employee-attendance-datasource';
 import { EmployeeAttendanceItem } from './employee-attendance-item';
@@ -44,7 +43,6 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
   selector: 'app-employee-attendance',
   templateUrl: './employee-attendance.component.html',
   styleUrls: ['./employee-attendance.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -81,6 +79,14 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
   ],
 })
 export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
+  private auth = inject(AuthService);
+  private ser = inject(EmployeeAttendanceService);
+  private employeeSer = inject(EmployeeService);
+
   @ViewChild('employeeElement', { static: true }) employeeElement!: ElementRef<HTMLInputElement>;
   @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
   public employeeAttendanceObservable = new BehaviorSubject<EmployeeAttendanceItem[]>([]);
@@ -111,15 +117,7 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
     this.startDate.nativeElement.select();
   }
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private snackBar: MatSnackBar,
-    private auth: AuthService,
-    private ser: EmployeeAttendanceService,
-    private employeeSer: EmployeeService,
-  ) {
+  constructor() {
     this.form = new FormGroup({
       startDate: new FormControl(new Date(), { nonNullable: true }),
       finishDate: new FormControl(new Date(), { nonNullable: true }),

overlord/src/app/employee-attendance/employee-attendance.routes.ts

@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { attendanceTypeResolver } from '../attendance/attendance-type.resolver';
 import { authGuard } from '../auth/auth-guard.service';
-
 import { EmployeeAttendanceComponent } from './employee-attendance.component';
 import { employeeAttendanceResolver } from './employee-attendance.resolver';
 

overlord/src/app/employee-attendance/employee-attendance.service.ts

@@ -1,10 +1,9 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable, of as observableOf } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
-
 import { EmployeeAttendance } from './employee-attendance';
 
 const url = '/api/employee-attendance';
@@ -12,10 +11,8 @@ const serviceName = 'EmployeeAttendanceService';
 
 @Injectable({ providedIn: 'root' })
 export class EmployeeAttendanceService {
-  constructor(
-    private http: HttpClient,
-    private log: ErrorLoggerService,
-  ) {}
+  private http = inject(HttpClient);
+  private log = inject(ErrorLoggerService);
 
   get(id: string | null, startDate: string | null, finishDate: string | null): Observable<EmployeeAttendance> {
     const getUrl: string = id === null ? url : `${url}/${id}`;

overlord/src/app/employee-attendance/employee-attendance.ts

@@ -1,5 +1,4 @@
 import { Employee } from '../employee/employee';
-
 import { EmployeeAttendanceItem } from './employee-attendance-item';
 
 export class EmployeeAttendance {