add two tables for statistics for movies and shows

src/app/app-module.ts

@@ -25,6 +25,8 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -67,6 +69,7 @@ import { TicketListComponent } from './ticket-list/ticket-list.component';
 import { StatisticsComponent } from './statistics/statistics.component';
 
 
+
 @NgModule({
   declarations: [
     App,
@@ -139,6 +142,8 @@ import { StatisticsComponent } from './statistics/statistics.component';
     QRCodeComponent,
     MatBadgeModule,
     MatTooltipModule,
+    MatPaginatorModule,
+    MatTableModule,
   ],
   providers: [
     provideBrowserGlobalErrorListeners(),

src/app/statistics/statistics.component.html

@@ -1,6 +1,85 @@
-<button
+<app-menu-header label="Statistiken"></app-menu-header>
-  (click)="loadData()"
+
-  class="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+  <div class="table-table-container">
->
+
-  Liste laden
+    <table mat-table [dataSource]="movies" class="example-table">
-</button>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let row">{{row.movieId}}</td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef>Titel</th>
+        <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="earnings">
+        <th mat-header-cell *matHeaderCellDef>
+          Umsatz
+        </th>
+        <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
+      </ng-container>
+
+      <ng-container matColumnDef="tickets">
+        <th mat-header-cell *matHeaderCellDef>
+          Gebuchte Tickets
+        </th>
+        <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="moviesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: moviesDisplayedColumns;"></tr>
+    </table>
+  </div>
+
+  <mat-paginator [length]="movieResultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
+
+
+<div class="show-table-container">
+
+  <table mat-table [dataSource]="shows" class="example-table">
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <td mat-cell *matCellDef="let row">{{row.showId}}</td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="hall">
+      <th mat-header-cell *matHeaderCellDef>Kinosaal</th>
+      <td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="movie_title">
+      <th mat-header-cell *matHeaderCellDef>Film Name</th>
+      <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef>Datum</th>
+      <td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="earnings">
+      <th mat-header-cell *matHeaderCellDef>
+        Umsatz
+      </th>
+      <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
+    </ng-container>
+
+    <ng-container matColumnDef="tickets">
+      <th mat-header-cell *matHeaderCellDef>
+        Gebuchte Tickets
+      </th>
+      <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="showsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: showsDisplayedColumns;"></tr>
+  </table>
+</div>
+
+<mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
+