source: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.html

<div class="flex flex-col gap-5">
  <table mat-table [dataSource]="users" class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> id </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="address">
      <th mat-header-cell *matHeaderCellDef> address </th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>

    <ng-container matColumnDef="phoneNumber">
      <th mat-header-cell *matHeaderCellDef> address </th>
      <td mat-cell *matCellDef="let element"> {{element.phoneNumber}} </td>
    </ng-container>

    <ng-container matColumnDef="roles">
      <th mat-header-cell *matHeaderCellDef> roles </th>
      <td mat-cell *matCellDef="let element">
        @for(role of allRoles; track $index){
          <mat-checkbox [name]="role" [value]="role" (change)="onSelectRole(element.id, $event)" [checked]="checked(role, element.roles)" class="example-margin">{{role}}</mat-checkbox>
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="update">
      <th mat-header-cell *matHeaderCellDef>Update Roles</th>
      <td mat-cell *matCellDef="let element">
        <button mat-flat-button (click)="updateRoles(element.id)">Update</button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="usersColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: usersColumns;"></tr>
  </table>

  <div>
    <app-pie-chart [dataFn]="getFinesPerLine()"></app-pie-chart>
  </div>

  <div>
    <app-line-chart [dataFn]="getCommutesByHour()"></app-line-chart>
  </div>

  <div>
    <app-income-chart [dataFn]="getTotalIncome()"></app-income-chart>
  </div>

</div>