Index: Sources/frontend/src/app/admin-panel/admin-panel.component.css
===================================================================
--- Sources/frontend/src/app/admin-panel/admin-panel.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/admin-panel/admin-panel.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,42 @@
+table {
+  width: 80%;
+  border-collapse: collapse;
+  margin: auto;
+}
+
+th, td {
+  border: 1px solid white;
+  padding: 8px;
+  text-align: left;
+  background-color: rgba(228, 236, 237, 0.8);
+}
+
+th {
+  background-color: #3A98B9;
+}
+
+.table-container {
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+}
+
+.table-title {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.container {
+  margin-left: 200px;
+  margin-right: 200px;
+  color: rgba(27, 39, 107, 0.8);
+  background-color: white;
+  padding: 10px 25px 10px 25px;
+  border-radius: 10px;
+}
+
+table th{
+  color: #FFF1DC;
+}
+table td{
+  color: rgba(27, 39, 107, 0.8);
+}
Index: Sources/frontend/src/app/admin-panel/admin-panel.component.html
===================================================================
--- Sources/frontend/src/app/admin-panel/admin-panel.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/admin-panel/admin-panel.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,114 @@
+<div class="container">
+  <h1>Административна табла</h1>
+  <br>
+
+  <div class="table-container">
+    <h3 class="table-title">Извештај за првите 3 валидни прашања кои имаат барем два одговори од професор, од тие три се
+      бира прашањето кое има најмногу одговори во последните 4 месеци</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Наслов</th>
+        <th>Содржина</th>
+        <th>Датум</th>
+        <th>Број на одговори</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let row of query1">
+        <td>{{row?.pra_naslov}}</td>
+        <td>{{row?.pra_sodrzina}}</td>
+        <td>{{row?.pra_datum}}</td>
+        <td>{{row?.maximum}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr>
+  <div class="table-container">
+    <h3 class="table-title">Извештај за првите три прашања со најмногу одговори од студенти и професори посебно, потоа
+      од тие прашања ја пресметуваме вкупната сума на реакции на одговорите(заедно од професори и студенти) и ги
+      филтритаме само оние кои имаат просечен или надпросечен број на реакции</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Наслов</th>
+        <th>Содржина</th>
+        <th>Датум</th>
+        <th>Број на реакции</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let row of query2">
+        <td>{{row?.pra_naslov}}</td>
+        <td>{{row?.pra_sodrzina}}</td>
+        <td>{{row?.pra_datum}}</td>
+        <td>{{row?.sum}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr>
+  <div class="table-container">
+    <h3 class="table-title">Извештај за пронаоѓање на најдобрите 5 професори т.е. професорите кои имаат одговори со
+      најдобри рејтингзи, имаат поставено најмногу материјали и предаваат најмногу курсеви.</h3>
+    <table>
+      <thead>
+      <tr>
+
+        <th>Корисничко име</th>
+        <th>Вкупен број на активности</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let row of query3">
+        <td>{{row?.korisnicko_ime}}</td>
+        <td>{{row?.vk}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr>
+  <div class="table-container">
+    <h3 class="table-title">Извештај за секој предмет најпопуларните 3 курсеви во последните 3 месеци кои имаат барем по
+      2 исти категории за материјали и прашања</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Име на предмет</th>
+        <th>Име на курс</th>
+        <th>Број на исти категории</th>
+        <th>Број на исти категории</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let row of query4">
+        <td>{{row?.pr_ime}}</td>
+        <td>{{row?.ku_ime}}</td>
+        <td>{{row?.br_isti_kategorii}}</td>
+        <td>{{row?.br_prasanja}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr>
+  <div class="table-container">
+    <h3 class="table-title">Извештај за пронаоѓање на професорот кој најбрзо одговорил на поставено прашање</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Име на професор</th>
+        <th>Презиме на професор</th>
+        <th>Најбрзо време на одговор</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let row of query5">
+        <td>{{row?.p_ime}}</td>
+        <td>{{row?.p_prezime}}</td>
+        <td>{{formatInterval(row.najbrzo_vreme.value)}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
Index: Sources/frontend/src/app/admin-panel/admin-panel.component.spec.ts
===================================================================
--- Sources/frontend/src/app/admin-panel/admin-panel.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/admin-panel/admin-panel.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminPanelComponent } from './admin-panel.component';
+
+describe('AdminPanelComponent', () => {
+  let component: AdminPanelComponent;
+  let fixture: ComponentFixture<AdminPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdminPanelComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AdminPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: Sources/frontend/src/app/admin-panel/admin-panel.component.ts
===================================================================
--- Sources/frontend/src/app/admin-panel/admin-panel.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/admin-panel/admin-panel.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,70 @@
+import {Component, OnInit} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {forkJoin} from "rxjs";
+import {Query1Interface} from "../Query1Interface";
+import {AdminPanelService} from "../admin-panel.service";
+import {Query2Interface} from "../Query2Interface";
+import {Query3Interface} from "../Query3Interface";
+import {Query4Interface} from "../Query4Interface";
+import {Query5Interface} from "../Query5Interface";
+import {ActiveUserInterface} from "../ActiveUserInterface";
+import {Router} from "@angular/router";
+import {LoginService} from "../login.service";
+
+@Component({
+  selector: 'app-admin-panel',
+  templateUrl: './admin-panel.component.html',
+  styleUrls: ['./admin-panel.component.css']
+})
+export class AdminPanelComponent implements OnInit {
+  query1: Query1Interface[] | undefined;
+  query2: Query2Interface[] | undefined;
+  query3: Query3Interface[] | undefined;
+  query4: Query4Interface[] | undefined;
+  query5: Query5Interface[] | undefined;
+  activeUser: ActiveUserInterface | undefined;
+
+  constructor(private http: HttpClient, private service: AdminPanelService, private loginService: LoginService, private router: Router) { }
+
+  ngOnInit():void {
+    this.activeUser = this.loginService.activeUser!!;
+    if (!this.activeUser) {
+      this.router.navigate(['/'])
+    }
+    forkJoin([
+      this.service.getFirstQuery(),
+      this.service.getSecondQuery(),
+      this.service.getThirdQuery(),
+      this.service.getFourthQuery(),
+      this.service.getFifthQuery(),
+    ]).subscribe(results => {
+      this.query1 = results[0];
+      this.query2 = results[1];
+      this.query3 = results[2];
+      this.query4 = results[3];
+      this.query5 = results[4];
+    });
+  }
+  formatInterval(interval: string) {
+    const match = interval.match(/(\d+) years (\d+) mons (\d+) days (\d+) hours (\d+) mins (\d+\.\d+) secs/);
+    if (!match) {
+      return interval;
+    }
+    const [, years, months, days, hours, minutes, seconds] = match;
+    const units = [
+      { value: years, unit: 'years' },
+      { value: months, unit: 'months' },
+      { value: days, unit: 'days' },
+      { value: hours, unit: 'hours' },
+      { value: minutes, unit: 'minutes' },
+      { value: seconds, unit: 'seconds' },
+    ];
+    const result: string[] = [];
+    units.forEach(({ value, unit }) => {
+      if (value !== '0') {
+        result.push(`${value} ${unit}`);
+      }
+    });
+    return result.join(', ');
+  }
+}
