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

Chore: Updated all dependencies in overlord

overlord/src/app/closing-stock/closing-stock.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Closing Stock</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>
@@ -13,9 +15,11 @@
         <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-label>Department</mat-label>
           <mat-select formControlName="costCentre" name="costCentre">
-            <mat-option *ngFor="let at of costCentres" [value]="at.id">
-              {{ at.name }}
-            </mat-option>
+            @for (at of costCentres; track at) {
+              <mat-option [value]="at.id">
+                {{ at.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
@@ -81,9 +85,11 @@
                 name="costCentre"
                 (selectionChange)="updateDepartment($event.value, row)"
               >
-                <mat-option *ngFor="let at of costCentres" [value]="at.id">
-                  {{ at.name }}
-                </mat-option>
+                @for (at of costCentres; track at) {
+                  <mat-option [value]="at.id">
+                    {{ at.name }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </mat-cell>
@@ -111,16 +117,11 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="canDelete()"
-      [disabled]="info.posted || !auth.allowed('post-vouchers')"
-    >
-      {{ info.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="canDelete()" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (canDelete()) {
+      <button mat-raised-button (click)="post()" [disabled]="info.posted || !auth.allowed('post-vouchers')">
+        {{ info.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/closing-stock/closing-stock.component.ts

@@ -5,7 +5,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { AuthService } from '../auth/auth.service';
 import { CostCentre } from '../core/cost-centre';