fixed broken links in the invoices page

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-invoices/list-invoices.component.html

@@ -51,7 +51,7 @@ <h1>Invoices for the past 90 days</h1>
         <ng-template pTemplate="body" let-invoice>
           <tr>
             <td>
-              <a [routerLink]="['/accounting/loads/edit', invoice.loadId]">
+              <a [routerLink]="['/loads/edit', invoice.loadId]">
                 {{invoice.loadRef}}
               </a>
             </td>
@@ -65,7 +65,15 @@ <h1>Invoices for the past 90 days</h1>
             <td>{{invoice.createdDate | date:'mediumDate'}}</td>
             <td>{{invoice.payment.paymentDate | date:'mediumDate'}}</td>
             <td>
-              <p-button icon="bi-card-list"
+              <p-button
+                icon="bi bi-credit-card"
+                pTooltip="Make payment"
+                tooltipPosition="bottom"
+                [routerLink]="['/payment/invoice', invoice.id]">
+              </p-button>
+              <p-button 
+                styleClass="ms-2"
+                icon="bi-card-list"
                 pTooltip="View details"
                 [routerLink]="['/accounting/invoices/view', invoice.id]">
               </p-button>

src/Client/Logistics.OfficeApp/src/app/pages/employee/components/change-role-dialog/change-role-dialog.component.html

@@ -6,7 +6,6 @@
     Are you sure that you want to change employee's role? <br />
     If you want to remove role from employee then select <strong>Remove Role</strong>.
   </p>
-
 
   <form [formGroup]="form" (ngSubmit)="submit()">
     <div class="mb-3">
@@ -15,20 +14,17 @@
         optionValue="name" optionLabel="displayName" [showClear]="true" (onClear)="clearSelctedRole()" >
       </p-dropdown>
     </div>
-    <button pButton 
-      type="submit"
-      class="p-button-raised"
+    <p-button type="submit"
       icon="bi bi-pencil-square"
       label="Change Role"
       [disabled]="loading">
-    </button>
-    <button pButton 
-      type="submit"
-      class="p-button-raised p-button-danger ms-2"
+    </p-button>
+    <p-button type="button"
+      styleClass="p-button-danger ms-2"
       icon="bi bi bi-trash"
       label="Remove Role"
       [disabled]="loading"
       (click)="removeRoles()">
-    </button>
+    </p-button>
   </form>
 </p-dialog>

src/Client/Logistics.OfficeApp/src/app/pages/employee/components/change-role-dialog/change-role-dialog.component.ts

@@ -38,9 +38,9 @@ export class ChangeRoleDialogComponent implements OnInit {
   @Output() visibleChange: EventEmitter<boolean>;
 
   constructor(
-    private apiService: ApiService,
-    private userService: UserService,
-    private toastService: ToastService)
+    private readonly apiService: ApiService,
+    private readonly userService: UserService,
+    private readonly toastService: ToastService)
   {
     this.currentRoles = [];
     this.roles = [];
@@ -54,11 +54,11 @@ export class ChangeRoleDialogComponent implements OnInit {
     });
   }
 
-  public ngOnInit(): void {
+  ngOnInit(): void {
     this.fetchRoles();
   }
 
-  public submit() {
+  submit() {
     const role = this.form.value.role;
 
     if (role === '') {
@@ -81,19 +81,19 @@ export class ChangeRoleDialogComponent implements OnInit {
     });
   }
 
-  public close() {
+  close() {
     this.visible = false;
     this.visibleChange.emit(false);
     this.clearSelctedRole();
   }
 
-  public clearSelctedRole() {
+  clearSelctedRole() {
     this.form.patchValue({
       role: {name: '', displayName: ' '},
     });
   }
 
-  public removeRoles() {
+  removeRoles() {
     this.currentRoles?.forEach((role) => {
       this.removeRole(role.name);
     });

src/Client/Logistics.OfficeApp/src/app/pages/employee/list-employees/list-employees.component.html

@@ -1,11 +1,11 @@
 <div class="d-flex align-items-center">
   <h1>List Employees</h1>
-  <button pButton pRipple
-    class="p-button-lg p-button-rounded p-button-text text-black ms-2"
+  <p-button
+    styleClass="p-button-lg p-button-rounded p-button-text text-black ms-2"
     icon="bi bi-plus-square-fill"
     pTooltip="Add a new employee"
     [routerLink]="['/employees/add']">
-  </button>
+  </p-button>
 </div>
 <hr class="w-100">
 
@@ -45,28 +45,23 @@ <h1>List Employees</h1>
               Salary Type
               <p-sortIcon field="salaryType"></p-sortIcon>
             </th>
-            <th>
-              Role
-            </th>
+            <th>Role</th>
             <th pSortableColumn="joinedDate">
               Joined Date
               <p-sortIcon field="joinedDate"></p-sortIcon>
             </th>
+            <th>Action</th>
           </tr>
         </ng-template>
         <ng-template pTemplate="body" let-employee>
           <tr>
-            <td>
-              <a [routerLink]="['/employees/edit', employee.id]">
-                {{employee.fullName}}
-              </a>
-            </td>
+            <td>{{employee.fullName}}</td>
             <td>{{employee.email}}</td>
             <td>{{employee.phoneNumber}}</td>
             <td>
-              <span *ngIf="employee.salaryType === 3 else fixedSalary">
+              <ng-container *ngIf="employee.salaryType === 3 else fixedSalary">
                 {{employee.salary | percent}}
-              </span>
+              </ng-container>
 
               <ng-template #fixedSalary>
                 <span>{{employee.salary | currency}}</span>
@@ -75,6 +70,14 @@ <h1>List Employees</h1>
             <td>{{getSalaryTypeDesc(employee.salaryType)}}</td>
             <td>{{employee.roles[0]?.displayName}}</td>
             <td>{{employee.joinedDate | date:'mediumDate'}}</td>
+            <td class="overflow-visible">
+              <p-button
+                icon="bi bi-pencil"
+                pTooltip="Edit employee details"
+                tooltipPosition="bottom"
+                [routerLink]="['/employees/edit', employee.id]">
+              </p-button>
+            </td>
           </tr>
         </ng-template>
       </p-table>