Add punishment details and history retrieval functionality

This commit introduces a new `DetailsComponent` for displaying detailed punishment data and establishes a route to view punishment history by ID and type. It also updates the API to support fetching individual punishment records and refines database mappings for improved data handling.

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

@@ -0,0 +1,62 @@
+<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>
+
+  <ng-container *ngIf="punishment === undefined">
+    <p>Loading...</p>
+  </ng-container>
+
+  <ng-container *ngIf="punishment">
+    <table [cellSpacing]="0">
+      <div>
+        <p>type: {{ this.historyFormat.getType(punishment) }}</p>
+        <p>is active: {{ this.historyFormat.isActive(punishment) }}</p>
+        <tbody>
+        <tr>
+          <td>Player</td>
+          <td>
+            <div class="playerContainer">
+              <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid)" width="25" height="25"
+                   alt="{{punishment.username}}'s Minecraft skin">
+              <span class="username">{{ punishment.username }}</span>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>Moderator</td>
+          <td>
+            <div class="playerContainer">
+              <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid)" width="25"
+                   height="25"
+                   alt="{{punishment.punishedBy}}'s Minecraft skin">
+              <span class="username">{{ punishment.punishedBy }}</span>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>Reason</td>
+          <td>{{ punishment.reason | removeTrailingPeriod }}</td>
+        </tr>
+        <tr>
+          <td>Date</td>
+          <td>{{ this.historyFormat.getPunishmentTime(punishment) }}</td>
+        </tr>
+        <tr>
+          <td>Expires</td>
+          <td>{{ this.historyFormat.getExpiredTime(punishment) }}</td>
+        </tr>
+        <ng-container *ngIf="punishment.removedBy !== undefined && punishment.removedBy.length > 0">
+          <tr>
+            <td>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</td>
+            <td>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</td>
+          </tr>
+        </ng-container>
+        </tbody>
+      </div>
+    </table>
+  </ng-container>
+</ng-container>