Admin UI v2

[cbellone]

Description

as per our roadmap, we want to rewrite from scratch the admin UI during 2.0-M5. This will remove a lot of technical debt and will let us use the same frameworks we used in the public frontend:

• Angular 14
• Bootstrap v5
• NgBootstrap latest

Additional (long-term) goals of the rewrite will be:

• [ ] i18n on the admin
• [ ] PWA
• [ ] Mobile-ready design for the most commonly used functionality
• [ ] Optimize and simplify UX for most used functionality, especially configuration :1st_place_medal:
• [ ] Add global search box for finding configurations, events, tickets, categories, subscriptions, reservations, atttendees...
• [ ] Introduce an editor + preview for HTML emails, if enabled
• [ ] Styling customization - a more modern look and feel
• [ ] Redo/review the statistics part, it's currently not that useable (we may need some kind of cross event compare & co, global statistics for allowing better forecasting).

Steps

we decided to span this task over multiple releases, to release more often and collect feedback from users. The plan would be to:

1. Port 1:1(ish) the current admin
2. UX for settings, check-in, event management
3. Editor for HTML emails
4. Styling customization
5. Misc improvements

This issue is meant to keep track of the progress

[syjer]

for icons it would be nice to use: https://fonts.google.com/icons?icon.style=Outlined

for css, maybe we can wire up the exported css from https://m3.material.io/theme-builder#/custom to the one in bootstrap 5 (?).

Will need to add https://github.com/ngneat/svg-icon for handling svg icons, edit: done :heavy_check_mark:

[syjer]

Admin structure, by default it will auto select the first organization, so all the functionality for the user are related directly to the active one.

Access to ADMIN ROLE related conf should be in a separate "view" linked from the user info selector.

Menu structure:

• Home: display events / subscription with filter + creation
• My organization: display current organization
• Access Control
  • Users
  • Api keys
• Groups

• Configuration

• Admin -> visible only by ADMIN
  • Organizations
  • Access control
  • Users
  • Api keys
  • Extensions
  • System configuration