Rework folder structure in frontend

Pages are now grouped per group they appear in on in the header (where possible)
Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc

frontend/src/app/pages/reference/bans/bans.component.html

@@ -0,0 +1,90 @@
+<ng-container>
+  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1>Minecraft Punishments</h1>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="columnSection">
+          <div class="historyButtonContainer">
+            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
+              <span class="button-inner"
+                    [ngClass]="active">All</span>
+            </div>
+            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
+              <span class="button-inner"
+                    [ngClass]="active">Bans</span>
+            </div>
+            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
+              <span class="button-inner"
+                    [ngClass]="active">Mutes</span>
+            </div>
+            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
+              <span class="button-inner"
+                    [ngClass]="active">Warnings</span>
+            </div>
+            <div [id]="getCurrentUserTypeButtonId('player')" class="button-outer" (click)="changeUserType('player')"
+                 style="margin-left: 120px;">
+              <span class="button-inner"
+                    [ngClass]="active">Player</span>
+            </div>
+            <div [id]="getCurrentUserTypeButtonId('staff')" class="button-outer" (click)="changeUserType('staff')">
+              <span class="button-inner"
+                    [ngClass]="active">Staff</span>
+            </div>
+          </div>
+          <div class="historySearchContainer">
+            <input class="historySearch"
+                   type="search"
+                   placeholder="Search.."
+                   [(ngModel)]="searchTerm"
+                   (input)="filterNames()"
+                   (keyup.enter)="search()"
+            >
+            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
+              <div
+                class="dropdown-item"
+                *ngFor="let name of filteredNames"
+                (mousedown)="selectName(name)">
+                {{ name }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="historyTable">
+          <app-history [userType]="userType" [punishmentType]="punishmentType"
+                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)"
+                       (selectItem)="setSearch($event)">
+          </app-history>
+        </div>
+        <div class="changePageButtons">
+          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
+                  [disabled]="!buttonActive(0)"
+                  (click)="setPage(0)" class="historyPageButton">
+            First page
+          </button>
+          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
+                  [disabled]="!buttonActive(0)"
+                  (click)="previousPage()" class="historyPageButton">
+            Previous page
+          </button>
+          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
+          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
+                  [disabled]="!buttonActive(getMaxPage())"
+                  (click)="nextPage()" class="historyPageButton">
+            Next page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
+                  [disabled]="!buttonActive(getMaxPage())"
+                  (click)="setPage(getMaxPage())" class="historyPageButton">
+            Last page
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>