Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,63 @@
+<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>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/admin/admin-panel/admin-panel.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,88 @@
+import {Component, OnInit} from '@angular/core';
+import {MatTableModule} from '@angular/material/table';
+import {AdminService} from "../../../services/admin/admin.service";
+import {AdminUsersResponse} from "../../../model/responses/AdminUsersResponse";
+import {MatCheckboxChange, MatCheckboxModule} from '@angular/material/checkbox';
+import {MatButton} from "@angular/material/button";
+import {PieChartComponent} from "../../charts/pie-chart/pie-chart.component";
+import {map, Observable} from "rxjs";
+import {PieChartValues} from "../../../model/PieChartValues";
+import {CommutesByHour, LineChartComponent} from "../../charts/line-chart.component";
+import {IncomeChartComponent, IncomeData} from "../../charts/stacked-bar-chart.component";
+
+@Component({
+  selector: 'app-admin-panel',
+  standalone: true,
+  imports: [MatTableModule, MatCheckboxModule, MatButton, PieChartComponent, LineChartComponent, IncomeChartComponent],
+  templateUrl: './admin-panel.component.html',
+  styleUrl: './admin-panel.component.css'
+})
+export class AdminPanelComponent implements OnInit {
+
+  allRoles = ['ROLE_ADMIN', 'ROLE_DRIVER', 'ROLE_CONDUCTOR', 'ROLE_PASSENGER']
+
+  users: AdminUsersResponse[] = []
+  usersColumns: string[] = ['id', 'name', 'email', 'phoneNumber', 'address', 'roles', 'update'];
+
+  constructor(private adminService: AdminService) {
+
+  }
+
+  ngOnInit() {
+    this.adminService.getAllUsers().subscribe({
+      next: data => {
+        this.users = data
+        console.log(data)
+      }
+    })
+  }
+
+  checked(role: string, roles: string[]): boolean {
+    return roles.includes(role)
+  }
+
+  updateRoles(id: number) {
+    console.log(id)
+    const user = this.users.find(u => u.id === id)
+    console.log(user)
+    if (!user) return;
+    this.adminService.updateRolesToUser(id, user.roles).subscribe({
+      next: value => {
+        console.log(value)
+        this.users = value
+      }
+    })
+  }
+
+  onSelectRole(id: number, event: MatCheckboxChange) {
+    console.log(event)
+    const role = event.source.name
+    if (!role) return;
+    this.users.filter(u => u.id === id).forEach(
+      u => {
+        var index = u.roles.indexOf(role);
+        if (index > -1) {
+          u.roles.splice(index, 1);
+        } else {
+          u.roles.push(role);
+        }
+      }
+    )
+  }
+
+  getFinesPerLine(): Observable<PieChartValues[]> {
+    return this.adminService.getFinesPerLine()
+                .pipe(
+                    map(data => data.flatMap(finePerLine => Object({value: finePerLine.count, name: finePerLine.line.ime}))
+                    )
+                );
+  }
+
+  getCommutesByHour(): Observable<CommutesByHour[]> {
+    return this.adminService.getCommutesByHour();
+  }
+
+  getTotalIncome(): Observable<IncomeData[]> {
+    return this.adminService.getTotalIncome()
+  }
+}
