rename folders

2024-10-06 18:27:40 +02:00
parent 59fcb493b8
commit 8482770998
146 changed files with 0 additions and 3092 deletions
@@ -0,0 +1,8 @@
+RewriteEngine On
+
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+RewriteCond %{REQUEST_URI} !^/api/.*$
+RewriteRule ^ - [L]
+
+RewriteRule ^ /index.html [L]
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AnonymousGuard, AuthAdminGuard, AuthenticatedGuard } from './auth/auth.guard';
+import { PageLogin } from './pages/login/login.page';
+import { PageNotFound } from './pages/notfound/notfound.page';
+import { PageProfile } from './pages/profile/profile.page';
+
+import { PageManagement } from './pages/management/management.page';
+import { PagePassword } from './pages/password/password.page';
+import { PageTurnover } from './pages/turnover/turnover.page';
+import { PageTurnoversManage } from './pages/turnovers/manage/manage.page';
+import { PageTurnovers } from './pages/turnovers/turnovers.page';
+import { PageUnavailable } from './pages/unavailable/unavailable.page';
+import { PageUserCreate } from './pages/users/create/users.create.page';
+import { PageUsers } from './pages/users/users.page';
+import { UiMain } from './ui/main/main.ui';
+
+
+const routes: Routes = [
+  { path: 'login', component: PageLogin, canActivate: [AnonymousGuard] },
+  {
+    path: '', component: UiMain, children: [
+      { path: '', component: PageTurnovers, canActivate: [AuthenticatedGuard] },
+      { path: 'password', component: PagePassword, canActivate: [AuthenticatedGuard] },
+      { path: 'profile', component: PageProfile, canActivate: [AuthenticatedGuard] },
+      { path: 'create', component: PageTurnover, canActivate: [AuthenticatedGuard] },
+      { path: 't/:id', component: PageTurnover, canActivate: [AuthenticatedGuard] },
+      { path: 't', component: PageTurnoversManage, canActivate: [AuthAdminGuard] },
+      { path: 'm', component: PageManagement, canActivate: [AuthAdminGuard] },
+      { path: 'u', component: PageUsers, canActivate: [AuthAdminGuard] },
+      { path: 'user', component: PageUserCreate, canActivate: [AuthAdminGuard] },
+      { path: 'u/:username', component: PageProfile, canActivate: [AuthAdminGuard] },
+      { path: 'unavailable', component: PageUnavailable },
+      { path: '**', component: PageNotFound, pathMatch: 'full', canActivate: [AuthenticatedGuard] }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { I18nService } from './services/i18n.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+
+export class AppComponent {
+
+  constructor(private i18n: I18nService) {
+  }
+
+  ngOnInit() {
+    window.document.title = this.i18n.get('buntspecht', []);
+
+    if (localStorage.getItem("buntspecht.darkTheme") == "true") {
+      window.document.body.classList.add("dark-theme");
+    }
+  }
+
+}
@@ -0,0 +1,121 @@
+
+import { DatePipe } from '@angular/common';
+import { HTTP_INTERCEPTORS, HttpHandler, HttpInterceptor, HttpRequest, provideHttpClient } from '@angular/common/http';
+import { APP_INITIALIZER, Injectable, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as moment from 'moment';
+import { AppRoutingModule } from './app-routing.module';
+import { MaterialModule } from './material/material.module';
+
+import { AutofocusDirective } from './material/autofocus';
+
+import { AppComponent } from './app.component';
+import { PageLogin } from './pages/login/login.page';
+import { PageNotFound } from './pages/notfound/notfound.page';
+import { PageProfile } from './pages/profile/profile.page';
+import { PageUnavailable } from './pages/unavailable/unavailable.page';
+import { UiMain } from './ui/main/main.ui';
+import { I18nEmptyPipe, I18nPipe } from './utils/i18n.pipe';
+import { MomentPipe } from './utils/moment.pipe';
+
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+import { PageManagement } from './pages/management/management.page';
+import { PagePassword } from './pages/password/password.page';
+import { PageTurnover } from './pages/turnover/turnover.page';
+import { PageTurnoversManage } from './pages/turnovers/manage/manage.page';
+import { PageTurnovers } from './pages/turnovers/turnovers.page';
+import { PageUserCreate } from './pages/users/create/users.create.page';
+import { PageUsers } from './pages/users/users.page';
+import { I18nPaginatorIntl, I18nService } from './services/i18n.service';
+import { ConfirmDialog } from './ui/confirm/confirm.component';
+import { UiTurnovers } from './ui/turnovers/turnovers.ui';
+
+
+export function fetchI18n(i18n: I18nService) {
+  return () => i18n.fetch();
+}
+
+
+export function setMaterialDate(i18n: I18nService) {
+  let locale = i18n.getLocale();
+
+  if (locale == 'de-informal') {
+    locale = 'de';
+  }
+
+  moment.locale(locale);
+  return locale;
+}
+
+@Injectable()
+export class XhrInterceptor implements HttpInterceptor {
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const xhr = req.clone({
+      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest').set('Content-Type', 'application/json;charset=UTF-8'), withCredentials: true
+    });
+    return next.handle(xhr);
+  }
+}
+
+@NgModule({
+  declarations: [
+    AutofocusDirective,
+    I18nPipe,
+    I18nEmptyPipe,
+    MomentPipe,
+    AppComponent,
+    PageTurnovers,
+    PageTurnoversManage,
+    PageTurnover,
+    PageLogin,
+    PageManagement,
+    PageNotFound,
+    PagePassword,
+    PageProfile,
+    PageUnavailable,
+    PageUsers,
+    PageUserCreate,
+    UiMain,
+    UiTurnovers,
+    ConfirmDialog
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerWhenStable:30000' }),
+  ],
+  exports: [MaterialModule],
+  providers: [
+    provideHttpClient(),
+    { provide: APP_INITIALIZER, useFactory: fetchI18n, deps: [I18nService], multi: true },
+    { provide: MAT_DATE_LOCALE, useFactory: setMaterialDate, deps: [I18nService], multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true },
+    DatePipe,
+    {
+      provide: MatPaginatorIntl, useFactory: (i18n: I18nService) => {
+        const service = new I18nPaginatorIntl();
+        service.injectI18n(i18n)
+        return service;
+      }, deps: [I18nService]
+    },
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        subscriptSizing: 'dynamic'
+      }
+    }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+}
@@ -0,0 +1,133 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+import { RequestError } from '../services/requesterror';
+import { UserService } from '../services/user.service';
+import { I18nService } from '../services/i18n.service';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthUpdateGuard implements CanActivate {
+    constructor(private authService: AuthService) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        this.authService.getAuth().catch(function (error) { });
+        return true;
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        const that = this;
+        return this.authService.getAuth().then(response => {
+            return true;
+        }).catch(function (error) {
+            if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
+                return true;
+            }
+
+            return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
+        });
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthenticatedGuard implements CanActivate {
+    constructor(private authService: AuthService, private userService: UserService, private i18nService: I18nService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        const that = this;
+        return this.authService.getAuth().then((data: any) => {
+            this.userService.get().subscribe({
+                next: (user: any) => {
+                    let updateLocale = false;
+                    let updateTheme = false;
+                    let darktheme = 'false';
+
+                    if (user.darkTheme) {
+                        darktheme = 'true';
+                    }
+
+                    if (darktheme != localStorage.getItem("buntspecht.darkTheme")) {
+                        localStorage.setItem("buntspecht.darkTheme", darktheme);
+                        updateTheme = true;
+                    }
+
+                    if (this.i18nService.locales.indexOf(user.locale) != -1 && localStorage.getItem("buntspecht.locale") != user.locale) {
+                        if (this.i18nService.locale != user.locale) {
+                            localStorage.setItem("buntspecht.locale", user.locale);
+                            updateLocale = true;
+                        }
+                    }
+                    if (updateLocale || updateTheme) {
+                        window.location.reload();
+                    }
+                }
+            });
+
+            return true;
+        }).catch(function (error) {
+            if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
+                return that.router.navigateByUrl(that.router.parseUrl('/login?target=' + encodeURIComponent(state.url)));
+            }
+
+            return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
+        });
+    }
+}
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthAdminGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        const that = this;
+        return this.authService.getAuth().then(data => {
+            if (data.authorities && data.authorities.find((role) => role.authority == 'ROLE_ADMIN') != undefined) {
+                return true;
+            }
+            return that.router.navigateByUrl(that.router.parseUrl('/not-found'), { skipLocationChange: true });
+        }).catch(function (error) {
+            if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
+                return that.router.navigateByUrl(that.router.parseUrl('/login?target=' + encodeURIComponent(state.url)));
+            }
+
+            return that.router.navigateByUrl(that.router.parseUrl('/not-found'), { skipLocationChange: true });
+        });
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AnonymousGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        const that = this;
+        return this.authService.getAuth().then((data: any) => {
+            this.router.navigateByUrl('/');
+            return false;
+        }).catch(function (error) {
+            if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
+                return true;
+            }
+            return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { replaceUrl: true });
+        });
+    }
+
+}
@@ -0,0 +1,17 @@
+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[matAutofocus]',
+})
+export class AutofocusDirective implements OnInit {
+
+  constructor(private element: ElementRef) { }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.element.nativeElement.focus();
+      this.element.nativeElement.scrollIntoView();
+    })
+  }
+
+}
@@ -0,0 +1,126 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+// Material Form Controls
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+// Material Navigation
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+// Material Layout
+import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatListModule} from '@angular/material/list';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTreeModule} from '@angular/material/tree';
+// Material Buttons & Indicators
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatIconModule} from '@angular/material/icon';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatRippleModule} from '@angular/material/core';
+// Material Popups & Modals
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+// Material Data tables
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material/table';
+import {MatMomentDateModule} from '@angular/material-moment-adapter';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatMomentDateModule
+  ],
+  exports: [
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
+  ]
+})
+export class MaterialModule {}
@@ -0,0 +1,54 @@
+<div class="container">
+    <div class="flex column fill center middle">
+        <form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
+            <mat-card>
+                <mat-card-content>
+                    <img class="logo" src="assets/images/banner.png">
+                    <h2>{{'login.internal' | i18n}}</h2>
+                    <mat-error *ngIf="loginInvalid">
+                        {{'login.invalid' | i18n}}
+                    </mat-error>
+                    <mat-form-field>
+                        <mat-label>{{'login.username' | i18n}}</mat-label>
+                        <input id="username" name="username" matInput required matAutofocus [value]="username">
+                        <mat-error>
+                            {{'login.username.missing' | i18n}}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-label>{{'login.password' | i18n}}</mat-label>
+                        <input id="password" name="password" matInput type="password" required>
+                        <mat-error>
+                            {{'login.password.invalid.hint' | i18n}}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-slide-toggle (change)="rememberMe.value = '' + $event.checked">
+                        {{'login.keepSession' | i18n}}
+                    </mat-slide-toggle>
+                    <input #rememberMe id="remember-me" name="remember-me" type="hidden">
+                </mat-card-content>
+                <mat-card-actions>
+                    <button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
+                        [disabled]="loginForm.invalid"><mat-icon>open_in_new</mat-icon>{{'login' | i18n}}</button>
+                </mat-card-actions>
+            </mat-card>
+        </form>
+
+        <mat-card *ngIf="externals && externals.length > 0" class="box">
+            <mat-card-content>
+                <h2>{{'login.external' | i18n}}</h2>
+                <mat-error *ngIf="externalLoginInvalid">
+                    {{'login.external.invalid' | i18n}}
+                </mat-error>
+            </mat-card-content>
+            <mat-card-actions class="flex wrap">
+                <a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals"
+                    mat-raised-button color="accent">{{'login.external.client' | i18n:('login.provider.' + client.id |
+                    i18n)}}</a>
+                <mat-slide-toggle [(ngModel)]="autologin">
+                    {{'login.autologin' | i18n}}
+                </mat-slide-toggle>
+            </mat-card-actions>
+        </mat-card>
+    </div>
+</div>
@@ -0,0 +1,33 @@
+img.logo {
+  width: 300px;
+  height: auto;
+}
+
+mat-form-field,
+mat-slide-toggle {
+  display: block;
+  margin: 20px 0;
+}
+
+a.external-login {
+  margin: 20px 0;
+  flex-basis: 100%;
+  flex-shrink: 0;
+}
+
+.box {
+  margin: 5px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
@@ -0,0 +1,81 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { environment } from '../../../environments/environment';
+
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'page-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss']
+})
+export class PageLogin implements OnInit {
+
+  @ViewChild('loginForm') loginForm: ElementRef;
+  autologin: boolean = false;
+  loginInvalid: boolean;
+  externalLoginInvalid: boolean;
+  apiUrl = environment.apiUrl;
+  targetRoute: string;
+  externals: any[];
+  username: string = '';
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute) { }
+
+  async ngOnInit() {
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        if (params['target']) {
+          this.targetRoute = params['target'];
+          this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        if (params['error'] || params['error'] == '') {
+          this.loginInvalid = true;
+          this.router.navigate([], { queryParams: { error: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        if (params['username']) {
+          this.username = params['username'];
+          this.router.navigate([], { queryParams: { username: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        if (params['externalError'] || params['externalError'] == '') {
+          this.externalLoginInvalid = true;
+          this.router.navigate([], { queryParams: { externalError: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+      }
+    });
+
+    this.authService.getExternal().subscribe({
+      next: (data: any[]) => {
+        this.externals = data;
+        const autologinClient = localStorage.getItem("buntspecht.autologin");
+        for (let client of this.externals) {
+          if (client.id == autologinClient) {
+            window.location.href = this.apiUrl + "/" + client.loginUrl;
+          }
+        }
+      }
+    })
+
+  }
+
+  ngAfterViewInit(): void {
+    if (this.targetRoute) {
+      this.loginForm.nativeElement.action = this.loginForm.nativeElement.action + "?forward=" + window.location.origin + encodeURIComponent(this.targetRoute);
+    }
+  }
+
+  externalLogin(client: any): void {
+    if (this.autologin) {
+      localStorage.setItem("buntspecht.autologin", client.id);
+    } else {
+      localStorage.removeItem("buntspecht.autologin");
+    }
+
+    window.location.href = this.apiUrl + "/" + client.loginUrl;
+  }
+
+}
@@ -0,0 +1,158 @@
+<div class="flex column fill">
+    @if (entries && entries.error) {
+    <div class="flex column fill">
+        <mat-card class="accent box">
+            <mat-card-header>
+                <mat-card-title>{{ 'management.error.' + entries.error.status | i18n}}</mat-card-title>
+                <mat-card-subtitle>{{'management.error' | i18n}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <p>
+                    {{ 'management.error.' + entries.error.status + '.text' | i18n}}
+                </p>
+            </mat-card-content>
+        </mat-card>
+    </div>
+    }
+
+    <div class="flex wrap filter-container">
+        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
+            [color]="filterOpen ? 'primary': 'accent'">
+            <mat-icon>filter_alt</mat-icon>
+        </a>
+
+        @if (filterOpen) {
+        <form class="flex wrap filter">
+            <mat-form-field class="margin">
+                <mat-label>{{'management.filter.dueDate' | i18n}}</mat-label>
+                <mat-date-range-input [rangePicker]="picker">
+                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
+                        [value]="entries && entries.filter && entries.filter.from"
+                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
+                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.to' | i18n}}"
+                        [value]="entries && entries.filter && entries.filter.to"
+                        (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
+                </mat-date-range-input>
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-date-range-picker #picker></mat-date-range-picker>
+            </mat-form-field>
+
+
+            <mat-form-field class="margin">
+                <mat-label>{{'management.filter.username' | i18n}}</mat-label>
+                <input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
+                    (change)="setInputFilter('username', $event.target)">
+                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
+                    @for (user of users | async; track user.username) {
+                    <mat-option [value]="user.username">{{user.username}}</mat-option>
+                    }
+                </mat-autocomplete>
+            </mat-form-field>
+        </form>
+        }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!entries.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
+    </div>
+
+    @if (entries && entries.total == 0) {
+    <mat-list>
+        <mat-list-item>
+            <p>{{'paginator.empty' | i18n}}</p>
+        </mat-list-item>
+    </mat-list>
+    }
+
+    @if (entries && entries.total) {
+    <div class="scroll-container">
+        <table class="default-table" mat-table [dataSource]="entries.results || []" multiTemplateDataRows matSort
+            (matSortChange)="applySort($event)" [matSortDisableClear]="true">
+            <ng-container matColumnDef="username">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">
+                    {{'user.username' | i18n}}
+                </th>
+                <td mat-cell *matCellDef="let entry">
+                    <div class="flex middle">
+                        <a class="select-user"
+                            [ngClass]="{'selected': entries.filter && entries.filter.username == entry[0]}"
+                            (click)="selectUser(entry[0])">{{entry[0]}}</a>
+                    </div>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="price">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <span class="spacer"></span>
+                    <span>{{'turnover.price' | i18n}}</span>
+                </th>
+                <td mat-cell *matCellDef="let entry">
+                    <div class="flex">
+                        <span class="spacer"></span>
+                        <span>{{entry[1] | number: '1.2-2'}}</span>
+                        <span>&nbsp;{{'turnover.price.suffix' | i18n}}</span>
+                    </div>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="timeInvestment">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <span class="spacer"></span>
+                    <span>{{'turnover.timeInvestment' | i18n}}</span>
+                </th>
+                <td mat-cell *matCellDef="let entry">
+                    <div class="flex">
+                        <span class="spacer"></span>
+                        <span>{{entry[2] | number: '1.1-1'}}</span>
+                        <span> &nbsp;{{'turnover.timeInvestment.suffix' | i18n}}</span>
+                    </div>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="menu">
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let entry">
+                    @if (entries.filter && entries.filter.username == entry[0]) {
+                    <button mat-icon-button (click)="expanded = !expanded">
+                        @if (expanded) {
+                        <mat-icon>keyboard_arrow_up</mat-icon>
+                        } @else {
+                        <mat-icon>keyboard_arrow_down</mat-icon>
+                        }
+                    </button>
+                    }
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expanded">
+                <td mat-cell *matCellDef="let entry" [attr.colspan]="columns.length">
+                    @if (expanded && entries.total && entries.filter && entries.filter.username == entry[0]) {
+                    <ui-turnovers #uiTurnovers class="flex column fill" [turnovers]="turnovers" (page)="applyTurnoverPage($event)"
+                        [enableSort]="false"></ui-turnovers>
+                    }
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+            <tr class="entry" mat-row *matRowDef="let row; columns: columns;"></tr>
+
+            <tr class="expanded-row" [ngClass]="{'visible' : expanded}" mat-row
+                *matRowDef="let row; columns: expanded ? ['expanded'] : []"></tr>
+        </table>
+    </div>
+
+    @if (!entries.filter || !entries.filter.username) {
+    <span class="spacer"></span>
+    <div class="mat-mdc-paginator flex">
+        <span class="spacer"></span>
+        <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.offset / entries.limit"
+            [length]="entries.total" [pageSize]="entries.limit" (page)="applyPage($event)" showFirstLastButtons>
+        </mat-paginator>
+    </div>
+    }
+    }
+
+    @if (!entries || !entries.results && !entries.error) {
+    <mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
+    }
+</div>
@@ -0,0 +1,44 @@
+.filter-container {
+    padding-left: 15px;
+    justify-content: flex-start;
+    align-items: center;
+
+    .filter {
+        justify-content: flex-start;
+        align-items: center;
+
+        &>* {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            margin-left: 15px;
+        }
+    }
+}
+
+.expanded-row {
+    visibility: hidden;
+    height: 0;
+    transition: height 500ms ease-in-out;
+
+    &.visible {
+        visibility: visible;
+        height: auto;
+    }
+
+    td {
+        padding: 0;
+        vertical-align: top;
+    }
+}
+
+a.select-user {
+    cursor: pointer;
+
+    &.selected {
+        cursor: not-allowed;
+    }
+
+    &:hover {
+        opacity: 0.7;
+    }
+}
@@ -0,0 +1,226 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { debounceTime, Observable, switchMap } from 'rxjs';
+import { I18nService } from 'src/app/services/i18n.service';
+import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
+import { UserManagementService } from 'src/app/services/user.management.service';
+import { UiTurnovers } from 'src/app/ui/turnovers/turnovers.ui';
+
+@Component({
+  selector: 'ui-management',
+  templateUrl: './management.page.html',
+  styleUrls: ['./management.page.scss']
+})
+export class PageManagement implements OnInit {
+
+  @Input() entries: any;
+  pageSizeOptions: number[] = [1, 2, 3, 4, 5, 10, 15, 30, 50, 100];
+  sort: string = "username";
+  descending: boolean = false;
+  filterOpen: boolean = true;
+
+  columns: string[] = ['username', 'price', 'timeInvestment', 'menu'];
+  expanded: boolean = false;
+
+  users: Observable<any>;
+  usersFormControl = new FormControl();
+
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
+  turnovers: any;
+
+  constructor(
+    private turnoverManagementService: TurnoverManagementService,
+    private userManagementService: UserManagementService,
+    private i18n: I18nService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.entries = {};
+    this.turnovers = {};
+    this.users = this.usersFormControl
+      .valueChanges
+      .pipe(
+        debounceTime(300),
+        switchMap(value => this.userManagementService.pick(value))
+      );
+
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        this.entries = { filter: {} };
+        this.expanded = false;
+        if (params['l']) {
+          this.entries.limit = +params['l'];
+          if (this.entries.limit < 1) {
+            this.entries.limit = 1;
+          }
+        }
+        if (params['o']) {
+          this.entries.offset = +params['o'];
+          if (this.entries.offset < 0) {
+            this.entries.offset = 0;
+          }
+        }
+
+        if (params['s']) {
+          this.sort = params['s'];
+        }
+
+        if (params['a']) {
+          this.descending = false;
+        } else {
+          this.descending = true;
+        }
+
+        for (const param in params) {
+          if (param != 'l' && param != 'o' && param != 's' && param != 'a') {
+            this.entries.filter[param] = params[param];
+          }
+        }
+
+        this.refresh();
+      }
+    });
+  }
+
+  refresh() {
+    const filter = JSON.parse(JSON.stringify(this.entries.filter || {}));
+    this.turnoverManagementService.overview(this.entries.limit || 15, this.entries.offset || 0, this.sort, this.descending, filter).subscribe({
+      next: (data: any) => {
+        this.entries = data;
+        this.entries.filter = filter;
+        if (filter.username) {
+          this.applyUser(filter.username);
+        }
+      }, error: (error) => {
+        this.entries = { error: error };
+      }
+    })
+  }
+
+  update() {
+    const filter = JSON.parse(JSON.stringify(this.entries.filter || {}));
+
+    const params: Params = { l: null, o: null, s: null, a: null };
+
+    if ((this.entries.limit || 15) != 15) {
+      params['l'] = this.entries.limit;
+    }
+
+    if ((this.entries.offset || 0) != 0) {
+      params['o'] = this.entries.offset;
+    }
+
+    if (this.sort != 'username') {
+      params['s'] = this.sort;
+    }
+
+    if (!this.descending) {
+      params['a'] = true;
+    }
+
+    if (filter) {
+      for (const param in filter) {
+        params[param] = filter[param] || null;
+      }
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'replace'
+      });
+  }
+
+  applyPage(event: PageEvent) {
+    this.entries.limit = event.pageSize;
+    this.entries.offset = event.pageSize * event.pageIndex;
+    this.update();
+  }
+
+  applySort(event: Sort) {
+    this.sort = event.direction ? event.active : 'username';
+    this.descending = event.direction !== 'asc';
+    this.update();
+  }
+
+  setInputFilter(key: string, target: EventTarget) {
+    this.setFilter(key, (target as HTMLInputElement).value);
+  }
+
+  setFilter(key: string, value) {
+    if (value != this.entries.filter[key]) {
+      this.entries.filter[key] = value;
+      this.entries.offset = 0;
+      this.update();
+    }
+  }
+
+  selectUser(username: string) {
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: { username: this.entries.filter && this.entries.filter.username == username ? null : username },
+        queryParamsHandling: 'merge'
+      });
+  }
+
+  applyUser(username: string) {
+    this.usersFormControl.setValue(username);
+    if (this.entries.total) {
+      this.expanded = true;
+      const filter = JSON.parse(JSON.stringify(this.entries.filter || {}));
+      this.turnoverManagementService.fetch(this.turnovers.limit || 100, this.turnovers.offset || 0, 'dueDate', true, filter).subscribe({
+        next: (data: any) => {
+          this.turnovers = data;
+          this.turnovers.filter = filter;
+        }, error: (error) => {
+          this.turnovers = { error: error };
+        }
+      })
+    }
+  }
+
+  applyTurnoverPage(event: PageEvent) {
+    this.turnovers.limit = event.pageSize;
+    this.turnovers.offset = event.pageSize * event.pageIndex;
+    this.applyUser(this.usersFormControl.value);
+  }
+
+
+  export() {
+    if (this.entries.total) {
+      let rows = [[this.i18n.get('user.username'), this.i18n.get('turnover.price'), this.i18n.get('turnover.price.suffix')]];
+
+      this.entries.results.forEach(result => {
+        rows[rows.length] = [result[0], result[1], [result[2]]]
+      });
+
+      if (this.uiTurnovers) {
+        rows.push(...this.uiTurnovers.getCsvRows());
+      }
+
+      if (rows.length) {
+        let csvContent = "data:text/csv;charset=utf-8,"
+          + rows.map(e => e.join(";")).join("\n");
+
+        var encodedUri = encodeURI(csvContent);
+        var link = document.createElement("a");
+        link.setAttribute("href", encodedUri);
+        link.setAttribute("download", "export.csv");
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    }
+  }
+
+}
@@ -0,0 +1,15 @@
+<div class="container">
+    <div class="flex column fill center middle">
+        <mat-card class="accent box">
+            <mat-card-header>
+                <mat-card-title>404</mat-card-title>
+                <mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <p>
+                    {{'not-found.text' | i18n}}
+                </p>
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>
@@ -0,0 +1,17 @@
+.box {
+  margin: 5px;
+  min-width: 390px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-notfound',
+  templateUrl: './notfound.page.html',
+  styleUrls: [ './notfound.page.scss' ]
+})
+export class PageNotFound  {
+
+  constructor() { }
+
+}
@@ -0,0 +1,36 @@
+<div class="flex column fill middle">
+  <form [formGroup]="passwordForm" (ngSubmit)="setPassword()">
+    <mat-card>
+      <mat-card-content>
+        <mat-card-title>{{'password' | i18n}}</mat-card-title>
+        <mat-form-field>
+          <mat-label>{{'password.old' | i18n}}</mat-label>
+          <input matInput formControlName="old" type="password">
+          <mat-error *ngFor="let error of passwordForm.get('old').errors | keyvalue">
+            {{'password.error.' + error.key | i18n}}
+        </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'password.new' | i18n}}</mat-label>
+          <input matInput formControlName="password" type="password">
+          <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
+            {{'password.error.' + error.key | i18n}}
+        </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'password.repeat' | i18n}}</mat-label>
+          <input matInput formControlName="password2" type="password">
+          <mat-error *ngFor="let error of passwordForm.get('password2').errors | keyvalue">
+            {{'password.error.' + error.key | i18n}}
+        </mat-error>
+        </mat-form-field>
+      </mat-card-content>
+      <mat-card-actions>
+        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
+          {{'password.update' | i18n}}
+        </button>
+        <a *ngIf="passwordSuccess" mat-button color="primary">{{'password.success' | i18n}}</a>
+      </mat-card-actions>
+    </mat-card>
+  </form>
+</div>
@@ -0,0 +1,22 @@
+mat-form-field {
+  display: block;
+  margin: 20px 0 !important;
+}
+
+form {
+  margin: 5px;
+  min-width: 390px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
@@ -0,0 +1,69 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControlOptions, FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { UserService } from '../../services/user.service';
+import { MatchingValidator } from 'src/app/utils/matching.validator';
+
+@Component({
+  selector: 'page-password',
+  templateUrl: './password.page.html',
+  styleUrls: ['./password.page.scss']
+})
+export class PagePassword implements OnInit, OnDestroy {
+
+  auth: any;
+  working: boolean = false;
+  passwordSuccess: boolean = false;
+  passwordForm: FormGroup;
+
+  constructor(
+    private userService: UserService,
+    private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.passwordForm = this.formBuilder.group({
+      old: ['', Validators.nullValidator],
+      password: ['', Validators.nullValidator],
+      password2: ['', Validators.nullValidator]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    } as AbstractControlOptions);
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  passwordHasError(controlName: string): boolean {
+    return this.passwordForm.controls[controlName].errors != null;
+  }
+
+  setPassword() {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+    this.passwordSuccess = false;
+    this.userService.setPassword(this.passwordForm.get('old').value, this.passwordForm.get('password').value, this.passwordForm.get('password2').value).subscribe({
+      next: () => {
+        this.working = false;
+        this.passwordSuccess = true;
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 409) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }
+
+          for (let code in errors) {
+            this.passwordForm.get(code).setErrors(errors[code]);
+          }
+        }
+      }
+    })
+  }
+
+}
@@ -0,0 +1,79 @@
+<div class="flex column fill middle">
+  <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" *ngIf="user">
+    <mat-card>
+      <mat-card-content>
+        <mat-form-field>
+          <mat-label>{{'profile.username' | i18n}}</mat-label>
+          <input matInput formControlName="username" type="name">
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'profile.name' | i18n}}</mat-label>
+          <input matInput formControlName="name" type="name">
+          <mat-error *ngIf="profileHasError('name')">
+            {{'profile.name.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'profile.email' | i18n}}</mat-label>
+          <input matInput formControlName="email" type="email">
+          <mat-error *ngIf="profileHasError('email')">
+            {{'profile.email.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'profile.about' | i18n}}</mat-label>
+          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="about"></textarea>
+          <mat-error>
+            {{'profile.about.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        @if (admin) {
+        <mat-slide-toggle class="margin" [checked]="isAdmin" (change)="isAdmin=$event.checked">
+          {{'user.admin' | i18n}}
+        </mat-slide-toggle>
+        }
+      </mat-card-content>
+      <mat-card-actions>
+        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="profileForm.invalid">
+          {{'profile.update' | i18n}}
+        </button>
+        <a *ngIf="profileSuccess" mat-button color="primary">{{'profile.success' | i18n}}</a>
+      </mat-card-actions>
+    </mat-card>
+  </form>
+
+  @if(admin) {
+  <form [formGroup]="passwordForm" (ngSubmit)="setPassword()">
+    <mat-card>
+      <mat-card-content>
+        <mat-form-field>
+          <mat-label>{{'password.new' | i18n}}</mat-label>
+          <input matInput formControlName="password" type="password">
+          <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
+            {{'password.error.' + error.key | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'password.repeat' | i18n}}</mat-label>
+          <input matInput formControlName="password2" type="password">
+          <mat-error *ngFor="let error of passwordForm.get('password2').errors | keyvalue">
+            {{'password.error.' + error.key | i18n}}
+          </mat-error>
+        </mat-form-field>
+      </mat-card-content>
+      <mat-card-actions>
+        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
+          {{'password.update' | i18n}}
+        </button>
+        <a *ngIf="passwordSuccess" mat-button color="primary">{{'password.success' | i18n}}</a>
+        @if (admin && user && user.username) {
+        <span class="spacer"></span>
+        <a mat-raised-button color="warn" (click)="deleteUser()">
+          <mat-icon>delete</mat-icon> {{'user.delete' | i18n}}
+        </a>
+        }
+      </mat-card-actions>
+    </mat-card>
+  </form>
+  }
+</div>
@@ -0,0 +1,23 @@
+mat-form-field,
+mat-slide-toggle {
+  display: block;
+  margin: 20px 0 !important;
+}
+
+form {
+  margin: 5px;
+  min-width: 390px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
@@ -0,0 +1,176 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControlOptions, FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { UserService } from '../../services/user.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserManagementService } from 'src/app/services/user.management.service';
+import { MatchingValidator } from 'src/app/utils/matching.validator';
+import { ConfirmDialog } from 'src/app/ui/confirm/confirm.component';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+  selector: 'page-profile',
+  templateUrl: './profile.page.html',
+  styleUrls: ['./profile.page.scss']
+})
+export class PageProfile implements OnInit, OnDestroy {
+
+  auth: any;
+  user: any;
+  working: boolean = false;
+  profileSuccess: boolean = false;
+  profileForm: FormGroup;
+  passwordSuccess: boolean = false;
+  passwordForm: FormGroup;
+  admin: boolean = false;
+  isAdmin: boolean = false;
+
+  constructor(
+    private userService: UserService,
+    private userManagementService: UserManagementService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    public dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.profileForm = this.formBuilder.group({
+      username: [{ disabled: true }, Validators.nullValidator],
+      email: ['', Validators.nullValidator],
+      name: ['', Validators.nullValidator],
+      about: ['', Validators.nullValidator]
+    });
+
+    this.passwordForm = this.formBuilder.group({
+      password: ['', Validators.nullValidator],
+      password2: ['', Validators.nullValidator]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    } as AbstractControlOptions);
+
+    this.profileForm.get('username').disable();
+
+    let userFetch = this.userService.get();
+    if (this.route.snapshot.paramMap.has('username')) {
+      this.admin = true;
+      userFetch = this.userManagementService.get(this.route.snapshot.paramMap.get('username'));
+    }
+
+    userFetch.subscribe({
+      next: (user) => {
+        this.user = user;
+        this.isAdmin = this.user.roles && this.user.roles.indexOf('ROLE_ADMIN') != -1;
+        this.profileForm.get('username').setValue(this.user.username);
+        this.profileForm.get('name').setValue(this.user.name);
+        this.profileForm.get('email').setValue(this.user.email);
+        this.profileForm.get('about').setValue(this.user.about);
+      }
+    })
+
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  profileHasError(controlName: string): boolean {
+    return this.profileForm.controls[controlName].errors != null;
+  }
+
+  saveProfile(): void {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+    this.profileSuccess = false;
+
+    this.user.about = this.profileForm.get('about').value;
+    this.user.email = this.profileForm.get('email').value;
+    this.user.name = this.profileForm.get('name').value;
+
+    if (this.isAdmin && (!this.user.roles || this.user.roles.indexOf('ROLE_ADMIN') == -1)) {
+      this.user.roles = this.user.roles || [];
+      this.user.roles.push('ROLE_ADMIN');
+    } else if (!this.isAdmin && this.user.roles && this.user.roles.indexOf('ROLE_ADMIN') != -1) {
+      this.user.roles.splice(this.user.roles.indexOf('ROLE_ADMIN'), 1);
+    }
+
+    const create = this.admin ? this.userManagementService.update(this.user) : this.userService.update(this.user);
+
+    create.subscribe({
+      next: (data) => {
+        this.user = data;
+        this.isAdmin = this.user.roles && this.user.roles.indexOf('ROLE_ADMIN') != -1;
+        this.working = false;
+        this.profileSuccess = true;
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }
+
+          for (let code in errors) {
+            this.profileForm.get(code).setErrors(errors[code]);
+          }
+        }
+      }
+    })
+
+  }
+
+  setPassword() {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+    this.passwordSuccess = false;
+    this.userManagementService.setPassword(this.user.username, this.passwordForm.get('password').value).subscribe({
+      next: () => {
+        this.working = false;
+        this.passwordSuccess = true;
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 409) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }
+
+          for (let code in errors) {
+            this.passwordForm.get(code).setErrors(errors[code]);
+          }
+        }
+      }
+    })
+  }
+
+
+
+  deleteUser() {
+    const dialogRef = this.dialog.open(ConfirmDialog, {
+      data: {
+        'label': 'user.confirmDelete',
+        'args': [this.user.username]
+      }
+    })
+
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.userManagementService.deleteUser(this.user.username).subscribe({
+            next: () => {
+              this.router.navigateByUrl('/u');
+            }
+          });
+        }
+      }
+    });
+  }
+}
@@ -0,0 +1,101 @@
+<div class="flex column fill middle">
+  @if (!turnover) {
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (turnover) {
+  <form [formGroup]="form" (ngSubmit)="turnover.id ? update() : create()" #formDirective="ngForm">
+    <mat-card>
+      <mat-card-content>
+        <div class="flex space-between">
+          <p>{{ (turnover.id ? 'turnover.edit' : 'turnover.info') | i18n}}</p>
+          @if (turnover.created) {
+          <span>{{(turnover.username == username ? 'turnover.created.label' : 'turnover.created.label.username') |
+            i18n:(turnover.created | datef:'LLL' ):turnover.username}}</span>
+          }
+        </div>
+        <mat-form-field [floatLabel]="'always'">
+          <mat-label>{{'turnover.dueDate' | i18n}}</mat-label>
+          <input matInput formControlName="dueDate" [matDatepicker]="picker"
+            [placeholder]="(turnover.created || today) | datef:'L'">
+          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.customer' | i18n}}</mat-label>
+          <input matInput formControlName="customer" type="text" [required]="true">
+          <mat-error *ngIf="hasError('customer')">
+            {{'turnover.customer.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.motif' | i18n}}</mat-label>
+          <input matInput formControlName="motif" type="text" [required]="true">
+          <mat-error *ngIf="hasError('motif')">
+            {{'turnover.motif.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.price' | i18n}}</mat-label>
+          <input matInput formControlName="price" type="number" min="0" step="0.01" [required]="true">
+          <span matTextSuffix>{{'turnover.price.suffix' | i18n}}</span>
+          <mat-error *ngIf="hasError('price')">
+            {{'turnover.price.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.timeInvestment' | i18n}}</mat-label>
+          <input matInput formControlName="timeInvestment" type="number" min="0" step="0.1">
+          <span matTextSuffix>{{'turnover.timeInvestment.suffix' | i18n}}</span>
+          <mat-error *ngIf="hasError('timeInvestment')">
+            {{'turnover.timeInvestment.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.remark' | i18n}}</mat-label>
+          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="remark"></textarea>
+          <mat-error *ngIf="hasError('remark')">
+            {{'turnover.remark.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{'turnover.materialConsumption' | i18n}}</mat-label>
+          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="materialConsumption"></textarea>
+          <mat-error *ngIf="hasError('materialConsumption')">
+            {{'turnover.materialConsumption.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
+      </mat-card-content>
+      <mat-card-actions class="flex column">
+        <div class="flex fill">
+          @if (!working) {
+          <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
+            {{(turnover.id ? 'turnover.update' : 'turnover.create') | i18n}}
+          </button>
+          }
+          @if (success) {
+          <a mat-button color="primary" disabled="true">{{'turnover.success' | i18n}}</a>
+          }
+          @if (admin && turnover.id) {
+          <span class="spacer"></span>
+          <a mat-raised-button color="warn" (click)="deleteTurnover()">
+            <mat-icon>delete</mat-icon> {{'turnover.delete' | i18n}}
+          </a>
+          }
+        </div>
+        @if (turnover.updated && turnover.updated != turnover.created) {
+        <div class="flex">
+          <span class="margin">{{'turnover.updated.label' | i18n:(turnover.updated | datef:'LLL' )}}</span>
+        </div>
+        }
+      </mat-card-actions>
+    </mat-card>
+  </form>
+  }
+</div>
@@ -0,0 +1,25 @@
+mat-form-field {
+  display: block;
+  margin: 20px 0 !important;
+}
+form {
+  margin: 5px;
+  min-width: 390px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
+
+mat-card-actions .flex:first-child {
+  margin-bottom: 15px;
+}
@@ -0,0 +1,205 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import moment, { Moment } from 'moment';
+import { AuthService } from 'src/app/services/auth.service';
+import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
+import { TurnoverService } from 'src/app/services/turnover.service';
+import { ConfirmDialog } from 'src/app/ui/confirm/confirm.component';
+
+@Component({
+  selector: 'page-turnover',
+  templateUrl: './turnover.page.html',
+  styleUrls: ['./turnover.page.scss']
+})
+export class PageTurnover implements OnInit {
+
+  id: number;
+  turnover: any;
+  notfound: boolean = false;
+  working: boolean = false;
+  success: boolean = false;
+  form: FormGroup;
+  username: string = "";
+  admin: boolean = false;
+  today: Moment = moment();
+
+  constructor(
+    private turnoverService: TurnoverService,
+    private turnoverManagementService: TurnoverManagementService,
+    private authService: AuthService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      dueDate: ['', Validators.nullValidator],
+      customer: ['', Validators.required],
+      motif: ['', Validators.required],
+      price: ['', Validators.required],
+      timeInvestment: ['', Validators.nullValidator],
+      remark: ['', Validators.nullValidator],
+      materialConsumption: ['', Validators.nullValidator],
+    });
+
+    this.id = this.route.snapshot.paramMap.get('id') && +this.route.snapshot.paramMap.get('id');
+    this.refresh();
+  }
+
+  refresh() {
+    if (this.id) {
+      let request = this.turnoverService.get(this.id);
+
+      this.authService.auth.subscribe({
+        next: (auth) => {
+          this.username = auth.username;
+          this.admin = auth.authorities && auth.authorities.find((role) => role.authority == 'ROLE_ADMIN') != undefined;
+
+          if (this.admin) {
+            request = this.turnoverManagementService.get(this.id);
+          }
+
+          request.subscribe({
+            next: (data) => {
+              this.turnover = data;
+              if (this.turnover.dueDate != this.turnover.created) {
+                this.form.get("dueDate").setValue(this.turnover.dueDate);
+              }
+              this.form.get("customer").setValue(this.turnover.customer);
+              this.form.get("motif").setValue(this.turnover.motif);
+              this.form.get("price").setValue(this.turnover.price);
+              this.form.get("timeInvestment").setValue(this.turnover.timeInvestment);
+              this.form.get("remark").setValue(this.turnover.remark);
+              this.form.get("materialConsumption").setValue(this.turnover.materialConsumption);
+
+            },
+            error: (error) => {
+              if (error.status == 404) {
+                this.notfound = true;
+              }
+            }
+          })
+
+        },
+        error: (error) => {
+          this.username = ""
+        }
+      })
+
+
+    } else {
+      this.turnover = {};
+    }
+  }
+
+  hasError(controlName: string): boolean {
+    return this.form.controls[controlName].errors != null;
+  }
+
+  create(): void {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+
+    this.turnover.dueDate = this.form.get("dueDate").value;
+    this.turnover.customer = this.form.get("customer").value;
+    this.turnover.motif = this.form.get("motif").value;
+    this.turnover.price = this.form.get("price").value;
+    this.turnover.timeInvestment = this.form.get("timeInvestment").value;
+    this.turnover.remark = this.form.get("remark").value;
+    this.turnover.materialConsumption = this.form.get("materialConsumption").value;
+
+    this.turnoverService.create(this.turnover).subscribe({
+      next: (data) => {
+        this.router.navigateByUrl('/');
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }
+
+          for (let code in errors) {
+            this.form.get(code).setErrors(errors[code]);
+          }
+        }
+      }
+    })
+
+  }
+
+  update(): void {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+    this.turnover.dueDate = this.form.get("dueDate").value;
+    this.turnover.customer = this.form.get("customer").value;
+    this.turnover.motif = this.form.get("motif").value;
+    this.turnover.price = this.form.get("price").value;
+    this.turnover.timeInvestment = this.form.get("timeInvestment").value;
+    this.turnover.remark = this.form.get("remark").value;
+    this.turnover.materialConsumption = this.form.get("materialConsumption").value;
+
+    const request = this.admin ? this.turnoverManagementService.update(this.turnover) : this.turnoverService.update(this.turnover);
+
+    request.subscribe({
+      next: (data) => {
+        this.turnover = data;
+        this.working = false;
+        this.success = true;
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 403) {
+          this.snackBar.open("Error");
+        }
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }
+
+          for (let code in errors) {
+            this.form.get(code).setErrors(errors[code]);
+          }
+        }
+      }
+    })
+  }
+
+  deleteTurnover() {
+    const dialogRef = this.dialog.open(ConfirmDialog, {
+      data: {
+        'label': 'turnover.confirmDelete',
+        'args': [this.turnover.username]
+      }
+    })
+
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.turnoverManagementService.delete(this.turnover.id).subscribe({
+            next: () => {
+              this.router.navigateByUrl('/');
+            }
+          });
+        }
+      }
+    });
+  }
+
+}
@@ -0,0 +1,58 @@
+<div class="flex column fill">
+    <div class="flex wrap middle filter-container">
+        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
+            [color]="filterOpen ? 'primary': 'accent'">
+            <mat-icon>filter_alt</mat-icon>
+        </a>
+
+        @if(filterOpen) {
+        <form class="flex wrap filter">
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.dueDate' | i18n}}</mat-label>
+                <mat-date-range-input [rangePicker]="picker">
+                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
+                        [value]="turnovers && turnovers.filter && turnovers.filter.from"
+                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
+                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.to' | i18n}}"
+                        [value]="turnovers && turnovers.filter && turnovers.filter.to"
+                        (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
+                </mat-date-range-input>
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-date-range-picker #picker></mat-date-range-picker>
+            </mat-form-field>
+
+
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.username' | i18n}}</mat-label>
+                <input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
+                    [value]="turnovers && turnovers.filter && turnovers.filter.username || ''"
+                    (change)="setInputFilter('username', $event.target)">
+                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
+                    @for (user of users | async; track user.username) {
+                    <mat-option [value]="user.username">{{user.username}}</mat-option>
+                    }
+                </mat-autocomplete>
+            </mat-form-field>
+
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.customer' | i18n}}</mat-label>
+                <input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.customer || ''"
+                    (input)="setInputFilter('customer', $event.target)">
+            </mat-form-field>
+
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.motif' | i18n}}</mat-label>
+                <input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.motif || ''"
+                    (input)="setInputFilter('motif', $event.target)">
+            </mat-form-field>
+        </form>
+        }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!turnovers.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
+    </div>
+
+    <ui-turnovers #uiTurnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)"
+        (sort)="applySort($event)" [username]="true"></ui-turnovers>
+</div>
@@ -0,0 +1,20 @@
+.filter-container {
+    padding-left: 15px;
+    justify-content: flex-start;
+    align-items: center;
+
+    .filter {
+        justify-content: flex-start;
+        align-items: center;
+
+        &>* {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            margin-left: 15px;
+        }
+    }
+}
+
+ui-turnovers {
+    min-height: 0;
+}
@@ -0,0 +1,173 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { debounceTime, Observable, switchMap } from 'rxjs';
+import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
+import { UserManagementService } from 'src/app/services/user.management.service';
+import { UiTurnovers } from 'src/app/ui/turnovers/turnovers.ui';
+
+@Component({
+  selector: 'page-turnovers-manage',
+  templateUrl: './manage.page.html',
+  styleUrls: ['./manage.page.scss']
+})
+export class PageTurnoversManage implements OnInit {
+
+  turnovers: any;
+  sort: string = "dueDate";
+  descending: boolean = true;
+  filterOpen: boolean = false;
+
+  users: Observable<any>;
+  usersFormControl = new FormControl();
+
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
+  constructor(
+    private turnoverManagementService: TurnoverManagementService,
+    private userManagementService: UserManagementService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+
+  ngOnInit(): void {
+    this.turnovers = {};
+    this.users = this.usersFormControl
+      .valueChanges
+      .pipe(
+        debounceTime(300),
+        switchMap(value => this.userManagementService.pick(value))
+      );
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        this.turnovers = { filter: {} };
+        if (params['l']) {
+          this.turnovers.limit = +params['l'];
+          if (this.turnovers.limit < 1) {
+            this.turnovers.limit = 1;
+          }
+        }
+        if (params['o']) {
+          this.turnovers.offset = +params['o'];
+          if (this.turnovers.offset < 0) {
+            this.turnovers.offset = 0;
+          }
+        }
+
+        if (params['s']) {
+          this.sort = params['s'];
+        }
+
+        if (params['a']) {
+          this.descending = false;
+        } else {
+          this.descending = true;
+        }
+
+        for (const param in params) {
+          if (param != 'l' && param != 'o' && param != 's' && param != 'a') {
+            this.filterOpen = true;
+            this.turnovers.filter[param] = params[param];
+            if (param == 'username') {
+              this.usersFormControl.setValue(params[param]);
+            }
+          }
+        }
+
+        this.refresh();
+      }
+    });
+  }
+
+  refresh() {
+    const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
+    this.turnoverManagementService.fetch(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, filter).subscribe({
+      next: (data: any) => {
+        this.turnovers = data;
+        this.turnovers.filter = filter;
+      }, error: (error) => {
+        this.turnovers = { error: error };
+      }
+    })
+  }
+
+  update() {
+    const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
+
+    const params: Params = { l: null, o: null, s: null, a: null };
+
+    if ((this.turnovers.limit || 15) != 15) {
+      params['l'] = this.turnovers.limit;
+    }
+
+    if ((this.turnovers.offset || 0) != 0) {
+      params['o'] = this.turnovers.offset;
+    }
+
+    if (this.sort != 'dueDate') {
+      params['s'] = this.sort;
+    }
+
+    if (!this.descending) {
+      params['a'] = true;
+    }
+
+    if (filter) {
+      for (const param in filter) {
+        params[param] = filter[param] || null;
+      }
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'replace'
+      });
+  }
+
+  applyPage(event: PageEvent) {
+    this.turnovers.limit = event.pageSize;
+    this.turnovers.offset = event.pageSize * event.pageIndex;
+    this.update();
+  }
+
+  applySort(event: Sort) {
+    this.sort = event.direction ? event.active : 'dueDate';
+    this.descending = event.direction !== 'asc';
+    this.update();
+  }
+
+  setInputFilter(key: string, target: EventTarget) {
+    this.setFilter(key, (target as HTMLInputElement).value);
+  }
+
+  setFilter(key: string, value) {
+    if (value != this.turnovers.filter[key]) {
+      this.turnovers.filter[key] = value;
+      this.turnovers.offset = 0;
+      this.update();
+    }
+  }
+
+  export() {
+    let rows = this.uiTurnovers.getCsvRows();
+    if (rows.length) {
+      let csvContent = "data:text/csv;charset=utf-8,"
+        + rows.map(e => e.join(";")).join("\n");
+
+      var encodedUri = encodeURI(csvContent);
+      var link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "export.csv");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+}
@@ -0,0 +1,45 @@
+<div class="flex column fill">
+    <div class="flex wrap filter-container">
+        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
+            [color]="filterOpen ? 'primary': 'accent'">
+            <mat-icon>filter_alt</mat-icon>
+        </a>
+
+        @if (filterOpen) {
+        <form class="flex wrap filter">
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.dueDate' | i18n}}</mat-label>
+                <mat-date-range-input [rangePicker]="picker">
+                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
+                        [value]="turnovers && turnovers.filter && turnovers.filter.from"
+                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
+                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.to' | i18n}}"
+                        [value]="turnovers && turnovers.filter && turnovers.filter.to"
+                        (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
+                </mat-date-range-input>
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-date-range-picker #picker></mat-date-range-picker>
+            </mat-form-field>
+
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.customer' | i18n}}</mat-label>
+                <input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.customer || ''"
+                    (input)="setInputFilter('customer', $event.target)">
+            </mat-form-field>
+
+            <mat-form-field class="margin">
+                <mat-label>{{'turnovers.filter.motif' | i18n}}</mat-label>
+                <input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.motif || ''"
+                    (input)="setInputFilter('motif', $event.target)">
+            </mat-form-field>
+        </form>
+        }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!turnovers.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
+    </div>
+
+    <ui-turnovers #uiTurnovers class="flex column grow" [turnovers]="turnovers" [overview]="overview" (page)="applyPage($event)"
+        (sort)="applySort($event)"></ui-turnovers>
+</div>
@@ -0,0 +1,22 @@
+.filter-container {
+    padding-left: 15px;
+    justify-content: flex-start;
+    align-items: center;
+
+    .filter {
+
+        justify-content: flex-start;
+        align-items: center;
+
+        &>* {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            margin-left: 15px;
+        }
+    }
+}
+
+
+ui-turnovers {
+    min-height: 0;
+}
@@ -0,0 +1,167 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TurnoverService } from 'src/app/services/turnover.service';
+import { UiTurnovers } from 'src/app/ui/turnovers/turnovers.ui';
+
+@Component({
+  selector: 'page-turnovers',
+  templateUrl: './turnovers.page.html',
+  styleUrls: ['./turnovers.page.scss']
+})
+export class PageTurnovers implements OnInit {
+
+  turnovers: any;
+  overview: any[];
+  sort: string = "dueDate";
+  descending: boolean = true;
+  filterOpen: boolean = false;
+  init: boolean = true;
+
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
+  constructor(
+    private turnoverService: TurnoverService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.turnovers = {};
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        this.turnovers = { filter: {} };
+        if (params['l']) {
+          this.turnovers.limit = +params['l'];
+          if (this.turnovers.limit < 1) {
+            this.turnovers.limit = 1;
+          }
+        }
+        if (params['o']) {
+          this.turnovers.offset = +params['o'];
+          if (this.turnovers.offset < 0) {
+            this.turnovers.offset = 0;
+          }
+        }
+
+        if (params['s']) {
+          this.sort = params['s'];
+        }
+
+        if (params['a']) {
+          this.descending = false;
+        } else {
+          this.descending = true;
+        }
+
+        for (const param in params) {
+          if (param != 'l' && param != 'o' && param != 's' && param != 'a') {
+            this.filterOpen = true;
+            this.turnovers.filter[param] = params[param];
+          }
+        }
+        this.refresh();
+      }
+    });
+  }
+
+  refresh() {
+    const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
+    this.turnoverService.fetch(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, this.turnovers.filter).subscribe({
+      next: (data: any) => {
+        this.turnovers = data;
+        this.turnovers.filter = filter;
+      }, error: (error) => {
+        this.turnovers = { error: error };
+      }
+    })
+
+    this.turnoverService.overview(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, this.turnovers.filter).subscribe({
+      next: (data: any) => {
+        this.overview = data;
+        if (!this.overview) {
+          this.overview = ['', 0, 0];
+        }
+      }, error: (error) => {
+        this.turnovers = { error: error };
+      }
+    })
+  }
+
+  update() {
+    const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
+
+    const params: Params = { l: null, o: null, s: null, a: null };
+
+    if ((this.turnovers.limit || 15) != 15) {
+      params['l'] = this.turnovers.limit;
+    }
+
+    if ((this.turnovers.offset || 0) != 0) {
+      params['o'] = this.turnovers.offset;
+    }
+
+    if (this.sort != 'dueDate') {
+      params['s'] = this.sort;
+    }
+
+    if (!this.descending) {
+      params['a'] = true;
+    }
+
+    if (filter) {
+      for (const param in filter) {
+        params[param] = filter[param] || null;
+      }
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'replace'
+      });
+  }
+
+  applyPage(event: PageEvent) {
+    this.turnovers.limit = event.pageSize;
+    this.turnovers.offset = event.pageSize * event.pageIndex;
+    this.update();
+  }
+
+  applySort(event: Sort) {
+    this.sort = event.direction ? event.active : 'dueDate';
+    this.descending = event.direction !== 'asc';
+    this.update();
+  }
+
+  setInputFilter(key: string, target: EventTarget) {
+    this.setFilter(key, (target as HTMLInputElement).value);
+  }
+
+  setFilter(key: string, value) {
+    if (value != this.turnovers.filter[key]) {
+      this.turnovers.filter[key] = value;
+      this.turnovers.offset = 0;
+      this.update();
+    }
+  }
+
+  export() {
+    let rows = this.uiTurnovers.getCsvRows();
+    if (rows.length) {
+      let csvContent = "data:text/csv;charset=utf-8,"
+        + rows.map(e => e.join(";")).join("\n");
+
+      var encodedUri = encodeURI(csvContent);
+      var link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "export.csv");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+}
@@ -0,0 +1,20 @@
+<div class="container">
+    <div class="flex column fill center middle">
+        <mat-card class="warn box">
+            <mat-card-header>
+                <mat-card-title>503</mat-card-title>
+                <mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <p>
+                    {{'service-unavailable.text' | i18n}}
+                </p>
+            </mat-card-content>
+            <mat-card-actions>
+                <a mat-raised-button color="primary" (click)="retry()">
+                    {{'service-unavailable.retry' | i18n}}
+                </a>
+            </mat-card-actions>
+        </mat-card>
+    </div>
+</div>
@@ -0,0 +1,17 @@
+.box {
+  margin: 5px;
+  min-width: 390px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+    margin: 15px;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common'
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'page-unavailable',
+  templateUrl: './unavailable.page.html',
+  styleUrls: ['./unavailable.page.scss']
+})
+export class PageUnavailable implements OnInit {
+
+  targetRoute = '';
+
+  constructor(
+    private location: Location,
+    private router: Router,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        if (params['target']) {
+          this.targetRoute = params['target'];
+          this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', skipLocationChange: true });
+        }
+      }
+    });
+
+  }
+
+  retry() {
+    if (!this.targetRoute || this.targetRoute === "unavailable" || this.targetRoute === "/unavailable") {
+      this.location.back;
+    } else {
+      this.router.navigate([this.targetRoute]);
+    }
+  }
+
+}
@@ -0,0 +1,50 @@
+<div class="flex column fill middle">
+    <form [formGroup]="form" (ngSubmit)="createUser()" #formDirective="ngForm">
+        <mat-card>
+            <mat-card-content>
+                <mat-form-field class="margin">
+                    <mat-label>{{'profile.username' | i18n}}</mat-label>
+                    <input matInput formControlName="username" type="text" [required]="true">
+                    <mat-error *ngFor="let error of form.get('username').errors | keyvalue">
+                        {{'user.error.' + error.key | i18n}}
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-form-field class="margin">
+                    <mat-label>{{'profile.name' | i18n}}</mat-label>
+                    <input matInput formControlName="name" type="text">
+                    <mat-error *ngFor="let error of form.get('name').errors | keyvalue">
+                        {{'user.error.' + error.key | i18n}}
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-form-field class="margin">
+                    <mat-label>{{'profile.email' | i18n}}</mat-label>
+                    <input matInput formControlName="email" type="email">
+                    <mat-error *ngFor="let error of form.get('email').errors | keyvalue">
+                        {{'user.error.' + error.key | i18n}}
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-form-field class="margin">
+                    <mat-label>{{'user.password' | i18n}}</mat-label>
+                    <input matInput formControlName="password" type="password">
+                    <mat-error *ngFor="let error of form.get('password').errors | keyvalue">
+                        {{'password.error.' + error.key | i18n}}
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-slide-toggle class="margin" (change)="isAdmin=$event.checked">
+                    {{'user.admin' | i18n}}
+                </mat-slide-toggle>
+            </mat-card-content>
+            <mat-card-actions>
+                @if (!working) {
+                <button type="submit" mat-raised-button color="primary"
+                    [disabled]="form.invalid"><mat-icon>person_add</mat-icon>{{'user.create' |
+                    i18n}}</button>
+                }
+            </mat-card-actions>
+        </mat-card>
+    </form>
+</div>
@@ -0,0 +1,21 @@
+mat-form-field {
+    display: block;
+    margin: 20px 0 !important;
+  }
+  form {
+    margin: 5px;
+    min-width: 390px;
+  
+    @media screen and (min-width: 576px) {
+      max-width: 100%;
+    }
+  
+    @media screen and (min-width: 768px) {
+      max-width: 80%;
+      margin: 15px;
+    }
+  
+    @media screen and (min-width: 992px) {
+      max-width: 50%;
+    }
+  }
@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { UserManagementService } from 'src/app/services/user.management.service';
+
+@Component({
+    selector: 'page-user-create',
+    templateUrl: './users.create.page.html',
+    styleUrls: ['./users.create.page.scss']
+})
+export class PageUserCreate implements OnInit {
+
+    form: FormGroup;
+    isAdmin: boolean = false;
+    working: boolean = false;
+
+    constructor(
+        private userManagementService: UserManagementService,
+        private formBuilder: FormBuilder,
+        private router: Router) { }
+
+    ngOnInit(): void {
+        this.form = this.formBuilder.group({
+            username: ['', Validators.required],
+            name: ['', Validators.nullValidator],
+            email: ['', Validators.nullValidator],
+            password: ['', Validators.required]
+        });
+    }
+
+    createUser() {
+        this.working = true;
+        const user = {
+            username: this.form.get("username").value,
+            name: this.form.get("name").value,
+            email: this.form.get("email").value,
+            roles: this.isAdmin ? ['ROLE_ADMIN'] : []
+        }
+
+        const request = this.form.get("username").disabled ? this.userManagementService.update(user) : this.userManagementService.create(user);
+
+        request.subscribe({
+            next: (result: any) => {
+                this.userManagementService.setPassword(result.username, this.form.get("password").value).subscribe({
+                    next: (result) => {
+                        this.working = false;
+                        this.router.navigateByUrl('/u');
+                    },
+                    error: (error) => {
+                        this.form.get("username").disable();
+
+                        this.working = false;
+                        if (error.status == 409) {
+                            let errors = {};
+                            for (let code of error.error) {
+                                errors[code.field] = errors[code.field] || {};
+                                errors[code.field][code.code] = true;
+                            }
+
+                            for (let code in errors) {
+                                this.form.get(code).setErrors(errors[code]);
+                            }
+                        }
+                    }
+                });
+            },
+            error: (error) => {
+                this.working = false;
+                if (error.status == 409) {
+                    let errors = {};
+                    for (let code of error.error) {
+                        errors[code.field] = errors[code.field] || {};
+                        errors[code.field][code.code] = true;
+                    }
+
+                    for (let code in errors) {
+                        this.form.get(code).setErrors(errors[code]);
+                    }
+                }
+            }
+        })
+    }
+
+}
@@ -0,0 +1,100 @@
+<div class="flex column fill">
+    @if (users && users.error) {
+    <div class="flex column fill">
+        <mat-card class="accent box">
+            <mat-card-header>
+                <mat-card-title>{{ 'users.error.' + users.error.status | i18n}}</mat-card-title>
+                <mat-card-subtitle>{{'users.error' | i18n}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <p>
+                    {{ 'users.error.' + users.error.status + '.text' | i18n}}
+                </p>
+            </mat-card-content>
+        </mat-card>
+    </div>
+    }
+
+    <div class="flex wrap filter-container">
+        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'users.filter' | i18n}}"
+            [color]="filterOpen ? 'primary': 'accent'">
+            <mat-icon>filter_alt</mat-icon>
+        </a>
+
+        @if (filterOpen) {
+        <form class="flex wrap filter">
+            <mat-form-field class="margin">
+                <mat-label>{{'users.filter.search' | i18n}}</mat-label>
+                <input type="text" matInput [value]="users && users.filter && users.filter || ''"
+                    (input)="setFilter( $event.target)">
+            </mat-form-field>
+        </form>
+        }
+    </div>
+
+    @if (users) {
+    <div class="scroll-container">
+        <table class="default-table" mat-table [dataSource]="users.results || []" matSort
+            (matSortChange)="applySort($event)" [matSortDisableClear]="true">
+            <ng-container matColumnDef="username">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'user.username' |
+                    i18n}}
+                </th>
+                <td mat-cell *matCellDef="let user">
+                    <div class="flex middle">
+                        @if (user.roles && user.roles.indexOf('ROLE_ADMIN') != -1) {
+                        <mat-icon>admin_panel_settings</mat-icon>
+                        }
+                        {{user.username}}
+                    </div>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'profile.name' | i18n}}</th>
+                <td mat-cell *matCellDef="let user">{{user.name}}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="email">
+                <th mat-header-cell *matHeaderCellDef>{{'profile.email' | i18n}}</th>
+                <td mat-cell *matCellDef="let user">{{user.email}}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="about">
+                <th mat-header-cell *matHeaderCellDef>{{'profile.about' | i18n}}</th>
+                <td mat-cell *matCellDef="let user">
+                    <span class="ellipsis" matTooltip="{{user.about}}">{{user.about}}</span>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+            <tr class="user" mat-row *matRowDef="let user; columns: columns;" [routerLink]="'/u/' + user.username">
+            </tr>
+        </table>
+    </div>
+    @if (users.total == 0) {
+    <mat-list>
+        <mat-list-item>
+            <p>{{'paginator.empty' | i18n}}</p>
+        </mat-list-item>
+    </mat-list>
+    }
+
+    <span class="spacer"></span>
+
+    <div class="mat-mdc-paginator flex wrap middle">
+        <a class="margin" routerLink="/user" mat-raised-button color="primary">
+            <mat-icon>person_add</mat-icon>
+            <span class="hide-small">{{'user.create' | i18n}}</span>
+        </a>
+        <span class="spacer"></span>
+        <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="users.offset / users.limit"
+            [length]="users.total" [pageSize]="users.limit" (page)="applyPage($event)" showFirstLastButtons>
+        </mat-paginator>
+    </div>
+    }
+
+    @if (!users || !users.results && !users.error) {
+    <mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
+    }
+</div>
@@ -0,0 +1,32 @@
+.filter-container {
+    padding-left: 15px;
+    justify-content: flex-start;
+    align-items: center;
+
+    .filter {
+
+        justify-content: flex-start;
+        align-items: center;
+
+        &>* {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            margin-left: 15px;
+        }
+    }
+}
+
+tr.user {
+    &:hover {
+        cursor: pointer;
+        opacity: 0.7;
+    }
+
+    &.disabled {
+        pointer-events: none;
+    }
+}
+
+.mat-mdc-paginator a.margin {
+    margin: 15px;
+}
@@ -0,0 +1,91 @@
+import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { AuthService } from 'src/app/services/auth.service';
+import { UserManagementService } from 'src/app/services/user.management.service';
+
+@Component({
+  selector: 'ui-users',
+  templateUrl: './users.page.html',
+  styleUrls: ['./users.page.scss']
+})
+export class PageUsers implements OnInit {
+
+  @Input() users: any;
+  pageSizeOptions: number[] = [1, 2, 3, 4, 5, 10, 15, 30, 50, 100];
+  sort: string = "username";
+  descending: boolean = false;
+  filterOpen: boolean = true;
+
+  columns: string[] = [];
+
+  username: string = "";
+
+  constructor(
+    private userManagementService: UserManagementService,
+    private authService: AuthService,
+    private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.users = {};
+    this.update();
+    this.applyResize(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
+
+    this.authService.auth.subscribe({
+      next: (auth) => {
+        this.username = auth.username;
+      },
+      error: (error) => {
+        this.username = ""
+      }
+    })
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.applyResize(event.target.innerWidth || event.target.documentElement.clientWidth || event.target.body.clientWidth)
+  }
+
+  applyResize(width: number) {
+    if (width < 992) {
+      this.columns = ['username', 'name', 'email']
+    } else {
+      this.columns = ['username', 'name', 'email', 'about'];
+    }
+  }
+
+  update() {
+    const filter = this.users.filter || "";
+    this.userManagementService.fetch(this.users.limit || 15, this.users.offset || 0, this.sort, this.descending, filter).subscribe({
+      next: (data: any) => {
+        this.users = data;
+        this.users.filter = filter;
+      }, error: (error) => {
+        this.users = { error: error };
+      }
+    })
+  }
+
+  applyPage(event: PageEvent) {
+    this.users.limit = event.pageSize;
+    this.users.offset = event.pageSize * event.pageIndex;
+    this.update();
+  }
+
+  applySort(event: Sort) {
+    this.sort = event.direction ? event.active : 'username';
+    this.descending = event.direction !== 'asc';
+    this.update();
+  }
+
+  setFilter(target: EventTarget) {
+    const value = (target as HTMLInputElement).value;
+    if (value != this.users.filter) {
+      this.users.filter = value;
+      this.users.offset = 0;
+      this.update();
+    }
+  }
+
+}
@@ -0,0 +1,40 @@
+import { HttpClient, HttpParams } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { environment } from "src/environments/environment";
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AbstractService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    fetch(path: string, limit: number, offset: number, sort: string, descending: boolean, filter: any | undefined) {
+        let httpParams = new HttpParams();
+        if (limit != undefined) {
+            httpParams = httpParams.set("limit", "" + limit);
+        }
+        if (offset) {
+            httpParams = httpParams.set("offset", "" + offset);
+        }
+
+        if (sort) {
+            httpParams = httpParams.set("sort", "" + sort);
+        }
+
+        if (descending) {
+            httpParams = httpParams.set("descending", "" + descending);
+        }
+
+        if (filter) {
+            for (const param in filter) {
+                if (filter[param]) {
+                    httpParams = httpParams.set(param, "" + filter[param]);
+                }
+            }
+        }
+
+        return this.http.get(environment.apiUrl + path, { params: httpParams });
+    }
+}
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { ReplaySubject, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+import { RequestError } from './requesterror';
+
+import { environment } from './../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AuthService {
+
+    auth: ReplaySubject<any> = new ReplaySubject(undefined);
+
+    constructor(private http: HttpClient) {
+    }
+
+    getAuth() {
+        return this.authMe().toPromise().then((data: any) => {
+            this.auth.next(data);
+            return data;
+        }, error => {
+            throw new RequestError(error);
+        });
+    }
+
+    authMe() {
+        return this.http.get(environment.apiUrl + "/auth");
+    }
+
+    getExternal() {
+        return this.http.get(environment.apiUrl + "/auth/external");
+    }
+
+    logout() {
+        return this.http.post(environment.apiUrl + "/logout", {});
+    }
+
+}
@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DebugService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    random() {
+        return this.http.get(environment.apiUrl + "/debug/random");
+    }
+
+}
@@ -0,0 +1,138 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { Subject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class I18nService {
+
+    locale: string = "de-informal";
+    locales: any[] = ["de-informal"];
+    i18n: any;
+
+    constructor(private http: HttpClient) {
+
+    }
+
+    getLocales() {
+        return this.locales;
+    }
+
+    getLocale() {
+        return this.locale || 'de-informal';
+    }
+
+    setLocale(locale) {
+        this.locale = locale;
+    }
+
+    async fetch() {
+
+        let browserLocale = navigator.language;
+
+        if (browserLocale.indexOf("-") != -1) {
+            browserLocale = browserLocale.split("-")[0];
+        }
+
+        let locale = localStorage.getItem("buntspecht.locale") || browserLocale || this.locales[0];
+
+        if (locale == 'de') {
+            locale = 'de-informal';
+        }
+
+        if (this.locales.indexOf(locale) == -1) {
+            locale = this.locales[0];
+        }
+
+        this.setLocale(locale);
+        this.i18n = await this.http.get("/assets/i18n/" + locale + ".json").toPromise();
+        console.debug("fallback to default locale");
+
+    }
+
+    get(key, args: string[] = []): string {
+        return this.getInternal(key, args, this.i18n, "", true);
+    }
+
+    getEmpty(key, args: string[]): string {
+        return this.getInternal(key, args, this.i18n, "", false);
+    }
+
+    getInternal(key, args: string[], from, path, empty: boolean): string {
+        key += '';
+        if (!from) {
+            return empty ? this.empty(key, args, path) : (key || "");
+        } else if (from[key]) {
+            if (typeof from[key] === 'object') {
+                if (from[key]["."]) {
+                    return this.insertArguments(from[key]["."], args);
+                }
+                return empty ? this.empty(key, args, path) : (key || "");
+            }
+            return this.insertArguments(from[key], args);
+        } else {
+            let keys = key.split(".");
+            if (from[keys[0]]) {
+                key = keys.slice(1, keys.length).join(".");
+                return this.getInternal(key, args, from[keys[0]], path + keys[0] + ".", empty)
+            }
+        }
+
+        return empty ? this.empty(key, args, path) : (key || "");
+    }
+
+    empty(key, args: string[], path: string): string {
+        return (path ? path + (path.endsWith(".") ? "" : ".") : "") + key + (args && args.length > 0 ? (" [" + args + "]") : "");
+    }
+
+    insertArguments(label: string, args: string[]) {
+        if (args) {
+            for (let index in args) {
+                label = label.replace(`{${index}}`, this.get(args[index], null));
+            }
+        }
+        return label;
+    }
+
+}
+
+
+@Injectable()
+export class I18nPaginatorIntl implements MatPaginatorIntl {
+
+    changes = new Subject<void>();
+
+    i18n: I18nService;
+
+    itemsPerPageLabel: string;
+    nextPageLabel: string;
+    previousPageLabel: string;
+    firstPageLabel: string;
+    lastPageLabel: string;
+
+
+    injectI18n(i18n: I18nService) {
+        this.i18n = i18n;
+
+        this.firstPageLabel = this.i18n.get('paginator.firstPage', []);
+        this.itemsPerPageLabel = this.i18n.get('paginator.itemsPerPage', []);
+        this.lastPageLabel = this.i18n.get('paginator.lastPage', []);
+
+        this.nextPageLabel = this.i18n.get('paginator.nextPage', []);
+        this.previousPageLabel = this.i18n.get('paginator.previousPage', []);
+
+    }
+
+
+    getRangeLabel(page: number, pageSize: number, length: number): string {
+        if (length === 0) {
+            return this.i18n.get('paginator.empty', []);
+        }
+
+        const amountPages = Math.ceil(length / pageSize);
+        return this.i18n.get('paginator.range', [page + 1 + "", amountPages + ""]);
+    }
+}
@@ -0,0 +1,15 @@
+export class RequestError extends Error {
+
+  response: any;
+
+  constructor(response: any) {
+    super(response.message);
+    this.response = response;
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, RequestError.prototype);
+  }
+
+  getResponse(): any {
+    return this.response;
+  }
+}
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { environment } from '../../environments/environment';
+import { AbstractService } from './abstract.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class TurnoverManagementService {
+
+    constructor(private http: HttpClient, private abstractService: AbstractService) {
+    }
+
+    fetch(limit: number, offset: number, sort: string, descending: boolean, filter: any | undefined) {
+        return this.abstractService.fetch("/turnovers/manage", limit, offset, sort, descending, filter);
+    }
+
+    overview(limit: number, offset: number, sort: string, descending: boolean, filter: any | undefined) {
+        return this.abstractService.fetch("/turnovers/manage/overview", limit, offset, sort, descending, filter);
+    }
+
+    get(id: number) {
+        return this.http.get(environment.apiUrl + "/turnovers/manage/" + id);
+    }
+
+    update(turnover: any) {
+        return this.http.patch(environment.apiUrl + "/turnovers/manage", turnover);
+    }
+
+    delete(id: number) {
+        return this.http.delete(environment.apiUrl + "/turnovers/manage/" + id);
+    }
+}
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { environment } from '../../environments/environment';
+import { AbstractService } from './abstract.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class TurnoverService {
+
+    constructor(private http: HttpClient, private abstractService: AbstractService) {
+    }
+
+    fetch(limit: number, offset: number, sort: string, descending: boolean, filter: any | undefined) {
+        return this.abstractService.fetch("/turnovers", limit, offset, sort, descending, filter);
+    }
+
+    overview(limit: number, offset: number, sort: string, descending: boolean, filter: any | undefined) {
+        return this.abstractService.fetch("/turnovers/overview", limit, offset, sort, descending, filter);
+    }
+
+    get(id: number) {
+        return this.http.get(environment.apiUrl + "/turnovers/" + id);
+    }
+
+    create(turnover: any) {
+        return this.http.post(environment.apiUrl + "/turnovers", turnover);
+    }
+
+    update(turnover: any) {
+        return this.http.patch(environment.apiUrl + "/turnovers", turnover);
+    }
+}
@@ -0,0 +1,42 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { environment } from '../../environments/environment';
+import { AbstractService } from './abstract.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserManagementService {
+
+    constructor(private http: HttpClient, private abstractService: AbstractService) {
+    }
+
+    fetch(limit: number, offset: number, sort: string, descending: boolean, search: string = "") {
+        return this.abstractService.fetch("/users/manage", limit, offset, sort, descending, { filter: search });
+    }
+
+    pick(search: string) {
+        return this.abstractService.fetch("/users/manage/pick", undefined, undefined, undefined, undefined, { filter: search });
+    }
+
+    get(username: string) {
+        return this.http.get(environment.apiUrl + "/users/manage/" + username);
+    }
+
+    create(user: any) {
+        return this.http.post(environment.apiUrl + "/users/manage", user);
+    }
+
+    update(user: any) {
+        return this.http.patch(environment.apiUrl + "/users/manage", user);
+    }
+
+    setPassword(username: string, password: string) {
+        return this.http.post(environment.apiUrl + "/users/manage/" + username + "/password", { password: password, password2: password });
+    }
+
+    deleteUser(username: string) {
+        return this.http.delete(environment.apiUrl + "/users/manage/" + username);
+    }
+}
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    get() {
+        return this.http.get(environment.apiUrl + "/users/user");
+    }
+
+    update(user: any) {
+        return this.http.patch(environment.apiUrl + "/users/user", user);
+    }
+
+    setPassword(old: string, password: string, password2: string) {
+        return this.http.post(environment.apiUrl + "/users/password", { old: old, password: password, password2: password2 });
+    }
+}
@@ -0,0 +1,7 @@
+<mat-dialog-content>
+  {{text}}
+</mat-dialog-content>
+<mat-dialog-actions>
+  <a mat-raised-button [mat-dialog-close]="true" color="accent" matAutofocus>{{'confirm' | i18n}}</a>
+  <a mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</a>
+</mat-dialog-actions>
@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
@@ -0,0 +1,21 @@
+import {Component, Inject} from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {I18nService} from '../../services/i18n.service';
+
+@Component({
+  templateUrl: 'confirm.component.html',
+  styleUrls: ['./confirm.component.scss']
+})
+export class ConfirmDialog {
+
+
+  text;
+
+  constructor(private i18nService: I18nService,
+    public dialogRef: MatDialogRef<ConfirmDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.text = data.empty ? i18nService.getEmpty(data.label, data.args) : i18nService.get(data.label, data.args);
+  }
+
+}
+
@@ -0,0 +1,111 @@
+<mat-toolbar color="primary">
+  @if (authenticated) {
+  <a href="javascript:" mat-icon-button (click)="sidenav.toggle()">
+    <mat-icon>menu</mat-icon>
+  </a>
+  }
+  <a class="main" routerLink="/">
+    <img class="logo margin" src="assets/images/logo.png">
+    <span class="hide-small">{{'buntspecht' | i18n}}</span>
+  </a>
+  <span class="spacer"></span>
+  @if (authenticated && isBiggerScreen) {
+  <a class="margin" routerLink="/create" mat-raised-button color="accent">
+    <mat-icon>edit</mat-icon>
+    {{'turnover.create' | i18n}}
+  </a>
+  } @if (authenticated && !isBiggerScreen) {
+  <a class="margin" routerLink="/create" mat-mini-fab color="accent">
+    <mat-icon>edit</mat-icon>
+  </a>
+  }
+  <ng-container>
+    <button mat-button [matMenuTriggerFor]="menu">
+      <mat-icon>settings</mat-icon>
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      @if (authenticated) {
+      <a mat-menu-item disabled>{{'profile.hello' | i18n:username}}</a>
+      <mat-divider></mat-divider>
+      }
+      <ng-container *ngIf="locales.length > 1">
+        <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">
+          <mat-icon *ngIf="locale == currentLocale">done</mat-icon>{{'locale.' + locale + '.long' |
+          i18n}}
+        </a>
+      </ng-container>
+      <a mat-menu-item (click)="toggleDarkTheme()">
+        <mat-slide-toggle [checked]="darkTheme">
+          {{'darkTheme' | i18n}}
+        </mat-slide-toggle>
+      </a>
+      <mat-divider></mat-divider>
+      @if (authenticated) {
+      <a routerLink="/profile" routerLinkActive="active" mat-menu-item>
+        <mat-icon>tune</mat-icon> {{'profile' | i18n}}
+      </a>
+      <a routerLink="/password" routerLinkActive="active" mat-menu-item>
+        <mat-icon>lock</mat-icon> {{'password' | i18n}}
+      </a>
+      <mat-divider></mat-divider>
+      <a (click)="logout()" mat-menu-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+      }
+      @if (!authenticated) {
+      <a routerLink="/login" routerLinkActive="active" mat-menu-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      }
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+
+<mat-sidenav-container>
+  <mat-sidenav #sidenav [mode]="isBiggerScreen ? 'side' : 'over'" [opened]="opened" [autoFocus]="false"
+    (click)="!isBiggerScreen && this.close()">
+    @if (authenticated) {
+    <mat-nav-list>
+      <a routerLink="" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
+        <mat-icon matListItemIcon>receipt</mat-icon>
+        <span>{{(admin ? 'turnovers.mine' : 'turnovers') | i18n}}</span>
+      </a>
+      @if(admin) {
+      <mat-divider></mat-divider>
+      <a routerLink="m" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
+        <mat-icon matListItemIcon>insert_chart_outlined</mat-icon>
+        <span>{{'management' | i18n}}</span>
+      </a>
+      <a routerLink="t" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
+        <mat-icon matListItemIcon>receipt_long</mat-icon>
+        <span>{{'turnovers' | i18n}}</span>
+      </a>
+      <mat-divider></mat-divider>
+      <a routerLink="u" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
+        <mat-icon matListItemIcon>people</mat-icon>
+        <span>{{'users' | i18n}}</span>
+      </a>
+      <span class="spacer"></span>
+      }
+    </mat-nav-list>
+    }
+
+    <span class="spacer"></span>
+
+
+    @if(debug) {
+    <mat-nav-list>
+      <a mat-list-item (click)="random()">Random Data</a>
+    </mat-nav-list>
+    }
+    @if(admin) {
+    }
+
+  </mat-sidenav>
+
+  <!-- Main content -->
+  <mat-sidenav-content>
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>
@@ -0,0 +1,15 @@
+mat-sidenav {
+  min-width: 200px;
+}
+
+a.main {
+  display: flex;
+  align-items: center;
+  color: white;
+  text-decoration: none;
+
+  img.logo {
+    height: 40px;
+    width: auto;
+  }
+}
@@ -0,0 +1,249 @@
+import { Component, HostListener, ViewChild } from '@angular/core';
+import { DateAdapter } from '@angular/material/core';
+import { Router } from '@angular/router';
+import { fromEvent } from 'rxjs';
+
+import { AuthService } from '../../services/auth.service';
+import { I18nService } from '../../services/i18n.service';
+import { UserService } from '../../services/user.service';
+
+import { SwUpdate } from '@angular/service-worker';
+import packageJson from '../../../../package.json';
+import { MatSidenav } from '@angular/material/sidenav';
+import { DebugService } from 'src/app/services/debug.service';
+
+@Component({
+  selector: 'ui-main',
+  templateUrl: './main.ui.html',
+  styleUrls: ['./main.ui.scss']
+})
+export class UiMain {
+
+  opened: boolean = true;
+  darkTheme: boolean = false;
+  title = 'buntspecht';
+  currentLocale: String;
+  datetimeformat: String;
+  locales;
+  authenticated: boolean = false;
+  username: string = "";
+  admin: boolean = false;
+  debug: boolean = false;
+  hasUpdate: boolean = false;
+  isBiggerScreen: boolean = false;
+
+  touchThresh: number = 150;
+  touchStartX: number;
+  touchX: number;
+
+  version = packageJson.version;
+
+  @ViewChild('sidenav') sidenav: MatSidenav;
+
+  constructor(
+    private i18n: I18nService,
+    private authService: AuthService,
+    private userService: UserService,
+    private debugService: DebugService,
+    private router: Router,
+    private _adapter: DateAdapter<any>,
+    private swUpdate: SwUpdate) {
+
+    this.swUpdate.versionUpdates.subscribe({
+      next: (evt) => {
+        if (evt.type == 'VERSION_READY') {
+          this.hasUpdate = true;
+        } else if (evt.type == 'VERSION_INSTALLATION_FAILED') {
+          console.error(`Failed to install version '${evt.version.hash}': ${evt.error}`);
+        }
+      }
+    })
+
+    if (this.swUpdate.isEnabled) {
+      // check for PWA update every 30s
+      setInterval(() => {
+        this.swUpdate.checkForUpdate();
+      }, 30000);
+    }
+  }
+
+  async ngOnInit() {
+    this.datetimeformat = this.i18n.get('format.datetime', []);
+    this.currentLocale = this.i18n.getLocale();
+    this.locales = this.i18n.getLocales();
+    this.authService.auth.subscribe({
+      next: (auth) => {
+        this.authenticated = true;
+        this.username = auth.username;
+        this.admin = auth.authorities && auth.authorities.find((role) => role.authority == 'ROLE_ADMIN') != undefined;
+        this.debug = auth.authorities && auth.authorities.find((role) => role.authority == 'ROLE_DEBUG') != undefined;
+      },
+      error: (error) => {
+        this.authenticated = false;
+        this.opened = false;
+      }
+    })
+
+    this._adapter.setLocale(this.currentLocale);
+
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    if (width < 768) {
+      this.opened = false;
+      this.isBiggerScreen = false;
+    } else {
+      this.opened = true;
+      this.isBiggerScreen = true;
+    }
+
+    if (localStorage.getItem("buntspecht.darkTheme") == "true") {
+      this.darkTheme = true;
+      window.document.body.classList.add("dark-theme");
+    }
+
+    this.touchEvents();
+  }
+
+  setLocale(locale) {
+    localStorage.setItem("buntspecht.locale", locale);
+
+    if (this.authenticated) {
+      this.userService.get().subscribe({
+        next: (user: any) => {
+          user.locale = locale;
+          this.userService.update(user).subscribe({
+            next: () => {
+              window.location.reload();
+            }
+          })
+        }
+      });
+    } else {
+      window.location.reload();
+    }
+  }
+
+  close() {
+    this.opened = false;
+    this.sidenav.close();
+  }
+
+  preventClose(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  toggleDarkTheme() {
+    this.darkTheme = !this.darkTheme;
+
+    localStorage.setItem("buntspecht.darkTheme", this.darkTheme ? "true" : "false");
+
+    if (this.authenticated) {
+      this.userService.get().subscribe({
+        next: (user: any) => {
+          user.darkTheme = this.darkTheme;
+          this.userService.update(user).subscribe({
+            next: () => {
+              window.location.reload();
+            }
+          })
+        }
+      });
+    } else {
+      window.location.reload();
+    }
+
+  }
+
+  logout() {
+    localStorage.removeItem("buntspecht.autologin");
+    this.authService.logout().subscribe({
+      next: () => {
+        this.router.navigate([""]).then(() => {
+          window.location.reload();
+        });
+      }
+    })
+  }
+
+  openExternal(event, url, target = '_self') {
+    window.open(url, target);
+    this.preventClose(event);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (event.target.innerWidth < 768) {
+      this.opened = false;
+      this.isBiggerScreen = false;
+    } else {
+      this.opened = true;
+      this.isBiggerScreen = true;
+    }
+  }
+
+  touchEvents(): void {
+    fromEvent(document, 'touchstart').subscribe({
+      next: (event: TouchEvent) => {
+        if (event.touches[0]) {
+          this.touchStartX = event.touches[0].screenX;
+        }
+      }
+    })
+
+    fromEvent(document, 'touchmove').subscribe({
+      next: (event: TouchEvent) => {
+        if (event.touches[0]) {
+          this.touchX = event.touches[0].screenX;
+        }
+      }
+    })
+
+    fromEvent(document, 'touchend').subscribe({
+      next: () => {
+        if (this.touchX != 0) {
+          const touchDiff = this.touchStartX - this.touchX;
+          this.touchStartX = 0;
+          this.touchX = 0;
+          if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
+            this.opened = true;
+          } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
+            this.opened = false;
+          }
+        }
+      }
+    })
+  }
+
+  updateSw(force: boolean = false): void {
+    if (this.hasUpdate || force) {
+      if (this.swUpdate.isEnabled) {
+        this.swUpdate.activateUpdate().then(() => {
+          this.clearAndRefresh();
+        });
+      } else {
+        this.clearAndRefresh();
+      }
+    }
+  }
+
+  clearAndRefresh() {
+    if ('caches' in window) {
+      caches.keys()
+        .then(function (keyList) {
+          return Promise.all(keyList.map(function (key) {
+            return caches.delete(key);
+          }));
+        })
+    }
+    window.location.reload();
+  }
+
+  random() {
+    this.debugService.random().subscribe({
+      next: () => {
+        window.location.reload();
+      }
+    });
+  }
+}
+
@@ -0,0 +1,154 @@
+@if (turnovers && turnovers.error) {
+<div class="flex column fill">
+    <mat-card class="accent box">
+        <mat-card-header>
+            <mat-card-title>{{ 'turnovers.error.' + turnovers.error.status | i18n}}</mat-card-title>
+            <mat-card-subtitle>{{'turnovers.error' | i18n}}</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+            <p>
+                {{ 'turnovers.error.' + turnovers.error.status + '.text' | i18n}}
+            </p>
+        </mat-card-content>
+    </mat-card>
+</div>
+}
+
+@if (turnovers) {
+
+@if (turnovers.total == 0) {
+<mat-list>
+    <mat-list-item>
+        <p>{{'paginator.empty' | i18n}}</p>
+    </mat-list-item>
+</mat-list>
+}
+
+@if(turnovers.total) {
+<div class="scroll-container">
+    <table class="default-table" mat-table [dataSource]="turnovers.results" matSort [matSortDisabled]="!enableSort"
+        (matSortChange)="sort.emit($event)" [matSortDisableClear]="true">
+
+        <ng-container matColumnDef="username">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.username' | i18n}}</th>
+            <td mat-cell *matCellDef="let turnover">{{turnover.username}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="dueDate">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'turnover.dueDate' |
+                i18n}}
+            </th>
+            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.dueDate | datef:'LL'}}">
+                <span class="nowrap">{{turnover.dueDate | datef:'L'}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="customer">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.customer' | i18n}}</th>
+            <td mat-cell *matCellDef="let turnover">{{turnover.customer}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="motif">
+            <th mat-header-cell *matHeaderCellDef>{{'turnover.motif' | i18n}}</th>
+            <td mat-cell *matCellDef="let turnover">
+                <span class="ellipsis" matTooltip="{{turnover.motif}}">{{turnover.motif}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="price">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                <span class="spacer"></span>
+                <span>{{'turnover.price' | i18n}}</span>
+            </th>
+            <td mat-cell *matCellDef="let turnover">
+                <div class="flex">
+                    <span class="spacer"></span>
+                    <span>{{turnover.price | number: '1.2-2'}}</span>
+                    <span>&nbsp;{{'turnover.price.suffix' | i18n}}</span>
+                </div>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="timeInvestment">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                <span class="spacer"></span>
+                <span>{{'turnover.timeInvestment' | i18n}}</span>
+            </th>
+            <td mat-cell *matCellDef="let turnover">
+                @if (turnover.timeInvestment) {
+                <div class="flex">
+                    <span class="spacer"></span>
+                    <span>{{turnover.timeInvestment | number: '1.1-1'}}</span>
+                    <span> &nbsp;{{'turnover.timeInvestment.suffix' | i18n}}</span>
+                </div>
+                }
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="remark">
+            <th mat-header-cell *matHeaderCellDef>{{'turnover.remark' | i18n}}</th>
+            <td mat-cell *matCellDef="let turnover">
+                <span class="ellipsis" matTooltip="{{turnover.remark}}">{{turnover.remark}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="materialConsumption">
+            <th mat-header-cell *matHeaderCellDef>{{'turnover.materialConsumption' | i18n}}</th>
+            <td mat-cell *matCellDef="let turnover">
+                <span class="ellipsis"
+                    matTooltip="{{turnover.materialConsumption}}">{{turnover.materialConsumption}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="created">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.created' |
+                i18n}}
+            </th>
+            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.created | datef:'LLLL'}}">
+                <span class="nowrap">{{turnover.created | datef}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="updated">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                <span class="spacer"></span>
+                <span>{{'turnover.updated' | i18n}}</span>
+            </th>
+            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.updated | datef:'LLLL'}}">
+                <div class="flex">
+                    <span class="spacer"></span>
+                    @if(turnover.created != turnover.updated) {
+                    <span class="nowrap">{{turnover.updated | datef}}</span>
+                    }
+                </div>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+        <tr class="turnover" [ngClass]="{'disabled': !linkTurnover}" (click)="select(turnover)" mat-row
+            *matRowDef="let turnover; columns: columns;"></tr>
+    </table>
+</div>
+}
+
+
+
+<span class="spacer"></span>
+
+<div class="mat-mdc-paginator flex wrap">
+    @if (overview && overview.length > 2) {
+    <div class="overview flex middle">
+        <span class="margin">{{'turnover.price.total' | i18n:(overview[1] | number: '1.2-2')}}</span> <span
+            class="margin">{{'turnover.timeInvestment.total' | i18n:(overview[2] | number: '1.1-1')}}</span>
+    </div>
+    }
+    <span class="spacer"></span>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="turnovers.offset / turnovers.limit"
+        [length]="turnovers.total" [pageSize]="turnovers.limit" (page)="page.emit($event)" showFirstLastButtons>
+    </mat-paginator>
+</div>
+}
+
+@if (!turnovers || !turnovers.results && !turnovers.error) {
+<mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
+}
@@ -0,0 +1,20 @@
+tr.turnover {
+    &:hover {
+        cursor: pointer;
+        opacity: 0.7;
+    }
+
+    &.disabled {
+        pointer-events: none;
+    }
+}
+
+.mat-column-created {
+    @media screen and (min-width: 992px) {
+        min-width: 160px;
+    }
+}
+
+.overview {
+    margin: 5px;
+}
@@ -0,0 +1,96 @@
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { Router } from '@angular/router';
+import moment from 'moment';
+import { I18nService } from 'src/app/services/i18n.service';
+
+@Component({
+  selector: 'ui-turnovers',
+  templateUrl: './turnovers.ui.html',
+  styleUrls: ['./turnovers.ui.scss']
+})
+export class UiTurnovers implements OnInit {
+
+  @Input() turnovers: any;
+  @Input() overview: any[];
+  @Input() showFilter: boolean = true;
+  @Input() linkTurnover: boolean = true;
+  @Input() username: boolean = false;
+  @Input() enableSort: boolean = true;
+  @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+  @Output() sort: EventEmitter<Sort> = new EventEmitter<Sort>();
+
+  pageSizeOptions: number[] = [1, 2, 3, 4, 5, 10, 15, 30, 50, 100];
+
+  columns: string[] = [];
+
+  constructor(
+    private router: Router,
+    private i18n: I18nService
+  ) { }
+
+  ngOnInit(): void {
+    this.applyResize(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.applyResize(event.target.innerWidth || event.target.documentElement.clientWidth || event.target.body.clientWidth)
+  }
+
+  applyResize(width: number) {
+    if (width < 992) {
+      this.columns = ['customer', 'price', 'motif'];
+    } else {
+      this.columns = ['customer', 'motif', 'price', 'timeInvestment', 'remark', 'materialConsumption', 'created', 'updated'];
+    }
+    if (this.username) {
+      this.columns.unshift('username');
+    }
+    this.columns.unshift('dueDate');
+  }
+
+  select(row: any) {
+    this.router.navigateByUrl('/t/' + row.id);
+  }
+
+  getCsvRows(): any[] {
+    if (this.turnovers.total) {
+      let rows = [[
+        this.i18n.get('turnover.dueDate'),
+        this.i18n.get('turnover.customer'),
+        this.i18n.get('turnover.motif'),
+        this.i18n.get('turnover.price'),
+        this.i18n.get('turnover.timeInvestment'),
+        this.i18n.get('turnover.remark'),
+        this.i18n.get('turnover.materialConsumption'),
+        this.i18n.get('turnover.created'),
+        this.i18n.get('turnover.updated')]];
+
+      if (this.username) {
+        rows[0].unshift(
+          this.i18n.get('turnover.username'));
+      }
+
+      this.turnovers.results.forEach(turnover => {
+        rows[rows.length] = [
+          moment(turnover.dueDate).format('L'),
+          turnover.customer,
+          turnover.motif,
+          turnover.price.toFixed(2),
+          turnover.timeInvestment.toFixed(1),
+          turnover.remark,
+          turnover.materialConsumption,
+          moment(turnover.created).format(this.i18n.get('turnovers.export.dateformat')),
+          moment(turnover.updated).format(this.i18n.get('turnovers.export.dateformat'))
+        ]
+        if (this.username) {
+          rows[rows.length - 1].unshift(turnover.username);
+        }
+      });
+      return rows;
+    }
+    return [];
+  }
+}
@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+
+import { I18nService } from './../services/i18n.service';
+
+@Pipe({
+    name: 'i18n'
+})
+export class I18nPipe implements PipeTransform {
+
+
+    constructor(private i18n: I18nService) {
+    }
+
+    transform(value: String, ...args: any[]): String {
+        return this.i18n.get(value, args);
+    }
+}
+
+@Pipe({
+    name: 'i18nEmpty'
+})
+export class I18nEmptyPipe implements PipeTransform {
+
+    constructor(private i18n: I18nService) {
+    }
+
+    transform(value: String, ...args: any[]): String {
+        return this.i18n.getEmpty(value, args);
+    }
+}
@@ -0,0 +1,22 @@
+import { FormGroup } from '@angular/forms';
+
+export function MatchingValidator(passwordName: string, password2Name: string) {
+
+    return (formGroup: FormGroup) => {
+
+        const password = formGroup.controls[passwordName];
+        const password2 = formGroup.controls[password2Name];
+
+        if (password2.errors && !password2.errors.NOT_MATCH) {
+            return;
+        }
+
+        if (password.value !== password2.value) {
+            password2.setErrors({ NOT_MATCH: true });
+        } else {
+            password2.setErrors(null);
+        }
+
+    }
+
+}
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+@Pipe({ name: 'datef' })
+export class MomentPipe implements PipeTransform {
+  transform(value: Date | moment.Moment, dateFormat: string | undefined = undefined): any {
+    if (!dateFormat) {
+      return moment(value).fromNow();
+    }
+    
+    return moment(value).format(dateFormat);
+  }
+}
@@ -0,0 +1,190 @@
+{
+	"buntspecht": {
+		".": "Buntspecht"
+	},
+	"cancel": "Abbrechen",
+	"confirm": "Bestätigen",
+	"darkTheme": "Dunkles Thema",
+	"locale": {
+		"de-informal": {
+			"long": "Deutsch",
+			"short": "DE"
+		},
+		"en": {
+			"long": "English",
+			"short": "EN"
+		}
+	},
+	"login": {
+		".": "Login",
+		"autologin": "Automatisch einloggen",
+		"external": {
+			".": "Login",
+			"client": "mit {0} einloggen",
+			"invalid": "Login fehlgeschlagen"
+		},
+		"internal": "Login",
+		"invalid": "Falscher Username oder Password",
+		"keepSession": "eingeloggt bleiben",
+		"password": "Passwort",
+		"username": "Username"
+	},
+	"logout": "Logout",
+	"management": {
+		".": "Verwaltung",
+		"filter": {
+			"created": {
+				".": "Erstellt",
+				"from": "von",
+				"to": "bis"
+			},
+			"dueDate": {
+				".": "Zeitraum",
+				"from": "von",
+				"to": "bis"
+			},
+			"username": "User auswählen"
+		}
+	},
+	"not-found": {
+		".": "Nicht gefunden",
+		"text": "Seite nicht gefunden"
+	},
+	"paginator": {
+		"empty": "Keine Ergebnisse",
+		"firstPage": "Erste Seite",
+		"itemsPerPage": "Einträge pro Seite:",
+		"lastPage": "Letzte Seite",
+		"nextPage": "Nächste Seite",
+		"previousPage": "Vorherige Seite",
+		"range": "Seite {0} von {1}"
+	},
+	"password": {
+		".": "Passwort ändern",
+		"error": {
+			"ILLEGAL_WHITESPACE": "Bitte keine Leerzeichen verwenden.",
+			"INSUFFICIENT_DIGIT": "Bitte mindestens eine Zahl eingeben.",
+			"INSUFFICIENT_LOWERCASE": "Bitte mindestens einen Kleinbuchstaben eingeben.",
+			"INSUFFICIENT_SPECIAL": "Bitte mindestens ein Sonderzeichen eingeben.",
+			"INSUFFICIENT_UPPERCASE": "Bitte mindestens einen Großbuchstaben eingeben.",
+			"NOT_MATCH": "Passwörter stimmen nicht überein.",
+			"TOO_SHORT": "Bitte ein längeres Passwort wählen.",
+			"UNAUTHORIZED": "Falsches Passwort"
+		},
+		"old": "Altes Password",
+		"new": "Neues Password",
+		"repeat": "Neues Password wiederholen",
+		"success": "Erfolgreich gespeichert",
+		"update": "Aktualisieren"
+	},
+	"profile": {
+		".": "Profil",
+		"about": "Über",
+		"darkTheme": "Dunkles Thema",
+		"email": "E-Mail Adresse",
+		"hello": "Hallo {0}",
+		"name": "Voller Name",
+		"success": "Erfolgreich gespeichert",
+		"update": "Aktualisieren",
+		"username": "Username"
+	},
+	"service-unavailable": {
+		".": "Dienst nicht erreichbar",
+		"retry": "Seite neu laden",
+		"support": "Support",
+		"text": "Zurzeit scheint der Dienst nicht erreichbar zu sein. Wenn diese Meldung länger besteht, melde dich beim Support!"
+	},
+	"turnover": {
+		".": "Buchung",
+		"confirmDelete": "Möchtest du diese Buchung von '{0}' wirklich löschen?",
+		"create": "Buchung erstellen",
+		"created": {
+			".": "Erstellt",
+			"label": {
+				".": "Erstellt am {0}",
+				"username": "Erstellt am {0} von {1}"
+			}
+		},
+		"customer": {
+			".": "Kunde",
+			"error": "Angabe von Kunde erforderlich"
+		},
+		"dueDate": {
+			".": "Fälligkeitsdatum",
+			"label": {
+				".": "Fällig am {0}"
+			}
+		},
+		"delete": "Löschen",
+		"edit": "Buchung bearbeiten",
+		"info": "Neue Buchung erstellen",
+		"materialConsumption": "Materialverbrauch",
+		"motif": {
+			".": "Motiv",
+			"error": "Angabe von Motiv erforderlich"
+		},
+		"price": {
+			".": "Preis",
+			"error": "Angabe des Preises erforderlich",
+			"suffix": "€",
+			"total": "Umsatz: {0} €"
+		},
+		"remark": "Bemerkungen",
+		"success": "Erfolgreich gespeichert",
+		"timeInvestment": {
+			".": "Zeiteinsatz",
+			"suffix": "Std.",
+			"total": "Zeiteinsatz: {0} Std."
+		},
+		"update": "Aktualisieren",
+		"updated": {
+			".": "Aktualisiert",
+			"label": "Zuletzt aktualisiert am {0}"
+		},
+		"username": "User"
+	},
+	"turnovers": {
+		".": "Buchungen",
+		"export": {
+			".": "Als CSV exportieren",
+			"dateformat": "DD.MM.YYYY-HH:mm"
+		},
+		"filter": {
+			".": "Filter",
+			"created": {
+				".": "Erstellt",
+				"from": "von",
+				"to": "bis"
+			},
+			"dueDate": {
+				".": "Zeitraum",
+				"from": "von",
+				"to": "bis"
+			},
+			"customer": "Kunde durchsuchen",
+			"motif": "Motiv durchsuchen",
+			"username": "User auswählen"
+		},
+		"mine": "Eigene Buchungen"
+	},
+	"updateSw": "Update?",
+	"user": {
+		"admin": "Administrator",
+		"confirmDelete": "Möchtest du den User '{0}' wirklich löschen? ALLE Buchungen dieses Users werden ebenfalls gelöscht!",
+		"create": "Neuen User erstellen",
+		"delete": "User löschen",
+		"error": {
+			"ALREADY_EXISTS": "User existiert bereits"
+		},
+		"manage": "Verwalten",
+		"password": "Passwort",
+		"username": "User"
+	},
+	"users": {
+		".": "User verwalten",
+		"filter": {
+			".": "Filter",
+			"search": "Nach Username filtern"
+		}
+	}
+}
@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl : 'https://buntspecht.8lh.de/api'
+};
@@ -0,0 +1,18 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  // apiUrl : 'http://localhost:8080/api',
+  apiUrl : 'https://buntspecht.dev.lh8.de/api',
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Buntspecht</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="assets/icons/favicon.png">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+</head>
+<body>
+  <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
+</html>
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
@@ -0,0 +1,59 @@
+{
+  "name": "buntspecht",
+  "short_name": "buntspecht",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
@@ -0,0 +1,13 @@
+
+import '@angular/localize/init';
+
+
+
+
+
+
+
+import 'zone.js';  // Included with Angular CLI.
+
+
+
@@ -0,0 +1,398 @@
+// Custom Theming for Angular Material
+@use '@angular/material' as mat;
+// For more information: https://material.angular.io/guide/theming
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+@import './variables.scss';
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($light-theme);
+
+.dark-theme {
+  @include mat.all-component-colors($dark-theme);
+}
+
+
+/* You can add global styles to this file, and also import other style files */
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(assets/fonts/material_icons.woff2) format('woff2');
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+
+app-root,
+ui-main {
+  height: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+app-root {
+  padding: 15px;
+  background-color: #fafafa;
+}
+
+ui-main {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+mat-form-field {
+  display: block;
+}
+
+mat-form-field {
+  &.ng-valid {
+    .mat-form-field-wrapper {
+      padding-bottom: 1.25em;
+    }
+  }
+
+  &.ng-invalid,
+  &.mat-form-field-invalid {
+    .mat-form-field-wrapper {
+      padding-bottom: 7px;
+    }
+  }
+
+  &.ng-untouched {
+    .mat-form-field-wrapper {
+      padding-bottom: 1.25em;
+    }
+  }
+
+  .mat-form-field {
+    &-underline {
+      position: static;
+    }
+
+    &-subscript-wrapper {
+      position: static;
+    }
+  }
+
+  .mat-mdc-form-field-hint-wrapper,
+  .mat-mdc-form-field-error-wrapper {
+    position: relative !important;
+    padding: 0;
+  }
+}
+
+qrcode {
+  margin: 0 auto;
+  text-align: center;
+}
+
+qrcode canvas {
+  width: 100% !important;
+  height: auto !important;
+  max-width: 400px !important;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.flex {
+  display: flex !important;
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.fill {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.space-between {
+    justify-content: space-between;
+  }
+
+  &.space-around {
+    justify-content: space-around;
+  }
+
+  &.middle {
+    align-items: center;
+  }
+}
+
+
+@media (max-width: 576px) {
+  mat-paginator {
+    .mat-mdc-paginator-range-actions {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+
+.scroll-container {
+  overflow: auto;
+}
+
+.scroll-x-container {
+  overflow-x: auto;
+}
+
+.scroll-y-container {
+  overflow-y: auto;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.margin {
+  margin: 0 15px;
+}
+
+.hint {
+  opacity: 0.7;
+}
+
+.ellipsis {
+  display: block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mat-drawer-inner-container {
+  display: flex;
+  flex-direction: column;
+}
+
+mat-sidenav-container {
+  height: 100%;
+  max-height: 100%;
+}
+
+.container {
+  width: 100%;
+  max-width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-warning {
+  color: $warn;
+}
+
+.align-right {
+  display: flex;
+  padding: 21px 0;
+  justify-content: flex-end;
+}
+
+.mat-tooltip-trigger {
+  cursor: pointer;
+}
+
+mat-card.warn,
+mat-card.accent {
+
+  padding: 0;
+
+  mat-card-content {
+    padding: 16px;
+
+  }
+
+  mat-card-header {
+    padding: 16px;
+    padding-bottom: 0;
+  }
+
+  mat-card-actions {
+    padding: 16px !important;
+    padding-top: 0 !important;
+  }
+
+}
+
+mat-card.warn mat-card-header {
+  background-color: $warn !important;
+}
+
+mat-card.accent mat-card-header {
+  background-color: $accent !important;
+}
+
+
+.mat-sort-header-content {
+  flex: 1 1 auto;
+}
+
+table.default-table {
+  border: 0;
+  border-spacing: 0;
+  width: 100%;
+  background: white;
+  overflow: auto;
+
+  th,
+  td,
+  td {
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 14px;
+    border: 0;
+    padding: 14px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: rgba(0, 0, 0, 0.12);
+  }
+
+  th:first-of-type,
+  td:first-of-type,
+  td:first-of-type {
+    padding-left: 24px;
+  }
+
+  thead {
+    tr {
+      height: 56px;
+
+      th {
+        color: rgba(0, 0, 0, 0.54);
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+a[href*="//"]::after {
+  font-family: "Material Icons";
+  font-size: 10px;
+  display: inline-block;
+  position: relative;
+  top: -3px;
+  content: "launch";
+  color: #6e6e6e;
+  text-decoration: none
+}
+
+
+.dark-theme {
+
+  app-root {
+    background-color: #303030;
+  }
+  
+  a {
+    color: $accent;
+  }
+
+  table.default-table {
+
+    background: #424242;
+
+    th,
+    td,
+    td {
+      color: white;
+      border-bottom-color: rgba(255, 255, 255, 0.12);
+    }
+
+
+    thead {
+      tr {
+        th {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+    }
+  }
+
+  a[href*="//"]::after {
+    color: #aeaeae;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .hide-small {
+    display: none;
+  }
+}
@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
@@ -0,0 +1,33 @@
+@use '@angular/material' as mat;
+
+$light-primary: mat.m2-define-palette(mat.$m2-grey-palette, 800);
+$light-accent: mat.m2-define-palette(mat.$m2-grey-palette, A400, A200, A700);
+$light-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+$dark-primary: mat.m2-define-palette(mat.$m2-grey-palette, 900, 500, 700);
+$dark-accent: mat.m2-define-palette(mat.$m2-grey-palette, A200, A100, A400);
+$dark-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$light-theme: mat.m2-define-light-theme((color: (primary: $light-primary,
+        accent: $light-accent,
+        warn: $light-warn,
+      )));
+
+// Define an alternate dark theme.
+$dark-theme: mat.m2-define-dark-theme((color: (primary: $dark-primary,
+        accent: $dark-accent,
+        warn: $dark-warn,
+      )));
+
+$primary: mat.get-theme-color($light-theme, primary, default);
+$accent: mat.get-theme-color($light-theme, accent, default);
+$warn: mat.get-theme-color($light-theme, warn, default);
+
+.dark-theme {
+  $primary: mat.get-theme-color($dark-theme, primary, default);
+  $accent: mat.get-theme-color($dark-theme, accent, default);
+  $warn: mat.get-theme-color($dark-theme, warn, default);
+}