Add pagination controls with proper state handling in BansComponent

Introduced "First", "Previous", "Next", and "Last page" buttons with state-dependent activations for improved navigation. Refactored pagination logic to utilize a constant PAGE_SIZE and adjusted calculations for max page determination. Ensured page transitions and state updates are accurate and consistent.

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

@@ -50,6 +50,24 @@
           <app-history [userType]="userType" [punishmentType]="punishmentType"
                        [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
+        <div>
+          <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
+                  (click)="setPage(0)">
+            First page
+          </button>
+          <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
+                  (click)="previousPage()">
+            Previous page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
+                  (click)="nextPage()">
+            Next page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
+                  (click)="setPage(getMaxPage())">
+            Last page
+          </button>
+        </div>
       </div>
     </section>
   </main>