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

Chore: Updated all dependencies in overlord

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

@@ -47,7 +47,9 @@
             [displayWith]="displayFn"
             (optionSelected)="selected($event)"
           >
-            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{ employee.name }}</mat-option>
+            @for (employee of employees | async; track employee) {
+              <mat-option [value]="employee">{{ employee.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
@@ -64,9 +66,11 @@
           <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex flex-auto">
             <mat-select formControlName="attendanceType" name="attendanceType">
-              <mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
-                {{ at.name }}
-              </mat-option>
+              @for (at of attendanceTypes; track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-cell>
         </ng-container>
@@ -76,19 +80,20 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon class="no-bg" *ngIf="!form.controls.attendances.controls[i].controls.attendanceType.pristine"
-              >new_releases</mat-icon
-            >
+            @if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
+              <mat-icon class="no-bg">new_releases</mat-icon>
+            }
             <mat-chip-set class="no-bg">
-              <mat-chip-option
-                *ngIf="row.hoursWorked.length"
-                class="no-bg"
-                selected
-                selectable="false"
-                [color]="row.fullDay === true ? 'primary' : 'warn'"
-              >
-                {{ row.hoursWorked }}
-              </mat-chip-option>
+              @if (row.hoursWorked.length) {
+                <mat-chip-option
+                  class="no-bg"
+                  selected
+                  selectable="false"
+                  [color]="row.fullDay === true ? 'primary' : 'warn'"
+                >
+                  {{ row.hoursWorked }}
+                </mat-chip-option>
+              }
             </mat-chip-set>
           </mat-cell>
         </ng-container>

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

@@ -3,7 +3,7 @@ import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';