From 0ebb85436eb85bbf0c4bf3afdc3d73dd0a35b9ce Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Mon, 19 Jun 2023 10:58:04 +0200
Subject: [PATCH 01/15] fixed button add new categories

---
 .../event-dashboard/event-dashboard.component.html  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
index a1d4c85d4..e6c7b490c 100644
--- a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
+++ b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
@@ -287,14 +287,14 @@ <h2 class="my-4">{{ event.displayName }}</h2>
               class="col-sm-3"
               translate="admin.event-dashboard.tickets-price"
             ></dt>
-            <dd
-              class="col-sm-9"
-              translate="admin.event-dashboard.free-of-charge"
-            >
-              <span *ngIf="eventOrganizationInfo.event.freeOfCharge"></span>
+            <dd class="col-sm-9">
+              <span
+                *ngIf="eventOrganizationInfo.event.freeOfCharge"
+                translate="admin.event-dashboard.free-of-charge"
+              ></span>
               <span *ngIf="!eventOrganizationInfo.event.freeOfCharge">{{
                 eventOrganizationInfo.event.regularPrice
-                  | currency : eventOrganizationInfo.event.currency || ""
+                  | currency : eventOrganizationInfo.event.currency
               }}</span>
             </dd>
             <dt
@@ -385,7 +385,6 @@ <h3 class="mt-5">
       type="button"
       class="btn btn-success d-flex align-items-center"
       [routerLink]="[]"
-      translate="admin.common.add-new"
     >
       <svg-icon key="add" class="d-flex align-items-center"></svg-icon>
       <span translate="admin.common.add-new"></span>

From e229abcb8710a460e940a4fe96190f21c7b00b78 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Tue, 20 Jun 2023 10:49:33 +0200
Subject: [PATCH 02/15] load mails call and service

---
 .../event/email-log/email-log.component.html  |   2 +
 .../event/email-log/email-log.component.ts    |  23 +++-
 .../admin/src/app/event/event.module.ts       |   2 +
 frontend/projects/admin/src/app/model/mail.ts |   4 +
 .../projects/admin/src/event/mail.service.ts  |  29 +++++
 .../public/src/app/shared/user.service.ts     | 107 +++++++++++-------
 6 files changed, 124 insertions(+), 43 deletions(-)
 create mode 100644 frontend/projects/admin/src/app/model/mail.ts
 create mode 100644 frontend/projects/admin/src/event/mail.service.ts

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 8f60b113f..c3b938d7a 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -1 +1,3 @@
 <p>email-log works!</p>
+
+<pre>{{ mails$ | async | json }}</pre>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 3a55c133d..4d27acc76 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -1,15 +1,34 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MailService } from 'projects/admin/src/event/mail.service';
+import { Observable, map, mergeMap, of, switchMap } from 'rxjs';
+import { EventService } from '../../shared/event.service';
 
 @Component({
   selector: 'app-email-log',
   templateUrl: './email-log.component.html',
-  styleUrls: ['./email-log.component.scss']
+  styleUrls: ['./email-log.component.scss'],
 })
 export class EmailLogComponent implements OnInit {
+  public mails$: Observable<any[]> = of();
 
-  constructor() { }
+  constructor(
+    private readonly mailService: MailService,
+    private readonly route: ActivatedRoute,
+    private readonly eventService: EventService
+  ) {}
 
   ngOnInit(): void {
+    this.loadMails();
   }
 
+  loadMails() {
+    this.mails$ = this.route.paramMap.pipe(
+      map((pm) => pm.get('eventId')),
+      mergeMap((eventId) =>
+        eventId != null ? this.eventService.getEvent(eventId) : of()
+      ),
+      mergeMap((event) => this.mailService.getMails(event.shortName, 0, ''))
+    );
+  }
 }
diff --git a/frontend/projects/admin/src/app/event/event.module.ts b/frontend/projects/admin/src/app/event/event.module.ts
index fb148989f..318bbf9c8 100644
--- a/frontend/projects/admin/src/app/event/event.module.ts
+++ b/frontend/projects/admin/src/app/event/event.module.ts
@@ -22,6 +22,7 @@ import { ShowSelectedCategoriesPipe } from './show-selected-categories.pipe';
 import { UiCategoryBuilderPipe } from './ui-category-builder.pipe';
 import { FormsModule } from '@angular/forms';
 import { TicketCategoryDetailComponent } from './ticket-category-detail/ticket-category-detail.component';
+import { MailService } from '../../event/mail.service';
 
 @NgModule({
   declarations: [
@@ -52,6 +53,7 @@ import { TicketCategoryDetailComponent } from './ticket-category-detail/ticket-c
   providers: [
     OrganizationService,
     EventService,
+    MailService,
     provideSvgIconsConfig(ICON_CONFIG),
   ],
 })
diff --git a/frontend/projects/admin/src/app/model/mail.ts b/frontend/projects/admin/src/app/model/mail.ts
new file mode 100644
index 000000000..df725e550
--- /dev/null
+++ b/frontend/projects/admin/src/app/model/mail.ts
@@ -0,0 +1,4 @@
+export interface MailInfo {
+  left: [];
+  right: [];
+}
diff --git a/frontend/projects/admin/src/event/mail.service.ts b/frontend/projects/admin/src/event/mail.service.ts
new file mode 100644
index 000000000..6d90f849c
--- /dev/null
+++ b/frontend/projects/admin/src/event/mail.service.ts
@@ -0,0 +1,29 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MailInfo } from '../app/model/mail';
+import { Observable } from 'rxjs';
+import { HttpParams } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MailService {
+  constructor(private httpClient: HttpClient) {}
+
+  getMails(
+    eventShortName: string,
+    page: number,
+    search: string
+  ): Observable<any> {
+    const params = {
+      params: new HttpParams().set('page', page).set('search', search),
+    };
+
+    return this.httpClient.get<any>(
+      `admin/api/event/${eventShortName}/email/`,
+      params
+    );
+  }
+}
+
+// http://localhost:8080/admin/api/event/lacasadepapel/email/?page=0&search=
diff --git a/frontend/projects/public/src/app/shared/user.service.ts b/frontend/projects/public/src/app/shared/user.service.ts
index 6483be9f5..77bbc720f 100644
--- a/frontend/projects/public/src/app/shared/user.service.ts
+++ b/frontend/projects/public/src/app/shared/user.service.ts
@@ -1,52 +1,69 @@
-import {Injectable, OnDestroy} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-import {ANONYMOUS, AuthenticationStatus, ClientRedirect, PurchaseContextWithReservation, User} from '../model/user';
-import {BehaviorSubject, interval, Observable, of, Subscription} from 'rxjs';
-import {map, mergeMap, tap} from 'rxjs/operators';
-import {ValidatedResponse} from '../model/validated-response';
+import { Injectable, OnDestroy } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {
+  ANONYMOUS,
+  AuthenticationStatus,
+  ClientRedirect,
+  PurchaseContextWithReservation,
+  User,
+} from '../model/user';
+import { BehaviorSubject, interval, Observable, of, Subscription } from 'rxjs';
+import { map, mergeMap, tap } from 'rxjs/operators';
+import { ValidatedResponse } from '../model/validated-response';
 
 @Injectable({ providedIn: 'root' })
 export class UserService implements OnDestroy {
-
-  private authStatusSubject = new BehaviorSubject<AuthenticationStatus>({ enabled: false });
+  private authStatusSubject = new BehaviorSubject<AuthenticationStatus>({
+    enabled: false,
+  });
   private authStatusSubscription?: Subscription;
   private authEnabled = false;
 
-  constructor(private http: HttpClient) {
-  }
+  constructor(private http: HttpClient) {}
 
   initAuthenticationStatus(): Promise<boolean> {
-    return new Promise<boolean>((resolve) => this.loadUserStatus()
-      .subscribe(result => {
-        this.authStatusSubject.next(result);
-        resolve(true);
-      }, () => {
-        this.authStatusSubject.next({ enabled: false });
-        resolve(true); // we resolve the promise anyway
-      }));
+    return new Promise<boolean>((resolve) =>
+      this.loadUserStatus().subscribe(
+        (result) => {
+          this.authStatusSubject.next(result);
+          resolve(true);
+        },
+        () => {
+          this.authStatusSubject.next({ enabled: false });
+          resolve(true); // we resolve the promise anyway
+        }
+      )
+    );
   }
 
-  private loadUserStatus(): Observable<{enabled: boolean, user?: User}> {
-    return this.http.get<boolean>('/api/v2/public/user/authentication-enabled')
-      .pipe(mergeMap(enabled => {
+  private loadUserStatus(): Observable<{ enabled: boolean; user?: User }> {
+    return this.http
+      .get<boolean>('/api/v2/public/user/authentication-enabled')
+      .pipe(
+        mergeMap((enabled) => {
           if (enabled) {
-            return this.getUserIdentity().pipe(map(user => ({enabled, user})));
+            return this.getUserIdentity().pipe(
+              map((user) => ({ enabled, user }))
+            );
           }
-          return of({enabled, user: undefined});
+          return of({ enabled, user: undefined });
         }),
-        tap(status => this.authEnabled = status.enabled)
+        tap((status) => (this.authEnabled = status.enabled))
       );
   }
 
   public getUserIdentity(): Observable<User> {
-    return this.http.get<User>('/api/v2/public/user/me', { observe: 'response' })
-      .pipe(map(response => {
-        if (response.status === 204) {
-          return ANONYMOUS;
-        } else {
-          return response.body;
-        }
-      }));
+    return this.http
+      .get<User>('/api/v2/public/user/me', { observe: 'response' })
+      .pipe(
+        map((response) => {
+          if (response.status === 204) {
+            return ANONYMOUS;
+          } else {
+            return response.body;
+          }
+        })
+      );
   }
 
   ngOnDestroy(): void {
@@ -54,24 +71,32 @@ export class UserService implements OnDestroy {
   }
 
   logout(): Observable<ClientRedirect> {
-    return this.http.post<ClientRedirect>('/api/v2/public/user/logout', {})
-      .pipe(tap(() => {
-        this.authStatusSubject.next({ enabled: true });
-      }));
+    return this.http
+      .post<ClientRedirect>('/api/v2/public/user/logout', {})
+      .pipe(
+        tap(() => {
+          this.authStatusSubject.next({ enabled: true });
+        })
+      );
   }
 
   getOrders(): Observable<Array<PurchaseContextWithReservation>> {
-    return this.http.get<Array<PurchaseContextWithReservation>>('/api/v2/public/user/reservations');
+    return this.http.get<Array<PurchaseContextWithReservation>>(
+      '/api/v2/public/user/reservations'
+    );
   }
 
   updateUser(user: any): Observable<ValidatedResponse<User>> {
-    return this.http.post<ValidatedResponse<User>>('/api/v2/public/user/me', user);
+    return this.http.post<ValidatedResponse<User>>(
+      '/api/v2/public/user/me',
+      user
+    );
   }
 
   private startPolling(): void {
-    this.authStatusSubscription = interval(30_000).pipe(
-      mergeMap(() => this.loadUserStatus())
-    ).subscribe(() => {});
+    this.authStatusSubscription = interval(30_000)
+      .pipe(mergeMap(() => this.loadUserStatus()))
+      .subscribe(() => {});
   }
 
   get authenticationStatus(): Observable<AuthenticationStatus> {

From 8dcfe973d40e91fb2fe5f24aa8cbbfba55517fe1 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:28:23 +0200
Subject: [PATCH 03/15] UI mail page header and table

---
 .../event/email-log/email-log.component.html  | 48 ++++++++++++++++++-
 .../event/email-log/email-log.component.ts    |  7 +--
 frontend/projects/admin/src/app/model/mail.ts | 23 ++++++++-
 .../projects/admin/src/app/shared/icons.ts    |  2 +
 frontend/projects/admin/src/app/svg/mail.ts   |  4 ++
 .../projects/admin/src/assets/.editorconfig   | 12 +++++
 .../projects/admin/src/assets/svg/mail.svg    |  1 +
 .../projects/admin/src/event/mail.service.ts  | 10 ++--
 8 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 frontend/projects/admin/src/app/svg/mail.ts
 create mode 100644 frontend/projects/admin/src/assets/.editorconfig
 create mode 100644 frontend/projects/admin/src/assets/svg/mail.svg

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index c3b938d7a..09e254cf1 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -1,3 +1,47 @@
-<p>email-log works!</p>
+<div class="container" *ngIf="mail$ | async as mail">
+  <h1 class="my-3">Email log</h1>
+  <p>Here you can find all the e-mails generated by the current event</p>
+  <hr />
+  <div class="fs-2 my-3">
+    <svg-icon key="mail" size="xxl"></svg-icon> <span> Emails</span>
+  </div>
 
-<pre>{{ mails$ | async | json }}</pre>
+  <div class="input-group">
+    <div class="input-group-text" id="btnGroupAddon">
+      <svg-icon key="search"></svg-icon>
+    </div>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Filter table"
+      aria-label="Input group example"
+      aria-describedby="btnGroupAddon"
+    />
+  </div>
+  <div class="my-4">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Recipent</th>
+          <th scope="col">Subject</th>
+          <th scope="col">Message</th>
+          <th scope="col">Status</th>
+          <th scope="col">Checksum</th>
+          <th scope="col">Requested</th>
+          <th scope="col">Sent</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let mailDetail of mail.left">
+          <th scope="row">{{ mailDetail.recipient }}</th>
+          <td>{{ mailDetail.subject }}</td>
+          <td>{{ mailDetail.message }}</td>
+          <td>{{ mailDetail.status }}</td>
+          <td>{{ mailDetail.checksum }}</td>
+          <td>{{ mailDetail.requestTimestamp | date }}</td>
+          <td>{{ mailDetail.sentTimestamp | date }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 4d27acc76..41fa5b4cc 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { MailService } from 'projects/admin/src/event/mail.service';
 import { Observable, map, mergeMap, of, switchMap } from 'rxjs';
 import { EventService } from '../../shared/event.service';
+import { Mail, MailInfo } from '../../model/mail';
 
 @Component({
   selector: 'app-email-log',
@@ -10,7 +11,7 @@ import { EventService } from '../../shared/event.service';
   styleUrls: ['./email-log.component.scss'],
 })
 export class EmailLogComponent implements OnInit {
-  public mails$: Observable<any[]> = of();
+  public mail$: Observable<Mail> = of();
 
   constructor(
     private readonly mailService: MailService,
@@ -23,12 +24,12 @@ export class EmailLogComponent implements OnInit {
   }
 
   loadMails() {
-    this.mails$ = this.route.paramMap.pipe(
+    this.mail$ = this.route.paramMap.pipe(
       map((pm) => pm.get('eventId')),
       mergeMap((eventId) =>
         eventId != null ? this.eventService.getEvent(eventId) : of()
       ),
-      mergeMap((event) => this.mailService.getMails(event.shortName, 0, ''))
+      mergeMap((event) => this.mailService.getMailInfo(event.shortName, 0, ''))
     );
   }
 }
diff --git a/frontend/projects/admin/src/app/model/mail.ts b/frontend/projects/admin/src/app/model/mail.ts
index df725e550..d8a77ee13 100644
--- a/frontend/projects/admin/src/app/model/mail.ts
+++ b/frontend/projects/admin/src/app/model/mail.ts
@@ -1,4 +1,23 @@
+export interface Mail {
+  left: MailInfo[];
+  right: number;
+}
+
 export interface MailInfo {
-  left: [];
-  right: [];
+  message: string;
+  id: number;
+  subscriptionDescriptorId: number;
+  status: string;
+  eventId: number;
+  cc: any[];
+  subject: string;
+  organizationId: number;
+  attempts: number;
+  checksum: string;
+  recipient: string;
+  htmlMessage: string;
+  attachments: string;
+  purchaseContextType: string;
+  sentTimestamp: string;
+  requestTimestamp: string;
 }
diff --git a/frontend/projects/admin/src/app/shared/icons.ts b/frontend/projects/admin/src/app/shared/icons.ts
index 7377ee53f..c74e8779b 100644
--- a/frontend/projects/admin/src/app/shared/icons.ts
+++ b/frontend/projects/admin/src/app/shared/icons.ts
@@ -23,6 +23,7 @@ import { insightsIcon } from '../svg/insights';
 import { keyIcon } from '../svg/key';
 import { lockIcon } from '../svg/lock';
 import { lockOpenIcon } from '../svg/lock-open';
+import { mailIcon } from '../svg/mail';
 import { organizationIcon } from '../svg/organization';
 import { outgoingMailIcon } from '../svg/outgoing-mail';
 import { paymentsIcon } from '../svg/payments';
@@ -83,6 +84,7 @@ const ICONS = [
   warningIcon,
   closeIcon,
   infoIcon,
+  mailIcon,
 ];
 export const ICON_CONFIG = {
   sizes: {
diff --git a/frontend/projects/admin/src/app/svg/mail.ts b/frontend/projects/admin/src/app/svg/mail.ts
new file mode 100644
index 000000000..d469df021
--- /dev/null
+++ b/frontend/projects/admin/src/app/svg/mail.ts
@@ -0,0 +1,4 @@
+export const mailIcon = {
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302L140-685v465h680v-465L480-462Zm0-60 336-218H145l335 218ZM140-685v-55 520-465Z"/></svg>`,
+    name: 'mail' as const
+};
\ No newline at end of file
diff --git a/frontend/projects/admin/src/assets/.editorconfig b/frontend/projects/admin/src/assets/.editorconfig
new file mode 100644
index 000000000..c1322dc7b
--- /dev/null
+++ b/frontend/projects/admin/src/assets/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/frontend/projects/admin/src/assets/svg/mail.svg b/frontend/projects/admin/src/assets/svg/mail.svg
new file mode 100644
index 000000000..5f0383823
--- /dev/null
+++ b/frontend/projects/admin/src/assets/svg/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302L140-685v465h680v-465L480-462Zm0-60 336-218H145l335 218ZM140-685v-55 520-465Z"/></svg>
\ No newline at end of file
diff --git a/frontend/projects/admin/src/event/mail.service.ts b/frontend/projects/admin/src/event/mail.service.ts
index 6d90f849c..d786cf833 100644
--- a/frontend/projects/admin/src/event/mail.service.ts
+++ b/frontend/projects/admin/src/event/mail.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { MailInfo } from '../app/model/mail';
+import { Mail } from '../app/model/mail';
 import { Observable } from 'rxjs';
 import { HttpParams } from '@angular/common/http';
 
@@ -10,20 +10,18 @@ import { HttpParams } from '@angular/common/http';
 export class MailService {
   constructor(private httpClient: HttpClient) {}
 
-  getMails(
+  getMailInfo(
     eventShortName: string,
     page: number,
     search: string
-  ): Observable<any> {
+  ): Observable<Mail> {
     const params = {
       params: new HttpParams().set('page', page).set('search', search),
     };
 
-    return this.httpClient.get<any>(
+    return this.httpClient.get<Mail>(
       `admin/api/event/${eventShortName}/email/`,
       params
     );
   }
 }
-
-// http://localhost:8080/admin/api/event/lacasadepapel/email/?page=0&search=

From 532f915e3e981c40d9732e3f913aa613ec93df85 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:34:42 +0200
Subject: [PATCH 04/15] routing event-detail and added css rules

---
 .../email-detail/email-detail.component.html      |  1 +
 .../email-detail/email-detail.component.scss      |  0
 .../event/email-detail/email-detail.component.ts  | 15 +++++++++++++++
 .../app/event/email-log/email-log.component.html  | 14 +++++++++-----
 .../app/event/email-log/email-log.component.scss  |  6 ++++++
 .../projects/admin/src/app/event/event.module.ts  |  3 +++
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
 create mode 100644 frontend/projects/admin/src/app/event/email-detail/email-detail.component.scss
 create mode 100644 frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts

diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
new file mode 100644
index 000000000..688ff6646
--- /dev/null
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
@@ -0,0 +1 @@
+<p>email-detail works!</p>
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.scss b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
new file mode 100644
index 000000000..d9c315f2e
--- /dev/null
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-email-detail',
+  templateUrl: './email-detail.component.html',
+  styleUrls: ['./email-detail.component.scss']
+})
+export class EmailDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 09e254cf1..0be6550f2 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -7,15 +7,15 @@ <h1 class="my-3">Email log</h1>
   </div>
 
   <div class="input-group">
-    <div class="input-group-text" id="btnGroupAddon">
+    <div class="input-group-text">
       <svg-icon key="search"></svg-icon>
     </div>
     <input
       type="text"
       class="form-control"
       placeholder="Filter table"
-      aria-label="Input group example"
-      aria-describedby="btnGroupAddon"
+      aria-label="Filter table"
+      aria-describedby="Filter table"
     />
   </div>
   <div class="my-4">
@@ -35,9 +35,13 @@ <h1 class="my-3">Email log</h1>
         <tr *ngFor="let mailDetail of mail.left">
           <th scope="row">{{ mailDetail.recipient }}</th>
           <td>{{ mailDetail.subject }}</td>
-          <td>{{ mailDetail.message }}</td>
+          <td>
+            <a routerLink="./email-detail">{{ mailDetail.message }}</a>
+          </td>
           <td>{{ mailDetail.status }}</td>
-          <td>{{ mailDetail.checksum }}</td>
+          <td class="text-overflow">
+            {{ mailDetail.checksum }}
+          </td>
           <td>{{ mailDetail.requestTimestamp | date }}</td>
           <td>{{ mailDetail.sentTimestamp | date }}</td>
         </tr>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.scss b/frontend/projects/admin/src/app/event/email-log/email-log.component.scss
index e69de29bb..d5887d401 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.scss
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.scss
@@ -0,0 +1,6 @@
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}
diff --git a/frontend/projects/admin/src/app/event/event.module.ts b/frontend/projects/admin/src/app/event/event.module.ts
index 318bbf9c8..1b851bdfb 100644
--- a/frontend/projects/admin/src/app/event/event.module.ts
+++ b/frontend/projects/admin/src/app/event/event.module.ts
@@ -23,6 +23,7 @@ import { UiCategoryBuilderPipe } from './ui-category-builder.pipe';
 import { FormsModule } from '@angular/forms';
 import { TicketCategoryDetailComponent } from './ticket-category-detail/ticket-category-detail.component';
 import { MailService } from '../../event/mail.service';
+import { EmailDetailComponent } from './email-detail/email-detail.component';
 
 @NgModule({
   declarations: [
@@ -33,6 +34,7 @@ import { MailService } from '../../event/mail.service';
     ShowSelectedCategoriesPipe,
     UiCategoryBuilderPipe,
     TicketCategoryDetailComponent,
+    EmailDetailComponent,
   ],
   imports: [
     TranslateModule.forChild(),
@@ -48,6 +50,7 @@ import { MailService } from '../../event/mail.service';
     RouterModule.forChild([
       { path: '', component: EventDashboardComponent },
       { path: 'email-log', component: EmailLogComponent },
+      { path: 'email-log/email-detail', component: EmailDetailComponent },
     ]),
   ],
   providers: [

From 07af0e10d8805cd88136a2a1e7cdd6eabb89f478 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Tue, 20 Jun 2023 16:11:32 +0200
Subject: [PATCH 05/15] translate date

---
 .../src/app/event/email-log/email-log.component.html   |  6 +++---
 .../src/app/event/email-log/email-log.component.ts     | 10 ++++++++--
 src/main/resources/alfio/i18n/public.properties        |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 0be6550f2..9cd6a5d0e 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -34,7 +34,7 @@ <h1 class="my-3">Email log</h1>
       <tbody>
         <tr *ngFor="let mailDetail of mail.left">
           <th scope="row">{{ mailDetail.recipient }}</th>
-          <td>{{ mailDetail.subject }}</td>
+          <td class="text-overflow">{{ mailDetail.subject }}</td>
           <td>
             <a routerLink="./email-detail">{{ mailDetail.message }}</a>
           </td>
@@ -42,8 +42,8 @@ <h1 class="my-3">Email log</h1>
           <td class="text-overflow">
             {{ mailDetail.checksum }}
           </td>
-          <td>{{ mailDetail.requestTimestamp | date }}</td>
-          <td>{{ mailDetail.sentTimestamp | date }}</td>
+          <td>{{ mailDetail.requestTimestamp | date : dateTimeFormat }}</td>
+          <td>{{ mailDetail.sentTimestamp | date : dateTimeFormat }}</td>
         </tr>
       </tbody>
     </table>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 41fa5b4cc..15328a7d7 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MailService } from 'projects/admin/src/event/mail.service';
-import { Observable, map, mergeMap, of, switchMap } from 'rxjs';
+import { Observable, map, mergeMap, of } from 'rxjs';
 import { EventService } from '../../shared/event.service';
 import { Mail, MailInfo } from '../../model/mail';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-email-log',
@@ -16,7 +17,8 @@ export class EmailLogComponent implements OnInit {
   constructor(
     private readonly mailService: MailService,
     private readonly route: ActivatedRoute,
-    private readonly eventService: EventService
+    private readonly eventService: EventService,
+    private readonly translateService: TranslateService
   ) {}
 
   ngOnInit(): void {
@@ -32,4 +34,8 @@ export class EmailLogComponent implements OnInit {
       mergeMap((event) => this.mailService.getMailInfo(event.shortName, 0, ''))
     );
   }
+
+  get dateTimeFormat(): string {
+    return this.translateService.instant('admin.common.date-time');
+  }
 }
diff --git a/src/main/resources/alfio/i18n/public.properties b/src/main/resources/alfio/i18n/public.properties
index 9b3cbdfd8..3d0b28e78 100644
--- a/src/main/resources/alfio/i18n/public.properties
+++ b/src/main/resources/alfio/i18n/public.properties
@@ -606,7 +606,7 @@ link.new-tab=(Opens in a new tab)
 
 
 ## admin related keys
-
+admin.common.date-time=dd.MM.yyyy HH:mm
 admin.common.add-new=add new
 admin.common.name=Name
 admin.common.username=Username

From 58f73cede9a964d9304e83ff76d68e426a1690f6 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:23:58 +0200
Subject: [PATCH 06/15] configured routing childrens of event-dashboard

---
 .../event-item/event-item.component.html      |  13 +-
 .../email-detail/email-detail.component.html  |   6 +-
 .../email-detail/email-detail.component.ts    |  25 +-
 .../event/email-log/email-log.component.html  |  21 +-
 .../event/email-log/email-log.component.ts    |   9 +-
 .../event-dashboard.component.html            | 807 +-----------------
 .../event-dashboard.component.ts              | 212 -----
 .../event-detail/event-detail.component.html  | 790 +++++++++++++++++
 .../event-detail/event-detail.component.scss  |   0
 .../event-detail/event-detail.component.ts    | 222 +++++
 .../event-menu/event-menu.component.html      |   4 +-
 .../admin/src/app/event/event.module.ts       |  13 +-
 .../resources/alfio/i18n/public.properties    |  17 +-
 13 files changed, 1092 insertions(+), 1047 deletions(-)
 create mode 100644 frontend/projects/admin/src/app/event/event-detail/event-detail.component.html
 create mode 100644 frontend/projects/admin/src/app/event/event-detail/event-detail.component.scss
 create mode 100644 frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts

diff --git a/frontend/projects/admin/src/app/dashboard/event-item/event-item.component.html b/frontend/projects/admin/src/app/dashboard/event-item/event-item.component.html
index 0ffb9fd7b..2ab19ab3c 100644
--- a/frontend/projects/admin/src/app/dashboard/event-item/event-item.component.html
+++ b/frontend/projects/admin/src/app/dashboard/event-item/event-item.component.html
@@ -30,10 +30,12 @@ <h4 class="text-overflow" [title]="event.displayName">
         class="btn btn-primary btn-sm hidden-xs hidden-sm mx-1"
         *ngIf="event.visibleForCurrentUser"
       >
-        <svg-icon key="settings" size="md"></svg-icon>Settings
+        <svg-icon key="settings" size="md"></svg-icon>
+        <span translate="admin.event-item.settings"></span>
       </a>
       <a class="btn btn-primary btn-sm mx-1">
-        <svg-icon key="check" size="md"></svg-icon> Check-In
+        <svg-icon key="check" size="md"></svg-icon>
+        <span translate="admin.event-item.check-in"></span>
       </a>
       <a
         class="btn btn-warning btn-sm"
@@ -42,10 +44,9 @@ <h4 class="text-overflow" [title]="event.displayName">
           event.allowedPaymentProxies.includes('OFFLINE')
         "
       >
-        <svg-icon key="payments" size="md"></svg-icon> Pending payments<span
-          class="badge bg-secondary"
-          >{{ event.shortName }}</span
-        >
+        <svg-icon key="payments" size="md"></svg-icon>
+        <span translate="Pending payments"></span
+        ><span class="badge bg-secondary">{{ event.shortName }}</span>
       </a>
     </div>
   </div>
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
index 688ff6646..3c9408984 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
@@ -1 +1,5 @@
-<p>email-detail works!</p>
+<div class="container my-3">
+  <h1>Message detail</h1>
+  <hr />
+</div>
+<pre>{{ mail$ | async | json }}</pre>
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
index d9c315f2e..cf4aea6df 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
@@ -1,15 +1,34 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MailService } from 'projects/admin/src/event/mail.service';
+import { EventService } from '../../shared/event.service';
+import { Observable, map, mergeMap, of } from 'rxjs';
+import { Mail } from '../../model/mail';
 
 @Component({
   selector: 'app-email-detail',
   templateUrl: './email-detail.component.html',
-  styleUrls: ['./email-detail.component.scss']
+  styleUrls: ['./email-detail.component.scss'],
 })
 export class EmailDetailComponent implements OnInit {
+  public mail$: Observable<Mail> = of();
 
-  constructor() { }
+  constructor(
+    private readonly mailService: MailService,
+    private readonly route: ActivatedRoute,
+    private readonly eventService: EventService
+  ) {}
 
   ngOnInit(): void {
+    this.loadMails();
+  }
+  loadMails() {
+    this.mail$ = this.route.paramMap.pipe(
+      map((pm) => pm.get('eventId')),
+      mergeMap((eventId) =>
+        eventId != null ? this.eventService.getEvent(eventId) : of()
+      ),
+      mergeMap((event) => this.mailService.getMailInfo(event.shortName, 0, ''))
+    );
   }
-
 }
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 9cd6a5d0e..bb8dd7a69 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -1,9 +1,10 @@
 <div class="container" *ngIf="mail$ | async as mail">
-  <h1 class="my-3">Email log</h1>
-  <p>Here you can find all the e-mails generated by the current event</p>
+  <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
+  <p translate="admin.event.mail-log.legend"></p>
   <hr />
   <div class="fs-2 my-3">
-    <svg-icon key="mail" size="xxl"></svg-icon> <span> Emails</span>
+    <svg-icon key="mail" size="xxl"></svg-icon>
+    <span translate="admin.event.mail-log.emails"></span>
   </div>
 
   <div class="input-group">
@@ -22,13 +23,13 @@ <h1 class="my-3">Email log</h1>
     <table class="table table-striped">
       <thead>
         <tr>
-          <th scope="col">Recipent</th>
-          <th scope="col">Subject</th>
-          <th scope="col">Message</th>
-          <th scope="col">Status</th>
-          <th scope="col">Checksum</th>
-          <th scope="col">Requested</th>
-          <th scope="col">Sent</th>
+          <th scope="col" translate="admin.event.mail-log.list.recipent"></th>
+          <th scope="col" translate="admin.event.mail-log.list.subject"></th>
+          <th scope="col" translate="admin.event.mail-log.list.message"></th>
+          <th scope="col" translate="admin.event.mail-log.list.status"></th>
+          <th scope="col" translate="admin.event.mail-log.list.checksum"></th>
+          <th scope="col" translate="admin.event.mail-log.list.requested"></th>
+          <th scope="col" translate="admin.event.mail-log.list.sent"></th>
         </tr>
       </thead>
       <tbody>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 15328a7d7..d05e30434 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MailService } from 'projects/admin/src/event/mail.service';
-import { Observable, map, mergeMap, of } from 'rxjs';
+import { Observable, map, mergeMap, of, retry, tap } from 'rxjs';
 import { EventService } from '../../shared/event.service';
-import { Mail, MailInfo } from '../../model/mail';
+import { Mail } from '../../model/mail';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -26,7 +26,10 @@ export class EmailLogComponent implements OnInit {
   }
 
   loadMails() {
-    this.mail$ = this.route.paramMap.pipe(
+    if (!this.route.parent) {
+      return;
+    }
+    this.mail$ = this.route.parent.paramMap.pipe(
       map((pm) => pm.get('eventId')),
       mergeMap((eventId) =>
         eventId != null ? this.eventService.getEvent(eventId) : of()
diff --git a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
index e6c7b490c..1282c8668 100644
--- a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
+++ b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.html
@@ -2,810 +2,5 @@
   <div menu>
     <app-event-menu></app-event-menu>
   </div>
-  <div
-    *ngIf="event$ | async as event"
-    class="d-flex flex-row align-items-center"
-  >
-    <a class="btn" href=""><svg-icon key="edit"></svg-icon></a>
-    <h2 class="my-4">{{ event.displayName }}</h2>
-  </div>
-  <hr />
-  <div *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo">
-    <div *ngIf="eventOrganizationInfo.event.displayStatistics" class="row">
-      <div class="col-6 col-md-3">
-        <div class="card flex-fill mx-3">
-          <div
-            class="card-header text-center"
-            translate="admin.event-dashboard.total-tickets-confirmed"
-          ></div>
-          <div class="card-body d-flex justify-content-between">
-            <div>
-              <svg-icon key="ticket" width="70px" height="70px"></svg-icon>
-            </div>
-
-            <div class="fs-1">
-              {{
-                eventOrganizationInfo.event.soldTickets +
-                  eventOrganizationInfo.event.checkedInTickets
-              }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-6 col-md-3">
-        <div class="card flex-fill mx-3">
-          <div
-            class="card-header text-center"
-            translate="admin.event-dashboard.tickets-pending"
-          ></div>
-          <div class="card-body d-flex justify-content-between">
-            <div>
-              <svg-icon
-                key="hourglass-top"
-                width="70px"
-                height="70px"
-              ></svg-icon>
-            </div>
-            <div class="fs-1">
-              {{ eventOrganizationInfo.event.pendingTickets }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-6 col-md-6">
-        <div
-          class="card flex-fill mx-3"
-          *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-        >
-          <div
-            class="card-header text-center"
-            translate="admin.event-dashboard.gross-income"
-          ></div>
-          <div class="card-body d-flex justify-content-between">
-            <div>
-              <svg-icon key="piggy-bank" width="70px" height="70px"></svg-icon>
-            </div>
-            <div class="fs-1">
-              {{ eventOrganizationInfo.event.grossIncome }}
-              {{ eventOrganizationInfo.event.currency }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div
-        style="max-height: 250px"
-        class="col-6 d-flex justify-content-center align-items-center"
-      >
-        <canvas
-          width="700px"
-          height="250px"
-          baseChart
-          [type]="'line'"
-          [data]="lineChartData"
-          [options]="lineChartOptions"
-          [legend]="lineChartLegend"
-        >
-        </canvas>
-      </div>
-
-      <div
-        style="max-height: 250px"
-        class="col-6 d-flex justify-content-center align-items-center"
-      >
-        <canvas
-          baseChart
-          height="250px"
-          [type]="'pie'"
-          [data]="pieChartData"
-          [options]="pieChartOptions"
-          [legend]="true"
-        >
-        </canvas>
-      </div>
-    </div>
-  </div>
-
-  <div class="card" *ngIf="event$ | async as event">
-    <div
-      class="card-header"
-      translate="admin.event-dashboard.logistics-info-and-description"
-    ></div>
-    <div
-      class="card-body"
-      *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo"
-    >
-      <div class="row">
-        <div class="col-2">
-          <img
-            src="/file/{{ eventOrganizationInfo.event.fileBlobId }}"
-            alt=""
-            class="img-fluid"
-          />
-        </div>
-        <div class="col-6">
-          <dl class="row">
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.public-url"
-            ></dt>
-            <dd class="col-sm-9">
-              <a
-                [href]="
-                  (instanceSetting$ | async)?.baseUrl +
-                  '/event/' +
-                  eventOrganizationInfo.event.shortName
-                "
-                target="_blank"
-                rel="noopener"
-                >{{
-                  (instanceSetting$ | async)?.baseUrl +
-                    "/event/" +
-                    eventOrganizationInfo.event.shortName
-                }}</a
-              >
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.organized-by"
-            ></dt>
-            <dd class="col-sm-9">
-              {{ eventOrganizationInfo.organization.name }} &lt;{{
-                eventOrganizationInfo.organization.email
-              }}&gt;
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.website-url"
-            ></dt>
-            <dd class="col-sm-9">
-              <a
-                href="{{ eventOrganizationInfo.event.websiteUrl }}"
-                target="_blank"
-                rel="noopener"
-                >{{ eventOrganizationInfo.event.websiteUrl }}</a
-              >
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.t-and-c-url"
-            ></dt>
-            <dd class="col-sm-9">
-              <a
-                href="{{ eventOrganizationInfo.event.termsAndConditionsUrl }}"
-                target="_blank"
-                rel="noopener"
-                >{{ eventOrganizationInfo.event.termsAndConditionsUrl }}</a
-              >
-            </dd>
-            <dt
-              *ngIf="eventOrganizationInfo.event.privacyPolicyUrl"
-              class="col-sm-3"
-              translate="admin.event-dashboard.privacy-policy-url"
-            ></dt>
-            <dd
-              *ngIf="eventOrganizationInfo.event.privacyPolicyUrl"
-              class="col-sm-9"
-            >
-              <a
-                href="{{ eventOrganizationInfo.event.privacyPolicyUrl }}"
-                target="_blank"
-                rel="noopener"
-                >{{ eventOrganizationInfo.event.privacyPolicyUrl }}</a
-              >
-            </dd>
-            <dt
-              *ngIf="!eventOrganizationInfo.event.online"
-              class="col-sm-3"
-              translate="admin.event-dashboard.location"
-            ></dt>
-            <dd *ngIf="!eventOrganizationInfo.event.online" class="col-sm-9">
-              <a
-                href="{{ eventOrganizationInfo.event.location }}"
-                target="_blank"
-                rel="noopener"
-                >{{ eventOrganizationInfo.event.location }}</a
-              >
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.languages"
-            ></dt>
-            <dd class="col-sm-9">
-              <ul class="breadcrumb language-breadcrumb mb-0">
-                <li
-                  class="breadcrumb-item"
-                  *ngFor="
-                    let language of eventOrganizationInfo.event.contentLanguages
-                  "
-                >
-                  <span>{{ language.displayLanguage | titlecase }}</span>
-                </li>
-              </ul>
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.start-date-time"
-            ></dt>
-            <dd class="col-sm-9">
-              {{ eventOrganizationInfo.event.formattedBegin | date }}
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.end-date-time"
-            ></dt>
-            <dd class="col-sm-9">
-              {{ eventOrganizationInfo.event.formattedEnd | date }}
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.time-zone"
-            ></dt>
-            <dd class="col-sm-9">{{ eventOrganizationInfo.event.timeZone }}</dd>
-          </dl>
-        </div>
-        <div class="col-4">
-          <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <li
-              *ngFor="
-                let language of eventOrganizationInfo.event.description
-                  | keyvalue;
-                let i = index
-              "
-              [ngbNavItem]="language.key"
-            >
-              <a ngbNavLink>{{ language.key }}</a>
-              <ng-template ngbNavContent>
-                <pre class="pt-3">{{ language.value }}</pre>
-              </ng-template>
-            </li>
-          </ul>
-
-          <div [ngbNavOutlet]="nav" class="mt-2"></div>
-        </div>
-      </div>
-      <hr />
-      <div class="d-flex flex-row-reverse">
-        <button class="btn btn-lg btn-primary" translate="common.edit"></button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="card mt-5"
-    *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo"
-  >
-    <div
-      class="card-header"
-      translate="admin.event-dashboard.seats-and-payment-info"
-    ></div>
-    <div class="card-body">
-      <div class="row">
-        <div class="col-xs-12 col-lg-6">
-          <dl class="row">
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.tickets-price"
-            ></dt>
-            <dd class="col-sm-9">
-              <span
-                *ngIf="eventOrganizationInfo.event.freeOfCharge"
-                translate="admin.event-dashboard.free-of-charge"
-              ></span>
-              <span *ngIf="!eventOrganizationInfo.event.freeOfCharge">{{
-                eventOrganizationInfo.event.regularPrice
-                  | currency : eventOrganizationInfo.event.currency
-              }}</span>
-            </dd>
-            <dt
-              class="col-sm-3"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-              translate="admin.event-dashboard.payment-methods"
-            ></dt>
-            <dd
-              class="col-sm-9"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-            >
-              {{
-                eventOrganizationInfo.event.allowedPaymentProxies
-                  | translatePaymentProxies
-              }}
-              <!-- <div
-                class="text-warning"
-                data-ng-if="(allowedPaymentProxies | paymentMethodFilter : true : event.currency).length > 0"
-              >
-                <i class="fa fa-info-circle"></i> The following Methods are not
-                available:
-                <span
-                  data-ng-repeat="p in allowedPaymentProxies | paymentMethodFilter : true : event.currency"
-                  >{{ p.id }}<span data-ng-if="!$last">, </span></span
-                >. Please check that the provider support the selected currency or
-                the
-                <a
-                  data-ui-sref="configuration.organization({organizationId: event.organizationId})"
-                  >configuration</a
-                >.
-              </div> -->
-            </dd>
-            <dt
-              class="col-sm-3"
-              translate="admin.event-dashboard.max-tickets"
-            ></dt>
-            <dd class="col-sm-9">
-              {{ eventOrganizationInfo.event.availableSeats }}
-            </dd>
-            <dt
-              class="col-sm-3"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-              translate="admin.event-dashboard.vat"
-            ></dt>
-            <dd
-              class="col-sm-9"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-            >
-              {{ eventOrganizationInfo.event.vatPercentage | currency : "" }}
-            </dd>
-            <dt
-              class="col-sm-3"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-              translate="admin.event-dashboard.final-price"
-            ></dt>
-            <dd
-              class="col-sm-9"
-              *ngIf="!eventOrganizationInfo.event.freeOfCharge"
-            >
-              {{
-                eventOrganizationInfo.event.finalPrice
-                  | currency : eventOrganizationInfo.event.currency || ""
-              }}
-            </dd>
-          </dl>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-12">
-          <hr />
-          <div class="d-flex flex-row-reverse">
-            <button
-              class="btn btn-lg btn-primary"
-              translate="common.edit"
-            ></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <h3 class="mt-5">
-    <svg-icon key="category"></svg-icon>
-    <span translate="admin.event-dashboard.categories"></span>
-  </h3>
-  <p class="text-muted" translate="admin.event-dashboard.categories-legend"></p>
-  <div class="py-2">
-    <button
-      type="button"
-      class="btn btn-success d-flex align-items-center"
-      [routerLink]="[]"
-    >
-      <svg-icon key="add" class="d-flex align-items-center"></svg-icon>
-      <span translate="admin.common.add-new"></span>
-    </button>
-  </div>
-  <hr />
-  <div *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo">
-    <div
-      class="btn-toolbar mb-3"
-      role="toolbar"
-      aria-label="Toolbar with input groups"
-    >
-      <div class="btn-group me-2" role="group" aria-label="First group">
-        <input
-          type="checkbox"
-          class="btn-check"
-          id="checkBoxActive"
-          autocomplete="off"
-          [(ngModel)]="categoryFilter.active"
-        />
-        <label
-          class="btn btn-outline-secondary"
-          for="checkBoxActive"
-          translate="admin.event-dashboard.active"
-          ><span class="badge rounded-pill bg-light text-dark mx-2">{{
-            countActive(eventOrganizationInfo.event.ticketCategories)
-          }}</span></label
-        >
-
-        <input
-          type="checkbox"
-          class="btn-check"
-          id="checkBoxExpired"
-          autocomplete="off"
-          [(ngModel)]="categoryFilter.expired"
-        />
-        <label
-          class="btn btn-outline-secondary"
-          for="checkBoxExpired"
-          translate="admin.event-dashboard.expired"
-          ><span class="badge rounded-pill bg-light text-dark mx-2">{{
-            countExpired(eventOrganizationInfo.event.ticketCategories)
-          }}</span></label
-        >
-      </div>
-      <div class="input-group">
-        <span class="input-group-text" id="btnGroupAddon">
-          <svg-icon key="search"></svg-icon>
-        </span>
-        <input
-          type="text"
-          class="form-control"
-          placeholder="Search category"
-          aria-label="Input group example"
-          aria-describedby="btnGroupAddon"
-          [(ngModel)]="categoryFilter.search"
-        />
-      </div>
-    </div>
-    <div
-      [ngSwitch]="
-        (
-          eventOrganizationInfo.event.ticketCategories
-          | uiCategoryBuilder
-          | showSelectedCategories : categoryFilter
-        ).length
-      "
-    >
-      <div
-        class="alert alert-warning"
-        translate="admin.event-dashboard.alert-warning"
-        *ngSwitchCase="0"
-      ></div>
-      <div *ngSwitchDefault>
-        <div
-          class="card mb-4"
-          *ngFor="
-            let ticketCategory of eventOrganizationInfo.event.ticketCategories
-              | uiCategoryBuilder
-              | showSelectedCategories : categoryFilter
-          "
-          [ngClass]="{
-            'alert alert-warning': ticketCategory.containingOrphans,
-            'alert alert-danger': ticketCategory.containingStuckTickets
-          }"
-          id="ticket-category-{{ ticketCategory.id }}"
-        >
-          <div class="card-header">
-            <div class="card-title">
-              <div class="row align-items-center">
-                <div
-                  class="col-xs-12 col-md-3"
-                  [ngClass]="{ 'text-danger': ticketCategory.displayWarning }"
-                >
-                  <div
-                    class="category-name"
-                    [ngClass]="{ 'category-active': !ticketCategory.expired }"
-                  >
-                    <svg-icon
-                      key="lock"
-                      *ngIf="
-                        !ticketCategory.displayWarning &&
-                        ticketCategory.accessRestricted
-                      "
-                    ></svg-icon>
-                    <svg-icon
-                      key="lock-open"
-                      *ngIf="
-                        !ticketCategory.displayWarning &&
-                        !ticketCategory.accessRestricted
-                      "
-                    ></svg-icon>
-
-                    {{ ticketCategory.name }}
-                    <small
-                      translate="admin.event-dashboard.online"
-                      class="badge bg-success"
-                      style="margin-left: 10px"
-                      *ngIf="
-                        eventOrganizationInfo.event.format === 'HYBRID' &&
-                        ticketCategory.ticketAccessType === 'ONLINE'
-                      "
-                    ></small>
-                  </div>
-                </div>
-                <div class="hidden-xs hidden-sm col-md-3">
-                  <div class="progress">
-                    <div
-                      *ngIf="ticketCategory.checkedInTickets != 0"
-                      class="progress-bar bg-success"
-                      role="progressbar"
-                      [style]="
-                        'width: ' +
-                        (ticketCategory.checkedInTickets /
-                          getActualCapacity(
-                            ticketCategory,
-                            eventOrganizationInfo.event
-                          )) *
-                          100 +
-                        '%'
-                      "
-                    >
-                      {{ ticketCategory.checkedInTickets }}
-                    </div>
-                    <div
-                      *ngIf="ticketCategory.soldTickets != 0"
-                      class="progress-bar bg-warning"
-                      role="progressbar"
-                      [style]="
-                        'width: ' +
-                        (ticketCategory.soldTickets /
-                          getActualCapacity(
-                            ticketCategory,
-                            eventOrganizationInfo.event
-                          )) *
-                          100 +
-                        '%'
-                      "
-                    >
-                      {{ ticketCategory.soldTickets }}
-                    </div>
-                    <div
-                      *ngIf="ticketCategory.pendingTickets != 0"
-                      class="progress-bar bg-info"
-                      role="progressbar"
-                      [style]="
-                        'width: ' +
-                        (ticketCategory.pendingTickets /
-                          getActualCapacity(
-                            ticketCategory,
-                            eventOrganizationInfo.event
-                          )) *
-                          100 +
-                        '%'
-                      "
-                    >
-                      {{ ticketCategory.pendingTickets }}
-                    </div>
-                    <div
-                      *ngIf="ticketCategory.notSoldTickets != 0"
-                      class="progress-bar bg-info"
-                      role="progressbar"
-                      [style]="
-                        'width: ' +
-                        (ticketCategory.notSoldTickets /
-                          getActualCapacity(
-                            ticketCategory,
-                            eventOrganizationInfo.event
-                          )) *
-                          100 +
-                        '%'
-                      "
-                    >
-                      {{ ticketCategory.notSoldTickets }}
-                    </div>
-                    <div
-                      *ngIf="!ticketCategory.bounded"
-                      type="default"
-                      class="progress-bar"
-                      role="progressbar"
-                      [style]="
-                        'width: ' +
-                        (eventOrganizationInfo.event.dynamicAllocation /
-                          getActualCapacity(
-                            ticketCategory,
-                            eventOrganizationInfo.event
-                          )) *
-                          100 +
-                        '%'
-                      "
-                    >
-                      {{ eventOrganizationInfo.event.dynamicAllocation }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="col-xs-12 col-md-6">
-                  <div class="d-flex justify-content-end">
-                    <a
-                      class="btn btn-outline-secondary btn-sm"
-                      href="events.single.ticketsList({eventName: event.shortName, categoryId: ticketCategory.id})"
-                    >
-                      <svg-icon key="ticket" size="md"></svg-icon>
-                      <span translate="admin.event-dashboard.tickets"></span>
-                    </a>
-                    <a
-                      class="btn btn-outline-secondary btn-sm"
-                      (click)="toggleTokenViewCollapse(ticketCategory)"
-                      *ngIf="ticketCategory.accessRestricted"
-                    >
-                      <svg-icon key="qr-code" size="md"></svg-icon>
-                      <span translate="admin.event-dashboard.tokens"></span>
-                    </a>
-                    <a
-                      class="btn btn-outline-secondary btn-sm"
-                      href="events.single.sendInvitations({eventName: event.shortName, categoryId: ticketCategory.id})"
-                      *ngIf="
-                        ticketCategory.accessRestricted &&
-                        !ticketCategory.expired
-                      "
-                    >
-                      <svg-icon key="outgoing-mail" size="md"></svg-icon>
-                      <span
-                        translate="admin.event-dashboard.send-invitations"
-                      ></span>
-                    </a>
-                    <a
-                      class="btn btn-sm btn-outline-secondary"
-                      (click)="
-                        openConfiguration(
-                          eventOrganizationInfo.event,
-                          ticketCategory
-                        )
-                      "
-                      ><svg-icon key="settings" size="md"></svg-icon>
-                      <span translate="admin.event-dashboard.options"></span
-                    ></a>
-                    <a
-                      class="btn btn-sm btn-danger"
-                      ng-if="canBeDeleted(event, ticketCategory)"
-                      ng-click="deleteCategory(ticketCategory, event)"
-                      ><svg-icon key="delete" size="md"></svg-icon>
-                      <span translate="admin.common.delete"></span
-                    ></a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card-body">
-            <div
-              *ngIf="ticketCategory.attendeesList"
-              class="alert alert-info text-center"
-            >
-              <span
-                translate="admin.event-dashboard.alert-message-limited-group"
-              >
-                <a
-                  href="groups.edit({orgId: event.organizationId, groupId: ticketCategory.attendeesList.groupId})"
-                  target="_blank"
-                  >{{ ticketCategory.attendeesList }}</a
-                >
-                <button
-                  type="button"
-                  class="btn btn-outline-secondary btn-sm"
-                  ng-click="openConfiguration(event, ticketCategory)"
-                  translate="admin.event-dashboard.configure"
-                >
-                  <svg-icon key="settings"></svg-icon></button
-              ></span>
-            </div>
-            <div
-              class="row form-inline text-danger"
-              *ngIf="ticketCategory.containingOrphans"
-            >
-              <div class="col-xs-12" data-ng-form="moveTickets">
-                <svg-icon key="warning"></svg-icon>
-                <span translate="admin.event-dashboard.message-orphans"></span>
-                <select
-                  class="form-control input-sm"
-                  data-ng-model="targetCategoryId"
-                  required
-                  data-ng-options="category.id as category.name for category in validCategories"
-                ></select>
-                <button
-                  class="btn btn-sm btn-warning"
-                  data-ng-click="moveOrphans(ticketCategory, targetCategoryId, event.id)"
-                  translate="admin.event-dashboard.apply"
-                ></button>
-                <button
-                  *ngIf="
-                    eventOrganizationInfo.event.containingUnboundedCategories
-                  "
-                  class="btn btn-sm btn-warning"
-                  (click)="
-                    unbindTickets(
-                      eventOrganizationInfo.event.shortName,
-                      ticketCategory
-                    )
-                  "
-                  translate="admin.event-dashboard.assign-to-dynamic-categories"
-                ></button>
-              </div>
-            </div>
-            <div
-              class="row text-warning"
-              *ngIf="ticketCategory.containingStuckTickets"
-            >
-              <div class="col-xs-12">
-                <svg-icon key="warning"></svg-icon>
-                <span
-                  translate="admin.event-dashboard.alert-message-category-tickets-unknown-state"
-                ></span>
-                <a
-                  translate="admin.event-dashboard.alert-message-category-tickets-unknown-state-link"
-                  ui-sref="events.single.ticketsList({eventName: event.shortName, categoryId: ticketCategory.id})"
-                ></a
-                >.
-              </div>
-            </div>
-
-            <app-ticket-category-detail></app-ticket-category-detail>
-            <div
-              *ngIf="ticketCategory.accessRestricted"
-              class="wMarginBottom"
-              data-uib-collapse="isTokenViewCollapsed(ticketCategory)"
-            >
-              <!-- <hr /> -->
-              <!-- <button
-                class="btn btn-outline-dark"
-                aria-label="Close"
-                data-ng-click="toggleTokenViewCollapse(ticketCategory)"
-              >
-                <svg-icon key="close"></svg-icon>
-              </button> -->
-              <!-- <h4>Tokens</h4>
-              <div *ngIf="containsValidTokens(ticketCategory.tokenStatus)">
-                <div
-                  *ngFor="(status, tokens) in groupTokensByStatus(ticketCategory.tokenStatus)"
-                >
-                  <h5><strong>{{status}}</strong></h5>
-                  <ul class="list-inline">
-                    <li data-ng-repeat="token in ::tokens">
-                      <a
-                        ng-if="token.status === 'TAKEN'"
-                        data-ui-sref="events.single.reservationsList({eventName: event.shortName, search: token.code})"
-                        title="Find reservation"
-                        >{{::token.code}}</a
-                      >
-                      <span data-ng-if="token.status !== 'TAKEN'">{{::token.code}}</span>
-                    </li>
-                  </ul>
-                </div>
-              </div> -->
-
-              <div
-                class="alert alert-info"
-                *ngIf="!containsValidTokens(ticketCategory.tokenStatus)"
-              >
-                <div class="row">
-                  <div class="col-xs-1">
-                    <svg-icon key="info"></svg-icon>
-                  </div>
-                  <div
-                    class="col-xs-11"
-                    translate="admin.event-dashboard.message-token-generation"
-                  ></div>
-                </div>
-              </div>
-            </div>
-            <div
-              *ngIf="
-                eventOrganizationInfo.event.format === 'IN_PERSON' ||
-                ticketCategory.ticketAccessType === 'IN_PERSON'
-              "
-            >
-              <hr />
-              <div class="row">
-                <div class="col-12">
-                  <div class="d-flex justify-content-end">
-                    <button
-                      class="btn btn-lg btn-primary btn-lg"
-                      translate="admin.event-dashboard.edit-category"
-                    ></button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              *ngIf="
-                eventOrganizationInfo.event.format === 'ONLINE' ||
-                ticketCategory.ticketAccessType === 'ONLINE'
-              "
-            >
-              <!-- <metadata-viewer event="event" parent-id="ticketCategory.id" metadata="ticketCategory.metadata" available-languages="event.contentLanguages" level="'category'">
-                          <button type="button" class="btn btn-warning btn-block" data-ng-click="editCategory(ticketCategory, event)">Edit category</button>
-                      </metadata-viewer> -->
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div><router-outlet></router-outlet></div>
 </app-section-dashboard>
diff --git a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.ts b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.ts
index 73edb9066..de1e9452d 100644
--- a/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.ts
+++ b/frontend/projects/admin/src/app/event/event-dashboard/event-dashboard.component.ts
@@ -1,24 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ChartConfiguration, ChartData, ChartOptions } from 'chart.js';
-import { Observable, map, of, switchMap } from 'rxjs';
-import {
-  Event,
-  EventInfo,
-  EventOrganizationInfo,
-  EventTicketsStatistics,
-} from '../../model/event';
-import { EventService } from '../../shared/event.service';
-import { formatDate } from '@angular/common';
-import { ConfigurationService } from '../../shared/configuration.service';
-import { InstanceSetting } from '../../model/instance-settings';
-import {
-  TicketAccessType,
-  TicketCategory,
-  TicketCategoryFilter,
-  TicketTokenStatus,
-  UiTicketCategory,
-} from 'projects/public/src/app/model/ticket-category';
 
 @Component({
   selector: 'app-event-dashboard',
@@ -26,197 +6,5 @@ import {
   styleUrls: ['./event-dashboard.component.scss'],
 })
 export class EventDashboardComponent implements OnInit {
-  public eventId$: Observable<string | null> = of();
-  public event$: Observable<Event | null> = of();
-  public eventOrganizationInfo$: Observable<EventOrganizationInfo | null> =
-    of();
-  public eventTicketsStatistics$: Observable<EventTicketsStatistics | null> =
-    of();
-  public instanceSetting$: Observable<InstanceSetting> = of();
-
-  public pieChartOptions: ChartOptions<'pie'> = {
-    responsive: true,
-
-    plugins: {
-      legend: {
-        display: true,
-        position: 'right',
-      },
-    },
-  };
-  public pieChartData: ChartData<'pie', number[], string | string[]> = {
-    labels: [],
-    datasets: [
-      {
-        data: [],
-        backgroundColor: [],
-      },
-    ],
-  };
-
-  public lineChartData: ChartConfiguration<'line'>['data'] = {
-    labels: [],
-    datasets: [],
-  };
-  public lineChartOptions: ChartOptions<'line'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-  };
-  public lineChartLegend = true;
-
-  public categoryFilter: TicketCategoryFilter = {
-    active: true,
-    expired: false,
-    search: '',
-  };
-
-  constructor(
-    private readonly eventService: EventService,
-    private readonly route: ActivatedRoute,
-    private readonly configurationService: ConfigurationService
-  ) {
-    this.eventId$ = route.paramMap.pipe(map((pm) => pm.get('eventId')));
-    this.instanceSetting$ = this.configurationService.loadInstanceSetting();
-
-    this.event$ = this.eventId$.pipe(
-      switchMap((eventId) =>
-        eventId != null ? eventService.getEvent(eventId) : of()
-      )
-    );
-
-    this.eventOrganizationInfo$ = this.event$.pipe(
-      switchMap((event) =>
-        event != null ? eventService.getEventByShortName(event.shortName) : of()
-      )
-    );
-
-    this.eventTicketsStatistics$ = this.event$.pipe(
-      switchMap((event) =>
-        event != null
-          ? eventService.getTicketsStatistics(event.shortName)
-          : of()
-      )
-    );
-
-    this.eventOrganizationInfo$.subscribe((eventOrganizationInfo) => {
-      const event = eventOrganizationInfo?.event;
-      if (!event) {
-        return;
-      }
-      this.loadPieData(event);
-    });
-
-    this.eventTicketsStatistics$.subscribe((eventTicketsStatistics) => {
-      if (!eventTicketsStatistics) {
-        return;
-      }
-      this.loadLineData(eventTicketsStatistics);
-    });
-  }
-
-  loadLineData(eventTicketsStatistics: EventTicketsStatistics) {
-    this.lineChartData = {
-      labels: eventTicketsStatistics.sold.map((item) =>
-        formatDate(item.date, 'mediumDate', 'en')
-      ),
-      datasets: [
-        {
-          data: eventTicketsStatistics.sold.map((item) => item.count),
-          label: 'Created Reservations',
-          borderColor: 'green',
-          backgroundColor: 'green',
-        },
-        {
-          data: eventTicketsStatistics.reserved.map((item) => item.count),
-          label: 'Confirmed Reservations',
-          borderColor: 'orange',
-          backgroundColor: 'orange',
-        },
-      ],
-    };
-  }
-
-  loadPieData(event: EventInfo) {
-    const pieData = [
-      {
-        value: event.checkedInTickets,
-        name: 'Checked in',
-        backgroundColor: '#5cb85c',
-        meta: 'Checked in (' + event.checkedInTickets + ')',
-      },
-      {
-        value: event.soldTickets,
-        name: 'Sold',
-        backgroundColor: '#f0ad4e',
-        meta: 'Sold (' + event.soldTickets + ')',
-      },
-      {
-        value: event.pendingTickets + event.releasedTickets,
-        name: 'Pending',
-        backgroundColor: '#7670b7',
-        meta:
-          'Pending (' + (event.pendingTickets + event.releasedTickets) + ')',
-      },
-      {
-        value: event.notSoldTickets,
-        name: 'Reserved for categories',
-        backgroundColor: '#00C4FF',
-        meta: 'Reserved for categories (' + event.notSoldTickets + ')',
-      },
-      {
-        value: event.notAllocatedTickets,
-        name: 'Not yet allocated',
-        backgroundColor: '#d9534f',
-        meta: 'Not yet allocated (' + event.notAllocatedTickets + ')',
-      },
-      {
-        value: event.dynamicAllocation,
-        name: 'Available',
-        backgroundColor: '#428bca',
-        meta: 'Available (' + event.dynamicAllocation + ')',
-      },
-    ].filter((item) => item.value > 0);
-
-    this.pieChartData = {
-      labels: pieData.map((item) => item.name),
-      datasets: [
-        {
-          data: pieData.map((item) => item.value),
-          backgroundColor: pieData.map((item) => item.backgroundColor),
-        },
-      ],
-    };
-  }
-  countExpired(ticketCategory: TicketCategory[]) {
-    return ticketCategory.filter((ticketCategory) => ticketCategory.expired)
-      .length;
-  }
-  countActive(ticketCategory: TicketCategory[]) {
-    return ticketCategory.filter((ticketCategory) => !ticketCategory.expired)
-      .length;
-  }
-
-  getActualCapacity(ticketCategory: TicketCategory, event: EventInfo) {
-    return ticketCategory.bounded
-      ? ticketCategory.maxTickets
-      : event.dynamicAllocation + ticketCategory.soldTickets;
-  }
-
-  toggleTokenViewCollapse(ticketCategory: UiTicketCategory) {
-    ticketCategory.tokenViewExpanded = !ticketCategory.tokenViewExpanded;
-  }
-
-  openConfiguration(event: EventInfo, ticketCategory: TicketCategory) {
-    alert('TODO');
-  }
-
-  containsValidTokens(tokens: TicketTokenStatus[]) {
-    return tokens.every((token) => token.status !== 'WAITING');
-  }
-
-  unbindTickets(eventShortName: string, category: UiTicketCategory) {
-    this.eventService.unbindTickets(eventShortName, category);
-  }
-
   ngOnInit(): void {}
 }
diff --git a/frontend/projects/admin/src/app/event/event-detail/event-detail.component.html b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.html
new file mode 100644
index 000000000..c8206d34d
--- /dev/null
+++ b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.html
@@ -0,0 +1,790 @@
+<div *ngIf="event$ | async as event" class="d-flex flex-row align-items-center">
+  <a class="btn" href=""><svg-icon key="edit"></svg-icon></a>
+  <h2 class="my-4">{{ event.displayName }}</h2>
+</div>
+<hr />
+<div *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo">
+  <div *ngIf="eventOrganizationInfo.event.displayStatistics" class="row">
+    <div class="col-6 col-md-3">
+      <div class="card flex-fill mx-3">
+        <div
+          class="card-header text-center"
+          translate="admin.event-dashboard.total-tickets-confirmed"
+        ></div>
+        <div class="card-body d-flex justify-content-between">
+          <div>
+            <svg-icon key="ticket" width="70px" height="70px"></svg-icon>
+          </div>
+
+          <div class="fs-1">
+            {{
+              eventOrganizationInfo.event.soldTickets +
+                eventOrganizationInfo.event.checkedInTickets
+            }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-6 col-md-3">
+      <div class="card flex-fill mx-3">
+        <div
+          class="card-header text-center"
+          translate="admin.event-dashboard.tickets-pending"
+        ></div>
+        <div class="card-body d-flex justify-content-between">
+          <div>
+            <svg-icon key="hourglass-top" width="70px" height="70px"></svg-icon>
+          </div>
+          <div class="fs-1">
+            {{ eventOrganizationInfo.event.pendingTickets }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-6 col-md-6">
+      <div
+        class="card flex-fill mx-3"
+        *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+      >
+        <div
+          class="card-header text-center"
+          translate="admin.event-dashboard.gross-income"
+        ></div>
+        <div class="card-body d-flex justify-content-between">
+          <div>
+            <svg-icon key="piggy-bank" width="70px" height="70px"></svg-icon>
+          </div>
+          <div class="fs-1">
+            {{ eventOrganizationInfo.event.grossIncome }}
+            {{ eventOrganizationInfo.event.currency }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row my-4">
+    <div
+      style="max-height: 250px"
+      class="col-6 d-flex justify-content-center align-items-center"
+    >
+      <canvas
+        width="700px"
+        height="250px"
+        baseChart
+        [type]="'line'"
+        [data]="lineChartData"
+        [options]="lineChartOptions"
+        [legend]="lineChartLegend"
+      >
+      </canvas>
+    </div>
+
+    <div
+      style="max-height: 250px"
+      class="col-6 d-flex justify-content-center align-items-center"
+    >
+      <canvas
+        baseChart
+        height="250px"
+        [type]="'pie'"
+        [data]="pieChartData"
+        [options]="pieChartOptions"
+        [legend]="true"
+      >
+      </canvas>
+    </div>
+  </div>
+</div>
+
+<div class="card" *ngIf="event$ | async as event">
+  <div
+    class="card-header"
+    translate="admin.event-dashboard.logistics-info-and-description"
+  ></div>
+  <div
+    class="card-body"
+    *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo"
+  >
+    <div class="row">
+      <div class="col-2">
+        <img
+          src="/file/{{ eventOrganizationInfo.event.fileBlobId }}"
+          alt=""
+          class="img-fluid"
+        />
+      </div>
+      <div class="col-6">
+        <dl class="row">
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.public-url"
+          ></dt>
+          <dd class="col-sm-9">
+            <a
+              [href]="
+                (instanceSetting$ | async)?.baseUrl +
+                '/event/' +
+                eventOrganizationInfo.event.shortName
+              "
+              target="_blank"
+              rel="noopener"
+              >{{
+                (instanceSetting$ | async)?.baseUrl +
+                  "/event/" +
+                  eventOrganizationInfo.event.shortName
+              }}</a
+            >
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.organized-by"
+          ></dt>
+          <dd class="col-sm-9">
+            {{ eventOrganizationInfo.organization.name }} &lt;{{
+              eventOrganizationInfo.organization.email
+            }}&gt;
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.website-url"
+          ></dt>
+          <dd class="col-sm-9">
+            <a
+              href="{{ eventOrganizationInfo.event.websiteUrl }}"
+              target="_blank"
+              rel="noopener"
+              >{{ eventOrganizationInfo.event.websiteUrl }}</a
+            >
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.t-and-c-url"
+          ></dt>
+          <dd class="col-sm-9">
+            <a
+              href="{{ eventOrganizationInfo.event.termsAndConditionsUrl }}"
+              target="_blank"
+              rel="noopener"
+              >{{ eventOrganizationInfo.event.termsAndConditionsUrl }}</a
+            >
+          </dd>
+          <dt
+            *ngIf="eventOrganizationInfo.event.privacyPolicyUrl"
+            class="col-sm-3"
+            translate="admin.event-dashboard.privacy-policy-url"
+          ></dt>
+          <dd
+            *ngIf="eventOrganizationInfo.event.privacyPolicyUrl"
+            class="col-sm-9"
+          >
+            <a
+              href="{{ eventOrganizationInfo.event.privacyPolicyUrl }}"
+              target="_blank"
+              rel="noopener"
+              >{{ eventOrganizationInfo.event.privacyPolicyUrl }}</a
+            >
+          </dd>
+          <dt
+            *ngIf="!eventOrganizationInfo.event.online"
+            class="col-sm-3"
+            translate="admin.event-dashboard.location"
+          ></dt>
+          <dd *ngIf="!eventOrganizationInfo.event.online" class="col-sm-9">
+            <a
+              href="{{ eventOrganizationInfo.event.location }}"
+              target="_blank"
+              rel="noopener"
+              >{{ eventOrganizationInfo.event.location }}</a
+            >
+          </dd>
+          <dt class="col-sm-3" translate="admin.event-dashboard.languages"></dt>
+          <dd class="col-sm-9">
+            <ul class="breadcrumb language-breadcrumb mb-0">
+              <li
+                class="breadcrumb-item"
+                *ngFor="
+                  let language of eventOrganizationInfo.event.contentLanguages
+                "
+              >
+                <span>{{ language.displayLanguage | titlecase }}</span>
+              </li>
+            </ul>
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.start-date-time"
+          ></dt>
+          <dd class="col-sm-9">
+            {{ eventOrganizationInfo.event.formattedBegin | date }}
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.end-date-time"
+          ></dt>
+          <dd class="col-sm-9">
+            {{ eventOrganizationInfo.event.formattedEnd | date }}
+          </dd>
+          <dt class="col-sm-3" translate="admin.event-dashboard.time-zone"></dt>
+          <dd class="col-sm-9">{{ eventOrganizationInfo.event.timeZone }}</dd>
+        </dl>
+      </div>
+      <div class="col-4">
+        <ul ngbNav #nav="ngbNav" class="nav-tabs">
+          <li
+            *ngFor="
+              let language of eventOrganizationInfo.event.description
+                | keyvalue;
+              let i = index
+            "
+            [ngbNavItem]="language.key"
+          >
+            <a ngbNavLink>{{ language.key }}</a>
+            <ng-template ngbNavContent>
+              <pre class="pt-3">{{ language.value }}</pre>
+            </ng-template>
+          </li>
+        </ul>
+
+        <div [ngbNavOutlet]="nav" class="mt-2"></div>
+      </div>
+    </div>
+    <hr />
+    <div class="d-flex flex-row-reverse">
+      <button class="btn btn-lg btn-primary" translate="common.edit"></button>
+    </div>
+  </div>
+</div>
+<div
+  class="card mt-5"
+  *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo"
+>
+  <div
+    class="card-header"
+    translate="admin.event-dashboard.seats-and-payment-info"
+  ></div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-xs-12 col-lg-6">
+        <dl class="row">
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.tickets-price"
+          ></dt>
+          <dd class="col-sm-9">
+            <span
+              *ngIf="eventOrganizationInfo.event.freeOfCharge"
+              translate="admin.event-dashboard.free-of-charge"
+            ></span>
+            <span *ngIf="!eventOrganizationInfo.event.freeOfCharge">{{
+              eventOrganizationInfo.event.regularPrice
+                | currency : eventOrganizationInfo.event.currency
+            }}</span>
+          </dd>
+          <dt
+            class="col-sm-3"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+            translate="admin.event-dashboard.payment-methods"
+          ></dt>
+          <dd
+            class="col-sm-9"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+          >
+            {{
+              eventOrganizationInfo.event.allowedPaymentProxies
+                | translatePaymentProxies
+            }}
+            <!-- <div
+                class="text-warning"
+                data-ng-if="(allowedPaymentProxies | paymentMethodFilter : true : event.currency).length > 0"
+              >
+                <i class="fa fa-info-circle"></i> The following Methods are not
+                available:
+                <span
+                  data-ng-repeat="p in allowedPaymentProxies | paymentMethodFilter : true : event.currency"
+                  >{{ p.id }}<span data-ng-if="!$last">, </span></span
+                >. Please check that the provider support the selected currency or
+                the
+                <a
+                  data-ui-sref="configuration.organization({organizationId: event.organizationId})"
+                  >configuration</a
+                >.
+              </div> -->
+          </dd>
+          <dt
+            class="col-sm-3"
+            translate="admin.event-dashboard.max-tickets"
+          ></dt>
+          <dd class="col-sm-9">
+            {{ eventOrganizationInfo.event.availableSeats }}
+          </dd>
+          <dt
+            class="col-sm-3"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+            translate="admin.event-dashboard.vat"
+          ></dt>
+          <dd
+            class="col-sm-9"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+          >
+            {{ eventOrganizationInfo.event.vatPercentage | currency : "" }}
+          </dd>
+          <dt
+            class="col-sm-3"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+            translate="admin.event-dashboard.final-price"
+          ></dt>
+          <dd
+            class="col-sm-9"
+            *ngIf="!eventOrganizationInfo.event.freeOfCharge"
+          >
+            {{
+              eventOrganizationInfo.event.finalPrice
+                | currency : eventOrganizationInfo.event.currency || ""
+            }}
+          </dd>
+        </dl>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <hr />
+        <div class="d-flex flex-row-reverse">
+          <button
+            class="btn btn-lg btn-primary"
+            translate="common.edit"
+          ></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h3 class="mt-5">
+  <svg-icon key="category"></svg-icon>
+  <span translate="admin.event-dashboard.categories"></span>
+</h3>
+<p class="text-muted" translate="admin.event-dashboard.categories-legend"></p>
+<div class="py-2">
+  <button
+    type="button"
+    class="btn btn-success d-flex align-items-center"
+    [routerLink]="[]"
+  >
+    <svg-icon key="add" class="d-flex align-items-center"></svg-icon>
+    <span translate="admin.common.add-new"></span>
+  </button>
+</div>
+<hr />
+<div *ngIf="eventOrganizationInfo$ | async as eventOrganizationInfo">
+  <div
+    class="btn-toolbar mb-3"
+    role="toolbar"
+    aria-label="Toolbar with input groups"
+  >
+    <div class="btn-group me-2" role="group" aria-label="First group">
+      <input
+        type="checkbox"
+        class="btn-check"
+        id="checkBoxActive"
+        autocomplete="off"
+        [(ngModel)]="categoryFilter.active"
+      />
+      <label
+        class="btn btn-outline-secondary"
+        for="checkBoxActive"
+        translate="admin.event-dashboard.active"
+        ><span class="badge rounded-pill bg-light text-dark mx-2">{{
+          countActive(eventOrganizationInfo.event.ticketCategories)
+        }}</span></label
+      >
+
+      <input
+        type="checkbox"
+        class="btn-check"
+        id="checkBoxExpired"
+        autocomplete="off"
+        [(ngModel)]="categoryFilter.expired"
+      />
+      <label
+        class="btn btn-outline-secondary"
+        for="checkBoxExpired"
+        translate="admin.event-dashboard.expired"
+        ><span class="badge rounded-pill bg-light text-dark mx-2">{{
+          countExpired(eventOrganizationInfo.event.ticketCategories)
+        }}</span></label
+      >
+    </div>
+    <div class="input-group">
+      <span class="input-group-text" id="btnGroupAddon">
+        <svg-icon key="search"></svg-icon>
+      </span>
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Search category"
+        aria-label="Input group example"
+        aria-describedby="btnGroupAddon"
+        [(ngModel)]="categoryFilter.search"
+      />
+    </div>
+  </div>
+  <div
+    [ngSwitch]="
+      (
+        eventOrganizationInfo.event.ticketCategories
+        | uiCategoryBuilder
+        | showSelectedCategories : categoryFilter
+      ).length
+    "
+  >
+    <div
+      class="alert alert-warning"
+      translate="admin.event-dashboard.alert-warning"
+      *ngSwitchCase="0"
+    ></div>
+    <div *ngSwitchDefault>
+      <div
+        class="card mb-4"
+        *ngFor="
+          let ticketCategory of eventOrganizationInfo.event.ticketCategories
+            | uiCategoryBuilder
+            | showSelectedCategories : categoryFilter
+        "
+        [ngClass]="{
+          'alert alert-warning': ticketCategory.containingOrphans,
+          'alert alert-danger': ticketCategory.containingStuckTickets
+        }"
+        id="ticket-category-{{ ticketCategory.id }}"
+      >
+        <div class="card-header">
+          <div class="card-title">
+            <div class="row align-items-center">
+              <div
+                class="col-xs-12 col-md-3"
+                [ngClass]="{ 'text-danger': ticketCategory.displayWarning }"
+              >
+                <div
+                  class="category-name"
+                  [ngClass]="{ 'category-active': !ticketCategory.expired }"
+                >
+                  <svg-icon
+                    key="lock"
+                    *ngIf="
+                      !ticketCategory.displayWarning &&
+                      ticketCategory.accessRestricted
+                    "
+                  ></svg-icon>
+                  <svg-icon
+                    key="lock-open"
+                    *ngIf="
+                      !ticketCategory.displayWarning &&
+                      !ticketCategory.accessRestricted
+                    "
+                  ></svg-icon>
+
+                  {{ ticketCategory.name }}
+                  <small
+                    translate="admin.event-dashboard.online"
+                    class="badge bg-success"
+                    style="margin-left: 10px"
+                    *ngIf="
+                      eventOrganizationInfo.event.format === 'HYBRID' &&
+                      ticketCategory.ticketAccessType === 'ONLINE'
+                    "
+                  ></small>
+                </div>
+              </div>
+              <div class="hidden-xs hidden-sm col-md-3">
+                <div class="progress">
+                  <div
+                    *ngIf="ticketCategory.checkedInTickets != 0"
+                    class="progress-bar bg-success"
+                    role="progressbar"
+                    [style]="
+                      'width: ' +
+                      (ticketCategory.checkedInTickets /
+                        getActualCapacity(
+                          ticketCategory,
+                          eventOrganizationInfo.event
+                        )) *
+                        100 +
+                      '%'
+                    "
+                  >
+                    {{ ticketCategory.checkedInTickets }}
+                  </div>
+                  <div
+                    *ngIf="ticketCategory.soldTickets != 0"
+                    class="progress-bar bg-warning"
+                    role="progressbar"
+                    [style]="
+                      'width: ' +
+                      (ticketCategory.soldTickets /
+                        getActualCapacity(
+                          ticketCategory,
+                          eventOrganizationInfo.event
+                        )) *
+                        100 +
+                      '%'
+                    "
+                  >
+                    {{ ticketCategory.soldTickets }}
+                  </div>
+                  <div
+                    *ngIf="ticketCategory.pendingTickets != 0"
+                    class="progress-bar bg-info"
+                    role="progressbar"
+                    [style]="
+                      'width: ' +
+                      (ticketCategory.pendingTickets /
+                        getActualCapacity(
+                          ticketCategory,
+                          eventOrganizationInfo.event
+                        )) *
+                        100 +
+                      '%'
+                    "
+                  >
+                    {{ ticketCategory.pendingTickets }}
+                  </div>
+                  <div
+                    *ngIf="ticketCategory.notSoldTickets != 0"
+                    class="progress-bar bg-info"
+                    role="progressbar"
+                    [style]="
+                      'width: ' +
+                      (ticketCategory.notSoldTickets /
+                        getActualCapacity(
+                          ticketCategory,
+                          eventOrganizationInfo.event
+                        )) *
+                        100 +
+                      '%'
+                    "
+                  >
+                    {{ ticketCategory.notSoldTickets }}
+                  </div>
+                  <div
+                    *ngIf="!ticketCategory.bounded"
+                    type="default"
+                    class="progress-bar"
+                    role="progressbar"
+                    [style]="
+                      'width: ' +
+                      (eventOrganizationInfo.event.dynamicAllocation /
+                        getActualCapacity(
+                          ticketCategory,
+                          eventOrganizationInfo.event
+                        )) *
+                        100 +
+                      '%'
+                    "
+                  >
+                    {{ eventOrganizationInfo.event.dynamicAllocation }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-xs-12 col-md-6">
+                <div class="d-flex justify-content-end">
+                  <a
+                    class="btn btn-outline-secondary btn-sm"
+                    href="events.single.ticketsList({eventName: event.shortName, categoryId: ticketCategory.id})"
+                  >
+                    <svg-icon key="ticket" size="md"></svg-icon>
+                    <span translate="admin.event-dashboard.tickets"></span>
+                  </a>
+                  <a
+                    class="btn btn-outline-secondary btn-sm"
+                    (click)="toggleTokenViewCollapse(ticketCategory)"
+                    *ngIf="ticketCategory.accessRestricted"
+                  >
+                    <svg-icon key="qr-code" size="md"></svg-icon>
+                    <span translate="admin.event-dashboard.tokens"></span>
+                  </a>
+                  <a
+                    class="btn btn-outline-secondary btn-sm"
+                    href="events.single.sendInvitations({eventName: event.shortName, categoryId: ticketCategory.id})"
+                    *ngIf="
+                      ticketCategory.accessRestricted && !ticketCategory.expired
+                    "
+                  >
+                    <svg-icon key="outgoing-mail" size="md"></svg-icon>
+                    <span
+                      translate="admin.event-dashboard.send-invitations"
+                    ></span>
+                  </a>
+                  <a
+                    class="btn btn-sm btn-outline-secondary"
+                    (click)="
+                      openConfiguration(
+                        eventOrganizationInfo.event,
+                        ticketCategory
+                      )
+                    "
+                    ><svg-icon key="settings" size="md"></svg-icon>
+                    <span translate="admin.event-dashboard.options"></span
+                  ></a>
+                  <a
+                    class="btn btn-sm btn-danger"
+                    ng-if="canBeDeleted(event, ticketCategory)"
+                    ng-click="deleteCategory(ticketCategory, event)"
+                    ><svg-icon key="delete" size="md"></svg-icon>
+                    <span translate="admin.common.delete"></span
+                  ></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div
+            *ngIf="ticketCategory.attendeesList"
+            class="alert alert-info text-center"
+          >
+            <span translate="admin.event-dashboard.alert-message-limited-group">
+              <a
+                href="groups.edit({orgId: event.organizationId, groupId: ticketCategory.attendeesList.groupId})"
+                target="_blank"
+                >{{ ticketCategory.attendeesList }}</a
+              >
+              <button
+                type="button"
+                class="btn btn-outline-secondary btn-sm"
+                ng-click="openConfiguration(event, ticketCategory)"
+                translate="admin.event-dashboard.configure"
+              >
+                <svg-icon key="settings"></svg-icon></button
+            ></span>
+          </div>
+          <div
+            class="row form-inline text-danger"
+            *ngIf="ticketCategory.containingOrphans"
+          >
+            <div class="col-xs-12" data-ng-form="moveTickets">
+              <svg-icon key="warning"></svg-icon>
+              <span translate="admin.event-dashboard.message-orphans"></span>
+              <select
+                class="form-control input-sm"
+                data-ng-model="targetCategoryId"
+                required
+                data-ng-options="category.id as category.name for category in validCategories"
+              ></select>
+              <button
+                class="btn btn-sm btn-warning"
+                data-ng-click="moveOrphans(ticketCategory, targetCategoryId, event.id)"
+                translate="admin.event-dashboard.apply"
+              ></button>
+              <button
+                *ngIf="
+                  eventOrganizationInfo.event.containingUnboundedCategories
+                "
+                class="btn btn-sm btn-warning"
+                (click)="
+                  unbindTickets(
+                    eventOrganizationInfo.event.shortName,
+                    ticketCategory
+                  )
+                "
+                translate="admin.event-dashboard.assign-to-dynamic-categories"
+              ></button>
+            </div>
+          </div>
+          <div
+            class="row text-warning"
+            *ngIf="ticketCategory.containingStuckTickets"
+          >
+            <div class="col-xs-12">
+              <svg-icon key="warning"></svg-icon>
+              <span
+                translate="admin.event-dashboard.alert-message-category-tickets-unknown-state"
+              ></span>
+              <a
+                translate="admin.event-dashboard.alert-message-category-tickets-unknown-state-link"
+                ui-sref="events.single.ticketsList({eventName: event.shortName, categoryId: ticketCategory.id})"
+              ></a
+              >.
+            </div>
+          </div>
+
+          <app-ticket-category-detail></app-ticket-category-detail>
+          <div
+            *ngIf="ticketCategory.accessRestricted"
+            class="wMarginBottom"
+            data-uib-collapse="isTokenViewCollapsed(ticketCategory)"
+          >
+            <!-- <hr /> -->
+            <!-- <button
+                class="btn btn-outline-dark"
+                aria-label="Close"
+                data-ng-click="toggleTokenViewCollapse(ticketCategory)"
+              >
+                <svg-icon key="close"></svg-icon>
+              </button> -->
+            <!-- <h4>Tokens</h4>
+              <div *ngIf="containsValidTokens(ticketCategory.tokenStatus)">
+                <div
+                  *ngFor="(status, tokens) in groupTokensByStatus(ticketCategory.tokenStatus)"
+                >
+                  <h5><strong>{{status}}</strong></h5>
+                  <ul class="list-inline">
+                    <li data-ng-repeat="token in ::tokens">
+                      <a
+                        ng-if="token.status === 'TAKEN'"
+                        data-ui-sref="events.single.reservationsList({eventName: event.shortName, search: token.code})"
+                        title="Find reservation"
+                        >{{::token.code}}</a
+                      >
+                      <span data-ng-if="token.status !== 'TAKEN'">{{::token.code}}</span>
+                    </li>
+                  </ul>
+                </div>
+              </div> -->
+
+            <div
+              class="alert alert-info"
+              *ngIf="!containsValidTokens(ticketCategory.tokenStatus)"
+            >
+              <div class="row">
+                <div class="col-xs-1">
+                  <svg-icon key="info"></svg-icon>
+                </div>
+                <div
+                  class="col-xs-11"
+                  translate="admin.event-dashboard.message-token-generation"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div
+            *ngIf="
+              eventOrganizationInfo.event.format === 'IN_PERSON' ||
+              ticketCategory.ticketAccessType === 'IN_PERSON'
+            "
+          >
+            <hr />
+            <div class="row">
+              <div class="col-12">
+                <div class="d-flex justify-content-end">
+                  <button
+                    class="btn btn-lg btn-primary btn-lg"
+                    translate="admin.event-dashboard.edit-category"
+                  ></button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            *ngIf="
+              eventOrganizationInfo.event.format === 'ONLINE' ||
+              ticketCategory.ticketAccessType === 'ONLINE'
+            "
+          >
+            <!-- <metadata-viewer event="event" parent-id="ticketCategory.id" metadata="ticketCategory.metadata" available-languages="event.contentLanguages" level="'category'">
+                          <button type="button" class="btn btn-warning btn-block" data-ng-click="editCategory(ticketCategory, event)">Edit category</button>
+                      </metadata-viewer> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/projects/admin/src/app/event/event-detail/event-detail.component.scss b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts
new file mode 100644
index 000000000..8f2427278
--- /dev/null
+++ b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts
@@ -0,0 +1,222 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ChartConfiguration, ChartData, ChartOptions } from 'chart.js';
+import { Observable, map, of, switchMap } from 'rxjs';
+import {
+  Event,
+  EventInfo,
+  EventOrganizationInfo,
+  EventTicketsStatistics,
+} from '../../model/event';
+import { EventService } from '../../shared/event.service';
+import { formatDate } from '@angular/common';
+import { ConfigurationService } from '../../shared/configuration.service';
+import { InstanceSetting } from '../../model/instance-settings';
+import {
+  TicketAccessType,
+  TicketCategory,
+  TicketCategoryFilter,
+  TicketTokenStatus,
+  UiTicketCategory,
+} from 'projects/public/src/app/model/ticket-category';
+
+@Component({
+  selector: 'app-event-detail',
+  templateUrl: './event-detail.component.html',
+  styleUrls: ['./event-detail.component.scss'],
+})
+export class EventDetailComponent implements OnInit {
+  public eventId$: Observable<string | null> = of();
+  public event$: Observable<Event | null> = of();
+  public eventOrganizationInfo$: Observable<EventOrganizationInfo | null> =
+    of();
+  public eventTicketsStatistics$: Observable<EventTicketsStatistics | null> =
+    of();
+  public instanceSetting$: Observable<InstanceSetting> = of();
+
+  public pieChartOptions: ChartOptions<'pie'> = {
+    responsive: true,
+
+    plugins: {
+      legend: {
+        display: true,
+        position: 'right',
+      },
+    },
+  };
+  public pieChartData: ChartData<'pie', number[], string | string[]> = {
+    labels: [],
+    datasets: [
+      {
+        data: [],
+        backgroundColor: [],
+      },
+    ],
+  };
+
+  public lineChartData: ChartConfiguration<'line'>['data'] = {
+    labels: [],
+    datasets: [],
+  };
+  public lineChartOptions: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  public lineChartLegend = true;
+
+  public categoryFilter: TicketCategoryFilter = {
+    active: true,
+    expired: false,
+    search: '',
+  };
+
+  constructor(
+    private readonly eventService: EventService,
+    private readonly route: ActivatedRoute,
+    private readonly configurationService: ConfigurationService
+  ) {
+    this.eventId$ = route.paramMap.pipe(map((pm) => pm.get('eventId')));
+    this.instanceSetting$ = this.configurationService.loadInstanceSetting();
+
+    this.event$ = this.eventId$.pipe(
+      switchMap((eventId) =>
+        eventId != null ? eventService.getEvent(eventId) : of()
+      )
+    );
+
+    this.eventOrganizationInfo$ = this.event$.pipe(
+      switchMap((event) =>
+        event != null ? eventService.getEventByShortName(event.shortName) : of()
+      )
+    );
+
+    this.eventTicketsStatistics$ = this.event$.pipe(
+      switchMap((event) =>
+        event != null
+          ? eventService.getTicketsStatistics(event.shortName)
+          : of()
+      )
+    );
+
+    this.eventOrganizationInfo$.subscribe((eventOrganizationInfo) => {
+      const event = eventOrganizationInfo?.event;
+      if (!event) {
+        return;
+      }
+      this.loadPieData(event);
+    });
+
+    this.eventTicketsStatistics$.subscribe((eventTicketsStatistics) => {
+      if (!eventTicketsStatistics) {
+        return;
+      }
+      this.loadLineData(eventTicketsStatistics);
+    });
+  }
+
+  loadLineData(eventTicketsStatistics: EventTicketsStatistics) {
+    this.lineChartData = {
+      labels: eventTicketsStatistics.sold.map((item) =>
+        formatDate(item.date, 'mediumDate', 'en')
+      ),
+      datasets: [
+        {
+          data: eventTicketsStatistics.sold.map((item) => item.count),
+          label: 'Created Reservations',
+          borderColor: 'green',
+          backgroundColor: 'green',
+        },
+        {
+          data: eventTicketsStatistics.reserved.map((item) => item.count),
+          label: 'Confirmed Reservations',
+          borderColor: 'orange',
+          backgroundColor: 'orange',
+        },
+      ],
+    };
+  }
+
+  loadPieData(event: EventInfo) {
+    const pieData = [
+      {
+        value: event.checkedInTickets,
+        name: 'Checked in',
+        backgroundColor: '#5cb85c',
+        meta: 'Checked in (' + event.checkedInTickets + ')',
+      },
+      {
+        value: event.soldTickets,
+        name: 'Sold',
+        backgroundColor: '#f0ad4e',
+        meta: 'Sold (' + event.soldTickets + ')',
+      },
+      {
+        value: event.pendingTickets + event.releasedTickets,
+        name: 'Pending',
+        backgroundColor: '#7670b7',
+        meta:
+          'Pending (' + (event.pendingTickets + event.releasedTickets) + ')',
+      },
+      {
+        value: event.notSoldTickets,
+        name: 'Reserved for categories',
+        backgroundColor: '#00C4FF',
+        meta: 'Reserved for categories (' + event.notSoldTickets + ')',
+      },
+      {
+        value: event.notAllocatedTickets,
+        name: 'Not yet allocated',
+        backgroundColor: '#d9534f',
+        meta: 'Not yet allocated (' + event.notAllocatedTickets + ')',
+      },
+      {
+        value: event.dynamicAllocation,
+        name: 'Available',
+        backgroundColor: '#428bca',
+        meta: 'Available (' + event.dynamicAllocation + ')',
+      },
+    ].filter((item) => item.value > 0);
+
+    this.pieChartData = {
+      labels: pieData.map((item) => item.name),
+      datasets: [
+        {
+          data: pieData.map((item) => item.value),
+          backgroundColor: pieData.map((item) => item.backgroundColor),
+        },
+      ],
+    };
+  }
+  countExpired(ticketCategory: TicketCategory[]) {
+    return ticketCategory.filter((ticketCategory) => ticketCategory.expired)
+      .length;
+  }
+  countActive(ticketCategory: TicketCategory[]) {
+    return ticketCategory.filter((ticketCategory) => !ticketCategory.expired)
+      .length;
+  }
+
+  getActualCapacity(ticketCategory: TicketCategory, event: EventInfo) {
+    return ticketCategory.bounded
+      ? ticketCategory.maxTickets
+      : event.dynamicAllocation + ticketCategory.soldTickets;
+  }
+
+  toggleTokenViewCollapse(ticketCategory: UiTicketCategory) {
+    ticketCategory.tokenViewExpanded = !ticketCategory.tokenViewExpanded;
+  }
+
+  openConfiguration(event: EventInfo, ticketCategory: TicketCategory) {
+    alert('TODO');
+  }
+
+  containsValidTokens(tokens: TicketTokenStatus[]) {
+    return tokens.every((token) => token.status !== 'WAITING');
+  }
+
+  unbindTickets(eventShortName: string, category: UiTicketCategory) {
+    this.eventService.unbindTickets(eventShortName, category);
+  }
+
+  ngOnInit(): void {}
+}
diff --git a/frontend/projects/admin/src/app/event/event-menu/event-menu.component.html b/frontend/projects/admin/src/app/event/event-menu/event-menu.component.html
index e068c0f86..4f964dd57 100644
--- a/frontend/projects/admin/src/app/event/event-menu/event-menu.component.html
+++ b/frontend/projects/admin/src/app/event/event-menu/event-menu.component.html
@@ -79,7 +79,7 @@ <h3 class="text-muted mt-3" translate="admin.event.menu.details"></h3>
       <li>
         <ul class="list-unstyled">
           <li>
-            <a class="text-decoration-none" href=""
+            <a class="text-decoration-none" [routerLink]="['./']"
               ><svg-icon key="arrow-back"></svg-icon>
               <span translate="admin.event.menu.back-to-event-detail"></span
             ></a>
@@ -111,7 +111,7 @@ <h3 class="text-muted mt-3" translate="admin.event.menu.details"></h3>
             ></a>
           </li>
           <li>
-            <a class="text-decoration-none" routerLink="./email-log"
+            <a class="text-decoration-none" [routerLink]="['./', 'email-log']"
               ><svg-icon key="email-sent"></svg-icon>
               <span translate="admin.event.menu.email-log"></span
             ></a>
diff --git a/frontend/projects/admin/src/app/event/event.module.ts b/frontend/projects/admin/src/app/event/event.module.ts
index 1b851bdfb..635c2545a 100644
--- a/frontend/projects/admin/src/app/event/event.module.ts
+++ b/frontend/projects/admin/src/app/event/event.module.ts
@@ -24,6 +24,7 @@ import { FormsModule } from '@angular/forms';
 import { TicketCategoryDetailComponent } from './ticket-category-detail/ticket-category-detail.component';
 import { MailService } from '../../event/mail.service';
 import { EmailDetailComponent } from './email-detail/email-detail.component';
+import { EventDetailComponent } from './event-detail/event-detail.component';
 
 @NgModule({
   declarations: [
@@ -35,6 +36,7 @@ import { EmailDetailComponent } from './email-detail/email-detail.component';
     UiCategoryBuilderPipe,
     TicketCategoryDetailComponent,
     EmailDetailComponent,
+    EventDetailComponent,
   ],
   imports: [
     TranslateModule.forChild(),
@@ -48,9 +50,14 @@ import { EmailDetailComponent } from './email-detail/email-detail.component';
     NgbDropdownModule,
 
     RouterModule.forChild([
-      { path: '', component: EventDashboardComponent },
-      { path: 'email-log', component: EmailLogComponent },
-      { path: 'email-log/email-detail', component: EmailDetailComponent },
+      {
+        path: '',
+        component: EventDashboardComponent,
+        children: [
+          { path: '', component: EventDetailComponent },
+          { path: 'email-log', component: EmailLogComponent },
+        ],
+      },
     ]),
   ],
   providers: [
diff --git a/src/main/resources/alfio/i18n/public.properties b/src/main/resources/alfio/i18n/public.properties
index 3d0b28e78..39556458e 100644
--- a/src/main/resources/alfio/i18n/public.properties
+++ b/src/main/resources/alfio/i18n/public.properties
@@ -702,6 +702,10 @@ admin.event-dashboard.apply=apply
 admin.event-dashboard.assign-to-dynamic-categories=Assign to dynamic categories
 admin.event-dashboard.message-token-generation=Token generation in progress. Please wait 30s and then reload the page.
 
+admin.event-item.settings=Settings
+admin.event-item.check-in= Check-In
+admin.event-item.pending-payments=Pending payments
+
 admin.event.menu.details=Details
 admin.event.menu.attendees-data-to-collect=Attendees'' data to collect
 admin.event.menu.promo-codes=Promo Codes
@@ -722,7 +726,18 @@ admin.event.menu.check-in=Check in
 admin.event.menu.copy-this-event=Copy this event
 admin.event.menu.download=Download
 admin.event.menu.attendees-data=Attendees'' data
-
 admin.event.menu.sponsors-scan=Sponsors scan
 admin.event.menu.all-billing-documents-pdf=All billing documents (PDF)
 admin.event.menu.all-billing-excel=All Billing Documents (Excel)
+
+admin.event.mail-log.title=Email log
+admin.event.mail-log.legend=Here you can find all the e-mails generated by the current event
+admin.event.mail-log.emails=Emails
+admin.event.mail-log.list.recipent=Recipent
+admin.event.mail-log.list.subject=Subject
+admin.event.mail-log.list.message=Message
+admin.event.mail-log.list.status=Status
+admin.event.mail-log.list.checksum=Checksum
+admin.event.mail-log.list.requested=Requested 
+admin.event.mail-log.list.sent=Sent
+

From 1d58e5cab1c9823e1b55224e7786568a83bc6cb9 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Fri, 23 Jun 2023 14:25:03 +0200
Subject: [PATCH 07/15] refactoring model names

---
 .../event/email-log/email-log.component.html   | 18 +++++++++---------
 .../app/event/email-log/email-log.component.ts |  8 ++++----
 frontend/projects/admin/src/app/model/mail.ts  |  6 +++---
 .../projects/admin/src/event/mail.service.ts   | 14 ++++++++++----
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index bb8dd7a69..8a0616027 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -1,4 +1,4 @@
-<div class="container" *ngIf="mail$ | async as mail">
+<div class="container" *ngIf="mailLog$ | async as mailLog">
   <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
   <p translate="admin.event.mail-log.legend"></p>
   <hr />
@@ -33,18 +33,18 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let mailDetail of mail.left">
-          <th scope="row">{{ mailDetail.recipient }}</th>
-          <td class="text-overflow">{{ mailDetail.subject }}</td>
+        <tr *ngFor="let mail of mailLog.left">
+          <th scope="row">{{ mail.recipient }}</th>
+          <td class="text-overflow">{{ mail.subject }}</td>
           <td>
-            <a routerLink="./email-detail">{{ mailDetail.message }}</a>
+            <a [routerLink]="['./', mail.id]">{{ mail.message }}</a>
           </td>
-          <td>{{ mailDetail.status }}</td>
+          <td>{{ mail.status }}</td>
           <td class="text-overflow">
-            {{ mailDetail.checksum }}
+            {{ mail.checksum }}
           </td>
-          <td>{{ mailDetail.requestTimestamp | date : dateTimeFormat }}</td>
-          <td>{{ mailDetail.sentTimestamp | date : dateTimeFormat }}</td>
+          <td>{{ mail.requestTimestamp | date : dateTimeFormat }}</td>
+          <td>{{ mail.sentTimestamp | date : dateTimeFormat }}</td>
         </tr>
       </tbody>
     </table>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index d05e30434..5395013d5 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { MailService } from 'projects/admin/src/event/mail.service';
 import { Observable, map, mergeMap, of, retry, tap } from 'rxjs';
 import { EventService } from '../../shared/event.service';
-import { Mail } from '../../model/mail';
+import { MailLog } from '../../model/mail';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
   styleUrls: ['./email-log.component.scss'],
 })
 export class EmailLogComponent implements OnInit {
-  public mail$: Observable<Mail> = of();
+  public mailLog$: Observable<MailLog> = of();
 
   constructor(
     private readonly mailService: MailService,
@@ -29,12 +29,12 @@ export class EmailLogComponent implements OnInit {
     if (!this.route.parent) {
       return;
     }
-    this.mail$ = this.route.parent.paramMap.pipe(
+    this.mailLog$ = this.route.parent.paramMap.pipe(
       map((pm) => pm.get('eventId')),
       mergeMap((eventId) =>
         eventId != null ? this.eventService.getEvent(eventId) : of()
       ),
-      mergeMap((event) => this.mailService.getMailInfo(event.shortName, 0, ''))
+      mergeMap((event) => this.mailService.getAllMails(event.shortName, 0, ''))
     );
   }
 
diff --git a/frontend/projects/admin/src/app/model/mail.ts b/frontend/projects/admin/src/app/model/mail.ts
index d8a77ee13..0c78e3516 100644
--- a/frontend/projects/admin/src/app/model/mail.ts
+++ b/frontend/projects/admin/src/app/model/mail.ts
@@ -1,9 +1,9 @@
-export interface Mail {
-  left: MailInfo[];
+export interface MailLog {
+  left: Mail[];
   right: number;
 }
 
-export interface MailInfo {
+export interface Mail {
   message: string;
   id: number;
   subscriptionDescriptorId: number;
diff --git a/frontend/projects/admin/src/event/mail.service.ts b/frontend/projects/admin/src/event/mail.service.ts
index d786cf833..ac8942342 100644
--- a/frontend/projects/admin/src/event/mail.service.ts
+++ b/frontend/projects/admin/src/event/mail.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Mail } from '../app/model/mail';
+import { Mail, MailLog } from '../app/model/mail';
 import { Observable } from 'rxjs';
 import { HttpParams } from '@angular/common/http';
 
@@ -10,18 +10,24 @@ import { HttpParams } from '@angular/common/http';
 export class MailService {
   constructor(private httpClient: HttpClient) {}
 
-  getMailInfo(
+  getAllMails(
     eventShortName: string,
     page: number,
     search: string
-  ): Observable<Mail> {
+  ): Observable<MailLog> {
     const params = {
       params: new HttpParams().set('page', page).set('search', search),
     };
 
-    return this.httpClient.get<Mail>(
+    return this.httpClient.get<MailLog>(
       `admin/api/event/${eventShortName}/email/`,
       params
     );
   }
+
+  getMail(eventShortName: string, emailId: number): Observable<Mail> {
+    return this.httpClient.get<Mail>(
+      `admin/api/event/${eventShortName}/email/${emailId}`
+    );
+  }
 }

From c3ea1a9d8bebfb90cf5ed1bd1fece0c187e679c7 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:05:26 +0200
Subject: [PATCH 08/15] load mail

---
 .../admin/src/app/app-routing.module.ts       |  5 ++-
 .../email-detail/email-detail.component.html  |  2 +-
 .../email-detail/email-detail.component.ts    | 31 ++++++++++++++-----
 .../event/email-log/email-log.component.ts    |  5 +--
 .../admin/src/app/event/event.module.ts       |  1 +
 .../projects/admin/src/event/mail.service.ts  |  2 +-
 6 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/projects/admin/src/app/app-routing.module.ts b/frontend/projects/admin/src/app/app-routing.module.ts
index b29394ba7..e048810de 100644
--- a/frontend/projects/admin/src/app/app-routing.module.ts
+++ b/frontend/projects/admin/src/app/app-routing.module.ts
@@ -78,7 +78,10 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+    RouterModule.forRoot(routes, {
+      preloadingStrategy: PreloadAllModules,
+      paramsInheritanceStrategy: 'always',
+    }),
   ],
   exports: [RouterModule],
 })
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
index 3c9408984..c99de8036 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
@@ -1,5 +1,5 @@
 <div class="container my-3">
   <h1>Message detail</h1>
   <hr />
+  <pre>{{ mail$ | async | json }}</pre>
 </div>
-<pre>{{ mail$ | async | json }}</pre>
diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
index cf4aea6df..9d8b13770 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts
@@ -4,6 +4,7 @@ import { MailService } from 'projects/admin/src/event/mail.service';
 import { EventService } from '../../shared/event.service';
 import { Observable, map, mergeMap, of } from 'rxjs';
 import { Mail } from '../../model/mail';
+import { EventInfo } from '../../model/event';
 
 @Component({
   selector: 'app-email-detail',
@@ -20,15 +21,31 @@ export class EmailDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.loadMails();
+    this.loadMail();
   }
-  loadMails() {
+  loadMail() {
     this.mail$ = this.route.paramMap.pipe(
-      map((pm) => pm.get('eventId')),
-      mergeMap((eventId) =>
-        eventId != null ? this.eventService.getEvent(eventId) : of()
-      ),
-      mergeMap((event) => this.mailService.getMailInfo(event.shortName, 0, ''))
+      mergeMap((pm) => {
+        const eventId = pm.get('eventId');
+        const mailId = pm.get('emailId');
+        if (eventId != null && mailId != null) {
+          return this.eventService
+            .getEvent(eventId)
+            .pipe(
+              map((event) => new ShortNameAndMailId(event.shortName, mailId))
+            );
+        }
+        return of();
+      }),
+      mergeMap((shortNameAndMailId) =>
+        this.mailService.getMail(
+          shortNameAndMailId.shortName,
+          shortNameAndMailId.mailId
+        )
+      )
     );
   }
 }
+class ShortNameAndMailId {
+  constructor(public shortName: string, public mailId: string) {}
+}
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 5395013d5..dec392de3 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -26,10 +26,7 @@ export class EmailLogComponent implements OnInit {
   }
 
   loadMails() {
-    if (!this.route.parent) {
-      return;
-    }
-    this.mailLog$ = this.route.parent.paramMap.pipe(
+    this.mailLog$ = this.route.paramMap.pipe(
       map((pm) => pm.get('eventId')),
       mergeMap((eventId) =>
         eventId != null ? this.eventService.getEvent(eventId) : of()
diff --git a/frontend/projects/admin/src/app/event/event.module.ts b/frontend/projects/admin/src/app/event/event.module.ts
index 635c2545a..176cd2d55 100644
--- a/frontend/projects/admin/src/app/event/event.module.ts
+++ b/frontend/projects/admin/src/app/event/event.module.ts
@@ -56,6 +56,7 @@ import { EventDetailComponent } from './event-detail/event-detail.component';
         children: [
           { path: '', component: EventDetailComponent },
           { path: 'email-log', component: EmailLogComponent },
+          { path: 'email-log/:emailId', component: EmailDetailComponent },
         ],
       },
     ]),
diff --git a/frontend/projects/admin/src/event/mail.service.ts b/frontend/projects/admin/src/event/mail.service.ts
index ac8942342..eb2a90674 100644
--- a/frontend/projects/admin/src/event/mail.service.ts
+++ b/frontend/projects/admin/src/event/mail.service.ts
@@ -25,7 +25,7 @@ export class MailService {
     );
   }
 
-  getMail(eventShortName: string, emailId: number): Observable<Mail> {
+  getMail(eventShortName: string, emailId: string): Observable<Mail> {
     return this.httpClient.get<Mail>(
       `admin/api/event/${eventShortName}/email/${emailId}`
     );

From 746fd85189c0faf858510e7b253c848a137b2c8f Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:25:59 +0200
Subject: [PATCH 09/15] Added message detail

---
 .../email-detail/email-detail.component.html  | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
index c99de8036..b22a55f3b 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
@@ -1,5 +1,32 @@
 <div class="container my-3">
   <h1>Message detail</h1>
   <hr />
-  <pre>{{ mail$ | async | json }}</pre>
+  <div *ngIf="mail$ | async as mail">
+    <dl data-ng-if="mail">
+      <dt>Recipient</dt>
+      <dd>{{ mail.recipient }}</dd>
+      <dt>Subject</dt>
+      <dd>{{ mail.subject }}</dd>
+      <dt>Message</dt>
+      <dd>
+        <pre class="white">{{ mail.message }}</pre>
+      </dd>
+      <dt>Status</dt>
+      <dd>{{ mail.status }}</dd>
+      <dt>Checksum</dt>
+      <dd class="hidden-sm hidden-xs">{{ mail.checksum }}</dd>
+      <dd class="visible-sm visible-xs">
+        {{ mail.checksum | slice : 0 : 35 }}
+      </dd>
+      <dt>Requested</dt>
+      <dd>{{ mail.requestTimestamp }}</dd>
+      <dt>Sent</dt>
+      <dd>{{ mail.sentTimestamp }}</dd>
+    </dl>
+    <div class="text-center">
+      <a class="btn btn-outline-primary" href="#" [routerLink]="['../']"
+        >back to list</a
+      >
+    </div>
+  </div>
 </div>

From 352395c1a27ac3a882b12cc44dc9fc60aebb8887 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:55:19 +0200
Subject: [PATCH 10/15] pagination

---
 .../src/app/event/email-log/email-log.component.html | 12 +++++++++++-
 .../src/app/event/email-log/email-log.component.ts   |  2 ++
 .../projects/admin/src/app/event/event.module.ts     |  2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 8a0616027..387052df4 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -33,7 +33,12 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let mail of mailLog.left">
+        <tr
+          *ngFor="
+            let mail of mailLog.left
+              | slice : (page - 1) * pageSize : page * pageSize
+          "
+        >
           <th scope="row">{{ mail.recipient }}</th>
           <td class="text-overflow">{{ mail.subject }}</td>
           <td>
@@ -48,5 +53,10 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
         </tr>
       </tbody>
     </table>
+    <ngb-pagination
+      [(page)]="page"
+      [pageSize]="pageSize"
+      [collectionSize]="mailLog.left.length"
+    ></ngb-pagination>
   </div>
 </div>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index dec392de3..9c975c715 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -13,6 +13,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class EmailLogComponent implements OnInit {
   public mailLog$: Observable<MailLog> = of();
+  public page: number = 1;
+  public pageSize: number = 10;
 
   constructor(
     private readonly mailService: MailService,
diff --git a/frontend/projects/admin/src/app/event/event.module.ts b/frontend/projects/admin/src/app/event/event.module.ts
index 176cd2d55..641c66ba3 100644
--- a/frontend/projects/admin/src/app/event/event.module.ts
+++ b/frontend/projects/admin/src/app/event/event.module.ts
@@ -5,6 +5,7 @@ import {
   NgbCarouselModule,
   NgbDropdownModule,
   NgbNavModule,
+  NgbPaginationModule,
   NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { provideSvgIconsConfig, SvgIconComponent } from '@ngneat/svg-icon';
@@ -48,6 +49,7 @@ import { EventDetailComponent } from './event-detail/event-detail.component';
     NgbNavModule,
     FormsModule,
     NgbDropdownModule,
+    NgbPaginationModule,
 
     RouterModule.forChild([
       {

From 5ee6fa5250c30201822160bdb3689d70666cd0f0 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Sun, 25 Jun 2023 16:46:47 +0200
Subject: [PATCH 11/15] search

---
 .../event/email-log/email-log.component.html  | 21 ++++++++++++-------
 .../event/email-log/email-log.component.ts    |  9 +++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index 387052df4..eae813d03 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -8,17 +8,22 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
   </div>
 
   <div class="input-group">
-    <div class="input-group-text">
+    <button class="btn btn-outline-secondary" type="button" (click)="search()">
       <svg-icon key="search"></svg-icon>
-    </div>
+    </button>
+
     <input
       type="text"
       class="form-control"
       placeholder="Filter table"
       aria-label="Filter table"
       aria-describedby="Filter table"
+      [(ngModel)]="searchText"
+      autofocus
+      (keydown.enter)="search()"
     />
   </div>
+
   <div class="my-4">
     <table class="table table-striped">
       <thead>
@@ -53,10 +58,12 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
         </tr>
       </tbody>
     </table>
-    <ngb-pagination
-      [(page)]="page"
-      [pageSize]="pageSize"
-      [collectionSize]="mailLog.left.length"
-    ></ngb-pagination>
+    <div class="d-flex justify-content-center">
+      <ngb-pagination
+        [(page)]="page"
+        [pageSize]="pageSize"
+        [collectionSize]="mailLog.left.length"
+      ></ngb-pagination>
+    </div>
   </div>
 </div>
diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
index 9c975c715..079b18337 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.ts
@@ -12,6 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
   styleUrls: ['./email-log.component.scss'],
 })
 export class EmailLogComponent implements OnInit {
+  public searchText = '';
   public mailLog$: Observable<MailLog> = of();
   public page: number = 1;
   public pageSize: number = 10;
@@ -33,11 +34,17 @@ export class EmailLogComponent implements OnInit {
       mergeMap((eventId) =>
         eventId != null ? this.eventService.getEvent(eventId) : of()
       ),
-      mergeMap((event) => this.mailService.getAllMails(event.shortName, 0, ''))
+      mergeMap((event) =>
+        this.mailService.getAllMails(event.shortName, 0, this.searchText)
+      )
     );
   }
 
   get dateTimeFormat(): string {
     return this.translateService.instant('admin.common.date-time');
   }
+
+  search() {
+    this.loadMails();
+  }
 }

From 03cb06348ffc7d41b4c00ad46ce92bdab4f89232 Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Sun, 25 Jun 2023 17:08:37 +0200
Subject: [PATCH 12/15] translate

---
 .../email-detail/email-detail.component.html  | 25 +++++++++++--------
 .../resources/alfio/i18n/public.properties    |  9 +++++++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
index b22a55f3b..cd240123f 100644
--- a/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
+++ b/frontend/projects/admin/src/app/event/email-detail/email-detail.component.html
@@ -1,32 +1,35 @@
 <div class="container my-3">
-  <h1>Message detail</h1>
+  <h1 translate="admin.event.mail-detail.title"></h1>
   <hr />
   <div *ngIf="mail$ | async as mail">
     <dl data-ng-if="mail">
-      <dt>Recipient</dt>
+      <dt translate="admin.event.mail-detail.recipient"></dt>
       <dd>{{ mail.recipient }}</dd>
-      <dt>Subject</dt>
+      <dt translate="admin.event.mail-detail.subject"></dt>
       <dd>{{ mail.subject }}</dd>
-      <dt>Message</dt>
+      <dt translate="admin.event.mail-detail.message"></dt>
       <dd>
         <pre class="white">{{ mail.message }}</pre>
       </dd>
-      <dt>Status</dt>
+      <dt translate="admin.event.mail-detail.status"></dt>
       <dd>{{ mail.status }}</dd>
-      <dt>Checksum</dt>
+      <dt translate="admin.event.mail-detail.checksum"></dt>
       <dd class="hidden-sm hidden-xs">{{ mail.checksum }}</dd>
       <dd class="visible-sm visible-xs">
         {{ mail.checksum | slice : 0 : 35 }}
       </dd>
-      <dt>Requested</dt>
+      <dt translate="admin.event.mail-detail.requested"></dt>
       <dd>{{ mail.requestTimestamp }}</dd>
-      <dt>Sent</dt>
+      <dt translate="admin.event.mail-detail.sent"></dt>
       <dd>{{ mail.sentTimestamp }}</dd>
     </dl>
     <div class="text-center">
-      <a class="btn btn-outline-primary" href="#" [routerLink]="['../']"
-        >back to list</a
-      >
+      <a
+        class="btn btn-outline-primary"
+        href="#"
+        [routerLink]="['../']"
+        translate="admin.event.mail-detail.back-to-list"
+      ></a>
     </div>
   </div>
 </div>
diff --git a/src/main/resources/alfio/i18n/public.properties b/src/main/resources/alfio/i18n/public.properties
index 39556458e..73915b0b8 100644
--- a/src/main/resources/alfio/i18n/public.properties
+++ b/src/main/resources/alfio/i18n/public.properties
@@ -741,3 +741,12 @@ admin.event.mail-log.list.checksum=Checksum
 admin.event.mail-log.list.requested=Requested 
 admin.event.mail-log.list.sent=Sent
 
+admin.event.mail-detail.title=Message detail
+admin.event.mail-detail.recipient=Recipient
+admin.event.mail-detail.subject=Subject
+admin.event.mail-detail.message=Message
+admin.event.mail-detail.status=Status
+admin.event.mail-detail.checksum=Checksum
+admin.event.mail-detail.requested=Requested
+admin.event.mail-detail.sent=Sent
+admin.event.mail-detail.back-to-list=Back to list

From ec92fc67caeb2e3e1fb2251a3c2611e166a935fa Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:12:27 +0200
Subject: [PATCH 13/15] fixed import

---
 .../admin/src/app/event/event-detail/event-detail.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts
index 8f2427278..3dc3139c0 100644
--- a/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts
+++ b/frontend/projects/admin/src/app/event/event-detail/event-detail.component.ts
@@ -13,12 +13,11 @@ import { formatDate } from '@angular/common';
 import { ConfigurationService } from '../../shared/configuration.service';
 import { InstanceSetting } from '../../model/instance-settings';
 import {
-  TicketAccessType,
   TicketCategory,
   TicketCategoryFilter,
   TicketTokenStatus,
   UiTicketCategory,
-} from 'projects/public/src/app/model/ticket-category';
+} from '../../model/ticket-category';
 
 @Component({
   selector: 'app-event-detail',

From 8e5d64669f2dc1d6fccf68abb137e76affa0663f Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Mon, 26 Jun 2023 11:02:22 +0200
Subject: [PATCH 14/15] fixed button

---
 .../src/app/event/email-log/email-log.component.html   | 10 ++++++----
 src/main/resources/alfio/i18n/public.properties        |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/projects/admin/src/app/event/email-log/email-log.component.html b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
index eae813d03..dbccb2cbb 100644
--- a/frontend/projects/admin/src/app/event/email-log/email-log.component.html
+++ b/frontend/projects/admin/src/app/event/email-log/email-log.component.html
@@ -8,10 +8,6 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
   </div>
 
   <div class="input-group">
-    <button class="btn btn-outline-secondary" type="button" (click)="search()">
-      <svg-icon key="search"></svg-icon>
-    </button>
-
     <input
       type="text"
       class="form-control"
@@ -22,6 +18,12 @@ <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
       autofocus
       (keydown.enter)="search()"
     />
+    <button
+      class="btn btn-outline-secondary"
+      type="button"
+      (click)="search()"
+      translate="admin.common.search"
+    ></button>
   </div>
 
   <div class="my-4">
diff --git a/src/main/resources/alfio/i18n/public.properties b/src/main/resources/alfio/i18n/public.properties
index 73915b0b8..09c64a03a 100644
--- a/src/main/resources/alfio/i18n/public.properties
+++ b/src/main/resources/alfio/i18n/public.properties
@@ -613,6 +613,7 @@ admin.common.username=Username
 admin.common.save=Save
 admin.common.cancel=Cancel
 admin.common.delete=Delete
+admin.common.search=Search
 admin.common.description=Description
 admin.menu.events=Events
 admin.menu.subscriptions=Subscriptions

From 3db0c610f52dbb40d8530126da5b467506858e3e Mon Sep 17 00:00:00 2001
From: Lorena Mondini <60662357+Lorslux@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:13:13 +0200
Subject: [PATCH 15/15] fixed file

---
 frontend/projects/public/src/app/shared/user.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/projects/public/src/app/shared/user.service.ts b/frontend/projects/public/src/app/shared/user.service.ts
index 77bbc720f..9abfb9cb2 100644
--- a/frontend/projects/public/src/app/shared/user.service.ts
+++ b/frontend/projects/public/src/app/shared/user.service.ts
@@ -60,7 +60,7 @@ export class UserService implements OnDestroy {
           if (response.status === 204) {
             return ANONYMOUS;
           } else {
-            return response.body;
+            return response.body as User;
           }
         })
       );